/* CT-021: The table for The Long Way Down 5.10. The 3D tower fills the window; the stage (right), your seat
   (bottom) and the top bar sit over it. Panels borrow the codex palette of the printed cards: paper, ink, rubric
   red, gilt. Card faces themselves come only from card-style.css, unchanged. Replaces the CT-011…CT-020 sheet. */
:root{--paper:#E9DCB9;--paper-lit:#F4EBD0;--paper-deep:#D6C49A;--ink:#2B2016;--ink-soft:rgba(58,44,28,.78);--rubric:#8E2216;--gilt:#8A6A22;--verd:#1D5A52;
 --wood:#20150e;--shadow:0 10px 30px rgba(10,5,2,.55);--hud:64px;--stage:372px;--seat:236px;
 --serif:"EB Garamond","IM Fell English",Georgia,serif;--caps:Cinzel,"Trajan Pro",Georgia,serif;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#120c08;color:var(--ink);font:16px/1.4 var(--serif)}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.45}
:focus-visible{outline:2px solid #f0c060;outline-offset:2px}
a{color:var(--rubric)}
.token{display:inline-block;width:.8em;height:.8em;border-radius:50%;background:var(--pc,#999);box-shadow:inset 0 -2px 0 rgba(0,0,0,.35),0 0 0 1.5px rgba(255,248,226,.8);vertical-align:-.05em;margin-right:.35em;flex:none}
.eyebrow{font:600 11px/1.2 var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--rubric);margin:0 0 6px}
.note{font-style:italic;color:var(--ink-soft);font-size:14px;margin:8px 0}
.hint{text-align:center;font-style:italic;color:var(--ink-soft);margin:6px 0}
h1,h2,h3{font-family:"Cinzel Decorative",var(--caps);color:var(--rubric);margin:0 0 8px;line-height:1.1}
h2{font-size:21px}h2 small{font-size:14px;color:var(--ink-soft)}

/* buttons: stamped paper */
.panel button,.seat-actions button,.sheet button,.setup-card button,.selbar button,.tools .menu button{border:1px solid rgba(116,90,48,.55);background:linear-gradient(#f6ecd2,#e2d1a8);border-radius:4px;padding:6px 11px;margin:3px 4px 3px 0;box-shadow:0 1px 0 rgba(255,250,232,.8) inset,0 1px 2px rgba(60,40,12,.25)}
.panel button:hover:not(:disabled),.seat-actions button:hover:not(:disabled),.sheet button:hover:not(:disabled){border-color:var(--rubric)}
button.big{font:600 14px var(--caps);letter-spacing:.06em;padding:10px 16px;background:linear-gradient(#a8331f,#7d1c11);color:#fbefd2;border-color:#5e140b;box-shadow:0 1px 0 rgba(255,220,190,.35) inset,0 2px 6px rgba(60,10,4,.35)}
button.big.alt{background:linear-gradient(#f6ecd2,#dccb9f);color:var(--ink);border-color:rgba(116,90,48,.6)}
button.ghost{background:none!important;box-shadow:none!important;border-color:transparent!important;text-decoration:underline;color:var(--ink-soft)}
button.on{outline:2px solid var(--pc,var(--rubric));background:#fff7e0!important}

/* ------------------------------------------------ the scene */
#game{position:fixed;inset:0;overflow:hidden}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;background:radial-gradient(ellipse at 45% 40%,#3a2a1c,#120c08 70%)}
#scene-picks{position:absolute;inset:0;pointer-events:none}
.scene-pick{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;border:0;padding:0;font:600 11px var(--caps);letter-spacing:.06em}
.scene-pick.pawn-pick{width:22px;height:22px;border-radius:50%;background:transparent;border:2px solid transparent}
.scene-pick.pawn-pick.active{border-color:rgba(255,236,170,.85);box-shadow:0 0 12px rgba(255,220,130,.8);animation:pulse 1.6s infinite}
.scene-pick.land-pick{padding:5px 9px;border-radius:14px;background:rgba(255,236,176,.94);color:#3b2410;box-shadow:0 0 0 2px rgba(142,34,22,.55),0 0 18px rgba(255,210,120,.75);white-space:nowrap}
.scene-pick.land-pick span{margin-right:4px;font-size:13px}
.scene-pick.land-pick:hover{background:#fff;transform:translate(-50%,-50%) scale(1.08)}
.scene-pick.draw{background:linear-gradient(#a8331f,#7d1c11);color:#fbefd2;box-shadow:0 0 0 2px #f3d9a0,0 0 22px rgba(255,160,80,.9);animation:pulse 1.4s infinite}
.scene-pick.land,.scene-pick.place{background:rgba(214,240,226,.95);box-shadow:0 0 0 2px var(--verd),0 0 14px rgba(120,220,180,.7)}
/* CT-021: the card on the table — printed markup transformed onto the table plane */
.table-card{position:absolute;left:0;top:0;transform-origin:0 0;padding:0;border:0;background:none;pointer-events:auto;cursor:zoom-in;filter:drop-shadow(0 4px 5px rgba(0,0,0,.55))}
.table-card .lwd{width:100%;height:100%}
@keyframes pulse{50%{filter:brightness(1.18)}}

/* ------------------------------------------------ top bar */
#hud{position:absolute;left:0;right:0;top:0;height:var(--hud);display:flex;align-items:center;gap:14px;padding:8px 12px;background:linear-gradient(rgba(18,11,6,.92),rgba(18,11,6,.55) 80%,transparent);color:#f1e3c3;z-index:5}
.clock{min-width:200px}.clock b{display:block;font:700 17px "Cinzel Decorative",var(--caps);color:#f3d9a0}.clock small{font-style:italic;color:#d6c39a}
.seats{list-style:none;display:flex;gap:6px;margin:0;padding:0;flex:1;overflow-x:auto;scrollbar-width:none}
.seats li button{display:grid;grid-template-columns:auto 1fr;gap:1px 4px;align-items:center;text-align:left;min-width:150px;padding:5px 9px;border-radius:6px;border:1px solid rgba(243,217,160,.25);background:rgba(40,26,15,.72);color:#f1e3c3}
.seats li.turn button{border-color:#f3d9a0;box-shadow:0 0 0 1px #f3d9a0,0 0 14px rgba(243,200,120,.35)}
.seats li.you .nm::after{content:" · you";font-size:11px;color:#d6c39a}
.seats li.gone{opacity:.45}
.seats .nm{font:600 13px var(--caps);white-space:nowrap}.seats .nm small{font:italic 11px var(--serif);color:#cdb88c}
.seats .hpb{grid-column:1/3;position:relative;height:13px;background:#3b120c;border-radius:3px;overflow:hidden}
.seats .hpb i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#c8432b,#8e2216)}
.seats .hpb em{position:relative;font:600 10px/13px var(--caps);padding-left:5px;font-style:normal}
.seats .mini{grid-column:1/3;font-size:11px;color:#d6c39a;white-space:nowrap}
.tools{position:relative;display:flex;gap:6px}
.icon.on{background:#7d1c11}
.icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(243,217,160,.35);background:rgba(40,26,15,.8);color:#f3d9a0;text-decoration:none;font-size:16px}
.menu{position:absolute;right:0;top:40px;display:flex;flex-direction:column;background:var(--paper);padding:8px;border-radius:6px;box-shadow:var(--shadow);min-width:210px;z-index:9}
.menu a{padding:6px 11px}

/* ------------------------------------------------ paper panels */
#stage{position:absolute;right:10px;top:calc(var(--hud) + 4px);bottom:10px;width:var(--stage);overflow:auto;z-index:4;scrollbar-width:thin}
.panel,.mat,.sheet-body,.setup-card,.selbar{background:linear-gradient(170deg,var(--paper-lit),var(--paper) 55%,var(--paper-deep));border:1px solid rgba(116,90,48,.55);border-radius:6px;box-shadow:inset 0 0 0 3px rgba(255,250,232,.45),var(--shadow)}
/* CT-022: while a card is being read (#game[data-reading], set in game.js render) the stage moves to the middle
   of the screen, between the top bar and your seat, and the seat widens to fill the freed right side. */
#game[data-reading] #stage{left:50%;right:auto;transform:translateX(-50%);width:min(460px,calc(100vw - 20px));bottom:calc(var(--seat) + 20px)}
#game[data-reading] #seat{right:10px}
#game[data-reading] .card-big{max-width:340px}
.panel{padding:14px 16px}
.panel.waiting{opacity:.92}
.panel p{margin:6px 0}
.card-big{width:100%;max-width:300px;margin:4px auto 10px;display:block;perspective:900px;filter:drop-shadow(0 8px 14px rgba(30,15,5,.45))}
.flip{display:block;border:0!important;background:none!important;box-shadow:none!important;padding:0!important;margin:0 auto!important;width:100%}
.flip:hover .card-big{transform:translateY(-3px) rotate(-.6deg)}
.card-big,.card-mini{transition:transform .18s}
.choosable.chosen .card-big{max-width:190px}
.choosable.open .opt{cursor:pointer;border-radius:2px;transition:background .15s}
.choosable.open .opt:hover,.choosable.open .opt:focus{background:rgba(255,236,176,.75);outline:1px solid var(--edge)}
.reading{border-top:1px solid rgba(116,90,48,.4);margin-top:6px;padding-top:8px}
.reading .text{font-size:17px;line-height:1.5}
.chip{border:0!important;border-radius:3px!important;padding:0 4px!important;margin:0!important;background:rgba(255,214,120,.55)!important;box-shadow:inset 0 -2px 0 var(--rubric)!important;font:inherit!important;color:var(--ink)!important}
.chip:hover{background:rgba(255,200,90,.9)!important}
.chip.used{background:rgba(120,150,110,.25)!important;box-shadow:inset 0 -2px 0 var(--verd)!important;text-decoration:line-through rgba(29,90,82,.6)}
.test{padding:6px 9px;border-radius:4px;background:rgba(255,250,232,.7);font-size:15px}.test.pass{border-left:4px solid var(--verd)}.test.fail{border-left:4px solid var(--rubric)}
.aim{font-size:13px;color:var(--ink-soft);margin-top:6px}.aim button{padding:2px 7px!important;font-size:13px}
.chooser{margin:6px 0;padding:6px;background:rgba(255,250,232,.6);border-radius:4px}
.done{margin-top:8px}
.invite{display:flex;flex-wrap:wrap}
.duel{font:600 14px var(--caps)!important}
.stack{list-style:none;padding:0;margin:8px 0}
.stack li{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:6px;padding:3px 0;border-bottom:1px solid rgba(116,90,48,.25);font-size:14px}
.stack .fl{font:700 15px var(--caps);color:var(--rubric)}.stack button{padding:2px 8px!important;margin:1px!important}
.bracket{padding-left:18px}

/* ------------------------------------------------ fights */
.fight .foe-card{width:210px;margin:0 auto 8px;cursor:zoom-in;filter:drop-shadow(0 6px 10px rgba(30,15,5,.4))}
.pool.last{opacity:.6}
.sides{clear:both;display:grid;gap:8px}
.side{padding:8px;border-radius:5px;background:rgba(255,250,232,.55);border:1px solid rgba(116,90,48,.3)}
.side.acting{border-color:var(--rubric);box-shadow:0 0 0 2px rgba(142,34,22,.25)}
.side.out{opacity:.55}
.side .who{display:flex;align-items:center;gap:6px}.side .who b{font:700 14px var(--caps)}.side .hp{margin-left:auto;font-size:13px}
.hpbar{height:7px;background:#3b120c;border-radius:4px;overflow:hidden;margin:4px 0}.hpbar i{display:block;height:100%;background:linear-gradient(90deg,#8e2216,#c8432b)}.hpbar.you i{background:linear-gradient(90deg,var(--pc),#f3d9a0)}
.nums{font-size:12.5px;color:var(--ink-soft)}
.pool{font:700 30px/1 "Cinzel Decorative",var(--caps);color:var(--ink);margin:4px 0 2px;display:flex;align-items:center;gap:6px}.pool small{font:italic 13px var(--serif);color:var(--rubric)}
.meter{position:relative;height:10px;border-radius:5px;background:rgba(60,40,20,.15);margin:4px 0 14px}
.meter .fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:linear-gradient(90deg,#b99546,#8a6a22);transition:width .35s}
.meter .fill.bust{background:linear-gradient(90deg,#c8432b,#8e2216)}
.meter .mark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--rubric)}.meter .mark.stand{background:var(--verd)}
.meter .mark small{position:absolute;top:13px;left:-12px;font-size:10px;white-space:nowrap;color:var(--ink-soft)}
.tray{min-height:58px;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;justify-content:center;margin:10px 0;padding:8px;border-radius:8px;background:radial-gradient(ellipse at 50% 30%,#2f5b40,#193426);box-shadow:inset 0 2px 10px rgba(0,0,0,.6)}
.tray .grp{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.tray small{width:100%;text-align:center;color:#d9ecd8;font-size:11px;font-style:italic}
.die{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;width:34px;height:34px;padding:5px;border-radius:7px;background:linear-gradient(145deg,#fbf3dc,#dccaa0);box-shadow:0 3px 0 #a79363,0 5px 8px rgba(0,0,0,.45)}
.die i{border-radius:50%}.die i.p{background:radial-gradient(circle at 40% 35%,#6b1a10,#2b0a05)}
/* CT-025: the pool − / + buttons are gone (only dice change a pool) and the one shared dice tray became one box per
   side (.trays > .tray.box, built by diceBoxes in game.js): the newest throw large, earlier throws small, then the sum. */
/* CT-025: the Fight button under a turned-over Enemy stays in view (sticky) however tall the card is. */
.encounter .go{position:sticky;bottom:0;display:flex;flex-direction:column;align-items:center;gap:2px;margin:0 -16px -14px;padding:10px 16px 12px;background:linear-gradient(rgba(214,196,154,0),var(--paper) 35%);border-radius:0 0 6px 6px}
.encounter .go .big{margin:0}.encounter .go small{font-style:italic;color:var(--ink-soft)}
.trays{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:10px 0}
.trays .tray.box{margin:0;min-height:112px;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;padding:6px 8px 8px;border:2px solid var(--pc,#2f5b40)}
.trays .tray.box.foe{border-color:var(--rubric)}
.trays .tray.box.acting{box-shadow:inset 0 2px 10px rgba(0,0,0,.6),0 0 0 2px rgba(243,217,160,.75)}
.tray-who{margin:0;display:flex;align-items:center;justify-content:center;gap:2px;font:700 12px var(--caps);color:#f3e7c4;text-align:center}
.throws{flex:1;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center}
.throw{display:inline-flex;gap:4px}
.throw:not(.latest) .die{width:22px;height:22px;padding:3px;gap:1px;border-radius:5px;opacity:.72;box-shadow:0 2px 0 #a79363}
.plus{color:#bcd6bd;font-size:13px}
.throws .none{color:#bcd6bd;font:italic 13px var(--serif)}
.tray-sum{margin:0;min-height:1.2em;text-align:center;color:#f3e7c4;font:14px var(--serif)}.tray-sum b{font:700 18px var(--caps)}
.tray-sum em{color:#d9ecd8}.tray-sum em.bust{color:#ffb4a4;font-weight:700;font-style:normal}
.acts{display:flex;flex-wrap:wrap;gap:2px}
.who-acts{width:100%;font:600 14px var(--caps)}
.flog{list-style:none;margin:8px 0 0;padding:6px 0 0;border-top:1px solid rgba(116,90,48,.3);font-size:13px;color:var(--ink-soft)}
.flog li:first-child{color:var(--ink)}
.rules-inline{font-size:14px;margin-top:6px}.rules-inline summary{cursor:pointer;font:600 12px var(--caps);color:var(--rubric)}
.death{border-color:var(--rubric)}.death .count{font:600 14px var(--caps)}

/* ------------------------------------------------ your seat */
#seat{position:absolute;left:10px;right:calc(var(--stage) + 20px);bottom:10px;height:var(--seat);z-index:4;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none}
#seat>*{pointer-events:auto}
.seat-inner{display:flex;gap:12px;align-items:flex-end;height:100%}
.selbar{padding:7px 12px;margin-bottom:6px;font-size:15px;align-self:flex-start}
.selbar.dying{border-color:var(--rubric)}
.mat{width:330px;flex:none;padding:8px 10px 6px;align-self:stretch;font-size:13px;border-top:4px solid var(--pc)}
.mat header{display:flex;align-items:center;gap:4px}.mat header b{font:700 15px var(--caps)}.mat header span{margin-left:auto;font-size:12px;color:var(--ink-soft)}
.health{display:flex;align-items:center;gap:4px;margin:4px 0}
.hbar{flex:1;position:relative;height:22px;border-radius:4px;background:#3b120c;overflow:hidden}.hbar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#cf4a30,#8e2216);transition:width .3s}
.hbar span{position:relative;display:block;text-align:center;color:#fbefd2;font:600 12px/22px var(--caps)}.hbar b{font-size:15px}
.track{display:grid;grid-template-columns:52px 1fr 34px;align-items:center;gap:4px;height:21px}
.track .lbl{font:600 11px var(--caps);letter-spacing:.05em;color:var(--rubric)}
.pips{display:grid;grid-template-columns:repeat(11,1fr);gap:1px}
/* CT-027: pips are read-only spans now (no − / + on Health, no clicking a slider). */
.pip{display:flex;align-items:center;justify-content:center;height:17px;border:1px solid rgba(116,90,48,.35);border-radius:2px;background:rgba(255,250,232,.55);font-size:9px;padding:0;color:rgba(58,44,28,.55)}
.pip.cube{background:var(--pc);color:#fff;font-weight:700;border-color:rgba(0,0,0,.35);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.pip.ghost{outline:2px dashed var(--pc);outline-offset:-2px}
.pip.lost{background:repeating-linear-gradient(45deg,rgba(142,34,22,.45) 0 3px,transparent 3px 6px)}
.track .val{font:700 14px var(--caps);text-align:right}.track .val small{font-size:10px;color:var(--verd)}
.lose{padding:0 6px!important;margin:0!important;color:var(--rubric)}
.small-stats{font-size:11.5px;color:var(--ink-soft);font-style:italic;margin:2px 0}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:3px}
.slot{height:58px;border:1px dashed rgba(116,90,48,.6);border-radius:4px;display:grid;place-items:center;overflow:hidden;font:600 10px var(--caps);color:var(--ink-soft);background:rgba(255,250,232,.35)}
.slot .card-mini{width:100%;cursor:zoom-in;align-self:start}
.hand{flex:1;display:flex;align-items:flex-end;justify-content:center;min-width:0;height:100%;padding:0 20px}
.hcard{width:150px;flex:none;margin:0 -30px;cursor:pointer;transform:translateY(34px) rotate(calc((var(--i) - (var(--n) - 1)/2) * 2.5deg));transform-origin:50% 120%;transition:transform .18s,margin .18s;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.hcard:hover,.hcard:focus-within{transform:translateY(-40px) scale(1.25);z-index:3;margin:0 14px}
.hcard.picked{transform:translateY(-22px) rotate(0);filter:drop-shadow(0 0 8px #ffcf66) drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.empty-hand{color:#d6c39a;font-style:italic;align-self:center}
.seat-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.end{min-width:150px}
.decks{display:flex;gap:6px}
.deck{width:54px;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;position:relative}
.deck small{position:absolute;bottom:3px;right:3px;background:rgba(43,32,22,.85);color:#fbefd2;border-radius:8px;padding:0 5px;font-size:11px}
.card-mini{display:block;width:100%}
#ticker{position:absolute;left:12px;top:calc(var(--hud) + 6px);max-width:420px;margin:0;padding:0;list-style:none;z-index:3;pointer-events:none;font-size:13.5px;color:#f1e3c3;text-shadow:0 1px 3px #000}
#ticker li{padding:1px 0}#ticker li:nth-child(2){opacity:.7}#ticker li:nth-child(3){opacity:.45}
#ticker.open{pointer-events:auto;max-height:55vh;overflow:auto;background:rgba(18,11,6,.85);padding:8px 12px;border-radius:6px}#ticker.open li{opacity:1}

/* ------------------------------------------------ overlays */
#overlay{position:absolute;inset:0;z-index:8}
.sheet{position:absolute;inset:0;background:rgba(12,7,3,.62);display:grid;place-items:center;padding:20px;backdrop-filter:blur(2px)}
.sheet-body{padding:16px;max-width:min(92vw,760px);max-height:92vh;overflow:auto}
.sheet-body.zoom{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;justify-content:center}
.sheet-body.zoom .card-big{width:340px;max-width:80vw;margin:0}
.zoom-acts{display:flex;flex-direction:column;align-items:flex-start;max-width:280px}
.give{font-size:13px;color:var(--ink-soft)}
.peek-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.pickcard{width:110px;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}.pickcard:hover{transform:translateY(-4px)}
.peek-card{width:170px;text-align:center}.peek-card small{display:block;font:600 11px var(--caps);color:var(--rubric)}

/* ------------------------------------------------ setup */
#setup{min-height:100%;display:grid;place-items:center;padding:30px 14px;background:radial-gradient(ellipse at 50% 20%,#3a2a1c,#120c08 75%)}
.setup-card{max-width:720px;width:100%;padding:28px 30px}
.setup-card h1{font-size:clamp(28px,5vw,44px)}
.setup-card .lede{font-size:18px}
.count{display:block;font:600 13px var(--caps);margin:12px 0}
.count select{margin-left:8px;padding:3px 6px}
.seat-row{border:1px solid rgba(116,90,48,.45);border-left:5px solid var(--pc);border-radius:5px;margin:0 0 10px;padding:6px 12px 10px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.seat-row legend{display:flex;align-items:center;padding:0 4px}.seat-row legend input{font:600 15px var(--caps);border:0;border-bottom:1px solid rgba(116,90,48,.5);background:transparent;width:180px}
.stepper{display:flex;align-items:center;gap:4px}.stepper span{font:600 12px var(--caps);color:var(--rubric);width:52px}.stepper b{width:18px;text-align:center;font:700 16px var(--caps)}
.stepper button{width:26px;height:26px;padding:0!important;margin:0!important;border-radius:50%!important}
.points{margin-left:auto;font:600 13px var(--caps);color:var(--ink-soft)}
.small{font-size:14px}.linklike{color:var(--rubric);text-decoration:underline;cursor:pointer}

#toast{position:fixed;left:50%;bottom:calc(var(--seat) + 24px);transform:translate(-50%,20px);opacity:0;background:#2b1a10;color:#fbefd2;padding:9px 16px;border-radius:6px;box-shadow:var(--shadow);transition:.25s;z-index:20;pointer-events:none;max-width:80vw}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ------------------------------------------------ narrow screens: stage becomes a bottom sheet over the seat */
@media (max-width:900px){
 :root{--stage:100vw;--seat:268px;--hud:58px}
 .clock{min-width:0}.clock small{display:none}
 .seats li button{min-width:118px}
 #stage{left:8px;right:8px;width:auto;top:auto;bottom:calc(var(--seat) + 8px);max-height:48vh}
 #stage:empty{display:none}
 #seat{right:8px;left:8px}
 #game[data-reading] #stage{left:8px;right:8px;width:auto;transform:none;top:calc(var(--hud) + 8px);bottom:calc(var(--seat) + 8px);max-height:none}
 .mat{width:262px;font-size:12px;padding:6px 8px}
 .track{grid-template-columns:46px 1fr 26px}
 .slot{height:48px}
 .hcard{width:104px;margin:0 -26px}
 #ticker{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* CT-023: online rooms — mode switch, create/join, invite link, lobby seats, presence and the room chip. */
.modes{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 14px;font:600 13px var(--caps);letter-spacing:.04em}
.modes a{color:var(--rubric)}.modes b{color:var(--ink);border-bottom:2px solid var(--rubric)}
.join{display:flex;flex-wrap:wrap;align-items:end;gap:8px;margin:16px 0}
.join label{font:600 13px var(--caps)}
.join input,.invite-link input{font:600 18px var(--caps);letter-spacing:.12em;padding:6px 8px;border:1px solid rgba(116,90,48,.55);border-radius:4px;background:rgba(255,250,232,.7);color:var(--ink)}
.join input{width:8.5em;text-transform:uppercase;margin-left:6px}
.invite-link{display:flex;gap:8px;margin:6px 0}.invite-link input{flex:1;min-width:0;font:14px var(--serif);letter-spacing:0}
.lobby-seats{list-style:none;padding:0;margin:12px 0}
.lobby-seats li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:6px 10px;margin:0 0 6px;border:1px solid rgba(116,90,48,.35);border-left:5px solid var(--pc);border-radius:5px;background:rgba(255,250,232,.35)}
.lobby-seats small{font:600 11px var(--caps);color:var(--ink-soft);text-transform:uppercase}
.lobby-seats .st{margin-left:auto;font-size:13px;color:var(--ink-soft)}
.presence{font-size:12px;color:var(--ink-soft)}.presence::before{content:"●";margin-right:3px;color:#9b8a6a}.presence.on::before{color:#2f8a3c}
.claim{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.room-chip{display:grid;place-items:center;height:34px;padding:0 10px;border-radius:17px;border:1px solid rgba(243,217,160,.35);background:rgba(40,26,15,.8);color:#e8b76a;font:600 12px var(--caps);letter-spacing:.08em}
.room-chip.on{color:#8fd49a}
.seats li.away{opacity:.6}.seats li.away .nm::after{content:" · away";font-size:11px;color:#d6c39a}
.setup-card a.big{display:inline-block;text-decoration:none}
.panel a.big{display:inline-block;text-decoration:none;font:600 14px var(--caps);letter-spacing:.06em;padding:10px 16px;background:linear-gradient(#a8331f,#7d1c11);color:#fbefd2;border-radius:4px}

/* CT-028: guided card resolution (runPanel/waitBox in game.js), the step pad for movement, the end-of-turn panel. */
button.wide{display:block;width:100%;margin:8px 0 2px!important}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0 4px}
.stepbtn{display:flex!important;flex-direction:column;align-items:center;gap:1px;padding:7px 4px!important;margin:0!important;min-height:78px;justify-content:center}
.stepbtn b{font-size:24px;line-height:1;color:var(--rubric)}
.stepbtn small{font:600 10px var(--caps);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.stepbtn .what{font:700 13px var(--caps);letter-spacing:.04em}.stepbtn .what.enemy,.stepbtn .what.boss{color:var(--rubric)}.stepbtn .what.tavern{color:var(--verd)}
.stepbtn .token{margin:2px 0 0}
span.stepbtn.off{border:1px dashed rgba(116,90,48,.35);border-radius:4px;opacity:.4}
.run .choosable.chosen .card-big,#game[data-reading] .card-big.run-card,.card-big.run-card{max-width:210px}
.opt.picked{background:rgba(255,226,150,.8);box-shadow:0 0 0 2px var(--rubric);border-radius:2px}
.opt.faded{opacity:.35}
.choosable.open .opt.closed{opacity:.42;cursor:not-allowed}
.choosable.open .opt.closed:hover{background:none;outline:1px dashed var(--rubric)}
.closed-why{margin:2px 0!important;font-size:13px;font-style:italic;color:var(--rubric)}
.memo{display:flex;gap:6px;align-items:flex-start;font-size:14px;margin:8px 0}
.run-lines{list-style:none;margin:6px 0 8px;padding:6px 10px;background:rgba(255,250,232,.6);border-radius:4px;font-size:14.5px;border:1px solid rgba(116,90,48,.25)}
.run-lines li{padding:1px 0 1px 18px;text-indent:-18px}.run-lines li::before{content:"✓ ";color:var(--verd);font-weight:700}
.wait{border-top:1px solid rgba(116,90,48,.35);margin-top:8px;padding-top:8px}
.ask{font:600 15px/1.3 var(--caps);letter-spacing:.02em;color:var(--rubric);margin:2px 0 8px!important}
.pickrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0 10px}
.pickrow .pickcard{width:118px;transition:transform .15s,filter .15s}
.pickcard.picked{transform:translateY(-8px);filter:drop-shadow(0 0 7px #f0b640) drop-shadow(0 0 2px #8e2216)}
.pickrow.look .peek-card{width:128px}.pickrow .peek-card.later{width:92px;opacity:.65}
.statpick{display:grid;grid-template-columns:1fr 1fr;gap:6px}.statpick button{margin:0!important}
.statpick small,.invite .big small,.dice-btn small,.acts.col small{display:block;font:italic 12.5px var(--serif);letter-spacing:0;text-transform:none}
.placelist{display:flex;flex-wrap:wrap;gap:2px;max-height:130px;overflow:auto}.placelist button{font-size:13px!important;padding:3px 8px!important}
.acts.col{flex-direction:column;align-items:stretch}.acts.col button{margin:3px 0!important}
.testbox{display:flex;align-items:center;gap:10px;margin:6px 0;padding:6px 10px;border-radius:6px;background:rgba(255,250,232,.75);border-left:5px solid var(--verd);font-size:15px}
.testbox.fail{border-left-color:var(--rubric)}.testbox .verdict{font:700 15px var(--caps);color:var(--verd)}.testbox.fail .verdict{color:var(--rubric)}
.testbox .tray.mini{min-height:0;margin:0;padding:6px 8px;flex:none}
.bids{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}.bids button{margin:0!important}
.press .tray{min-height:50px}
.pc-name{display:block;margin-top:3px;font:600 11px/1.2 var(--caps);color:var(--ink);text-align:center}
.pickrow .pickcard .card-mini,.pickrow .peek-card .card-mini{transition:transform .15s;transform-origin:50% 0}
.pickrow>:first-child .card-mini{transform-origin:0 0}.pickrow>:last-child .card-mini{transform-origin:100% 0}
@media (hover:hover){.pickrow .pickcard:hover .card-mini,.pickrow .peek-card:hover .card-mini{transform:scale(1.7);position:relative;z-index:6;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}}
.pickrow>:only-child .card-mini{transform-origin:50% 0}
/* CT-028: the card being chosen from shrinks to fit the space between the top bar and your seat, so its options
   and the Leave button are in view without scrolling. */
#game[data-reading] .choosable.open .card-big,#game[data-reading] .flip .card-big{max-width:min(340px,calc((100vh - var(--hud) - var(--seat) - 150px) * .716))}
.goal{margin:2px 0 4px!important;font:600 13px var(--caps);color:var(--verd)}
.deathstat{display:flex;align-items:center}.deathstat .big{flex:1}.deathstat .ghost{padding:2px 4px!important;font-size:12px}
.death .pickrow .pickcard{width:86px}
@media (max-width:900px){.pickrow .pickcard{width:96px}.pickrow.look .peek-card{width:100px}.run .choosable.chosen .card-big,.card-big.run-card{max-width:170px}}
/* CT-029: a card handing a choice to another player says so, in that player's colour. */
.asked{display:flex;align-items:center;gap:4px;margin:8px 0 2px!important;padding:6px 10px;border-radius:4px;border-left:5px solid var(--pc);background:rgba(255,250,232,.8);font:600 14px var(--caps);color:var(--ink)}