:root{--game-ink:#24334c;--game-paper:#fdf8ef;--game-coral:#bb5033;--game-gold:#ffc644;--game-blue:#70b0cc}
*{box-sizing:border-box}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.game-main{width:min(100%,1180px);margin:0 auto;padding:0 14px 42px}
.hero-stage{margin:20px auto 0;width:min(100%,840px);aspect-ratio:840/470;background:var(--game-paper)}
.hero-stage img{display:block;width:100%;height:100%;object-fit:contain}
.intro-copy{text-align:center}
.intro-copy h1{margin:5px 0 8px;font-size:clamp(2rem,7vw,4.7rem)}
.intro-copy .dek{width:min(100%,740px);margin:0 auto 12px;font-weight:800;line-height:1.6}
.intro-copy #start{width:min(100%,420px);margin:10px auto 6px}
.unofficial{display:inline-block;margin:8px 0 0;color:#526477;font-size:.78rem;font-weight:800}
.rule-flow{display:grid;grid-template-columns:repeat(3,1fr);counter-reset:rule;list-style:none;margin:10px 0 12px;padding:0;border-block:1px solid #c7d0d7}
.rule-flow li{display:grid;grid-template-columns:2.1rem 1fr;align-items:center;min-height:54px;padding:8px 12px;text-align:left;font-weight:850;line-height:1.35}
.rule-flow li+li{border-left:1px solid #c7d0d7}
.rule-flow li::before{counter-increment:rule;content:"0" counter(rule);color:var(--game-coral);font-size:.83rem;font-weight:950;letter-spacing:.04em}
#play{width:min(100%,470px);margin:7px auto 0;padding:0}
.play-panel{display:grid;gap:6px}
.play-hud{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.status-ticket{min-width:0;padding:5px 8px;background:#fff;border-left:5px solid var(--game-blue);font-size:.78rem;line-height:1.25}
.status-ticket b{display:block;font-size:1.06rem}
.board-frame{width:100%;height:min(470px,calc(var(--hg-visual-viewport-height) - 214px));min-height:330px;margin:auto;background:var(--game-paper)}
#board{display:block;width:100%;height:100%;touch-action:none}
.dish-score rect{fill:#fffdf6;stroke:#24334c;stroke-width:2}
.dish-score text{fill:#24334c;font:900 16px Arial,sans-serif}
.dish-score.is-83 rect{fill:var(--game-gold);stroke-width:3}
.dish-score.score-shuffled{animation:score-shuffle .2s ease-out}
.machine-pin.pin-hit{animation:pin-pop .16s ease-out}
.return-cloth.return-hit{animation:return-dip .24s ease-out}
.settled-egg{filter:drop-shadow(2px 2px 0 rgba(36,51,76,.18))}
.feedback-panel{min-height:34px;padding:6px 9px;display:grid;grid-template-columns:22px 1fr;align-items:center;gap:7px;background:rgba(255,255,255,.94);border:0;border-left:5px solid var(--game-blue);border-radius:6px;box-shadow:0 2px 0 rgba(36,51,76,.12);font-size:.79rem;font-weight:800;line-height:1.25;pointer-events:none}
.feedback-panel[data-kind="success"]{border-left-color:#2f8a64}.feedback-panel[data-kind="miss"]{border-left-color:var(--game-coral)}
#feedback-icon{font-weight:950;text-align:center}
#drop{min-height:50px;width:100%;padding:10px 14px;color:#071323;background:var(--game-gold);border:3px solid #071323;border-radius:11px;box-shadow:0 5px 0 #071323;font:inherit;font-weight:950;cursor:pointer;touch-action:manipulation;transition:transform .12s,box-shadow .12s}
#drop:active{transform:translateY(4px);box-shadow:0 1px 0 #071323}
#drop:disabled{background:#d7dce0;color:#526477;border-color:#526477;box-shadow:none;cursor:not-allowed;transform:none}
.result-card{width:min(100% - 12px,760px);margin:7px auto 28px;padding:16px;text-align:center;background:#fffaf0;border:4px solid #071323;border-radius:22px;box-shadow:0 8px 0 rgba(7,19,35,.16)}
.result-growth{width:min(100%,620px);margin:0 auto 12px;padding:10px 14px 8px;background:var(--game-paper);overflow:hidden}
.result-growth-art{width:min(42vw,180px);aspect-ratio:8/9;margin:0 auto;background-image:url("./art/hatch-stages.svg?v=5");background-repeat:no-repeat;background-size:400% 100%;background-position:0 0;animation:hatch-in .22s ease-out}
.result-growth-art.stage-mid{background-position:33.333% 0}
.result-growth-art.stage-high{background-position:66.667% 0}
.result-growth-art.stage-top{background-position:100% 0}
.growth-track{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid #c7d0d7}
.growth-track span{position:relative;padding:8px 2px 2px;color:#657487;font-size:.68rem;font-weight:900;letter-spacing:.02em}
.growth-track span::before{content:"";position:absolute;top:-6px;left:calc(50% - 5px);width:10px;height:10px;background:#c7d0d7;border:2px solid var(--game-paper);transform:rotate(45deg)}
.growth-track span.is-current{color:var(--game-coral)}
.growth-track span.is-current::before{background:var(--game-coral)}
.result-score-line{margin:0;font-size:clamp(3rem,14vw,6rem);font-weight:950;line-height:1}
.result-score-line small{font-size:.28em}
#result-rank{margin:8px 0 3px;font-size:clamp(1.25rem,5vw,2rem);font-weight:950}
.result-growth-copy{margin:3px auto 5px;color:#3e5267;font-weight:850}
#result-detail{margin:4px 0 12px;font-weight:800}
.memorial{margin:12px auto;padding:12px;width:min(100%,620px);background:#fff;border-left:5px solid var(--game-coral);line-height:1.7;text-align:left}
.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(100%,620px);margin:0 auto}
#editorial{width:min(100%,760px);margin:28px auto 0;padding:0 16px;line-height:1.75}
#editorial section{margin:18px 0}
#editorial h2{margin:0 0 7px}
#editorial a{color:#17324d;text-decoration-thickness:2px;text-underline-offset:3px}
body.hg-game-active{overflow-y:hidden}
body.hg-game-active #editorial{display:none}
@keyframes pin-pop{50%{transform:translateY(3px)}}
@keyframes return-dip{50%{transform:translateY(4px)}}
@keyframes score-shuffle{0%{transform:translateY(-4px);opacity:.35}100%{transform:translateY(0);opacity:1}}
@keyframes hatch-in{0%{transform:translateY(8px) scale(.94);opacity:.35}100%{transform:translateY(0) scale(1);opacity:1}}
@media(max-width:680px){
  .game-main{padding:0 6px 24px}
  .hero-stage{margin-top:10px;border-width:3px!important;border-radius:12px!important}
  .intro-copy h1{font-size:clamp(2rem,10.4vw,3.1rem)}
  .rule-flow{grid-template-columns:1fr}
  .rule-flow li{min-height:46px;padding:7px 2px}
  .rule-flow li+li{border-left:0;border-top:1px solid #c7d0d7}
  #play{margin-top:4px}
  .play-hud{gap:4px}
  .status-ticket{padding:4px 6px;font-size:.72rem}
  .board-frame{height:min(420px,calc(var(--hg-visual-viewport-height) - 202px));min-height:318px;border-width:3px!important;border-radius:12px!important;box-shadow:4px 4px 0 rgba(7,19,35,.18)!important}
  .feedback-panel{min-height:31px;padding:4px 7px;font-size:.74rem}
  #drop{min-height:48px;padding:8px 10px}
  .result-card{padding:10px}
  .result-growth{padding:6px 8px}
  .result-growth-art{width:min(48vw,166px)}
  .result-actions{grid-template-columns:1fr}
  #editorial{padding:0 16px}
}
@media(max-height:680px) and (max-width:680px){
  .board-frame{height:min(392px,calc(var(--hg-visual-viewport-height) - 194px));min-height:300px}
}
@media(prefers-reduced-motion:reduce){
  .machine-pin.pin-hit,.return-cloth.return-hit,.dish-score.score-shuffled,.result-growth-art{animation:none}
  #drop{transition:none}
}