:root{color-scheme:dark;--ink:#f7ebd1;--gold:#f1bd50;--teal:#142c2d;--cream:#fff1d6;--red:#bf4939;font-family:ui-rounded,"Arial Rounded MT Bold",Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#142c2d}body{background:radial-gradient(ellipse at 50% 15%,#284849 0,#142c2d 65%);color:var(--ink)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:3px solid #ffda7b;outline-offset:4px}button:disabled{cursor:wait;opacity:.65}[hidden]{display:none!important}.shell{max-width:1260px;margin:auto;padding:28px 24px 18px}.masthead{display:flex;justify-content:space-between;align-items:center;margin:0 0 22px}.eyebrow{font-size:10px;letter-spacing:2.2px;font-weight:800;color:#d4b98c}.masthead h1{font-family:Georgia,serif;font-size:30px;letter-spacing:-.7px;margin:7px 0 0}.masthead em{color:#efbd60;font-weight:400}.edition{border:1px solid #728077;border-radius:6px;font-size:11px;letter-spacing:2px;padding:12px;color:#d8caa9}.game{margin-inline:auto;position:relative;aspect-ratio:1000/560;border:2px solid #a37d4d;border-radius:18px;overflow:hidden;box-shadow:0 26px 70px #06171899;background:#453221;isolation:isolate}canvas{width:100%;height:100%;display:block}.hud{position:absolute;inset:18px 24px auto;display:flex;align-items:flex-start;gap:20px;pointer-events:none}.fighter-hud{width:calc(50% - 70px);background:#1e2929dc;border:1px solid #c0a26a;padding:10px 14px 12px;border-radius:10px;box-shadow:0 4px 0 #171c1b55}.name-line{display:flex;align-items:center;gap:10px;height:24px}.name-line strong{font-family:Georgia,serif;font-size:22px;letter-spacing:.5px}.name-line>span{font-size:10px;letter-spacing:1px;color:#d2c3a6}.pips{display:flex;gap:6px;margin-left:auto}.pips i{width:13px;height:13px;border-radius:50%;border:1.5px solid #c5b99e;background:#212927}.pips i.filled{background:#ffd36e;border-color:#ffe8b8;box-shadow:none}.coconut-hud .pips{margin-left:0;margin-right:auto}.coconut-hud .name-line{justify-content:flex-end}.health-track{height:9px;background:#101e1f;border-radius:9px;margin-top:6px;overflow:hidden}.health-track>div{height:100%;width:100%;background:linear-gradient(90deg,#e8ae3e,#ffdc77);border-radius:9px;transform-origin:left;transition:transform .15s}.coconut-hud .health-track>div{background:linear-gradient(90deg,#ce7852,#ebaa7c);margin-left:auto;transform-origin:right}.timer{width:100px;text-align:center;background:#2e3028dc;border:1px solid #c0a26a;border-radius:8px;padding:8px 0}.timer>span{font-size:29px;font-family:Georgia,serif;font-weight:700;display:block;font-variant-numeric:tabular-nums}.timer small{font-size:8px;letter-spacing:1.3px;color:#dbc19a}.utility{position:absolute;top:105px;right:24px;display:flex;gap:8px}.utility button{width:36px;height:36px;background:#182e2dcc;border:1px solid #cbb89088;border-radius:50%;color:#fff0d5;font-size:18px}.coach{position:absolute;top:101px;left:50%;transform:translateX(-50%);font-size:12px;color:#fff4d8;white-space:nowrap;background:#243331bd;border-radius:30px;padding:7px 14px;pointer-events:none}.toast{position:absolute;top:31%;left:50%;transform:translateX(-50%) rotate(-4deg);font:900 clamp(20px,3vw,42px) Georgia,serif;color:#fff1b9;text-shadow:0 3px #7b361e,2px 0 #7b361e,-2px 0 #7b361e;pointer-events:none;opacity:0;transition:opacity .08s;white-space:nowrap}.toast.show{opacity:1}.touch-controls{position:absolute;inset:0;pointer-events:none}.joystick{position:absolute;left:28px;bottom:26px;width:106px;height:106px;pointer-events:auto;touch-action:none;user-select:none}.stick-ring{position:absolute;inset:0;border:2px solid #f9e4bcaa;background:#443f3780;border-radius:50%;box-shadow:inset 0 0 0 11px #ffdfad22,0 3px 14px #00000033}.stick-knob{position:absolute;left:30px;top:30px;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#c7bdab,#736d63);border:2px solid #f0dcb9;box-shadow:0 4px 0 #3f3b34;pointer-events:none}.joystick>span{position:absolute;bottom:-17px;width:100%;text-align:center;font-size:9px;letter-spacing:2px;color:#3a3325;font-weight:900}.actions{position:absolute;bottom:25px;right:26px;display:flex;align-items:end;gap:15px;pointer-events:auto}.action{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;color:#fff5de;width:83px;height:83px;box-shadow:0 5px 0 #7b2d2499,0 7px 18px #00000044;border:3px solid #ffdfad;touch-action:none;user-select:none;overflow:hidden}.action svg{width:30px;height:30px;fill:#ffe9b2;stroke:#ffe9b2;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}.action span{font-weight:900;font-size:11px;letter-spacing:1px;z-index:1}.action small{font-size:8px;opacity:.78;margin-top:2px;z-index:1}.punch{width:94px;height:94px;background:radial-gradient(circle at 35% 25%,#b94730,#922b20)}.dodge{background:radial-gradient(circle at 35% 25%,#33717b,#24535b);box-shadow:0 5px 0 #20494dcc,0 7px 18px #00000044}.dodge svg{fill:none;stroke-width:4}.action.pressed{transform:translateY(3px);box-shadow:0 2px 0 #7b2d2499}.action.ready-counter{background:radial-gradient(circle at 35% 25%,#ffd75b,#d07813);box-shadow:0 0 22px #ffda59,0 5px #9a4c18}.cooldown{position:absolute;inset:0;background:#183638bb;transform:translateY(100%);pointer-events:none}.overlay{position:absolute;inset:0;background:#102b2859;backdrop-filter:blur(3px);display:grid;place-items:center;padding:16px;z-index:5}.intro-card{color:#433427;width:min(480px,92%);text-align:center;background:#fff1d9f5;border:0;border-radius:15px;padding:30px 32px 23px;box-shadow:0 16px 60px #0a221a44}.intro-card .eyebrow{color:#9b623e}.intro-card h2{font:700 41px/1.1 Georgia,serif;letter-spacing:-.8px;margin:12px 0}.intro-card h2 em{font-weight:400;font-size:25px;color:#b25a3b;margin:0 3px}.intro-card p{font-size:15px;line-height:1.55;margin:12px 0 20px}.lesson{display:flex;justify-content:center;gap:16px;font-size:11px;margin:18px 0 23px}.lesson span{display:flex;gap:5px;align-items:center}kbd{font:700 10px Arial;background:#eee0c6;border:1px solid #c9b896;padding:4px 5px;border-radius:4px}.primary{display:block;width:100%;padding:16px 20px;border-radius:8px;background:#b64331;color:#fff6dd;box-shadow:0 4px #813426;font-weight:800;font-size:16px}.primary:hover{background:#ac3a29}.intro-card>small{display:block;margin-top:15px;font-size:10px;color:#68553e}.text-button{background:none;color:#6d4e37;padding:15px 10px 0;font-size:12px;text-decoration:underline}.result-stats{display:flex;justify-content:center;gap:28px;margin:18px 0 24px}.result-stats strong{font:700 26px Georgia,serif;display:block;color:#a5472c}.result-stats small{font-size:10px}.below>p{text-align:center;font-size:13px;line-height:1.6;color:#d9ccb0;margin:17px 0}.below>p strong{font-size:9px;letter-spacing:1.5px;color:#e6ba6c;margin-right:10px}.below>p>span{color:#ffd979;font-weight:700}.footer-line{display:flex;justify-content:space-between;border-top:1px solid #a0a48533;padding-top:13px;color:#acb5a5;font-size:10px}.footer-line a{color:#c8cbb6;text-decoration:none}.footer-line a:hover{text-decoration:underline}
@media(min-width:1100px){.game{max-height:calc(100dvh - 210px);min-height:480px}}
@media(max-width:650px) and (orientation:portrait){.shell{padding:22px 10px 12px}.masthead{margin-bottom:18px}.masthead h1{font-size:23px}.eyebrow{font-size:8px}.edition{display:none}.game{aspect-ratio:390/440}.hud{inset:12px 8px auto;gap:6px}.fighter-hud{padding:6px 8px;width:calc(50% - 34px)}.name-line{gap:3px;height:19px}.name-line strong{font-size:13px}.name-line>span{display:none}.pips{gap:4px}.pips i{width:9px;height:9px}.timer{width:61px;padding:5px 0}.timer>span{font-size:21px}.timer small{font-size:6px;letter-spacing:.5px}.health-track{height:6px;margin-top:4px}.coach{top:76px;font-size:10px;padding:6px 9px}.utility{top:110px;right:10px;gap:5px}.utility button{width:32px;height:32px;font-size:15px}.joystick{left:22px;bottom:28px;width:96px;height:96px}.stick-knob{left:25px;top:25px}.actions{right:18px;bottom:27px;gap:12px}.action{width:72px;height:72px}.punch{width:80px;height:80px}.action small{display:none}.intro-card{padding:24px 18px;width:95%}.intro-card h2{font-size:31px}.intro-card p{font-size:13px}.lesson{gap:8px;font-size:9px}.below>p{font-size:11px;padding:0 12px}.footer-line{font-size:9px;line-height:1.7;display:block;text-align:center}.footer-line>span{display:block}.toast{top:29%;font-size:26px}}
@media(max-height:520px) and (orientation:landscape){.shell{padding:0}.masthead,.below{display:none}.game{height:100dvh;width:100%;border:0;border-radius:0;aspect-ratio:auto}.hud{inset:10px max(20px,env(safe-area-inset-right)) auto max(20px,env(safe-area-inset-left));gap:14px}.fighter-hud{padding:5px 10px 7px}.name-line strong{font-size:18px}.timer>span{font-size:24px}.timer{padding:4px 0}.coach{top:80px;font-size:10px;padding:5px 10px}.utility{top:75px;right:max(20px,env(safe-area-inset-right))}.utility button{width:32px;height:32px}.joystick{bottom:23px;left:max(20px,env(safe-area-inset-left));width:94px;height:94px}.stick-knob{left:24px;top:24px}.actions{bottom:18px;right:max(20px,env(safe-area-inset-right))}.action{width:70px;height:70px}.punch{width:80px;height:80px}.action small{display:none}.intro-card{padding:18px 26px;width:440px}.intro-card h2{font-size:31px;margin:7px 0}.intro-card p{margin:8px 0 12px;font-size:13px}.lesson{margin:10px 0 15px}.primary{padding:12px}.intro-card>small{margin-top:12px}.result-stats{margin:12px 0 16px}.toast{top:27%;font-size:32px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Usable labels and touch targets at both phone fixtures. */
.eyebrow,.name-line>span,.timer small,.action small,.joystick>span,.intro-card>small,.result-stats small,.footer-line,.below>p strong,.lesson,kbd{font-size:11px;letter-spacing:.3px}
.utility button{width:44px;height:44px;display:grid;place-items:center}.utility svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.timer{padding-left:8px;padding-right:8px}.timer small{font-size:11px;white-space:nowrap}
.action.ready-counter{color:#422907}.action.ready-counter svg{fill:#422907;stroke:#422907}
#result-kicker{font-size:12px;font-weight:700;color:#914027;margin:8px 0}
.masthead h1{margin:0}.edition{font-size:11px}.coach{font-size:12px}
::selection{background:#e3b95e;color:#233938}
@media(max-width:650px) and (orientation:portrait){.timer{width:72px}.fighter-hud{width:calc(50% - 39px)}.timer small{font-size:10px}.utility{top:105px}.utility button{width:44px;height:44px}.coach{font-size:11px}.footer-line{font-size:11px}.lesson{font-size:11px;gap:9px}.lesson span{gap:4px}.intro-card>small{font-size:11px}.name-line strong{font-size:12px}.pips i{width:8px;height:8px}}
@media(max-height:520px) and (orientation:landscape){.utility button{width:44px;height:44px}.coach{font-size:11px}.timer small{font-size:10px}}

/* Final small-screen readability floor. */
.eyebrow,.name-line>span,.timer small,.action small,.joystick>span,.intro-card>small,.result-stats small,.footer-line,.below>p strong,.lesson,kbd,.coach{font-size:12px}
@media(max-width:650px) and (orientation:portrait){.below>p{font-size:12px}.footer-line,.coach,.lesson,.intro-card>small,.timer small{font-size:12px}.toast{top:37%}}

/* The three actions stay within thumb reach without covering the move stick. */
.grab{background:#765037;box-shadow:0 5px 0 #49372bcc,0 7px 18px #00000044;width:76px;height:76px}
.action.ready-grab{background:#f4ca73;color:#382b17;border-color:#fff4ce}
.action.ready-grab svg{fill:#382b17;stroke:#382b17}
.lesson{flex-wrap:wrap;gap:10px 14px}.pause-help{font-size:13px!important;line-height:1.5}.toast{max-width:95%;white-space:normal;text-align:center;font-size:clamp(18px,2.7vw,34px)}
@media(max-width:650px) and (orientation:portrait){
 .joystick{width:84px;height:84px;left:14px;bottom:29px}.stick-knob{left:19px;top:19px}
 .actions{right:10px;bottom:27px;gap:6px}.action,.grab{width:62px;height:62px;border-width:2px}.punch{width:72px;height:72px}
 .action svg{width:23px;height:23px}.action span{font-size:12px;letter-spacing:0}.coach{white-space:normal;text-align:center;width:85%;max-width:350px;line-height:1.4;top:73px}.utility{top:122px}
 .intro-card h2{font-size:28px}.intro-card p{font-size:13px}.lesson{gap:8px 12px}.toast{top:38%;font-size:22px}
}
@media(max-height:520px) and (orientation:landscape){.actions{gap:10px}.grab{width:65px;height:65px}.pause-help{margin:6px 0!important}.toast{font-size:27px}}