:root{--black:#11131a;--cream:#fff1d6;--orange:#ff7045;--lime:#97e63e;--violet:#c55de7;--yellow:#ffd64a;--mono:"DM Mono",monospace;--sans:"Manrope",system-ui,sans-serif;--display:"Bowlby One SC",Impact,sans-serif}
*{box-sizing:border-box}html{background:var(--black)}body{margin:0;background:var(--orange);color:var(--black);font-family:var(--sans);line-height:1.4}button,a{font:inherit}button{touch-action:manipulation}:focus-visible{outline:4px solid var(--lime);outline-offset:4px}
.game-header{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 clamp(1rem,5vw,5rem);background:var(--black);color:var(--cream);border-bottom:4px solid var(--cream)}.brand{display:flex;align-items:center;gap:.8rem;color:inherit;text-decoration:none;font:500 .76rem var(--mono);letter-spacing:.08em}.brand span{display:grid;place-items:center;width:38px;aspect-ratio:1;color:var(--black);background:var(--lime);font:1rem var(--display);transform:rotate(-2deg)}.header-actions{display:flex;gap:.6rem}.header-actions button,.header-actions a{border:2px solid #596070;padding:.65rem .8rem;background:transparent;color:var(--cream);text-decoration:none;font:500 .68rem var(--mono);letter-spacing:.04em;cursor:pointer}.header-actions button:hover,.header-actions a:hover{border-color:var(--lime)}
.title-block{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1.5rem,6vw,6rem);padding:clamp(3rem,8vw,7rem) clamp(1rem,6vw,6rem);background:var(--orange)}.title-block>p{grid-column:1/-1;margin:0;font:500 .72rem var(--mono);letter-spacing:.13em}.title-block h1{margin:0;color:var(--black);font:clamp(4rem,11vw,10.5rem)/.78 var(--display);letter-spacing:-.055em;text-transform:uppercase;text-shadow:4px 4px 0 var(--cream)}.title-note{align-self:end;display:grid;gap:.8rem;max-width:440px;padding:1.5rem;background:var(--cream);border:4px solid var(--black);box-shadow:8px 8px 0 var(--black);transform:rotate(1deg)}.title-note strong{font-family:var(--display);font-size:clamp(1.25rem,2vw,2rem);line-height:1}
.quick-guide{padding:clamp(2rem,5vw,4.5rem) clamp(1rem,6vw,6rem);background:var(--violet);border-top:6px solid var(--black)}.guide-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}.guide-heading p{margin:0;font:500 .7rem var(--mono);letter-spacing:.12em}.guide-heading h2{margin:0;font:clamp(2.2rem,5vw,5rem)/.9 var(--display)}.guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--black);border:4px solid var(--black)}.guide-grid article{padding:clamp(1rem,2.5vw,2rem);background:var(--cream)}.guide-grid article:nth-child(2){background:var(--lime)}.guide-grid article:nth-child(3){background:var(--yellow)}.guide-grid article:nth-child(4){background:var(--orange)}.guide-grid span{font:500 .66rem var(--mono)}.guide-grid h3{margin:.55rem 0;font:clamp(1.25rem,2.4vw,2.1rem)/1 var(--display)}.guide-grid p{margin:0;font-size:.9rem;font-weight:700}.view-picker{display:flex;align-items:center;gap:.55rem;padding:1rem clamp(1rem,6vw,6rem);background:var(--cream);border-top:5px solid var(--black)}.view-picker span{margin-right:.45rem;font:500 .68rem var(--mono);letter-spacing:.12em}.view-picker button{border:3px solid var(--black);padding:.65rem 1rem;background:transparent;color:var(--black);font:500 .72rem var(--mono);cursor:pointer}.view-picker button[aria-pressed="true"]{background:var(--orange);box-shadow:3px 3px 0 var(--black)}
.game-shell{padding:clamp(1rem,3vw,2.2rem);background:var(--cream);border-block:6px solid var(--black)}.hud{display:grid;grid-template-columns:repeat(4,1fr);max-width:1100px;margin:0 auto;background:var(--black);color:var(--cream);border:4px solid var(--black);gap:4px}.hud div{display:grid;gap:.3rem;padding:.8rem clamp(.6rem,2vw,1.3rem);background:#222633}.hud span{color:var(--orange);font:500 .62rem var(--mono);letter-spacing:.12em}.hud strong{font:clamp(1.35rem,3vw,2.4rem) var(--display)}
.canvas-wrap{position:relative;width:min(100%,900px);aspect-ratio:4/5;margin:clamp(1rem,2vw,1.5rem) auto;overflow:hidden;background:#e96846;border:5px solid var(--black);box-shadow:9px 9px 0 var(--violet)}#game-canvas{display:block;width:100%;height:100%}.start-card,.result-card{position:absolute;inset:auto 6% 6%;padding:clamp(1.2rem,4vw,2.5rem);background:rgba(17,19,26,.96);color:var(--cream);border:5px solid var(--cream);box-shadow:8px 8px 0 var(--lime)}.card-kicker{margin:0 0 .7rem;color:var(--lime);font:500 .66rem var(--mono);letter-spacing:.14em}.start-card h2,.result-card h2{margin:0;color:var(--orange);font:clamp(2rem,7vw,5.5rem)/.84 var(--display);letter-spacing:-.03em}.start-card p:not(.card-kicker),.result-card p:not(.card-kicker){max-width:620px;margin:1rem 0;font-weight:700}.start-card button,.result-card button{min-height:52px;border:0;padding:.8rem 1rem;background:var(--lime);color:var(--black);font:1rem var(--display);cursor:pointer;box-shadow:4px 4px 0 var(--orange)}.start-card button:disabled{background:#7a7d82;cursor:wait}.result-actions{display:flex;flex-wrap:wrap;gap:.7rem}.result-actions #rules-button{background:var(--cream)}
.mobile-controls{display:grid;grid-template-columns:1fr 1.05fr 1.05fr 1fr;gap:clamp(.35rem,1.5vw,.8rem);width:min(100%,900px);margin:1.4rem auto 0}.mobile-controls,.mobile-controls button,.canvas-wrap,#game-canvas{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.mobile-controls button{min-height:70px;border:4px solid var(--black);background:var(--violet);color:var(--black);font:clamp(.75rem,2.2vw,1.15rem) var(--display);cursor:pointer;box-shadow:4px 4px 0 var(--black);touch-action:none}.mobile-controls .knock-button{background:var(--lime)}.mobile-controls .dodge-button{background:var(--yellow)}.mobile-controls .dodge-button:disabled{background:#b3aa8c;color:#595548;cursor:wait}.mobile-controls button:active,.mobile-controls button.is-held{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--black)}.status-strip{display:flex;justify-content:space-between;gap:1rem;width:min(100%,900px);margin:1.2rem auto 0;padding:1rem;color:var(--cream);background:var(--black);font:500 .67rem var(--mono);letter-spacing:.04em}.status-strip>span:first-child{color:var(--yellow)}
footer{display:flex;justify-content:space-between;gap:1rem;padding:2rem clamp(1rem,6vw,6rem);background:var(--black);color:var(--cream);font:500 .7rem var(--mono)}footer a{color:var(--lime)}.mobile-view{user-select:none}.mobile-view .title-note{display:none}.game-active{overscroll-behavior:none}.game-active .game-shell,.game-active .canvas-wrap,.game-active #game-canvas,.game-active .mobile-controls{touch-action:none;overscroll-behavior:contain}.mobile-view.game-active .game-header,.mobile-view.game-active .title-block,.mobile-view.game-active .quick-guide,.mobile-view.game-active .view-picker,.mobile-view.game-active footer{display:none}.mobile-view.game-active .game-shell{display:flex;min-height:100svh;flex-direction:column;justify-content:center;border:0}.mobile-view.game-active .canvas-wrap{width:min(100%,calc((100svh - 210px)*.8),900px)}
@media(max-width:700px){.game-header{min-height:66px}.brand{font-size:0;gap:0}.brand span{font-size:1rem}.title-block{grid-template-columns:1fr;padding:2.2rem 1rem}.title-block h1{font-size:clamp(3.5rem,18vw,6rem)}.title-note{align-self:auto}.quick-guide{padding:1.2rem 1rem}.guide-heading{align-items:start;flex-direction:column;gap:.35rem}.guide-heading h2{font-size:2rem}.guide-grid{grid-template-columns:repeat(2,1fr)}.guide-grid article{padding:.8rem}.guide-grid h3{font-size:1.05rem}.guide-grid p{font-size:.72rem;line-height:1.3}.view-picker{padding:.8rem 1rem}.game-shell{padding:.55rem}.hud div{padding:.55rem .35rem}.hud span{font-size:.5rem}.hud strong{font-size:clamp(.9rem,4.7vw,1.45rem)}.canvas-wrap{margin:.55rem auto;border-width:3px;box-shadow:5px 5px 0 var(--violet)}.start-card,.result-card{inset:auto 4% 4%;border-width:3px;box-shadow:5px 5px 0 var(--lime)}.start-card p:not(.card-kicker),.result-card p:not(.card-kicker){font-size:.8rem}.mobile-controls{margin-top:.65rem}.mobile-controls button{min-height:58px;border-width:3px;font-size:clamp(.62rem,3vw,.86rem)}.desktop-hint{display:none}.status-strip{justify-content:center;margin-top:.65rem;padding:.75rem;text-align:center}.mobile-view{user-select:none}.mobile-view .title-note{display:none}.mobile-view.game-active .game-header,.mobile-view.game-active .title-block,.mobile-view.game-active .quick-guide,.mobile-view.game-active .view-picker,.mobile-view.game-active footer{display:none}.mobile-view.game-active .game-shell{display:flex;min-height:100svh;flex-direction:column;justify-content:center;border:0}.mobile-view.game-active .canvas-wrap{width:min(100%,calc((100svh - 210px)*.8),900px)}}
@media(max-width:390px){.header-actions a{display:none}.title-block{padding-top:2.4rem}.start-card{padding:1rem}.start-card h2,.result-card h2{font-size:1.9rem}.start-card p:not(.card-kicker),.result-card p:not(.card-kicker){margin:.65rem 0}.start-card button,.result-card button{min-height:44px;font-size:.85rem}}