:root{color-scheme:dark;--bg:#071b2a;--panel:#102f43;--line:#2d6c81;--gold:#ffd36b;--mint:#8df0cf;--danger:#ff6f81;--ink:#f7fbff}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 0,#17465a 0,#071b2a 55%);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:#163b51;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,#f6bd55,#e77b4f);border-color:#ffd98a;color:#1f1820;font-weight:800}.screen{width:min(920px,100%);min-height:calc(100vh - 64px);padding:clamp(20px,5vw,56px);background:rgba(7,27,42,.88);border:1px solid #235469;border-radius:24px;box-shadow:0 20px 60px #0005}.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:#c8dce7;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(5,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:#c8dce7}.battle-status[data-target-preview="active"]{color:var(--mint);font-weight:700}.battle canvas{display:block;width:100%;height:auto;max-height:calc(100vh - 180px);background:#0b2a35;border:1px solid #3b8094;border-radius:18px;touch-action:none}.touch-hint{text-align:center;font-size:.84rem;color:#a7c2d1;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:.85rem}}
 .battle-header .utility-button{width:48px;min-width:48px;height:48px;padding:0;display:grid;place-items:center;border-radius:12px}
 .battle-key{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin:2px auto 8px;padding:7px 12px;border:1px solid #3b8094;border-radius:12px;background:rgba(7,27,42,.72);color:#e6f4f7;font-size:.88rem}.battle-key-item{display:inline-flex;align-items:center;gap:7px;min-height:28px}.key-swatch{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:.9rem;font-weight:900;line-height:1;border:2px solid #e9fbff}.key-swatch-safe{background:linear-gradient(135deg,#ffcf64,#96e6c1);color:#173042}.key-swatch-hazard{background:#25283b;color:#ffb7c1;border-color:#ff9cab}@media(max-width:560px){.battle-key{justify-content:flex-start;gap:6px 12px;font-size:.78rem;padding:6px 9px}}
@media (orientation:landscape) and (max-height:460px){.battle{padding:4px 10px}.battle-header{min-height:22px;line-height:1;font-size:.78rem}.battle-status{margin:2px 0;line-height:1.15;font-size:.72rem}.battle-key{gap:3px 12px;margin:0 auto 2px;padding:2px 8px;font-size:.7rem}.battle-key-item{gap:4px;min-height:18px}.key-swatch{width:18px;height:18px;font-size:.7rem}.battle canvas{width:min(100%,730px);max-height:none;flex:0 0 auto;border-radius:10px}.touch-hint{margin:0;padding:1px 4px;font-size:.68rem;line-height:1.05}}
body[data-wp-five-game] .result-actions button{width:100%;min-width:0;max-width:100%;overflow-wrap:anywhere}

/* The full authored campaign remains inside the logical Stage Canvas. The
   rail is scrollable so all 30 stages stay directly selectable at every
   viewport size, with the current unlock frontier brought into view. */
@media (min-width:561px){
  body[data-wp-game-id="animal-canopy-cut"] .stage-screen [data-wp-stage-rail]{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    width:100%!important;
    max-width:none!important;
    height:min(68vh,650px)!important;
    min-height:0!important;
    max-height:650px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:12px!important;
  }
  body[data-wp-game-id="animal-canopy-cut"] .stage-screen [data-wp-stage-rail]>.stage-card{
    flex:none!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-wrap:anywhere;
  }
  body[data-wp-game-id="animal-canopy-cut"] .stage-screen [data-wp-stage-rail]>.stage-card{min-height:116px!important;text-align:start!important}
}

body[data-wp-game-id="animal-canopy-cut"] .stage-progress,
body[data-wp-game-id="animal-canopy-cut"] .stage-objective{color:var(--gold);text-align:center;line-height:1.4}
body[data-wp-game-id="animal-canopy-cut"] .stage-objective{margin:2px auto 8px;max-width:70ch;color:#c8dce7}
body[data-wp-game-id="animal-canopy-cut"] .stage-card{display:flex;flex-direction:column;gap:4px;text-align:start}
body[data-wp-game-id="animal-canopy-cut"] .stage-card small{color:var(--mint);font-weight:700}
body[data-wp-game-id="animal-canopy-cut"] .stage-card span:not(.stage-number){font-size:.78rem;line-height:1.25;color:#c8dce7}
body[data-wp-game-id="animal-canopy-cut"] .stage-card b{margin-top:auto;color:var(--gold);font-size:.74rem}
body[data-wp-game-id="animal-canopy-cut"] .stage-card.locked{opacity:.5;cursor:not-allowed}
body[data-wp-game-id="animal-canopy-cut"] .stage-card.cleared{border-color:var(--mint)}
body[data-wp-game-id="animal-canopy-cut"] .stage-card.selected{box-shadow:0 0 0 2px var(--gold) inset}
@media(max-width:560px){
  body[data-wp-game-id="animal-canopy-cut"] .stage-screen [data-wp-stage-rail]{max-height:calc(100vh - 190px);overflow-y:auto!important;padding:8px!important}
  body[data-wp-game-id="animal-canopy-cut"] .stage-card{min-height:128px;text-align:start}
}

@media (min-width:700px) and (max-height:560px){
  body[data-wp-game-id="animal-canopy-cut"] .wp-standard-main-composition{
    --wp-main-landscape-poster-size:420px!important;
  }
}