/* BRILLIANCY — THE PLAY SCREEN (real build). One set of elements, two stages:
   body.desk  — the 1600×1000 fixed stage (BIBLE §4), scaled to fit a landscape screen
   body.port  — the 430-wide portrait stage (BIBLE §13, 9/29), height follows the phone
   Tokens are BIBLE §2/§3 and nothing else. */
:root{
  --night:#16130f; --wood:#221c14; --panel:#2b241a; --panel-hi:#352c20; --rule:#3a332a;
  --paper:#f2e2b8; --paper-2:#e2cf9f; --paper-ink:#2b1d10; --paper-ink-2:#6b4d22;
  --ivory:#e6d9b8; --dim:#a8977a; --faint:#75674f;
  --brass:#c9a24a; --brass-hi:#e6bd5c; --brass-lo:#7a5b1e; --wax:#7d2f22; --wax-hi:#a8473a;
  --best:#6fbf73; --caution:#e09a3a; --carmine:#c03a28; --brill:#2dd4bf;
  --pts:#c9a24a; --sharp:#c8643a; --chain:#6f9f7a;
  --sqL:#eadfc3; --sqD:#8c6b47;
  --sch-rom:#b8664e; --sch-cla:#6f8fb8; --sch-pos:#6f9f7a; --sch-hyp:#8a7ab0;
  --sch-cof:#c9a24a; --sch-dis:#7a8aa6; --sch-prb:#b86f9a; --sch-none:#8a7a58;
  --rar-c:#5a3e24; --rar-u:#c4c4be; --rar-r:#d9a441; --rar-l:#c9a3e8;
  --serif:'Spectral',Georgia,serif; --sc:'SpectralSC','Spectral',Georgia,serif;
  --d-xs:120ms; --d-s:200ms; --d-m:320ms; --d-l:560ms; --d-xl:900ms;
  --e-enter:cubic-bezier(.22,1,.36,1); --e-exit:cubic-bezier(.64,0,.78,0); --e-land:cubic-bezier(.34,1.56,.64,1);
  /* the engine's own inline styles name these — map them onto the tokens */
  --brass2:var(--brass-hi); --good:var(--best); --mono:var(--sc);
  --sq:88px;   /* the board square; the portrait stage sets it from the phone */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--night);overflow:hidden}
body{font-family:var(--serif);color:var(--ivory);font-variant-numeric:lining-nums tabular-nums;-webkit-tap-highlight-color:transparent;user-select:none}
[hidden]{display:none !important}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ================= THE STAGE ================= */
#stage{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;
  background:var(--wp) repeat, var(--night);background-size:640px 640px,auto}
#stage::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 52%,rgb(var(--night-rgb) / .25),rgb(var(--night-rgb) / .84) 76%);pointer-events:none}
.lbl{white-space:nowrap;font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--dim);}
.num{font-family:var(--serif);font-weight:700;line-height:1}
.panel{background:linear-gradient(180deg,var(--panel),var(--panel-lo));border:1px solid var(--rule);border-radius:6px;
  box-shadow:inset 0 1px 0 rgb(var(--brass-hi-rgb) / .07),0 8px 22px rgba(0,0,0,.35)}

/* ---------------- the band ---------------- */
#band{background:linear-gradient(180deg,var(--panel),var(--wood));border-bottom:1px solid var(--brass-lo);
  box-shadow:0 1px 0 rgb(var(--brass-hi-rgb) / .18),0 10px 24px rgba(0,0,0,.45);z-index:5}
#plate{display:flex;flex-direction:column;justify-content:center;background:linear-gradient(180deg,#5d1f16,#46170f);
  border:2px solid var(--brass);border-radius:6px;box-shadow:inset 0 0 0 3px #46170f,inset 0 0 0 4px rgb(var(--brass-hi-rgb) / .35)}
#plate .k{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--brass);opacity:.85;white-space:nowrap}
#plate .n{font-family:var(--sc);font-weight:600;letter-spacing:.04em;color:var(--brass-hi);line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb{display:flex;align-items:center;border-radius:6px;background:linear-gradient(180deg,var(--panel-hi),var(--panel));border:1.5px solid var(--brass-lo);
  box-shadow:inset 0 1px 0 rgb(var(--brass-hi-rgb) / .18),0 3px 8px rgba(0,0,0,.4);font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--brass-hi);white-space:nowrap}
.bb svg{flex-shrink:0}
.bb.off{opacity:.4;cursor:default}
#seats{display:flex}
.seat{position:relative;flex:none;border-radius:6px;background:var(--paper);border:6px solid var(--rar-c);box-shadow:0 4px 10px rgba(0,0,0,.45);overflow:hidden;cursor:pointer;
  transition:transform var(--d-s) var(--e-enter),box-shadow var(--d-s)}
.seat.u{border-color:var(--rar-u)} .seat.r{border-color:var(--rar-r);box-shadow:0 0 10px rgb(var(--brass-hi-rgb) / .5)} .seat.l{border-color:var(--rar-l);box-shadow:0 0 14px rgba(201,163,232,.7)}
.seat .sb{height:6px}
.seat .em{position:absolute;left:0;right:0;top:12px;bottom:2px;display:flex;align-items:center;justify-content:center;color:var(--paper-ink);font-size:30px}
.seat .em svg{width:100%;height:auto;display:block}
.seat.empty{background:transparent;border:1.5px dashed rgb(var(--brass-rgb) / .28);box-shadow:none;cursor:default}
.seat.fire{transform:translateY(-6px);box-shadow:0 0 0 2px var(--brass-hi),0 10px 18px rgba(0,0,0,.55)}
.seat.silenced{filter:grayscale(1) brightness(.6)}
.chip{position:absolute;z-index:30;font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--paper-ink);pointer-events:none;
  background:var(--brass-hi);border:1px solid var(--brass-lo);border-radius:4px;padding:1px 7px;white-space:nowrap;transform:translateX(-50%);
  animation:chipIn var(--d-l) var(--e-enter) both}
@keyframes chipIn{from{opacity:0;margin-top:-8px}to{opacity:1;margin-top:0}}
.chip.out{transition:opacity var(--d-s) var(--e-exit);opacity:0}
#tokens{display:flex}
.token{flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:radial-gradient(circle at 38% 32%,var(--paper),var(--paper-2));border:1.5px solid var(--brass-lo);
  box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 5px rgba(107,77,34,.5),0 4px 10px rgba(0,0,0,.45);color:var(--paper-ink)}
.token.empty{background:transparent;border:1.5px dashed rgb(var(--brass-rgb) / .28);box-shadow:none;cursor:default}
.token.armed{box-shadow:0 0 0 3px var(--brass-hi),0 0 16px rgb(var(--brass-hi-rgb) / .6)}
.plateG,.plateL{display:flex;align-items:center;justify-content:center;border-radius:8px;font-family:var(--sc);font-weight:600}
.plateG{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:var(--paper-ink);border:2px solid var(--gold-lo);box-shadow:inset 0 1px 0 rgba(255,240,200,.5),0 4px 12px rgba(0,0,0,.45)}
.plateL{background:linear-gradient(180deg,#3a1510,#2a0f0b);color:#e0604c;border:2px solid var(--carmine);box-shadow:0 4px 12px rgba(0,0,0,.45)}
.plateG .n,.plateL .n{font-family:var(--serif);font-weight:700;line-height:1}
.plateG .w,.plateL .w{letter-spacing:.10em;text-transform:uppercase}
.plateG.pop{animation:pop var(--d-m) var(--e-land)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}

/* ---------------- the console ---------------- */
.row{display:flex;justify-content:space-between;align-items:baseline}
#rscore .num,#target .num{color:var(--ivory)} #rscore .num{color:var(--gold-hi)}
#bar{position:relative;background:var(--panel-lo);border:1px solid var(--rule);overflow:hidden}
#bar .fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--gold-lo),var(--gold));transition:width var(--d-l) var(--e-enter)}
#bar.afire{border-color:var(--gold);box-shadow:0 0 14px rgb(var(--gold-hi-rgb) / .55)}
#bar.afire .fill{background:linear-gradient(90deg,#8a5a1c,var(--gold-hi),#f6d47c,var(--gold-hi),#8a5a1c)}
.cleared{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--gold-hi);border:3px double var(--gold-hi);border-radius:5px;box-shadow:0 0 22px rgb(var(--gold-hi-rgb) / .35)}
.cleared.stamp{animation:stamp var(--d-m) var(--e-land) both}
@keyframes stamp{from{transform:scale(1.9);opacity:0}to{transform:scale(1);opacity:1}}
.x2{display:inline-flex;align-items:center;border:1.5px solid var(--brill);border-radius:5px;font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--brill);background:rgba(45,212,191,.08);white-space:nowrap}
#note{color:var(--dim);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plq{flex:none;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:inset 0 1px 0 rgb(var(--brass-hi-rgb) / .35),inset 0 -2px 0 rgba(0,0,0,.25),0 3px 8px rgba(0,0,0,.4)}
.plq .num{color:var(--paper-ink)}
.plq .lbl{color:rgba(43,29,16,.75)}
.plq.pts{background:linear-gradient(180deg,var(--gold-hi),var(--pts));border:1px solid var(--gold-lo)}
.plq.shp{background:linear-gradient(180deg,#dc7d52,var(--sharp));border:1px solid #7a3a1e}
.plq.chn{background:linear-gradient(180deg,#86b391,var(--chain));border:1px solid #3e5f47}
.plq.pop,.scoreplq.pop{animation:pop var(--d-m) var(--e-land)}
.x{font-family:var(--serif);color:var(--faint);flex:none}
.scoreplq{background:var(--paper);border:1px solid var(--paper-ink-2);color:var(--paper-ink);border-radius:5px;display:flex;align-items:center}
.scoreplq .lbl{color:var(--paper-ink-2)}
.pips{display:flex;align-items:center}
.pip{border-radius:50%;border:1.5px solid var(--brass)} .pip.on{background:var(--brass)}
#clockVal{font-style:italic;color:var(--dim)}
.drills{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.drill{border-radius:6px;background:var(--panel-lo);border:1px solid var(--rule);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:8px 0}
.drill svg{width:36px;height:36px}
.drill .lv{font-family:var(--sc);font-weight:600;font-size:15px;color:var(--faint)}
.drill.on{border-color:var(--brass-lo)} .drill.on .lv{color:var(--brass-hi)}
.dots{display:flex;gap:3px}.dots i{width:6px;height:6px;border-radius:50%;border:1px solid var(--faint)}.dots i.on{background:var(--brass);border-color:var(--brass)}

/* ---------------- the board ---------------- */
#info{position:relative;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgb(var(--brass-rgb) / .22)}
#info .turn{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--ivory);display:flex;align-items:center;white-space:nowrap}
.stm{border-radius:50%;background:var(--ivory);border:1.5px solid var(--faint)} .stm.b{background:var(--night);border-color:var(--dim)}
#info .kind{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--best);white-space:nowrap}
#info .kind.multi{color:var(--brass-hi)}
#rise{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:22px;overflow:hidden;pointer-events:none;z-index:12}
#info .turn,#info .kind{transition:opacity var(--d-s)}
#info.speaking .turn,#info.speaking .kind{opacity:0;transition:none}
body.desk #rsNum[data-len="6"],body.desk #rsNum[data-len="7"]{font-size:44px} body.desk #rsNum[data-len="8"],body.desk #rsNum[data-len="9"]{font-size:38px}
body.desk #rsNum[data-len="10"],body.desk #rsNum[data-len="11"],body.desk #rsNum[data-len="12"]{font-size:30px}
body.port #rsNum[data-len="8"],body.port #rsNum[data-len="9"],body.port #rsNum[data-len="10"],body.port #rsNum[data-len="11"]{font-size:24px}
/* one face for every line of the row (Chris 10/6): the serif, in capitals and small letters */
.rw{flex:none;white-space:nowrap;font-family:var(--serif);font-weight:700;letter-spacing:.02em;
  color:var(--ivory);text-shadow:0 2px 6px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.9);
  animation:rise 2400ms var(--e-enter) both}
.rw.motif{color:var(--brass-hi)} .rw.tutor{color:var(--paper)} .rw.drillw{color:var(--chain)} .rw.gold{color:var(--gold-hi)}
.rw.pts{color:var(--gold-hi)}
.rw.bad{color:var(--caution)} .rw.blunder{color:var(--carmine)} .rw.best{color:var(--best)} .rw.held{color:var(--dim)}
.rw.brill{color:var(--brill);text-shadow:0 0 18px rgba(45,212,191,.55),0 2px 4px rgba(0,0,0,.9)}
.rw.mate{color:var(--gold-hi)}
@keyframes rise{0%{opacity:0;transform:translateY(12px)}12%{opacity:1;transform:translateY(0)}78%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-12px)}}
#frame{border-radius:4px;background:linear-gradient(135deg,var(--panel-hi),var(--panel-lo));box-shadow:0 0 0 1px var(--brass-lo),0 18px 44px rgba(0,0,0,.6);transition:box-shadow var(--d-m)}
#frame.brill{box-shadow:0 0 0 3px var(--brill),0 0 46px rgba(45,212,191,.5),0 18px 44px rgba(0,0,0,.6)}
#frame.mate{box-shadow:0 0 0 3px var(--gold-hi),0 0 40px rgb(var(--gold-hi-rgb) / .45),0 18px 44px rgba(0,0,0,.6)}
#frame.lost{box-shadow:0 0 0 3px var(--carmine),0 0 30px rgba(192,58,40,.4),0 18px 44px rgba(0,0,0,.6)}
#boardWrap{position:relative}
#board{display:grid;grid-template-columns:repeat(8,var(--sq));grid-template-rows:repeat(8,var(--sq));touch-action:none}
#board.crosswayEdge{outline:3px dashed var(--brass-hi);outline-offset:3px}
.sq{position:relative;display:flex;align-items:center;justify-content:center}
.sq.light{background:var(--sqL)} .sq.dark{background:var(--sqD)}
.sq .pc{width:92%;height:92%;position:relative;z-index:2;display:block}
.sq .pc svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.sq .pc.sliding{transition:transform var(--d-m) var(--e-enter);z-index:5}
.sq::before{content:'';position:absolute;inset:0;pointer-events:none}
.sq.lastmove::before{background:rgb(var(--brass-rgb) / .42)}
.sq.selected::before{background:rgb(var(--brass-rgb) / .62)}
.sq.hintsq::before{background:rgba(45,212,191,.0);box-shadow:inset 0 0 0 4px var(--best)}
.sq.gfBest::before{background:rgba(111,191,115,.45)} .sq.gfGood::before{background:rgba(111,191,115,.28)}
.sq.gfInaccuracy::before{background:rgba(224,154,58,.42)} .sq.gfBlunder::before{background:rgba(192,58,40,.42)}
.sq.gfBrill::before{background:rgba(45,212,191,.40)}
.sq.incheck::after{content:'';position:absolute;inset:0;background:radial-gradient(circle,rgba(192,58,40,.75) 0,rgba(192,58,40,.35) 45%,transparent 70%);pointer-events:none;z-index:1}
.sq.dest .dot{position:absolute;width:30%;height:30%;border-radius:50%;background:rgba(43,29,16,.28);z-index:3;pointer-events:none}
.sq.dest.capture .dot{width:92%;height:92%;background:transparent;border:calc(var(--sq)*.07) solid rgba(43,29,16,.28)}
.sq.canplay{cursor:pointer}
.sq.seal1{box-shadow:inset 0 0 0 3px #b0703c} .sq.seal2{box-shadow:inset 0 0 0 3px #c0c4c8} .sq.seal3{box-shadow:inset 0 0 0 3px #ecbe50}
.sq .co{position:absolute;font-family:var(--sc);font-weight:600;z-index:1;opacity:.78;pointer-events:none}
.sq.light .co{color:var(--sqD)} .sq.dark .co{color:var(--sqL)}
.sq .co.file{right:5px;bottom:1px} .sq .co.rank{left:5px;top:1px}
/* §7.1 MARK — the annotation glyph stamped on the landed square's corner */
.mark{position:absolute;z-index:6;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;line-height:1;
  border:2px solid rgba(255,245,220,.9);box-shadow:0 3px 8px rgba(0,0,0,.5);pointer-events:none;animation:markIn var(--d-s) var(--e-land) both}
@keyframes markIn{from{transform:scale(1.6);opacity:0}to{transform:scale(1);opacity:1}}
.mark.brill{background:var(--night);color:var(--brill);border-color:var(--brill);box-shadow:0 0 8px rgba(45,212,191,.45),0 3px 8px rgba(0,0,0,.5);text-shadow:0 0 8px rgba(45,212,191,.5)}
.mark.best{background:var(--best);color:#10220f}
.mark.bad{background:var(--caution);color:var(--brass-lo)}
.mark.blunder{background:var(--carmine);color:#fff3ea}
.mark.mate{background:var(--paper-ink);color:var(--paper)}
.mark.big{animation:bigMark 1100ms var(--e-land) both}
@keyframes bigMark{0%{transform:scale(.4);opacity:0}18%{transform:scale(1.72);opacity:1}62%{transform:scale(1.72)}100%{transform:scale(1)}}
#promoPick{position:absolute;display:none;z-index:40;background:var(--paper);border:2px solid var(--brass);border-radius:6px;box-shadow:0 10px 26px rgba(0,0,0,.6);overflow:hidden}
#promoPick .promoBtn{width:var(--sq);height:var(--sq);display:flex;align-items:center;justify-content:center;background:var(--paper)}
#promoPick .promoBtn:hover{background:var(--paper-2)}
#promoPick .promoBtn svg{width:86%;height:86%}
.dragGhost{position:fixed;left:0;top:0;z-index:999;pointer-events:none;width:var(--ghost);height:var(--ghost)}
.dragGhost svg{width:100%;height:100%;filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
/* NOW PLAYING, beneath the board (Chris 10/1): the track's name between a back and a forward button */
#np{display:flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;visibility:hidden}
#np.on{visibility:visible}
#np .npt{overflow:hidden;text-overflow:ellipsis;font-style:italic;color:var(--faint)}
#np .npt b{font-style:normal;font-weight:600;color:var(--dim);font-family:var(--sc);letter-spacing:.04em}
#np .npb{display:inline-flex;align-items:center;justify-content:center;color:var(--dim);border:1px solid var(--rule);border-radius:50%;flex:none}
#np .npb:hover{color:var(--brass-hi);border-color:var(--brass-lo)}

/* ---------------- right: actions + the score sheet ---------------- */
.ab{display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--brass-hi);
  border:1.5px solid var(--brass);border-radius:5px;background:rgb(var(--panel-rgb) / .6);white-space:nowrap;transition:opacity var(--d-xs)}
.ab .c{color:var(--dim)}
.ab.q{color:var(--dim);border-color:var(--rule)}
.ab:disabled{opacity:.32;cursor:default}
.ab.pulse{animation:abPulse 1.2s ease-in-out infinite}
@keyframes abPulse{50%{box-shadow:0 0 0 3px rgba(230,189,92,.35)}}
#sheet .sub{font-style:italic;color:var(--dim)}
.ss{display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--brass-lo) transparent}
.mv{display:grid;align-items:baseline;border-bottom:1px solid var(--rule)}
.mv .n{color:var(--faint)}
.mv .s{font-weight:600;color:var(--ivory);white-space:nowrap}
.mv .s .g{font-weight:700;margin-left:4px}
.mv .p{font-weight:700;color:var(--gold);text-align:right}
.mv .why{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv .rep{color:var(--dim);font-weight:400}
.mv.intro .s{font-weight:400;color:var(--dim)}
.c-brill{color:var(--brill)!important} .c-best{color:var(--best)!important} .c-mate{color:var(--gold-hi)!important} .c-bad{color:var(--caution)!important} .c-blunder{color:var(--carmine)!important}
.mv.forfeit .why{text-decoration:line-through;text-decoration-color:rgba(192,58,40,.6)}
#tabs{display:none}

/* ---------------- ceremony layers ---------------- */
#fx{position:absolute;inset:0;pointer-events:none;z-index:50}
.coin{position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 38% 32%,#ffe7a0,var(--gold) 60%,var(--gold-lo));border:2px solid var(--gold-lo);
  font-family:var(--serif);font-weight:700;color:var(--paper-ink);box-shadow:0 0 18px rgb(var(--gold-hi-rgb) / .7),0 4px 10px rgba(0,0,0,.5);transform:translate(-50%,-50%)}
.seal{position:absolute;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 40% 35%,var(--wax-hi),var(--wax) 58%,#4e1c14);color:#f0d7c0;box-shadow:inset 0 2px 6px rgba(255,190,170,.35),0 6px 14px rgba(0,0,0,.55);
  animation:sealIn 1900ms var(--e-land) both}
.seal.brass{background:radial-gradient(circle at 40% 35%,#f3d27a,var(--gold) 58%,var(--gold-lo));color:var(--paper-ink)}
.seal::before{content:'';position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(255,220,200,.45)}
.seal .a{font-family:var(--sc);font-weight:600;letter-spacing:.03em}
.seal .b{font-family:var(--serif);font-weight:700;line-height:1.1}
@keyframes sealIn{0%{transform:translate(-50%,-50%) scale(1.8);opacity:0}14%{transform:translate(-50%,-50%) scale(1);opacity:1}80%{opacity:1}100%{opacity:0}}
.banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;padding:18px 34px;border-radius:8px;background:rgb(var(--night-rgb) / .9);
  border:2px solid var(--carmine);animation:fadeIO 2200ms ease both}
.banner .t{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--carmine)} .banner .s{font-style:italic;color:var(--dim);margin-top:6px}
@keyframes fadeIO{0%{opacity:0}10%{opacity:1}80%{opacity:1}100%{opacity:0}}

/* ---------------- layers: blurb, boss curtain, the verdict hand-off ---------------- */
#cardBlurb{position:absolute;z-index:68;background:linear-gradient(180deg,var(--panel-lo),var(--panel-lo));border:2px solid var(--brass);box-shadow:0 14px 30px rgba(0,0,0,.65);border-radius:8px}
#cardBlurb .t{font-family:var(--sc);font-weight:600;letter-spacing:.04em;color:var(--brass-hi);line-height:1.1}
#cardBlurb .tags{display:flex;gap:8px;flex-wrap:wrap}
#cardBlurb .tag{font-family:var(--sc);font-weight:600;letter-spacing:.03em;border-radius:4px;color:var(--paper-ink)}
#cardBlurb .d{line-height:1.4;color:var(--ivory)}
#cardBlurb .grab,#cardBlurb .close{display:none}
/* a Tutor's level (Chris 10/1): plain at 1, brass from 2, gilded and glowing from 5, and at 8 and above a wax
   plate with a gold number that catches the light */
#cardBlurb .lvb,#shopBlurb .lvb{position:absolute;top:14px;right:16px;display:flex;flex-direction:column;align-items:center;border-radius:6px;padding:4px 11px 6px;line-height:1}
#cardBlurb .lvb i,#shopBlurb .lvb i{font-style:normal;font-family:var(--sc);font-weight:600;letter-spacing:.03em;font-size:12px;margin-bottom:2px}
#cardBlurb .lvb span,#shopBlurb .lvb span{font-family:var(--serif);font-weight:700}
#cardBlurb .lvb.t1,#shopBlurb .lvb.t1{color:var(--dim);border:1.5px solid var(--rule)}
#cardBlurb .lvb.t2,#shopBlurb .lvb.t2{color:var(--paper-ink);background:linear-gradient(180deg,var(--gold-hi),var(--gold));border:1px solid var(--gold-lo)}
#cardBlurb .lvb.t5,#shopBlurb .lvb.t5{color:var(--paper-ink);background:linear-gradient(180deg,#fff1c4,var(--gold-hi) 40%,#b8862c);border:1px solid #fff1c4;box-shadow:0 0 14px rgb(var(--gold-hi-rgb) / .55)}
#cardBlurb .lvb.t8,#shopBlurb .lvb.t8{color:#fff1c4;background:linear-gradient(160deg,#5e2018,var(--wax-hi) 50%,#5e2018);border:2px solid var(--gold-hi);box-shadow:0 0 20px rgb(var(--gold-hi-rgb) / .6)}
#cardBlurb .lvb.t8 span,#shopBlurb .lvb.t8 span{background:linear-gradient(100deg,#e6bd5c 20%,#fff6d8 45%,#e6bd5c 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:lvGleam 2.6s linear infinite}
body.noanim #cardBlurb .lvb.t8 span,body.noanim #shopBlurb .lvb.t8 span{animation:none}
@keyframes lvGleam{from{background-position:120% 0}to{background-position:-100% 0}}
#cardBlurb .t.withLv,#shopBlurb .t.withLv{padding-right:84px}
#cardBlurb .live,#shopBlurb .live{margin-top:10px;font-family:var(--sc);font-weight:600;letter-spacing:.04em;color:var(--brass-hi)}
#cardBlurb .live b,#shopBlurb .live b{color:var(--ivory)}
/* THE TRACKERS (Chris 10/9; ui/play.js TRACK): under a seated Tutor's words, the small set of things its condition
   collects. One look for every one of them, on the Board's card, the phone's sheet and the Study's card: a thing
   that does not count yet is faded, and one that counts is full. A row of pictures holds up to 8 across and its
   cells shrink before they would widen the card; a row of labels wraps. */
.trk{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.trk .trp{display:grid;grid-template-columns:repeat(8,minmax(0,44px));column-gap:1px;align-items:start}
.trk .tc{display:flex;flex-direction:column;align-items:center;font-style:normal;min-width:0}
.trk .tc svg{display:block;width:100%;max-width:36px;height:auto;aspect-ratio:1;opacity:.26}
.trk .tc.on svg{opacity:1}
.trk .tc b{font-family:var(--serif);font-weight:700;font-size:15px;line-height:1;margin-top:1px;color:var(--faint)}
.trk .tc.some b{color:var(--ivory)} .trk .tc.hit b{color:var(--gold-hi)}
/* a Legendary piece's count stands on the colors of its sash */
.trk .tc.leg::after{content:'';display:block;width:24px;max-width:80%;height:3px;margin-top:3px;border-radius:1px;
  background:linear-gradient(90deg,#d8352b 0 16.6%,#f08c1e 0 33.3%,#f6d53a 0 50%,#3ea54a 0 66.6%,#2c6fd1 0 83.3%,#7d3fa8 0)}
.trk .trw{display:flex;flex-wrap:wrap;gap:6px}
/* a label keeps its words readable while it is faded: its color thins to a wash behind them, and fills in when it counts */
.trk .tw{--c:var(--paper-2);position:relative;isolation:isolate;font-style:normal;font-family:var(--sc);font-weight:600;letter-spacing:.03em;font-size:15px;line-height:1.25;white-space:nowrap;border-radius:4px;padding:2px 9px;color:var(--c);opacity:.62}
.trk .tw::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:4px;background:var(--c);opacity:.2}
.trk .tw.on{color:var(--paper-ink);opacity:1} .trk .tw.on::before{opacity:1}
.trk .tw b{font-family:var(--serif);font-weight:700}
body.port .trk{margin-top:12px;gap:6px} body.port .trk .tw{font-size:13px;padding:2px 8px} body.port .trk .tc b{font-size:14px}
#scrim{position:absolute;inset:0;z-index:67;background:rgb(var(--night-rgb) / .55)}
#curtain{position:absolute;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:radial-gradient(ellipse at 50% 45%,rgba(60,20,14,.92),rgb(var(--night-rgb) / .97) 70%);cursor:pointer;transition:opacity 1.2s ease}
#curtain .nm{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--brass-hi);text-align:center}
#curtain .ln{font-style:italic;color:var(--ivory);text-align:center}
#curtain .wx{border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--wax-hi),var(--wax) 58%,#4e1c14);box-shadow:inset 0 2px 6px rgba(255,190,170,.35),0 6px 14px rgba(0,0,0,.55)}
#handoff{position:absolute;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:rgb(var(--night-rgb) / .62)}
#handoff .sheet{background:var(--paper);color:var(--paper-ink);border-radius:3px;box-shadow:0 20px 50px rgba(0,0,0,.7);text-align:center}
#handoff .ey{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--paper-ink-2)}
#handoff h2{font-family:var(--sc);font-weight:600;letter-spacing:.03em}
#handoff .vs{display:flex;justify-content:center;align-items:baseline;gap:18px;font-family:var(--serif);font-weight:700}
#handoff .vs small{display:block;font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--paper-ink-2)}
#handoff .note{font-style:italic;color:var(--paper-ink-2)}
/* a lost Composition's mate, written out under the sentence that says it is lost (Chris 10/6) */
#handoff .hline{font-family:var(--serif);font-weight:700;color:var(--paper-ink);text-wrap:balance}
#handoff .hline span{white-space:nowrap}
#handoff .hline small{display:block;font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--paper-ink-2)}
#handoff .btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
#handoff .hb{font-family:var(--sc);font-weight:600;letter-spacing:.03em;border:1.5px solid var(--paper-ink-2);border-radius:5px;color:var(--paper-ink);background:var(--paper-2)}
#handoff .hb.pri{background:linear-gradient(180deg,var(--brass-hi),var(--brass));border-color:var(--brass-lo)}
/* the engine's tutorial note, in the new dress */
#tutTip{background:linear-gradient(180deg,var(--panel-lo),var(--panel-lo))!important;border:2px solid var(--brass)!important;color:var(--ivory);font-family:var(--serif)!important;font-size:15px!important}
#tutTip .stakeBtn{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--brass-hi);border:1.5px solid var(--brass);border-radius:5px;background:rgb(var(--panel-rgb) / .6);cursor:pointer}
#bridge{display:none}

/* =====================================================================
   DESK — the 1600×1000 stage (positions from mocks/play.html, approved)
   ===================================================================== */
body.desk #stage{width:1600px;height:1000px}
body.desk #stage>*{position:absolute}
body.desk #band{left:0;top:0;width:1600px;height:112px}
body.desk #plate{left:35px;top:24px;height:64px;padding:0 18px;width:262px;box-sizing:border-box;position:absolute}
body.desk #plate .k{font-size:15px} body.desk #plate .n{font-size:24px}
body.desk #bandbtns{position:absolute;top:14px;display:flex;flex-direction:column;gap:8px}
body.desk .bb{width:150px;height:39px;gap:10px;padding:0 12px 0 8px;font-size:17px}
body.desk .bb svg{width:28px;height:28px}
body.desk #seats{position:absolute;left:558px;top:8px;gap:8px}
body.desk .seat{width:72px;height:96px}
body.desk .chip{font-size:15px}
body.desk #bdiv{position:absolute;left:1042px;top:26px;width:1px;height:60px;background:linear-gradient(transparent,var(--brass-lo),transparent)}
body.desk #tokens{position:absolute;left:1056px;top:24px;gap:12px}
body.desk .token{width:64px;height:64px;font-size:28px}
body.desk .plateG{position:absolute;left:1214px;top:28px;width:180px;height:56px;gap:10px}
body.desk .plateL{position:absolute;left:1406px;top:28px;width:159px;height:56px;gap:10px}
body.desk .plateG .n,body.desk .plateL .n{font-size:34px} body.desk .plateG .w,body.desk .plateL .w{font-size:17px}
body.desk #sub{left:35px;top:112px;width:1530px;height:30px;display:flex;align-items:center;justify-content:space-between}
body.desk #sub .lbl{font-size:17px} body.desk #sub .b{color:var(--brass);font-family:var(--serif);font-weight:700;font-size:20px;letter-spacing:.02em}
body.desk .lbl{font-size:17px}
body.desk #console{left:35px;top:156px;width:360px;height:264px;padding:22px 24px}
body.desk #console .num{font-size:52px}
body.desk #rscore{margin-top:18px}
body.desk #bar{height:14px;border-radius:7px;margin-top:18px} body.desk #bar .fill{border-radius:7px}
body.desk .cleared{font-size:25px;padding:3px 12px}
body.desk #note{margin-top:9px;font-size:17px}
body.desk .x2{margin-top:12px;gap:8px;padding:4px 12px;font-size:17px}
body.desk #eq{left:35px;top:432px;width:360px;height:196px;padding:20px 24px}
body.desk #eq .plqs{display:flex;align-items:center;gap:6px;margin-top:14px}
body.desk .plq{width:86px;height:82px} body.desk .plq .num{font-size:40px} body.desk .plq .lbl{font-size:15px;margin-top:2px}
body.desk .x{font-size:26px} body.desk .x.eqs{display:none}
body.desk .scoreplq{margin-top:12px;height:46px;justify-content:space-between;padding:0 16px}
body.desk .scoreplq .num{font-size:32px} body.desk .scoreplq .lbl{font-size:15px}
body.desk #meta{left:35px;top:640px;width:360px;height:98px;padding:18px 24px;display:flex;justify-content:space-between}
body.desk #meta .col{display:flex;flex-direction:column;gap:10px} body.desk #meta .col.r{text-align:right;align-items:flex-end}
body.desk .pips{gap:7px} body.desk .pip{width:18px;height:18px}
body.desk #clockVal{font-size:20px}
body.desk #boardNo{display:none}
body.desk #drills{left:35px;top:750px;width:360px;height:226px;padding:18px 24px}
body.desk #drills .drills{margin-top:14px} body.desk .drill{height:118px}
body.desk #info{left:425px;top:156px;width:750px;height:46px;padding:0 20px}
body.desk #info .turn{font-size:24px;gap:12px} body.desk .stm{width:14px;height:14px} body.desk #info .kind{font-size:17px}
body.desk .rw{font-size:24px;line-height:40px} body.desk .rw.big{font-size:40px;line-height:52px}
body.desk #frame{left:442px;top:210px;width:716px;height:716px;padding:6px}
body.desk .sq .co{font-size:15px}
body.desk .mark{top:-10px;right:-10px;min-width:36px;height:36px;padding:0 6px;border-radius:18px;font-size:21px}
body.desk #np{left:425px;top:936px;width:750px;height:40px;font-size:17px} body.desk #np .npb{width:34px;height:34px}
/* each button is as wide as its own label (glyph, word, count — two-digit counts included) and the
   row shares what is left; equal columns clipped Reroll (Chris 9/29) */
.arow{display:flex;gap:6px} .arow .ab{flex:1 1 auto}
body.desk #acts{left:1205px;top:156px;width:360px;height:130px;padding:18px 14px;display:flex;flex-direction:column;gap:8px}
body.desk #acts .ab{height:40px} body.desk #acts .ab.opt{height:34px;flex:1 1 0}
body.desk .ab{font-size:15px;padding:0 5px;letter-spacing:.01em;gap:4px}
body.desk #acts .main .ab{font-size:14.5px} .ab .c{font-size:.92em}
body.desk #acts .ab.menu{display:none}
body.desk #sheet{left:1205px;top:298px;width:360px;height:678px;padding:20px 22px;display:flex;flex-direction:column}
body.desk #sheet .sub{font-size:17px;margin-top:4px}
body.desk .ss{margin-top:16px;flex:1;min-height:0}
body.desk .mv{grid-template-columns:38px 1fr auto;padding:10px 0}
body.desk .mv .n{font-size:20px} body.desk .mv .s{font-size:24px} body.desk .mv .p{font-size:20px}
body.desk .mv .why{grid-column:2/4;font-size:15px;margin-top:3px}
body.desk .mv .rep{font-size:20px;margin-left:12px}
body.desk .coin{width:58px;height:58px;font-size:22px}
body.desk .seal{width:118px;height:118px} body.desk .seal .a{font-size:15px} body.desk .seal .b{font-size:26px}
body.desk .banner .t{font-size:40px} body.desk .banner .s{font-size:20px}
body.desk #cardBlurb{width:400px;padding:18px 20px 16px} body.desk #cardBlurb .t{font-size:30px}
body.desk #cardBlurb .tags{margin:8px 0 10px} body.desk #cardBlurb .tag{font-size:15px;padding:2px 9px} body.desk #cardBlurb .d{font-size:20px}
body.desk #cardBlurb .lvb span,body.desk #shopBlurb .lvb span{font-size:34px} body.desk #cardBlurb .live,body.desk #shopBlurb .live{font-size:18px}
body.desk #curtain .nm{font-size:56px} body.desk #curtain .ln{font-size:24px;max-width:900px} body.desk #curtain .wx{width:90px;height:90px}
body.desk #handoff .sheet{width:640px;padding:38px 48px 34px}
body.desk #handoff .ey{font-size:15px} body.desk #handoff h2{font-size:40px;margin:10px 0 20px}
body.desk #handoff .vs{font-size:52px} body.desk #handoff .vs small{font-size:15px} body.desk #handoff .vs .op{font-size:24px;font-style:italic;font-weight:400;color:var(--paper-ink-2)}
body.desk #handoff .note{font-size:20px;margin:18px 0 26px} body.desk #handoff .hb{font-size:17px;padding:10px 20px}
body.desk #handoff .note.lined{margin-bottom:14px} body.desk #handoff .hline{font-size:26px;margin:0 0 26px} body.desk #handoff .hline small{font-size:15px;margin-bottom:2px}

/* =====================================================================
   PORT — the portrait stage: 430 wide, a flex column (mocks/play_phone.html)
   ===================================================================== */
/* THE PHONE'S SCORE SHEET HOLDS THREE ROWS (bot report 10/5, "For the owner" 7; ruled 10/6). The Board took its squares
   first and the sheet was left less than one row at 390 by 844, and the Drills lay under the Board. The room comes
   from three places. The track's line no longer has a row of its own: it sits at the right of the tabs' row
   (ui/play.js place). The rail, the console, the info line, the equation, the tabs and the action bar each give up
   2 to 6 pixels of margin. And the script counts three rows of the sheet before it sizes the Board (ui/play.js
   fit), which costs the Board one pixel a square: 49 at 390 by 844 and 43 at 360 by 740. --mvh is one row's height. */
body.port{--mvh:27px}
body.port #stage{width:430px;display:flex;flex-direction:column}
body.port #stage>*{position:relative;flex:none}
body.port #stage>#fx,body.port #stage>#cardBlurb,body.port #stage>#scrim,body.port #stage>#curtain,body.port #stage>#handoff{position:absolute}
body.port #band{height:64px;display:flex;align-items:center;gap:5px;padding:0 10px}
body.port #plate{flex:1 1 auto;min-width:0;height:46px;padding:0 9px}
body.port #plate .k{font-size:11px} body.port #plate .n{font-size:14.5px;letter-spacing:.02em}
body.port #bandbtns{display:flex;gap:5px}
body.port .bb{width:44px;height:44px;justify-content:center;font-size:0;padding:0} body.port .bb svg{width:28px;height:28px}
body.port #seats,body.port #tokens,body.port #bdiv{display:none}
body.port .plateG,body.port .plateL{flex:none;height:44px;gap:5px;padding:0 8px}
body.port .plateG svg{width:20px;height:20px} body.port .plateL svg{width:18px;height:17px}
body.port .plateG .n,body.port .plateL .n{font-size:23px} body.port .plateG .w,body.port .plateL .w{display:none}
body.port #rail{height:70px;display:flex;align-items:center;gap:5px;padding:0 10px;border-bottom:1px solid rgb(var(--brass-rgb) / .14)}
body.port #rail #seats,body.port #rail #tokens{display:flex;gap:5px}
body.port #rail #bdiv{display:block;flex:none;width:1px;height:48px;margin:0 3px;background:linear-gradient(transparent,var(--brass-lo),transparent)}
body.port .seat{width:45px;height:63px;border-width:4px} body.port .seat .sb{height:5px} body.port .seat .em{top:8px;bottom:2px;font-size:22px}
body.port .token{width:42px;height:42px;font-size:20px}
body.port .chip{font-size:12px}
body.port #sub{display:none}
body.port .lbl{font-size:13px}
body.port #console{margin:6px 10px 0;padding:8px 14px 4px;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}
body.port #target,body.port #rscore{display:inline-flex;flex-direction:column;gap:3px}
body.port #cRow{display:flex;justify-content:space-between;align-items:flex-end}
body.port #rscore{align-items:flex-end}
body.port #console .num{font-size:30px}
body.port #bar{height:10px;border-radius:5px;margin-top:8px} body.port #bar .fill{border-radius:5px}
body.port .cleared{font-size:19px;padding:1px 10px}
body.port #note{display:none}
body.port .x2{font-size:12px;padding:1px 7px;position:absolute;right:14px;bottom:-26px;z-index:3}
body.port #meta{margin:0 10px;padding:5px 14px 6px;display:flex;justify-content:space-between;align-items:center;border-top-left-radius:0;border-top-right-radius:0;border-top:0;box-shadow:0 6px 16px rgba(0,0,0,.35)}
body.port #meta .col{display:flex;align-items:center;gap:6px} body.port #meta .col .lbl.mv2{display:none}
body.port .pips{gap:5px} body.port .pip{width:12px;height:12px}
body.port #clockVal{font-size:13px} body.port #boardNo{font-style:italic;color:var(--dim);font-size:13px}
body.port #info{order:0;height:34px;margin:0 10px;padding:0 4px}
body.port #info .turn{font-size:19px;gap:8px} body.port .stm{width:12px;height:12px} body.port #info .kind{font-size:13px}
body.port .rw{font-size:16px;line-height:28px} body.port .rw.big{font-size:26px;line-height:34px}
body.port #frame{align-self:center;padding:6px}
body.port .sq .co{font-size:11px}
body.port .mark{top:-8px;right:-8px;min-width:24px;height:24px;padding:0 4px;border-radius:12px;font-size:14px;border-width:1.5px}
body.port #eq{margin:6px 10px 0;background:none;border:0;box-shadow:none;padding:0}
body.port #eq>.lbl{display:none}
body.port #eq .plqs{display:flex;align-items:center;gap:5px}
body.port .plq{width:66px;height:50px;border-radius:5px} body.port .plq .num{font-size:25px} body.port .plq .lbl{font-size:10.5px;letter-spacing:.08em}
body.port .x{font-size:18px}
body.port .scoreplq{flex:1;height:50px;flex-direction:column;justify-content:center;margin:0}
body.port .scoreplq .num{font-size:25px;order:0} body.port .scoreplq .lbl{font-size:10.5px;order:1}
body.port #eq .eqwrap{display:flex;align-items:center;gap:5px}
body.port #tabs{display:flex;gap:4px;margin:6px 10px 0;border-bottom:1px solid var(--rule)}
.tab{font-family:var(--sc);font-weight:600;font-size:13px;letter-spacing:.03em;color:var(--faint);padding:6px 10px 5px;border-bottom:2px solid transparent;}
.tab.on{color:var(--brass-hi);border-bottom-color:var(--brass)}
.tab .s{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;color:var(--dim);margin-left:6px;font-weight:400}
body.port #sheet,body.port #drills{flex:1 1 0;min-height:0;margin:0 10px;background:none;border:0;box-shadow:none;padding:0;display:flex;flex-direction:column}
body.port #sheet>.lbl,body.port #sheet>.sub,body.port #drills>.lbl{display:none}
body.port.tabDrills #sheet,body.port:not(.tabDrills) #drills{display:none}
body.port #drills .drills{margin-top:6px;gap:5px} body.port .drill{height:74px;padding:3px 0} body.port .drill svg{width:28px;height:28px} body.port .drill .lv{font-size:12px}
body.port .ss{flex:1;min-height:0;justify-content:flex-start}
body.port .mv{grid-template-columns:24px auto 1fr auto;gap:8px;padding:3px 8px 3px 2px;min-height:var(--mvh);align-items:center}
body.port .mv>*{grid-row:1}
body.port .mv .n{grid-column:1} body.port .mv .s{grid-column:2} body.port .mv .why{grid-column:3} body.port .mv .p{grid-column:4}
body.port .mv .n{font-size:13px} body.port .mv .s{font-size:17px} body.port .mv .p{font-size:15px}
body.port .mv .why{font-size:12px} body.port .mv .rep{font-size:15px;margin-left:8px}
body.port.short #tabs,body.port.short #sheet,body.port.short #drills{display:none}
body.port #np{flex:1 1 0;min-width:0;height:28px;margin:0 0 0 8px;align-self:center;justify-content:flex-end;font-size:13px;gap:6px} body.port #np .npb{width:28px;height:28px}
body.port #np .npl{display:none} body.port #np .npt{min-width:0}
body.port.short #np{display:none}
body.port #acts{height:64px;margin-top:4px;display:flex;gap:6px;padding:8px 10px 10px;
  background:linear-gradient(180deg,rgb(var(--panel-rgb) / 0),rgb(var(--panel-rgb) / .9) 30%);border-top:1px solid rgb(var(--brass-rgb) / .16)}
body.port.short #acts{margin-top:auto}
body.port .ab{font-size:14px;padding:0 6px;flex:1 1 auto;letter-spacing:.03em}
body.port #acts .arow.opts{display:none} body.port #acts .arow.main{flex:1}
body.port .coin{width:40px;height:40px;font-size:16px}
body.port .seal{width:96px;height:96px} body.port .seal .a{font-size:11px} body.port .seal .b{font-size:20px}
body.port .banner .t{font-size:26px} body.port .banner .s{font-size:15px}
body.port #cardBlurb{left:0!important;right:0;bottom:0;top:auto!important;border-radius:14px 14px 0 0;border-width:2px 0 0;padding:10px 16px 18px}
body.port #cardBlurb .grab{display:block;width:44px;height:5px;border-radius:3px;background:var(--faint);margin:0 auto 14px}
body.port #cardBlurb .lvb{top:22px} body.port #cardBlurb .lvb span{font-size:26px} body.port #cardBlurb .lvb i{font-size:10px} body.port #cardBlurb .live{font-size:15px}
body.port #cardBlurb .t{font-size:24px} body.port #cardBlurb .tags{margin:8px 0 10px} body.port #cardBlurb .tag{font-size:12px;padding:2px 8px} body.port #cardBlurb .d{font-size:16px}
body.port #cardBlurb .close{display:inline-block;margin-top:14px;font-family:var(--sc);font-weight:600;font-size:14px;letter-spacing:.03em;color:var(--brass-hi);border:1.5px solid var(--brass);border-radius:6px;padding:10px 18px}
body.port #curtain .nm{font-size:34px;padding:0 20px} body.port #curtain .ln{font-size:17px;padding:0 24px} body.port #curtain .wx{width:64px;height:64px}
body.port #handoff .sheet{width:390px;padding:26px 22px 22px}
body.port #handoff .ey{font-size:12px} body.port #handoff h2{font-size:28px;margin:8px 0 14px}
body.port #handoff .vs{font-size:34px} body.port #handoff .vs small{font-size:11px} body.port #handoff .vs .op{font-size:17px;font-style:italic;font-weight:400;color:var(--paper-ink-2)}
body.port #handoff .note{font-size:15px;margin:14px 0 18px} body.port #handoff .hb{font-size:14px;padding:10px 16px}
body.port #handoff .note.lined{margin-bottom:10px} body.port #handoff .hline{font-size:19px;margin:0 0 18px} body.port #handoff .hline small{font-size:11px;margin-bottom:2px}
/* the engine's first-Crossway note, in the new dress */
#crossTip{background:linear-gradient(180deg,var(--panel-lo),var(--panel-lo))!important;border:2px solid var(--brass)!important;font-family:var(--serif);font-size:15px!important;color:var(--ivory)}
#crossTip .stakeBtn{font-family:var(--sc);font-weight:600;color:var(--brass-hi);border:1.5px solid var(--brass);border-radius:5px;background:rgb(var(--panel-rgb) / .6);cursor:pointer;margin-top:4px}
body.port #acts{order:10}
/* the engine's own grade pop keeps its brief ring; its glyph yields to the §7.1 marks */
.gpop{display:none}

/* the expanded move (Chris 9/29) */
.mv.can{cursor:pointer} .mv.can:hover{background:rgb(var(--brass-rgb) / .06)}
.mv .det{grid-column:1/-1;margin-top:8px;padding:8px 10px;border-left:2px solid var(--brass-lo);background:rgb(var(--night-rgb) / .45);border-radius:0 4px 4px 0}
.mv .deq{color:var(--dim);margin-bottom:6px} .mv .deq b{color:var(--brass-hi);font-weight:700}
.mv .dln{display:flex;justify-content:space-between;gap:10px;padding:2px 0;color:var(--ivory)} .mv .dln b{color:var(--brass);font-weight:700;white-space:nowrap}
.mv .dln.ff span{text-decoration:line-through;text-decoration-color:rgba(192,58,40,.7);color:var(--dim)}
body.desk .mv .det{font-size:16px} body.port .mv .det{font-size:13px}
body.port .mv .det{grid-row:2}

/* the target, once crossed: the number stays, brass and checked (Chris 9/29) */
#target.met .num{color:var(--gold-hi)} #target.met .num::before{content:'✓';font-size:.55em;vertical-align:.35em;margin-right:.25em;color:var(--gold)}
#tCleared{display:none!important}
/* §7.4 bar crossed — the brass ribbon */
.barx{position:absolute;transform:translate(-50%,-50%);z-index:55;display:flex;align-items:baseline;gap:18px;white-space:nowrap;pointer-events:none;
  background:linear-gradient(180deg,#fbe39a,var(--gold-hi) 35%,var(--gold) 70%,#9b7424);color:var(--paper-ink);border:2px solid var(--gold-lo);border-radius:6px;
  box-shadow:0 0 0 3px rgb(var(--night-rgb) / .55),0 0 46px rgb(var(--gold-hi-rgb) / .75),0 10px 26px rgba(0,0,0,.55);animation:barx 2300ms var(--e-land) both}
.barx .k{font-family:var(--sc);font-weight:600;letter-spacing:.03em;}
.barx .v{font-family:var(--serif);font-weight:700}
@keyframes barx{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}10%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}18%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
#frame.barlit{box-shadow:0 0 0 3px var(--gold-hi),0 0 56px rgb(var(--gold-hi-rgb) / .6),0 18px 44px rgba(0,0,0,.6)}
/* the ribbon keeps to the band above the board (Chris 9/30: "don't obstruct the board") — flair: a
   sweep of light across it and two sparks thrown off its ends */
.barx{overflow:visible}
.barx .shine{position:absolute;inset:0;border-radius:6px;overflow:hidden;pointer-events:none}
.barx .shine::before{content:'';position:absolute;top:0;bottom:0;width:40%;left:-50%;background:linear-gradient(100deg,transparent,rgba(255,250,225,.85),transparent);animation:barShine 900ms 250ms ease-out both}
@keyframes barShine{to{left:120%}}
.barx .sp{position:absolute;top:50%;font-style:normal;color:var(--gold-hi);text-shadow:0 0 12px rgba(255,230,160,.9);animation:barSpark 1100ms 150ms var(--e-enter) both}
.barx .sp.a{left:-6px;--dx:-60px} .barx .sp.b{right:-6px;--dx:60px}
@keyframes barSpark{0%{opacity:0;transform:translate(0,-50%) scale(.4) rotate(0)}30%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-80%) scale(1.3) rotate(160deg)}}
body.desk .barx{padding:5px 30px;border-radius:5px} body.desk .barx .k{font-size:24px} body.desk .barx .v{font-size:28px} body.desk .barx .sp{font-size:28px}
body.port .barx{padding:3px 14px;gap:8px} body.port .barx .k{font-size:14px} body.port .barx .v{font-size:17px} body.port .barx .sp{font-size:18px}

/* THE ROAD — the line under the band (Chris 9/30, mock round 3 B) */
body.desk #sub #subL{display:flex;align-items:center;text-transform:none;letter-spacing:.08em;font-size:16px}
.road{display:flex;align-items:center}
.rst{display:flex;align-items:center;gap:8px;font-family:var(--sc);font-weight:600;white-space:nowrap}
.rst .dot{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--faint);display:grid;place-items:center;font-size:12px;line-height:1;color:var(--night);box-sizing:border-box}
.rst.done{color:var(--dim)} .rst.done .dot{background:var(--brass-lo);border-color:var(--brass)}
.rst.here{color:var(--brass-hi)} .rst.here .dot{background:var(--brass-hi);border-color:var(--brass-hi);box-shadow:0 0 12px rgb(var(--brass-hi-rgb) / .6)}
.rst.ahead{color:var(--faint)} .rst.boss .dot{border-color:var(--wax-hi);color:var(--wax-hi);font-size:13px}
.rst.boss.here .dot{color:var(--night)}
.rgap{width:56px;height:0;border-top:2px dotted var(--faint);margin:0 10px} .rgap.done{border-top:2px solid var(--brass-lo)}
.rst .pips{display:flex;gap:4px;margin-left:6px} .rst .pips i{width:8px;height:8px;border:1px solid var(--brass);transform:rotate(45deg)}
.rst .pips i.on{background:var(--brass)} .rst .pips i.now{background:var(--brass-hi);box-shadow:0 0 6px rgb(var(--brass-hi-rgb) / .8)}
/* the TARGET CLEARED banner: brass swallowtail, the medal held inside its height */
.barx{background:none;border:none;border-radius:0;box-shadow:none;padding:0 !important;align-items:center;gap:0;
  filter:drop-shadow(0 0 26px rgb(var(--gold-hi-rgb) / .65)) drop-shadow(0 10px 16px rgba(0,0,0,.6))}
.barx .ban{position:relative;display:flex;align-items:center;background:linear-gradient(180deg,#fbe39a,var(--gold-hi) 35%,var(--gold) 70%,#9b7424);color:var(--paper-ink);
  box-shadow:inset 0 3px 0 rgba(255,246,214,.65),inset 0 -3px 0 rgba(95,64,16,.5)}
.barx .med{flex:none;display:grid;place-items:center;border-radius:50%;font-weight:700;color:var(--paper-ink);
  background:radial-gradient(circle at 38% 32%,#fff1c4,var(--gold-hi) 45%,var(--gold-lo));border:2px solid var(--gold-lo);box-shadow:inset 0 0 0 2px rgba(255,240,200,.45)}
.barx .shine{border-radius:0}
body.desk .barx .ban{height:56px;gap:18px;padding:0 60px;clip-path:polygon(0 0,100% 0,calc(100% - 24px) 50%,100% 100%,0 100%,24px 50%)}
body.desk .barx .med{width:44px;height:44px;font-size:24px}
body.port .barx .ban{height:34px;gap:10px;padding:0 30px;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 50%,100% 100%,0 100%,14px 50%)}
body.port .barx .med{width:26px;height:26px;font-size:15px}
/* your Stripes on the board (Chris 10/5): no hatching. The striped rank's number and the striped file's letter
   wear the metal, and the square you land on shimmers once in it. Gold is gold in every room. */
.sq .co.m1,.sq .co.m2,.sq .co.m3{opacity:1;font-weight:700;text-shadow:0 0 2px rgba(0,0,0,.9),0 1px 0 rgba(0,0,0,.8)}
.sq .co.m1{color:#d08a4e} .sq .co.m2{color:#e6eaee} .sq .co.m3{color:#f2c64e}
body.desk .sq .co.m1,body.desk .sq .co.m2,body.desk .sq .co.m3{font-size:19px} body.port .sq .co.m1,body.port .sq .co.m2,body.port .sq .co.m3{font-size:13px}
.sq .shim{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;animation:shim .55s ease-out forwards}
.sq .shim::after{content:'';position:absolute;top:-20%;bottom:-20%;left:-60%;width:45%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);animation:shimSweep .55s ease-out forwards}
.sq .shim.m1{background:rgba(208,138,78,.62);box-shadow:inset 0 0 0 3px #d08a4e} .sq .shim.m2{background:rgba(226,231,236,.62);box-shadow:inset 0 0 0 3px #e6eaee} .sq .shim.m3{background:rgba(242,198,78,.66);box-shadow:inset 0 0 0 3px #f2c64e}
@keyframes shim{0%{opacity:0}18%{opacity:1}60%{opacity:.85}100%{opacity:0}}
@keyframes shimSweep{0%{left:-60%}100%{left:130%}}
/* a Tutor that fires pops its emblem on the move's path (ui/play.js boardPop). It is drawn over the pieces (z-index 2) and the
   move dots (3), and under a sliding piece (5), the grade marks (6), the promotion picker, the cards, the menus and the dragged
   piece (bug sweep 11/9, V2: at 1 a toast was hidden under the pieces beside it) */
#popLayer{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
#popLayer .bpop{position:absolute;white-space:nowrap;transform:translate(-50%,-50%);font-family:var(--sc);font-weight:600;letter-spacing:.02em;line-height:1;
  color:var(--ivory);background:rgba(12,10,8,.68);box-shadow:0 0 7px 4px rgba(12,10,8,.68);border-radius:9px;animation:bpop 1.45s ease-out forwards}
#popLayer .bpop .nm{font-weight:600}
#popLayer .bpop .amt{font-family:var(--serif);font-weight:700}
#popLayer .bpop.wp{color:var(--pts)} #popLayer .bpop.ws{color:var(--sharp)} #popLayer .bpop.wc{color:var(--chain)} #popLayer .bpop.wx{color:var(--bonus)} #popLayer .bpop.wg{color:var(--gold-hi)}
#popLayer .bpop.more{color:var(--dim);font-style:italic}
body.desk #popLayer .bpop{font-size:15px;padding:3px 7px} body.port #popLayer .bpop{font-size:11px;padding:2px 5px}
@keyframes bpop{0%{opacity:0;transform:translate(-50%,-40%)}12%{opacity:.82;transform:translate(-50%,-50%)}70%{opacity:.82}100%{opacity:0;transform:translate(-50%,-58%)}}

/* the band's Menu button (Chris 10/2): beside the Ledger and the Act Map, a tall button of its own on the desk */
body.desk #bandbtns{display:grid;grid-template-columns:auto auto;grid-auto-flow:column;grid-template-rows:auto auto;column-gap:8px}
body.desk #bandbtns .bb.menu{grid-row:1 / span 2;width:76px;height:auto;flex-direction:column;justify-content:center;gap:4px;padding:6px;font-size:15px}
#bandbtns .bb.menu svg{color:var(--brass-hi)}

/* more than six seats: they overlap, and the one under the pointer comes forward (Chris 10/2) */
#seats.lapped .seat{transition:transform var(--d-s)}
/* the raised seat is the one whose visible edge the pointer or the finger is on (ui/play.js seatAtX), not the one
   the browser's hover stays on: a raised seat covers its neighbors' edges, and they could not be reached */
#seats.lapped .seat.up{z-index:6;transform:translateY(5px) scale(1.08)}
.seat.imm{box-shadow:0 0 0 2px var(--gold),0 4px 10px rgba(0,0,0,.45)}
/* THE HOME OF THE REPERTOIRE, THE BOOKS AND THE RUN UPGRADES (Chris 10/8: "the run upgrades need to have a home
   somewhere... beneath the top bar where the tutors sit, on the right of our act path"; ui/play.js paintShelf).
   They were 28-pixel dark chips with a bare character on each. Each is now a plaque of paper in a brass edge, like a
   seat, with the card's own drawing on it; the three groups stand under their names. A plaque that triggers lifts
   and takes a bright edge, as a seat does, and its pip comes beneath it (.chip.upip). On the desk the strip lies
   between the road and the Run Score, over the Study as well. On a phone it is the third tab's panel in play and
   a row under the Tutors in the Study. */
#shelfRow{display:none}
#shelfRow .shg{display:flex;align-items:center;flex:none} #shelfRow .shp{display:flex;align-items:center}
#shelfRow .shl{color:var(--dim)}
#shelfRow .ownc{position:relative;flex:none;box-sizing:border-box;padding:0;border-radius:6px;border:2px solid var(--brass);background:var(--paper);color:var(--paper-ink);
  box-shadow:0 2px 6px rgba(0,0,0,.45);cursor:pointer;line-height:1;transition:transform var(--d-s) var(--e-enter),box-shadow var(--d-s),border-color var(--d-s)}
#shelfRow .ownc .pic{display:block;width:100%;height:100%;border-radius:4px;overflow:hidden}
#shelfRow .ownc .pic svg{display:block;width:100%;height:100%}
#shelfRow .ownc.ru{background:#c9a24a}
#shelfRow .ownc.late{border-color:var(--gold)}
#shelfRow .ownc b{position:absolute;right:-6px;bottom:-5px;box-sizing:border-box;min-width:17px;height:17px;padding:0 3px;border-radius:9px;background:var(--night);color:var(--brass-hi);
  border:1px solid var(--brass);font-family:var(--serif);font-weight:700;font-size:12px;line-height:15px;text-align:center}
#shelfRow .ownc:hover{border-color:var(--brass-hi)}
#shelfRow .ownc.fire{transform:translateY(-3px);border-color:var(--brass-hi);box-shadow:0 0 0 2px var(--brass-hi),0 7px 14px rgba(0,0,0,.55)}
#shelfRow .ownc.more{width:auto;background:none;color:var(--brass-hi);border-style:dashed;box-shadow:none;font-family:var(--sc);font-weight:600;cursor:pointer}
body.desk #shelfRow{display:flex;position:absolute;right:250px;top:113px;height:34px;gap:16px;align-items:center;justify-content:flex-end;z-index:3}
body.desk #shelfRow .shg{gap:8px} body.desk #shelfRow .shp{gap:6px} body.desk #shelfRow .shl{font-size:15px}
body.desk #shelfRow .ownc{width:34px;height:34px} body.desk #shelfRow .ownc.more{min-width:34px;padding:0 6px;font-size:15px}
body.desk #shelfRow.nolbl .shl{display:none} body.desk #shelfRow.nolbl{gap:10px}
body.desk #shelfRow.nolbl .shg+.shg{padding-left:10px;border-left:1px solid var(--faint)}   /* with the names given up, a thin rule keeps the groups apart */
body.desk #shelfRow.tight{gap:6px} body.desk #shelfRow.tight .shp{gap:3px} body.desk #shelfRow.tight .shg+.shg{padding-left:6px}
body.desk #shelfRow.small .ownc{width:30px;height:30px} body.desk #shelfRow.small .ownc.more{min-width:30px;padding:0 4px}
body.desk.inStudy #shelfRow{z-index:45}
/* the phone: the third tab's panel (the tab is made in ui/play.js shelfTab), in the Score Sheet's own place. The
   tab's name lights for a moment when a Run Upgrade triggers behind it (tabPing) */
.tab.ping{color:var(--brass-hi);text-shadow:0 0 10px rgb(var(--brass-hi-rgb) / .8);transition:color var(--d-s)}
body.port.tabShelf #sheet,body.port.tabShelf #drills{display:none}
body.port.tabShelf:not(.docOn):not(.short) #shelfRow{display:flex;flex:1 1 0;min-height:0;margin:0 10px;padding-top:6px;gap:14px;align-items:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
body.port #shelfRow .shg{flex-direction:column;align-items:flex-start;gap:4px} body.port #shelfRow .shp{gap:6px}
body.port #shelfRow .shl{font-size:11px}
body.port #shelfRow .ownc{width:42px;height:42px} body.port #shelfRow .ownc b{right:-4px;bottom:-4px}
/* the phone's Study: a row of the same plaques under the Tutors, which stays put while the shelves scroll */
body.port.inStudy.hasShelf #stage>#shelfRow{display:flex;position:absolute;left:0;right:0;top:135px;height:50px;box-sizing:border-box;padding:0 10px;gap:12px;align-items:center;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;z-index:45;
  background:var(--night);border-bottom:1px solid rgb(var(--brass-rgb) / .14)}
body.port.inStudy.hasShelf #shelfRow .shg{flex-direction:row;align-items:center} body.port.inStudy.hasShelf #shelfRow .shl{display:none}
body.port.inStudy.hasShelf #shelfRow .shg+.shg{padding-left:12px;border-left:1px solid var(--rule)}
body.port.inStudy.hasShelf #shelfRow .ownc{width:38px;height:38px}
/* a Run Upgrade's pip: the chip a Tutor's seat uses, beneath the plaque ("upip": .pip is a dot of the Moves row).
   The pips have a layer of their own above the Final Score Sheet, whose top edge lies just under the strip */
#fxTop{position:absolute;inset:0;pointer-events:none;z-index:58} body.port #stage>#fxTop{position:absolute}
#verdict:not([hidden])~#fxTop,#front:not([hidden])~#fxTop{z-index:66}   /* (the Act Map's sheet begins there too; under an open card at other times, so a pip never lies on the card it belongs to) */
.chip.upip{box-shadow:0 3px 8px rgba(0,0,0,.5)}
/* the strip is put away with the rest of the top bar: on the Title and Setup, and under the Study Queue's Review */
body.onFront #shelfRow,body.queueRev #shelfRow{visibility:hidden}
/* the list of the Run's Repertoires, opened from the Repertoire's plaque (it is the card's own panel) */
#cardBlurb.replist .repl{display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--brass-lo) transparent}
#cardBlurb .repi{display:flex;align-items:flex-start;border-top:1px solid var(--rule)}
#cardBlurb .repi .pic{flex:none;display:block;border:2px solid var(--brass);border-radius:6px;overflow:hidden;background:var(--paper)}
#cardBlurb .repi .pic svg{display:block;width:100%;height:100%}
#cardBlurb .repi .rb{min-width:0;flex:1}
#cardBlurb .repi .rn{font-family:var(--sc);font-weight:600;letter-spacing:.04em;color:var(--brass-hi);line-height:1.1}
#cardBlurb .repi .rwhen,#cardBlurb .repi .rres{font-family:var(--sc);font-weight:600;letter-spacing:.04em;color:var(--brass-hi)}
#cardBlurb .repi .rwhen{color:var(--dim)}
#cardBlurb .repi .rd{line-height:1.35;color:var(--ivory)}
body.desk #cardBlurb.replist{width:460px} body.desk #cardBlurb.replist .repl{max-height:560px;margin-top:4px}
body.desk #cardBlurb .repi{gap:14px;padding:12px 0} body.desk #cardBlurb .repi .pic{width:64px;height:64px}
body.desk #cardBlurb .repi .rn{font-size:22px} body.desk #cardBlurb .repi .rwhen,body.desk #cardBlurb .repi .rres{font-size:16px;margin-top:3px} body.desk #cardBlurb .repi .rd{font-size:18px;margin-top:5px}
body.port #cardBlurb.replist .repl{max-height:52vh} body.port #cardBlurb .repi{gap:12px;padding:10px 0} body.port #cardBlurb .repi .pic{width:48px;height:48px}
body.port #cardBlurb .repi .rn{font-size:18px} body.port #cardBlurb .repi .rwhen,body.port #cardBlurb .repi .rres{font-size:13px;margin-top:2px} body.port #cardBlurb .repi .rd{font-size:15px;margin-top:4px}
/* a Crossway, called out over the Board as it is dealt */
#info .kind.multi{color:var(--night);background:linear-gradient(180deg,var(--brass-hi),var(--brass));border-radius:4px;padding:3px 10px}
#crossCall.out{animation:none;opacity:0;transition:opacity .15s}
#crossCall{position:absolute;left:0;right:0;top:22%;display:flex;justify-content:center;pointer-events:none;z-index:30;animation:crossCall 2.5s ease-out forwards}
#crossCall .cc{background:var(--paper);color:var(--paper-ink);border:2px dashed var(--brass);border-radius:6px;box-shadow:0 14px 34px rgba(0,0,0,.6);text-align:center;padding:14px 26px}
#crossCall b{display:block;font-family:var(--serif);font-size:34px;letter-spacing:.01em}
#crossCall span{display:block;font-family:var(--body);font-size:20px;margin-top:4px}
body.port #crossCall b{font-size:24px} body.port #crossCall span{font-size:15px} body.port #crossCall .cc{padding:10px 16px;margin:0 14px}
@keyframes crossCall{0%{opacity:0;transform:translateY(10px)}8%{opacity:1;transform:none}78%{opacity:1}100%{opacity:0}}

/* the Tutor's Notes (ui/tutor_notes.js): a paper card and a ring around what it explains */
#tnote{z-index:400;background:var(--paper);color:var(--paper-ink);border:2px solid var(--brass);border-radius:8px;box-shadow:0 18px 44px rgba(0,0,0,.7)}
#tnote .ey{font-family:var(--sc);font-weight:600;letter-spacing:.06em;color:var(--paper-ink-2)}
#tnote .tx{font-family:var(--body);line-height:1.35}
#tnote .tx .wp,#tnote .tx .ws,#tnote .tx .wc{font-weight:700}
#tnote .tx .tl{display:block;margin-top:7px}   /* a note that lists several things gives each its own line (Chris 10/7) */
#tnote .tnb{display:flex;gap:10px;align-items:center}
#tnote button{font-family:var(--sc);font-weight:600;letter-spacing:.03em;border-radius:5px;cursor:pointer}
#tnote .tnok{background:linear-gradient(180deg,var(--brass-hi),var(--brass));border:1.5px solid var(--brass-lo);color:var(--night)}
#tnote .tnskip{background:none;border:1.5px solid transparent;color:var(--paper-ink-2);text-decoration:underline}
#tring{z-index:399;pointer-events:none;border:3px solid var(--brass-hi);border-radius:8px;box-shadow:0 0 0 3px rgba(0,0,0,.45),0 0 22px rgb(var(--brass-rgb) / .7);animation:tring 1.4s ease-in-out infinite}
@keyframes tring{50%{box-shadow:0 0 0 3px rgba(0,0,0,.45),0 0 6px rgb(var(--brass-rgb) / .35)}}
body.desk #tnote{width:360px;padding:14px 18px 14px} body.desk #tnote .ey{font-size:13px} body.desk #tnote .tx{font-size:19px;margin:4px 0 12px}
body.desk #tnote button{font-size:15px;padding:6px 14px}
body.port #stage>#tnote{position:fixed;left:0;right:0;bottom:0;border-radius:14px 14px 0 0;border-width:2px 0 0;padding:12px 16px 18px}
body.port #stage>#tring{position:absolute}
body.port #tnote .ey{font-size:12px} body.port #tnote .tx{font-size:16px;margin:4px 0 12px} body.port #tnote button{font-size:15px;padding:9px 16px}
#tnote .tx .wp,#tnote .tx .ws,#tnote .tx .wc{color:#1b1408;padding:0 6px;border-radius:3px}
#tnote .tx .wp{background:var(--pts)} #tnote .tx .ws{background:var(--sharp)} #tnote .tx .wc{background:var(--chain)}
/* the note pops over a dimmed screen, with the thing it explains left bright and an arrow to it (Chris 10/2) */
#tnote .tx{font-weight:600}
#tnote{animation:tnpop .28s cubic-bezier(.2,1.4,.4,1) both}
@keyframes tnpop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
#tring{box-shadow:0 0 0 3000px rgba(0,0,0,.62),0 0 22px rgb(var(--brass-rgb) / .7);animation:trfade .3s ease-out both}
#tring.none{left:0;top:0;width:0;height:0;border:0}
@keyframes trfade{from{opacity:0}to{opacity:1}}
#tnote::before{content:'';position:absolute;width:18px;height:18px;background:var(--paper);border:2px solid var(--brass);border-right:0;border-bottom:0;display:none}
#tnote.a-up::before{display:block;left:var(--ax);top:-11px;transform:translateX(-50%) rotate(45deg)}
#tnote.a-down::before{display:block;left:var(--ax);bottom:-11px;transform:translateX(-50%) rotate(225deg)}
#tnote.a-left::before{display:block;top:var(--ay);left:-11px;transform:translateY(-50%) rotate(-45deg)}
#tnote.a-right::before{display:block;top:var(--ay);right:-11px;transform:translateY(-50%) rotate(135deg)}

/* ---------------- the card audit's screen fixes (10/5) ---------------- */
/* ANNOTATE: the "!" an annotated Tutor wears on its seat (the Board and the Study) and on its card at the Run's end */
.seat .ann,.vcard .ann{position:absolute;z-index:2;right:1px;top:8px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:var(--paper-ink);border:1.5px solid var(--gold-lo);
  font-family:var(--serif);font-weight:700;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.5)}
body.desk .seat .ann{width:20px;height:20px;font-size:15px}
body.port .seat .ann{width:15px;height:15px;font-size:11px;border-width:1px;top:6px;right:0}
body.desk .vcard .ann{width:24px;height:24px;font-size:18px;top:9px;right:2px}
body.port .vcard .ann{width:16px;height:16px;font-size:12px;border-width:1px;top:7px;right:1px}
#cardBlurb .tag,#shopBlurb .tag{white-space:nowrap}
/* A TIME BANK, SPENT BY HAND: a small button in the clock panel, in the action buttons' own look */
body.desk #aBank{position:absolute;left:50%;top:13px;transform:translateX(-50%);height:30px;padding:0 10px;font-size:13.5px}
body.port #aBank{flex:none;height:24px;padding:0 7px;font-size:12px;gap:4px}
body.port #aBank .w{display:none}

/* ---------------- the playtest bot's faults (10/5): play ---------------- */
/* THE EQUATION MULTIPLIES OUT (fault 14): a fourth factor, shown only when the move's total is not Points × Sharp ×
   Chain (ui/play.js eqExtra). It wore paper at first, as the Score does. Chris 10/5: it has a color of its own, a
   teal (--bonus, ui/theme.css, where the tile's colors are set beside the Sharp and Chain tiles'). */
.plq .num,.scoreplq .num,.plateG .n{white-space:nowrap}
#eq .x4,#eq .plq.xtr{display:none}
#eq.four .x4{display:inline} #eq.four .plq.xtr{display:flex}
.plq.xtr{cursor:help}
.plq.struck{opacity:.5} .plq.struck .num{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--carmine)}
.mv .deq b.sk{text-decoration:line-through;text-decoration-color:var(--carmine);color:var(--dim)}
body.desk #eq.four .plqs{gap:3px}
body.desk #eq.four .plq{width:64px} body.desk #eq.four .plq .num{font-size:32px} body.desk #eq.four .plq .lbl{font-size:13px;letter-spacing:0}
body.desk #eq.four .x{font-size:18px}
body.port #eq.four .plqs{gap:3px}
body.port #eq.four .plq{width:54px} body.port #eq.four .plq .num{font-size:21px} body.port #eq.four .plq .lbl{font-size:9.5px;letter-spacing:.03em}
body.port #eq.four .x{font-size:14px}
body.port .scoreplq{min-width:0;overflow:hidden}
/* GOLD ON ITS PLATE (fault 20; Chris 10/5): the plate has one width at each layout, and the number is fitted to it
   (ui/play.js setGold). On the phone a long number drops the coin beside it. */
body.port .plateG{width:80px;padding:0 6px;box-sizing:border-box}
body.port .plateG.long svg{display:none}
/* on the desk a long number takes the room of the word beside it: the coin and the plate still say Gold */
body.desk .plateG.long .w{display:none}
/* the phone's name plate: a long name takes two lines (ui/play.js fitPlate) */
body.port #plate.two .n{white-space:normal;line-height:1.05;max-height:2.15em;text-overflow:clip}
/* THE SCORE SHEET holds a Board of seven moves and its opening reply without a scrollbar (fault 21: it scrolled by
   18 to 23 pixels); a longer Board still scrolls */
body.desk .mv{padding:8px 0}
/* on the phone the "!! Board ×2 at bank" chip sat on top of "Board 1 of 4 · Untimed" in the row beneath the console;
   it sits at the head of the console now, between the two labels */
body.port .x2{right:auto;bottom:auto;left:50%;top:7px;transform:translateX(-50%)}

/* ---------------- the owner's rulings of 10/5, second round: play ---------------- */
/* the phone's name plate: a long line above the name takes two lines (ui/play.js fitPlate), and never leaves the plate */
body.port #plate .k{overflow:hidden;max-width:100%}
body.port #plate.k2 .k{white-space:normal;line-height:1.02}
/* a Tutor's Note on the phone, at the top of the screen when the thing it points at is low (ui/tutor_notes.js place) */
body.port #stage>#tnote.top{top:0;bottom:auto;border-radius:0 0 14px 14px;border-width:0 0 2px;padding:14px 16px 14px}
/* A TOKEN'S CARD, FOR A FINGER (ui/play.js openTokenBlurb): what the token does, and the button that plays it */
#cardBlurb .tokb{display:flex;gap:10px;align-items:center;margin-top:14px}
#cardBlurb .tokb button{font-family:var(--sc);font-weight:600;letter-spacing:.03em;border-radius:6px;cursor:pointer;color:var(--brass-hi);border:1.5px solid var(--brass);background:none}
#cardBlurb .tokb .play{background:linear-gradient(180deg,var(--brass-hi),var(--brass));border-color:var(--brass-lo);color:var(--night)}
body.desk #cardBlurb .tokb button{font-size:18px;padding:8px 18px}
body.port #cardBlurb .tokb button{font-size:14px;padding:10px 18px}
/* THE SCORE SHEET'S REASONS TAKE A SECOND LINE WHERE THERE IS ROOM (bot report 10/5, list 4.19: most rows with two
   Tutors were cut with an ellipsis until the row was opened). On the desk a row's reasons may run to two lines while
   the sheet still holds the Board without scrolling; the script (ui/play.js fitWhy) takes the second line back,
   oldest row first, when it does not. The phone's sheet has room for one line, so it keeps the ellipsis. */
body.desk .mv.w2 .why{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.18}
/* SEVEN SEATS (Chris 10/5: The Seventh Chair). The row keeps the ground the six seats had (472 pixels on the desk,
   295 on the phone's rail), so the divider, the tokens, Gold and Lives stay where they are. Each of the seven seats
   is drawn a little smaller, whole and evenly spaced, and the row is centered on the height the six had. Immortal
   Tutors beyond the seven overlap as they did beyond six (ui/play.js renderUpgrades holds the same sizes). */
body.desk #seats.seven{top:14px;gap:6px}
body.desk #seats.seven .seat{width:62px;height:83px}
body.desk #seats.seven .seat:not(.empty){border-width:5px}
body.desk #seats.seven .seat .sb{height:5px} body.desk #seats.seven .seat .em{top:10px}
body.desk #seats.seven .seat .ann{width:18px;height:18px;font-size:14px;top:6px}
body.port #rail #seats.seven{gap:4px}
body.port #seats.seven .seat{width:38px;height:53px;border-width:3px}
body.port #seats.seven .seat .sb{height:4px} body.port #seats.seven .seat .em{top:6px;font-size:19px}
body.port #seats.seven .seat .ann{width:13px;height:13px;font-size:10px;top:5px}
/* the seventh seat while it stands empty: the chair you bought, edged in gold */
.seat.empty.chair{border-color:rgb(var(--gold-rgb) / .6)}

/* the Jackpot Board: a black-and-gold tag beside the Board's kind, and its banner (Chris 10/5) */
#jackTag{margin-left:auto;margin-right:10px;font-family:var(--sc);font-weight:600;letter-spacing:.03em;white-space:nowrap;color:var(--gold-hi);background:linear-gradient(180deg,#1d1810,#0c0a07);border:1px solid var(--gold);border-radius:4px;padding:3px 10px;cursor:help;text-decoration:none;transition:opacity var(--d-s)}
#jackTag i{font-style:normal;color:var(--gold)}
#jackTag[hidden]{display:none}
#info.speaking #jackTag{opacity:0;transition:none}
body.desk #jackTag{font-size:17px} body.port #jackTag{font-size:13px;padding:2px 7px;margin-right:6px} body.port #jackTag i{display:none}
#crossCall{flex-direction:column;align-items:center;gap:10px}
#crossCall.long{animation-duration:3.5s}
#crossCall .cc.jack{background:linear-gradient(180deg,#1d1810,#0c0a07);color:var(--gold-hi);border:2px solid var(--gold)}
#crossCall .cc.jack span{color:var(--ivory);max-width:520px}
body.port #crossCall .cc.jack span{max-width:300px}

/* looking back through the Board's moves with the arrows (Chris 10/6): the Board is greyed and the row above it says so */
#boardWrap.looking #board{filter:saturate(.45) brightness(.88)}
#lookTag{position:absolute;inset:0;z-index:14;display:flex;align-items:center;gap:12px;background:var(--night);white-space:nowrap;overflow:hidden}
#lookTag b{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--night);background:linear-gradient(180deg,var(--brass-hi),var(--brass));border-radius:4px;padding:3px 10px}
#lookTag span{font-family:var(--serif);color:var(--ivory);overflow:hidden;text-overflow:ellipsis}
body.desk #lookTag{font-size:17px;padding:0 20px} body.port #lookTag{font-size:13px;padding:0 4px;gap:8px}

/* a pre-move (Chris 10/6): the piece picked up while the opponent replies, and the square it is to go to, in blue */
.sq.prefrom::before{background:rgba(96,132,255,.5)}
.sq.preto::before{background:rgba(96,132,255,.42);box-shadow:inset 0 0 0 4px rgba(150,176,255,.95)}

/* (Chris 10/8: "the descriptions of tutors and things up top are getting tucked behind the act map and the preparation
   setup. They should pop out in front of those as well") a card opened from the top bar lies over the Act Map, the
   Preparations (62) and the Final Score Sheet (65), and still under the curtain (70) and the menus (90): 68 above. */

/* ---------------- the 11/9 sweep's scrollbars (Chris: "fix the scrollbars") ---------------- */
/* the Score sheet scrolled by 10 to 19px when a move's line named several Tutors: the rows sit 4px closer
   (a Board with many long lines still scrolls) */
body.desk .mv{padding:6px 0}