*{box-sizing:border-box}
@font-face{font-family:"Headline Games JP";font-style:normal;font-display:swap;font-weight:700;src:url('./art/noto-sans-jp-joint-yen-v1.woff') format('woff')}
body.hg-game-page,body.hg-game-page *{font-family:"Headline Games JP",system-ui,-apple-system,"Segoe UI",sans-serif}
html:lang(ja) body.hg-game-page,html:lang(ja) body.hg-game-page *{font-family:"Headline Games JP","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif!important}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.game-main{width:100%}
.hero-stage{display:grid;place-items:center;min-height:300px;background:#fdf8ef;overflow:hidden}
.hero-stage img{display:block;width:100%;max-height:560px;object-fit:cover}
.intro-copy h1{margin:.15em 0;font-size:clamp(2rem,6vw,4.8rem);line-height:.98;letter-spacing:-.045em}
.intro-copy .dek{max-width:780px;margin:.6rem 0 1rem;font-size:clamp(1rem,2.4vw,1.25rem);line-height:1.65}
.eyebrow{margin:0;color:#bb5033;font-weight:950;letter-spacing:.08em}
.unofficial{display:block;margin-top:14px;color:#526477;line-height:1.55}

#play{width:min(640px,100%);height:calc(var(--hg-visual-viewport-height,100dvh) - max(var(--hg-game-header-block,116px),116px));min-height:440px;margin:0 auto;padding:4px 8px 6px;color:#24334c;background:#fdf8ef;overflow:hidden}
.play-shell{height:100%;display:grid;grid-template-rows:36px 34px minmax(0,1fr) 40px 70px;gap:4px}
.play-hud{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;align-items:stretch}
.status-ticket{min-width:0;padding:3px 4px;display:grid;place-items:center;text-align:center;background:#fff;border-bottom:3px solid #24334c;font-size:.66rem;line-height:1.05;pointer-events:none}
.status-ticket b{display:block;font-size:.92rem;line-height:1.15;white-space:nowrap}
.coach-strip{display:grid;grid-template-columns:1fr 1fr;gap:5px;min-width:0;pointer-events:none}
.coach-step{min-width:0;padding:4px 6px;display:flex;align-items:center;justify-content:center;text-align:center;background:#fff;border:2px solid rgba(36,51,76,.25);font-size:.66rem;font-weight:950;line-height:1.1;color:#526477;transition:background .16s,color .16s,transform .16s}
.coach-step[aria-current="step"]{background:#ffc644;border-color:#24334c;color:#24334c;transform:translateY(-1px)}
.coach-strip[data-step="done"] .coach-step{background:#fff;border-color:rgba(36,51,76,.25);color:#526477;transform:none}
.machine-stage{position:relative;min-height:0;display:grid;place-items:center;overflow:hidden;background:#fdf8ef;border-bottom:2px solid #24334c}
#machineHost{width:100%;height:100%;display:grid;place-items:center}
#machineHost>svg{display:block;width:100%;height:100%;max-height:100%;object-fit:contain}
.machine-stage::after{content:"";position:absolute;inset:6px;pointer-events:none;border:1px solid rgba(36,51,76,.16)}
.feedback-panel{min-width:0;padding:6px 9px;display:flex;align-items:center;background:rgba(255,255,255,.94);border:0;border-left:6px solid #70b0cc;border-radius:4px;box-shadow:0 2px 7px rgba(36,51,76,.13);font-size:.76rem;font-weight:850;line-height:1.25;pointer-events:none;overflow:hidden}
.feedback-panel[data-zone="warn"]{border-left-color:#bb5033}.feedback-panel[data-zone="done"]{border-left-color:#ffc644}.feedback-panel[data-zone="commit"]{border-left-color:#24334c}
#feedbackText{overflow-wrap:anywhere}
.controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;align-items:start;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.game-control{position:relative;min-width:0;height:64px;padding:2px 4px 13px;display:grid;place-items:center;border:4px solid #24334c;border-radius:9px;box-shadow:0 5px 0 #24334c;cursor:pointer;transition:transform .12s cubic-bezier(.2,.8,.2,1),box-shadow .12s,filter .12s;touch-action:none!important}
.game-control::after{content:attr(data-caption);position:absolute;inset:auto 2px 1px;text-align:center;font-size:.57rem;font-weight:1000;letter-spacing:.03em;line-height:1;color:#24334c}
.game-control img{width:46px;height:46px;pointer-events:none;transform:translateY(min(var(--drag,0px),15px));transition:transform .16s cubic-bezier(.2,.8,.2,1)}
.pump-control:first-child{background:#bb5033}.valve-control{background:#ffc644;touch-action:manipulation!important}.pump-control:last-child{background:#70b0cc}
.game-control:active,.game-control.is-pressed{transform:translateY(4px);box-shadow:0 1px 0 #24334c}.game-control:focus-visible{outline:4px solid #0086ff;outline-offset:2px}.game-control:disabled{cursor:not-allowed;filter:grayscale(.5);opacity:.5;transform:none;box-shadow:0 3px 0 #24334c}

#result{width:min(760px,calc(100% - 28px));margin:12px auto 40px}
.result-card{padding:16px;text-align:center;background:#fdf8ef;border:4px solid #24334c;border-radius:24px;box-shadow:0 9px 0 rgba(36,51,76,.15)}
.result-visual{height:min(42dvh,340px);display:grid;place-items:center;overflow:hidden}
#resultMachine,#resultMachine svg{display:block;width:100%;height:100%}
.result-number{margin:0;font-size:clamp(2.8rem,12vw,5.6rem);font-weight:1000;line-height:1}.result-number small{display:block;margin-top:3px;font-size:.92rem;letter-spacing:.06em}
#resultRank{margin:.35rem 0 .2rem;outline:none}.result-score{margin:.2rem 0;font-size:1.4rem;font-weight:950}.result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px}
.result-actions button{min-height:52px;padding:10px 16px;font:900 .95rem inherit}

@media(min-width:720px){.hero-stage{min-height:440px}.play-hud{grid-template-columns:repeat(4,minmax(90px,1fr))}#play{border:3px solid #24334c;border-radius:18px;margin-top:10px}.play-shell{grid-template-rows:42px 38px minmax(0,1fr) 46px 76px}.coach-step{font-size:.78rem}.game-control{height:68px}}
@media(max-width:360px){#play{padding-inline:5px}.play-shell{grid-template-rows:34px 32px minmax(0,1fr) 38px 66px;gap:3px}.status-ticket{font-size:.58rem}.status-ticket b{font-size:.8rem}.coach-step{padding:3px 4px;font-size:.58rem}.controls{gap:7px}.game-control{height:60px}.game-control img{width:46px;height:46px}.feedback-panel{font-size:.67rem}.intro-copy h1{font-size:2rem}}
@media(prefers-reduced-motion:reduce){.game-control,.game-control img,.coach-step{transition-duration:.08s}}
