:root{--game-ink:#24334c;--game-paper:#fff8e9;--game-coral:#bb5033;--game-coral-soft:#ffe0d6;--game-gold:#ffc644;--game-blue:#4a9bc3;--game-blue-soft:#d8eff9}
*{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 10px 42px}
.hero-stage{width:min(100%,840px);margin:20px auto 0;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(2.1rem,7vw,4.7rem);letter-spacing:-.045em}
.intro-copy .dek{width:min(100%,740px);margin:0 auto 12px;font-weight:850;line-height:1.6}
.intro-copy #start{width:min(100%,430px);margin:10px auto 6px}
.rule-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.rule-pair span{display:flex;align-items:center;justify-content:center;min-height:46px;border:1px solid #c7d0d7;background:#fff;font-weight:950}
.rule-pair .new{border-left:6px solid var(--game-coral)}
.rule-pair .approved{border-left:6px solid var(--game-blue)}
.unofficial{display:block;width:min(100%,760px);margin:10px auto 0;color:#5c6876;line-height:1.5}

#play{width:min(100%,900px);margin:4px auto 18px}
.play-panel{padding:8px;background:var(--game-paper);border:4px solid var(--game-ink);border-radius:18px;box-shadow:0 8px 0 rgba(36,51,76,.2)}
.play-hud{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px}
.status-ticket{min-width:0;padding:5px 9px;background:#fff;border:1px solid #a9b8c5;border-left:5px solid var(--game-blue);border-radius:7px;color:#536174;font-size:.68rem;line-height:1.05;text-transform:uppercase}
.status-ticket b{display:block;margin-top:2px;color:var(--game-ink);font-size:1.08rem;line-height:1.05;white-space:nowrap}
.target-key{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px}
.target-key-item{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:45px;padding:5px 8px;background:#fff;border:2px solid var(--game-ink);border-radius:8px;font-weight:950;line-height:1.05}
.target-key-item b{display:block;font-size:.94rem}
.target-key-item small{display:block;margin-top:2px;color:#536174;font-size:.62rem}
.target-key-item.new{background:var(--game-coral-soft);border-color:var(--game-coral)}
.target-key-item.approved{background:var(--game-blue-soft);border-color:var(--game-blue)}
.target-symbol{display:grid;place-items:center;flex:0 0 36px;width:36px;height:32px;color:#fff;font-size:1.1rem;font-weight:950}
.target-key-item.new .target-symbol{background:var(--game-coral);clip-path:polygon(50% 0,100% 100%,0 100%);padding-top:8px}
.target-key-item.approved .target-symbol{background:var(--game-blue);border-radius:50%}
.board-frame{position:relative;width:min(100%,680px);margin:auto;aspect-ratio:600/520}
#board{display:block;width:100%;height:100%;touch-action:none}
.robot text{font:900 17px Arial,sans-serif;fill:#fff;letter-spacing:.01em}
.robot .status-marker{stroke:var(--game-ink);stroke-width:6}
.robot.status-new .status-marker{fill:var(--game-coral-soft)}
.robot.status-approved .status-marker{fill:var(--game-blue-soft)}
.robot.status-new .status-symbol{fill:var(--game-coral);font-size:30px}
.robot.status-approved .status-symbol{fill:#28527a;font-size:25px}
.robot.status-new .robot-badge rect{fill:var(--game-coral);stroke:var(--game-ink);stroke-width:5}
.robot.status-approved .robot-badge rect{fill:var(--game-blue);stroke:var(--game-ink);stroke-width:5}
.robot.status-new .robot-badge text{fill:#fff}
.robot.status-approved .robot-badge text{fill:var(--game-ink)}
.blocked-trophy,.approved-worker{opacity:.95}
#shutter{transform:translateY(-390px);transform-box:fill-box;transform-origin:center;will-change:transform}
#shutter[data-phase="falling"],#shutter[data-phase="down"]{transform:translateY(0);transition:transform .12s cubic-bezier(.5,0,1,.45)}
#shutter[data-phase="rising"],#shutter[data-phase="ready"]{transform:translateY(-390px);transition:transform .25s ease-out}
.impact-line{stroke:var(--game-coral);stroke-width:9;stroke-dasharray:12 8}
.feedback-panel{position:relative;display:flex;align-items:center;gap:9px;min-height:39px;margin:7px auto;padding:7px 11px 7px 15px;color:var(--game-ink);background:rgba(255,255,255,.94);border:0;border-left:6px solid var(--game-blue);border-radius:7px;box-shadow:0 2px 5px rgba(36,51,76,.14);font-weight:850;line-height:1.25;text-align:left;pointer-events:none}
.feedback-panel[data-kind="success"],.feedback-panel[data-kind="combo"]{border-left-color:#2f8b62}
.feedback-panel[data-kind="warning"],.feedback-panel[data-kind="queued"]{border-left-color:var(--game-gold)}
.feedback-panel[data-kind="danger"],.feedback-panel[data-kind="rush"]{border-left-color:var(--game-coral)}
.feedback-panel[data-kind="rush"]{background:#fff0df}
#feedbackIcon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:50%;color:#fff;background:var(--game-ink);font-size:.78rem}
#rush{position:absolute;top:8px;left:50%;z-index:7;transform:translateX(-50%);padding:5px 10px;color:#fff;background:var(--game-coral);border:3px solid var(--game-ink);border-radius:5px;font-size:.75rem;font-weight:950;letter-spacing:.04em;pointer-events:none}
#slam{display:block;width:100%;min-height:68px;margin:0 auto;padding:12px 18px;color:var(--game-ink);background:var(--game-gold);border:4px solid var(--game-ink);border-radius:12px;box-shadow:0 6px 0 var(--game-ink);font:950 1.15rem/1.05 inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:transform .06s ease,box-shadow .06s ease,filter .06s ease}
#slam:active{transform:translateY(5px);box-shadow:0 1px 0 var(--game-ink)}
#slam.tap-accepted{filter:brightness(1.08);transform:translateY(4px);box-shadow:0 2px 0 var(--game-ink)}
#slam[data-queued="1"]::after{content:"  •  +1"}
#slam[data-queued="2"]::after{content:"  •  +2"}

#result{width:min(100%,760px);margin:10px auto 28px}
.result-card{padding:20px;color:var(--game-ink);background:var(--game-paper);border:4px solid var(--game-ink);border-radius:22px;box-shadow:0 8px 0 rgba(36,51,76,.2);text-align:center}
.result-scene{min-height:138px;display:grid;place-items:center;background:url("./art/hero.svg?v=5") center 47% / cover no-repeat;border:4px solid var(--game-ink);border-radius:14px;overflow:hidden}
.result-scene::after{content:"GATE CLOSED";padding:9px 15px;color:#fff;background:var(--game-coral);border:4px solid var(--game-ink);font-weight:950;letter-spacing:.08em;transform:rotate(-3deg)}
html:lang(ja) .result-scene::after{content:"ゲート作動完了";letter-spacing:.02em}
.result-score-line{margin:12px 0 0;font-weight:950;line-height:.9}
.result-score-line span{font-size:clamp(3.6rem,14vw,6.7rem)}
.result-score-line small{font-size:1rem}
.result-card h2{margin:5px 0;font-size:clamp(1.6rem,5vw,2.7rem)}
.result-card>p:not(.result-score-line){max-width:620px;margin:8px auto;line-height:1.55}
.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.result-actions button{width:100%}
#editorial{width:min(100%,820px);margin:26px auto 0}
#editorial section{padding:15px 0;border-top:1px solid #a9b8c5}
#editorial h2{margin:0 0 5px;font-size:1rem}
#editorial p{margin:0;line-height:1.7}
#editorial a{color:#174f7d}

@media(max-width:680px){
  .game-main{padding:0 2px 24px}
  .hero-stage{margin-top:8px}
  .intro-copy h1{font-size:2.12rem}
  .intro-copy .dek{font-size:.92rem}
  .rule-pair{grid-template-columns:1fr}
  #play{margin:3px auto 10px}
  .play-panel{padding:4px;border-width:3px;border-radius:12px;box-shadow:0 4px 0 rgba(36,51,76,.18)}
  .play-hud{gap:4px;margin-bottom:4px}
  .status-ticket{padding:4px 5px;border-left-width:3px;font-size:.56rem}
  .status-ticket b{font-size:.92rem}
  .target-key{gap:4px;margin-bottom:4px}
  .target-key-item{gap:5px;min-height:34px;padding:2px 5px}
  .target-key-item b{font-size:.82rem}
  .target-key-item small{font-size:.58rem}
  .target-symbol{flex-basis:30px;width:30px;height:28px;font-size:.9rem}
  .board-frame{width:100%;height:auto;aspect-ratio:600/520;border-radius:9px;box-shadow:3px 3px 0 rgba(36,51,76,.19)}
  .feedback-panel{min-height:34px;margin:4px 0;padding:5px 7px 5px 10px;font-size:.72rem}
  #feedbackIcon{width:19px;height:19px;font-size:.7rem}
  #slam{min-height:68px;border-width:3px;box-shadow:0 5px 0 var(--game-ink);font-size:1.08rem}
  #rush{top:4px;font-size:.62rem}
  .result-card{padding:12px;border-width:3px}
  .result-actions{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  #shutter{transition-duration:.01ms!important}
  .robot{transition:none!important}
}