@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;600;700;800;900&display=swap');
:root{--ink:#392d49;--yellow:#ed418b;--orange:#ed418b;--blue:#9871ce;--paper:#f6f1fc}
body{padding:0;background:radial-gradient(ellipse at 25% 15%,#eee6f7,transparent 60%),#dce7f1;font-family:'Noto Sans KR',system-ui,sans-serif;color:var(--ink)}
button{font-weight:800;touch-action:manipulation;transition:background .15s,transform .15s,box-shadow .15s}button:focus-visible{outline:3px solid #24aaa6;outline-offset:3px}button:hover{filter:brightness(1.04)}
.app{height:calc(100dvh - 24px);margin:12px auto;border-radius:24px;background:#e5dcf4;box-shadow:0 18px 70px #37516d25,0 0 0 1px #ffffffaa}
.overlay{padding:20px;align-items:flex-start;touch-action:pan-y;overscroll-behavior:contain;background:#49335f66;backdrop-filter:blur(12px);scrollbar-width:thin;scrollbar-color:#c6b5d8 transparent}
.overlay .panel{max-width:440px;margin:auto;padding:25px 22px;background:#fbf8ff;color:var(--ink);border:1px solid #fff;border-radius:25px;box-shadow:0 18px 50px #49326020}
#startScreen{display:block;padding:0;background:#f6f1fc;backdrop-filter:none;overflow-x:hidden}#startScreen.hidden{display:none}#startScreen .start-panel{max-width:none;padding:0;margin:0;border:0;border-radius:0;box-shadow:none;background:transparent}
.start-title{display:flex;align-items:center;gap:9px;margin:0;padding:22px 22px 9px;text-align:left}.start-title-copy{flex:1;min-width:0}.club-icon{flex-shrink:0;display:grid;place-items:center;width:39px;height:39px;border-radius:13px;background:#ed418b;color:white;font:900 32px/1 system-ui;transform:rotate(-9deg)}.club-label{display:block;margin-bottom:5px;color:#9a87ad;font:800 7px system-ui;letter-spacing:1.5px}.start-title h1{font-size:23px;line-height:1.25;letter-spacing:-1.4px;color:#392d49;white-space:nowrap;font-weight:900}.start-title h1 em{color:#ed418b;font-style:normal}
.hub-mini{height:36px;flex-shrink:0;padding:0 9px;border-radius:11px;border:1px solid #e7def0;background:#fff;color:#806494;font-size:10px;box-shadow:none}.qr-thumb{flex-shrink:0;width:41px;padding:3px;border-radius:8px;font:800 6px system-ui;box-shadow:0 2px 8px #78598d09}.qr-thumb img{width:35px;height:35px;border-radius:3px}
.cannon-hero{position:relative;height:258px;overflow:hidden;background:radial-gradient(ellipse at 50% 70%,#d5c6ee,transparent 72%)}.hero-copy{position:absolute;z-index:2;top:9px;left:0;right:0;text-align:center}.hero-copy>span{color:#9473b8;font:800 8px system-ui;letter-spacing:1.7px}.hero-copy p{margin:6px 0;font-size:12px;color:#9381a2}.hero-copy b{color:#6c537f}.cannon-hero>img{display:block;position:absolute;width:100%;height:100%;object-fit:contain;left:0;top:17px;filter:drop-shadow(0 15px 12px #8c70a324)}
.hero-caption{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:7px 13px;border:1px solid white;border-radius:24px;background:#fffffff0;white-space:nowrap;box-shadow:0 6px 16px #6d4f8310}.hero-caption i{width:6px;height:6px;border-radius:50%;background:#ed418b}.hero-caption b{font-size:11px}.hero-caption span{padding-left:9px;border-left:1px solid #e9e1f1;color:#a293b3;font:700 8px system-ui}
.setup-card{margin:0 20px;padding:18px 19px 15px;border:1px solid white;border-radius:24px;background:#ffffffed;box-shadow:0 7px 35px #6d4b850b;text-align:left}.card-heading{display:flex;align-items:center;gap:10px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid #eee8f5}.arena-icon{display:grid;place-items:center;width:37px;height:37px;border-radius:12px;background:#ece6fb;color:#9775d4;font-size:28px}.card-heading>div{flex:1}.card-heading b{font-size:13px}.card-heading small{display:block;color:#9682a6;font-size:10px;margin-top:4px}.player-badge{text-align:right;color:#9c8bab;font-size:9px;line-height:1.8}.player-badge b{font-size:9px;color:#806298}
.option-label{display:flex;align-items:center;gap:7px;font:600 10px/1.5 'Noto Sans KR',sans-serif;color:#ac9bbb;margin:15px 0 9px}.option-label b{color:#665074;font-size:11px}.option-label strong{margin-left:auto;font-size:10px;color:#df3f85}.option-label small{margin-left:auto;font-size:9px;color:#9f8bac}
.skin-picker{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;overflow:visible;padding:0}.skin-btn{position:relative;flex:none;min-width:0;width:100%;height:70px;border:2px solid transparent;border-radius:12px;background-color:#f0eaf7;box-shadow:none}.skin-btn.racer-skin{background-size:52px 52px;background-repeat:no-repeat}.skin-btn span{position:absolute;left:0;right:0;bottom:5px;text-align:center;white-space:nowrap;font-size:8px;letter-spacing:-.6px;color:#78638b}.skin-btn.active{border-color:#ed418b;background-color:#fff7fb;box-shadow:0 4px 12px #ed418b10}.skin-btn.active span{color:#d43978}.trait-text{margin:9px 0 15px;padding:10px 11px;background:#f6f0fc;border:1px solid #ece1f5;border-radius:11px;color:#806392;font:600 11px/1.65 'Noto Sans KR',sans-serif}
.modes{gap:6px;margin:0}.mode,.choice{height:40px;padding:0 3px;border-radius:11px;background:#f5f1f9;color:#897499;border:1px solid #eae2f2;font-size:11px}.mode.active{background:#fff0f7;border-color:#eda3c5;color:#d5397c;box-shadow:none}.choice.active{background:#eee6ff;border-color:#c1a4e9;color:#8152c6;box-shadow:none}.difficulty-note{padding:8px 2px 1px;background:transparent;border:0;color:#9a84aa;font:600 10px/1.6 'Noto Sans KR',sans-serif}.cpu-row{gap:6px}.nick-box{margin:16px 0}.nick-box label{color:#a08bad;font-size:9px}.nick-box .name-input{height:42px;border:1px solid #e8dfee;border-radius:11px;background:#faf7fd;color:#654f78;font-size:12px}.nick-box .name-input:focus{border-color:#ba8fd5;box-shadow:0 0 0 3px #b991dc20}
.main-btn{min-height:53px;height:auto;padding:14px 16px;border-radius:14px;background:#ed418b;color:#fff;font-size:14px;box-shadow:0 4px 0 #c93174,0 9px 20px #ed418b18}#startBtn{display:flex;align-items:center;justify-content:space-between}#startBtn>span{font-size:24px;line-height:1;font-weight:500}.sub-btn{height:43px;border-radius:12px;background:#f0e9f8;border:1px solid #e8def1;color:#856398;font-size:11px;margin-top:12px}.secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.design-footer{padding:15px 12px max(18px,env(safe-area-inset-bottom));color:#9c8bab;text-align:center;font-size:9px;line-height:1.9}.design-footer span{font-size:8px;color:#b09dbc}
.topbar{margin:12px;padding:11px 12px;background:#fffffff0;border:1px solid #fff;border-radius:17px;color:#6e5682;box-shadow:0 6px 22px #72509412;grid-template-columns:minmax(0,1fr) auto auto}.brand{color:#ce3e82;font-size:11px;font-weight:900}.brand-row{flex-wrap:wrap;gap:4px}.topbar .hub-mini{height:28px;flex-basis:48px;width:48px;min-width:48px;font-size:9px}.sound{height:28px;width:28px;min-width:28px;flex-basis:28px;border-radius:9px;background:#f0e7fa;color:#87689c;border-color:#e4d7ef}.time{min-width:73px}.time small,.stat small{color:#9a84aa;font-size:8px}.time b{font-size:21px;font-variant-numeric:tabular-nums}.stat{min-width:50px}.stat b{color:#d63d82;font-size:17px}.life-row{color:#9680a4;font-size:8px;gap:7px;margin-top:4px}.life{color:#ed418b;font-size:14px}.boost-track{height:6px;background:#eae0f2}.boost-fill{background:linear-gradient(90deg,#ab82df,#ed67a5)}.net{color:#329a9b}.net.warn{color:#b8781e}.net.bad{color:#cc4567}
.boost-btn{right:14px;bottom:max(15px,env(safe-area-inset-bottom));width:72px;height:72px;background:linear-gradient(145deg,#f665a6,#e33783);border:3px solid #ffd2e6;box-shadow:0 5px 0 #b82f7055,0 8px 22px #af497a25;font-size:11px}.boost-btn[disabled]{opacity:.7;filter:saturate(.5)}.boost-key{font-size:7px;margin-left:2px}.tip{border:1px solid #fff;background:#ffffffef;color:#806491;border-radius:22px;font-size:10px;line-height:1.6;box-shadow:0 5px 20px #69458215}.tip-key{color:#806491;background:#f5eefb;border-color:#d9c6e8;font-size:8px}.toast{background:#50395feF;border-radius:20px;font-size:12px}.countdown{background:#80699420;text-shadow:0 6px 0 #c23b82,0 12px 25px #99418555}.countdown span{max-width:90%;text-align:center;background:#ffffffed;color:#785c8d;text-shadow:none;border-radius:24px;font-size:11px}.countdown.go b{color:white}
h1{font-size:26px;font-weight:900;letter-spacing:-1px;color:#694b80;white-space:normal}.logo{background:#f0e4fa;box-shadow:none;border-radius:24px}.panel>p,.online-note,.rank-rule,.result-meta,.lobby-head{color:#947ea3;font-size:12px}.lobby-room,.player-row,.result-row{background:#f1eaf8;border-color:#e5d7ef;color:#705481}.lobby-room small,.rank-row small{color:#9b83ab}.refresh{background:#eadcf6;color:#846297;font-size:11px}.room-code,.result-score,.rank-row .rec,.result-row b:last-child{color:#dd4387}.rank-row{border-color:#e8dfef;font-size:12px}.rank-modes .mode{font-size:10px}.name-input,.code-input{border:1px solid #e3d5ed;background:#fff;color:#694c7e;font-size:14px;border-radius:12px}.result-row.me{outline-color:#ed418b;background:#fff0f7}.result-end-ad{background:#f4eef9;border-color:#e8deef}.result-ad-label{color:#a08dab}#resultScreen.result-win #resultTitle{color:#d84087;text-shadow:none}#resultScreen.result-lose #resultTitle{color:#9063b1;text-shadow:none}.qr-card{border-radius:24px}.qr-card p{color:#967ca7;font-size:12px}.qr-close{border-radius:10px;background:#f0e7f8;color:#815b97}
@media(max-width:540px){.app{height:100dvh;margin:0;border-radius:0}.start-title{padding-top:max(17px,env(safe-area-inset-top));padding-inline:17px}.start-title h1{font-size:21px}.cannon-hero{height:230px}.overlay{padding:14px}.setup-card{margin-inline:14px;padding-inline:15px}}
@media(max-width:370px){.start-title{padding-inline:12px;gap:6px}.club-icon{width:32px;height:32px;font-size:27px}.club-label{font-size:6px;letter-spacing:.9px}.start-title h1{font-size:18px}.hub-mini{padding-inline:6px;font-size:9px}.qr-thumb{width:35px}.qr-thumb img{width:29px;height:29px}.setup-card{margin-inline:10px;padding-inline:12px}.skin-picker{gap:4px}.skin-btn{height:60px}.skin-btn.racer-skin{background-size:43px 43px}.skin-btn span{font-size:7px}.option-label{gap:5px}.option-label b{font-size:10px}.option-label small{font-size:8px}.card-heading b{font-size:11px}.card-heading small{font-size:9px}.player-badge b{font-size:8px}.topbar{margin:8px;padding:9px;gap:5px}.brand{font-size:10px}.time{min-width:62px}.stat{min-width:43px}.topbar .hub-mini{flex-basis:42px;min-width:42px;width:42px}}
@media(max-height:740px){.cannon-hero{height:185px}.start-title{padding-top:14px}.hero-copy>span{font-size:7px}.hero-copy p{font-size:11px}.hero-caption{bottom:7px}.setup-card{padding-top:14px}.card-heading{padding-bottom:11px;margin-bottom:11px}}
@media(prefers-reduced-motion:reduce){button{transition:none}.countdown b,#resultIcon,#resultScreen:before{animation:none!important}}
.topbar{padding:8px 10px;gap:4px}.time small,.stat small{line-height:1.3}.time b{line-height:1.2}.stat b{line-height:1.2}.life-row{line-height:1.2;margin-top:2px}.life{line-height:1.2}.cannon-hero>img{object-fit:cover}.cannon-hero{height:250px}@media(max-height:740px){.cannon-hero{height:210px}}@media(max-width:370px){.cannon-hero{height:205px}}
#resultScreen{padding-top:110px;padding-bottom:24px}#resultScreen.result-win{background:radial-gradient(circle at 50% 25%,#f8dbeccc,#c7b3dfa8)}#resultScreen.result-lose{background:radial-gradient(circle at 50% 25%,#e8ddf7dd,#b7a7cfaa)}.result-row{grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:5px;font-size:11px;line-height:1.6}.result-row b:last-child{white-space:nowrap;font-size:12px}.result-row span{overflow-wrap:anywhere}
#topbar.result-visible ~ #rankScreen{padding-top:110px}
@media(max-width:370px){.rank-modes .mode{font-size:8px;white-space:nowrap;padding-inline:1px}}
@media(min-width:541px) and (max-height:740px){.cannon-hero{height:240px}.cannon-hero>img{top:35px;height:calc(100% - 25px);object-fit:contain}}