:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#4f4968;--soft-ink:#4f4968b8;--cream:#fffaf6db;--cream-solid:#fffaf6;--pink:#ff9ecd;--pink-deep:#ec6fb0;--mint:#bdf4de;--lemon:#ffe69b;--lavender:#d9cbff;--blue:#a9dcff;--shadow:#5f547e2e;font-family:Inter,ui-rounded,SF Pro Rounded,SF Pro Display,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;min-height:100%;margin:0;overflow:hidden}@supports (height:100dvh){html,body,#app{height:100dvh}}body{color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;background:radial-gradient(circle at 18% 14%,#ffffffeb 0 8%,#0000 23%),linear-gradient(160deg,#ffe2f0 0%,#f6edff 38%,#d7f9e9 100%)}button{font:inherit;color:inherit;cursor:pointer;border:0}button:focus-visible{outline-offset:4px;outline:4px solid #ffffffe0}#game{touch-action:none;width:100vw;height:100vh;display:block;position:fixed;inset:0}.hidden{display:none!important}.hud{top:calc(14px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left));right:calc(106px + env(safe-area-inset-right));z-index:4;pointer-events:none;align-items:center;gap:10px;display:flex;position:fixed}.hud-card,.combo,.lane-pill,.mini-action-button{background:var(--cream);box-shadow:0 14px 40px var(--shadow);-webkit-backdrop-filter:blur(16px)saturate(1.16);border:1px solid #ffffffa8}.hud-card{border-radius:22px;min-width:86px;padding:10px 14px 11px}.metric-label{letter-spacing:.08em;text-transform:uppercase;color:var(--soft-ink);margin-bottom:2px;font-size:.72rem;font-weight:800;display:block}.metric strong{font-size:clamp(1.05rem,2.8vw,1.42rem);line-height:1}.combo{color:#e85fa7;transform-origin:50%;border-radius:999px;padding:10px 14px;font-weight:900;animation:.42s cubic-bezier(.2,1.2,.25,1) both pop}.top-actions{top:calc(14px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));z-index:8;gap:10px;display:flex;position:fixed}.route-widget{top:calc(82px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left));z-index:4;width:min(330px, calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right)));box-shadow:0 16px 44px var(--shadow);-webkit-backdrop-filter:blur(16px)saturate(1.12);pointer-events:none;background:#fffaf6cc;border:1px solid #ffffffb8;border-radius:22px;padding:12px;position:fixed}.route-brand{color:#e86faf;margin-bottom:5px;font-size:.72rem;font-weight:950}.route-title{align-items:center;gap:8px;min-width:0;display:flex}.route-title span{font-size:1.28rem}.route-title strong{overflow-wrap:anywhere;min-width:0;font-size:.98rem;line-height:1.15}.route-meta{color:var(--soft-ink);margin-top:4px;font-size:.78rem;font-weight:800}.mini-map{margin-top:9px}.mini-track{background:linear-gradient(135deg,#ffbedc47,#bdf4de52),#ffffff70;border-radius:18px;height:64px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffffa3}.mini-route-svg{width:calc(100% - 16px);height:calc(100% - 12px);position:absolute;inset:6px 8px;overflow:visible}.mini-route-shadow,.mini-route-line{fill:none;stroke-linecap:round;stroke-linejoin:round}.mini-route-shadow{stroke:#514b6b29;stroke-width:11px}.mini-route-line{stroke:#ff83c1;stroke-width:6px}.route-dot{background:#fff;border:4px solid #ff83c1;border-radius:50%;width:20px;height:20px;position:absolute;top:84%;left:0%;transform:translate(-50%,-50%);box-shadow:0 8px 18px #5f547e33}.mini-pins,.route-stats{justify-content:space-between;align-items:center;gap:6px;display:flex}.mini-pins{color:#4f49689e;margin-top:5px;font-size:.62rem;font-weight:950}.route-stats{color:var(--ink);margin-top:8px;font-size:.78rem;font-weight:950}.drive-notice{left:50%;bottom:calc(128px + env(safe-area-inset-bottom));z-index:6;max-width:min(520px,100vw - 34px);color:var(--ink);box-shadow:0 18px 48px var(--shadow);-webkit-backdrop-filter:blur(16px)saturate(1.12);text-align:center;pointer-events:none;background:#fffaf6e0;border:1px solid #fffc;border-radius:999px;padding:12px 16px;font-size:.9rem;font-weight:950;position:fixed;transform:translate(-50%)}.round-button{width:48px;height:48px;color:var(--ink);background:var(--cream);box-shadow:0 16px 44px var(--shadow);-webkit-backdrop-filter:blur(16px)saturate(1.1);border:1px solid #ffffffb8;border-radius:18px;font-size:1.1rem;font-weight:950;transition:transform .13s,background .13s}.round-button:active,.control-button:active,.primary-button:active,.secondary-button:active{transform:translateY(2px)scale(.98)}.overlay{z-index:7;padding:calc(22px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));-webkit-backdrop-filter:blur(14px);opacity:0;pointer-events:none;background:radial-gradient(circle at 24% 20%,#ffffffb8 0 11%,#0000 34%),linear-gradient(130deg,#ffd6e99e,#c1f6e16b);place-items:center;transition:opacity .22s;display:grid;position:fixed;inset:0}.overlay-visible,.overlay:not(.hidden){opacity:1;pointer-events:auto}.panel{width:min(620px,100%);max-height:calc(100vh - 44px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overscroll-behavior:contain;text-align:center;background:#fffaf6e0;border:1px solid #ffffffd6;border-radius:38px;padding:clamp(24px,5vw,42px);overflow:auto;box-shadow:0 28px 90px #544c7038}.hero-panel{width:min(700px,100%);transform:translateY(-2vh)}.compact-panel{width:min(500px,100%)}.brand-logo{filter:drop-shadow(0 14px 28px #6f5b8529);width:min(238px,58vw);height:auto;margin:0 auto 10px;display:block}.badge{color:#805a86;letter-spacing:.03em;background:linear-gradient(120deg,#ffd5e9d1,#c5f5e0d1);border-radius:999px;justify-content:center;align-items:center;margin-bottom:10px;padding:8px 14px;font-weight:900;display:inline-flex}h1,h2,p{margin-top:0}h1{letter-spacing:0;color:#ee79b4;text-shadow:0 8px #ffffffd6;overflow-wrap:anywhere;text-wrap:balance;margin-bottom:10px;font-size:clamp(2.75rem,9vw,5.35rem);line-height:.94}h2{letter-spacing:0;color:#ee79b4;overflow-wrap:anywhere;text-wrap:balance;margin-bottom:10px;font-size:clamp(2rem,7vw,3.7rem);line-height:1}p{color:var(--soft-ink);text-wrap:pretty;font-size:clamp(1rem,2.8vw,1.18rem);line-height:1.55}.selector-shell{background:#ffffff6b;border:1px solid #ffffffa8;border-radius:24px;gap:10px;margin-top:18px;padding:14px;display:grid}.selector-head{text-align:left;justify-content:space-between;align-items:baseline;gap:12px;display:flex}.selector-label{letter-spacing:.08em;text-transform:uppercase;color:var(--soft-ink);font-size:.72rem;font-weight:900}.selector-head strong{min-width:0;color:var(--ink);overflow-wrap:anywhere;font-size:.98rem}.mode-options,.model-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.model-options{overscroll-behavior:contain;max-height:224px;padding-right:2px;overflow:auto}.mode-option,.model-option,.color-option{background:#ffffffa3;border:1px solid #ffffffc7;transition:transform .13s,background .13s,border-color .13s;box-shadow:0 10px 24px #5f547e1f}.mode-option,.model-option{text-align:left;border-radius:16px;min-height:62px;padding:10px 12px}.mode-option strong,.model-option strong{margin-bottom:2px;font-size:.96rem;line-height:1.12;display:block}.mode-option span,.model-option span{color:var(--soft-ink);font-size:.78rem;font-weight:760;line-height:1.2;display:block}.mode-option[aria-pressed=true],.model-option[aria-pressed=true],.color-option[aria-pressed=true]{background:#fff2f9db;border-color:#ec6fb0ad;transform:translateY(-1px)}.color-options{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;display:grid}.color-option{background:linear-gradient(135deg, var(--swatch), var(--accent)), #ffffffbf;border-radius:15px;min-height:44px;position:relative}.color-option:after{content:"";border:2px solid #ffffffc7;border-radius:10px;position:absolute;inset:9px;box-shadow:inset 0 0 0 1px #4f49681f}.button-row{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px;display:flex}.primary-button,.secondary-button{white-space:nowrap;min-height:54px;box-shadow:0 16px 44px var(--shadow);border-radius:20px;padding:0 22px;font-weight:950;transition:transform .13s,filter .13s}.primary-button{color:#fff;background:linear-gradient(135deg, var(--pink), #f777b6 48%, #c8a6ff)}.secondary-button{color:var(--ink);background:#ffffffb3;border:1px solid #ffffffd1}.how-to{text-align:left;background:#ffffff8c;border-radius:24px;margin-top:18px;padding:16px}.how-to p{margin-bottom:7px;font-size:.98rem}.touch-controls{left:calc(18px + env(safe-area-inset-left));right:calc(18px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));z-index:5;pointer-events:none;grid-template-columns:84px minmax(170px,1fr) 84px;align-items:center;gap:14px;display:grid;position:fixed}.control-button{pointer-events:auto;color:#fff;background:linear-gradient(145deg,#ff9ecdf0,#b199fff0);border-radius:28px;height:74px;font-size:3.2rem;font-weight:900;line-height:.6;box-shadow:0 22px 54px #65598638}.lane-pill{max-width:260px;color:var(--soft-ink);text-align:center;pointer-events:none;border-radius:999px;justify-self:center;padding:8px 16px 9px;font-weight:900}.joystick-pad{pointer-events:auto;touch-action:none;justify-self:center;place-items:center;gap:7px;width:min(380px,100%);min-height:92px;display:grid}.joystick-track{background:#ffffff8f;border:1px solid #ffffffb8;border-radius:999px;width:min(250px,100%);height:28px;position:relative;box-shadow:inset 0 5px 16px #5f547e1f}.joystick-knob{background:linear-gradient(145deg,#fffaf6,#ffd6eb 52%,#c9f7e7);border:2px solid #ffffffe6;border-radius:50%;width:54px;height:54px;transition:transform .12s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 15px 34px #65598638}.joystick-pad.is-dragging .joystick-knob{transition:none}.action-pill-row{pointer-events:none;justify-content:center;gap:8px;width:100%;display:flex}.mini-action-button{min-width:76px;height:34px;color:var(--ink);pointer-events:auto;border-radius:15px;font-size:.78rem;font-weight:950;transition:transform .13s,background .13s}.mini-action-button:active{transform:translateY(1px)scale(.98)}.icon-action{min-width:48px;font-size:1rem}@keyframes pop{0%{opacity:0;transform:scale(.75)}62%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}@media (width<=620px){.hud{right:calc(84px + env(safe-area-inset-right));gap:7px}.optional-wide{display:none}.hud-card{border-radius:19px;min-width:74px;padding:9px 12px 10px}.round-button{border-radius:16px;width:44px;height:44px}.route-widget{top:calc(74px + env(safe-area-inset-top));border-radius:19px;width:min(286px,100vw - 28px);padding:10px}.route-title strong{font-size:.9rem}.route-meta,.route-stats{font-size:.72rem}.touch-controls{grid-template-columns:76px minmax(146px,1fr) 76px;gap:10px}.control-button{border-radius:24px;height:68px}.panel{border-radius:30px}.mode-options,.model-options{grid-template-columns:repeat(2,minmax(0,1fr))}.color-options{grid-template-columns:repeat(3,minmax(0,1fr))}.model-options{max-height:112px}}@media (hover:hover) and (pointer:fine) and (width>=900px){.touch-controls{display:none}.drive-notice{bottom:calc(24px + env(safe-area-inset-bottom))}}@media (width<=820px){.drive-notice{bottom:calc(166px + env(safe-area-inset-bottom));max-width:min(420px,100vw - 118px);padding:10px 14px;font-size:.84rem}}@media (width<=390px),(height<=620px){.overlay{padding:calc(14px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left))}.panel{padding:20px}.brand-logo{width:min(190px,58vw)}h1{font-size:clamp(2.35rem,11vw,3.7rem)}p{font-size:.98rem}.selector-shell{gap:7px;padding:10px}.mode-option,.model-option{min-height:48px;padding:8px 9px}.color-option{min-height:38px}.button-row{margin-top:14px}.mode-option strong,.model-option strong{font-size:.9rem}.mode-option span,.model-option span{font-size:.72rem}.touch-controls{grid-template-columns:64px minmax(128px,1fr) 64px}.control-button{border-radius:20px;height:60px}.joystick-pad{min-height:82px}.joystick-track{height:22px}.joystick-knob{width:46px;height:46px}.mini-action-button{min-width:62px;height:30px;font-size:.7rem}.icon-action{min-width:40px}.drive-notice{bottom:calc(126px + env(safe-area-inset-bottom));max-width:min(360px,100vw - 96px);padding:9px 12px;font-size:.78rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important}}
