/* A fixed 1672×941 scene coordinate system keeps holes and tokens registered. */
body.in-game { background:#111621; overflow-x:hidden; }
body.in-game > header,body.in-game > .world { display:none; }
body.in-game main { max-width:none; padding:0; min-height:100dvh; display:grid; place-items:center; }
#game { position:relative; width:min(100vw,177.68dvh); aspect-ratio:1672/941; background:url('assets/game-arena.png') center/100% 100% no-repeat; animation:none; font-family:'Barlow Condensed',sans-serif; }
#game[hidden] { display:none; }
#game .arena,#game .board-area { display:contents; }
#game .board { position:absolute; left:33.53%; top:25.93%; width:33.01%; height:46.44%; display:grid; padding:0; gap:0; border:0; border-radius:0; box-shadow:none; background:none; overflow:visible; }
#game .column { position:relative; display:grid; grid-template-rows:repeat(6,1fr); gap:0; border-radius:0; opacity:1; }
#game .column:disabled { opacity:1; cursor:default; }
#game .cell { width:100%; height:100%; aspect-ratio:auto; background:none; box-shadow:none; border-radius:0; }
#game .disc { inset:12% 14%; box-shadow:inset 0 3px 1px #ffffff55,inset 0 -4px 1px #0006,0 2px 3px #0008; }
#game .disc.coral { background:#e92332; }#game .disc.gold { background:#ffcb26; }
#game .column-marker { position:absolute; top:-8%; width:100%; height:auto; text-align:center; font-size:clamp(15px,2vw,28px); color:#fff; opacity:0; }
#game .column:not(:disabled):hover .column-marker,#game .column:focus-visible .column-marker { opacity:1; }
#game .column:focus-visible { outline:2px solid #fff0c4; }
#game .player-panel { display:none; }
#game .turn-message,#game .rules,#mode-label { display:none; }
#game .game-heading { position:absolute; left:2%; right:2%; bottom:2%; display:flex; justify-content:space-between; margin:0; }
#game .quiet { font-family:inherit; background:#141923; border:1px solid #566077; font-size:16px; }
#game .hint { position:absolute; bottom:12%; left:30%; right:30%; margin:0; text-align:center; }
#game #cancel { position:absolute; bottom:7%; left:46%; }
.match-hud { position:absolute; top:2.5%; left:27%; width:46%; height:9%; display:grid; grid-template-columns:1fr 20% 1fr; color:#f6f0e8; background:#141923; border:1px solid #566077; border-radius:5px; }
.hud-card { min-width:0; display:flex; align-items:center; gap:12px; padding:7px 12px; background:var(--banner); border-left:5px solid #d52639; }
.hud-card:last-of-type { border-left:0; border-right:5px solid #e3ae35; }
.hud-card.active { box-shadow:inset 0 -3px #ffc64c; }
.hud-avatar { width:22%; aspect-ratio:1; object-fit:cover; border-radius:3px; }
.hud-card > div { min-width:0; }
.hud-name { display:block; font-size:clamp(14px,1.5vw,25px); text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hud-title { display:block; color:#c0cad8; font-size:clamp(10px,1vw,16px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#hud-score { display:grid; place-items:center; font-size:clamp(22px,2.8vw,42px); border-inline:1px solid #566077; }
#hud-turn { position:absolute; top:100%; left:50%; transform:translateX(-50%); background:#141923; border:1px solid #566077; border-radius:4px; padding:5px 15px; margin:7px 0 0; white-space:nowrap; font-size:clamp(12px,1.1vw,19px); }
body.large-board #game .board { background:#b68a55; border:5px solid #822c25; grid-template-columns:repeat(9,1fr); }
body.large-board #game .column { grid-template-rows:repeat(8,1fr); }
body.large-board #game .cell { border-radius:50%; background:#30282b; }
#game:has(.power-controls:not([hidden])) .player-panel { display:block; position:absolute; width:15%; padding:8px; margin:0; top:45%; left:3%; }
#game:has(.power-controls:not([hidden])) #player-2 { left:auto; right:3%; }
#game .player-panel > :not(.power-controls) { display:none; }
.profile-fields select { width:100%; margin:8px 0; padding:8px; color:#fff; background:#1b2330; }
@media(max-width:650px) and (orientation:portrait) {
 body.in-game main { overflow:hidden; }
 #game { width:190vw; max-width:none; }
 .match-hud { left:26%; width:48%; top:3%; height:11%; }
 .hud-card { padding:4px; gap:5px; }.hud-avatar { width:25%; }
 #game .game-heading { left:26%; right:26%; bottom:1%; }
 #game .quiet { font-size:14px; }
 #game .player-panel { top:80%!important; left:28%!important; width:20%!important; }#game #player-2 { left:auto!important; right:28%!important; }
}

.hud-card { background-size:cover; background-position:center; }.hud-name,.hud-title { text-shadow:0 1px 3px #000,0 0 5px #000; }
body.in-game main { display:flex; justify-content:center; align-items:center; width:100%; }
#game { flex-shrink:0; }

/* Mirror player two; center each avatar/text group inside its banner. */
.hud-card { justify-content:center; align-items:center; }
#hud-player-2 { flex-direction:row-reverse; text-align:right; }
.hud-avatar { flex-shrink:0; align-self:center; object-position:center; }
body.training-session #game .game-heading { display:none; }
#pause-touch { display:none; }
@media(pointer:coarse) { body.training-session #pause-touch { display:block; position:absolute; z-index:5; right:27%; bottom:2%; background:#141923; color:#eee; border:1px solid #566077; border-radius:4px; padding:8px 12px; } }
/* Frameless pause menu, matching the flat mode selection overlay. */
#pause-dialog { width:420px; max-width:calc(100vw - 48px); padding:8px; border:0; border-radius:0; background:transparent; box-shadow:none; color:#fff5df; font-family:'Barlow Condensed',sans-serif; text-align:left; }
#pause-dialog::backdrop { background:#191c2338; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
#pause-title { margin:0 0 20px; font-size:clamp(34px,4vw,48px); font-weight:700; line-height:1; text-transform:uppercase; }
#pause-dialog button { display:block; width:100%; min-height:64px; margin-top:12px; padding:14px 24px; border:0; border-radius:2px; background:transparent; box-shadow:none; color:#fff5df; font:600 clamp(20px,1.65vw,28px) 'Barlow Condensed',sans-serif; text-align:center; text-transform:uppercase; cursor:pointer; transition:background-color .16s,color .16s; }
#pause-dialog #pause-resume { border-color:transparent; background:#fff5df; color:#151922; }
#pause-dialog button:hover { background:#fff5df14; color:#fff; filter:none; }
#pause-dialog #pause-resume:hover { background:#e52b3f; color:#fff; }
#pause-dialog button:focus-visible { outline:none; background:#fff5df24; color:#fff; }
#pause-dialog #pause-resume:focus-visible { outline:none; background:#e9dfcb; color:#151922; }
#pause-dialog #pause-resume:hover { background:#e52b3f; color:#fff; }
#pause-dialog button:active { background:#fff5df24; }
#pause-dialog #pause-resume:active { background:#e9dfcb; color:#151922; }
@media(max-height:450px) { #pause-title { font-size:32px; margin-bottom:12px; } #pause-dialog button { min-height:48px; padding:8px 20px; margin-top:8px; } }
.game-paused #game *, .game-paused #confetti * { animation-play-state:paused!important; }
/* Textured counters have the same geometry as the map holes, with inset rims. */
#game .disc.coral,#game .disc.gold { inset:10% 12%; background:transparent url('assets/game-counters.png') 0 50% / 200% 100% no-repeat; box-shadow:none; }
#game .disc.gold { background-position:100% 50%; }
#game .disc::after { display:none; }
#game .column:not(:disabled):hover { background:transparent; }
#game .column:not(:disabled):hover .cell:empty { box-shadow:inset 0 0 0 1px #ffe8b02a; border-radius:50%; }
/* Plain skin-ready faces: no rim, texture or decorative ring. */
#game .disc.coral,#game .disc.gold { inset:12% 14%; background-image:none; box-shadow:none; border:0; }
#game .disc.coral { background-color:#e92332; }
#game .disc.gold { background-color:#ffcc23; }
#game .column:not(:disabled):hover .cell:empty { box-shadow:none; }

/* Outer-edge alignment, mirrored on player two. */
.hud-card { justify-content:flex-start; }
#hud-player-2 { flex-direction:row-reverse; justify-content:flex-start; text-align:right; }
/* Layer order: clean scenery → moving counters → opaque board with alpha holes. */
#game { background-image:url('assets/game-arena-empty.png'); }
#game .board-front { position:absolute; left:14%; top:16%; width:72%; height:72%; z-index:2; pointer-events:none; }
#game .board { z-index:1; left:33.83%; top:26.36%; width:32.48%; height:45.55%; }
#game .disc.coral,#game .disc.gold { inset:6% 9%; }
#game .match-hud,#game .game-heading,#game .hint,#game #cancel,#game .player-panel { z-index:3; }
body.large-board #game .board-front { display:none; }
/* Player identity is carried by the banner, without colored edge strips. */
.hud-card,#hud-player-1,#hud-player-2 { border-left:0; border-right:0; }

/* Same identity card as the match HUD, anchored above the menu buttons. */
.menu-profile.hud-card {
 position:absolute; bottom:calc(100% - 30.5vh + 16px); left:0;
 width:100%; height:clamp(62px,7.5vw,90px); box-sizing:border-box;
 border:1px solid #566077; border-radius:5px; color:#f6f0e8;
 font-family:'Barlow Condensed',sans-serif; text-align:left;
 box-shadow:0 4px 12px #0005;
}
.menu-profile .hud-identity { min-width:0; }
.menu-profile .hud-avatar { width:22%; max-height:100%; }
@media(max-width:700px) {
 .menu-profile.hud-card { bottom:calc(100% - 27vh + 12px); padding:7px 10px; gap:10px; }
 .menu-profile .hud-name { font-size:18px; }
 .menu-profile .hud-title { font-size:13px; }
}

/* A bright comet follows the turn badge perimeter once per ten-second turn. */
#hud-turn.turn-timed { border-color:#ffdb65; padding:9px 17px; box-shadow:0 0 13px #ffd44566; isolation:isolate; }
#hud-turn.turn-timed::before { content:''; position:absolute; inset:-4px; border-radius:7px; padding:4px; background:conic-gradient(from var(--turn-angle,0deg),#fff8ca 0deg,#ffd445 24deg,#ffb32177 65deg,transparent 115deg,transparent 340deg,#fff8ca 360deg); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; pointer-events:none; filter:drop-shadow(0 0 5px #ffdc5b); }
#hud-turn.turn-timed::after { content:attr(data-seconds); display:inline-block; min-width:30px; margin-left:14px; padding-left:12px; border-left:1px solid #ffdb6577; color:#ffe386; font-weight:700; font-variant-numeric:tabular-nums; }
#hud-turn.turn-urgent { border-color:#ff6549; box-shadow:0 0 18px #ff452688; }
#hud-turn.turn-urgent::before { background:conic-gradient(from var(--turn-angle,0deg),#fff4dc,#ff5633 35deg,transparent 120deg,transparent 335deg,#fff4dc); }

/* Citadelle shares the menu's distant clouds and slow 200-second drift.
   This scenery layer never changes the board's registered coordinates. */
.citadel-scenery { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.citadel-sky { position:absolute; inset:0 0 64%; overflow:hidden; background:linear-gradient(#297bd6,#72b5f4); }
.citadel-cloud-track { position:absolute; left:0; top:0; width:200%; height:277.778%; display:flex; animation:citadel-cloud-drift 200s linear infinite; animation-delay:-55s; will-change:transform; }
.citadel-cloud-track img { flex:0 0 50%; width:50%; height:100%; max-width:none; object-fit:contain; }
.citadel-buildings { position:absolute; inset:0; width:100%; height:100%; max-width:none; }
@keyframes citadel-cloud-drift { from { transform:translateX(-50%); } to { transform:translateX(0); } }
body:not(.in-game) .citadel-cloud-track, body.game-paused .citadel-cloud-track, .reduce-motion .citadel-cloud-track { animation-play-state:paused; }
@media(prefers-reduced-motion:reduce) { .citadel-cloud-track { animation:none; transform:translateX(-25%); } }

/* Only distant birds animate alongside the clouds. */
.citadel-birds { position:absolute; width:100%; height:0; animation:menu-bird-pass 22s linear forwards; }
.life-paused .citadel-birds,.life-paused .menu-bird svg { animation-play-state:paused; }
.reduce-motion .citadel-birds { display:none; }
@media(prefers-reduced-motion:reduce) { .citadel-birds { display:none; } }

/* Grounded in scene coordinates, beneath the board and all playable tokens. */
#game::after {
 content:''; position:absolute; inset:0; pointer-events:none;
 background:
  radial-gradient(ellipse 6% 1.15% at 29.5% 79.4%,#17121bd9 0%,#17121b99 35%,transparent 100%),
  radial-gradient(ellipse 6% 1.15% at 70.5% 79.4%,#17121bd9 0%,#17121b99 35%,transparent 100%),
  radial-gradient(ellipse 29% 3.8% at 49% 80%,#201a2a88 0%,#201a2a55 45%,transparent 100%);
}
body.large-board #game::after { display:none; }
/* Flat continuous match ribbon; identity artwork remains player-controlled. */
#game .match-hud {
 --score-width:clamp(64px,8vw,120px);
 width:calc(var(--profile-width) * 2 + var(--score-width));
 grid-template-columns:var(--profile-width) var(--score-width) var(--profile-width);
 border:0; border-radius:2px; background:#191c23; box-shadow:none; color:#fff5df;
}
#game .match-hud .hud-card { border:0; border-radius:0; box-shadow:none; }
#game .match-hud .hud-name,#game .match-hud .hud-title { text-shadow:none; }
#game .match-hud .hud-title { color:#e1d9ca; }
#game #hud-score { border:0; background:#191c23; color:#fff5df; font-weight:700; font-size:clamp(28px,3.5vw,50px); font-variant-numeric:tabular-nums; }
#game #hud-turn {
 background:#fff5df; color:#191c23; border:0; border-radius:2px;
 margin-top:9px; padding:10px 18px; box-shadow:none; font-weight:600;
 font-size:clamp(14px,1.3vw,20px); text-shadow:none;
 max-width:min(85vw,540px); white-space:normal; text-align:center;
}
#game #hud-turn.turn-timed { isolation:isolate; box-shadow:none; padding:10px 18px; }
#game #hud-turn.turn-timed::before {
 inset:-3px; padding:3px; border-radius:3px; filter:none;
 background:conic-gradient(from var(--turn-angle,0deg),#ee293e 0deg,#ee293e 28deg,transparent 110deg,transparent 337deg,#ee293e 360deg);
}
#game #hud-turn.turn-timed::after { border-left:1px solid #191c2333; color:#191c23; margin-left:10px; padding-left:10px; }
#game #hud-turn.turn-urgent { background:#ffe8dd; box-shadow:none; }
@media(max-width:700px) {
 #game .match-hud { --score-width:52px; }
 #game #hud-score { font-size:28px; }
 #game #hud-turn { margin-top:7px; }
}

/* Fill every viewport with scenery while the playable board keeps its ratio. */
body.in-game { overflow:hidden; }
body.in-game main { height:100dvh; min-height:0; overflow:hidden; }
#game { background:none; }
#game .citadel-scenery {
 position:fixed; inset:auto; left:50%; top:50%;
 width:max(100vw,177.68331562dvh);
 height:max(100dvh,56.27990431vw);
 transform:translate(-50%,-50%);
}
#game::after { z-index:0; }

/* Scale the complete arena together so the feet stay on the ground. */
#game { width:max(100vw,177.68331562dvh); max-width:none; }
#game .match-hud { top:max(2.5%,calc(50% - 47.5dvh)); }

#pause-dialog #pause-quit.is-forfeit { color:#ff858c; }
#pause-dialog #pause-quit.is-forfeit:hover { background:#bc263a; color:#fff; }
#settings-dialog [role=tab][hidden] { display:none; }
@media(pointer:coarse){body.in-game #pause-touch{display:block;position:absolute;z-index:5;right:27%;bottom:2%;background:#141923;color:#eee;border:1px solid #566077;border-radius:4px;padding:8px 12px;}}