/* Wick Wardens: the in-town screen (table agent). Action bar, handoff, peek, pickers and the sheet bodies (S07-S12).
   Uses the tokens in app.css and the renderer classes in board.css. Text >= 16 px for everything a player must read, targets >= 44 px. */

/* ---------------------------------------------------------------- screen frame */
.bs.town{ user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.bs-hand{ display:flex; flex-direction:column; gap:4px; min-height:0; position:relative; }
.bs-hand > .ww-hand{ flex:1 1 auto; min-height:0; }
.bs-hand .ww-hand.hidden{ visibility:hidden; }
.bs-opens{ display:none; }
.ww-hand .card.fresh{ box-shadow:0 3px 0 var(--bg-deep), 0 0 0 3px var(--good); }
.bs-neutral{ grid-row:hand-start / actions-end; grid-column:hand-start / actions-end; z-index:6; min-height:0; display:flex; }
.bs-neutral[hidden]{ display:none; }
html[data-tablelayout] .bs{ grid-template-rows:var(--strip-h) minmax(0,1fr) 0 var(--hand-h) var(--actions-h); }
html[data-tablelayout] .bs > .bs-seats:not(.in-board){ display:none; }
.bs-seats.in-board{ position:absolute; inset:0; height:auto; }
.dbgbtn{ position:absolute; left:2px; bottom:2px; z-index:25; width:44px; height:44px; border-radius:12px; border:1.5px dashed var(--panel-edge); background:rgba(8,17,29,.7); font-size:22px; }
.bs .toasts.in-host{ bottom:6px; }

/* seat chips: Dusk glow, an Offer waiting, pick-a-Warden */
.ww-seatbar .chip.glow{ box-shadow:0 3px 0 var(--bg-deep), 0 0 0 2.5px var(--lamp-core); animation:tb-glow 1.1s ease-in-out infinite alternate; }
.ww-seatbar .chip.offer{ box-shadow:0 3px 0 var(--bg-deep), 0 0 0 2.5px var(--good); }
.ww-seatbar .chip.offer .nt::after{ content:" ✦"; color:var(--good); font-weight:700; }
.ww-seatbar .chip.active.offer .nt::after{ color:#0B6B2A; }
.ww-seatbar .chip.pick{ box-shadow:0 3px 0 var(--bg-deep), 0 0 0 2.5px var(--lamp-core); animation:tb-glow 1.1s ease-in-out infinite alternate; }
.ww-seatbar .chip.pick .nt::after{ content:" ▸"; font-weight:700; }
@keyframes tb-glow{ from{ filter:brightness(1); } to{ filter:brightness(1.3); } }

/* ---------------------------------------------------------------- action bar (52 px): Undo · pips · ⋯ · End turn */
.bs-actions{ gap:6px; }
.abtn{ flex:0 0 auto; min-height:44px; height:46px; min-width:48px; padding:0 12px; border:0; border-radius:12px; font-weight:700; font-size:18px; line-height:1.1;
  background:var(--card); color:var(--card-ink); box-shadow:0 3px 0 var(--bg-deep), inset 0 -3px 0 #d8c79f; touch-action:manipulation; }
.abtn.pressed, .abtn:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--bg-deep), inset 0 -2px 0 #d8c79f; filter:brightness(.94); }
.abtn.primary{ background:var(--lamp-core); box-shadow:0 3px 0 var(--bg-deep), inset 0 -3px 0 #E1A64A; }
.abtn.main{ min-width:112px; padding:0 14px; white-space:nowrap; }
.abtn[disabled]{ opacity:.45; pointer-events:none; }
.abtn.undo{ min-width:92px; max-width:128px; padding:2px 8px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:0; background:rgba(246,235,208,.14); color:var(--ink); box-shadow:0 3px 0 var(--bg-deep); text-align:left; overflow:hidden; }
.abtn.undo .u1{ font-size:16px; font-weight:700; line-height:20px; white-space:nowrap; }
.abtn.undo .u2{ font-size:16px; font-weight:500; line-height:15px; color:var(--ink-muted); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.abtn.undo .u2:empty{ display:none; }
.abtn.undo.off{ opacity:.5; }
.abtn.ring{ width:48px; padding:0; font-size:26px; background:rgba(246,235,208,.14); color:var(--ink); box-shadow:0 3px 0 var(--bg-deep); }
.abtn[hidden]{ display:none; }
.amid{ flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:center; gap:6px; font-size:16px; line-height:18px; color:var(--ink); text-align:center; }
.amid.hint, .amid.prompt{ color:var(--ink-muted); }
.amid.prompt{ color:var(--ink); font-weight:600; }
.amid > span:not(.pips3):not(.dl){ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pips3{ display:inline-flex; gap:5px; align-items:center; }
.pips3 i{ width:16px; height:16px; border-radius:50%; border:2.5px solid var(--lamp-core); box-sizing:border-box; }
.pips3 i.on{ background:var(--lamp-core); box-shadow:0 0 6px rgba(255,210,122,.6); }
.amid .lent{ color:var(--good); font-weight:800; font-style:normal; }
.amid .cnt{ color:var(--ink-muted); font-style:normal; font-weight:700; }
.amid.drew{ gap:4px; justify-content:flex-start; overflow:hidden; }
.amid .dl{ font-weight:700; white-space:nowrap; }

/* small inline cards and seat tags */
.cchip{ display:inline-flex; align-items:center; gap:3px; min-width:34px; height:30px; padding:0 8px 0 10px; border-radius:6px; background:var(--card); color:var(--card-ink); border-left:6px solid var(--cc,var(--any)); font-weight:800; font-size:18px; vertical-align:middle; box-shadow:0 2px 0 var(--bg-deep); }
.cchip i{ font-style:normal; color:var(--cd,var(--card-ink)); font-size:16px; }
.cchip.ember{ background:#1B2A45; color:var(--ink); border:2px solid var(--lamp-core); font-size:16px; }
.cchip.back{ background:#22385c; color:#8aa6d4; border-left-color:#3b5a8c; }
.stag{ display:inline-flex; align-items:center; gap:2px; font-weight:700; color:var(--sc); }
.stag i{ font-style:normal; }

/* ---------------------------------------------------------------- handoff (S06) */
.handoff{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:6px; padding:8px 12px 8px 14px; border-radius:14px;
  background:var(--panel-solid); border:1.5px solid var(--panel-edge); border-left:10px solid var(--sc,var(--lamp-core)); box-shadow:0 4px 0 var(--bg-deep); }
.ho-pass{ display:flex; align-items:center; justify-content:center; gap:10px; }
.ho-who{ font-size:22px; font-weight:800; color:var(--sc,var(--ink)); }
.ho-glyph{ color:var(--sc); font-size:26px; line-height:1; }
.ho-note{ font-size:16px; line-height:18px; color:var(--ink-muted); text-align:center; max-height:36px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.holdbtn{ position:relative; overflow:hidden; min-height:48px; padding:0 16px; border:0; border-radius:14px; background:var(--card); color:var(--card-ink); font-size:18px; font-weight:800; box-shadow:0 3px 0 var(--bg-deep), inset 0 -3px 0 #d8c79f; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; display:flex; align-items:center; justify-content:center; }
.holdbtn.big{ min-height:52px; }
.hb-fill{ position:absolute; inset:0; background:var(--sc,var(--lamp-core)); opacity:.75; transform-origin:left center; transform:scaleX(0); transition-property:transform; transition-timing-function:linear; pointer-events:none; }
.hb-txt{ position:relative; z-index:1; }
.holdbtn.armed{ background:var(--good); }
.holdbtn.armed .hb-fill{ opacity:0; }
.minireveal{ display:flex; flex-direction:column; gap:10px; padding:6px 2px 10px; border-left:8px solid var(--sc); padding-left:12px; }
.minireveal .ho-who{ font-size:22px; margin:0; }

/* ---------------------------------------------------------------- peek (S12): a popover while the finger is down */
.peek{ position:absolute; left:8px; right:8px; top:calc(var(--sat) + var(--strip-h) + 14px); z-index:34; pointer-events:none; padding:12px 14px; border-radius:14px; background:var(--panel-solid);
  border:2px solid var(--lamp-core); box-shadow:0 8px 0 rgba(4,9,16,.5), 0 0 24px rgba(0,0,0,.5); animation:fade-in 120ms ease-out; max-width:460px; margin:0 auto; }
.peekbody .pk-title{ font-size:20px; font-weight:800; margin-bottom:4px; }
.peekbody .pk-line{ font-size:16px; line-height:20px; margin:3px 0; }
.peekbody .pk-line.bad{ color:var(--danger); font-weight:700; }
.peekbody .pk-line.dim{ color:var(--ink-muted); }
.pkcards{ display:inline-flex; gap:4px; flex-wrap:wrap; margin-left:6px; }

/* ---------------------------------------------------------------- pickers and lists */
.sheet-back.board .sheet{ max-height:min(100%,66dvh); }
.sheet-back.board .sheet.tall{ max-height:100%; height:auto; }
.sheet-back.picker .sheet{ max-height:min(72dvh,560px); }
.pickwrap{ display:flex; flex-direction:column; gap:10px; }
.picklist{ display:flex; flex-direction:column; gap:8px; }
.pickbtn{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; width:100%; min-height:52px; padding:8px 14px; border:0; border-radius:12px; text-align:left;
  background:var(--card); color:var(--card-ink); font:inherit; box-shadow:0 3px 0 var(--bg-deep), inset 0 -3px 0 #d8c79f; touch-action:manipulation; user-select:none; -webkit-user-select:none; }
.pickbtn.pressed{ transform:translateY(2px); filter:brightness(.94); }
.pickbtn.off{ opacity:.55; }
.pickbtn .pk-l{ font-size:18px; font-weight:800; line-height:22px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pickbtn .pk-s{ font-size:16px; line-height:17px; color:#4b3c28; font-weight:500; }
.pickbtn .stag{ color:#2A1E10; } .pickbtn .stag i{ color:var(--sc); text-shadow:0 0 1px #000; }
.pk-head{ font-size:18px; font-weight:700; }
.pk-hand{ margin-top:6px; display:flex; flex-wrap:wrap; gap:4px; align-items:center; font-size:16px; }
.sigpick{ display:flex; flex-direction:column; gap:10px; }
.sigrow{ display:flex; flex-direction:column; gap:6px; padding-bottom:8px; border-bottom:1px solid rgba(233,221,190,.14); }
.sig-lh{ font-size:18px; }
.sig-btns{ display:flex; flex-wrap:wrap; gap:6px; }
.sigbtn{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:60px; min-height:56px; padding:4px 8px; border:0; border-radius:12px; background:var(--card); color:var(--card-ink); font:inherit; box-shadow:0 3px 0 var(--bg-deep), inset 0 -3px 0 #d8c79f; }
.sigbtn .si{ font-size:22px; line-height:24px; font-weight:800; } .sigbtn .sn{ font-size:16px; font-weight:700; } .sigbtn .sk{ font-size:16px; color:#0B6B2A; font-weight:700; }
.sigbtn.pressed{ transform:translateY(2px); }

/* menu */
.menubody{ display:flex; flex-direction:column; gap:12px; }
.menubody .btn.secondary{ flex:1 1 140px; }
.menurow{ display:flex; flex-direction:column; gap:6px; }
.speedchip{ min-height:44px; border:1.5px solid var(--panel-edge); border-radius:12px; background:transparent; color:var(--ink); font-weight:600; font-size:16px; }
.menurow .seg{ max-width:none; width:100%; } .menurow .seg .btn{ flex:1 1 0; }

/* ---------------------------------------------------------------- sheet bodies */
.sheet-list{ display:flex; flex-direction:column; gap:8px; }
.fc-head{ background:rgba(0,0,0,.25); border-radius:12px; padding:10px 12px; }
.fc-line{ font-size:18px; font-weight:700; } .fc-sub{ font-size:16px; color:var(--ink-muted); margin-top:2px; }
.fc-note{ margin:4px 0; font-size:16px; } .fc-note.bad{ color:var(--danger); font-weight:700; } .dim.small, .fc-note.dim{ color:var(--ink-muted); }
.steps2{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.fcrow{ display:flex; gap:10px; align-items:flex-start; width:100%; min-height:44px; padding:8px 10px; border:0; border-radius:10px; background:rgba(246,235,208,.08); color:var(--ink); text-align:left; font:inherit; }
.fcrow.pressed{ filter:brightness(1.3); }
.fcrow .tag{ flex:0 0 78px; font-weight:800; font-size:16px; color:var(--lamp-core); }
.steps2 li.bad .fcrow .tag{ color:var(--danger); } .steps2 li.warn .fcrow .tag{ color:var(--warn); }
.fcrow .why{ flex:1; font-size:16px; line-height:20px; }
.baggrid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.bagrow{ position:relative; display:grid; grid-template-columns:26px 18px 1fr auto; align-items:center; column-gap:4px; min-height:44px; padding:4px 6px 8px; border-radius:10px; background:rgba(246,235,208,.08); overflow:hidden; font-size:16px; }
.bagrow.zero{ opacity:.5; }
.bagrow .bn{ font-weight:800; } .bagrow .bg{ color:var(--dc); font-weight:800; } .bagrow .bname{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; }
.bagrow .bc{ font-size:16px; white-space:nowrap; } .bagrow .bp{ position:absolute; right:6px; top:2px; font-size:16px; color:var(--ink-muted); display:none; }
.bagrow .bar{ position:absolute; left:0; bottom:0; height:4px; background:var(--dc); border-radius:2px; max-width:100%; }
.bag-head{ margin:0; font-size:16px; }
.moontrack{ display:flex; flex-wrap:wrap; gap:6px; align-items:flex-end; padding:6px 0 10px; }
.mpip{ position:relative; display:flex; flex-direction:column; align-items:center; width:34px; padding-top:2px; }
.mpip i{ width:30px; height:30px; display:grid; place-items:center; border-radius:50%; border:2px solid var(--brass); font-style:normal; font-weight:700; font-size:16px; box-sizing:border-box; }
.mpip.past i{ background:var(--brass); color:var(--card-ink); } .mpip.now i{ border-color:var(--lamp-core); box-shadow:0 0 0 3px rgba(255,210,122,.45); background:var(--lamp-core); color:var(--card-ink); }
.mpip em{ font-style:normal; color:var(--moon); font-size:18px; line-height:20px; }
.msun{ font-size:28px; color:var(--lamp-core); align-self:center; margin-left:4px; }
.phaselist{ list-style:none; margin:0; padding:0; font-size:16px; } .phaselist li{ padding:6px 0; border-top:1px solid rgba(233,221,190,.14); } .phaselist li.cur{ color:var(--lamp-core); } .phaselist em{ font-style:normal; font-weight:700; }
.logbox .lognight{ margin:10px 0 2px; font-size:18px; color:var(--lamp-core); }
.loglist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.logrow{ display:flex; gap:8px; align-items:flex-start; width:100%; min-height:44px; padding:6px 8px; border:0; border-radius:10px; background:rgba(246,235,208,.06); color:var(--ink); font:inherit; font-size:16px; line-height:20px; text-align:left; }
.logrow.pressed{ filter:brightness(1.3); } .logrow .lgl{ flex:0 0 18px; font-weight:800; }
.loglist li.k-surge .logrow, .loglist li.k-loss .logrow{ background:rgba(255,122,102,.16); } .loglist li.k-lit .logrow, .loglist li.k-win .logrow{ background:rgba(155,227,155,.16); }
.loglist li.k-turn .logrow{ color:var(--lamp-core); font-weight:700; }

/* the Lighthouse sheet (S11) */
.lhbody{ display:flex; flex-direction:column; gap:8px; }
.lh-head{ display:flex; align-items:center; gap:12px; }
.lh-head > div{ flex:1; min-width:0; } .lh-glyph{ font-size:34px; line-height:1; } .lh-title{ font-size:20px; font-weight:800; }
.lh-status{ flex:0 0 auto; padding:4px 12px; border-radius:999px; background:rgba(0,0,0,.35); font-weight:700; font-size:16px; } .lh-status.lit{ color:var(--good); }
.lh-target{ font-size:20px; }
.lh-cards{ display:flex; flex-wrap:wrap; gap:6px; min-height:46px; align-items:center; }
.lhcard{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:40px; height:52px; border-radius:7px; border:2px solid var(--sc); background:#22385c; color:var(--ink); font-weight:800; }
.lhcard b{ font-size:20px; line-height:22px; } .lhcard i{ font-style:normal; color:var(--sc); font-size:16px; line-height:16px; }
.lhcard.up{ background:var(--card); color:var(--card-ink); } .lhcard.up i{ color:var(--card-ink); } .lhcard.mine{ box-shadow:0 0 0 3px var(--lamp-core); }
.lh-line{ margin:0; font-size:16px; line-height:22px; } .lh-line .tokp{ display:inline-block; margin-right:8px; padding:0 8px; border-radius:6px; background:rgba(246,235,208,.12); font-weight:700; }
.lh-line.you b.mine{ color:var(--lamp-core); font-size:18px; } .lh-line.keeper{ color:var(--brass); font-weight:700; }
.lh-sub{ display:flex; flex-direction:column; gap:6px; margin-top:4px; } .lh-sub > b{ font-size:16px; }
.siglist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:16px; } .siglist .seal{ color:var(--good); font-weight:700; }
.lh-ignitebar{ position:sticky; bottom:-6px; z-index:2; margin:4px -2px -6px; padding:8px 2px calc(6px + var(--sab)); background:var(--panel-solid); box-shadow:0 -8px 10px -4px var(--panel-solid); border-top:1px solid var(--panel-edge); }
.lh-actions{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.cardbtn{ border:0; background:none; padding:4px; min-width:48px; min-height:48px; border-radius:10px; } .cardbtn.sel{ outline:3px solid var(--lamp-core); } .cardbtn.pressed{ filter:brightness(1.3); }

/* dev debug panel */
.dbg{ display:flex; flex-direction:column; gap:8px; } .dbg h3{ margin-top:8px; }

/* ---------------------------------------------------------------- landscape / tablet: Open Table shows every other hand as a fanned strip */
@media (orientation:landscape) and (min-width:700px){
  .bs-opens{ display:flex; }
  .bs-hand{ overflow:auto; }
  .bs-neutral{ grid-row:hand-start / actions-end; grid-column:hand-start / actions-end; }
}

/* Open Table: the "everyone's hands" sheet (phone) */
.openhands{ display:flex; flex-direction:column; gap:10px; }
.oh-row{ display:flex; flex-direction:column; gap:4px; }
.oh-who{ font-size:16px; font-weight:700; }
.oh-cards.ww-hand{ min-height:76px; height:76px; justify-content:flex-start; pointer-events:none; }