*{box-sizing:border-box}html,body{margin:0;height:100%;background:#101c25;color:#fff7e9;font-family:Segoe UI,Microsoft YaHei,sans-serif}body{overflow:hidden;touch-action:none}button{font:inherit;color:inherit;border:1px solid #ffffff26;background:#21323e;border-radius:12px;cursor:pointer;touch-action:none;min-height:44px}button:hover{filter:brightness(1.16)}button:focus-visible{outline:3px solid #ffcb7b}button:active,.held{transform:translateY(1px);background:#526474}#app{height:100dvh;max-width:1600px;margin:auto;display:grid;grid-template-rows:74px 78px 1fr 86px;padding:env(safe-area-inset-top) max(18px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(18px,env(safe-area-inset-left));gap:10px}header,.brand,.top,.dashboard,footer,.steer,.drive{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{font-size:20px;font-weight:700}.brand small{display:block;font-size:9px;letter-spacing:3px;color:#9cabb3;margin-top:5px}.mark{font-size:39px;color:#f9b96c}.top{font-size:12px;color:#b8c8cf}.top button{padding:0 16px}.dashboard{background:#1c2b35;border:1px solid #ffffff0d;border-radius:16px;padding:12px 24px}.dashboard small{display:block;font-size:11px;letter-spacing:1px;color:#abbac1;margin-bottom:5px}.dashboard strong{font-size:24px;font-variant-numeric:tabular-nums}.dashboard em{font-size:12px;font-style:normal;color:#8e9fa9}.fuelbox{width:23%}.fuelbox small{display:flex;justify-content:space-between}.meter{height:7px;border-radius:9px;background:#374651;overflow:hidden}.meter i{display:block;width:100%;height:100%;background:#73e0bf}.speedbox{text-align:right}.speedbox small{font-size:9px;margin:0}.track{position:relative;overflow:hidden;border-radius:19px;min-height:0;background:#25434c;border:1px solid #ffffff1a}canvas{display:block;width:100%;height:100%}.tracklabel{position:absolute;top:17px;left:20px;font-size:10px;letter-spacing:2px;color:#fff9d8;pointer-events:none;text-shadow:0 1px 5px #000}.tracklabel span{display:block;margin-top:7px;font-size:10px;letter-spacing:1px;opacity:.7}#toast{position:absolute;top:20%;width:100%;text-align:center;color:#ffdd9c;font-weight:700;text-shadow:0 2px 6px #000;pointer-events:none}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#10212b79;backdrop-filter:blur(3px);padding:14px}#overlay[hidden]{display:none}article{width:min(430px,100%);border:1px solid #e0d1b830;border-radius:22px;background:#142631ed;padding:32px;box-shadow:0 20px 80px #0005}.eyebrow{font-size:10px;letter-spacing:2px;color:#f4bd78}h1{font-size:30px;margin:14px 0}article p{font-size:14px;line-height:1.8;color:#b5c5cd}.tips{display:flex;flex-wrap:wrap;gap:7px;margin:17px 0}.tips span{font-size:11px;background:#ffffff09;border-radius:6px;padding:7px}.primary{background:#ffc780;color:#222e34;border:0;width:100%;font-weight:bold;font-size:16px;padding:12px 18px;display:flex;justify-content:space-between}.sub{text-align:center;margin:14px 0 0;font-size:10px;letter-spacing:1px}footer{padding:0 8px 12px}footer button{height:56px;min-width:80px;padding:0 24px;font-weight:600}#boost{background:#ffc780;color:#26323b;border:0;min-width:140px}#boost span{font-size:11px;margin-left:10px}.steer button{font-size:20px}.steer span{font-size:12px;margin:0 10px}@media(max-width:600px){#app{padding-left:10px;padding-right:10px;grid-template-rows:57px 68px 1fr 76px;gap:7px}.brand{font-size:16px}.brand small{font-size:8px;letter-spacing:1px}.mark{font-size:30px}.top{gap:7px}.top button{padding:0 12px}.dashboard{padding:10px 13px;gap:10px}.dashboard strong{font-size:19px}.dashboard em{font-size:9px}.fuelbox{width:22%}.speedbox{display:none}footer{padding:0 0 8px;gap:8px}footer button{min-width:53px;padding:0 14px;height:56px}#boost{min-width:95px}#boost span{margin-left:3px}.steer{gap:7px}.steer span{display:none}.drive{gap:7px}article{padding:23px}h1{font-size:26px}.tracklabel{font-size:8px;left:12px}}@media(max-height:500px) and (min-width:600px){#app{grid-template-rows:44px 1fr 58px;grid-template-columns:160px 1fr;gap:7px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}header{grid-column:1/3}.brand{font-size:15px}.brand small{display:none}.mark{font-size:28px}.dashboard{grid-column:1;grid-row:2;flex-direction:column;align-items:stretch;justify-content:center;gap:12px;padding:16px}.dashboard strong{font-size:20px}.fuelbox{width:100%}.speedbox{display:none}.track{grid-column:2;grid-row:2}footer{grid-column:1/3;grid-row:3;padding:0 0 5px}footer button{height:48px}.tracklabel{top:9px;font-size:8px}.tracklabel span{display:none}article{padding:15px 23px;width:440px}.eyebrow{font-size:9px}h1{font-size:24px;margin:7px 0}article p{font-size:12px;line-height:1.5;margin:7px 0}.tips{margin:8px 0}.tips span{padding:4px}.sub{display:none}.primary{min-height:40px;padding:8px 16px}}

/* Content-stage controls retain the approved palette and existing driving controls. */
#overlay article{max-height:100%;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}#contentControls{display:grid;gap:7px;margin:10px 0}#contentControls label{display:flex;align-items:center;gap:10px;font-size:12px;color:#b5c5cd}select{min-width:0;flex:1;max-width:100%;background:#21323e;color:#fff7e9;border:1px solid #ffffff26;border-radius:7px;padding:8px;font:inherit;touch-action:auto}#brief{margin:0;font-size:11px;line-height:1.6}.contentActions{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}.contentActions button{flex:1;font-size:11px;padding:7px;min-height:40px;white-space:nowrap}#contentControls[hidden]{display:none}.tracklabel{max-width:90%}.tracklabel span{letter-spacing:0}
@media(max-height:500px){#overlay{align-items:stretch;padding:8px}#overlay article{margin:auto;max-height:100%}.tips{display:none}#contentControls{margin:6px 0;gap:4px}.contentActions button{min-height:34px}#brief{font-size:10px}}

@media(max-height:500px) and (min-width:600px){.tracklabel span{display:block;font-size:10px;margin-top:4px}}
/* Art v2.1: beach-day palette, canvas-native illustrations, unchanged driving rules. */
html,body{background:#eaf6f3;color:#264e5e}body{background:linear-gradient(160deg,#d6f1f4,#f9f2dd)}button{background:#fffaf0;color:#315969;border:1px solid #c5dcd9;box-shadow:0 3px 0 #c5dcd955;font-weight:600}button:hover{filter:brightness(1.025)}button:disabled{opacity:.45;cursor:default;box-shadow:none}button:active,.held{background:#b9e6df;transform:translateY(2px);box-shadow:none}button:focus-visible{outline:3px solid #eb9667}.brand{color:#284e60}.brand small{color:#5b8791}.mark{color:#ec895e;background:#fff3d8;border-radius:14px;width:45px;text-align:center;font-size:34px}.top{color:#426b77}.dashboard{background:#fffbee;border:1px solid #d2e3da;box-shadow:0 4px 0 #c6ddd22e}.dashboard small{color:#5c7a83}.dashboard em{color:#6b8990}.meter{background:#dae8dc;height:9px}.meter i{background:#46b99e}.track{border:2px solid #bed9d7;background:#9fdfdf;box-shadow:0 5px 0 #bdd6d533}.tracklabel{top:12px;left:12px;border:1px solid #ffffff80;background:#fff9e6ed;color:#3c6977;border-radius:10px;padding:8px 11px;text-shadow:none;font-weight:700;letter-spacing:1.5px}.tracklabel span{color:#557e87;opacity:1;font-weight:500;font-size:10px;margin-top:4px}#toast{color:#fffbe4;text-shadow:0 2px 0 #6c573e,0 0 8px #465f6b70}#overlay{background:#578b9d30;backdrop-filter:blur(4px)}article{background:#fffaf0fa;border:2px solid #ffffffd9;box-shadow:0 15px 45px #396d7a30;border-radius:25px}.eyebrow{color:#bd794e;letter-spacing:1.6px}h1{color:#2d5667}article p{color:#5c7982}.tips span{background:#e7f1e7;color:#4c737b;border-radius:8px}.primary{background:#f3a067;color:#3b4f51;border:1px solid #e59259;box-shadow:0 4px 0 #d5814e33;border-radius:13px}.sub{color:#81918d}.steer button{background:#fffdf2;border-color:#c1d7d3;box-shadow:0 4px 0 #c1d7d3}#boost{background:#f4ad68;color:#3b5059;border:1px solid #e39754;box-shadow:0 4px 0 #da955233}#brake{background:#e0eeeb}select{background:#f0f6eb;color:#315d6c;border:1px solid #cbdcd1;min-height:44px}#contentControls label{color:#5b7c85}.contentActions button{font-weight:500}#best{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#overlay article{scrollbar-width:thin;scrollbar-color:#9bc7bf #eef3e6}.contentActions button{min-height:44px}
@media(max-width:600px){.mark{width:32px;font-size:26px;border-radius:10px}.brand{gap:7px}.top{gap:6px;font-size:10px}#best{max-width:78px}.top button{padding:0 10px}.tracklabel{font-size:8px;left:8px;top:8px;padding:6px 9px}.tracklabel span{font-size:9px}article{padding:20px}h1{font-size:25px}.primary{min-height:48px}.contentActions button{min-height:44px}}
@media(max-height:500px) and (min-width:500px){#app{grid-template-rows:44px 1fr 57px;grid-template-columns:116px 1fr;gap:6px;padding-left:max(9px,env(safe-area-inset-left));padding-right:max(9px,env(safe-area-inset-right))}header{grid-column:1/3}.brand{font-size:15px}.brand small{display:none}.mark{width:32px;font-size:25px}.dashboard{grid-column:1;grid-row:2;flex-direction:column;align-items:stretch;justify-content:center;gap:12px;padding:11px}.dashboard strong{font-size:18px}.dashboard em{font-size:9px}.dashboard small{font-size:10px}.fuelbox{width:100%}.speedbox{display:none}.track{grid-column:2;grid-row:2;border-radius:15px}footer{grid-column:1/3;grid-row:3;padding:0 0 6px}footer button{height:45px;min-height:44px}.tracklabel{top:7px;left:8px;padding:5px 8px;font-size:8px;max-width:95%}.tracklabel span{display:block;font-size:9px;margin-top:3px}article{padding:14px 20px;width:440px}.eyebrow{font-size:9px}h1{font-size:22px;margin:6px 0}article p{font-size:12px;line-height:1.5;margin:6px 0}.tips{display:none}.sub{display:none}.primary{min-height:44px;padding:10px 16px}#contentControls{gap:5px}#brief{font-size:10px}.contentActions button{min-height:44px}#overlay{position:fixed;z-index:10;padding:10px;inset:0;background:#53839470}#overlay article{max-height:100%;width:min(480px,95%)}#best{max-width:135px}}
@media(max-width:360px) and (max-height:650px){#overlay{position:fixed;inset:0;z-index:10;padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));background:#53839470}#overlay article{padding:17px;max-height:100%;width:100%;margin:auto}#overlay h1{font-size:23px;margin:9px 0}#overlay article p{font-size:12px;line-height:1.5;margin:8px 0}#overlay .tips,#overlay .sub{display:none}#brief{font-size:10px!important}#contentControls{gap:6px}.contentActions{gap:5px}.contentActions button{font-size:10px;padding:5px}}
/* Locale controls and long-text layout; gameplay geometry is unchanged. */
#language{flex:none;width:86px;min-width:0;min-height:44px;font-size:11px;padding:6px;cursor:pointer}.brand>div{min-width:0}.brand [data-i18n="brand"]{display:block;max-width:260px;line-height:1.2}.top{flex-shrink:0}#contentControls label>span{flex-shrink:0}#stageSelect{width:0}.contentActions button{white-space:normal;line-height:1.3}#boost>span:first-child{font-size:inherit;margin:0}#boost #nitro{font-size:11px;margin-left:5px}.fuelbox small{gap:5px}.tracklabel{max-width:min(95%,420px)}.tracklabel span{line-height:1.4}.brand small{white-space:nowrap}
@media(max-width:600px){#best{display:none}.brand{font-size:14px;gap:4px}.brand [data-i18n="brand"]{max-width:125px}.brand small{font-size:7px;letter-spacing:.4px}.mark{width:27px;font-size:23px}.top{gap:4px}.top button{padding:0 8px;font-size:11px}#language{width:62px;font-size:10px;padding:4px}header{gap:5px}.dashboard{padding:10px;gap:7px}.dashboard small{letter-spacing:0;font-size:10px}.fuelbox{width:30%}.fuelbox small{flex-wrap:wrap;gap:2px}.contentActions button{min-width:75px}.tracklabel span{font-size:9px}.steer button{padding:0 12px}footer button{padding:0 12px}#boost{min-width:90px}}
@media(max-height:500px) and (min-width:500px){.brand [data-i18n="brand"]{max-width:230px}.fuelbox{width:100%}#best{display:none}#language{width:84px}.tracklabel{max-width:95%}.tracklabel span{font-size:9px}.contentActions button{min-height:44px}#overlay article{width:min(510px,95%)}.brand small{display:none}}

.localeRow{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}#languageMenu{flex:none;width:165px;min-height:44px;font-size:11px;padding:7px}.localeRow .eyebrow{flex:1;min-width:110px}@media(max-height:500px){.localeRow .eyebrow{display:none}.localeRow{justify-content:flex-end}#languageMenu{min-height:44px}}

.localeCompact{position:relative;flex:none;width:64px;height:44px;background:#f0f6eb;border:1px solid #cbdcd1;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:700}.localeCompact #language{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;padding:0}.localeCompact #localeCode{pointer-events:none}.localeCompact:focus-within{outline:3px solid #eb9667}#localeCode::after{content:' ▾';color:#67928d}@media(max-width:600px){.localeCompact{width:48px;font-size:10px}.top button{padding:0 7px}.brand [data-i18n="brand"]{max-width:127px}}@media(max-height:500px) and (min-width:500px){.localeCompact{width:64px}}

/* Allow menu swipes beginning on action buttons; driving buttons retain direct touch controls. */
#overlay button,#overlay select{touch-action:pan-y}
