:root { color-scheme: dark; --bg: #0c1c24; --panel: #14313a; --panel-2: #1d4147; --line: #4b8881; --text: #f0f6e9; --muted: #b9d4c5; --accent: #f6cd72; --good: #93e6a6; --warn: #ffca8a; }
* { box-sizing: border-box; }
*[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% 0%, #235557 0, var(--bg) 52%); color: var(--text); font: 16px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
.loading-screen, .screen, .topbar { width: min(100%, 720px); margin-inline: auto; }
.loading-screen { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--muted); }
.spinner { color: var(--accent); font-size: 2rem; animation: breathe 1.5s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.28) rotate(20deg); opacity: .55; } }
#app { min-height: 100vh; padding-bottom: 28px; }
body[data-wp-active-screen="stage"] #app, body[data-wp-active-screen="battle"] #app { min-height: 0; padding-bottom: 0; }
.topbar { min-height: 64px; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 10px; padding: 10px 16px; position: sticky; top: 0; z-index: 2; background: rgba(12, 28, 36, .92); backdrop-filter: blur(12px); }
.topbar strong { text-align: center; letter-spacing: .02em; }
.icon-button, .close-button { border: 1px solid var(--line); background: transparent; border-radius: 14px; width: 44px; height: 44px; font-size: 1.2rem; }
.screen { padding: 12px 16px 24px; }
.panel { background: rgba(20, 49, 58, .86); border: 1px solid rgba(75, 136, 129, .7); border-radius: 24px; box-shadow: 0 18px 60px rgba(0, 0, 0, .25); }
#mainScreen { margin-top: 8px; text-align: center; }
.cover-wrap { position: relative; overflow: hidden; border-radius: 18px; background: #2b615b; }
.cover-wrap picture, .cover-wrap img { display: block; width: 100%; }
.cover-wrap img { aspect-ratio: 1; height: auto; object-fit: cover; }
.cover-badge { position: absolute; left: 12px; bottom: 12px; padding: 5px 9px; border-radius: 999px; background: rgba(8, 25, 28, .75); color: var(--accent); font-size: .8rem; font-weight: 800; }
.eyebrow { margin: 16px 0 4px; color: var(--accent); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1, h2 { margin: 0; line-height: 1.1; }
h1 { font-size: clamp(2rem, 9vw, 3.2rem); }
h2 { font-size: clamp(1.45rem, 5vw, 2rem); }
.intro { max-width: 56ch; margin: 14px auto; color: var(--muted); }
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0; }
.facts span, .pill { border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; color: var(--muted); font-size: .78rem; font-weight: 750; }
.progress, .best, .status { min-height: 24px; margin: 12px 0; color: var(--muted); font-weight: 700; }
.main-actions, .battle-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.primary, .secondary, .toggle, .stage-card, .direction-button { border: 1px solid var(--line); border-radius: 14px; min-height: 48px; padding: 10px 16px; font-weight: 800; }
.primary { background: var(--accent); border-color: var(--accent); color: #26321f; }
.secondary, .toggle { background: #20474b; }
.best { font-size: .86rem; }
.stage-list { display: grid; gap: 10px; margin-top: 18px; }
.stage-card { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; background: #1c4046; }
.stage-card span:first-child { display: grid; gap: 2px; }
.stage-card small { color: var(--muted); font-weight: 500; }
.stage-mark { color: var(--accent); font-size: 1.35rem; }
.battle-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.battle-head .eyebrow { margin-top: 0; }
.prompt { min-height: 48px; margin: 14px 0 8px; color: var(--muted); }
.grid { width: min(100%, 480px); display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(44px, 1fr)); gap: 7px; margin: 16px auto; }
.grid-cell { aspect-ratio: 1; border: 1px solid rgba(75, 136, 129, .65); border-radius: 12px; background: #1b4144; color: #b7d5bf; font-size: clamp(1.35rem, 7vw, 2rem); display: grid; place-items: center; }
.grid-cell.open { color: rgba(185, 212, 197, .3); }
.grid-cell.flower, .grid-cell.flower-target { color: #ffdd8a; background: #3a4a3e; }
.grid-cell.thorn { color: #ffb37c; background: #3b3033; }
.grid-cell.seed { color: #f8d976; }
.grid-cell.seed[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 2px; }
.grid-cell.seed.locked { color: var(--good); background: #285544; }
.grid-cell.asset { background-image: url("assets/animal-gust-garden-garden-atlas.png"); background-repeat: no-repeat; background-size: 400% 200%; color: transparent; }
.grid-cell.asset-seed-1 { background-position: 0 0; }
.grid-cell.asset-seed-2 { background-position: 33.333% 0; }
.grid-cell.asset-seed-3 { background-position: 66.667% 0; }
.grid-cell.asset-flower-1 { background-position: 0 100%; }
.grid-cell.asset-flower-2 { background-position: 33.333% 100%; }
.grid-cell.asset-thorn { background-position: 66.667% 100%; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; color: var(--muted); font-size: .82rem; }
.legend span { display: inline-flex; align-items: center; gap: 4px; }
.legend-seed { color: #f8d976; }.legend-flower { color: #ffdd8a; }.legend-thorn { color: #ffb37c; }
.status { color: var(--good); text-align: center; }.status.warn { color: var(--warn); }
.direction-panel { margin: 12px auto 0; width: min(100%, 330px); text-align: center; }
.direction-panel .eyebrow { margin-bottom: 8px; }
.direction-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.direction-button { background: #285454; font-size: 1.4rem; }
.direction-button[aria-pressed="true"] { background: var(--accent); color: #26321f; border-color: var(--accent); }
.result-icon { margin: 10px auto 16px; width: 108px; height: 108px; display: grid; place-items: end center; overflow: hidden; border-radius: 50%; background: #285544; color: var(--good); font-size: 2.6rem; }
.result-art { width: 100%; height: 150%; object-fit: contain; object-position: center bottom; }
#battleScreen { background-image: linear-gradient(rgba(20, 49, 58, .78), rgba(20, 49, 58, .88)), url("assets/animal-gust-garden-background.webp"); background-size: cover; background-position: center; }
#resultScreen { text-align: center; }
.modal { position: fixed; inset: 0; z-index: 4; display: grid; place-items: center; padding: 18px; background: rgba(4, 13, 17, .78); }
.modal-card { position: relative; width: min(100%, 420px); padding: 26px 20px 20px; border: 1px solid var(--line); border-radius: 20px; background: #15363d; box-shadow: 0 20px 70px rgba(0, 0, 0, .45); }
.close-button { position: absolute; right: 14px; top: 14px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(75, 136, 129, .35); color: var(--muted); font-weight: 750; }
.setting-row select { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; background: #20474b; color: var(--text); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (min-width: 720px) { .screen { padding: 24px 32px 34px; } #mainScreen { margin-top: 18px; } }

/* Interface 6 shell contract: Main owns its centered header and guide, while
   Stage and Battle fill the viewport above the General reserve. */
.main-header { min-height: 64px; display: grid; grid-template-columns: 58px minmax(0, 1fr) 48px; align-items: center; gap: 10px; margin: -4px -4px 8px; }
.main-header > strong { text-align: center; letter-spacing: .02em; }
.main-return { width: 58px; height: 48px; display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 4px; color: var(--text); text-decoration: none; }
.main-return img { display: block; width: 36px; height: 28px; object-fit: contain; }
.main-header .icon-button, .stage-header .icon-button, .battle-head .icon-button { width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
#mainScreen .cover-wrap { width: min(100%, 420px); margin-inline: auto; }
#mainScreen .primary { min-height: 52px; }
#mainProgress { min-height: 40px; display: grid; place-items: center; }
.stage-shell, .battle-shell { width: 100%; margin: 0; }
.stage-canvas, .battle-canvas { width: min(100%, 920px); margin-inline: auto; color: var(--text); }
.stage-canvas { height: calc(100svh - 56px); min-height: 0; display: grid; grid-template-rows: 64px minmax(0, 1fr) 56px; gap: 8px; padding: 10px 14px 0; overflow: hidden; border: 0; border-radius: 0; background: linear-gradient(145deg, rgb(20 49 58 / 92%), rgb(13 39 45 / 94%)), var(--wp-stage-art); background-size: cover; background-position: center; }
.stage-header { min-height: 60px; display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 10px; }
.stage-header > div { text-align: center; min-width: 0; }
.stage-header .eyebrow { margin: 0 0 4px; }
.stage-intro { min-height: 48px; margin: 0 auto 8px; text-align: center; }
.stage-canvas > div:nth-child(2) { min-height: 0; overflow: auto; }
.stage-canvas .stage-list { min-height: 0; margin: 0; padding: 4px 0 10px; }
.stage-canvas .stage-rail { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-columns: unset !important; grid-auto-flow: row !important; align-items: stretch !important; overflow-y: auto !important; overflow-x: hidden !important; }
.stage-canvas .stage-rail > .stage-card { flex: 0 1 auto !important; width: 100% !important; min-width: 0 !important; height: 72px !important; min-height: 72px !important; max-height: 72px !important; }
.stage-canvas .stage-card { min-height: 72px; }
.stage-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 8px; min-height: 56px; padding: 6px; border-radius: 12px; background: rgb(4 25 29 / 60%); }
.stage-tabs > button { min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: rgb(255 255 255 / 8%); color: var(--text); font-weight: 800; }
.stage-tabs > button[aria-current="page"] { border-color: var(--accent); background: rgb(246 205 114 / 18%); }
.stage-ad-reserve, .battle-ad-reserve { width: min(100%, 920px); height: 56px; margin-inline: auto; flex: 0 0 56px; background: transparent; }
.battle-canvas { height: calc(100svh - 56px); min-height: 0; padding: 10px 14px 18px; overflow: auto; border: 0; border-radius: 0; background: linear-gradient(rgb(20 49 58 / 78%), rgb(20 49 58 / 90%)), url("assets/animal-gust-garden-background.webp"); background-size: cover; background-position: center; }
.battle-head { min-height: 60px; display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 10px; }
.battle-head > div { min-width: 0; text-align: center; }
.battle-head .eyebrow { margin: 0 0 4px; }
.progress-pill { display: inline-block; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .78rem; }
.battle-head h2 { overflow-wrap: anywhere; }
.battle-head .icon-button:last-child { justify-self: end; }
.game-page-info { width: min(100%, 920px); margin: 18px auto 28px; padding: 18px 16px 24px; border: 1px solid var(--line); border-radius: 18px; background: rgb(20 49 58 / 86%); box-shadow: 0 18px 60px rgb(0 0 0 / 25%); }
.game-info-hero, .game-info-sections { border: 1px solid var(--line); border-radius: 18px; background: #14313a; }
.game-info-hero { padding: 18px; }
.game-info-kicker { color: var(--accent); }
.game-info-title h2 { margin: 4px 0; color: var(--text); }
.game-info-title p, .game-info-section { color: var(--muted); }
.game-info-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; padding: 16px; }
.game-info-section { background: #173940; }
.game-info-section h3 { margin-top: 0; color: var(--text); }
.game-info-section dt { color: var(--text); }
.game-info-section dd,
.game-info-section p { color: var(--muted); }
.game-info-section li { margin-block: 6px; color: var(--muted); }
[data-wp-game-guide][hidden] { display: none !important; }
/* The shared Interface 7 shell keeps a normalized Main node in flow while a
   native screen is active; make Gust Garden's own hidden state authoritative
   so Stage/Battle/Result start at the viewport origin. */
body[data-wp-active-screen="stage"] #mainScreen,
body[data-wp-active-screen="battle"] #mainScreen,
body[data-wp-active-screen="result"] #mainScreen { display: none !important; }
@media (max-width: 699px) { .main-header { margin-inline: -2px; } .stage-canvas, .battle-canvas { padding-inline: 10px; } .game-info-sections { grid-template-columns: 1fr; } }
@media (min-width: 700px) and (max-height: 560px) {
  html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] .wp-standard-main-composition {
    --wp-main-landscape-poster-size: 420px;
    grid-template-columns: 420px minmax(0, 1fr) !important;
  }
  html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] .wp-standard-main-copy {
    height: 420px;
  }
}

/* Compact landscape keeps the shared Main and terminal Result actions inside
   the governed 844x390 viewport. The game remains width-responsive elsewhere. */
@media (min-width: 700px) and (max-height: 560px) and (orientation: landscape) {
  html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] #mainScreen .wp-standard-main-composition {
    --wp-main-landscape-poster-size: 420px !important;
    grid-template-columns: 420px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 8px !important;
  }
  html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] #mainScreen .wp-standard-main-copy {
    height: 300px !important;
    gap: 7px !important;
  }
  html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] #mainScreen .wp-standard-main-copy h1 {
    font-size: 1.8rem !important;
  }
  html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] #mainScreen .wp-standard-main-copy .facts {
    gap: 4px !important;
    margin: 4px 0 !important;
  }
  html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] #mainScreen .wp-standard-main-copy .main-actions {
    gap: 6px !important;
    margin-top: 2px !important;
  }
  html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] #mainScreen .wp-standard-main-copy .best {
    min-height: 20px !important;
    margin: 2px 0 !important;
  }
  html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] #resultScreen {
    min-height: 0 !important;
    height: calc(100svh - 8px) !important;
    overflow: hidden !important;
    padding: 6px 16px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  /* The compact Result contract uses flex when active, but native hidden
     state must still remove the inactive Result from document flow. */
  html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] #resultScreen[hidden] {
    display: none !important;
  }
  html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] #resultScreen .result-icon {
    width: 72px !important;
    height: 72px !important;
    margin: 2px auto 6px !important;
  }
  html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] #resultScreen .eyebrow {
    margin: 2px 0 !important;
  }
  html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] #resultScreen h2 {
    font-size: 1.35rem !important;
  }
  html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] #resultScreen .intro {
    margin: 5px auto !important;
    max-height: 44px !important;
    overflow: hidden !important;
  }
  html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] #resultScreen .main-actions {
    gap: 8px !important;
    margin-top: 6px !important;
  }
  html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] #resultScreen .main-actions button {
    min-height: 44px !important;
    padding-block: 8px !important;
  }
}
@media (max-height: 900px) and (orientation: landscape) {
  .stage-canvas { padding: 4px 10px 0; grid-template-rows: 52px minmax(0, 1fr) 50px; gap: 4px; }
  .stage-header { min-height: 52px; }
  .stage-intro { display: none; }
  .stage-canvas > div:nth-child(2) { overflow: hidden; }
  .stage-canvas .stage-list { gap: 4px; padding: 0; }
  .stage-canvas .stage-card { height: 52px !important; min-height: 52px !important; max-height: 52px !important; padding: 4px 10px; }
  .stage-tabs { min-height: 50px; padding: 3px; gap: 4px; }
  .stage-tabs > button { min-height: 44px; }
  .battle-canvas { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); grid-template-rows: 52px 36px 30px 30px 82px 48px; align-content: center; gap: 4px; padding: 4px 10px 8px; overflow: hidden; }
  .battle-head { grid-column: 1 / -1; grid-row: 1; min-height: 52px; }
  .battle-canvas > .prompt { grid-column: 2; grid-row: 2; min-height: 0; margin: 0; align-self: center; text-align: center; }
  .battle-canvas > .grid { grid-column: 1; grid-row: 2 / 7; width: 250px; margin: 0 auto; align-self: center; gap: 4px; }
  .battle-canvas > .legend { grid-column: 2; grid-row: 3; align-self: center; gap: 8px; }
  .battle-canvas > .status { grid-column: 2; grid-row: 4; min-height: 0; margin: 0; align-self: center; }
  .battle-canvas > .direction-panel { grid-column: 2; grid-row: 5; width: min(100%, 250px); margin: 0 auto; align-self: center; }
  .battle-canvas > .battle-actions { grid-column: 2; grid-row: 6; margin: 0; gap: 6px; align-self: center; }
  .battle-canvas > .battle-actions > button { min-width: 0; padding-inline: 10px; }
}

/* Interface 6 Main contract: preserve the framed Guide and canonical
   420px wide-layout poster even when shared Interface 7 defaults are compact. */
@layer wp-gust-main-contract {
  html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] .game-page-info {
    border-radius: 18px !important;
  }
  html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] .game-info-sections {
    display: grid !important;
    gap: 14px !important;
    border-radius: 18px !important;
  }
  html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] .game-info-section {
    border-radius: 16px !important;
    padding: 16px !important;
    background: #173940 !important;
  }
  @media (min-width: 700px) and (max-height: 900px) {
    html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] #mainScreen .cover-wrap,
    html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] #mainScreen .cover-wrap picture,
    html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] #mainScreen .cover-wrap img,
    html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] #mainScreen .wp-standard-main-poster,
    html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] #mainScreen .wp-standard-main-poster-media,
    html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] #mainScreen .wp-standard-main-poster-media img {
      width: 420px !important;
      min-width: 420px !important;
      max-width: 420px !important;
      height: 420px !important;
      min-height: 420px !important;
      max-height: 420px !important;
    }
  }
  /* Important declarations in this game-owned layer intentionally outrank
     the 420px Interface 6 poster contract above for short landscape. */
  @media (min-width: 700px) and (max-height: 560px) and (orientation: landscape) {
    html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] #mainScreen :is(.wp-standard-main-poster, .wp-standard-main-poster-media, .wp-standard-main-poster-media > img, .wp-standard-main-poster > img, .cover-wrap, .cover-wrap picture, .cover-wrap img) {
      width: 420px !important;
      min-width: 420px !important;
      max-width: 420px !important;
      height: 420px !important;
      min-height: 420px !important;
      max-height: 420px !important;
    }
    html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-gust-garden"] #mainScreen .wp-standard-main-copy {
      height: 300px !important;
    }
  }
}