:root{font-family:Inter,system-ui,sans-serif;color:#294639;background:#f4f5ed;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,a{font:inherit}button,a{ -webkit-tap-highlight-color:transparent}button{min-height:48px;padding:12px 17px;border:1px solid #b7c8b6;border-radius:14px;background:#fffdf4;color:#294639;cursor:pointer;font-weight:600}button:disabled{opacity:.55;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #a46145;outline-offset:3px}a{color:inherit}input{width:100%;min-width:0;min-height:48px;border:1px solid #c4cbbb;background:#fffef9;border-radius:10px;padding:12px}.primary{background:#355f49;color:#fffdf2;border-color:#355f49}.topbar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px max(20px,env(safe-area-inset-right)) 14px max(20px,env(safe-area-inset-left));border-bottom:1px solid #dbe1d1}.topbar>a{text-decoration:none;font-size:23px;font-weight:650;letter-spacing:-1px}.topbar>a span{font-size:14px;font-weight:400;letter-spacing:0}.topbar>div{display:flex;gap:8px}main{max-width:1280px;margin:auto;padding:42px 28px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:#6a7b60}h1{font-size:clamp(34px,5.5vw,68px);font-weight:500;letter-spacing:-2.5px;line-height:1.08;max-width:760px;margin:22px 0}h2{font-size:25px;letter-spacing:-.7px;font-weight:500}.intro{font-size:17px;line-height:1.7;max-width:660px;color:#677360}.games{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.games a{text-decoration:none;padding:15px 20px;border:1px solid #cad4bf;border-radius:30px}.games a[aria-current=page]{color:#fffdf3;background:#375f48}.lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.lobby-grid article{background:#eef1e5;border:1px solid #d9e0cd;padding:30px;border-radius:26px}.lobby-grid p{line-height:1.7}.tip,.small{color:#64715c;font-size:13px;line-height:1.65}.choices{display:grid;gap:12px}.choices form{border-top:1px solid #d0d8c7;padding-top:18px;margin-top:10px}.choices form>div{display:flex;gap:8px;margin-top:8px}label{font-size:12px}#waiting button{margin:8px 5px 0 0}#invite-link{margin-top:8px}#error{color:#9b3a35}#match{width:100%}.match-bar{display:flex;align-items:center;gap:12px;padding:8px 0}.match-bar strong{margin-right:auto}.match-bar span{font-size:11px;color:#63725e}#stage{position:relative;height:min(72svh,800px);min-height:360px;overflow:hidden;border-radius:24px;background:#dfe8d3;isolation:isolate}#field{display:block;width:100%;height:100%;touch-action:none;outline:none}.scores{position:absolute;inset:18px 20px auto;display:flex;justify-content:space-between;gap:8px;pointer-events:none}.scores>div{background:#fffcf1e8;padding:10px 15px;min-width:90px;border-radius:14px;text-align:center}.scores small{display:block;font-size:9px;letter-spacing:1px}.scores b{display:block;font-size:26px;margin-top:3px;font-weight:600}.timer{margin:auto}#countdown{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font-size:100px;font-weight:600;color:#fffdf2;text-shadow:0 3px 20px #2b453b80;pointer-events:none}#match-notice{position:absolute;z-index:4;top:100px;left:50%;transform:translateX(-50%);background:#fffef3f5;padding:12px 20px;border:1px solid #bdcbb2;border-radius:16px;max-width:90%;width:max-content;text-align:center;font-size:13px;pointer-events:none}.thumb-controls{position:absolute;left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:end;pointer-events:none;user-select:none;-webkit-user-select:none}.thumb-stick{position:relative;flex-shrink:0;width:124px;height:124px;border-radius:50%;border:2px solid #fffdf1bd;background:#304f3a1f;box-shadow:inset 0 0 0 20px #fffdf124;touch-action:none;pointer-events:auto}.thumb-stick>span{display:block;position:absolute;width:50px;height:50px;left:35px;top:35px;border-radius:50%;background:#fffdf1df;border:1px solid #ffffff;box-shadow:0 3px 12px #233c3a20;pointer-events:none}.thumb-stick small{position:absolute;bottom:9px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:2px;pointer-events:none}.actions{display:flex;gap:10px;align-items:end;pointer-events:auto}.actions button{height:66px;min-width:64px;border-radius:22px;touch-action:none;user-select:none;font-size:10px;background:#fffff0e8}.actions #boost{width:84px;height:84px;border-radius:50%;background:#355f49ee;color:#fffdf2;font-size:26px;padding:8px;box-shadow:0 4px 20px #284a3430}.actions small{display:block;font-size:9px;letter-spacing:1px}.actions i{display:block;width:44px;height:4px;background:#ffffff40;margin:5px auto;border-radius:5px;overflow:hidden}.actions i b{display:block;background:#e5e4b0;height:100%;width:100%}.actions button.held{background:#c9d9b5;transform:scale(.95)}.actions #boost.held{background:#1e4434}#recover{position:absolute;bottom:124px;right:24px;font-size:11px;min-height:44px;padding:8px 12px;background:#fffdf2d9}#result{position:absolute;z-index:8;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:#f4f5edeF;padding:24px;overflow:auto}#result h2{font-size:42px;margin:12px 0}#result p{margin:8px 0;max-width:440px}#result button{margin:8px 0 0}#result[hidden],[hidden]{display:none!important}.playing main{padding:0 20px}.playing .topbar{padding-top:7px;padding-bottom:7px}.playing #stage{height:calc(100svh - 160px);min-height:320px}.full-screen .topbar{position:fixed;top:0;left:0;right:0;z-index:12;background:#f4f5ed}.full-screen main{max-width:none;padding:0}.full-screen #match{position:fixed;inset:64px 0 0;z-index:11}.full-screen .match-bar,.full-screen .controls-help{display:none}.full-screen #stage{height:100%;border-radius:0;min-height:0}
@media(max-width:700px){main{padding:26px 18px}.topbar>a span{display:none}.topbar button{font-size:11px;padding:8px 10px}.lobby-grid{grid-template-columns:1fr}.lobby-grid article{padding:22px}.games{gap:7px}.games a{font-size:12px;padding:13px 14px}h1{letter-spacing:-1.5px}.playing main{padding:0}.match-bar{padding:6px 12px}.match-bar strong{font-size:13px}.match-bar span{max-width:85px;font-size:10px}.playing #stage{height:calc(100svh - 125px);min-height:280px;border-radius:0}.controls-help{display:none}.scores{inset:12px 12px auto}.scores>div{min-width:75px;padding:8px 10px}.scores b{font-size:22px}.scores small{font-size:8px}.thumb-controls{left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom))}.thumb-stick{width:116px;height:116px}.thumb-stick>span{left:31px;top:31px}.actions{position:relative;width:144px;height:132px}.actions #boost{position:absolute;bottom:0;right:0}.actions #brake{position:absolute;left:0;bottom:0;width:58px;min-width:58px;height:58px;padding:5px}.actions #drift{position:absolute;right:10px;top:0;width:66px;min-width:66px;height:44px;min-height:44px;padding:5px}.actions:has(#brake[hidden]){width:84px;height:84px}#recover{bottom:174px;right:18px}#match-notice{top:86px}#result h2{font-size:32px}}
@media(orientation:landscape) and (max-height:600px){.playing .topbar{height:48px;padding-top:3px;padding-bottom:3px}.playing .topbar button{min-height:40px}.playing .match-bar{height:42px;padding:2px 16px}.match-bar button{min-height:36px;padding:6px 12px}.playing #stage{height:calc(100svh - 90px);min-height:0;border-radius:0}.playing main{padding:0}.scores{left:155px;right:155px;top:8px}.scores>div{padding:5px 12px;min-width:70px}.scores b{font-size:18px}.scores small{font-size:7px}.thumb-controls{bottom:max(12px,env(safe-area-inset-bottom));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right))}.thumb-stick{width:108px;height:108px}.thumb-stick>span{left:27px;top:27px}.actions{width:144px;height:126px}.actions #boost{width:76px;height:76px}.actions #drift{top:2px}#match-notice{top:68px;padding:8px 12px;max-width:55%}#recover{bottom:148px;right:20px;min-height:36px}#countdown{font-size:65px;top:50%}.controls-help{display:none}.full-screen #match{top:48px}.full-screen #stage{height:100%}.full-screen #recover{bottom:145px}#result{padding:10px}#result .eyebrow{display:none}#result h2{font-size:26px;margin:2px}#result p{margin:3px;font-size:12px}#result button{min-height:38px;padding:7px 14px}}

@media(orientation:landscape) and (max-height:600px){
 .actions{position:relative;display:block;flex-shrink:0}
 .actions #boost{position:absolute;right:0;bottom:0}
 .actions #brake{position:absolute;left:0;bottom:0;width:58px;min-width:58px;height:58px;padding:5px}
 .actions #drift{position:absolute;right:10px;top:0;width:66px;min-width:66px;height:44px;min-height:44px;padding:5px}
}