:root { font-size:15px; --ink:#142e35; --paper:#f7eaca; --gold:#f0c66e; --jade:#215562; background:#0c222b; }
header { padding:5px 16px; background:#0a1d25; }
.brand h1 { font-size:2.05rem; transform:none; letter-spacing:-1.5px; text-shadow:1px 2px 0 #26758a; }
.brand h1 small { display:block; font-size:.58em; font-weight:700; letter-spacing:0; line-height:1.2; }
.brand>span { font-size:.92rem; }
nav>button { font-size:.78rem; }
.language { width:44px; }
#audio { padding:2px 16px; gap:4px 16px; }
.channel { flex:0 1 235px; min-width:160px; }
.channel button { font-size:.76rem; }
.channel input { width:105px; }
.audio-info { font-size:.72rem; }
.entry-paper h2 { font-size:clamp(2rem,3vw,3rem); max-width:16ch; }
.cover { width:min(42%,290px); }

body.playing { display:grid; grid-template-rows:auto auto minmax(0,1fr); height:100dvh; overflow:hidden; }
.playing main { height:100%; min-height:0; max-width:none; }
.playing .table { height:100%; min-height:0; display:grid; grid-template-rows:42px minmax(0,1fr) auto; padding:0 12px 12px; }
.playing .table-top { min-height:0; padding:0; gap:10px; }
#round-label { gap:12px; }
#round-label>strong { font-size:1.15rem; }
#round-label>span { font-size:.74rem; color:#c1d5ce; }
#round-label .duel-mode { padding-left:12px; border-left:1px solid #547278; max-width:none; }
.table-links { align-items:center; gap:6px; }
.playing .table-links button { min-height:34px; padding:6px 11px; font-size:.74rem; }
.room-code { font-size:.75rem; font-weight:bold; color:#d5e4da; letter-spacing:1px; margin-right:6px; }
.playing .play-layout { min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:12px; margin:0; }
.playing .map-area { min-width:0; min-height:0; display:grid; grid-template-rows:44px minmax(0,1fr) auto; border:1px solid #65818a; background:#0b2632; }
.playing .map-tools { min-height:0; padding:0 8px 0 13px; gap:8px; background:#143743; border-bottom:1px solid #65818a; }
.map-title { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; }
.map-title strong { font:700 1.05rem Georgia; }
.map-title span { color:#c0d4ce; font-size:.72rem; }
.playing .map-tools>div:last-child { align-items:center; gap:4px; }
.playing .map-tools button { min-height:36px; padding:5px 9px; background:transparent; font-size:.74rem; }
.playing .map-tools #zoom-in,.playing .map-tools #zoom-out { min-width:36px; font-size:1.3rem; padding:2px 8px; }
.playing #viewport { display:flex; flex-direction:column; min-width:0; min-height:0; max-height:none; width:100%; height:100%; border:0; overflow:auto; scrollbar-color:#81a3a9 #0c2833; scrollbar-width:thin; background:#0b2632; }
#board-stage { flex-shrink:0; margin:auto; }

.playing #action { display:grid; grid-template-columns:minmax(0,1fr); min-height:0; gap:6px; padding:11px 13px; border:0; border-top:3px solid #c39c50; border-radius:0; background:var(--paper); }
.action-heading { gap:5px 10px; }
.action-heading>strong { font-size:1.08rem; }
.action-heading>span { font-size:.76rem; color:#3e5655; }
.locked-dice { gap:5px; white-space:nowrap; }
.locked-dice img { width:22px; height:22px; }
.playing .action-controls { gap:7px; min-height:44px; margin:0; }
.action-controls:empty { display:none; }
.playing .action-controls>button { font-size:.8rem; }
.playing .action-controls .dice { gap:6px; }
.playing .die { width:45px; height:45px; min-width:45px; box-shadow:0 2px 0 #a58b5b; }
.spectator-dice img { width:32px; height:32px; }
.route-count { font-size:.8rem; min-width:32px; }
.playing .route-tool { width:44px; padding:4px; font-size:1.45rem; }
.playing .action-guidance { min-height:22px; gap:8px; }
.action-guidance>span { color:#3e5655; font-size:.77rem; line-height:1.35; }
.directions { gap:4px; }
.directions button { width:44px; padding:4px; font-size:1.2rem; }
@media(min-width:960px) {
  .playing #action:not([data-phase=hunterRolled]):not([data-phase=mummyMove]) { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:'heading controls' 'guidance controls'; column-gap:14px; }
  .playing #action:not([data-phase=hunterRolled]):not([data-phase=mummyMove]) .action-heading { grid-area:heading; }
  .playing #action:not([data-phase=hunterRolled]):not([data-phase=mummyMove]) .action-controls { grid-area:controls; justify-content:flex-end; }
  .playing #action:not([data-phase=hunterRolled]):not([data-phase=mummyMove]) .action-guidance { grid-area:guidance; }
}

.playing .player-area { display:grid; grid-template-columns:1fr; grid-template-rows:auto minmax(160px,1fr) auto; min-width:0; min-height:0; height:100%; gap:0; padding:6px 12px 0; border-top:3px solid #c39c50; background:var(--paper); overflow-y:auto; scrollbar-width:thin; }
#players { padding-bottom:5px; border-bottom:1px solid #ada181; }
.public-mummy,.public-hunter { min-height:49px; padding:6px 0; gap:8px; border-bottom:0; }
.public-mummy+.public-hunter,.public-hunter+.public-hunter { border-top:1px solid #c6bb9d; }
.public-mummy>img,.public-hunter>img { width:32px; height:37px; border-radius:4px; }
.public-mummy>div,.public-hunter>div:nth-child(2) { min-width:0; }
.public-mummy strong,.public-hunter strong { display:block; font-size:.8rem; overflow-wrap:anywhere; }
.public-mummy small,.public-hunter small { font-size:.66rem; color:#4d5b54; }
.public-mummy b { font-size:.9rem; }
.public-hunter.acting { background:#e8d9b3; }
.life-track { gap:4px; margin-top:4px; }
.life-track i { width:9px; height:9px; }
.life-track i.alive { background:#215562; }
.goal-backs { justify-content:flex-end; max-width:70px; }
.goal-back { width:9px; height:16px; }
.playing #goals { overflow-y:auto; min-height:0; scrollbar-width:thin; scrollbar-color:#627e78 #e4d5b0; padding:0 2px 10px; }
.goals-title { align-items:baseline; margin-top:12px; }
.goals-title h2,#goals>h2 { font-size:1.15rem; }
.goals-title b { font-size:.85rem; flex-shrink:0; }
#goals .fine { font-size:.72rem; }
#goals>p:not(.fine) { font-size:.8rem; }
.playing .goal-tray { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:5px 0; overflow:visible; }
.playing .goal-card { min-width:0; width:100%; min-height:0; flex-basis:auto; }
.playing .completed { grid-template-columns:repeat(4,minmax(0,1fr)); }
#goals>button { font-size:.8rem; }
#chronicle { grid-column:auto; margin-top:4px; border-color:#a69b7a; }
#chronicle summary { font-size:.8rem; }
#history { max-height:190px; margin:0 0 10px; font-size:.76rem; }
.playing .table:has(.result-paper) { height:auto; min-height:100%; }
.playing .table:has(.result-paper) .play-layout { height:calc(100dvh - 164px); min-height:450px; }
.playing:has(.result-paper) main { overflow-y:auto; }
.playing .result-paper .goal-tray { display:flex; flex-wrap:wrap; }
.playing .result-paper .goal-card { width:75px; flex:0 0 75px; }
.treasure-inspection>img { width:230px; max-height:58dvh; }
.entry-paper :focus-visible,.lobby-paper :focus-visible,#action :focus-visible,
.player-area :focus-visible,#dialog :focus-visible,.result-paper :focus-visible { outline-color:#215562; }

@media(min-width:1400px) {
  .playing .play-layout { grid-template-columns:minmax(0,1fr) 310px; }
  .playing .table { padding-inline:18px; }
  .playing .player-area { padding-inline:15px; }
}
@media(max-width:959px) {
  body.playing { display:block; height:auto; min-height:100dvh; overflow:auto; }
  .playing main { height:auto; }
  .playing .table { display:block; height:auto; padding:0 9px 16px; }
  .playing .table-top { min-height:46px; }
  #round-label { gap:8px; }
  #round-label .duel-mode { display:none; }
  .playing .play-layout { grid-template-columns:1fr; gap:10px; }
  .playing .map-area { display:block; }
  .playing .map-tools { min-height:48px; }
  .playing .map-tools button { min-height:44px; }
  .playing .map-tools #zoom-in,.playing .map-tools #zoom-out { min-width:44px; }
  .playing #viewport { height:clamp(330px,49dvh,530px); }
  .playing #action { position:sticky; bottom:0; }
  .playing .player-area { grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); grid-template-rows:auto auto; height:auto; padding:10px 14px 0; gap:10px 18px; }
  #players { border-bottom:0; }
  .playing #goals { overflow:visible; }
  #chronicle { grid-column:1/-1; }
  .playing .goal-tray { display:flex; flex-wrap:wrap; gap:7px; }
  .playing .goal-card { width:76px; flex:0 0 76px; }
  .playing .completed .goal-card { width:55px; flex-basis:55px; }
  .playing .table:has(.result-paper) .play-layout { height:auto; min-height:0; }
}
@media(max-width:699px) {
  header { padding:5px 8px; gap:6px; }
  .brand h1 { font-size:1.45rem; }
  nav { gap:4px; }
  nav>button { font-size:.72rem; padding:6px 8px; }
  #audio { padding:2px 8px; gap:0 8px; }
  .channel { min-width:0; gap:5px; }
  .channel button { min-width:55px; }
  .channel input { width:42px; min-width:25px; }
  .audio-info { gap:3px 5px; }
  .cover { width:170px; max-width:55%; }
  .entry-paper h2 { font-size:2rem; }
  .playing .table { padding-inline:6px; }
  .playing .table-top { min-height:52px; }
  .table-links { gap:4px; }
  .playing .table-links button { min-height:44px; max-width:87px; padding:5px 8px; font-size:.7rem; }
  .room-code { display:none; }
  #round-label { gap:6px; }
  #round-label>strong { font-size:1.05rem; }
  .playing .map-tools { padding:0 5px 0 9px; gap:5px; }
  .map-title { display:block; }
  .map-title strong { font-size:.9rem; }
  .map-title span { display:block; font-size:.64rem; }
  .playing .map-tools button { font-size:.7rem; padding:4px 7px; }
  .playing #viewport { height:clamp(320px,44dvh,420px); }
  .playing #action { padding:10px; gap:7px; }
  .action-heading>strong { font-size:1rem; }
  .action-heading>span { font-size:.7rem; }
  .locked-dice img { width:19px; height:19px; }
  .playing .action-controls { gap:6px; }
  .playing .action-controls>button { font-size:.76rem; padding:6px 9px; }
  .playing .action-controls .dice { gap:5px; }
  .playing .die { width:44px; height:44px; min-width:44px; }
  .playing .action-guidance { flex-wrap:wrap; gap:6px; }
  .action-guidance>span { font-size:.73rem; }
  .playing .player-area { display:block; padding:8px 11px 0; }
  #players { display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; border-bottom:1px solid #ada181; }
  .public-mummy,.public-hunter { flex:0 0 160px; min-height:60px; padding:5px; border:1px solid #b3a582; }
  .public-mummy>img,.public-hunter>img { width:27px; height:34px; }
  .public-mummy strong,.public-hunter strong { font-size:.72rem; }
  .public-mummy small,.public-hunter small { font-size:.61rem; }
  .public-mummy b { font-size:.78rem; }
  .goal-backs { max-width:36px; gap:2px; }
  .goal-back { width:6px; height:12px; }
  .playing .goal-tray { flex-wrap:nowrap; overflow-x:auto; padding:7px 2px 10px; scrollbar-width:thin; }
  .playing .goal-card { width:94px; flex-basis:94px; }
  .playing .completed .goal-card { width:62px; flex-basis:62px; }
  .playing .result-paper .goal-tray { flex-wrap:wrap; }
}