:root{--ink: #2b2140;--ink-dim: #6b6380;--panel: rgba(255, 252, 245, .94);--panel-line: rgba(43, 33, 64, .12);--accent: #ff8a3d;--accent-2: #ffb347;--good: #3fbf62;--sky: #5fb6ee;--grape: #8c6cf0;--warn: #e8433b;--shadow: 0 6px 0 rgba(43, 33, 64, .18), 0 10px 24px rgba(43, 33, 64, .18);--font: "Baloo 2", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Hiragino Maru Gothic ProN", "Microsoft YaHei", sans-serif;--gn-right: 0px}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#cfeaf8;color:var(--ink);font-family:var(--font);-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}body:has(#gamenow-exit-launcher){--gn-right: 64px}body.gamenow-mobile-mode{--gn-right: 48px}#app{position:fixed;inset:0}canvas.world{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}.layer{position:absolute;inset:0;pointer-events:none}.layer>*{pointer-events:auto}.toast-layer{z-index:40}.toast-layer>*{pointer-events:none}.hud-layer>.hud{pointer-events:none}.ico{display:inline-flex;width:1.2em;height:1.2em;vertical-align:-.2em}.ico svg{width:100%;height:100%}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}.panel{background:var(--panel);border:2px solid var(--panel-line);border-radius:20px;box-shadow:var(--shadow)}.screen button,.modal button{min-height:44px;border:0;border-radius:14px;padding:8px 16px;background:#fff;color:var(--ink);font-weight:800;font-size:16px;box-shadow:0 4px #2b214029;transition:transform .08s,box-shadow .08s;display:inline-flex;align-items:center;justify-content:center;gap:6px}.screen button:active:not(:disabled),.modal button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px #2b214029}.screen button.primary,.modal button.primary{background:linear-gradient(180deg,#ffa24c,#ff7a2f);color:#fff;box-shadow:0 4px #d45a14}.screen button.ghost,.modal button.ghost{background:#fff9;box-shadow:none}.screen button.small,.modal button.small{min-height:36px;padding:4px 12px;font-size:14px}button.login{background:linear-gradient(180deg,#8c6cf0,#6e4fd8)!important;color:#fff!important;box-shadow:0 4px #4f37a8!important}.row{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}.dim{color:var(--ink-dim)}.note{font-size:14px;color:var(--ink-dim);text-align:center}.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#ffffffd9;font-weight:800;font-size:14px}.screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:max(14px,env(safe-area-inset-top)) max(calc(14px + var(--gn-right)),env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));overflow-y:auto}.topbar{display:flex;align-items:center;gap:10px;min-height:48px}.topbar h2{margin:0;font-size:22px;text-shadow:0 2px 0 #fff}.topbar .spacer{flex:1}.account{display:flex;gap:8px;align-items:center}.logo{margin:0;display:flex;gap:.28em;justify-content:center;font-size:clamp(44px,9vw,96px);line-height:.95;letter-spacing:.02em;font-weight:800}.logo span{color:#fff;-webkit-text-stroke:.06em var(--ink);paint-order:stroke fill;text-shadow:0 .07em 0 var(--ink)}.logo span:first-child{color:#ffd23f}.logo span:last-child{color:#ff8fb1}.tagline{margin:6px 0 18px;text-align:center;font-size:20px;font-weight:800;color:#fff;text-shadow:0 2px 0 rgba(43,33,64,.5)}.title-wrap{margin:auto;width:min(520px,100%);display:flex;flex-direction:column;align-items:stretch;padding-bottom:6vh}.menu{display:flex;flex-direction:column;gap:12px}.screen button.big{flex-direction:column;align-items:flex-start;padding:14px 20px;min-height:76px;border-radius:20px;text-align:left}.screen button.big .big-t{font-size:24px;display:inline-flex;gap:8px;align-items:center}.screen button.big small{font-weight:600;opacity:.85;font-size:14px}.screen button.big.race{background:linear-gradient(180deg,#7ec6ff,#4a9df0);color:#fff;box-shadow:0 4px #2a6fbf}.screen button.continue{align-self:center;background:#ffffffeb;font-size:15px}.subs{margin-top:18px}.tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0}.screen .tab{min-width:96px;flex-direction:column;gap:0;background:#ffffffbf}.screen .tab small{font-size:12px;opacity:.8}.screen .tab.on{background:#fff;outline:3px solid var(--accent)}.screen .tabs.small .tab{min-width:0;min-height:36px;font-size:14px}.levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;width:min(760px,100%);margin:6px auto}.screen .level{flex-direction:column;min-height:104px;padding:10px;gap:4px;border-radius:18px}.screen .level .num{font-size:28px;line-height:1;color:var(--accent)}.screen .level .name{font-size:14px;line-height:1.2;text-align:center}.screen .level.locked{opacity:.55}.screen .level.done{background:#fffbe6}.stars{display:inline-flex;gap:2px}.stars i{width:18px;height:18px;color:#d9d2c3;display:inline-flex}.stars i.on{color:#ffc93c;filter:drop-shadow(0 1px 0 #c98a00)}.stars i svg{width:100%;height:100%}.modal-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#2b214059;padding:16px calc(16px + var(--gn-right)) 16px 16px;animation:fadein .15s;z-index:20}.modal{width:min(440px,100%);max-height:100%;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:10px}.modal h3{margin:0;font-size:26px;text-align:center}.modal .label{font-size:13px;color:var(--ink-dim);font-weight:800;text-transform:uppercase;letter-spacing:.05em}.modal button.wide{flex:1}.intro-head{text-align:center}.intro-head small{color:var(--ink-dim);font-weight:800}.intro .goal{margin:0;font-size:19px;font-weight:800;text-align:center}.intro p{margin:0;text-align:center}.skill-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.skill-chip{display:inline-flex;gap:6px;align-items:center;padding:6px 12px;border-radius:12px;background:#fff;font-weight:800;font-size:15px;box-shadow:0 2px #2b21401f}.skill-chip .ico{width:22px;height:22px;color:var(--accent)}.pause button{width:100%}.pause .row button{width:auto;flex:1}.result.win h3{color:var(--good)}.result .saved{margin:0;text-align:center;font-size:20px;font-weight:800}.result p{margin:0;text-align:center}.result .tip{background:#fff7d6;border-radius:12px;padding:8px 12px;font-size:14px}.result .status{font-size:14px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;min-height:22px}.newbest{color:var(--accent)}.big-stars{display:flex;justify-content:center;gap:10px}.big-stars i{width:54px;height:54px;color:#ddd5c4;display:inline-flex;transform:scale(.85);transition:transform .25s cubic-bezier(.3,1.8,.5,1),color .2s}.big-stars i.on{color:#ffc93c;transform:scale(1.1);filter:drop-shadow(0 3px 0 #c98a00)}.big-stars i svg{width:100%;height:100%}.settings .set{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:800}.settings select,.who-screen input{font:inherit;font-weight:800;min-height:44px;border-radius:12px;border:2px solid var(--panel-line);padding:4px 10px;background:#fff;color:var(--ink)}.toggle.on{background:#dff7e4!important;color:#1e7a3a!important}.credits .credit{display:grid;gap:2px;padding:8px 0;border-bottom:1px solid var(--panel-line)}.credits .credit small{color:var(--ink-dim)}.choices{margin:auto;width:min(520px,100%);display:flex;flex-direction:column;gap:12px}.join{padding:14px 16px;display:flex;flex-direction:column;gap:8px}.join small{display:block;color:var(--ink-dim)}.code-input{width:140px;text-align:center;letter-spacing:.3em;font-size:22px!important;text-transform:uppercase;user-select:text;-webkit-user-select:text}.board{width:min(560px,100%);margin:8px auto;display:flex;flex-direction:column;gap:6px}.entry{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;background:#ffffffe6;border-radius:12px;padding:8px 12px;font-weight:800}.entry b{color:var(--accent);text-align:center}.entry em{font-style:normal}.entry.me{outline:3px solid var(--grape)}.empty{text-align:center}.loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:linear-gradient(180deg,#7ec8f0,#d9f1ff);z-index:30}.loading h2{margin:0;font-size:28px}.progress{width:min(320px,70vw);height:14px;border-radius:999px;background:#ffffffb3;overflow:hidden;box-shadow:inset 0 2px #2b21401a}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffb347,#ff7a2f);transition:width .2s}.toast{position:absolute;left:50%;top:max(16px,env(safe-area-inset-top));transform:translate(-50%);padding:10px 18px;font-weight:800;z-index:40;animation:fadein .2s;max-width:90vw;text-align:center}@keyframes fadein{0%{opacity:0}to{opacity:1}}.rotate-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;padding:12px 18px;border-radius:16px;background:#2b2140d1;color:#fff;font-weight:800;z-index:45;pointer-events:none;animation:hintfade 4s forwards;text-align:center;max-width:80vw}@media(orientation:portrait)and (pointer:coarse){.rotate-hint.active{display:block}}@keyframes hintfade{0%,75%{opacity:1}to{opacity:0}}.pad-focus{outline:4px solid var(--grape)!important;outline-offset:2px}.pad-hint{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));z-index:30;padding:6px 12px;border-radius:10px;background:var(--panel);color:var(--ink-dim);font-size:13px;font-weight:800;pointer-events:none}.pad-hint[hidden]{display:none}.pad-cursor{position:fixed;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;border:4px solid #fff;box-shadow:0 0 0 3px var(--grape),inset 0 0 0 3px var(--grape);pointer-events:none;z-index:25}.pad-cursor[hidden]{display:none}.hud{position:absolute;inset:0;pointer-events:none}.hud button{pointer-events:auto}.hud-top{position:absolute;top:max(8px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:max(calc(10px + var(--gn-right)),env(safe-area-inset-right));display:flex;align-items:center;gap:10px;flex-wrap:wrap}.hud-title{padding:6px 14px;border-radius:999px;background:var(--panel);font-weight:800;box-shadow:var(--shadow);max-width:40vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-stats{display:flex;gap:8px;margin-left:auto;margin-right:auto}.stat{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:6px 12px;border-radius:999px;background:var(--panel);font-weight:800;box-shadow:var(--shadow);font-size:18px;position:relative}.stat small{color:var(--ink-dim);font-size:14px}.stat .ico{width:20px;height:20px;color:var(--accent)}.stat.home .ico{color:var(--good)}.stat .meter{position:relative;width:80px;height:10px;border-radius:999px;background:#eee6d8;overflow:visible;margin-left:4px}.stat .meter i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#7fdc8f,#3fbf62);transition:width .25s}.stat .meter em{position:absolute;top:-4px;bottom:-4px;width:3px;border-radius:2px;background:var(--ink)}.stat .meter.reached i{background:linear-gradient(90deg,#ffd23f,#ff9d2f)}.stat.low{color:var(--warn);animation:pulse 1s infinite}@keyframes pulse{50%{transform:scale(1.06)}}.hud-bottom{position:absolute;left:max(8px,env(safe-area-inset-left));right:max(calc(8px + var(--gn-right)),env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));display:flex;gap:10px;align-items:flex-end;justify-content:center}.skills{display:flex;gap:6px;padding:6px;border-radius:20px;background:var(--panel);box-shadow:var(--shadow)}.hud .skill{position:relative;width:62px;height:66px;border:0;border-radius:14px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:4px 2px 2px;box-shadow:0 3px #2b214026;color:var(--ink)}.hud .skill .ico{width:26px;height:26px}.hud .skill .count{position:absolute;top:-6px;right:-4px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:var(--accent);color:#fff;font-size:13px;line-height:22px;box-shadow:0 2px #c95a14}.hud .skill .name{font-size:11px;font-weight:800;line-height:1.1;white-space:nowrap}.hud .skill kbd{position:absolute;left:4px;top:3px;font:inherit;font-size:10px;color:var(--ink-dim)}.hud .skill.on{background:linear-gradient(180deg,#fff4c2,#ffd36b);outline:3px solid var(--accent);transform:translateY(-4px)}.hud .skill.empty{opacity:.45}.hud .skill.empty .count{background:#aaa;box-shadow:none}.controls{display:flex;gap:6px;padding:6px;border-radius:20px;background:var(--panel);box-shadow:var(--shadow);align-items:center}.hud .ctl{width:48px;height:48px;border:0;border-radius:14px;background:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 3px #2b214026;position:relative}.hud .ctl svg{width:24px;height:24px}.hud .ctl.on{background:#e9f8ff;outline:3px solid var(--sky)}.hud .ctl.fast[data-speed]:not([data-speed=""]):after{content:attr(data-speed);position:absolute;bottom:-4px;right:-4px;background:var(--sky);color:#fff;font-size:11px;font-weight:800;border-radius:8px;padding:0 4px}.hud .ctl.nuke{color:var(--warn)}.hud .ctl.nuke.armed{background:var(--warn);color:#fff;animation:pulse .5s infinite}.rate{display:flex;align-items:center;gap:4px}.rate .ctl{width:40px}.rate-val{display:flex;flex-direction:column;align-items:center;min-width:46px;line-height:1}.rate-val small{font-size:10px;color:var(--ink-dim);font-weight:800}.rate-val b{font-size:20px}.hud-hover{position:absolute;left:0;top:0;padding:3px 10px;border-radius:999px;background:#2b2140d9;color:#fff;font-size:13px;font-weight:800;white-space:nowrap;translate:-50% -100%;pointer-events:none}.hud-hover.no{background:#8c7882d9}.hud-hover[hidden]{display:none}.hud-fuses .fuse{position:absolute;left:0;top:0;translate:-50% -100%;min-width:28px;height:28px;border-radius:14px;background:#fff;color:var(--warn);font-weight:800;font-size:18px;text-align:center;line-height:28px;box-shadow:0 2px #0003}.hud-hint{position:absolute;top:calc(max(8px,env(safe-area-inset-top)) + 54px);left:50%;transform:translate(-50%);max-width:min(560px,calc(100vw - 32px - var(--gn-right)));padding:10px 40px 10px 16px;border-radius:16px;background:#fffbe6;box-shadow:var(--shadow);font-weight:700;font-size:15px;pointer-events:auto;transition:opacity .6s}.hud-hint.fade{opacity:.55}.hud-hint .x{position:absolute;right:4px;top:4px;width:36px;height:36px;border:0;border-radius:10px;background:transparent;font-size:22px;line-height:1}.hud-banner{position:absolute;left:50%;top:32%;transform:translate(-50%,-50%);padding:12px 24px;border-radius:20px;background:var(--panel);font-size:24px;font-weight:800;box-shadow:var(--shadow);text-align:center;max-width:86vw}.hud-banner.show{animation:pop .3s cubic-bezier(.3,1.8,.5,1)}.hud-banner.good{color:#1e7a3a;background:#eaffef}.hud-banner.warn{color:var(--warn);font-size:18px}.hud-banner[hidden]{display:none}@keyframes pop{0%{transform:translate(-50%,-50%) scale(.6)}to{transform:translate(-50%,-50%) scale(1)}}.hud.paused:after{content:"";position:absolute;inset:0;border:6px solid rgba(95,182,238,.65);pointer-events:none}.hud-side{position:absolute;left:max(10px,env(safe-area-inset-left));top:calc(max(8px,env(safe-area-inset-top)) + 54px);display:flex;flex-direction:column;gap:6px}.racers{display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:14px;background:var(--panel);box-shadow:var(--shadow);min-width:170px}.racer{display:grid;grid-template-columns:22px 1fr 44px;gap:6px;align-items:center;font-size:13px;font-weight:800}.racer .place{color:var(--accent);text-align:center}.racer .bar{position:relative;height:16px;border-radius:8px;background:#eee6d8;overflow:hidden}.racer .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--c, #7fdc8f);transition:width .3s}.racer .bar span{position:relative;padding-left:6px;font-size:11px;line-height:16px;white-space:nowrap}.racer.me{outline:2px solid var(--grape);border-radius:8px}.racer.out{opacity:.5}.racer.fin .bar i{background:linear-gradient(90deg,#ffd23f,#ff9d2f)}.countdown{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font-size:120px;font-weight:800;color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;pointer-events:none}@media(max-height:500px){.hud .skill{width:50px;height:52px}.hud .skill .ico{width:22px;height:22px}.hud .skill .name{font-size:9px}.hud .skill kbd{display:none}.hud .ctl{width:44px;height:44px}.rate .ctl{width:36px}.stat{font-size:15px;padding:4px 10px}.stat .meter{width:54px}.hud-title{display:none}.hud-hint{top:calc(max(8px,env(safe-area-inset-top)) + 44px);font-size:13px}.logo{font-size:clamp(36px,12vh,72px)}.tagline{margin:2px 0 8px;font-size:16px}.screen button.big{min-height:60px;padding:8px 16px}.screen button.big .big-t{font-size:20px}.levels{grid-template-columns:repeat(6,1fr);gap:8px}.screen .level{min-height:84px}.modal{padding:12px 16px;gap:6px}.modal h3{font-size:20px}.big-stars i{width:40px;height:40px}}@media(max-width:700px){.hud-bottom{flex-direction:column;align-items:stretch;gap:6px}.skills{justify-content:space-between}.hud .skill{width:auto;flex:1;min-width:40px;height:54px}.hud .skill .name,.hud .skill kbd{display:none}.controls{justify-content:space-between}.hud-stats{margin-left:0}.stat .meter{width:44px}.hud-title{display:none}.levels{grid-template-columns:repeat(3,1fr)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.lobby{width:min(560px,100%);margin:8px auto auto;padding:16px;display:flex;flex-direction:column;gap:12px}.lobby-course{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.lobby-course small{font-weight:800;color:var(--ink-dim)}.lobby-course b{font-size:18px}.racer-list{display:flex;flex-direction:column;gap:6px}.lp{display:grid;grid-template-columns:22px 1fr auto auto;grid-template-areas:"dot name tag kick" "dot sub tag kick";align-items:center;column-gap:10px;padding:8px 12px;border-radius:14px;background:#fff;box-shadow:0 2px #2b21401a}.lp .dot,.lp>.ico{grid-area:dot}.lp b{grid-area:name}.lp small{grid-area:sub;color:var(--ink-dim);font-size:12px}.lp .tag{grid-area:tag;font-size:18px;color:var(--ink-dim)}.lp.ready .tag{color:var(--good)}.lp.me{outline:3px solid var(--grape)}.lp.bot{opacity:.8}.lp button{grid-area:kick}.dot{display:inline-block;width:18px;height:18px;border-radius:6px;box-shadow:inset 0 -3px #0000002e;vertical-align:middle}.mypet{justify-content:space-between}.center{text-align:center;margin:0}.screen button.big-go{min-height:56px;font-size:20px}.pet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}.modal .pet-btn{justify-content:flex-start;font-size:14px}.modal .pet-btn.on{outline:3px solid var(--accent)}.result .board{width:100%}.intro .intro-hint{background:#fff7d6;border-radius:12px;padding:8px 12px;font-size:14px;font-weight:700;text-align:left}@media(max-width:480px){.stat{font-size:15px;padding:4px 9px;gap:4px}.stat .meter{display:none}.stat small{font-size:12px}}
