/*
  Quibley's shared look: the desk, the sheet of paper, typewriter type and the common controls.
  Taken from Redacted (which keeps its own inline copy); new games build on this file.
*/
:root{
  --desk:#E4E5E2;--desk-ink:#1A1B1A;--desk-muted:#5D615E;--desk-line:#C6C9C4;
  --paper:#FFFFFF;--ink:#141414;--ink-muted:#62656A;--rule:#D5D6D2;--bar:#0A0A0A;--bar-ink:#FFFFFF;
  --stamp:#C1272D;--hit:#2E7D4F;--on-hit:#FFFFFF;--fit:#E3A61C;--on-fit:#1E1600;--logo-tail:#7C4DFF;
  --font-type:'Courier Prime','Courier New',Courier,monospace;
  --font-ui:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--desk:#141514;--desk-ink:#E8E8E5;--desk-muted:#9A9D99;--desk-line:#343734;color-scheme:dark}
}
:root[data-theme="dark"]{--desk:#141514;--desk-ink:#E8E8E5;--desk-muted:#9A9D99;--desk-line:#343734;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0;background:var(--desk);color:var(--desk-ink);font-family:var(--font-ui);font-size:15px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:22px 40px;
}
.page{max-width:660px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--stamp);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header: Quibley mark | game logo ......... How to play */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.home{display:grid;place-items:center;flex:none;color:var(--desk-ink);opacity:.85;padding:2px}
.home:hover{opacity:1}
.home svg{width:26px;height:26px}
.brand .sep{width:1px;height:26px;background:var(--desk-line);flex:none}
.logo{margin:0;font-family:var(--font-type);font-weight:700;font-size:clamp(30px,7vw,42px);line-height:1;letter-spacing:.02em;white-space:nowrap}
.logo .x{background:var(--desk-ink);color:var(--desk);padding:0 .06em}
.ghost{
  appearance:none;border:1px solid var(--desk-line);background:transparent;color:var(--desk-ink);
  font-family:var(--font-ui);font-size:13px;font-weight:600;padding:7px 13px;border-radius:999px;cursor:pointer;white-space:nowrap;
}
.ghost span{color:var(--desk-muted);font-weight:400;margin-left:4px}
.ghost:disabled{color:var(--desk-muted);cursor:default;opacity:.6}

/* how to play */
.help{border:1px solid var(--desk-line);border-radius:10px;padding:16px 18px;display:grid;gap:14px}
.help h2{margin:0;font-family:var(--font-type);font-size:20px;font-weight:700}
.help ol,.help ul{margin:0;padding-left:20px;display:grid;gap:5px}
.help p{margin:0}
.note{color:var(--desk-muted);font-size:14px}

/* mode tabs and the paper */
.file{display:flex;flex-direction:column}
.tabs{display:flex;gap:4px;padding-left:10px}
.tab{
  appearance:none;padding:8px 14px 7px;border:1px solid var(--desk-line);border-bottom:0;border-radius:7px 7px 0 0;
  background:transparent;color:var(--desk-muted);font-family:var(--font-ui);font-weight:800;font-size:13px;letter-spacing:.04em;cursor:pointer;
}
.tab[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.tab .mk{margin-left:5px}
.tab .mk.won{color:var(--hit)}
.tab .mk.lost{color:var(--stamp)}
.tab .count{margin-left:6px;font-weight:600;color:var(--desk-muted)}
.tab[aria-pressed="true"] .count{color:var(--ink-muted)}
.doc{
  position:relative;background:var(--paper);color:var(--ink);overflow:hidden;
  padding:22px clamp(18px,4.5vw,36px) 26px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 22px 44px -26px rgba(0,0,0,.45);
}
.doc-head{
  display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;min-height:30px;
  font-family:var(--font-type);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding-bottom:10px;border-bottom:2px solid var(--ink);
}
.subject{
  display:flex;justify-content:space-between;align-items:baseline;gap:6px 14px;flex-wrap:wrap;margin-top:12px;
  font-family:var(--font-type);font-size:14px;letter-spacing:.06em;text-transform:uppercase;
}
.level{color:var(--ink-muted);font-size:12px;letter-spacing:.1em;white-space:nowrap}
.label{
  display:flex;align-items:center;gap:10px;margin:20px 0 9px;
  font-family:var(--font-type);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);
}
.label::after{content:"";flex:1;border-top:1px dashed var(--rule);order:1}
.label .left{order:2;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.muted{color:var(--ink-muted)}

/* buttons, results and stats */
.btn{
  appearance:none;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);
  font-family:var(--font-ui);font-weight:800;font-size:14px;padding:9px 16px;cursor:pointer;
}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn:disabled{opacity:.5;cursor:default}
.btn-row{display:flex;flex-wrap:wrap;gap:8px}
.result{margin-top:18px;padding-top:14px;border-top:2px solid var(--ink);display:grid;gap:9px;font-family:var(--font-type)}
.result h2{margin:0;font-size:22px;letter-spacing:.06em;text-transform:uppercase}
.result h2:focus{outline:none}   /* focused by script when a game ends, for screen readers */
.result p{margin:0}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:10px 0;border-block:1px dashed var(--rule)}
.stat{display:grid;min-width:0}
.stat b{font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-family:var(--font-ui);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.share-img{display:block;justify-self:start;width:100%;max-width:380px;height:auto}
.stamp{
  position:absolute;right:clamp(12px,4vw,30px);top:54px;pointer-events:none;z-index:3;
  font-family:var(--font-type);font-weight:700;font-size:clamp(20px,4.6vw,30px);letter-spacing:.12em;
  color:var(--stamp);border:4px double var(--stamp);padding:1px 11px;transform:rotate(-10deg);opacity:.9;background:rgba(255,255,255,.55);
}
.stamp.fresh{animation:stamp .5s cubic-bezier(.2,1.3,.4,1)}
@keyframes stamp{from{transform:rotate(-10deg) scale(1.9);opacity:0}to{transform:rotate(-10deg) scale(1);opacity:.9}}
.toast{
  position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translateX(-50%);
  background:var(--desk-ink);color:var(--desk);padding:9px 16px;border-radius:999px;font-size:14px;font-weight:700;
  z-index:20;max-width:calc(100% - 32px);text-align:center;
}
.site-foot{margin-top:8px;padding-top:14px;border-top:1px solid var(--desk-line);font-size:13px;color:var(--desk-muted);text-align:center}
.site-foot a{color:var(--desk-ink);font-weight:700;text-decoration:none}
.site-foot a:hover{text-decoration:underline}
@media (max-width: 600px){
  body{padding-block:12px 20px}
  .page{gap:10px}
  .logo{font-size:30px}
  .home svg{width:22px;height:22px}
  .brand{gap:9px}
  .brand .sep{height:22px}
  .doc{padding:15px 16px 18px}
  .doc-head{min-height:0;padding-bottom:8px}
  .subject{margin-top:9px}
  .label{margin:12px 0 7px}
  .stamp{top:44px}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}