/* One artwork-relative cabinet. No viewport-positioned HUD or independently scaled playfield. */
body:has(> .war) { margin:0; background:#211a16; min-height:100vh; display:grid; grid-template-rows:auto 1fr; place-items:center; }
body.war-phone-landscape { min-height:0; height:var(--war-vh,100dvh); padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-sizing:border-box; overflow:hidden; }
/* Reuse the game's compact-phone detection; desktop/tablet headers remain intact. */
body.war-phone-landscape { grid-template-rows:1fr; }
body.war-phone-landscape > .site-header { display:none; }
body.war-phone-landscape .war { width:min(calc(var(--war-vw,100vw) - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((var(--war-vh,100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1672 / 941)); margin:0; }
#rotate-device { max-width:min(85vw,380px); padding:28px 22px; box-sizing:border-box; border:2px solid #b58137; border-radius:10px; background:#291b11; color:#f2dfb8; text-align:center; font-family:Arial,sans-serif; }
#rotate-device::backdrop { background:rgba(15,10,6,.88); }
#rotate-device h2 { font-size:24px; color:#e5ac4e; }
#rotate-device p { line-height:1.5; }
.rotate-phone { font-size:48px; color:#e5ac4e; }
.war { --cream:#f2dfb8; --gold:#e5ac4e; position:relative; container-type:inline-size; width:min(100%,1000px); aspect-ratio:1672/941; margin:16px auto; color:var(--cream); font-family:Arial,sans-serif; isolation:isolate; }
.war *, .war *::before,.war *::after { box-sizing:border-box; }
.war .war-arena { position:absolute; inset:0; }
.war #board { position:absolute; inset:0; touch-action:none; }
.war canvas { display:block; width:100%!important; height:100%!important; margin:0!important; }
/* Top wood panel: title in the center, score/time to either side. */
.war .war-sign { position:absolute; z-index:2; left:26%; top:3.7%; width:48%; text-align:center; pointer-events:none; }
.war .war-brand { margin:0 0 .25cqw; color:var(--gold); font-weight:900; letter-spacing:.18cqw; font-size:1.15cqw; }
.war h1 { margin:0; font-family:Georgia,serif; font-size:2.9cqw; letter-spacing:-.08cqw; text-shadow:.15cqw .2cqw #120d09; }
.war .war-stats { position:absolute; z-index:2; inset:5% 11% auto; height:11%; pointer-events:none; }
.war .war-stats>div:first-child { position:absolute; left:0; top:0; text-align:center; width:16%; }
.war .war-stats>div:last-child { position:absolute; right:0; top:0; text-align:center; width:16%; }
.war .war-stats span { display:block; font-size:1.05cqw; letter-spacing:.1cqw; }
.war .war-stats strong { font-size:3.8cqw; font-variant-numeric:tabular-nums; line-height:1.1; }
.war small { font-size:1.5cqw; }
.war .war-pace { position:absolute; left:19%; top:67%; width:62%; text-align:center; }
.war .war-pace span { display:inline; font-size:1.3cqw; font-weight:700; color:#fff0d2; letter-spacing:.04cqw; text-shadow:0 1px 2px #000; }
.war .war-pace b { display:inline; font-size:1.15cqw; color:#f7ca7c; margin-left:.7cqw; font-weight:600; text-shadow:0 1px 2px #000; }
.war .war-clock { position:absolute; z-index:2; top:16.4%; left:12%; width:76%; height:.3%; background:#463529; pointer-events:none; }
.war #time-bar { background:var(--gold); height:100%; width:100%; }
/* Bottom panel: feedback, concise scoring legend, then controls. */
.war .war-feedback { position:absolute; z-index:2; top:85%; left:8%; width:84%; text-align:center; margin:0; font-size:2cqw; line-height:1.1; font-weight:900; color:#ffe0a2; text-shadow:0 1px 2px #000; pointer-events:none; }
.war .war-legend { position:absolute; z-index:2; top:89%; left:8%; width:84%; display:grid; grid-template-columns:repeat(4,1fr); text-align:center; line-height:1.05; text-shadow:0 1px 2px #000; pointer-events:none; }
.war .war-legend b { display:block; font-size:1.5cqw; font-weight:900; }
.war .war-legend span { display:block; font-size:1.45cqw; font-weight:700; color:#fff0d8; }
.war .war-gold,.war .war-beer { color:var(--gold); } .war .war-lena { color:#ffa293; }
.war footer { position:absolute; z-index:2; left:8%; top:94.7%; width:84%; height:4.5%; display:flex; align-items:center; justify-content:space-between; font-size:1.5cqw; font-weight:700; color:#fff0d8; text-shadow:0 1px 2px #000; }
.war button { font:inherit; cursor:pointer; touch-action:manipulation; }
.war #sound { position:relative; color:#fff0d8; background:#201810; border:1px solid #c79958; border-radius:.3cqw; font-size:1.6cqw; font-weight:900; padding:.2cqw 1.4cqw; }
.war #sound::before { content:''; position:absolute; left:-8px; right:-8px; bottom:0; height:max(100%,36px); }
.war button:focus-visible { outline:2px solid white; outline-offset:2px; }
.war .war-warning { color:#ff9278!important; }
/* Menus occupy only the central play zone; top and bottom artwork stay visible. */
.war .war-overlay { position:absolute; z-index:3; inset:21% 14% 19%; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:1cqw; background:#211a16ed; border:1px solid #9d7645; border-radius:.6cqw; }
.war [hidden] { display:none!important; }
.war .war-eyebrow { font-size:1cqw; letter-spacing:.2cqw; color:var(--gold); margin:0 0 .8cqw; }
.war h2 { font-family:Georgia,serif; font-size:3.2cqw; line-height:1.07; margin:0 0 .8cqw; max-width:95%; }
.war #overlay-copy { color:#cab69b; font-size:1.4cqw; line-height:1.4; margin:0 0 1cqw; }
.war #start { background:var(--gold); border:1px solid #f0c67a; box-shadow:0 .3cqw #8a5925; color:#25180e; font-weight:900; text-transform:uppercase; font-size:1.6cqw; letter-spacing:.1cqw; padding:1.1cqw 3.4cqw; border-radius:.3cqw; }
.war #start:disabled { opacity:.5; cursor:wait; }
.war .war-small { font-size:1.4cqw; font-weight:700; color:#e8d5b4; margin:.6cqw 0 0; }
.war .war-result { margin:0 0 1cqw; font-size:2.4cqw; color:var(--gold); font-weight:bold; }
@media(max-width:600px) { .war { margin:0 auto; } }

/* End-card decoration only. The existing result visibility controls the layout. */
.war .leroy {
  --wobble-deg:3deg;
  --wobble-time:2.4s;
  --bob-px:6px;
  --bob-time:1.8s;
  display:none;
  position:absolute;
  left:2%;
  bottom:18%;
  width:min(20cqw,200px);
  max-height:70%;
  object-fit:contain;
  transform-origin:50% 85%;
  pointer-events:none;
}
.war .war-overlay:has(#result:not([hidden])):has(.leroy:not([hidden])) {
  padding-left:23cqw;
  padding-right:2cqw;
}
.war .war-overlay:has(#result:not([hidden])) .leroy:not([hidden]) {
  display:block;
  animation:leroy-wobble var(--wobble-time) ease-in-out infinite,
    leroy-bob var(--bob-time) ease-in-out infinite;
}
@keyframes leroy-wobble {
  0%,100% { rotate:calc(var(--wobble-deg) * -1); }
  50% { rotate:var(--wobble-deg); }
}
@keyframes leroy-bob {
  0%,100% { translate:0 0; }
  50% { translate:0 calc(var(--bob-px) * -1); }
}
@media(prefers-reduced-motion:reduce) {
  .war .war-overlay:has(#result:not([hidden])) .leroy:not([hidden]) { animation:none; }
}