:root{--ink:#f4f7ff;--muted:#b8c7df;--night:#08162b;--panel:#112b49;--panel-2:#173d61;--line:#4c7199;--gold:#ffd166;--mint:#79e6c5;--rose:#ff9db4;color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 70% 0,#163f62 0,#08162b 48%);color:var(--ink)}button,a,select{font:inherit}.screen{width:min(100%,920px);margin-inline:auto}.main-screen{padding:12px}.topbar{min-height:60px;display:grid;grid-template-columns:70px minmax(0,1fr) 48px;align-items:center;gap:8px}.topbar strong{text-align:center;pointer-events:none}.return-link,.back-btn,.text-btn{color:var(--ink);text-decoration:none}.icon-btn,.back-btn{width:48px;height:48px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2);color:var(--ink);cursor:pointer}.icon-btn{justify-self:end}.settings-panel{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;margin-bottom:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.settings-panel label{display:flex;align-items:center;gap:8px}.settings-panel select{min-height:40px;border:1px solid var(--line);border-radius:10px;background:var(--night);color:var(--ink);padding:0 8px}.sound-btn{min-height:40px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--ink);padding:8px 12px;cursor:pointer}.hero-grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:center;gap:18px}.cover{display:block;width:min(420px,100%);aspect-ratio:9/7;object-fit:cover;border-radius:22px;border:1px solid var(--line);box-shadow:0 18px 44px #0006}.hero-copy{display:grid;gap:12px}.hero-copy h1,.hero-copy p{margin:0}.hero-copy small{color:var(--mint);font-weight:800;letter-spacing:.04em}.hero-copy h1{font-size:clamp(2rem,6vw,4rem);line-height:1}.progress,.best-line{color:var(--muted)}.primary-btn,.secondary-btn,.text-btn{min-height:52px;border-radius:14px;padding:12px 18px;font-weight:850;cursor:pointer}.primary-btn{border:0;background:var(--gold);color:#18212f}.secondary-btn{border:1px solid var(--line);background:var(--panel-2);color:var(--ink)}.text-btn{border:0;background:transparent}.primary-btn:disabled{opacity:.45;cursor:not-allowed}.guide-card{margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}.guide-card h2{margin:0 0 12px}.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.guide-grid article{min-height:90px;padding:14px;border-radius:14px;background:var(--panel-2);color:var(--muted)}.panel-screen{min-height:100svh;padding:14px;background:linear-gradient(145deg,#0a1b31,#102f4b)}.panel-head{display:grid;grid-template-columns:60px minmax(0,1fr) 100px;align-items:center;gap:12px;min-height:60px}.panel-head h2,.panel-head p{margin:0}.panel-head>div{text-align:center}.round-label{color:var(--muted);font-size:.9rem}.check-pill{justify-self:end;display:grid;place-items:center;min-height:40px;padding:0 10px;border:1px solid var(--line);border-radius:12px;color:var(--gold)}.stage-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:22px 0}.stage-card{min-height:170px;border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--ink);padding:18px;text-align:left;display:grid;align-content:center;gap:8px;cursor:pointer}.stage-card strong{color:var(--mint)}.stage-card small{color:var(--muted)}.battle-content{display:grid;gap:12px;max-width:760px;margin:0 auto;padding:16px 0 30px}.map-intro,.rule-card,.choice-card{margin:0;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--panel);line-height:1.5}.map-intro{color:#e9f1ff}.rule-card h3,.choice-card h3{margin:0 0 10px;font-size:1rem;color:var(--mint)}.rule-card p{margin:6px 0;color:#f7f9ff}.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.constellation-choice{min-height:210px;border:2px solid var(--line);border-radius:16px;background:#0d2038;color:var(--ink);padding:10px;cursor:pointer;text-align:left}.constellation-choice[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 3px #ffd16644}.constellation-choice[data-state="wrong"]{border-color:var(--rose);background:#3c2039}.choice-label{display:block;color:var(--muted);font-weight:800;margin-bottom:8px}.star-board{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4px;min-height:145px;border-radius:12px;background:radial-gradient(circle at 20% 20%,#234b73,#09182f);overflow:hidden}.star-board:before,.star-board:after{content:"";position:absolute;inset:25% 16%;border-top:2px solid #ffe6a2aa;transform:rotate(25deg);pointer-events:none}.star-board:after{inset:20% 28%;border-top-color:#8cebd0aa;transform:rotate(-34deg)}.star-cell{position:relative;z-index:1;display:grid;place-items:center;min-width:0;border-radius:8px}.star-cell.is-star{background:#ffffff0d}.star-glyph{font-size:1.75rem;filter:drop-shadow(0 0 8px #fff8)}.battle-status{min-height:46px;margin:0;padding:12px 14px;border-radius:14px;background:#0b2038;color:var(--muted)}.battle-status[data-kind="wrong"]{color:#ffd2dc;background:#3c2039}.battle-status[data-kind="correct"]{color:#d7ffef;background:#123d3c}.battle-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.result-card{max-width:620px;margin:12vh auto 0;padding:34px 20px;border:1px solid var(--line);border-radius:22px;background:var(--panel);text-align:center}.result-card>span{font-size:3rem;color:var(--gold)}.result-card h2{font-size:2rem;margin:8px 0}.result-card p{color:var(--muted);line-height:1.5}.result-actions{display:grid;gap:10px;margin-top:22px}.game-page-info{margin:18px auto;padding:0 12px 24px}.game-info-hero,.game-info-sections{border:1px solid var(--line);background:var(--panel);border-radius:18px}.game-info-hero{padding:18px}.game-info-title h2{margin:4px 0}.game-info-title p{color:var(--muted)}.game-info-kicker,.game-info-fact span{color:var(--mint);font-size:.8rem;font-weight:800}.game-info-facts{display:flex;gap:20px;margin-top:16px}.game-info-fact{display:grid;gap:4px}.game-info-sections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px;padding:16px}.game-info-section h3{margin-top:0}.game-info-section p,.game-info-section li{color:var(--muted);line-height:1.5}.loading-screen{position:fixed;inset:0;z-index:10;display:grid;place-items:center;gap:8px;background:#08162b;color:var(--ink);font-size:1.1rem}.loading-screen.is-ready{display:none}.loading-star{color:var(--gold);font-size:3rem}[hidden]{display:none!important}@media(max-width:699px){.hero-grid{grid-template-columns:1fr}.cover{width:100%}.guide-grid,.game-info-sections{grid-template-columns:1fr}.stage-list{grid-template-columns:1fr}.stage-card{min-height:120px}.choice-grid{grid-template-columns:1fr}.constellation-choice{min-height:190px}.panel-screen{padding:10px}.panel-head{grid-template-columns:52px minmax(0,1fr) 84px}.game-info-facts{flex-direction:column;gap:8px}}@media(max-height:520px) and (orientation:landscape){.hero-grid{grid-template-columns:300px minmax(0,1fr)}.cover{width:300px}.main-screen{padding:8px}.guide-card{margin-top:10px}.panel-screen{padding:8px}.constellation-choice{min-height:165px}.star-board{min-height:110px}}
.cover{aspect-ratio:1}
.guide-art{display:block;width:min(180px,100%);aspect-ratio:1;object-fit:contain;object-position:left bottom;filter:drop-shadow(0 12px 18px #0007)}
.panel-screen{background-image:linear-gradient(145deg,#07152ddd,#102f4bcc),url("assets/animal-constellation-keeper-background.png");background-size:cover;background-position:center;background-attachment:fixed}
.star-glyph{display:block;width:46px;height:46px;background-image:url("assets/animal-constellation-keeper-constellation-atlas.png");background-repeat:no-repeat;background-size:300% 200%;filter:drop-shadow(0 0 8px #fff8)}
.star-glyph[data-animal="fox"]{background-position:0 0}.star-glyph[data-animal="deer"]{background-position:50% 0}.star-glyph[data-animal="rabbit"]{background-position:100% 0}.star-glyph[data-animal="bear"]{background-position:0 100%}.star-glyph[data-animal="cat"]{background-position:50% 100%}.star-glyph[data-animal="owl"]{background-position:100% 100%}
.wp-standard-main-poster{position:relative}
.wp-standard-main-poster::after{content:"";position:absolute;right:-4%;bottom:-4%;width:30%;height:30%;background:url("assets/animal-constellation-keeper-orla.png") center/contain no-repeat;filter:drop-shadow(0 10px 14px #0009);pointer-events:none}
@media(max-width:699px){.wp-standard-main-poster::after{right:-2%;bottom:-2%;width:34%;height:34%}}

/* Keep the shared Main contract's landscape column at the exact 300px
   acceptance size; the shared wrapper supplies the square poster itself. */
@media(min-width:700px) and (max-height:560px){body[data-wp-game-id="animal-constellation-keeper"] .wp-standard-main-composition{--wp-main-landscape-poster-size:420px!important}}

/* Keep the public guide's outer frame padded on every viewport. */
.game-page-info{padding:12px 12px 24px}

/* Preserve the authored Guide frame under Interface 7's layered skin. */
@layer wp-frame-contract {
  html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-constellation-keeper"] .game-page-info { border-radius: 24px !important; }
  html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-constellation-keeper"] .game-page-info .game-info-sections { display: grid !important; }
  html[data-wp-shared-interface="7"] body[data-wp-game-id="animal-constellation-keeper"] .game-page-info .game-info-section { border-radius: 16px !important; }
}

/* The four-map selector must keep every card centre inside the logical
   Canvas on wide screens. A fitted grid preserves all four available maps
   while avoiding a partially off-Canvas button intercepting its own centre. */
@media(min-width:700px){body[data-wp-game-id="animal-constellation-keeper"] [data-wp-stage-rail]{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;padding-inline:0!important;overflow:hidden!important}body[data-wp-game-id="animal-constellation-keeper"] [data-wp-stage-rail]>.stage-card{flex:1 1 0!important;width:auto!important;min-width:0!important;max-width:none!important;height:190px!important;min-height:190px!important;max-height:190px!important}}

/* Interface 6 Stage contract: the shared scaler owns the fixed Canvas while
   this game supplies the standard header, rail, three-slot tabs, and art. */
.stage-canvas{display:grid;grid-template-rows:60px minmax(0,1fr) 56px;gap:8px;min-height:0;padding:14px;overflow:hidden;background:#17243a}
.stage-canvas .panel-head{min-height:60px;margin:0}
.stage-canvas .panel-head h2{color:#f8fafc}
.stage-canvas .stage-list{display:flex;align-items:center;min-height:0;margin:0;padding-block:0;overflow-x:auto;overflow-y:hidden}
.stage-canvas .stage-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:8px;min-height:56px;margin:0;padding:6px;border-radius:12px;background:rgb(13 27 45 / 78%)}
.stage-canvas .stage-tabs>span,.stage-canvas .stage-tabs>button{min-width:0;min-height:44px}
.stage-canvas .stage-tabs button{padding:8px 10px;border:1px solid rgb(255 255 255 / 25%);border-radius:10px;color:#f8fafc;background:rgb(255 255 255 / 8%);font-weight:800}
.stage-canvas .stage-tabs button[aria-current="page"]{border-color:var(--gold);background:rgb(244 201 107 / 20%);box-shadow:0 0 0 2px rgb(244 201 107 / 20%)}
.stage-canvas .stage-ad-reserve{display:none}

/* v5 campaign rail: keep the 30 authored maps discoverable without making
   the logical Stage Canvas taller than the shared I6 contract. */
@media(min-width:700px){body[data-wp-game-id="animal-constellation-keeper"] [data-wp-stage-rail]{display:flex!important;align-items:center;gap:12px;padding-inline:0!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory}body[data-wp-game-id="animal-constellation-keeper"] [data-wp-stage-rail]>.stage-card{flex:0 0 calc((100% - 36px)/4)!important;width:auto!important;min-width:0!important;max-width:none!important;height:190px!important;min-height:190px!important;max-height:190px!important;scroll-snap-align:center}}
@media(max-width:699px){body[data-wp-game-id="animal-constellation-keeper"] [data-wp-stage-rail]>.stage-card{flex:0 0 min(280px,calc(100% - 24px));width:auto;min-height:170px}}

/* v5 Battle fit: reserve a compact, fully tappable control band on phones. */
@media(max-width:699px){body[data-wp-game-id="animal-constellation-keeper"] .battle-canvas{padding:6px 8px 8px;gap:6px}.battle-canvas>.panel-head{min-height:52px;height:52px;grid-template-columns:44px minmax(0,1fr) 88px;gap:6px}.battle-canvas>.panel-head .back-btn{width:42px;height:42px}.battle-canvas>.panel-head h2{font-size:1rem;line-height:18px}.battle-canvas>.panel-head .round-label{font-size:.72rem;line-height:14px}.battle-canvas>.panel-head .icon-btn{width:40px;height:40px}.battle-canvas>.panel-head .check-pill{min-height:34px;padding:0 6px;font-size:.68rem}.battle-content{gap:6px;padding:4px 0 8px}.battle-content>.map-intro{min-height:32px;height:32px;padding:6px 8px;font-size:.72rem;line-height:18px;overflow:hidden}.battle-content>.rule-card{min-height:82px;height:82px;padding:7px 8px}.battle-content>.rule-card h3,.battle-content>.choice-card h3{margin-bottom:4px;font-size:.78rem;line-height:16px}.battle-content>.rule-card p{margin:2px 0;font-size:.72rem;line-height:17px}.battle-content>.choice-card{min-height:154px;height:154px;padding:7px 8px}.battle-content>.choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.battle-content>.choice-grid .constellation-choice{min-height:116px;height:116px;padding:4px;display:grid;gap:2px}.battle-content>.choice-grid .choice-label{margin:0;font-size:.64rem;line-height:13px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.battle-content>.choice-grid .star-board{min-height:82px;height:82px}.battle-content>.choice-grid .star-glyph{width:28px;height:28px}.battle-status{min-height:40px;height:40px;padding:6px 8px;font-size:.72rem;line-height:16px;overflow:hidden}.battle-actions{height:52px;min-height:52px;gap:6px}.battle-actions>*{min-height:52px;height:52px;padding:8px 6px;font-size:.78rem;line-height:18px}}
@media(max-height:520px) and (orientation:landscape){body[data-wp-game-id="animal-constellation-keeper"] .battle-canvas{padding:4px 8px 6px;gap:4px}.battle-canvas>.panel-head{min-height:42px;height:42px;grid-template-columns:38px minmax(0,1fr) 82px;gap:4px}.battle-canvas>.panel-head .back-btn{width:36px;height:36px}.battle-canvas>.panel-head .icon-btn{width:34px;height:34px}.battle-canvas>.panel-head .check-pill{min-height:28px;font-size:.62rem}.battle-content{gap:4px;padding:2px 0 4px}.battle-content>.map-intro{min-height:24px;height:24px;padding:3px 6px;font-size:.62rem;line-height:15px}.battle-content>.rule-card{min-height:52px;height:52px;padding:4px 6px}.battle-content>.rule-card h3,.battle-content>.choice-card h3{margin-bottom:2px;font-size:.68rem;line-height:12px}.battle-content>.rule-card p{margin:0;font-size:.62rem;line-height:14px}.battle-content>.choice-card{min-height:92px;height:92px;padding:4px 6px}.battle-content>.choice-grid{gap:3px}.battle-content>.choice-grid .constellation-choice{min-height:72px;height:72px;padding:2px;gap:1px}.battle-content>.choice-grid .choice-label{font-size:.55rem;line-height:10px}.battle-content>.choice-grid .star-board{min-height:52px;height:52px}.battle-content>.choice-grid .star-glyph{width:18px;height:18px}.battle-status{min-height:28px;height:28px;padding:4px 6px;font-size:.62rem;line-height:12px}.battle-actions{height:38px;min-height:38px;gap:4px}.battle-actions>*{min-height:38px;height:38px;padding:4px;font-size:.64rem;line-height:14px}}
@media(max-width:699px){body[data-wp-game-id="animal-constellation-keeper"] .battle-canvas>.panel-head .icon-btn{width:44px;height:44px;min-width:44px;min-height:44px}}
@media(max-height:520px) and (orientation:landscape){body[data-wp-game-id="animal-constellation-keeper"] .battle-canvas>.panel-head{grid-template-columns:48px minmax(0,1fr) 88px}body[data-wp-game-id="animal-constellation-keeper"] .battle-canvas>.panel-head .back-btn,body[data-wp-game-id="animal-constellation-keeper"] .battle-canvas>.panel-head .icon-btn{width:44px;height:44px;min-width:44px;min-height:44px}}
@media(max-width:699px){body[data-wp-game-id="animal-constellation-keeper"] .battle-header-tools{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:0;min-width:0}.battle-header-tools .check-pill{min-width:0;overflow:hidden;white-space:nowrap}.battle-header-tools .icon-btn{justify-self:end}}
@media(max-height:520px) and (orientation:landscape){body[data-wp-game-id="animal-constellation-keeper"] .battle-header-tools{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:0;min-width:0}.battle-header-tools .check-pill{min-width:0;overflow:hidden;white-space:nowrap}.battle-header-tools .icon-btn{justify-self:end}}

/* The choice rail is nested inside .choice-card; keep the selector explicit
   so the compact rules actually constrain the authored boards. */
@media(max-width:699px){body[data-wp-game-id="animal-constellation-keeper"] .battle-content>.choice-card>.choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.battle-content>.choice-card>.choice-grid .constellation-choice{min-height:116px;height:116px;padding:4px;display:grid;gap:2px}.battle-content>.choice-card>.choice-grid .choice-label{margin:0;font-size:.64rem;line-height:13px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.battle-content>.choice-card>.choice-grid .star-board{min-height:82px;height:82px}.battle-content>.choice-card>.choice-grid .star-glyph{width:28px;height:28px}}
@media(max-height:520px) and (orientation:landscape){body[data-wp-game-id="animal-constellation-keeper"] .battle-content>.choice-card>.choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}.battle-content>.choice-card>.choice-grid .constellation-choice{min-height:72px;height:72px;padding:2px;display:grid;gap:1px}.battle-content>.choice-card>.choice-grid .choice-label{font-size:.55rem;line-height:10px}.battle-content>.choice-card>.choice-grid .star-board{min-height:52px;height:52px}.battle-content>.choice-card>.choice-grid .star-glyph{width:18px;height:18px}}
