:root{font-family:Arial,"Helvetica Neue",sans-serif;color:#eff1e9;background:#141b17;font-synthesis:none;--lime:#c6ef73;--muted:#a3ada3}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.3}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--lime);outline-offset:4px}button{color:inherit}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.app{max-width:1160px;margin:auto;padding:0 48px}.header{height:103px;display:flex;align-items:center;justify-content:space-between;direction:ltr;border-bottom:1px solid #ffffff16}.wordmark{font-size:29px;font-weight:900;letter-spacing:-1.8px;font-style:italic}.wordmark span,h1 span{color:var(--lime)}.header-actions{display:flex;align-items:center;gap:20px;direction:rtl}.quiet,.icon-button{border:0;background:none}.quiet{font-size:12px;color:#bdc7ba}.icon-button{font-size:27px;width:44px;height:44px}.layout{display:grid;grid-template-columns:1fr 442px;gap:90px;align-items:center;padding:42px 0;direction:rtl}.intro{padding:16px 0}.eyebrow{font-size:11px;color:var(--lime);letter-spacing:2.7px;text-align:right;font-weight:700}h1{font-size:clamp(66px,6.5vw,86px);line-height:1.02;letter-spacing:-4px;margin:23px 0}h1 span{padding-right:3px}.intro-copy{font-size:17px;line-height:1.8;color:var(--muted);margin:26px 0 36px}.instructions{display:grid;gap:21px}.instructions>div{display:flex;gap:19px;align-items:start}.instructions>div>span{font-size:11px;color:var(--lime);font-family:monospace;border:1px solid #c6ef7333;width:31px;height:31px;display:grid;place-items:center;border-radius:50%;margin-top:3px}.instructions p{margin:0;font-size:13px;line-height:1.9;color:var(--muted)}.instructions strong{color:#e9eee2;font-size:15px;font-weight:500}.desktop-hint{font-size:11px;line-height:1.8;color:#9ca999;margin-top:30px}.side-footer{display:block;font-size:10px;letter-spacing:2.5px;color:#869580;margin-top:56px;text-align:right}.game{position:relative;height:min(740px,calc(100dvh - 172px));min-height:620px;border-radius:24px;overflow:hidden;background:#506953;isolation:isolate;box-shadow:0 22px 90px #0003;direction:rtl;border:1px solid #ffffff15}.scoreboard{position:absolute;top:29px;left:27px;right:27px;display:flex;align-items:center;justify-content:space-between;z-index:2;direction:ltr}.scoreboard span{display:block;font-size:11px;color:#e3eddfb3;direction:rtl}.scoreboard strong{font-variant-numeric:tabular-nums;display:block;font-weight:400}.best{width:70px}.best strong{font-size:25px;margin-top:4px}.score{text-align:center;position:absolute;left:50%;transform:translateX(-50%)}.score strong{font-size:52px;line-height:1.12;letter-spacing:-2px;font-weight:600}.pause{border:1px solid #ffffff38;background:#ffffff08;width:38px;height:38px;border-radius:50%;font-size:17px}canvas{display:block;width:100%;height:100%}.feedback{position:absolute;top:24%;left:0;right:0;text-align:center;color:var(--lime);font-size:21px;font-weight:700;pointer-events:none;text-shadow:0 2px 14px #213423;transition:opacity .15s}.zone-label{position:absolute;top:62%;left:0;right:0;text-align:center;font-size:10px;color:#e3eecacc;letter-spacing:.3px;pointer-events:none}.overlay{position:absolute;left:18px;right:18px;top:51%;text-align:center;pointer-events:none}.overlay-kicker{color:#e2f3bf;font-size:11px}.overlay h2{margin:10px 0;font-size:29px;letter-spacing:-1px}.overlay p{font-size:12px;color:#e6eee0c9;line-height:1.8;margin:0}.game:not(.playing) .zone-label{display:none}.game.playing .overlay{display:none}.dock{position:absolute;bottom:0;left:0;right:0;padding:35px 28px 24px;background:linear-gradient(transparent,#243f2ac9 32%,#243f2a 100%)}.mode-switch{display:flex;gap:2px;padding:4px;background:#11221870;border:1px solid #ffffff14;border-radius:11px;margin-bottom:12px}.mode-switch button{flex:1;border:0;background:none;border-radius:7px;padding:10px 4px;color:#b6c5ad;font-size:12px}.mode-switch .selected{background:#d5e7c51a;color:#fff}.primary{width:100%;display:flex;align-items:center;justify-content:center;gap:20px;border:0;background:var(--lime);color:#1b2d18;border-radius:11px;min-height:53px;font-size:16px;font-weight:700;touch-action:manipulation;transition:background .15s,transform .1s}.primary:active{transform:scale(.985);background:#d7ffa0}.primary>span:not(.key-hint){font-size:24px;font-weight:400}.status{font-size:10px;text-align:center;color:#d6e3ccba;line-height:1.65;margin-top:12px;min-height:17px}.game.playing .mode-switch{display:none}.key-hint{font-size:10px;border:1px solid #1b2d1830;padding:3px 8px;border-radius:4px;font-weight:400}.meter-wrap{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:10px;color:#c2d3b9}.meter{height:3px;flex:1;background:#ffffff20;overflow:hidden;border-radius:3px;direction:rtl}.meter>div{height:100%;background:var(--lime);width:0;transition:width .08s}.footer{display:flex;justify-content:space-between;padding:22px 0;border-top:1px solid #ffffff16;color:#899583;font-size:10px}.footer span:last-child{letter-spacing:1.5px}dialog{background:#1d2b21;color:#edf1e8;border:1px solid #ffffff28;border-radius:22px;padding:26px;max-width:400px;width:calc(100% - 36px);box-shadow:0 30px 100px #0008}dialog::backdrop{background:#07100bbf;backdrop-filter:blur(6px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.dialog-heading h2{font-size:24px;margin:0}dialog label{display:block;font-size:13px;margin:23px 0 12px}dialog select{width:100%;padding:12px;border:1px solid #ffffff25;background:#26382a;color:#fff;border-radius:8px}dialog input{width:100%;accent-color:var(--lime)}dialog p{font-size:12px;line-height:1.8;color:#aab8a5}dialog output{float:left;color:var(--lime);direction:ltr}dialog .primary{margin-top:25px}.paused .overlay{display:block!important}.paused .zone-label{display:none}.paused canvas{filter:blur(4px)}
@media(min-width:1400px){.layout{gap:125px}.app{max-width:1230px}.game{height:740px}}@media(max-width:850px){.app{padding:0 24px}.layout{gap:35px;grid-template-columns:1fr minmax(330px,410px)}h1{font-size:64px}.game{min-height:600px}.side-footer{margin-top:32px}}
@media(max-width:680px){html,body{height:100%;overflow:hidden}.app{padding:0;height:100dvh;max-width:480px;display:flex;flex-direction:column}.header{height:62px;min-height:62px;padding:env(safe-area-inset-top) 22px 0;border:0}.wordmark{font-size:23px}.header-actions{gap:12px}.quiet{font-size:11px}.layout{display:block;padding:0;flex:1;min-height:0}.intro,.footer{display:none}.game{width:100%;height:100%;min-height:0;border-radius:24px 24px 0 0;border-bottom:0}.scoreboard{top:24px}.dock{padding:30px 24px max(20px,env(safe-area-inset-bottom))}.overlay{top:49%}.overlay h2{font-size:28px}.overlay p{font-size:12px}.key-hint{display:none}}@media(max-height:720px) and (max-width:680px){.header{height:52px;min-height:52px}.scoreboard{top:18px}.score strong{font-size:42px}.overlay{top:43%}.overlay h2{font-size:24px;margin:7px 0}.overlay-kicker{display:none}.dock{padding-top:18px;padding-bottom:max(12px,env(safe-area-inset-bottom))}.primary{min-height:46px}.mode-switch button{padding:8px 4px}.status{margin-top:8px}.mode-switch{margin-bottom:9px}.overlay p{font-size:11px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}
@media(min-width:681px) and (max-height:850px){.header{height:80px}.layout{padding:24px 0}.game{min-height:520px;height:calc(100dvh - 150px)}.intro{padding:0}h1{font-size:68px;margin:18px 0}.intro-copy{margin:20px 0 24px;font-size:15px}.instructions{gap:13px}.desktop-hint{margin-top:20px}.side-footer{margin-top:26px}.footer{padding:16px 0}}

.trick-hud{position:absolute;top:18%;left:25px;right:25px;display:flex;justify-content:space-between;gap:12px;color:#e0efcb;font-size:11px;pointer-events:none}.game:not(.playing) .trick-hud{display:none}.feedback.trick{color:#eeffb9;font-size:23px}.game.playing .dock{padding-top:20px}.game.playing .zone-label{top:57%}

.key-hint{direction:ltr;unicode-bidi:isolate}

/* Keep the timing hint above the physical instep in the first-person view. */
.game.playing .zone-label{top:69%}

.power-readout{font-size:12px;color:#e1efce;text-align:center;margin-top:8px;font-variant-numeric:tabular-nums}.game:not(.playing) .power-readout{display:none}

/* Two independent thumb controls, with physical left/right ordering in the RTL UI. */
.touch-feet{display:flex;justify-content:space-between;gap:24px;direction:ltr}
.joystick-unit{display:grid;justify-items:center;gap:8px}
.joystick-label{display:flex;align-items:center;gap:7px;font-size:12px;color:#e1efce;direction:rtl}
.joystick-label .key-hint{border-color:#e1efce30;padding:2px 5px;font-size:9px}
.joystick{--charge:0deg;--stick-x:0px;--stick-y:0px;position:relative;width:126px;height:126px;border:0;border-radius:50%;padding:0;touch-action:none;user-select:none;-webkit-user-select:none;background:conic-gradient(var(--lime) var(--charge),#e5f1d530 0);box-shadow:0 5px 20px #0b1e2433;cursor:grab}
.joystick::before{content:"";position:absolute;inset:3px;border-radius:50%;background:#24382de8;border:1px solid #edf7dc20}
.joystick::after{content:"";position:absolute;inset:18px;border:1px dashed #e5f1d526;border-radius:50%;pointer-events:none}
.joystick-cross{position:absolute;inset:22px;opacity:.3;background:linear-gradient(#d6e5be,#d6e5be) center/1px 100% no-repeat,linear-gradient(#d6e5be,#d6e5be) center/100% 1px no-repeat}
.joystick-knob{position:absolute;z-index:1;left:50%;top:50%;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#d4dfc8;color:#34402e;box-shadow:0 4px 8px #0b201b66,inset 0 1px 1px #fff8;transform:translate(calc(-50% + var(--stick-x)),calc(-50% + var(--stick-y)));font-size:13px;font-weight:700}
.joystick-power{position:absolute;bottom:9px;left:0;right:0;z-index:2;font-size:10px;color:#e4eddb;direction:rtl;font-variant-numeric:tabular-nums;pointer-events:none;text-shadow:0 1px 3px #122316}
.joystick.charging{cursor:grabbing}.joystick.charging .joystick-knob{background:var(--lime)}
.joystick.charged{box-shadow:0 0 18px #c6ef7345}.joystick.charged .joystick-power{color:#eaffbd}
.game.playing .dock:has(.touch-feet:not([hidden])){padding-top:10px;background:linear-gradient(transparent,#243f2a90 55%,#243f2ae6)}
.game.playing .dock:has(.touch-feet:not([hidden])) .power-readout{font-size:10px;margin-top:8px}
.game.playing .dock:has(.touch-feet:not([hidden])) .status{margin-top:4px}
.game.playing:has(.touch-feet:not([hidden])) .zone-label{top:58%}
.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}
@media(max-width:680px){.joystick{width:116px;height:116px}.joystick-knob{width:44px;height:44px}.touch-feet{gap:18px}}
@media(max-height:650px){.joystick{width:96px;height:96px}.joystick-knob{width:38px;height:38px}.joystick-unit{gap:5px}.joystick-power{bottom:6px;font-size:9px}}

.dock{z-index:3}.joystick{appearance:none;-webkit-appearance:none;isolation:isolate}

.joystick-skill{position:absolute;left:-12px;right:-12px;top:7px;font-size:10px;color:var(--lime);z-index:3;pointer-events:none;direction:rtl}
.joystick.skill-ready{box-shadow:0 0 0 2px var(--lime),0 0 20px #c6ef7330}
.joystick.skill-ready .joystick-knob{background:#e5ffb9;font-size:25px}
.trick-list{list-style:none;padding:0;margin:22px 0;display:grid;gap:20px}
.trick-list li{display:flex;gap:14px;align-items:flex-start}.trick-list strong{font-size:15px}.trick-list small{color:var(--lime);font-size:11px;white-space:nowrap;font-weight:400}
.trick-list p{margin:6px 0 0}.gesture-mark{display:grid;place-items:center;flex:0 0 42px;height:42px;border:1px solid #c6ef7350;border-radius:50%;color:var(--lime);font-size:24px;direction:ltr}
dialog{max-height:calc(100dvh - 32px);overflow:auto}#tricks-title{font-size:21px}
@media(max-width:400px){.header-actions{gap:6px}.header{padding-left:16px;padding-right:16px}}

.game.countdown .mode-switch{display:none}
.game.countdown .overlay{top:39%}
.game.countdown .overlay h2{font-size:48px}
.game.countdown .dock{padding-top:10px}

.foot-power{width:126px;direction:rtl;min-height:31px}.foot-power output{display:block;float:none;color:#f0f6e8;font-size:11px;text-align:center;margin-bottom:6px;font-variant-numeric:tabular-nums;white-space:nowrap;direction:rtl}
.power-track{height:7px;background:#101f19;border:1px solid #e5f1d533;border-radius:6px;overflow:hidden;direction:ltr}.power-fill{height:100%;width:0;background:var(--lime);border-radius:4px}.foot-power.full .power-fill{background:#ffe38a}.foot-power.full output{color:#ffe38a}
.joystick::before{inset:5px}.joystick-skill{top:-24px;background:#203927;border-radius:4px;line-height:20px}.joystick-skill:empty{display:none}
.lesson-tabs{display:flex;gap:5px}.lesson-tabs button{flex:1;background:#142219;border:1px solid #ffffff26;padding:10px 3px;border-radius:7px;font-size:12px}.lesson-tabs button[aria-pressed="true"]{background:var(--lime);color:#20321b;border-color:var(--lime)}
#lesson-name{font-size:18px;margin:18px 0 10px}#lesson-steps{padding-right:20px;font-size:13px;line-height:1.8;color:#d5e3cc;min-height:70px;margin:0 0 16px}
.practice-grid{display:flex;justify-content:space-around;gap:18px;direction:ltr}.practice-grid label,.demo-unit>span{font-size:12px;color:#d5e3cc}.demo-unit{display:flex;flex-direction:column;align-items:center;gap:8px}.demo-unit small{font-size:10px;color:var(--muted)}
.gesture-demo{position:relative;width:126px;height:126px;border-radius:50%;border:2px solid #c6ef7350;background:#14251b;direction:ltr}.demo-path{position:absolute;inset:24px;border:2px dashed #c6ef7360;border-radius:50%}.demo-arm{position:absolute;inset:0;animation:demo-circle 2.4s linear infinite}.demo-arm i{position:absolute;left:calc(50% + 25px);top:calc(50% - 10px);width:20px;height:20px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 7px #c6ef7320}
.gesture-demo[data-motion="half"] .demo-arm{animation-name:demo-half}.gesture-demo[data-motion="half"] .demo-path{border-bottom-color:transparent}
.gesture-demo[data-motion="heel"] .demo-path{inset:24px auto 24px 50%;width:1px;border:0;border-left:2px dashed #c6ef7380;border-radius:0}.gesture-demo[data-motion="heel"] .demo-arm{animation:none}.gesture-demo[data-motion="heel"] i{left:calc(50% - 10px);top:calc(50% - 10px);animation:demo-heel 2.4s ease-in-out infinite}
@keyframes demo-circle{0%,15%{transform:rotate(0deg)}65%,85%{transform:rotate(-360deg);opacity:1}90%,100%{transform:rotate(-360deg);opacity:0}}
@keyframes demo-half{0%,15%{transform:rotate(0deg)}55%,85%{transform:rotate(-180deg);opacity:1}90%,100%{transform:rotate(-180deg);opacity:0}}
@keyframes demo-heel{0%,20%{transform:translateY(35px);opacity:1}42%,80%{transform:translateY(-35px);opacity:1}90%,100%{transform:translateY(-35px);opacity:0}}
#practice-feedback{min-height:48px;margin:15px 0 6px;padding:10px;border:1px solid #c6ef7330;border-radius:8px;color:#e8efdf;font-size:13px}#practice-feedback.success{border-color:var(--lime);color:var(--lime)}.practice-note{font-size:11px!important;margin:0}#tricks-dialog .primary{margin-top:12px}
@media(max-width:680px){.foot-power{width:116px}.game.countdown .overlay{top:34%}.practice-grid{gap:12px}.practice-grid .joystick,.gesture-demo{width:116px;height:116px}}
@media(max-height:650px){.foot-power{width:100px}.foot-power output{font-size:10px}.game.countdown .overlay{top:30%}.game.countdown .overlay h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){.demo-arm,.demo-arm i{animation:none!important}.demo-arm i{opacity:1}.gesture-demo[data-motion="heel"] i{transform:translateY(35px)}}

.practice-grid{align-items:start}.practice-grid .joystick-unit{grid-template-rows:18px auto 31px}

.heat-hud{position:absolute;z-index:2;top:23%;left:28px;right:28px;pointer-events:none;color:#ffe9c0}.heat-heading{display:flex;justify-content:space-between;font-size:11px;margin-bottom:5px}.heat-track{position:relative;height:7px;background:#102219b0;border-radius:5px;direction:ltr;overflow:hidden}.heat-track>div{height:100%;background:linear-gradient(90deg,#e9d877,#ff9e35,#ff552b);width:0;transition:width .35s}.heat-track i{position:absolute;left:60%;top:0;bottom:0;width:2px;background:#fff8}#heat-copy{display:block;margin-top:5px;font-size:10px;text-align:center}.game:not(.playing) .heat-hud{display:none}.game.playing .feedback{top:33%}.game.hot .heat-heading{color:#ffce7c}.lesson-tabs{flex-wrap:wrap}.lesson-tabs button{flex:1 1 40%}.gesture-demo[data-motion="double"] .demo-arm{animation-name:demo-double}@keyframes demo-double{0%,8%{transform:rotate(0deg)}70%,85%{transform:rotate(-720deg);opacity:1}90%,100%{transform:rotate(-720deg);opacity:0}}

.status{min-height:34px;display:flex;align-items:center;justify-content:center}.status.coach-tip{color:#f4e6bf;font-size:11px;line-height:1.5}.game.playing .dock .status{height:34px}
/* Street controls: separate movement targets retain independent foot ownership. */
.street-movement{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}.street-movement button{touch-action:none;user-select:none;min-height:38px;min-width:110px;padding:5px 12px;background:#d4c7ac1c;border:1px solid #d4c7ac40;border-radius:8px;color:#f2e8d4;font-size:22px}.street-movement small{font-size:11px}.street-movement>span{font-size:10px;color:#c4bba8}.game:not(.playing):not(.countdown) .street-movement{display:none}.dock,.game.playing .dock:has(.touch-feet:not([hidden])){background:linear-gradient(transparent,#24292d99 55%,#24292dee)}.leaders-table{width:100%;border-collapse:collapse;font-size:13px}.leaders-table th,.leaders-table td{text-align:right;padding:12px 5px;border-bottom:1px solid #ffffff18}.leaders-table th{color:#c6ef73}#nickname{padding:12px;border:1px solid #ffffff30;background:#ffffff0a;color:white;border-radius:8px}#score-form{padding-bottom:20px}.game.playing .zone-label{top:48%!important}.header-actions{gap:12px}
@media(max-width:680px){.game.playing .joystick,.game.countdown .joystick{width:100px;height:100px}.street-movement button{min-width:105px}.header{padding-left:15px;padding-right:15px}.header-actions{gap:9px}}
.gesture-demo[data-motion="elastico"] .demo-arm{animation:elastico-demo 2.2s infinite}.gesture-demo[data-motion="rainbow"] .demo-arm{animation:rainbow-demo 2.2s infinite}@keyframes elastico-demo{0%,15%,75%,100%{transform:translateX(35px)}40%{transform:translateX(-35px)}65%{transform:translateX(35px)}}@keyframes rainbow-demo{0%,15%,75%,100%{transform:translateY(-35px)}40%{transform:translateY(35px)}65%{transform:translateY(-35px)}}
.tilt-meter{display:flex;direction:ltr;align-items:center;justify-content:center;gap:14px;margin-top:10px;color:#d8dccf;font-size:10px;pointer-events:none}.tilt-meter>div{position:relative;width:100px;height:4px;background:#ffffff25;border-radius:4px}.tilt-meter i{position:absolute;left:46px;top:-2px;width:8px;height:8px;border-radius:50%;background:var(--lime)}.game:not(.playing):not(.countdown) .tilt-meter{display:none}