/* Headline Games house-art v1.1 · action mode. Shared shell loads after this file. */
:root{--beer-blue:#234f84;--barley:#e7ad32;--brew-ink:#17324d;--brew-sky:#dbe6ef}
*{box-sizing:border-box}
[hidden]{display:none!important}
button{font:inherit}
.game-shell{width:100%;margin:0 auto 40px}
body.is-playing{overflow:hidden}
.screen{min-width:0}
.intro{display:grid;grid-template-columns:minmax(0,48%) minmax(0,52%);align-items:stretch}
.hero-stage{margin:24px 0 24px 24px;min-height:510px;background:#dbe6ef}
.hero-stage>svg{position:absolute;inset:0;width:100%;height:100%}
.hero-can{width:15%!important;height:auto!important;inset:auto!important;left:11%!important;top:44%!important;transform:rotate(-8deg);filter:drop-shadow(5px 6px 0 #07132324);animation:hero-ready 2.1s ease-in-out infinite}
.hero-ring{width:9%!important;height:auto!important;inset:auto!important;filter:drop-shadow(3px 4px 0 #0713231f)}
.hero-ring.one{left:30%!important;top:37%!important}.hero-ring.two{left:43%!important;top:25%!important}
.hero-vat{width:20%!important;height:auto!important;inset:auto!important;right:3%!important;bottom:13%!important}
.intro-copy{display:flex;flex-direction:column;justify-content:center}
.intro h1{margin:8px 0 6px;font-size:clamp(3.1rem,7vw,6.8rem);line-height:.9;letter-spacing:-.055em}
html:lang(ja) .intro h1{font-size:clamp(3rem,6.2vw,6rem)}
.eyebrow{margin:0;font-size:.78rem;font-weight:950;letter-spacing:.1em;text-transform:uppercase}
.dek{margin:0 0 12px;color:#36566d;font-size:clamp(1.05rem,2vw,1.45rem);font-weight:850;line-height:1.35}
.key-help{margin:12px 0 0;color:#526477;font-size:.75rem;text-align:center}
.error{width:min(720px,calc(100% - 28px));margin:30px auto;padding:30px;background:#fffaf0;border:4px solid #071323;border-radius:24px;text-align:center}
.play{width:min(760px,calc(100% - 24px));margin:10px auto 24px;border:4px solid #071323;border-radius:24px;background:#fffaf0;box-shadow:0 10px 0 #07132324;overflow:hidden}
.play-hud{height:54px;padding:6px 9px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) auto;align-items:center;gap:5px;background:#fffaf0;border-bottom:2px solid #a9b8c5}
.play-hud>div{min-width:0;display:flex;flex-direction:column;align-items:center;color:#526477;font-size:.58rem;font-weight:900;letter-spacing:.04em;line-height:1.15}
.play-hud b{max-width:100%;color:#071323;font-size:.9rem;letter-spacing:0;white-space:nowrap}
.play-hud .flat-state{color:#234f84}.play-hud .flat-state b{font-size:.72rem}
.pause-button{min-width:46px;min-height:42px;padding:6px 8px;border:2px solid #071323;border-radius:9px;background:#fff;color:#071323;box-shadow:0 3px 0 #071323;font-weight:900;cursor:pointer}
.pause-button:active{transform:translateY(2px);box-shadow:0 1px 0 #071323}
.playfield{position:relative;width:100%;height:430px;overflow:hidden;background:#dbe6ef;touch-action:none;user-select:none;isolation:isolate}
.yard{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.sling{position:absolute;left:14.3%;top:54%;width:13%;height:36%;z-index:4;pointer-events:none}
.sling:before,.sling:after{content:"";position:absolute;bottom:0;width:20%;height:82%;border:7px solid #17324d;border-bottom:0;border-radius:18px 18px 0 0;background:#d9563f}
.sling:before{left:7%;transform:rotate(-7deg)}.sling:after{right:7%;transform:rotate(7deg)}
.sling-band{position:absolute;left:17%;right:17%;top:28%;height:8px;border-radius:99px;background:#e7ad32;box-shadow:0 0 0 3px #17324d;transform-origin:center;transition:transform .08s}
.rings{position:absolute;inset:0;z-index:7;pointer-events:none}
.malt-ring{position:absolute;left:var(--ring-x);top:var(--ring-y);width:9.2%;aspect-ratio:1;transform:translate(-50%,-50%);filter:drop-shadow(3px 4px 0 #07132322)}
.malt-ring svg{width:100%;height:100%}.malt-ring.is-collected{animation:ring-pop .18s ease-out}
.vat{position:absolute;right:2.2%;bottom:13%;width:19%;height:37%;z-index:5;pointer-events:none;filter:drop-shadow(4px 5px 0 #07132320)}
.vat svg,.shelf svg,.can svg{width:100%;height:100%;display:block;overflow:visible}.can svg{pointer-events:none;-webkit-user-drag:none;user-select:none}
.shelf{position:absolute;right:1.2%;top:1.5%;width:24%;height:26%;z-index:6;pointer-events:none;opacity:.94}
.can{--can-x:19.17%;--can-y:65%;--can-rot:0deg;--drag-x:0px;--drag-y:0px;position:absolute;left:var(--can-x);top:var(--can-y);width:9.5%;aspect-ratio:300/340;z-index:12;transform:translate(calc(-50% + var(--drag-x)),calc(-50% + var(--drag-y))) rotate(var(--can-rot));will-change:transform;cursor:grab;touch-action:none;outline-offset:7px;-webkit-user-drag:none}
.can:active{cursor:grabbing}.can[aria-disabled="true"]{cursor:default}
.can-hit{position:absolute;inset:-12px;border-radius:50%;cursor:inherit}
.trajectory{position:absolute;inset:0;z-index:9;pointer-events:none}.trajectory i{position:absolute;width:8px;height:8px;border:2px solid #17324d;border-radius:50%;background:#fffaf0;transform:translate(-50%,-50%)}
.power{--power:0%;position:absolute;left:3%;bottom:4%;width:21%;height:12px;border:2px solid #17324d;border-radius:99px;background:#fffaf0;z-index:15;pointer-events:none;overflow:hidden}.power:before{content:"";display:block;width:var(--power);height:100%;background:#f8c35a}.power:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 22%,#17324d 22% 24%)}
.coach{position:absolute;left:8%;top:30%;z-index:16;padding:6px 9px;color:#071323;background:#f8c35a;border:2px solid #071323;border-radius:7px;box-shadow:0 3px 0 #071323;font-size:.72rem;font-weight:950;pointer-events:none;animation:coach-pull 1.1s ease-in-out infinite}.coach:after{content:"";display:inline-block;width:18px;height:12px;margin-left:6px;border-left:4px solid #071323;border-bottom:4px solid #071323;transform:rotate(-45deg)}
.moving-lip{--lip-y:46%;position:absolute;left:61%;top:var(--lip-y);width:7%;height:12px;z-index:8;border:3px solid #17324d;border-radius:99px;background:#f36f45;transform:translate(-50%,-50%);pointer-events:none;box-shadow:3px 3px 0 #07132322}
.feedback{min-height:50px;margin:0;padding:11px 14px;display:flex;align-items:center;justify-content:center;color:#071323;background:#fffaf0;border-top:2px solid #a9b8c5;border-left:7px solid #28527a;font-size:.9rem;font-weight:950;text-align:center}.feedback[data-mode="success"]{border-left-color:#f8c35a;background:#fff7dc}.feedback[data-mode="wall"],.feedback[data-mode="missed"],.feedback[data-mode="short"],.feedback[data-mode="over"]{border-left-color:#f36f45}
.timer.is-urgent b{color:#d9563f;text-decoration:underline}.timer.is-urgent{background:repeating-linear-gradient(-45deg,#fff 0 7px,#fff0ed 7px 14px)}
.pause-layer{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#fff;background:#102a43eb}.pause-layer b{font-size:clamp(1.15rem,4vw,2rem)}
.result{width:min(980px,calc(100% - 28px));margin:12px auto 30px;display:grid;grid-template-columns:minmax(0,52%) minmax(0,48%);background:#fffaf0;border:4px solid #071323;border-radius:28px;box-shadow:0 10px 0 #07132324;overflow:hidden}
.result-art{min-height:500px;display:flex;align-items:center;background:#dbe6ef}.result-art svg{width:100%;height:auto}
.result-copy{padding:28px;display:flex;flex-direction:column;justify-content:center;min-width:0}.result-copy h2{margin:5px 0 8px;font-size:clamp(1.55rem,3vw,2.7rem);line-height:1.08;overflow-wrap:anywhere}.score-line{display:flex;align-items:baseline;gap:7px}.score-line strong{font-size:clamp(4rem,9vw,7rem);line-height:.9}.score-line span{font-weight:900;color:#526477}.rank-line{margin:8px 0 14px;font-weight:850}.rank-line b{display:inline-block;margin:0 8px;padding:3px 7px;color:#fff;background:#d9563f;border-radius:4px}
.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}.result-stats p{margin:0;padding:8px 10px;color:#36566d;background:#edf3f7;border-left:4px solid #e7ad32;border-radius:5px;font-size:.82rem;font-weight:800}.result-stats p:last-child{grid-column:1/-1;background:#fff7dc;border-left-color:#f8c35a}.result-actions{display:grid;gap:9px}.news-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.news-links a{color:#28527a;font-weight:850;text-underline-offset:3px}.disclaimer{color:#526477;font-size:.72rem;line-height:1.5}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes hero-ready{50%{transform:translate(-5px,7px) rotate(-10deg)}}
@keyframes ring-pop{50%{transform:translate(-50%,-50%) scale(1.18)}}
@keyframes coach-pull{50%{transform:translate(-8px,7px)}}
@media(pointer:fine){.can-hit{inset:-30px}.can:hover{filter:drop-shadow(0 0 8px #f8c35a)}.can:active{cursor:grabbing;filter:drop-shadow(0 0 10px #f36f45)}}
@media(max-width:760px){.intro{display:block}.hero-stage{margin:12px 12px 0;min-height:0;aspect-ratio:16/9}.intro-copy{display:block}.intro h1{font-size:clamp(3rem,15vw,4.4rem);line-height:.98}.playfield{height:300px}.result{display:block}.result-art{min-height:0}.result-copy{padding:24px}.result-stats{grid-template-columns:1fr}}
@media(max-width:430px){.play{width:calc(100% - 16px);margin-top:8px;border-width:3px}.play-hud{height:50px;padding:4px;grid-template-columns:repeat(4,minmax(0,1fr)) auto}.play-hud .flat-state{display:none}.play-hud .flat-state:last-of-type{display:flex}.play-hud>div{font-size:.54rem}.play-hud b{font-size:.78rem}.play-hud .flat-state b{font-size:.66rem}.pause-button{min-height:40px;padding:5px;font-size:.66rem}.playfield{height:250px}.can{width:11.5%;min-width:40px}.malt-ring{width:10.5%;min-width:35px}.sling{width:15%;left:12.5%}.vat{width:21%;right:1%;bottom:10%}.shelf{width:27%;top:0;right:0}.coach{left:4%;top:25%;font-size:.65rem}.power{left:2%;bottom:3%;width:24%;height:10px}.feedback{min-height:48px;padding:9px 10px;font-size:.78rem}.result-copy{padding:20px 16px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}.malt-ring.is-collected{opacity:.85}}