@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
:root{font-family:Nunito,system-ui,sans-serif;color:#15382b;background:#f5f4eb;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 90% 0,#e5eedc,transparent 50%)}main{max-width:1220px;margin:auto;padding:30px 34px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d9dfd2;padding-bottom:23px}.brand{text-decoration:none;color:#1d4834;font-weight:900;letter-spacing:1.8px;font-size:14px}.edition{font-size:10px;letter-spacing:2px;color:#778175}.intro{display:flex;justify-content:space-between;align-items:center;padding:36px 0 28px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:900;color:#658268;margin:0 0 9px}h1{font-size:clamp(28px,4vw,46px);letter-spacing:-1.8px;margin:0;font-weight:900}h1 em{font-style:normal;color:#359e58}.intro p:not(.eyebrow){color:#7b8578;font-size:13px;margin-bottom:0}.controls{display:flex;gap:7px;align-items:center}.controls span{font-size:11px;margin-left:9px;color:#7b8578;line-height:1.6}kbd{font-family:inherit;display:inline-grid;place-items:center;background:#fffdf5;border:1px solid #d6dacb;border-bottom:3px solid #c9cebd;border-radius:9px;width:38px;height:36px;font-size:21px;color:#2c6746}.game-shell{border:6px solid white;border-radius:22px;overflow:hidden;box-shadow:0 14px 50px #224c3012}.scoreboard{display:flex;justify-content:space-around;background:#173d2c;padding:18px 10px;color:white;gap:10px}.scoreboard>div{flex:1;text-align:center;border-right:1px solid #ffffff20}.scoreboard>div:last-child{border:0}.scoreboard span{display:block;font-size:9px;letter-spacing:1.5px;color:#a7c3a8;font-weight:800}.scoreboard strong{font-size:25px;font-weight:900;display:block;margin-top:3px}.scoreboard>div:first-child strong{color:#f8d26b}.field{position:relative;background:#a5d9d9}canvas{display:block;width:100%;height:auto;aspect-ratio:11/6}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#143f2825;backdrop-filter:blur(3px)}.overlay[hidden],.pause[hidden]{display:none}.start-card{text-align:center;padding:25px 40px;border:1px solid #ffffffa0;border-radius:22px;background:#fffdf3ed;box-shadow:0 16px 60px #173d2c25;max-width:92%}.ball{font-size:35px;display:block;margin-bottom:10px}.start-card h2{font-size:32px;line-height:1.12;letter-spacing:-1px;margin:12px 0}.start-card>p:not(.eyebrow){font-size:12px;color:#697967;line-height:1.8}.start-hint{font-size:13px;font-weight:900;margin-top:20px}.start-hint kbd{width:30px;height:30px;font-size:17px;margin:0 4px}.game-footer{background:#fffdf6;display:flex;justify-content:space-between;gap:12px;padding:15px 22px;font-size:9px;font-weight:800;letter-spacing:.6px;color:#738171}.game-footer i{display:inline-block;width:6px;height:6px;background:#53ad60;border-radius:50%;margin-right:7px}footer{display:flex;justify-content:space-between;font-size:10px;color:#8b9386;padding-top:15px}.pause{position:absolute;inset:0;display:grid;place-items:center;background:#15382bd9;color:white;font-size:18px;text-align:center;padding:20px}.mobile-note{display:none;color:#7b8578;font-size:12px;text-align:center}@media(max-width:700px){main{padding:20px 12px}.edition,.controls{display:none}.intro{padding:25px 4px}.scoreboard{padding:13px 2px;gap:1px}.scoreboard span{font-size:7px;letter-spacing:0}.scoreboard strong{font-size:19px}.game-shell{border-width:3px}.start-card{padding:12px 18px}.start-card h2{font-size:22px}.start-card .ball,.start-card .eyebrow{display:none}.start-card>p:not(.eyebrow){font-size:10px}.start-hint{margin-top:8px;font-size:11px}.game-footer{padding:12px;font-size:8px}.game-footer span:first-child{display:none}footer{display:block;text-align:center}.mobile-note{display:block}canvas{aspect-ratio:11/8}}

/* Electric-blue visual theme inspired by the reference character. */
:root{color:#e7eeff;background:#0c122a}body{background:radial-gradient(ellipse at 85% 0,#243779,transparent 65%),#0c122a}header{border-color:#98adff25}.brand{color:#c3eaff}.edition,.intro p:not(.eyebrow),.controls span,footer,.mobile-note{color:#9baed3}.eyebrow{color:#68d2ff}h1 em{color:#63d7ff}.game-shell{border-color:#40568e;box-shadow:0 12px 70px #1679ff25}.scoreboard{background:linear-gradient(110deg,#152650,#203d79)}.scoreboard span{color:#9ebfe6}.scoreboard .missed-stat strong{color:#ffb3b9}.game-footer{background:#14254a;color:#a7c9e8}.game-footer i{background:#64d6ff}.start-card{background:#101e42ed;border-color:#5aaeff80;color:#f4f7ff}.start-card>p:not(.eyebrow){color:#b6cae8}.overlay{background:#0a173b42}kbd{background:#294c82;border-color:#5182b0;color:white}.field{background:#17386c}.pause{background:#101e42e8}

@media(max-width:900px){.scoreboard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:14px}.scoreboard>div:nth-child(4n){border-right:0}.start-card h2{margin:8px 0}.start-card{padding:16px 24px}}

/* Start action and thumb controls. */
.play-button{display:block;min-width:190px;margin:20px auto 0;padding:15px 28px;border:1px solid #99e5ff;border-bottom:4px solid #1666bb;border-radius:15px;background:linear-gradient(135deg,#31b8f2,#3269dc);box-shadow:0 8px 28px #159fff45;color:white;font:900 19px Nunito,system-ui,sans-serif;cursor:pointer;touch-action:manipulation}
.play-button:active{transform:translateY(2px)}
.play-button:focus-visible,.touch-controls button:focus-visible{outline:3px solid #ffe28b;outline-offset:3px}
.touch-controls{display:none}
@media(max-width:900px),(any-pointer:coarse){
 body{height:100svh;height:100dvh;overflow:hidden}
 main{height:100%;max-width:none;display:flex;flex-direction:column;gap:8px;padding:calc(10px + env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) calc(126px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px))}
 header{flex-shrink:0;padding:5px 4px 10px}.brand{font-size:16px;letter-spacing:1px}.edition,.intro,main>footer,.mobile-note{display:none}
 .game-shell{flex:1;min-height:0;display:flex;flex-direction:column;border:2px solid #40568e;border-radius:18px}
 .scoreboard{flex-shrink:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 0;padding:12px 3px}
 .scoreboard span{font-size:8px;letter-spacing:.3px}.scoreboard strong{font-size:20px;line-height:1.1}.scoreboard>div:nth-child(4n){border:0}
 .field{flex:1;min-height:0;overflow:hidden}.field canvas{width:100%;height:100%;min-height:0;aspect-ratio:auto}
 .game-footer{flex-shrink:0;padding:8px;font-size:8px;text-align:center;justify-content:center}.game-footer span:first-child{display:none}
 .overlay{overflow:auto;padding:12px}.start-card{max-width:100%;width:340px;margin:auto;padding:18px 14px}.start-card h2{font-size:25px;margin:8px 0}.start-card .ball,.start-card .eyebrow,.start-hint{display:none}.start-card>p:not(.eyebrow){font-size:11px;line-height:1.65}.play-button{margin-top:14px;width:100%}
 .touch-controls{position:fixed;z-index:20;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:linear-gradient(transparent,#101e42 20%)}
 .touch-controls button{width:clamp(96px,28vw,150px);height:96px;flex-shrink:0;border:2px solid #78c5ff;border-bottom:6px solid #1869bc;border-radius:25px;background:linear-gradient(145deg,#398add,#23467f);box-shadow:0 6px 24px #008cff30,inset 0 2px #ffffff30;color:white;font:900 52px system-ui;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}
 .touch-controls button.is-held,.touch-controls button:active{background:#198bce;border-bottom-width:2px;transform:translateY(3px)}
 .touch-controls button:disabled{opacity:.35;box-shadow:none;transform:none;cursor:default}
 .touch-controls span{font-size:9px;line-height:1.8;letter-spacing:1px;color:#a7c9e8;text-align:center}
}
@media(max-height:500px) and (orientation:landscape){
 main{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px));gap:4px}header{padding:0 4px 4px}.scoreboard{grid-template-columns:repeat(8,minmax(0,1fr));padding:6px 2px;gap:0}.scoreboard strong{font-size:17px}.scoreboard span{font-size:7px}.touch-controls button{height:62px;width:120px;font-size:38px;border-radius:18px}.touch-controls{padding-top:4px}.game-footer{display:none}.start-card{width:420px;padding:10px 16px}.start-card>p:not(.eyebrow){display:none}.start-card h2{font-size:20px}.play-button{padding:10px;margin-top:8px}
}

/* Keep horizontal game gestures inside the playfield on iOS. */
#game{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

/* Portrait composition: prioritize the playfield and keep secondary stats compact. */
@media(max-width:900px) and (orientation:portrait),(any-pointer:coarse) and (orientation:portrait){
 main{gap:6px;padding-top:calc(6px + env(safe-area-inset-top,0px));padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
 header{padding:3px 4px 7px}.brand{font-size:14px}
 .scoreboard{grid-template-columns:repeat(15,minmax(0,1fr));padding:10px 4px 8px;gap:9px 0}
 .scoreboard>div{grid-column:span 3;order:4;border-right:1px solid #ffffff20}
 .scoreboard>div:nth-child(1),.scoreboard>div:nth-child(3),.scoreboard>div:nth-child(4){grid-column:span 5}
 .scoreboard>div:nth-child(1){order:1}.scoreboard>div:nth-child(3){order:2}.scoreboard>div:nth-child(4){order:3;border-right:0}
 .scoreboard>div:nth-child(8){border-right:0}
 .scoreboard span{font-size:6px;letter-spacing:0;white-space:nowrap}
 .scoreboard strong{font-size:13px;margin-top:4px}
 .scoreboard>div:nth-child(1) span,.scoreboard>div:nth-child(3) span,.scoreboard>div:nth-child(4) span{font-size:8px;letter-spacing:.5px}
 .scoreboard>div:nth-child(1) strong,.scoreboard>div:nth-child(3) strong,.scoreboard>div:nth-child(4) strong{font-size:22px}
 .field canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
 .game-footer{display:none}
 .touch-controls{padding-top:8px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
 .touch-controls button{width:clamp(80px,24vw,110px);height:74px;font-size:42px;border-radius:21px}
 .touch-controls span{font-size:8px;letter-spacing:.6px}
 .start-card{padding:16px 12px}.start-card h2{font-size:23px}
}

.leaderboard{margin:14px 0;padding:12px;border:1px solid #639ddd60;border-radius:12px;background:#10244d;text-align:left}.leaderboard>strong{display:block;font-size:15px;color:#ffe18b}.leaderboard p{font-size:11px;color:#aac4e8;margin:7px 0}.leaderboard ol{max-height:110px;overflow:auto;margin:8px 0;padding-left:24px;font-size:12px;line-height:1.8}.leaderboard button,#skipRecord{border:1px solid #6788b9;border-radius:8px;background:#243e69;color:white;padding:8px 12px;cursor:pointer}.record-popup{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:#071126ed;overflow:auto}.record-popup[hidden]{display:none}.record-popup .start-card{width:min(400px,100%)}#recordForm{display:grid;gap:12px;text-align:left}#recordForm label{font-size:13px}#playerName{width:100%;padding:14px;border:1px solid #76bfff;border-radius:10px;background:#142b52;color:white;font:16px system-ui}#recordForm .play-button{margin:0;min-width:0}.record-popup button:disabled{opacity:.5}.record-popup .start-card>p:not(.eyebrow){display:block}

/* Tyre-game branding. */
.brand{display:flex;align-items:center;gap:10px;letter-spacing:.5px}
.wheel-icon{display:inline-block;flex-shrink:0;vertical-align:middle}
.brand .wheel-icon{width:36px;height:36px}
.ball .wheel-icon{width:58px;height:58px}
@media(max-width:900px),(any-pointer:coarse){.brand{font-size:clamp(12px,3.5vw,16px);gap:8px;letter-spacing:0}.brand .wheel-icon{width:28px;height:28px}}