:root{color-scheme:dark;--bg:#1a122a;--panel:#312249;--line:#7f64a7;--gold:#ffd36b;--mint:#9ee9e0;--danger:#ff7f91;--ink:#fffaff}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 0,#613b72 0,#1a122a 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:#432f61;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,#f7c661,#e67c91);border-color:#ffe29c;color:#26192e;font-weight:800}.screen{width:min(920px,100%);min-height:calc(100vh - 64px);padding:clamp(20px,5vw,56px);background:rgba(26,18,42,.9);border:1px solid #765a98;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(--mint);font-size:.76rem;letter-spacing:.14em}.lede{max-width:52ch;color:#e1cfe9;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(3,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:#e1cfe9}.battle canvas{display:block;width:100%;height:auto;max-height:calc(100vh - 230px);background:#211831;border:1px solid #9c7ac3;border-radius:18px;touch-action:none}.touch-controls{display:flex;justify-content:center;gap:10px;padding-top:10px}.touch-controls button{min-width:70px;font-size:1.3rem}.touch-controls .jump{min-width:140px;color:var(--gold)}.touch-hint{text-align:center;font-size:.84rem;color:#cbb7d9;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 12px}}
@media (orientation:landscape) and (max-height:560px){.screen.battle.battle-screen{display:grid;grid-template-columns:minmax(0,1fr) 220px;grid-template-rows:64px 26px minmax(0,1fr) 28px;gap:6px 10px;padding:8px;align-items:stretch}.screen.battle.battle-screen .battle-header{grid-column:1 / -1;grid-row:1}.screen.battle.battle-screen .battle-status{grid-column:1 / -1;grid-row:2;margin:0;align-self:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.screen.battle.battle-screen #arena{grid-column:1;grid-row:3;width:auto;height:100%;max-width:100%;max-height:none;aspect-ratio:16 / 9;justify-self:center;align-self:center;flex:0 0 auto}.screen.battle.battle-screen .touch-controls{grid-column:2;grid-row:3;display:flex;flex-direction:column;justify-content:flex-start;gap:4px;padding:0 0 54px}.screen.battle.battle-screen .touch-controls button{width:100%;min-width:0;height:42px;min-height:42px;padding:6px 8px}.screen.battle.battle-screen .touch-controls .jump{min-width:0}.screen.battle.battle-screen .tool-controls{grid-column:2;grid-row:3;display:flex;align-self:end;justify-content:center;gap:6px;padding:0;z-index:1}.screen.battle.battle-screen .tool-controls button{flex:1 1 0;min-width:0;padding:6px}.screen.battle.battle-screen .touch-hint{grid-column:1 / -1;grid-row:4;padding:0;align-self:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
 .battle-status{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px 10px;line-height:1.2;min-height:26px}.selected-tool-label{color:var(--gold);font-weight:800;white-space:nowrap}.approach-cue{color:var(--mint);font-size:.82em;font-weight:700;white-space:nowrap}@media (orientation:landscape) and (max-height:560px){.screen.battle.battle-screen .battle-status{white-space:normal;font-size:.82rem}}
#arena{flex:0 0 auto;aspect-ratio:16 / 9;width:100%;max-width:min(100%,calc((100vh - 230px) * 16 / 9));height:auto;max-height:calc(100vh - 230px)}
.touch-controls button{touch-action:none;user-select:none}
@media (max-width:700px){.screen.battle-screen .result{width:100%;max-width:100%;min-width:0;padding-inline:12px}.screen.battle-screen .result-actions{width:min(100%,360px);display:grid;grid-template-columns:minmax(0,1fr);gap:10px}.screen.battle-screen .result-actions button{width:100%;min-width:0}}

/* Main stays a normal document-flow entry, while active Battle owns a
   full-height play surface. The old centered Main left a large blank mobile
   header and the old Battle stack left an unowned lower strip. */
body[data-wp-five-game="animal-bounce-brawl"] .screen.main-screen{justify-content:flex-start;align-items:stretch;text-align:center;gap:0;padding-top:12px}
body[data-wp-five-game="animal-bounce-brawl"] .main-screen .five-game-cover{width:min(390px,calc(100vw - 28px));height:auto;min-height:0;margin:12px auto 20px}
body[data-wp-five-game="animal-bounce-brawl"] .main-screen .lede{margin:0 auto 12px;max-width:58ch}
body[data-wp-five-game="animal-bounce-brawl"] .main-screen .progress{margin:0 auto 12px}
body[data-wp-five-game="animal-bounce-brawl"] .main-screen #start-game{margin-inline:auto}
body[data-wp-five-game="animal-bounce-brawl"] .battle-screen{display:flex;flex-direction:column;gap:8px;min-height:0;height:100%;overflow:hidden;padding:12px}
body[data-wp-five-game="animal-bounce-brawl"] .arena-frame{flex:1 1 auto;min-height:0;width:100%;display:grid;place-items:center;overflow:hidden;border:1px solid #9c7ac3;border-radius:18px;background:linear-gradient(180deg,#261b3c,#171122)}
body[data-wp-five-game="animal-bounce-brawl"] #arena{width:min(100%,960px);height:auto;max-height:100%;aspect-ratio:16/9;border:0;border-radius:12px;background:#211831}
body[data-wp-five-game="animal-bounce-brawl"] .touch-controls{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0;width:100%;max-width:none}
body[data-wp-five-game="animal-bounce-brawl"] .touch-controls button{min-width:0;min-height:52px;padding:10px 8px}
body[data-wp-five-game="animal-bounce-brawl"] .touch-controls button.pressed{transform:translateY(2px) scale(.97);background:#72529a;box-shadow:inset 0 0 0 3px var(--gold)}
body[data-wp-five-game="animal-bounce-brawl"] .touch-controls .hop{color:var(--mint);border-color:#79d9ca}
body[data-wp-five-game="animal-bounce-brawl"] .tool-controls{flex:0 0 auto;display:flex;gap:8px;width:100%;justify-content:center}
body[data-wp-five-game="animal-bounce-brawl"] .tool-controls button{flex:1 1 0;min-width:0;white-space:pre-line;line-height:1.2;font-size:.86rem}
body[data-wp-five-game="animal-bounce-brawl"] .tool-controls button[data-tool="0"]{border-color:#ffd36b}
body[data-wp-five-game="animal-bounce-brawl"] .tool-controls button[data-tool="1"]{border-color:#9ee9e0}
body[data-wp-five-game="animal-bounce-brawl"] .tool-controls button[data-tool="2"]{border-color:#ff9eb0}
body[data-wp-five-game="animal-bounce-brawl"] .tool-controls button.selected{background:#6a4c91;box-shadow:inset 0 0 0 3px currentColor;color:#fff}
body[data-wp-five-game="animal-bounce-brawl"] .touch-hint{flex:0 0 auto;margin:0;padding:2px 0;min-height:22px}
body[data-wp-five-game="animal-bounce-brawl"] .battle-header{display:flex;align-items:center;gap:8px;color:var(--gold);font-weight:800}
body[data-wp-five-game="animal-bounce-brawl"] .battle-header #arena-label{white-space:nowrap}
body[data-wp-five-game="animal-bounce-brawl"] .battle-header #health-label{margin-inline-start:auto;white-space:nowrap;font-size:.9em}
body[data-wp-five-game="animal-bounce-brawl"] .battle-header .battle-utility{flex:0 0 48px;width:48px;min-width:48px;height:48px;min-height:48px;padding:8px;display:grid;place-items:center}
body[data-wp-five-game="animal-bounce-brawl"] .battle-help-popover{margin:0;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(67,47,97,.95);color:var(--mint);font-size:.86rem;text-align:center}
@media(max-width:560px){body[data-wp-five-game="animal-bounce-brawl"] .screen.main-screen{padding-top:10px}.main-screen .five-game-cover{width:min(390px,calc(100vw - 28px))}.battle-screen{padding:10px!important}.arena-frame{border-radius:12px}.touch-controls{gap:6px}.touch-controls button{font-size:1rem;padding-inline:4px!important}}
@media (orientation:landscape) and (max-height:560px){body[data-wp-five-game="animal-bounce-brawl"] .battle-screen{display:grid;grid-template-columns:minmax(0,1fr) 244px;grid-template-rows:52px 24px minmax(0,1fr) 24px;gap:6px 10px;padding:8px}.battle-screen .battle-header{grid-column:1/-1;grid-row:1}.battle-screen .battle-status{grid-column:1/-1;grid-row:2;margin:0;min-height:24px}.battle-screen .arena-frame{grid-column:1;grid-row:3}.screen.battle.battle-screen .touch-controls{grid-column:2;grid-row:3;display:grid;align-self:stretch;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,42px);align-content:start;gap:6px;padding:0 0 62px}.battle-screen .tool-controls{grid-column:2;grid-row:3;align-self:end}.battle-screen .tool-controls button{min-height:54px;font-size:.68rem;padding:4px 2px}.battle-screen .touch-hint{grid-column:1/-1;grid-row:4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.battle-screen .arena-frame #arena{max-height:100%}}