:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--accent:#aa3bff;--danger:#ff3b5c;--track-bg:#f4f3ec;--water:#cfe6f2;--lane-line:#fff;--sans:system-ui, "Segoe UI", Roboto, sans-serif;font:18px/145% var(--sans);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--track-bg:#1f2028;--water:#1c3a4d;--lane-line:#4b6b80}}body{touch-action:none;overscroll-behavior:none;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);margin:0}body:before{content:"";height:env(safe-area-inset-top,0px);z-index:100;background:#1c3a4d;position:fixed;top:0;left:0;right:0}h1{font-family:var(--sans);color:var(--text-h);font-weight:500}#game{box-sizing:border-box;min-height:100svh;padding:calc(20px + env(safe-area-inset-top,0px)) 0 0;flex-direction:column;width:100%;max-width:700px;margin:0 auto;display:flex}#race-area{flex-direction:column;flex:1;gap:16px;min-height:0;padding:0 20px;display:flex}#lower{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));flex-direction:column;flex:none;gap:10px;display:flex}#lower #stamina-track,#lower #power10-btn,#lower #phase-indicator,#lower #progress-track{margin:0 20px}#race-controls{flex-wrap:wrap;gap:10px;display:flex}#race-select{flex-wrap:wrap;flex:100%;gap:10px;display:flex;position:relative}#select-race-btn{border:1px solid var(--border);background:var(--bg);color:var(--text);font-family:var(--sans);cursor:pointer;border-radius:8px;padding:8px 16px;font-size:13px}#select-race-btn strong{color:var(--text-h);font-weight:600}#select-race-btn:disabled{opacity:.5;cursor:default}#race-menu{z-index:20;background:var(--bg);border:1px solid var(--border);border-radius:10px;min-width:260px;margin:0;padding:6px;list-style:none;position:absolute;top:calc(100% + 6px);left:0;box-shadow:0 8px 24px #0000002e}#race-menu button{text-align:left;width:100%;font-family:var(--sans);cursor:pointer;background:0 0;border:none;border-radius:6px;flex-direction:column;gap:2px;padding:8px 12px;display:flex}#race-menu button:hover{background:var(--track-bg)}#race-menu button[aria-selected=true]{box-shadow:inset 3px 0 0 var(--accent);background:var(--track-bg)}.level-name{color:var(--text-h);font-size:14px;font-weight:600}.level-desc{color:var(--text);font-size:12px}#race-controls button{font-family:var(--sans);cursor:pointer;border:none;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:500}#race-controls #design-blade-btn{border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:13px;font-weight:400}#race-controls #design-blade-btn:disabled{opacity:.5;cursor:default}#start-race-btn{background:var(--accent);color:#fff}#start-race-btn:disabled{background:var(--track-bg);color:var(--text);cursor:default}#race-controls #reset-race-btn{color:var(--text);border:1px solid var(--border);background:0 0}#track{--boat-w:140px;background:var(--water);border-radius:12px;flex-direction:column;flex:1;min-height:140px;max-height:260px;display:flex;position:relative;overflow:hidden}.lane{flex:1;position:relative}.lane+.lane{border-top:2px dashed var(--lane-line)}.boat{top:50%;left:calc((100% - var(--boat-w)) * var(--progress,0));width:var(--boat-w);-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;transform:translateY(-50%)}.boat svg{width:100%;height:auto;display:block}.boat.player{--hull-top:#b866ff;--hull-bottom:#7a1fd1;--hull-stroke:#4a0f85;--oar-shaft:#8a6a3d;--oar-blade:#7a1fd1}.boat.ghost{--hull-top:#b0b3ba;--hull-bottom:#80838a;--hull-stroke:#55585f;--oar-shaft:#6b6e75;--oar-blade:#80838a;opacity:.55}#crab{opacity:0;pointer-events:none;width:44px;margin-left:-22px;position:absolute;bottom:50%;left:50%}#crab svg{width:100%;height:auto;display:block}#crab.show{animation:1.4s ease-out crab-pop}@keyframes crab-pop{0%{opacity:0;transform:translateY(14px)scale(.3)rotate(-15deg)}15%{opacity:1;transform:translateY(0)scale(1.15)rotate(8deg)}30%{transform:translateY(0)scale(1)rotate(-6deg)}75%{opacity:1;transform:translateY(0)scale(1)rotate(4deg)}to{opacity:0;transform:translateY(-8px)scale(1)rotate(0)}}#countdown{opacity:0;pointer-events:none;justify-content:center;align-items:center;gap:20px;transition:opacity .2s;display:flex;position:absolute;inset:0}#countdown.active{opacity:1}#countdown-number{color:#fff;text-shadow:0 2px #00000059,0 0 12px #0000004d;min-width:2.6em;font-size:clamp(40px,9vw,64px);font-weight:800;line-height:1}#countdown.go #countdown-number{color:#4ade80}#countdown-number.pop{animation:.9s ease-out countdown-pop}@keyframes countdown-pop{0%{opacity:0;transform:scale(2)}25%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}to{opacity:.6;transform:scale(.9)}}#starter-gun{width:34px;position:relative}#starter-gun svg:not(.flash){width:100%;height:auto;display:block}#starter-gun .flash{opacity:0;width:46px;margin:0 0 -10px -23px;position:absolute;bottom:100%;left:50%}#starter-gun .puff{opacity:0;background:#f1f1f1;border-radius:50%;width:14px;height:14px;margin-left:-7px;position:absolute;bottom:100%;left:50%}#starter-gun.fire{animation:.35s ease-out gun-recoil}#starter-gun.fire .flash{animation:.35s ease-out gun-flash}#starter-gun.fire .puff{animation:1s ease-out gun-puff}#starter-gun.fire .puff:first-of-type{--dx:-14px;animation-delay:50ms}#starter-gun.fire .puff:nth-of-type(2){--dx:0px;animation-delay:.12s}#starter-gun.fire .puff:nth-of-type(3){--dx:14px;animation-delay:.19s}@keyframes gun-recoil{0%{transform:translateY(0)rotate(0)}20%{transform:translateY(6px)rotate(-6deg)}to{transform:translateY(0)rotate(0)}}@keyframes gun-flash{0%{opacity:1;transform:scale(.4)}40%{opacity:1;transform:scale(1.2)}to{opacity:0;transform:scale(1.4)}}@keyframes gun-puff{0%{opacity:.9;transform:translate(0)scale(.4)}to{opacity:0;transform:translate(var(--dx), -30px) scale(1.8)}}#finish-line{background:repeating-conic-gradient(var(--text-h) 0 25%, var(--bg) 0 50%) 0 0 / 6px 6px;width:6px;position:absolute;top:0;bottom:0;right:0}#stamina-track{background:var(--track-bg);border-radius:4px;height:8px;overflow:hidden}#stamina-fill{background:var(--accent);width:0%;height:100%;transition:width .2s}#message{text-align:center;min-height:24px;color:var(--text-h);font-weight:500}#phase-indicator{gap:6px;display:flex}.segment{text-align:center;background:var(--track-bg);color:var(--text);border-radius:6px;flex:1;padding:6px 0;font-size:13px;transition:background .15s,color .15s}.segment.active{background:var(--accent);color:#fff}#progress-track{background:var(--track-bg);border-radius:3px;height:6px;overflow:hidden}#progress-fill{background:var(--accent);width:0%;height:100%}#power10-btn{background:var(--accent);color:#fff;font-family:var(--sans);cursor:pointer;border:none;border-radius:8px;align-self:flex-start;padding:6px 16px;font-size:13px;font-weight:500}#power10-btn:disabled{background:var(--track-bg);color:var(--text);cursor:default}#stroke-zone{background:var(--track-bg);opacity:1;touch-action:none;width:100%;height:28vh;min-height:140px;max-height:220px;transition:opacity .2s;position:relative;overflow:hidden}#stroke-zone.inactive{opacity:.5}#guide-line{background:var(--accent);opacity:0;pointer-events:none;height:1px;transition:opacity .15s;position:absolute;top:50%;left:0;right:0}#guide-line.visible{opacity:.4}#handle{--deviation:0;opacity:0;pointer-events:none;width:64px;height:34px;position:absolute;top:50%;left:0;transform:translate(-50%,-50%)}#handle svg{--glow:color-mix(in srgb, var(--danger) calc(var(--deviation) * 100%), transparent);width:100%;height:100%;filter:drop-shadow(0 0 calc(var(--deviation) * 6px) var(--glow)) drop-shadow(0 0 calc(var(--deviation) * 12px) var(--glow));display:block;overflow:visible}#handle.active{opacity:1}.lane-badge{z-index:2;pointer-events:none;width:34px;height:18px;position:absolute;top:5px;left:6px}.lane-badge svg{width:100%;height:100%;display:block}#blade-editor{z-index:50;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px));background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#blade-editor[hidden]{display:none}.editor-panel{box-sizing:border-box;touch-action:pan-y;background:var(--bg);border:1px solid var(--border);border-radius:14px;flex-direction:column;gap:16px;width:100%;max-width:420px;max-height:100%;padding:20px;display:flex;overflow-y:auto}.editor-panel h2{color:var(--text-h);margin:0;font-size:18px}#blade-preview{background:var(--water);border-radius:12px;align-self:center;width:200px;padding:16px 20px}#blade-preview svg{width:100%;height:auto;display:block}.editor-row{flex-direction:column;gap:8px;display:flex}.editor-row.disabled{opacity:.35;pointer-events:none}.editor-label{text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:600}.swatches{grid-template-columns:repeat(6,1fr);gap:8px;display:grid}.swatch{aspect-ratio:1;border:1px solid var(--border);background:var(--swatch);cursor:pointer;touch-action:manipulation;border-radius:50%}.swatch[aria-pressed=true]{outline:3px solid var(--accent);outline-offset:2px}.patterns{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.pattern{border:1px solid var(--border);background:var(--water);cursor:pointer;touch-action:manipulation;border-radius:8px;padding:8px 12px}.pattern svg{width:100%;height:auto;display:block}.pattern[aria-pressed=true]{outline:3px solid var(--accent);outline-offset:1px}.editor-actions{flex-wrap:wrap;gap:10px;display:flex}.editor-actions button{border:1px solid var(--border);color:var(--text);font-family:var(--sans);cursor:pointer;touch-action:manipulation;background:0 0;border-radius:8px;padding:8px 16px;font-size:13px}.editor-actions #blade-save{background:var(--accent);color:#fff;border:none;font-weight:500}
