*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#172a29;color:#fff8e4;font-family:Arial,sans-serif}button{cursor:pointer;font:inherit;color:inherit;border:0}#scene{position:fixed;inset:0;touch-action:none}canvas{display:block}*[hidden]{display:none!important}.vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,#071b2770,transparent 28%,transparent 65%,#071b27a0)}header{position:absolute;top:24px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:center}.logo{font:900 27px/1 Impact,'Arial Narrow',sans-serif;letter-spacing:1px}.logo span{color:#dcf578}.logo small{display:block;font:8px Arial;letter-spacing:2px;margin-top:7px}.topbuttons{display:flex;gap:8px}.topbuttons button{background:#14272488;border:1px solid #ffffff35;border-radius:50px;padding:12px;font-size:10px;letter-spacing:1px}nav{position:absolute;top:103px;left:28px;display:flex;gap:20px}nav button{background:none;padding:10px 0;color:#ffffff65;font-size:10px;font-weight:bold;letter-spacing:1px;border-bottom:2px solid transparent}nav button.selected{color:#e1f58b;border-color:#e1f58b}.intro{position:absolute;top:24%;left:7%;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:2px;color:#e3f399}h1,h2{font-family:Impact,'Arial Narrow',sans-serif;font-weight:900;letter-spacing:-1px;line-height:.99;font-size:clamp(40px,6vw,86px);margin:16px 0}em{font-style:normal;color:#e3f399}.intro p{font-size:13px;line-height:1.7;color:#c9d6ce}.garagebottom{position:absolute;bottom:65px;left:7%;width:330px}.drag{font-size:11px;color:#d4dfce}.actions{display:flex;gap:7px;margin:13px 0}.actions button{background:#183831bb;border:1px solid #ffffff30;border-radius:6px;padding:11px 10px;font-size:11px;flex:1}.primary{background:#e0f38a;color:#172c25;padding:18px 20px;width:100%;font-size:11px;letter-spacing:1px;font-weight:900;border-radius:4px}.primary span{float:right;font-size:18px;line-height:12px}.primary:hover{background:#f0ffaf}.secondary{padding:15px;background:transparent;font-size:12px;color:#c8d6c9}footer{position:absolute;bottom:20px;left:28px;right:28px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:2px;color:#a6c1b3;pointer-events:none}#hud{position:absolute;left:28px;right:28px;top:155px;display:flex;justify-content:space-between;pointer-events:none}#hud small{font-size:9px;letter-spacing:2px}#hud strong{display:block;font-size:40px;font-family:Impact,sans-serif;font-weight:400}#hud i{font:12px Arial;color:#e3f399}.right{text-align:right}#toast{position:absolute;top:30%;left:0;right:0;text-align:center;font-weight:900;font-size:20px;color:#efffbf;pointer-events:none;text-shadow:0 2px 15px #123}.modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:340px;max-width:90vw;background:#102a26ed;border:1px solid #a9d88770;padding:28px;text-align:center;border-radius:8px;box-shadow:0 20px 100px #0006}.modal h2{font-size:65px}.modal p{color:#bacfc0;font-size:13px;line-height:1.7}#controls{position:absolute;bottom:64px;display:flex;gap:24px;left:50%;transform:translateX(-50%)}#controls button{width:64px;height:46px;background:#132f2788;border:1px solid #d7e69a66;border-radius:9px;font-size:25px;touch-action:manipulation}#help{position:absolute;bottom:120px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:1px;color:#e1e6d4}#load{position:absolute;inset:0;display:grid;place-content:center;background:#142725;z-index:20;font-size:14px;color:#e3f399}button:focus-visible{outline:3px solid white;outline-offset:3px}@media(max-width:650px){header{top:20px;left:20px;right:20px}.logo{font-size:24px}nav{top:88px;left:20px}.intro{top:151px;left:23px}.eyebrow{font-size:7px;letter-spacing:1.4px}h1{font-size:41px;margin:12px 0}.intro p{font-size:10px;line-height:1.5;margin-top:8px}.garagebottom{left:20px;right:20px;width:auto;bottom:52px}.drag{text-align:center;font-size:10px}.actions{margin:9px 0}.primary{padding:16px}footer{left:20px;right:20px;font-size:7px;letter-spacing:1px}#hud{top:145px;left:20px;right:20px}#hud strong{font-size:33px}}@media(max-height:650px){.intro{top:135px}.intro p{display:none}h1{font-size:34px}.garagebottom{bottom:44px}.drag{margin:3px}.actions button{padding:8px}.primary{padding:12px}#hud{top:125px}}

#lionBadge{text-align:center;color:#ffe39a;transition:transform .12s}#lionBadge small{font-size:8px;letter-spacing:1px}.lionIcon{font:25px Arial;color:#ffd36a}#lionBadge.pop{transform:scale(1.15)}@media(max-width:650px){#lionBadge small{font-size:7px;letter-spacing:.3px}#lionBadge strong{font-size:30px}#help{font-size:8px;letter-spacing:.3px}}

.garageHelp{font-size:10px;color:#e3ebcf;text-align:center;line-height:1.8;margin:10px 0 0}.garageHelp span{font-size:9px;color:#a8c2b2}
body.riding .logo,body.riding nav,body.riding footer,body.riding #sound{display:none!important}body.riding header{top:18px;right:18px;left:auto;z-index:5}body.riding #hud{top:20px;left:18px;right:78px;align-items:start}body.riding #hud strong{font-size:29px}body.riding #hud small{font-size:7px;letter-spacing:1px}body.riding #hud .right strong{font-size:20px;color:#c9d9bb}body.riding #hud .right{padding-top:2px}body.riding #hud .lionIcon{font-size:22px}body.riding .vignette{background:linear-gradient(180deg,#071b2760,transparent 19%,transparent 86%,#071b2720)}
#powerHud{position:absolute;top:85px;left:18px;display:flex;gap:9px;pointer-events:none}.power{position:relative;width:48px;height:48px;border:1px solid #8ddbea80;background:#132f32b0;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#8ddbea;overflow:hidden}.power svg{width:25px;height:25px}.power span{font-size:10px;position:absolute;right:4px;bottom:3px;color:#fff}.power:after{content:'';position:absolute;bottom:0;left:0;width:calc(var(--remaining,1)*100%);height:3px;background:currentColor}
@media(max-width:650px){body.riding #hud strong{font-size:25px}body.riding #hud small{font-size:6px;letter-spacing:.5px}body.riding #hud .right strong{font-size:18px}body.riding #lionBadge small{font-size:6px}body.riding #hud{gap:10px}body.riding #pause{width:38px;height:38px;padding:8px}.garagebottom{bottom:40px}.garageHelp{font-size:9px;line-height:1.6;margin:7px 0 0}.garageHelp span{font-size:8px}}

#conversion{position:absolute;top:18%;left:0;right:0;text-align:center;pointer-events:none;text-shadow:0 3px 18px #092a1b}#conversion span{display:block;font-size:10px;letter-spacing:4px;color:#d7efb6;margin-bottom:9px}#conversion strong{display:block;font:900 clamp(30px,6vw,66px) Impact,'Arial Narrow',sans-serif;color:#defa9d;letter-spacing:1px}body.riding #end{top:auto;bottom:22px;transform:translateX(-50%);padding:20px;width:340px}body.riding #end h2{font-size:40px;margin:10px 0}body.riding #end .eyebrow{font-size:8px}body.riding #end p{margin:8px 0 14px}

.practiceOpen{display:block;width:100%;background:transparent;color:#dcebad;padding:11px;font-size:10px;letter-spacing:1px}#practiceMenu{position:absolute;bottom:105px;left:0;right:0;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#102b27f5;border:1px solid #a3cc9d70;border-radius:8px;z-index:8}#practiceMenu button{background:#24483c;padding:13px 5px;font-size:11px;border-radius:4px;color:#f1f4d6}

/* Intro and gesture hints never intercept the game surface. */
#introCaption{position:absolute;top:17%;left:0;right:0;text-align:center;pointer-events:none;text-shadow:0 3px 14px #123c2a}#introCaption small{display:block;font-size:10px;letter-spacing:3px;color:#e0edc6}#introCaption strong{display:block;font:900 clamp(30px,7vw,62px) Impact,sans-serif;margin-top:12px;color:#f0f6d4}
#skipIntro{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);padding:12px 17px;border-radius:30px;background:#102d2acb;border:1px solid #cde6bd80;font-size:9px;letter-spacing:1px;z-index:10}
@keyframes hint{to{transform:translateY(-9px)}}
#magnetFlash{position:absolute;left:18px;top:145px;pointer-events:none;display:flex;align-items:center;gap:8px;filter:drop-shadow(0 3px 7px #082a36);color:#c4fbff}#magnetFlash svg{width:76px;height:76px}#magnetFlash span{font-weight:900;font-size:17px;letter-spacing:1px}#magnetFlash.burst{animation:magnetPop .9s both}@keyframes magnetPop{0%{transform:scale(.5);opacity:0}20%{transform:scale(1.14);opacity:1}60%{transform:scale(1);opacity:1}100%{transform:translateY(-55px) scale(.5);opacity:0}}
.power{width:55px;height:55px}.power svg{width:34px;height:34px}
.stadium{border:1px solid #577863;border-radius:8px;padding:11px;margin:10px 0 15px;background:#17382e}.stadiumTitle{font-size:9px;letter-spacing:1px;display:flex;justify-content:space-between}.stadiumTitle b{color:#f5d68e;letter-spacing:0}.stands{height:44px;margin:9px 0;background:repeating-linear-gradient(90deg,transparent 0 6px,#12291e 6px 8px),repeating-linear-gradient(0deg,#516254 0 5px,#12291e 5px 8px);border-radius:18px 18px 5px 5px;overflow:hidden}.stands div{height:100%;background:repeating-linear-gradient(90deg,transparent 0 6px,#12291e 6px 8px),repeating-linear-gradient(0deg,#b9414e 0 5px,#12291e 5px 8px);transition:width 1s}.stadium small{display:block;color:#c5d5bf;font-size:9px;line-height:1.5}.stadium small:last-child{color:#91ab99;margin-top:4px}
@media(max-width:650px){.intro{top:155px}.intro h1{font-size:54px}.intro p{max-width:275px}.garagebottom .actions{display:none}.garagebottom .drag{display:none}.garagebottom{bottom:45px}#practiceMenu{bottom:112px}body.riding #end{max-height:70vh;overflow:auto}.modal h2{font-size:36px}}@media(max-height:650px){.intro{top:138px}.intro h1{font-size:36px}.garagebottom .actions,.garagebottom .drag{display:none}}

#practiceMenu{max-height:48vh;overflow:auto}body{background:#0b2926}
/* KopRider title sequence — layered neon, no external font dependency. */
body:not(.riding) header .logo,body:not(.riding) footer{display:none}header{z-index:12}body:not(.riding) header{left:auto}.titleScreen{position:absolute;inset:0;overflow:hidden;text-align:center;background:linear-gradient(180deg,#080b23ed,#181130a0 48%,#071b24f5)}.titleScreen:before{content:'';position:absolute;inset:55% -60% -50%;background:linear-gradient(transparent 96%,#4cffca33 97%),linear-gradient(90deg,transparent 96%,#4cffca33 97%);background-size:65px 50px;transform:perspective(240px) rotateX(55deg);pointer-events:none}.titleAura{position:absolute;top:12%;left:50%;width:min(75vw,460px);height:min(75vw,460px);transform:translateX(-50%);border-radius:50%;background:repeating-linear-gradient(0deg,transparent 0 7px,#fa78d830 8px 16px),linear-gradient(#ff719833,#6545d900);box-shadow:0 0 100px #e848cf30}.edition{position:absolute;top:12%;left:5%;width:90%;font:700 9px monospace;letter-spacing:2px;color:#f9b3dd}.neonTitle{position:absolute;top:19%;left:5%;width:90%;margin:0;transform:rotate(-7deg);font:1000 clamp(64px,15vw,145px)/.83 Impact,'Arial Black',sans-serif;letter-spacing:-4px;filter:drop-shadow(0 12px 0 #0b1029)}.neonTitle span,.neonTitle strong{display:block;-webkit-text-stroke:2px #fff4e5;text-shadow:4px 5px 0 #9d267b,8px 9px 0 #321849,0 0 30px #ed4ebc;animation:titleIn .8s cubic-bezier(.18,.8,.25,1) both}.neonTitle span{color:#ff9bde;transform:translateX(-7%)}.neonTitle strong{color:#a4ffe4;text-shadow:4px 5px 0 #159e92,8px 9px 0 #123b52,0 0 35px #21efbf;animation-delay:.24s;margin-top:8px;transform:translateX(5%)}.dedication{position:absolute;top:54%;left:8%;right:8%;font-size:14px;color:#fff3cf;letter-spacing:1px;animation:titleIn 1s .7s both}.titleBottom{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);width:min(86%,380px)}.titleBottom .primary{background:#a3ffe0;box-shadow:0 0 28px #3dfacb38;border-radius:3px;font-size:12px}.titleBottom p{font-size:10px;line-height:1.7;color:#c1cedb}.titleBottom .practiceOpen{font-size:8px;color:#8299aa}.titleBottom #practiceMenu{bottom:140px}.titleBottom:after{content:'SAINT-ÉTIENNE · NUIT DE DERBY';display:block;font:8px monospace;letter-spacing:3px;color:#c48ab8;margin-top:17px}@keyframes titleIn{from{opacity:0;translate:-80px 20px;scale:1.35}to{opacity:1;translate:0 0;scale:1}}
#story{position:absolute;inset:0;z-index:11;display:flex;flex-direction:column;justify-content:center;padding:8vh max(8vw,24px);background:radial-gradient(ellipse at top,#164235,#080e19 70%);color:#f1efcf}#story small{font:10px monospace;letter-spacing:3px;color:#85f1bc}.storyRule{width:45px;height:3px;background:#dca6e8;margin:24px 0}#storyText{font:clamp(18px,3.3vw,27px)/1.65 Georgia,serif;max-width:720px;min-height:13em;margin:0 auto 15px;width:100%}#storySkip{align-self:flex-end;color:#b4f3d0;font-size:10px}.storyNote{font:9px/1.7 monospace;color:#879b9c;max-width:450px;margin-top:15px}#jumpStatus{color:#ffcf7e;font-size:35px;background:#542e63cc}#jumpFlash{position:absolute;top:150px;left:18px;color:#ffd682;font:900 22px Impact,sans-serif;pointer-events:none;text-shadow:0 2px 8px #23133d}#jumpFlash small{display:block;font:11px Arial;margin-top:7px;color:#fff0c2}#conversion{top:9%;padding:0 16px}#conversion strong{font-size:clamp(25px,5vw,46px)}body.riding #end{bottom:12px;padding:12px 18px;background:#102a26dc}body.riding #end h2,body.riding #end .eyebrow{display:none}body.riding #end p{font-size:11px;margin:0 0 10px}body.riding #end .primary{padding:13px}body.riding #end .secondary{padding:8px}@media(min-width:850px){.neonTitle{top:18%;font-size:145px}.dedication{top:58%}}@media(max-height:640px){.edition{top:7%}.neonTitle{top:16%;font-size:70px}.dedication{top:49%;font-size:11px}.titleBottom{bottom:3%}.titleBottom:after{display:none}#storyText{font-size:15px;min-height:11em}#story{padding-top:35px;padding-bottom:15px}#conversion{top:5%}}
@media(prefers-reduced-motion:reduce){.neonTitle span,.neonTitle strong,.dedication{animation:none}}
#tutorial{position:absolute;top:20%;left:50%;transform:translateX(-50%);width:min(88%,390px);padding:12px 18px;text-align:center;pointer-events:none;border:1px solid #96ffd866;background:#09251dcc;border-radius:16px;box-shadow:0 8px 35px #06181155}#tutorial small{display:block;font-size:10px;letter-spacing:3px;color:#b2d8c8}#tutorial strong{display:block;font:900 65px/1.1 Arial;color:#a9ffda;animation:gesturePulse .7s ease-in-out infinite}#tutorial span{display:block;font-size:15px;font-weight:700;color:#fff4d6;margin:5px 0}#tutorial.success strong{animation:none;font-size:44px}#skipTutorial{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:1px;padding:13px;border:1px solid #a8d7c555;background:#102d2ad9;border-radius:25px;z-index:10}@keyframes gesturePulse{50%{opacity:.35;transform:scale(.92)}}@media(prefers-reduced-motion:reduce){#tutorial strong{animation:none}}@media(max-height:520px){#tutorial{top:15%;padding:6px;width:300px}#tutorial strong{font-size:40px}#tutorial span{font-size:12px}}
#leaderboard{position:fixed;inset:0;z-index:40;overflow-y:auto;overscroll-behavior:contain;background:radial-gradient(ellipse at 50% 0,#153b3bf5,#080c1cf8 75%);padding:25px 14px;color:#fff4cf}.rankingPanel{position:relative;margin:auto;max-width:520px;text-align:center;padding:16px 15px 24px}#rankingClose{position:absolute;right:0;top:0;width:42px;height:42px;background:transparent;color:#aeeed5;border:1px solid #90c9b544;border-radius:50%;font-size:20px}.rankingEyebrow{display:block;font:10px monospace;letter-spacing:3px;color:#9cb9bd;padding-right:35px}.rankingPanel h2{font-size:clamp(34px,8vw,54px);margin:20px 0 12px;letter-spacing:1px;text-shadow:3px 3px 0 #22585a}.rankingPanel h2 em{color:#b1ffdb}#rankingNotice{font:10px/1.6 monospace;color:#9ab2b3;margin:0 0 22px}#scoreToSave{color:#ffd47d;font:700 22px monospace;margin:18px 0}#arcadeName h3{font:11px monospace;letter-spacing:2px;color:#c2a7df;margin:20px 0 10px}#namePreview{font:900 clamp(23px,6vw,34px)/1.5 monospace;letter-spacing:2px;color:#fff2aa;text-shadow:2px 2px 0 #87537b;min-height:50px;overflow-wrap:anywhere}.wheelHint{font:10px/1.6 monospace;color:#91adaa;margin:8px 0 14px}#nameWheels{display:flex;gap:7px;max-width:100%;overflow-x:auto;padding:8px 3px 14px;touch-action:none;scrollbar-width:thin;scrollbar-color:#4d8d7b transparent;min-height:132px}.letterWheel{flex:0 0 46px;display:flex;flex-direction:column;align-items:stretch;border:1px solid #43665c;background:linear-gradient(#071b22,#1d3834 50%,#071b22);border-radius:7px;overflow:hidden;user-select:none;outline-offset:2px}.letterWheel:first-child{margin-left:auto}.letterWheel:last-child{margin-right:auto}.letterWheel.selected{border-color:#aeffda;box-shadow:0 0 15px #61e1b52b}.letterWheel button{background:transparent;font:700 18px monospace;color:#849d94;height:32px;touch-action:none;padding:0}.letterWheel b{font:900 30px/42px monospace;color:#fff2b1;border-block:1px solid #aeffda40;text-shadow:2px 2px #866045;background:#93f4b80a}.nameTools{display:flex;justify-content:space-between;align-items:center;margin:8px 0 20px;gap:10px}.nameTools button{font:10px monospace;border:1px solid #93e8bf55;padding:13px 10px;border-radius:5px;background:#13372d}.nameTools button:disabled{opacity:.3;cursor:default}#nameLength{font:10px monospace;color:#9cbcad}#scoreSave{background:#b8ffcf;box-shadow:0 0 25px #76f4af15;font:900 16px monospace;letter-spacing:3px}#scoreSaveError{font:11px monospace;color:#ffc0b5}.rankingTabs{display:flex;gap:6px;border-bottom:1px solid #5b8e7555;margin:20px 0 16px}.rankingTabs button{flex:1;background:transparent;color:#8fae9f;font:10px monospace;padding:13px 4px;border-bottom:2px solid transparent}.rankingTabs .selected{color:#bdffd9;border-color:#bdffd9}.rankingColumns{display:flex;justify-content:space-between;color:#739789;font:8px monospace;letter-spacing:1px;padding:0 9px}#scoreRows{list-style:none;padding:0;margin:10px 0}#scoreRows li{display:grid;grid-template-columns:25px minmax(0,1fr) auto 48px;align-items:center;gap:7px;padding:13px 8px;border-bottom:1px solid #51756236;text-align:left;font:12px monospace}#scoreRows b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d8eadc}#scoreRows .rank{color:#8bafa1;font-size:10px}#scoreRows li:first-child .rank{color:#ffdb8b}#scoreRows em{font:10px monospace;color:#ffdb8b;text-align:right}#scoreRows small{font-size:9px;color:#88a999}#scoreRows .mine{background:#a4ffca12;border:1px solid #a4ffca77;border-radius:6px}#scoreRows .emptyScores{display:block;padding:30px 10px;color:#b8ccc1;text-align:center;line-height:1.8}#yourRank{font:11px monospace;color:#b9f6cd}#rankingTarget{font:11px/1.6 monospace;color:#e5bcdf;min-height:18px;margin:12px 0 23px}.titleBottom{bottom:4%}.titleBottom #leaderboardOpen{color:#baf3d8;padding:10px}.titleBottom .practiceOpen{padding:7px}@media(max-height:650px){.titleBottom{bottom:2%}.titleBottom p{margin:6px 0}.titleBottom .practiceOpen{padding:6px}.rankingPanel h2{font-size:30px;margin:12px 0}#leaderboard{padding-top:12px}.rankingPanel{padding-top:8px}}@media(max-width:380px){#scoreRows li{font-size:10px;grid-template-columns:20px minmax(0,1fr) auto 40px;gap:5px}}
/* Reserve the centre for Stéphane's face instead of covering it with the logo. */
.titleScreen{background:linear-gradient(180deg,#080b23b0 0%,#080b2330 23%,transparent 32%,transparent 60%,#071b24e8 82%);pointer-events:none}.titleScreen button,.titleScreen #practiceMenu{pointer-events:auto}.titleScreen:before{opacity:.35;inset:70% -60% -50%}.titleAura{display:none}.edition{top:4%;font-size:8px;left:8%;width:70%;text-align:left;letter-spacing:1.5px}.neonTitle{top:9%;left:8%;width:84%;font-size:clamp(40px,10vw,65px);line-height:.85;letter-spacing:-2px;transform:rotate(-5deg)}.neonTitle span,.neonTitle strong{display:inline-block;transform:none;margin:0;-webkit-text-stroke:1px #fff4e5;text-shadow:2px 3px #9d267b,0 0 20px #ed4ebc}.neonTitle strong{margin-left:9px;text-shadow:2px 3px #159e92,0 0 20px #21efbf}.dedication{top:19%;font-size:11px;left:5%;right:5%;margin:0;animation:none;text-shadow:0 2px 8px #071b24}.titleBottom{bottom:4%}@media(min-aspect-ratio:6/5){.titleScreen{background:linear-gradient(90deg,#080b23d9 0%,#080b2355 42%,transparent 60%)}.edition{top:10%;left:5%;width:40%}.neonTitle{top:23%;left:5%;width:40%;font-size:clamp(42px,6.5vw,90px)}.neonTitle span,.neonTitle strong{display:block}.neonTitle strong{margin-top:8px;margin-left:0}.dedication{top:53%;left:5%;right:auto;width:40%}.titleBottom{left:25%;width:min(38%,380px);bottom:5%}.titleBottom:after{display:none}}@media(max-height:560px) and (max-aspect-ratio:6/5){.edition{top:3%;font-size:6px}.neonTitle{top:8%;font-size:36px}.dedication{top:19%;font-size:9px}.titleBottom{bottom:2%}.titleBottom:after{display:none}.titleBottom p{display:none}}
@media(max-aspect-ratio:1199/1000){.dedication{top:17.5%}}