:root{color-scheme:dark;--bg:#071e31;--panel:#103d5b;--line:#59a8c9;--gold:#ffd36b;--ice:#8ee7ff;--berry:#ff8198;--ink:#f4fcff}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 0,#1b6681 0,#071e31 58%);font-family:system-ui,sans-serif;color:var(--ink)}body{display:flex;justify-content:center;padding:clamp(12px,3vw,32px)}button{font:inherit;color:inherit;border:1px solid var(--line);background:#145073;border-radius:14px;padding:12px 18px;cursor:pointer}button:hover,button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.primary{background:linear-gradient(135deg,#f5c85e,#e57984);border-color:#ffdf91;color:#1e2530;font-weight:800}.screen{width:min(920px,100%);min-height:calc(100vh - 64px);padding:clamp(20px,5vw,56px);background:rgba(7,30,49,.9);border:1px solid #3b819b;border-radius:24px;box-shadow:0 20px 60px #0007}.screen:not(.battle):not(.result){display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.screen[hidden]{display:none !important}.brand{color:var(--ice);font-size:.76rem;letter-spacing:.14em}.lede{max-width:52ch;color:#c5e0ea;line-height:1.55}.progress{color:var(--gold)}.primary{min-width:220px}.back{align-self:flex-start;padding:8px 12px}.stage-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%;max-width:720px}.stage-list button{min-height:80px}.battle{padding:16px;display:flex;flex-direction:column;align-items:stretch}.battle-head{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--gold);font-weight:800}.battle-status{text-align:center;margin:8px;color:#c5e0ea}.battle canvas{display:block;width:100%;height:auto;max-height:calc(100vh - 235px);background:#062035;border:1px solid #6db5cf;border-radius:18px;touch-action:none}.touch-controls{display:flex;justify-content:center;align-items:center;gap:7px;padding-top:10px;flex-wrap:wrap}.touch-controls button{min-width:58px;font-size:1.2rem}.touch-controls .break{min-width:130px;color:var(--gold);font-size:.8rem}.touch-hint{text-align:center;font-size:.84rem;color:#a8cbd8;padding:8px}.result{align-items:center}.result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}@media(max-width:560px){body{padding:0}.screen{min-height:100vh;border-radius:0;border-inline:0;padding:20px 14px}.stage-list{grid-template-columns:repeat(2,minmax(0,1fr))}.battle{padding:10px}.battle canvas{border-radius:12px}.battle-head{font-size:.8rem}.touch-controls button{padding:10px 11px}}

/* v4: keep the live Chapter/Room identity readable on narrow Battle headers. */
@media (max-width:560px){
  body[data-wp-five-game="animal-frost-maze"] .battle-header #room-label{
    font-size:clamp(.78rem,4vw,.9rem);
    line-height:1.2;
    max-width:100%;
    overflow:visible;
    overflow-wrap:anywhere;
    text-overflow:clip;
    white-space:normal;
  }
}

#start-game[data-wp-main-start]{height:52px;min-height:52px}

/* The shared shell's compact-landscape contract uses the canonical 420px
   poster column so the Main surface keeps its governed wide-layout identity. */
@media (min-width:700px) and (max-height:560px) and (orientation:landscape){
  body[data-wp-five-game="animal-frost-maze"] .wp-standard-main-composition{
    --wp-main-landscape-poster-size:420px;
  }
}

/* Keep the complete campaign in one horizontal rail. The runtime marks cards
   outside the visible rail as temporarily unavailable so the active card
   centres remain hit-testable at every responsive scale. */
body[data-wp-five-game="animal-frost-maze"] [data-wp-logical-stage-canvas] .stage-list{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}
body[data-wp-five-game="animal-frost-maze"] [data-wp-logical-stage-canvas] .stage-card{
  display:grid;
  align-content:center;
  justify-items:center;
  gap:8px;
  text-align:center;
  padding:16px;
}
body[data-wp-five-game="animal-frost-maze"] [data-wp-logical-stage-canvas] .stage-card strong{font-size:28px;line-height:1}
body[data-wp-five-game="animal-frost-maze"] [data-wp-logical-stage-canvas] .stage-card span{color:#dff6ff;line-height:1.25}
body[data-wp-five-game="animal-frost-maze"] [data-wp-logical-stage-canvas] .stage-card small{color:var(--gold);font-weight:800}

.battle-status[data-state="cracked"],.battle-status[data-state="built"],.battle-status[data-state="berry"],.battle-status[data-state="berryClear"]{color:var(--gold);font-weight:800}.battle-status.frost-beat{animation:frost-battle-beat 420ms cubic-bezier(.2,.8,.3,1)}@keyframes frost-battle-beat{0%{transform:scale(.98);opacity:.65}45%{transform:scale(1.035);opacity:1}100%{transform:scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){.battle-status.frost-beat{animation:none}}
.battle-header .utility-button{width:48px;min-width:48px;height:48px;min-height:48px;padding:0;display:grid;place-items:center;border-radius:12px}
#result-copy{white-space:pre-line;line-height:1.35;overflow-wrap:anywhere}
#result-screen{overflow-y:auto;overscroll-behavior:contain}
#result-screen button:disabled{opacity:.45;cursor:default}
body[data-wp-five-game="animal-frost-maze"] #result-screen{width:auto;min-height:0;max-height:calc(100% - 24px)}
body[data-wp-five-game="animal-frost-maze"] #result-screen .result-actions button{min-width:0;width:100%;padding:10px 6px;overflow-wrap:anywhere}
.mastery-badge{color:var(--gold)}
/* Preserve the intrinsic board and sprite aspect inside the shared Battle slot. */
body[data-wp-five-game="animal-frost-maze"] #arena{object-fit:contain}
@media (orientation: landscape) and (max-height: 560px){
  body[data-wp-five-game="animal-frost-maze"] .battle canvas{
    width:min(100%,640px) !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:12 / 7 !important;
    align-self:center !important;
  }
  body[data-wp-five-game="animal-frost-maze"] .battle-status{margin:4px 8px;line-height:1.2}
  body[data-wp-five-game="animal-frost-maze"] .touch-controls{padding-top:4px;gap:4px}
  body[data-wp-five-game="animal-frost-maze"] .touch-hint{padding:4px;line-height:1.2}
  body[data-wp-five-game="animal-frost-maze"] #battle-screen{display:grid;grid-template-columns:minmax(0,1fr) 270px;grid-template-rows:64px 38px minmax(0,1fr) auto;gap:4px;padding:8px}
  body[data-wp-five-game="animal-frost-maze"] .battle-header{grid-column:1/-1;grid-row:1}
  body[data-wp-five-game="animal-frost-maze"] #arena{grid-column:1;grid-row:2/5;width:100% !important;height:100% !important;min-height:0 !important;aspect-ratio:auto !important}
  body[data-wp-five-game="animal-frost-maze"] .battle-status{grid-column:2;grid-row:2;margin:0;font-size:12px}
  body[data-wp-five-game="animal-frost-maze"] .touch-controls{grid-column:2;grid-row:3;align-content:center;padding:0}
  body[data-wp-five-game="animal-frost-maze"] .touch-controls button{min-width:46px;min-height:44px;padding:7px;font-size:14px}
  body[data-wp-five-game="animal-frost-maze"] .touch-controls .break{min-width:120px}
  body[data-wp-five-game="animal-frost-maze"] .touch-hint{grid-column:2;grid-row:4;margin:0;font-size:12px}
}