/* In-game table: the same console language as setup (rounded compartments, faction colours,
   icons first, detail on hover). Motion marks changes of state; nothing loops unless it is live. */
#app.ingame{--card:#10141a;--card-edge:#1e262f;--chip:#0c1014}
#app .icon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:-.15em}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;background:var(--chip,#0c1014);box-shadow:inset 0 0 0 1px #1f2831;color:var(--muted);font-size:11px;line-height:1.3;white-space:nowrap}
.chip .icon{font-size:12px}
.chip.ok{color:var(--ok)}.chip.dead,.chip.warn{color:var(--accent2)}
.info-dot{display:inline-grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:help;flex:none}
.info-dot:hover,.info-dot:focus-visible{color:var(--accent);background:#ffffff0a}
.info-dot .icon{font-size:14px}

/* ---------------------------------------------------------------- header */
#app > header .game-logo{display:block;width:32px;height:32px;object-fit:contain;flex:none}
#app.ingame header{gap:12px}
#app.ingame #status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#app.ingame #status.is-processing:after{content:none}
#app:not(.ingame) #phaseTrack{display:none}
.phase-track{display:flex;align-items:center;gap:10px;min-width:0;margin-left:6px}
/* One capsule says where we are ("Day 1 · Discussion"); the rail beside it only hints at the
   order, as dots in the same tone. Hovering a dot names the step. */
.phase-track{--tone:#f6ad55;--tone-text:#f6d38b}
.phase-track.is-night{--tone:#7f9cf5;--tone-text:#b6c8ff}
.phase-track.is-end,.phase-track.is-epilogue{--tone:var(--accent);--tone-text:var(--accent)}
.track-now{display:inline-flex;min-width:0;align-items:center;height:28px;border-radius:99px;white-space:nowrap;background:color-mix(in srgb,var(--tone) 12%,#0c1014);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 28%,transparent)}
.track-round,.track-stage{display:inline-flex;align-items:center;align-self:stretch;gap:6px;min-width:0;padding:0 11px}
.track-round{flex:none;font:700 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tone-text)}
.track-stage{position:relative;padding-left:10px;color:var(--text);font-size:12.5px;font-weight:600}
.track-stage:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:color-mix(in srgb,var(--tone) 45%,transparent)}
.track-stage>span{overflow:hidden;text-overflow:ellipsis}
.track-round+.track-stage{margin-left:-1px}
.track-now .icon{font-size:15px}
.track-stage .icon{color:var(--tone-text);animation:step-in .5s var(--ease)}
.track-steps{display:flex;align-items:center;margin:0;padding:0;list-style:none;min-width:0}
.track-step{position:relative;display:grid;place-items:center;width:20px;height:28px;cursor:default}
.track-step:after{content:"";width:5px;height:5px;border-radius:50%;box-shadow:inset 0 0 0 1px #3a4450;transition:background .3s,box-shadow .3s,transform .2s var(--ease)}
.track-step+.track-step:before{content:"";position:absolute;right:calc(50% + 5px);top:50%;width:10px;height:1px;background:#232b34}
.track-step.done:after{background:color-mix(in srgb,var(--tone) 55%,#0c1014);box-shadow:none}
.track-step.done:before,.track-step.on:before{background:color-mix(in srgb,var(--tone) 35%,#1a2027)}
.track-step.on:after{width:9px;height:9px;background:var(--tone-text);box-shadow:0 0 0 3px color-mix(in srgb,var(--tone) 22%,transparent),0 0 10px -1px var(--tone);animation:step-in .5s var(--ease)}
.track-step:hover:after{transform:scale(1.5)}
.track-step>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@keyframes step-in{from{transform:scale(.4) rotate(-40deg);opacity:0}}
/* Tooltip cards lead with the header's own icon. #tip sits outside #app, so it styles its icons. */
#tip .icon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
#tip .tip-head{--tone:#f6ad55;--tone-text:#f6d38b;display:flex;align-items:center;gap:8px;margin:-1px 0 5px}
#tip .tip-head.is-night{--tone:#7f9cf5;--tone-text:#b6c8ff}
#tip .tip-head .icon{box-sizing:content-box;width:16px;height:16px;padding:5px;border-radius:8px;color:var(--tone-text);background:color-mix(in srgb,var(--tone) 16%,#0c1014);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 32%,transparent)}
#tip .tip-head b{color:var(--text);font-size:12.5px}
#tip .tip-head small{margin-left:auto;padding:1px 7px;border-radius:99px;font:600 9.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tone-text);background:color-mix(in srgb,var(--tone) 14%,transparent)}
.track-alive{display:inline-flex;flex:none;align-items:baseline;gap:4px;color:var(--text);font:600 13px var(--mono);white-space:nowrap;cursor:default}
.track-alive .icon{font-size:15px;color:var(--muted);align-self:center}
.track-alive small{color:var(--muted);font-weight:400}
#timer{display:none}
#timer.on{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;font:700 13px var(--mono);color:var(--accent2);background:color-mix(in srgb,var(--accent2) 12%,#0c1014);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent2) 40%,transparent);min-width:0}
#timer.on.low{color:var(--danger);background:color-mix(in srgb,var(--danger) 14%,#0c1014);box-shadow:inset 0 0 0 1px var(--danger)}
@media (prefers-reduced-motion:no-preference){#timer.on.low{animation:pulse 1s ease-in-out infinite}}

/* ---------------------------------------------------------------- sidebar */
#app.ingame aside{padding:10px 10px 14px;display:flex;flex-direction:column;gap:10px}
#app.ingame aside h3{display:flex;align-items:center;gap:7px;margin:0;font-size:11px;letter-spacing:.08em;color:var(--muted)}
#app.ingame aside h3 .icon{font-size:14px;color:var(--accent)}
.side-head{display:flex;align-items:center;gap:8px;padding:0 2px}
.side-head h3{flex:1;min-width:0}
.side-head .info-dot{width:18px;height:18px}
#tableTools .portrait-toolbar{padding:0;border:0;gap:6px}
#gameDistributionSummary{display:inline-flex;align-items:center;gap:2px;height:28px;padding:0 6px;border-radius:8px;background:var(--chip);border:0;box-shadow:inset 0 0 0 1px #1f2831}
#gameDistributionSummary:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.dist-chip{display:inline-flex;align-items:center;gap:2px;padding:0 3px;color:var(--f)}
.dist-chip .icon{font-size:12px}
.dist-chip b{font:700 12px var(--mono)}
#tableTools #portrait-script{width:30px;height:28px;border-radius:8px}
.game-modifiers{display:flex;gap:5px;flex-wrap:wrap;margin:4px 2px 9px}
.modifier-flag{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border-radius:7px;border:1px solid color-mix(in srgb,var(--accent2) 45%,var(--line));background:color-mix(in srgb,var(--accent2) 9%,var(--panel));color:var(--accent2);font-size:11px;font-weight:600;cursor:help}
.modifier-flag .icon{font-size:15px}
.modifier-flag:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.no-modifiers{font-size:11px;color:var(--muted)}
#seats{display:flex;flex-direction:column;gap:3px}

/* Seat cards: portrait with seat number, name, what is known, and only non-idle activity. */
#app .portrait-seat{min-height:62px;padding:4px 8px 4px 5px;gap:10px;border-radius:10px;border:1px solid transparent;background:transparent;transition:background .25s,border-color .25s,box-shadow .25s}
#app .portrait-seat:hover{background:#ffffff07}
#app .portrait-seat[data-alignment]:not([data-alignment=unknown]){border-color:color-mix(in srgb,var(--alignment) 55%,transparent)}
#app .portrait-seat.you{box-shadow:inset 0 0 0 1px #63b3ed30}
.portrait-seat .seat-art{position:relative;width:54px;height:54px;border-radius:9px;background:radial-gradient(ellipse at 50% 70%,#54756926,transparent 70%)}
.seat-num{position:absolute;left:-3px;top:-2px;display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:#0b0e12;box-shadow:0 0 0 1px #2b3540;color:var(--muted);font:600 10px var(--mono)}
.portrait-seat.current-speaker .seat-num,.portrait-seat.round-first .seat-num{color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent)}
.seat-name{display:flex;align-items:baseline;gap:6px;min-width:0}
.seat-name strong{min-width:0}
.you-tag{font:italic 600 9px var(--sans);letter-spacing:.04em;color:var(--you);padding:0 5px;border-radius:99px;box-shadow:inset 0 0 0 1px #63b3ed55}
.you-mention{color:var(--you);font-size:.9em;white-space:nowrap}
#app .portrait-seat .seat-role{display:flex;gap:5px;flex-wrap:wrap;min-height:15px;margin-top:1px}
.seat-truth,.seat-claim{font-size:10.5px;line-height:1.4;color:var(--alignment,var(--muted));white-space:nowrap}
.seat-truth{font-weight:600}
.seat-claim{font-style:italic;opacity:.85}
.seat-claim:before{content:"“";opacity:.7}.seat-claim:after{content:"”";opacity:.7}
#app .portrait-seat .seat-activity{display:flex;align-items:center;gap:5px;min-height:14px;font-size:10px;font-weight:600;color:var(--accent2);white-space:nowrap}
#app .portrait-seat .seat-activity[data-idle=true]:not([data-processing=true]){visibility:hidden}
#app .portrait-seat .seat-activity[data-tone=live]{color:var(--accent)}
#app .portrait-seat .seat-activity[data-tone=alert]{color:var(--danger)}
#app .portrait-seat .seat-activity:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
#app .portrait-seat .seat-activity[data-processing=true]{color:var(--accent2)}
@media (prefers-reduced-motion:no-preference){
  #app .portrait-seat .seat-activity[data-processing=true]:before,#app .portrait-seat .seat-activity[data-tone=live]:before{animation:pulse 1s ease-in-out infinite}
}
.portraits-still #app .portrait-seat .seat-activity:before{animation:none}
#app .portrait-seat.current-speaker{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,transparent),transparent 80%);box-shadow:inset 3px 0 var(--accent)}
#app .portrait-seat.current-speaker .seat-activity{white-space:nowrap}
#app .portrait-seat.round-first{margin-top:5px}
#app .portrait-seat.round-last{margin-bottom:5px}
#app .portrait-seat .robot-progress{top:4px;right:8px;opacity:.75}
#app .portrait-seat .robot-progress.is-empty{visibility:hidden}
.dialogue-usage.is-empty{display:none}

/* You dock: your identity stays pinned to the bottom-left corner while the seats scroll above it.
   Cover voice, private information and notes live in the notebook (notebook.css). */
@media (min-width:761px){
  #app.ingame aside#left{overflow:hidden}
  #app.ingame #seats{flex:1 1 auto;min-height:0;overflow-y:auto;margin:0 -4px;padding:0 4px}
}
.you-dock{flex:none;margin:auto -10px -14px;padding:11px 12px 12px;display:flex;flex-direction:column;gap:8px;background:linear-gradient(#10141a,#0d1116);border-top:1px solid var(--card-edge);box-shadow:0 -14px 22px -14px #000c}
.you-card{display:flex;align-items:center;gap:10px}
.you-portrait{display:block;flex:none;padding:0;border:0;border-radius:10px;background:none}
.you-portrait:hover{background:#ffffff12}
.you-portrait:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.you-art{width:52px;height:52px;flex:none;border-radius:10px;background:radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--alignment) 25%,transparent),transparent 72%);filter:drop-shadow(0 0 0 transparent)}
.you-portrait .you-art{display:block}
.you-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.you-name{align-self:flex-start}
.you-copy strong{font:700 13px var(--mono)}
.you-role{font-size:13px;color:var(--alignment)}
.you-role .text-reference{font-weight:600}
.you-chips{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:3px}
.you-chips .chip{padding:2px 7px;font-size:10px}
.allies{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.allies-label{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--f-sympathizer);cursor:help}
.allies .muted{font-size:11px}
.ally{display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 2px;border-radius:99px;background:var(--chip);border:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f-sympathizer) 45%,transparent);font-size:11px}
.ally img{width:22px;height:22px;border-radius:50%;background:#ffffff08}
.ally span{font:600 11px var(--mono)}
.ally small{color:var(--muted);font-size:10px}
.priv-when{display:inline-block;margin-right:6px;padding:0 6px;border-radius:99px;background:#b794f41c;color:var(--priv);font:600 9.5px var(--mono);letter-spacing:.04em;vertical-align:1px}

/* ---------------------------------------------------------------- "now" banner */
#app #portrait-focus{height:92px;padding:6px 18px;gap:14px;border-bottom:1px solid var(--line)}
#app .focus-art{height:84px;width:92px}
/* Time of day. The sky's colour tracks the stage (indigo-rose dawn, clear blue morning, golden
   afternoon, purple-red dusk, navy night) and a large sun crosses it: rising behind the portrait,
   setting behind the meters. The sun never passes under the copy. Legibility comes from three
   layers: glyph-hugging text shadows, a feathered shade behind the copy, and opaque meter chips. */
@property --sky-top{syntax:"<color>";inherits:true;initial-value:#1a4e7a}
@property --sky-bottom{syntax:"<color>";inherits:true;initial-value:#245a78}
@property --sky-glow{syntax:"<color>";inherits:true;initial-value:transparent}
@property --sun-core{syntax:"<color>";inherits:true;initial-value:#fffbe8}
@property --sun-edge{syntax:"<color>";inherits:true;initial-value:#ffd66b}
@property --ray{syntax:"<color>";inherits:true;initial-value:transparent}
@property --sun-r{syntax:"<length>";inherits:true;initial-value:26px}
@property --sun-x{syntax:"<length-percentage>";inherits:true;initial-value:64px}
@property --sun-y{syntax:"<length-percentage>";inherits:true;initial-value:6px}
#app #portrait-focus[data-time]{
  --scrim:#070a0e;isolation:isolate;
  background:
    radial-gradient(circle 440px at var(--sun-x) var(--sun-y),var(--sky-glow),transparent 72%),
    linear-gradient(180deg,var(--sky-top),var(--sky-bottom));
  transition:--sky-top 2s ease,--sky-bottom 2s ease,--sky-glow 2s ease,--sun-core 2s ease,--sun-edge 2s ease,--ray 2s ease,--sun-r 2.4s var(--ease),--sun-x 2.6s var(--ease),--sun-y 2.6s var(--ease)}
/* The sun: a solid disc with a bright rim, a corona, and slow rays. At night it is the moon. */
#app #portrait-focus[data-time]:after{content:"";position:absolute;z-index:-1;pointer-events:none;left:var(--sun-x);top:var(--sun-y);width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;
  background:
    radial-gradient(circle,var(--sun-core) 0 calc(var(--sun-r) - 10px),var(--sun-edge) calc(var(--sun-r) - 1px),color-mix(in srgb,var(--sun-edge) 60%,transparent) calc(var(--sun-r) + 2px),color-mix(in srgb,var(--sun-edge) 30%,transparent) calc(var(--sun-r) + 16px),color-mix(in srgb,var(--sun-edge) 12%,transparent) calc(var(--sun-r) + 52px),transparent calc(var(--sun-r) + 130px)),
    repeating-conic-gradient(var(--ray) 0 4deg,transparent 4deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 calc(var(--sun-r) + 8px),#0009 calc(var(--sun-r) + 34px),transparent 72%);mask:radial-gradient(circle,#000 calc(var(--sun-r) + 8px),#0009 calc(var(--sun-r) + 34px),transparent 72%);
  animation:sun-turn 90s linear infinite,sun-shine 5s ease-in-out infinite alternate}
@keyframes sun-turn{to{rotate:360deg}}
@keyframes sun-shine{from{scale:.96;opacity:.9}to{scale:1.04;opacity:1}}
#portrait-focus[data-time=dawn]{--sky-top:#1c1c44;--sky-bottom:#5a2840;--sky-glow:#ff7a4a73;--sun-core:#ffe2b8;--sun-edge:#ff8a4c;--ray:#ffa06a66;--sun-r:32px;--sun-x:58px;--sun-y:104%;--mote:#ffc38a}
#portrait-focus[data-time=morning]{--sky-top:#123c63;--sky-bottom:#1a4b64;--sky-glow:#fff1b04d;--sun-core:#fffdf0;--sun-edge:#ffe27a;--ray:#fff2b066;--sun-r:26px;--sun-x:30px;--sun-y:-2px;--mote:#fff2c0}
#portrait-focus[data-time=afternoon]{--sky-top:#4a3410;--sky-bottom:#261f14;--sky-glow:#ffc15a6b;--sun-core:#fff6d6;--sun-edge:#ffb43c;--ray:#ffc86a66;--sun-r:28px;--sun-x:calc(100% - 64px);--sun-y:6px;--mote:#ffd58a}
#portrait-focus[data-time=dusk]{--sky-top:#26143d;--sky-bottom:#5a2126;--sky-glow:#ff5a3a80;--sun-core:#ffd0a0;--sun-edge:#ff5a36;--ray:#ff7a4a66;--sun-r:36px;--sun-x:calc(100% - 70px);--sun-y:106%;--mote:#ff9a6a}
#portrait-focus[data-time=night]{--sky-top:#060a18;--sky-bottom:#101a36;--sky-glow:#6d88d833;--sun-core:#f4f7ff;--sun-edge:#c9d5f5;--ray:transparent;--sun-r:17px;--sun-x:calc(100% - 64px);--sun-y:26px;--mote:#e6ecff}
#portrait-focus[data-time=epilogue]{--sky-top:#12403f;--sky-bottom:#0d2624;--sky-glow:#83eed833;--sun-core:#e8fffa;--sun-edge:#83eed8;--ray:#83eed833;--sun-r:22px;--sun-x:50%;--sun-y:-60px;--mote:#83eed8}
/* Motes take the hour's colour; at night they hold still and twinkle like stars. They thin out
   across the text band so no bright pixel lands inside a glyph. */
#app #portrait-focus[data-time]:before{z-index:-1;background:radial-gradient(circle at 16% 36%,var(--mote) 0 1px,transparent 2px),radial-gradient(circle at 43% 80%,var(--mote) 0 1px,transparent 2px),radial-gradient(circle at 75% 34%,var(--mote) 0 1px,transparent 2px);background-size:160px 130px;opacity:.4;-webkit-mask:linear-gradient(90deg,#000 90px,transparent 118px 70%,#000 86%);mask:linear-gradient(90deg,#000 90px,transparent 118px 70%,#000 86%)}
#app #portrait-focus[data-time=night]:before{opacity:.7;animation:portrait-twinkle 3.2s ease-in-out infinite alternate;background-size:120px 90px,170px 110px,90px 70px}
#app #portrait-focus[data-time=dusk]:before{animation-duration:13s}
@keyframes portrait-twinkle{from{opacity:.3}to{opacity:.8}}
/* Readability. Text shadows hug each glyph; the shade behind the copy is feathered on every side so
   it reads as haze; the copy stops short of the sun's corners; meter chips go near-opaque. */
#app #portrait-focus[data-time] .portrait-copy{isolation:isolate;text-shadow:0 0 6px #000c,0 1px 2px #000}
@media (min-width:761px){#app #portrait-focus[data-time] .portrait-copy{max-width:calc(100% - 250px)}}
#app #portrait-focus[data-time] .portrait-copy small{color:#a3adb9}
#app #portrait-focus[data-time] .portrait-copy p{color:var(--text)}
#app #portrait-focus[data-time] .portrait-copy:before{content:"";position:absolute;inset:-18px -10px -18px -60px;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--scrim) 58%,transparent) 60px 86%,transparent);-webkit-mask:linear-gradient(transparent,#000 26px calc(100% - 26px),transparent);mask:linear-gradient(transparent,#000 26px calc(100% - 26px),transparent)}
#app #portrait-focus[data-time] .meter{background:#0b0e12eb}
#app #portrait-focus[data-time][data-tone=idle] .portrait-badge{background:#0c1014e6}
/* The sun keeps its place without motion when motion is reduced or portraits are still. */
@media (prefers-reduced-motion:reduce){#app #portrait-focus[data-time]:after{animation:none}}
.portraits-still #app #portrait-focus[data-time]:after{animation:none}

.focus-head{display:flex;align-items:center;gap:9px;min-width:0}
.focus-head strong{font-size:16px!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app .portrait-copy p{margin:4px 0 2px;font-size:12.5px;color:#c8d0d8;-webkit-line-clamp:1}
#app .portrait-copy small{font-size:10.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .portrait-copy small:empty{display:none}
#app .portrait-badge{order:-1;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;border:0;font:600 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,#0c1014);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}
#portrait-focus[data-tone=live] .portrait-badge:before,#portrait-focus[data-tone=you] .portrait-badge:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
@media (prefers-reduced-motion:no-preference){#portrait-focus[data-tone=live] .portrait-badge:before,#portrait-focus[data-tone=you] .portrait-badge:before{animation:pulse 1s ease-in-out infinite}}
#portrait-focus[data-tone=alert] .portrait-badge{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,#0c1014);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 45%,transparent)}
#portrait-focus[data-tone=you] .portrait-badge{color:var(--you);background:color-mix(in srgb,var(--you) 14%,#0c1014);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--you) 50%,transparent)}
#portrait-focus[data-tone=idle] .portrait-badge{color:var(--muted);background:#0c1014aa;box-shadow:inset 0 0 0 1px #2b3540}
#portrait-focus[data-tone=idle] .focus-art{opacity:.55}
.focus-meters{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none;position:relative}
.meter{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:10px;background:#0b0e12bb;box-shadow:inset 0 0 0 1px #ffffff10;font-size:11.5px;color:var(--muted);cursor:default;backdrop-filter:blur(3px)}
.meter b{font-family:var(--mono);color:var(--text)}
.meter .icon{font-size:14px;color:var(--accent2)}
.meter-label{display:inline-flex;align-items:center;gap:5px}
.meter-ready .icon{color:var(--ok)}
.meter-dots{display:inline-flex;gap:3px}
.meter-dots i{position:relative;width:9px;height:9px;border-radius:50%;background:#26303a;transition:background .3s,box-shadow .3s,transform .3s var(--ease)}
.meter-dots i.on{background:var(--ok);box-shadow:0 0 6px -1px var(--ok);transform:scale(1.1)}
.meter-dots i.need:after{content:"";position:absolute;right:-3px;top:-4px;bottom:-4px;width:1px;background:var(--ok);opacity:.6}
.meter-block{color:var(--text)}
.meter-face{width:24px;height:24px;border-radius:50%;background:#ffffff08}

/* ---------------------------------------------------------------- record */
/* Keep absolutely positioned accessibility labels inside the record's scroll area. */
#app #record{position:relative;padding:12px 18px 16px}
#record .record-chips{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 6px 2px}
#record .record-chip{display:inline-flex;align-items:center;gap:5px;margin:0;padding:3px 9px 3px 7px;border-radius:99px;background:#0c1014;box-shadow:inset 0 0 0 1px #1c242c;font-size:11px;line-height:1.3;color:var(--muted);font-style:normal;cursor:default;animation:chip-in .3s var(--ease)}
#record .record-chip .icon{font-size:12px;color:#6c7884}
#record .record-chip.ready .icon{color:var(--ok)}
#record .record-chip.ready.off .icon{color:var(--muted)}
#record .record-chip.whisper .icon{color:var(--priv)}
#record .record-chip.prompt .icon{color:var(--accent)}
#record .record-chip.response_failed .icon{color:var(--accent2)}
#record .record-chip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.chip-name{font-weight:600}
@keyframes chip-in{from{opacity:0;transform:scale(.85)}}
#record .record-phase{margin:22px 0 10px;padding:0;border:0;background:none;text-align:center;color:var(--muted);font-size:12px}
.phase-rule{display:flex;align-items:center;gap:12px;color:#f6d38b}
.phase-rule:before,.phase-rule:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,currentColor)}
.phase-rule:after{background:linear-gradient(270deg,transparent,currentColor)}
.record-phase[data-environment=night] .phase-rule{color:#9fb3f0}
.phase-title{display:inline-flex;align-items:center;gap:8px;font:700 13px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.phase-title .icon{font-size:17px}
#record .record-phase .record-event-text{display:block;margin-top:5px;font-size:12px;color:#8e9aa6}
#record .record-stage{display:flex;justify-content:center;margin:10px 0;padding:0;border:0;background:none;font-family:var(--sans);text-transform:none;letter-spacing:0}
.stage-pill{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:99px;background:#0c1014;box-shadow:inset 0 0 0 1px #222b34;font-size:11.5px;color:#93a0ac}
.stage-pill .icon{font-size:13px;color:var(--accent)}
#record .record-system{align-items:center}
#record .record-system .record-event-label{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#ffffff08;color:#8795a1}
#record .record-system .record-event-label .icon{font-size:13px}
#record .record-system.execution .record-event-label,#record .record-system.death .record-event-label,#record .record-system.kill_switch .record-event-label{color:var(--danger);background:color-mix(in srgb,var(--danger) 14%,transparent)}
#record .record-system.record-doom{border-left-color:#c3172b;color:#f0b8bd;background:linear-gradient(90deg,#c3172b1c,transparent 70%)}#record .record-system.record-doom .record-event-label{color:#ff4a58;background:#c3172b2a}#record .scene-veiled{display:none}#record .record-system.record-kill{border-left-color:#27c8f0;color:#bfefff;background:linear-gradient(90deg,#27c8f01a,transparent 70%)}#record .record-system.record-kill .record-event-label{color:#5fe3ff;background:#27c8f026}
#record .record-system.block{border-left-color:var(--accent2);color:#e7c79a}
#record .record-system.block .record-event-label{color:var(--accent2)}
#record .record-system.claim{border-left-color:#8e7bd6}
#record .record-system.claim .record-event-label{color:#b7a6f4}
#record .ev.private{display:flex;align-items:flex-start;gap:10px;margin:6px 0;padding:8px 12px;border-radius:0 8px 8px 0;font-family:var(--sans);font-size:12.5px;line-height:1.5}
#record .ev.private .record-event-label{color:var(--priv);width:auto;flex:none;padding-top:1px}
#record .ev.private .record-event-label .icon{font-size:13px}
#record .ev.private.whisper-no-reply{border-left-color:var(--accent2);background:color-mix(in srgb,var(--accent2) 8%,var(--panel));}
#record .whisper-receipt{display:block;width:fit-content;margin-bottom:4px;padding:2px 7px;border:1px solid currentColor;border-radius:4px;color:var(--accent2);font-size:11px;letter-spacing:.03em;}
#record .record-nomination{border-color:color-mix(in srgb,var(--accent2) 35%,transparent);background:linear-gradient(90deg,#f6ad550d,transparent 70%)}
.nom-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.nom-arrow{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--accent2);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.nom-arrow .icon{font-size:15px}
.nom-target{font:700 12px var(--mono);letter-spacing:.04em}
#record .record-vote{margin:8px 0;padding:10px 12px;border-radius:10px;background:#0c1014;box-shadow:inset 0 0 0 1px #222b34;font-family:var(--sans);font-size:12px}
.vote-head{display:flex;align-items:center;gap:8px;color:var(--text)}
.vote-head .icon{font-size:15px;color:var(--accent2)}
.vote-count{margin-left:auto;color:var(--muted);font-size:11px}
.vote-count b{font:700 14px var(--mono);color:var(--danger)}
.record-vote:not(.passed) .vote-count b{color:var(--text)}
.vote-meter{display:flex;gap:3px;margin:8px 0 7px}
.vote-meter i{position:relative;flex:1;max-width:44px;height:6px;border-radius:3px;background:#222a33}
.vote-meter i.yes{background:var(--danger);animation:fill-in .4s var(--ease) both}
.vote-meter i.need:after{content:"";position:absolute;right:-2px;top:-4px;bottom:-4px;width:2px;border-radius:1px;background:var(--text);opacity:.55}
@keyframes fill-in{from{transform:scaleX(0);transform-origin:left}}
.vote-sides{display:flex;flex-wrap:wrap;gap:4px 18px}
.vote-sides>span{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 7px}
.vote-sides b{font:700 10px var(--mono);letter-spacing:.06em}
.vote-sides .yes b,.vote-sides .yes .icon{color:var(--danger)}
.vote-sides .no b,.vote-sides .no .icon{color:var(--ok)}
.vote-sides span span{font-weight:600}

/* ---------------------------------------------------------------- action panel */
/* A tall turn scrolls inside the panel instead of pushing the page past the viewport.
   (Phones and short windows already cap it in portraits.css.) */
@media (min-width:761px){#app #action{max-height:50dvh;overflow-y:auto;overscroll-behavior:contain}}
#app #action{padding:10px 18px 12px;min-height:64px;position:relative;z-index:5;transition:background .3s,box-shadow .3s}
#app #action.my-turn{background:linear-gradient(180deg,color-mix(in srgb,var(--you) 7%,var(--panel)),var(--panel) 60%);box-shadow:inset 0 2px 0 color-mix(in srgb,var(--you) 55%,transparent)}
@media (prefers-reduced-motion:no-preference){#app #action.my-turn{animation:turn-in .45s var(--ease)}}
@keyframes turn-in{from{box-shadow:inset 0 2px 0 var(--you),0 -18px 40px -20px var(--you)}}
.turn-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.turn-glyph{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;flex:none;color:var(--you);background:color-mix(in srgb,var(--you) 13%,#0c1014);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--you) 40%,transparent)}
.turn-glyph .icon{font-size:18px}
#action[data-kind=vote] .turn-glyph,#action[data-kind=nominate] .turn-glyph{color:var(--accent2);background:color-mix(in srgb,var(--accent2) 13%,#0c1014);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent2) 40%,transparent)}
#action[data-kind=defense] .turn-glyph{color:var(--danger);background:color-mix(in srgb,var(--danger) 13%,#0c1014);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 40%,transparent)}
#action[data-kind=night] .turn-glyph,#action[data-kind=black_box] .turn-glyph{color:#b6c8ff;background:color-mix(in srgb,#7f9cf5 14%,#0c1014);box-shadow:inset 0 0 0 1px #7f9cf550}
.turn-title{display:flex;flex-direction:column;min-width:0;flex:1}
.turn-title strong{font-size:15px;color:var(--text);font-weight:650}
.turn-title small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.turn-chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}
.turn-info{position:relative;flex:none}
.turn-info summary{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;list-style:none;cursor:pointer;color:var(--muted)}
.turn-info summary::-webkit-details-marker{display:none}
.turn-info summary:hover,.turn-info[open] summary{color:var(--accent);background:#ffffff0a}
.turn-info summary .icon{font-size:16px}
.turn-info-body{position:fixed;right:var(--pop-right,18px);bottom:calc(var(--pop-bottom,0px) + 8px);z-index:30;width:min(560px,80vw);max-height:46vh;overflow:auto;padding:12px 14px;border-radius:10px;background:#1a2129;box-shadow:0 12px 40px -10px #000,0 0 0 1px #2b3540;animation:pop-in .18s var(--ease)}
.turn-info-body .prompt-kind{font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.turn-info-body .prompt{margin:6px 0 0;font-size:12.5px;line-height:1.55;color:#c8d0d8}
@keyframes pop-in{from{opacity:0;transform:translateY(6px) scale(.98)}}
.composer{position:relative}
.composer textarea{display:block;min-height:64px;max-height:30vh;padding:10px 12px 20px;border-radius:10px;background:#0b0e12;border-color:#212a33;font-size:13.5px;line-height:1.5;transition:border-color .2s,box-shadow .2s}
.composer textarea:focus{outline:none;border-color:color-mix(in srgb,var(--you) 70%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--you) 14%,transparent)}
#app #charcount{position:absolute;right:10px;bottom:6px;margin:0;font-size:10px;color:#56616d;pointer-events:none}
#app #charcount.near{color:var(--accent2)}#app #charcount.over{color:var(--danger)}
.turn-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:9px}
.turn-actions>button,.tool-row>button,.game-over-row button{display:inline-flex;align-items:center;gap:7px;border-radius:9px;padding:8px 14px}
.turn-actions>button .icon,.tool-row>button .icon,.game-over-row button .icon{font-size:15px}
.turn-actions>button.primary{padding:8px 18px}
.turn-actions>button:disabled{filter:grayscale(.6)}
#app .readiness{display:inline-flex;align-items:center;gap:6px;margin:0;padding:3px 6px 3px 10px;border-radius:99px;border:0;background:#0c1014;box-shadow:inset 0 0 0 1px #222b34;transition:box-shadow .25s,background .25s}
#app .readiness label{font-size:12px;gap:8px;color:var(--muted)}
#app .readiness:has(input:checked) label{color:var(--ok)}
#app .readiness input{width:32px;height:18px;padding:2px;border-radius:99px;background:#151b21;border:0;box-shadow:inset 0 0 0 1px #2b3540;margin:0}
#app .readiness input:before{width:14px;height:14px;transition:transform .2s var(--ease),background .2s}
#app .readiness input:checked{background:#1d3b2a;box-shadow:inset 0 0 0 1px var(--ok)}
#app .readiness input:checked:before{transform:translateX(14px)}
#app .readiness small{margin:0;font-size:10.5px}
#app .readiness.changed{background:color-mix(in srgb,var(--accent2) 10%,#0c1014);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent2) 60%,transparent)}

/* Tool tray: side actions as pills; each opens a floating drawer above the panel.
   Drawers are fixed-positioned so the scrolling panel cannot clip them; --pop-* is set in index.html. */
.tools{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto;position:static}
.turn-actions{position:relative}
.tool>summary{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:99px;list-style:none;cursor:pointer;background:#0c1014;box-shadow:inset 0 0 0 1px #242d36;color:#a9b4be;font-size:12px;white-space:nowrap;user-select:none;transition:color .2s,box-shadow .2s,background .2s}
.tool>summary::-webkit-details-marker{display:none}
.tool>summary .icon{font-size:14px}
.tool>summary:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--accent)}
.tool[open]>summary{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,#0c1014);box-shadow:inset 0 0 0 1px var(--accent)}
.tool-whisper>summary .icon{color:var(--priv)}
.tool-claim>summary .icon{color:#b7a6f4}
.tool-mo>summary .icon{color:#a2e1cc}
.tool-oracle>summary .icon{color:#f6d38b}
.tool.danger>summary .icon{color:var(--danger)}
.tool-badge{display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:#ffffff12;font:700 10px var(--mono);color:var(--text)}
.tool-panel{position:fixed;right:var(--pop-right,18px);bottom:calc(var(--pop-bottom,0px) + 10px);z-index:30;width:min(520px,calc(100vw - 32px));max-height:52vh;overflow:auto;padding:12px;border-radius:12px;background:#161c23;box-shadow:0 18px 50px -12px #000,0 0 0 1px #2b3540;display:flex;flex-direction:column;gap:9px;animation:pop-in .2s var(--ease)}
.tool-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.tool-row small,.tool-panel>small{color:var(--muted);font-size:11px}
.tool-note{margin:0;font-size:12px;line-height:1.5;color:#a9b4be}
.tool-panel textarea{min-height:60px;border-radius:8px;background:#0b0e12}
.tool-panel select{max-width:100%;border-radius:8px}
.tool-mo.mo-consult{margin:0;border:0;padding:0}
#app .mo-consult summary{color:#a9b4be}

/* Portrait pickers for players and roles. */
.picker{display:flex;flex-wrap:wrap;gap:6px}
.picker .pick{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:3px;width:74px;padding:6px 4px 5px;border-radius:10px;border:0;background:#0c1014;box-shadow:inset 0 0 0 1px #212a33;color:var(--muted);font-size:11px;cursor:pointer;transition:transform .15s var(--ease),box-shadow .2s,background .2s,color .2s}
.picker .pick span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.picker .pick:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--name,var(--accent)) 70%,transparent);color:var(--text)}
.picker .pick[aria-checked=true],.picker.multi .pick:has(input:checked){color:var(--text);background:color-mix(in srgb,var(--name,var(--accent)) 14%,#0c1014);box-shadow:inset 0 0 0 2px var(--name,var(--accent)),0 6px 18px -8px var(--name,var(--accent))}
.picker .pick[aria-checked=true] span,.picker.multi .pick:has(input:checked) span{color:var(--name,var(--text))}
.picker .pick[aria-checked=true]:after,.picker.multi .pick:has(input:checked):after{content:"";position:absolute;top:4px;right:4px;width:14px;height:14px;border-radius:50%;background:var(--name,var(--accent)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0d10' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/10px no-repeat;animation:chip-in .2s var(--ease)}
.picker .pick[data-alignment]{--name:var(--alignment)}
.pick-art{width:44px;height:44px;border-radius:8px;object-fit:contain}
.pick-glyph{display:grid;place-items:center;color:var(--muted);font-size:20px;background:#ffffff06}
.pick-none{--name:#8795a1}
.picker.multi input{position:absolute;opacity:0;pointer-events:none}
.picker .pick:focus-visible,.picker.multi .pick:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
#action>.picker{margin-bottom:9px}
.extra{display:flex;flex-direction:column;gap:6px;margin-top:9px}
.extra-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text)}
.extra-label small{color:var(--muted)}
.toggle-chip{display:inline-flex;align-items:center;gap:7px;margin-top:9px;padding:6px 12px;border-radius:99px;background:#0c1014;box-shadow:inset 0 0 0 1px #242d36;font-size:12px;cursor:pointer}
.toggle-chip:has(input:checked){color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.toggle-chip input{accent-color:var(--accent);margin:0}

/* Vote: the nominee faces you; two big, unambiguous choices. */
.vote-stage{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.vote-nominee{display:flex;align-items:center;gap:10px}
.vote-nominee img{width:64px;height:64px;border-radius:12px;background:radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--name) 22%,transparent),transparent 70%)}
.vote-nominee strong{font:700 15px var(--mono);color:var(--name)}
.vote-buttons{display:flex;gap:10px;flex-wrap:wrap}
.vote-buttons button{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:12px;font-size:15px;font-weight:600;transition:transform .15s var(--ease),box-shadow .2s}
.vote-buttons button .icon{font-size:19px}
.vote-buttons button:hover{transform:translateY(-2px)}
.vote-buttons .vote-yes:hover{box-shadow:0 8px 24px -10px var(--danger)}
.vote-buttons .vote-no:hover{box-shadow:0 8px 24px -10px var(--ok)}
.decision-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.decide{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px;border-radius:12px;text-align:left;transition:transform .15s var(--ease)}
.decide .icon{font-size:22px;margin-bottom:4px}
.decide strong{font-size:14px}
.decide small{font-size:12px;opacity:.8;font-weight:400}
.decide:hover{transform:translateY(-2px)}

/* Waiting on others. */
#app .processing-status{gap:10px;font-size:12.5px;color:#a9b4be}
.processing-roster{gap:5px}
#app .processing-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 2px;border:0;border-radius:99px;background:#0c1014;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent2) 45%,transparent);font:600 11px var(--mono)}
.processing-chip img{width:20px;height:20px;border-radius:50%;background:#ffffff08}
.thinking-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#a9b4be}
.thinking-row img{width:26px;height:26px;border-radius:50%;background:#ffffff08}
.game-over-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.game-over-row.won .turn-glyph{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,#0c1014);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 40%,transparent)}
.game-over-row.lost .turn-glyph{color:var(--danger);background:color-mix(in srgb,var(--danger) 13%,#0c1014);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 40%,transparent)}
.game-over-row .turn-title small{white-space:normal}

/* ---------------------------------------------------------------- dialogue popup */
#robot-dialogue .dialogue-copy>button{display:flex;width:fit-content;align-items:center;gap:6px;margin-left:auto;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
@media (prefers-reduced-motion:no-preference){#robot-dialogue .dialogue-copy>button:after{display:inline-block;animation:nudge 1.4s ease-in-out infinite}}
@keyframes nudge{50%{transform:translateY(3px)}}

/* ---------------------------------------------------------------- game over */
.game-over-head{display:flex;align-items:center;gap:14px}
.game-over-head>.icon{font-size:40px}
.game-over.won .game-over-head{color:var(--ok)}.game-over.lost .game-over-head{color:var(--danger)}
.game-over-head h2{margin:0;letter-spacing:.08em}
.game-over-head p{margin:4px 0 0;color:var(--text)}
.game-over-fate{display:flex;align-items:center;gap:8px;color:var(--muted)}
.reveal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin:14px 0 6px}
.reveal-card{position:relative;display:flex;align-items:center;gap:9px;padding:7px 10px 7px 7px;border-radius:10px;background:#0c1014;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--alignment,#2b3540) 55%,transparent);animation:chip-in .35s var(--ease) both}
.reveal-card:nth-child(2){animation-delay:.04s}.reveal-card:nth-child(3){animation-delay:.08s}.reveal-card:nth-child(4){animation-delay:.12s}.reveal-card:nth-child(5){animation-delay:.16s}.reveal-card:nth-child(6){animation-delay:.2s}.reveal-card:nth-child(n+7){animation-delay:.24s}
.reveal-card.you{box-shadow:inset 0 0 0 2px var(--you)}
.reveal-card img{width:44px;height:44px;flex:none}
.reveal-card.dead img{opacity:.55;filter:grayscale(.5)}
.reveal-card>div{min-width:0;display:flex;flex-direction:column}
.reveal-card strong{font:700 12px var(--mono)}
.reveal-role{font-size:12px;color:var(--alignment,var(--text))}
.reveal-card small{font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reveal-result{margin-left:auto;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;flex:none;color:var(--muted);background:#ffffff08}
.reveal-result.won{color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,transparent)}
.reveal-result.lost{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}
.game-over-stats{font-size:12px}

/* ---------------------------------------------------------------- narrow screens */
@media (max-width:1150px){
  .track-step{width:16px}
  .track-step+.track-step:before{width:6px}
}
@media (max-width:900px){
  .track-steps{display:none}
}
@media (max-width:760px){
  .phase-track{gap:6px;margin-left:0}
  .track-now{height:24px}
  .track-round{padding:0 8px;font-size:10.5px}
  .track-stage{padding:0 9px 0 8px;font-size:11px}
  .track-stage:before{top:6px;bottom:6px}
  .track-now:has(.track-stage) .track-round .icon{display:none}
  .track-alive{font-size:11px}
  #app.ingame header h1{display:none}
  #app.ingame aside{display:block;padding:6px 8px}
  #app.ingame .side-head{margin-bottom:5px}
  #app.ingame .you-dock{display:none}
  #app.info-open aside#left .you-dock{display:flex;margin:12px 0 0;border:1px solid var(--card-edge);border-radius:12px}
  #app.ingame #seats{flex-direction:row}
  #app #seats .portrait-seat{flex:0 0 68px;width:68px;min-height:0}
  #app #seats .portrait-seat .seat-art{width:42px;height:42px}
  #app #seats .seat-role{display:none}
  #app #seats .you-tag{display:none}
  #app #seats .seat-name{justify-content:center}
  #app #seats .portrait-seat .seat-activity{justify-content:center;font-size:8px}
  #app #seats .portrait-seat .seat-activity:before{width:5px;height:5px}
  .seat-num{min-width:14px;height:14px;font-size:8.5px}
  #app #action{padding:8px 10px}
  .turn-head{margin-bottom:7px}
  .turn-glyph{width:28px;height:28px}
  .turn-title strong{font-size:13.5px}
  .turn-chips{display:none}
  .tools{margin-left:0;width:100%}
  .tool-panel{position:static;width:100%;margin-top:8px;box-shadow:0 0 0 1px #2b3540;max-height:none}
  .tool[open]{flex-basis:100%}
  .picker .pick{width:62px}
  .pick-art{width:36px;height:36px}
  .vote-buttons{width:100%}
  .vote-buttons button{flex:1;justify-content:center;padding:11px 12px}
  .turn-info-body{position:fixed;left:12px;right:12px;bottom:auto;top:60px;width:auto}
  #record .record-phase{margin-top:16px}
}
@media (max-height:500px){#app #portrait-focus{display:none}}
@media (prefers-reduced-motion:reduce){
  #app.ingame *,#overlay *{animation:none!important;transition:none!important}
}
.portraits-still #app.ingame *,.portraits-still #overlay *{animation:none!important}

/* Record fonts: dividers and notices read as prose, not terminal output. */
#record .ev.phase,#record .ev.block,#record .ev.stage{font-family:var(--sans)}
.record-phase[data-environment=table] .phase-rule{color:var(--accent)}
#record .ev.clamped{position:relative;align-items:flex-start}
#record .ev.clamped:not(.expanded) .record-event-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.more-toggle{flex:none;align-self:flex-end;margin-left:auto;padding:1px 9px;border-radius:99px;border:0;background:#ffffff0c;color:var(--muted);font-size:10.5px}
.more-toggle:hover{color:var(--text);background:#ffffff16}
#record .ev.private .priv-when{margin-right:7px}
/* Compact mode (Menu): smaller seats, no banner. */
.portraits-compact #app .portrait-seat{min-height:40px;padding-block:2px}
.portraits-compact #app .portrait-seat .seat-art{width:34px;height:34px}
.portraits-compact #app .portrait-seat .seat-role{min-height:0}
.portraits-compact .seat-num{min-width:14px;height:14px;font-size:8.5px}
/* Up to three meters: wrap into rows rather than overflow the banner. */
.focus-meters{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-content:center;max-width:min(440px,45%);gap:5px}
.meter{padding:4px 10px}
/* Speaking modes: a whisper (private) or a prompt (public, one player replies next) retints the turn. */
#action{--mode:var(--you)}
#action[data-mode=whisper]{--mode:var(--priv)}
#action[data-mode=prompt]{--mode:var(--prompt)}
#app #action.my-turn[data-mode]{background:linear-gradient(180deg,color-mix(in srgb,var(--mode) 9%,var(--panel)),var(--panel) 60%);box-shadow:inset 0 2px 0 color-mix(in srgb,var(--mode) 65%,transparent)}
#action[data-mode] .turn-glyph{color:var(--mode);background:color-mix(in srgb,var(--mode) 13%,#0c1014);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mode) 40%,transparent)}
#action[data-mode] .turn-title strong{color:var(--mode)}
#action[data-mode] .composer textarea{border-color:color-mix(in srgb,var(--mode) 40%,#212a33)}
#action[data-mode] .composer textarea:focus{border-color:color-mix(in srgb,var(--mode) 75%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--mode) 16%,transparent)}
#action[data-mode] .talk-send{background:var(--mode);border-color:var(--mode);color:#16101f}
.mode-target{display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:40%;padding:3px 3px 3px 3px;border-radius:99px;flex:none;background:color-mix(in srgb,var(--mode) 12%,#0c1014);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mode) 50%,transparent);animation:pop-in .18s var(--ease)}
.mode-target img{width:26px;height:26px;flex:none;border-radius:50%;object-fit:cover;background:#0c1014;box-shadow:0 0 0 2px var(--name,var(--mode))}
.mode-target b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--name,var(--text))}
.mode-target .mode-cancel{display:grid;place-items:center;width:24px;height:24px;flex:none;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.mode-target .mode-cancel:hover{color:var(--text);background:#ffffff14}
.tool-prompt>summary .icon{color:var(--prompt)}
#action[data-mode] .tool.active>summary{color:var(--text);background:color-mix(in srgb,var(--mode) 12%,#0c1014);box-shadow:inset 0 0 0 1px var(--mode)}
#action [hidden]{display:none!important}
.juggle-rows { display: grid; gap: .65rem; margin: .7rem 0; }
.juggle-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; gap: .5rem; align-items: end; }
.juggle-row label, .violet-night label { display: grid; gap: .25rem; min-width: 0; font-size: .8rem; }
.juggle-row select, .violet-night select { width: 100%; min-width: 0; }
.violet-night { display: grid; gap: .75rem; margin: .8rem 0; }
@media(max-width: 600px) { .juggle-row { grid-template-columns: minmax(0, 1fr) auto; } .juggle-row label:first-child { grid-column: 1 / -1; } }

/* Phone hierarchy mirrors the desktop: navigation, table, current turn, record,
   then your actions. Keep each region compact without dropping game context. */
@media (max-width:760px){
  #app.ingame{height:100dvh;grid-template-rows:88px auto minmax(0,1fr)}
  #app.ingame header{display:grid;grid-template-columns:32px minmax(0,1fr) auto auto auto;grid-template-rows:40px 32px;gap:4px 8px;padding:6px 12px}
  #app.ingame header h1{display:block;grid-column:2;grid-row:1;font-size:12px;letter-spacing:.1em}
  #app.ingame .game-logo{grid-column:1;grid-row:1}
  #app.ingame #btnInfo{grid-column:3;grid-row:1}
  #app.ingame #btnNotebookTop{grid-column:4;grid-row:1;width:36px;height:36px}
  #app.ingame #btnMenu{grid-column:5;grid-row:1}
  #app.ingame header button{min-height:36px;padding:6px 10px}
  #app.ingame #btnDebug{display:none}
  #app.ingame .phase-track{grid-column:1/5;grid-row:2;gap:10px;margin:0}
  #app.ingame header:not(:has(#timer.on)) .phase-track{grid-column:1/-1}
  #app.ingame #timer{grid-column:5;grid-row:2;justify-self:end;padding:4px 7px;font-size:12px}
  #app.ingame .track-now{height:28px}
  #app.ingame .track-round{font-size:11px}
  #app.ingame .track-stage{font-size:12px}
  #app.ingame .track-alive{margin-left:auto}

  #app.ingame aside#left{padding:6px 12px 8px}
  #app.ingame .side-head{margin-bottom:6px}
  #app.ingame .game-modifiers{margin:0 0 6px}
  #app.ingame .game-modifiers:has(.no-modifiers){display:none}
  #app.ingame #seats{gap:6px;padding:2px 0;scrollbar-width:thin}
  #app.ingame #seats::-webkit-scrollbar{display:block;height:3px}
  #app.ingame #seats .portrait-seat{flex:0 0 84px;width:84px;gap:3px;padding:4px;align-items:center}
  #app.ingame #seats .portrait-seat.round-first,#app.ingame #seats .portrait-seat.round-last{margin-block:0}
  #app.ingame #seats .portrait-seat .seat-art{width:36px;height:36px}
  #app.ingame #seats .seat-role{display:block;min-height:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #app.ingame #seats .seat-role:empty{display:none}
  #app.ingame #seats .seat-truth,#app.ingame #seats .seat-claim{font-size:10px}
  #app.ingame #seats .seat-role span+span{margin-left:4px}
  #app.info-open aside#left{top:88px;padding:12px 12px calc(16px + env(safe-area-inset-bottom))}

  #app.ingame #portrait-focus:not([hidden]){display:flex;flex-wrap:wrap;height:auto;min-height:56px;padding:7px 12px;gap:4px 8px}
  #app.ingame .focus-art{width:40px;height:40px}
  #app.ingame .focus-head{gap:6px;flex-wrap:wrap}
  #app.ingame .focus-head strong{font-size:12px!important}
  #app.ingame .portrait-badge{font-size:9px;padding:2px 6px}
  #app.ingame .portrait-copy p{margin:2px 0 0;font-size:11px}
  #app.ingame .portrait-copy small{display:none}
  #app.ingame .focus-meters{width:100%;max-width:none;justify-content:flex-start;gap:4px}
  #app.ingame .focus-meters:empty{display:none}
  #app.ingame .meter{max-width:100%;padding:3px 8px;font-size:10.5px;gap:6px}
  #app.ingame .meter-dots{gap:3px}
  #app.ingame .meter-dots i{width:7px;height:7px}
  #app.ingame #record{padding:8px 12px 12px}
  #app.ingame #record .record-dialogue .msg{font-size:13px;line-height:1.6}

  #app.ingame #action{flex-shrink:0;max-height:52dvh;padding:10px 12px max(10px,env(safe-area-inset-bottom))}
  #app.ingame .composer textarea{font-size:16px;min-height:70px}
  #app.ingame .turn-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  #app.ingame .turn-actions>button{min-height:40px;justify-content:center;padding:8px 10px}
  #app.ingame .turn-actions>.talk-send:has(+[hidden]){grid-column:1/-1}
  #app.ingame .readiness{grid-column:1/-1;min-height:36px;border-radius:8px;padding:4px 8px;flex-wrap:wrap}
  #app.ingame .readiness label{flex:1;min-height:28px}
  #app.ingame .tools{grid-column:1/-1;width:100%;margin:0;padding-top:8px;border-top:1px solid var(--line);gap:6px}
  #app.ingame .tool{flex:1 0 auto}
  #app.ingame .tool>summary{display:flex;justify-content:center;height:36px;padding:0 8px;border-radius:8px;font-size:11px;gap:5px}
  #app.ingame .tool[open]{flex-basis:auto}
  #app.ingame .tool-panel{position:fixed;left:12px;right:12px;bottom:max(60px,calc(env(safe-area-inset-bottom) + 52px));width:auto;max-width:none;max-height:55dvh;margin:0;overscroll-behavior:contain;box-shadow:0 12px 40px #0009,0 0 0 1px #34424f}
  #app.ingame .tool-row select{min-width:0;max-width:100%}
  #app.ingame .turn-info-body{top:96px}
  #app.ingame .mode-target{max-width:45%}
}
/* Short viewports (including the software keyboard) prioritize reading and input. */
@media (max-width:760px) and (max-height:600px){
  #app.ingame{grid-template-rows:44px auto minmax(0,1fr)}
  #app.ingame header{grid-template-rows:32px;padding-block:6px}
  #app.ingame header h1{display:none}
  #app.ingame .phase-track,#app.ingame header:not(:has(#timer.on)) .phase-track{grid-column:2;grid-row:1}
  #app.ingame .track-alive{display:none}
  #app.ingame #timer{grid-column:3;grid-row:1}
  #app.ingame header:has(#timer.on) #btnInfo{display:none}
  #app.ingame .track-round{padding-inline:6px}
  #app.ingame .track-stage{padding-inline:6px;font-size:11px}
  #app.ingame .side-head,#app.ingame .game-modifiers{display:none}
  #app.ingame #seats .portrait-seat{flex-direction:row;flex-basis:110px;width:110px;min-height:38px;text-align:left}
  #app.ingame #seats .portrait-seat .seat-art{width:28px;height:28px;flex:none}
  #app.ingame #seats .seat-name{justify-content:flex-start}
  #app.ingame #portrait-focus:not([hidden]){display:none}
  #app.ingame #action{max-height:50dvh}
  #app.info-open aside#left{top:44px}
  #app.info-open .side-head{display:flex}
  #app.ingame .turn-info-body{top:52px}
}