/* «جاوبها!» · ثيم الأسطوانات: a record shop and its listening room. A warm paper wall, light
   oak, a white enamel turntable, black only where vinyl is black; the colour is in the sleeves.
   Flat fills and 1–2px lines only: no gradients, no glows, no blurred shadows. A thing's
   thickness is a solid darker edge under it. No letter-spacing on Arabic. */
:root{
  --wall:#ECE6DA;--wall2:#E3DBCB;--paper:#FBF8F1;--card:#F6F1E6;--manila:#F1E6CC;
  --ink:#1B1A18;--ink2:#5C554B;--line:#D3C9B6;--line2:#BFB39C;
  --oak:#D6B78A;--oak-e:#A07C4B;--alu:#E6E3DD;--alu-e:#B6B1A8;--enamel:#F5F2EB;
  --t0:#D2452A;--t0d:#9C2F19;--t0ink:#B3381E;--t0l:#F7DED7;
  --t1:#2A4BA8;--t1d:#1C3478;--t1ink:#2A4BA8;--t1l:#DCE2F3;
  --gold:#C9A13E;--gold-d:#8F6F22;
  --r:6px;
  --kufi:"Noto Kufi Arabic",system-ui,sans-serif;--rakkas:"Rakkas","Noto Kufi Arabic",serif;
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);
}
html{font-size:clamp(15px,calc(.6vw + .9vh),30px)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--wall);color:var(--ink);font-family:var(--kufi);-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;
  -webkit-user-select:none;user-select:none}
input,textarea{-webkit-user-select:text;user-select:text}
button{font:inherit;color:inherit;-webkit-appearance:none;appearance:none;touch-action:manipulation}
:focus-visible{outline:none}
body.kb :focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.t0{--team:var(--t0);--team-d:var(--t0d);--team-ink:var(--t0ink);--team-l:var(--t0l)}
.t1{--team:var(--t1);--team-d:var(--t1d);--team-ink:var(--t1ink);--team-l:var(--t1l)}
.cover text,.lbl text{direction:rtl}

/* ---------- keys: paper on a dark edge that sinks when pressed ---------- */
.key{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.35em 1.2em;
  border:1.5px solid var(--ink);border-radius:var(--r);background:var(--paper);color:var(--ink);font:700 1rem/1.25 var(--kufi);
  text-decoration:none;cursor:pointer;box-shadow:0 3px 0 var(--ink);transition:transform .08s,box-shadow .08s,background .12s}
.key:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.key:disabled{opacity:.42;cursor:default;transform:none}
.key.primary{min-height:54px;padding-inline:1.5em;font-size:1.08rem;background:var(--ink);color:var(--paper);box-shadow:0 3px 0 #000}
.key.primary:active{box-shadow:0 1px 0 #000}
.key.quiet{background:transparent;border:1px solid var(--line2);box-shadow:none}
.key.quiet:active{background:var(--wall2)}
.key.round{width:48px;min-height:48px;padding:0;border-radius:50%}
.key.round::before{content:"";width:11px;height:11px;border:solid currentColor;border-width:3px 3px 0 0;transform:translateY(3px) rotate(-45deg)}
.key.round.down::before{transform:translateY(-3px) rotate(135deg)}
kbd.cap{display:inline-grid;place-items:center;min-width:1.7em;height:1.6em;padding:0 .35em;border:1px solid currentColor;border-bottom-width:2.5px;border-radius:4px;
  font:700 .7em/1 var(--kufi);opacity:.75}
.linklike{min-height:44px;padding:0 .2em;border:0;background:none;color:var(--ink2);font:600 .8rem/1.3 var(--kufi);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------- the bar ---------- */
.bar{position:fixed;top:0;inset-inline:0;z-index:6;display:flex;align-items:center;gap:8px;
  padding:calc(var(--st) + 8px) calc(var(--sr) + 12px) 6px calc(var(--sl) + 12px)}
.bar .key{min-height:44px;padding:0 .8em;font-size:.86rem}
.bar .back{padding-inline-start:.45em}
.bar .mid{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:.8em}
.mark{margin:0;font:400 1.5rem/1.4 var(--rakkas);color:var(--ink);white-space:nowrap}
.mark span{color:var(--t0)}
.progress{margin:0;font:700 .82rem/1.3 var(--kufi);color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.progress:empty{display:none}
body[data-phase=home] .mark{visibility:hidden}
#btnFull .out{display:none}
body.is-full #btnFull .in{display:none}
body.is-full #btnFull .out{display:inline}
.snd .on{display:none}
.snd.on .on{display:inline}
.snd.on .off{display:none}
.snd.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media (max-width:430px){.bar .key span{display:none}.bar .key{width:44px;padding:0}.bar .key.back{width:auto;padding:0 .6em}.bar .key.back span{display:inline}
  .progress{font-size:.78rem}}
@media (max-width:360px){.bar .key.back span{display:none}.bar .key.back{width:44px;padding:0}}

/* ---------- the room between the bar and the dock ---------- */
#stage,.deck{position:fixed;inset-inline:0;top:var(--bar-h,60px);bottom:var(--dock-h,0px);padding-inline:var(--sr) var(--sl)}
#stage{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
body[data-phase=board] #stage,body[data-phase=crate] #stage{overflow:hidden}
.deck{z-index:4;background:var(--wall)}
.note{margin:0;padding:24px;text-align:center;font:600 1.05rem/1.6 var(--kufi);color:var(--ink2)}
.note-box{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px}

/* ---------- the shop: home ---------- */
.home{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3vh,40px);padding:12px 16px 28px}
.sign{text-align:center}
.sign-name{margin:0;font:400 clamp(48px,4.6rem,150px)/1.05 var(--rakkas);color:var(--ink)}
.sign-dek{margin:.2em 0 0;font:700 .95rem/1.4 var(--kufi);color:var(--ink2)}
.home-main{display:flex;align-items:center;justify-content:center;gap:clamp(20px,5vw,90px);flex-wrap:wrap}
.album{position:relative;width:min(58vw,40vh,440px);aspect-ratio:1;margin-left:calc(min(58vw,40vh,440px) * .4);--out:-50%}
.album-sleeve{position:absolute;inset:0;z-index:1;box-shadow:0 5px 0 rgba(27,26,24,.22)}
.album-sleeve svg,.wsleeve svg,.front-sleeve svg,.slot svg,.fly svg{display:block;width:100%;height:100%}
.album .rec{position:absolute;inset:3%;transform:translateX(var(--out))}
.rec img.vinyl{display:block;width:100%;height:100%;-webkit-user-drag:none}
.rec-label{position:absolute;inset:33.55%}
.rec-label svg,.tt-label svg{display:block;width:100%;height:100%}
.home-side{max-width:27rem;display:flex;flex-direction:column;gap:14px}
.home-dek{margin:0;font:800 1.3rem/1.5 var(--kufi)}
.home-meta{margin:0;font:700 .9rem/1.4 var(--kufi);color:var(--ink2)}
.home-acts{display:flex;flex-wrap:wrap;gap:12px}
.home-intro{margin:0;font:500 .88rem/1.7 var(--kufi);color:var(--ink2)}
@media (max-aspect-ratio:1/1){.home-main{flex-direction:column;gap:22px}.home-side{align-items:center;text-align:center}.home-acts{justify-content:center}
  .album{width:min(60vw,34vh,380px);margin-left:calc(min(60vw,34vh,380px) * .4)}}

/* ---------- who is on which side ---------- */
.teams{min-height:100%;display:grid;place-items:center;padding:16px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 4px 0 var(--line)}
.teams-card{width:min(100%,34rem);padding:clamp(18px,3vw,40px);display:flex;flex-direction:column;gap:14px}
.teams-card h2{margin:0;font:800 1.3rem/1.3 var(--kufi)}
.side-row{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:2px;align-items:center}
.side-disc{grid-row:1/3;width:3.1rem;height:3.1rem;border-radius:50%;background:var(--team);display:grid;place-items:center;color:#fff;font:800 1.2rem/1 var(--kufi);
  box-shadow:inset 0 0 0 .32rem var(--team),inset 0 0 0 .4rem rgba(255,255,255,.55)}
.side-lab{font:700 .78rem/1.3 var(--kufi);color:var(--team-ink)}
.team-name{width:100%;min-height:50px;padding:.3em .6em;border:0;border-bottom:3px solid var(--team);border-radius:0;background:var(--card);color:var(--ink);font:700 1.25rem/1.3 var(--kufi)}
.team-name::placeholder{color:rgba(27,26,24,.38)}
.card-lab{margin:6px 0 0;font:700 .82rem/1.3 var(--kufi);color:var(--ink2)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.seg button{min-height:48px;padding:0 6px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--card);color:var(--ink);font:700 .9rem/1.2 var(--kufi);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}

/* ---------- the dock: the shop's counter ---------- */
.dock{position:fixed;inset-inline:0;bottom:0;z-index:5;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);align-items:stretch;gap:8px;
  padding:8px calc(var(--sr) + 12px) calc(var(--sb) + 10px) calc(var(--sl) + 12px);background:var(--alu);border-top:1px solid var(--alu-e)}
.dock-row{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.dmid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;text-align:center}
.dsay{margin:0;font:700 clamp(15px,1.15vw,1.7rem)/1.4 var(--kufi)}
.dsay b{color:var(--team-ink)}
.dact{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.plate{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:60px;padding:5px 6px;
  border:0;border-top:4px solid var(--team);border-radius:var(--r);background:var(--paper);color:var(--ink);font:inherit;text-align:center}
.plate .pside{font:700 clamp(11px,.85vw,1.15rem)/1.3 var(--kufi);color:var(--team-ink)}
.plate .pn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 clamp(.9rem,1.3vw,2rem)/1.35 var(--kufi)}
.plate .prow{display:flex;align-items:center;justify-content:center;gap:4px}
.plate .ps{min-width:2.6em;font:800 clamp(1.5rem,2.5vw,3.6rem)/1.1 var(--kufi);color:var(--team-ink);direction:ltr;unicode-bidi:isolate}
.plate .adj{position:relative;width:clamp(34px,2.7vw,58px);height:clamp(34px,2.7vw,58px);flex:none;border:1.5px solid var(--team-ink);border-radius:50%;background:transparent;color:var(--team-ink);font:800 clamp(1.15rem,1.6vw,2rem)/1 var(--kufi);cursor:pointer}
.plate .adj::before{content:"";position:absolute;inset:-6px}
.plate.on{background:var(--team);color:#fff;border-top-color:var(--team-d)}
.plate.on .pside,.plate.on .ps{color:#fff}
.plate.on .adj{border-color:#fff;color:#fff}
.plate.award{background:var(--team);color:#fff;border-top-color:var(--team-d);box-shadow:0 4px 0 var(--team-d);cursor:pointer;transition:transform .08s,box-shadow .08s}
.plate.award .pside,.plate.award .ps{color:#fff}
.plate.award:active{transform:translateY(3px);box-shadow:0 1px 0 var(--team-d)}
.plate.award:disabled{opacity:.55}
.slots{display:flex;gap:6px;padding-top:3px}
.slot{position:relative;width:38px;height:38px;border:1.5px dashed var(--team);border-radius:3px;background:transparent;padding:0}
.slot.full{border:0;box-shadow:0 2px 0 rgba(27,26,24,.25)}
.slot.last{cursor:pointer}
.slot.last::before{content:"";position:absolute;inset:-4px}
.plate.on .slot{border-color:rgba(255,255,255,.8)}
@media (max-width:430px){.slots{gap:4px}.slot{width:30px;height:30px}.slot.last::before{inset:-7px}.dock[data-mode=crate] .plate{min-height:0;padding:4px}}
.slot.last::after{content:"";position:absolute;top:-6px;inset-inline-start:-6px;width:16px;height:16px;border-radius:50%;background:var(--ink);
  box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 6px #fff}
.cheer{position:absolute;bottom:calc(100% + 6px);inset-inline:0;margin:auto;width:max-content;padding:.05em .55em;border:2px solid currentColor;border-radius:4px;
  background:var(--paper);color:var(--team-ink);font:400 1.35rem/1.25 var(--rakkas);pointer-events:none;z-index:2}
.dock[data-mode=board] .dmid .dsay b{font-size:1.1em}
@media (max-width:560px){.dock[data-mode=board]{grid-template-columns:1fr 1fr}.dock[data-mode=board] .dmid{display:none}}

/* ---------- digging: the crate ---------- */
.digging{position:absolute;inset:0;display:flex;flex-direction:column}
.dividers{flex:none;display:flex;gap:6px;overflow-x:auto;padding:4px 16px 0;scrollbar-width:none;border-bottom:3px solid var(--oak-e)}
.dividers::-webkit-scrollbar{display:none}
.divider{flex:none;min-height:44px;padding:0 16px;border:1px solid #CDBF9F;border-bottom:0;border-radius:var(--r) var(--r) 0 0;background:var(--manila);color:var(--ink);font:700 .86rem/1 var(--kufi);cursor:pointer}
.divider[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.crate{flex:1;min-height:0;position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto auto;justify-items:center;padding:8px 16px 6px;
  --sleeve:300px;--band:48px}
.stack{width:calc(var(--sleeve) + 8px);min-height:0;overflow-y:auto;display:flex;flex-direction:column-reverse;align-items:center;scrollbar-width:none;padding-top:6px}
.stack::-webkit-scrollbar{display:none}
.band{flex:none;width:calc(var(--sleeve) * (1 - min(var(--i),8) * .012));min-height:var(--band);height:var(--band);margin-top:-1px;padding:0 14px;display:flex;align-items:center;
  border:0;border-top:1px solid rgba(27,26,24,.28);background:var(--bg);color:var(--ink);cursor:pointer;text-align:start;box-shadow:0 1px 0 rgba(27,26,24,.15)}
.band span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--fw) calc(var(--band) * .4)/1.5 var(--face)}
.band.here{position:relative;z-index:1;outline:4px solid var(--team);outline-offset:-4px}
.front{display:flex;flex-direction:column;align-items:center;gap:8px;perspective:1100px}
.front-sleeve{position:relative;width:var(--sleeve);height:var(--sleeve);padding:0;border:0;background:none;cursor:pointer;transform-origin:50% 100%;
  box-shadow:0 6px 0 rgba(27,26,24,.24)}
.flip{display:flex;align-items:center;gap:14px}
.crate-name{margin:8px 0 0;width:calc(var(--sleeve) + 32px);padding:.3em .9em;display:flex;justify-content:space-between;align-items:center;gap:1em;
  background:var(--oak);box-shadow:0 4px 0 var(--oak-e);font:400 1rem/1.3 var(--rakkas);color:#4A3418}
.crate-count{font:700 .8rem/1 var(--kufi);direction:ltr;unicode-bidi:isolate;opacity:.8}
.key.take{min-width:9.5em;background:var(--team);border-color:var(--team-d);box-shadow:0 3px 0 var(--team-d)}
.key.take:active{box-shadow:0 1px 0 var(--team-d)}
.crate.land{grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:center;column-gap:clamp(16px,3vw,56px);justify-items:stretch}
.crate.land .front{order:-1;grid-row:1/3}
.crate.land .stack{width:min(100%,28rem);height:100%;justify-self:start;flex-direction:column;justify-content:flex-start;align-items:stretch}
.crate.land .band{width:100%}
.crate.land .crate-name{width:min(100%,28rem);justify-self:start}
.fly{position:fixed;z-index:30;pointer-events:none;transform-origin:0 0;box-shadow:0 5px 0 rgba(27,26,24,.22)}

/* ---------- the wall ---------- */
.wall{position:absolute;inset:0}
.ledge{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:12px;background:var(--oak);box-shadow:0 5px 0 var(--oak-e);border-radius:2px}
.cell{position:absolute;left:var(--x);top:var(--y);width:var(--cw);height:var(--ch);display:grid;gap:var(--gap);align-items:end;justify-items:center}
.wall.beside .cell{grid-template-columns:var(--d) var(--s) var(--d)}
.wall.stacked .cell{grid-template-rows:var(--d) var(--s) var(--d);align-items:center}
.wsleeve{width:var(--s);height:var(--s);box-shadow:0 4px 0 rgba(27,26,24,.22);background:var(--card)}
.tracks{display:flex;gap:var(--gap);align-items:center;justify-content:center}
.wall.beside .tracks{flex-direction:column;align-self:end}
.wall.stacked .tracks{flex-direction:row}
.trk{position:relative;width:var(--d);height:var(--d);flex:none;padding:0;border-radius:50%;border:2px solid var(--team);background:var(--paper);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;opacity:.62;transition:transform .1s,box-shadow .1s}
.trk::before{content:"";position:absolute;inset:16%;border-radius:50%;border:1px solid var(--team);opacity:.45}
.trk span{position:relative;font:800 calc(var(--d) * .3)/1 var(--kufi)}
.trk.live{opacity:1;border-width:3px;box-shadow:0 4px 0 var(--team-d)}
.trk.live:active{transform:translateY(3px);box-shadow:0 1px 0 var(--team-d)}
.trk:disabled{cursor:default}
.trk.won0,.trk.won1{opacity:1;border-color:var(--won);background:var(--won);color:#fff;box-shadow:none}
.trk.won0{--won:var(--t0)}
.trk.won1{--won:var(--t1)}
.trk.won0::before,.trk.won1::before{border-color:#fff}
.trk.none{opacity:1;border:2px solid var(--line2);background:var(--wall2);color:#8B8274;box-shadow:none}
.trk.none::before{inset:auto;width:118%;height:2px;border:0;border-radius:0;background:#8B8274;transform:rotate(-38deg);opacity:.75}
.trk.gone{visibility:hidden}
.trk.hold{opacity:0}

/* ---------- the listening room ---------- */
.room{position:absolute;inset:0;display:grid;gap:12px;padding:10px 16px 10px;
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"tt" "liner" "help"}
.room>.liner{grid-area:liner}
.room>.player{grid-area:tt;display:grid;place-items:center;min-height:0}
.room>.helpers{grid-area:help}
.room.land{grid-template-columns:minmax(0,1.12fr) auto;grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"liner tt" "liner help";column-gap:clamp(16px,2.6vw,56px);
  padding:clamp(10px,2vh,32px) clamp(16px,3vw,64px)}
.room.land>.helpers{width:calc(480 * var(--mm,1px))}

.tt{--mm:.7px;position:relative;width:calc(480 * var(--mm));height:calc(350 * var(--mm));flex:none}
.tt>*{position:absolute;left:calc(var(--x,0) * var(--mm));top:calc(var(--y,0) * var(--mm));width:calc(var(--w,0) * var(--mm));height:calc(var(--h,0) * var(--mm))}
.tt-plinth{left:0;top:0;width:100%;height:100%;border-radius:calc(12 * var(--mm));background:var(--enamel);
  border:solid var(--oak);border-width:0 calc(16 * var(--mm));box-shadow:0 calc(7 * var(--mm)) 0 #CFC7B7,inset 0 0 0 1px #E2DCCF}
.tt img{display:block;-webkit-user-drag:none}
.tt-platter,.tt-record,.tt-band,.tt-sheen{border-radius:50%}
.tt-record{will-change:transform}
.tt-record .vinyl{width:100%;height:100%}
.tt-label{position:absolute;left:33.55%;top:33.55%;width:32.9%;height:32.9%;transition:transform .46s cubic-bezier(.3,1.4,.5,1)}
.tt.read .tt-label{transform:scale(var(--zoom,2.6))}
.tt-band circle{stroke:var(--team,var(--t0))}
.tt-band .band-left{opacity:.2}
.tt-band .band-done{opacity:.55}
.tt.read .tt-band{opacity:0}
.tt-sheen{pointer-events:none}
.tt-base{border-radius:50%;background:#E3DFD7;box-shadow:inset 0 0 0 1.5px #ADA79D}
.tt-rest{border-radius:calc(3 * var(--mm));background:#9C968C}
.tt-arm{transform-origin:calc(var(--ox) * var(--mm)) calc(var(--oy) * var(--mm));will-change:transform}
.tt-arm img{width:100%;height:100%}
.tt-speeds{display:flex;gap:calc(4 * var(--mm))}
.tt-speed{flex:1;display:grid;place-items:center;border-radius:calc(3 * var(--mm));background:#E3DFD7;color:var(--ink2);font:700 calc(11 * var(--mm))/1 var(--kufi);box-shadow:0 calc(2 * var(--mm)) 0 #B9B3A8}
.tt-speed.on{background:var(--ink);color:var(--paper);box-shadow:none}
.tt-counter{display:flex;flex-direction:column;align-items:center;gap:calc(3 * var(--mm))}
.tt-clab{font:700 calc(9 * var(--mm))/1 var(--kufi);color:var(--ink2)}
.tt-digits{flex:1;width:100%;display:grid;place-items:center;border-radius:calc(4 * var(--mm));background:var(--ink);color:#F2CB4E;font:800 calc(24 * var(--mm))/1 var(--kufi);
  box-shadow:inset 0 0 0 calc(2 * var(--mm)) #3A3733}
.tt-counter.up .tt-digits{background:var(--t0);color:#fff}
.tt-start{border-radius:calc(3 * var(--mm));background:#E3DFD7;box-shadow:0 calc(2 * var(--mm)) 0 #B9B3A8}

.helpers{display:flex;flex-direction:column;gap:6px;min-width:0}
.hlab{margin:0;font:700 clamp(.78rem,.95vw,1.25rem)/1.3 var(--kufi);color:var(--team-ink,var(--ink2))}
.hkeys{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.hkey{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:clamp(58px,7vh,104px);padding:4px 2px;border:1.5px solid var(--ink);border-radius:var(--r);
  background:var(--paper);color:var(--ink);font:700 clamp(11.5px,.95vw,1.3rem)/1.2 var(--kufi);text-align:center;cursor:pointer;box-shadow:0 3px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.hkey:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.hkey.spent{opacity:.38;box-shadow:none;transform:translateY(3px);border-style:dashed}
.hic{width:1.35em;height:1.35em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.liner{--qs:22px;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:.55em;padding:.75em .9em;font-size:var(--qs);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);border-top:6px solid var(--team,var(--ink));box-shadow:0 4px 0 var(--line)}
.lhead{display:flex;align-items:center;flex-wrap:wrap;gap:.3em .7em;padding-bottom:.4em;border-bottom:1px solid var(--line);font:700 max(12px,.55em)/1.35 var(--kufi);color:var(--ink2)}
.lalbum{font-weight:800;color:var(--ink)}
.ltrack{color:var(--team-ink,var(--ink2))}
.stickers{display:flex;gap:.35em;margin-inline-start:auto}
.sticker{display:grid;place-items:center;min-width:2.6em;height:2.6em;padding:0 .3em;border-radius:50%;background:var(--team);color:#fff;font:800 .9em/1 var(--kufi);transform:rotate(-8deg)}
.lhead[data-up]::after{content:attr(data-up);color:var(--t0ink);font-weight:800}
.lhead,.lbody,.choices,.lfoot{flex:none}
.lbody{display:flex;flex-direction:column;gap:.4em}
.qtext{margin:0;font:800 1em/1.5 var(--kufi)}
.qtext:focus{outline:none}
.qemoji{margin:0;font:400 2.2em/1.2 system-ui;text-align:center}
.qimg{margin:0;display:flex;flex-direction:column;align-items:center;gap:.2em;min-height:0}
.qimg img{display:block;max-width:100%;max-height:min(34vh,11em);border-radius:4px;box-shadow:0 3px 0 var(--line)}
.credit{font:500 max(10px,.42em)/1.3 var(--kufi);color:var(--ink2);direction:ltr}
.qcode{margin:0;padding:.5em .7em;max-height:9em;overflow:auto;border-radius:4px;background:var(--ink);color:#F1E9D8;font:600 .62em/1.5 ui-monospace,Menlo,monospace;text-align:left;white-space:pre}
.choices{list-style:none;margin:0;padding:0;display:grid;gap:.4em}
.liner.two .choices{grid-template-columns:1fr 1fr}
.ch{display:flex;align-items:center;gap:.55em;min-height:2.2em;padding:.3em .55em;border:1.5px solid var(--line2);border-radius:var(--r);font:700 .82em/1.35 var(--kufi);background:var(--card)}
.ch .lt{flex:none;width:1.7em;height:1.7em;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--paper);font-size:.82em}
.ch .tx{min-width:0;overflow-wrap:normal;word-break:normal}
.liner.tight .ch .tx,.liner.tight .qtext{overflow-wrap:anywhere}
.ch.out{opacity:.34}
.ch.out .tx{text-decoration:line-through;text-decoration-thickness:2px}
.ch.right{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ch.right .lt{background:var(--gold);color:var(--ink)}
.ch.dim{opacity:.4}
.lfoot{display:flex;flex-wrap:wrap;align-items:center;gap:.2em 1em;margin-top:auto}
.fact{margin:0;flex:1 1 16em;font:500 max(13px,.6em)/1.6 var(--kufi);color:var(--ink2)}
.fact b{color:var(--ink)}
.report-here{font-size:max(13px,.55em)}
.room.short .tt-counter .tt-clab{display:none}
.room.short.land .hlab{display:none}
.liner.scroll{overflow-y:auto;overscroll-behavior:contain}

/* ---------- «الأسطوانة الذهبية» ---------- */
.end{min-height:100%;display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,72px);padding:14px 16px 20px;flex-wrap:wrap}
.plaque .frame{padding:clamp(10px,1.6vw,24px);background:var(--ink);box-shadow:0 6px 0 #000}
.mat{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2vh,26px);padding:clamp(16px,3vw,44px) clamp(20px,4vw,64px);background:#F4EEE2}
.mat .rec{position:relative;width:min(58vw,32vh,380px);aspect-ratio:1}
.brass{min-width:min(78vw,22rem);padding:.6em 1.2em;text-align:center;background:var(--gold);color:#2A2111;box-shadow:inset 0 0 0 3px var(--gold-d)}
.brass h2{margin:0;font:800 1.35rem/1.4 var(--kufi)}
.brass .to{margin:.15em 0 0;font:700 1rem/1.4 var(--kufi)}
.brass .for{margin:.1em 0 0;font:600 .82rem/1.4 var(--kufi)}
.tally{border-collapse:collapse;background:var(--paper);border:1px solid var(--line);font:600 .9rem/1.4 var(--kufi);min-width:min(92vw,20rem)}
.tally th,.tally td{padding:.42em .9em;border-bottom:1px solid var(--line);text-align:start}
.tally thead th{font-weight:800;color:var(--ink2)}
.tally td{text-align:center;direction:ltr}
.tally .t0{color:var(--t0ink)}
.tally .t1{color:var(--t1ink)}
.tally tfoot th,.tally tfoot td{font-weight:800;font-size:1.05rem;border-bottom:0;border-top:2px solid var(--ink)}

/* ---------- sheets: «القائمة», the how-to, a helper, a report ---------- */
dialog.sheet{width:min(100% - 24px,32rem);max-height:min(100% - 24px,46rem);padding:0;border:0;background:transparent;color:var(--ink)}
dialog.sheet::backdrop{background:rgba(27,26,24,.5)}
.sheet-card{display:flex;flex-direction:column;gap:10px;padding:18px;background:var(--paper);border-radius:var(--r);border-top:6px solid var(--ink);max-height:inherit;overflow-y:auto}
.sheet-card.small{gap:14px}
.sheet-head{display:flex;align-items:center;gap:10px}
.sheet-head h2,.sheet-card>h2{flex:1;margin:0;font:800 1.2rem/1.35 var(--kufi)}
.sheet-head .hic{width:1.6em;height:1.6em}
.sheet-dek{margin:0;font:500 .95rem/1.7 var(--kufi);color:var(--ink2)}
.x{width:44px;height:44px;flex:none;display:grid;place-items:center;border:1px solid var(--line2);border-radius:50%;background:transparent;cursor:pointer}
.x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.key.row{width:100%;justify-content:flex-start;box-shadow:0 2px 0 var(--ink)}
.key.row.danger{color:var(--t0ink);border-color:var(--t0ink);box-shadow:0 2px 0 var(--t0ink)}
.themes{display:flex;flex-direction:column;gap:6px}
.theme-row{display:flex;flex-wrap:wrap;gap:6px}
.theme{display:inline-flex;align-items:center;gap:.45em;min-height:44px;padding:0 .9em;border:1px solid var(--line2);border-radius:var(--r);color:var(--ink);text-decoration:none;font:700 .86rem/1.2 var(--kufi);background:var(--card)}
.theme.here{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.theme small{font-weight:600;opacity:.75}
.how-steps{margin:0;padding-inline-start:1.3em;display:flex;flex-direction:column;gap:8px;font:600 .95rem/1.65 var(--kufi)}
.how-helpers{list-style:none;margin:4px 0 0;padding:10px 0 0;border-top:1px solid var(--line);display:grid;gap:8px}
.how-helpers li{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:8px;font:500 .86rem/1.5 var(--kufi);color:var(--ink2)}
.how-helpers b{color:var(--ink);white-space:nowrap}
.how-keys{margin:0;font:600 .82rem/1.6 var(--kufi);color:var(--ink2)}
.rq{display:flex;flex-direction:column;gap:6px;padding:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.rq-cat{margin:0;font:700 .78rem/1.3 var(--kufi);color:var(--ink2)}
.rq-q{margin:0;font:800 1rem/1.5 var(--kufi)}
.rq-ch{list-style:none;margin:0;padding:0;display:grid;gap:4px;font:600 .88rem/1.4 var(--kufi)}
.rq-ch li{display:flex;gap:8px;align-items:center}
.rq-ch .lt{width:1.5em;height:1.5em;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--line);font-size:.8em}
.rq-ch li.right .lt{background:var(--ink);color:var(--paper)}
.rq-ch li.right{font-weight:800}
.rq-fact{margin:0;font:500 .82rem/1.6 var(--kufi);color:var(--ink2)}
.rform{display:flex;flex-direction:column;gap:8px}
.reasons{display:flex;flex-wrap:wrap;gap:6px}
.reason{min-height:44px;padding:0 .8em;border:1px solid var(--line2);border-radius:var(--r);background:var(--card);font:700 .84rem/1.2 var(--kufi);cursor:pointer}
.reason[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.brief{width:100%;min-height:5.5em;padding:.5em .7em;border:1.5px solid var(--line2);border-radius:var(--r);background:#fff;color:var(--ink);font:500 .95rem/1.5 var(--kufi);resize:vertical}
.hint{margin:0;font:500 .8rem/1.5 var(--kufi);color:var(--ink2)}
.played{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.played-row{width:100%;min-height:48px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:.5em .7em;border:1px solid var(--line2);border-radius:var(--r);background:var(--card);text-align:start;cursor:pointer}
.played-row .pc{font:700 .74rem/1.3 var(--kufi);color:var(--ink2)}
.played-row .pq{font:700 .9rem/1.45 var(--kufi)}
.credits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.credits li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font:600 .84rem/1.4 var(--kufi)}
.credits .cr-by{grid-column:1;font:500 .76rem/1.4 var(--kufi);color:var(--ink2);text-align:start;overflow-wrap:anywhere}
.credits .cr-links{grid-column:2;grid-row:1/3;display:flex;gap:4px}
.credits a{display:inline-grid;place-items:center;min-height:44px;padding:0 .6em;border:1px solid var(--line2);border-radius:var(--r);color:var(--ink);font:700 .76rem/1 var(--kufi);text-decoration:none;white-space:nowrap}
.toast{position:fixed;z-index:40;bottom:calc(var(--dock-h,0px) + 14px);inset-inline:16px;margin:0 auto;width:max-content;max-width:calc(100% - 32px);padding:.55em 1em;
  background:var(--ink);color:var(--paper);border-radius:var(--r);font:700 .9rem/1.4 var(--kufi);pointer-events:none}

/* ---------- a pointer that hovers: everything you can press says so ---------- */
@media (hover:hover) and (pointer:fine){
  .key:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--ink)}
  .key.quiet:not(:disabled):hover{transform:none;box-shadow:none;background:var(--wall2)}
  .key.primary:not(:disabled):hover{box-shadow:0 4px 0 #000}
  .trk.live:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--team-d)}
  .band:hover{filter:brightness(1.05)}
  .front-sleeve:hover{transform:translateY(-3px);box-shadow:0 9px 0 rgba(27,26,24,.22)}
  .divider:not([aria-pressed=true]):hover{background:#F7EEDA}
  .hkey:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--ink)}
  .plate.award:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--team-d)}
  .theme:hover,.reason:hover,.played-row:hover{border-color:var(--ink)}
  .linklike:hover{color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}