@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Noto+Sans+KR:wght@400;600;700;800;900&display=swap');
:root{--ink:#302643;--muted:#92859f;--pink:#ed418b;--purple:#815bc9;--paper:#f6f1fc}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{display:grid;place-items:center;background:#dce7f1;font-family:'Noto Sans KR',system-ui,sans-serif;color:var(--ink);overscroll-behavior:none}
button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;color:inherit;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #21b4ad;outline-offset:3px}button:hover{filter:brightness(1.04)}button:active{transform:translateY(2px)}a{color:inherit;text-decoration:none}.hidden{display:none!important}
.app-shell{position:relative;isolation:isolate;container-type:size;width:min(100%,520px);height:min(960px,calc(100dvh - 24px));overflow:hidden;border-radius:22px;background:var(--paper);box-shadow:0 18px 70px #37516d2b,0 0 0 1px #ffffffb0}
#world{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.lobby{position:absolute;inset:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;background:linear-gradient(#f6f1fc 65px,transparent 170px,transparent 35%,#f6f1fc 63%);scrollbar-width:thin;scrollbar-color:#cabce0 transparent}
.masthead{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:22px 24px 10px;gap:12px;z-index:1;background:var(--paper)}
.brand{display:flex;align-items:center;gap:11px}.brand-icon{display:grid;place-items:center;background:var(--pink);color:white;font:900 32px system-ui;width:42px;height:42px;border-radius:14px;transform:rotate(-9deg)}.brand-sub{display:block;font-size:8px;font-weight:800;letter-spacing:1.6px;color:#9a87ad;margin-bottom:2px}h1{font-size:24px;font-weight:900;letter-spacing:-1.4px;margin:0;line-height:1.25;white-space:nowrap}h1 em{font-style:normal;color:var(--pink)}
.icon-button{flex-shrink:0;min-width:48px;height:44px;padding:0 10px;border:1px solid #eae2f3;border-radius:14px;background:#fffd;font-size:11px;font-weight:800;box-shadow:0 4px 12px #65507a07}
.hero-stage{flex:1 0 195px;position:relative;min-height:195px;max-height:355px;pointer-events:none}
.hero-copy{position:absolute;top:12px;left:0;right:0;text-align:center;z-index:1}.eyebrow{font-size:8px;letter-spacing:2px;color:var(--purple);font-weight:800}.hero-copy p{font-size:12px;margin:5px 0 0;color:#8a7a9c}.hero-copy b{font-weight:700;color:#655373}
.hero-label{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;border:1px solid #fff;border-radius:24px;padding:7px 13px;background:#ffffffe6;box-shadow:0 6px 16px #6d4f8310;white-space:nowrap}.label-dot{width:6px;height:6px;background:var(--pink);border-radius:50%}.hero-label b{font-size:11px}.hero-number{font-size:8px;color:#a293b3;border-left:1px solid #e9e1f1;padding-left:9px}
.intro{flex-shrink:0;margin:0 20px;padding:18px 19px 12px;border:1px solid #fffc;border-radius:24px;background:#ffffffdf;box-shadow:0 7px 35px #6d4b850b}
.course-summary{display:flex;align-items:center;gap:10px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid #eee8f5}.course-icon{display:grid;place-items:center;width:37px;height:37px;background:#ece6fb;color:#9775d4;border-radius:12px;font-size:23px}.course-summary b{font-size:13px}.course-summary small{display:block;color:#a191b1;font-size:9px;margin-top:3px}.course-count{margin-left:auto;text-align:right;color:#9c8bab;font-size:9px;line-height:1.7}.course-count b{font-size:9px;color:#806298}
.selection{margin:0 0 17px}.section-title{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#b0a1bf;margin-bottom:10px}.section-title b{font-size:12px;color:#574462;margin-left:7px}.section-title strong{font-size:10px;color:var(--pink);font-weight:700}.skins{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.skin{display:grid;place-items:center;min-width:0;min-height:48px;aspect-ratio:1/1;background:#f0eaf7;border:2px solid transparent;border-radius:13px;padding:2px}.skin canvas{width:100%;max-width:48px;height:auto;pointer-events:none}.skin.selected{border-color:var(--pink);background:#fff7fb;box-shadow:0 4px 12px #ed418b10}.modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}.modes button{min-height:51px;padding:8px 4px;border:1px solid #eae2f2;border-radius:13px;background:#f5f1f9;font-size:11px;font-weight:800}.modes button small{display:block;margin-top:3px;font-size:8px;letter-spacing:1.6px;opacity:.6}.modes button.selected{background:#eee6ff;border-color:#c1a4f0;color:#8152c6}
.start-button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:55px;padding:10px 20px;background:var(--pink);border-radius:15px;box-shadow:0 5px 0 #cb3275,0 10px 20px #e0418417;color:white;font-size:16px;font-weight:900}.start-button>span{font-size:25px;font-weight:500}.start-note{text-align:center;font-size:9px;color:#a797b5;line-height:1.6;margin:15px 0 0}
.lobby-footer{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 12px max(12px,env(safe-area-inset-bottom));color:#a293b1;font-size:9px}.keyboard-note{font-size:8px;opacity:.8}.lobby-footer a{font-size:8px;padding:4px;opacity:.75}
#hud{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#f5effca6,transparent 195px)}
.race-top{position:absolute;left:16px;right:16px;top:max(15px,env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;gap:12px}.race-title{background:#fffE;border:1px solid #fff;border-radius:14px;padding:10px 13px}.race-title span{display:block;color:var(--pink);font-size:12px;font-weight:900}.race-title b{display:block;margin-top:3px;font-size:9px;color:#8f7e9b}.race-top button{pointer-events:auto;font-size:18px}.race-progress{position:absolute;left:16px;right:16px;top:89px;background:#fffD;border:1px solid #fff;border-radius:12px;padding:9px 12px}.race-progress>div:first-child{display:flex;justify-content:space-between;font-size:10px;color:#7b658f}.progress-track{height:5px;background:#e8dff1;border-radius:6px;margin-top:6px;overflow:hidden}.progress-track i{display:block;background:var(--pink);height:100%;width:0;border-radius:6px}.stats{position:absolute;left:16px;right:16px;top:149px;display:grid;grid-template-columns:1fr 1.15fr 1fr;background:#ffffffe0;border:1px solid #fff;border-radius:14px;padding:10px 0;text-align:center}.stats>div{border-right:1px solid #e9dfee}.stats>div:last-child{border:0}.stats small,.result-stats small{display:block;font-size:9px;color:#9d8bad}.stats b{display:block;font-size:16px;margin-top:4px;line-height:1.35;font-variant-numeric:tabular-nums}.stats em{font-style:normal;font-size:11px;color:#b09abd}#rank{color:var(--pink);font-size:19px}#timer{font-size:16px}
.race-bottom{position:absolute;left:0;right:0;bottom:155px;display:flex;justify-content:center}#checkpoint{background:#ffffffbe;color:#796487;border:1px solid #fff8;border-radius:20px;padding:7px 12px;font-size:9px}#toast{position:absolute;left:50%;bottom:194px;max-width:calc(100% - 30px);transform:translate(-50%,8px);background:#453054ec;border-radius:20px;color:white;padding:11px 17px;line-height:1.5;text-align:center;font-size:11px;opacity:0;transition:.2s}#toast.show{opacity:1;transform:translate(-50%,0)}
.touch-controls{display:flex;position:absolute;left:18px;right:18px;bottom:max(24px,env(safe-area-inset-bottom));justify-content:space-between;align-items:end;gap:12px;pointer-events:none}.touch-controls button{display:grid;place-content:center;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;background:#fffD;border:2px solid #fff;box-shadow:0 4px 0 #a48db842;min-width:48px;min-height:48px;border-radius:16px;font-size:23px;transition:background .1s,transform .1s}.touch-controls button.held{background:#eee1ff;transform:translateY(3px);box-shadow:0 1px 0 #a48db842}.dpad{display:grid;grid-template-columns:repeat(3,48px);gap:5px}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1}.actions{display:flex;gap:10px;align-items:end}.actions button{width:55px;height:55px;font-size:10px;font-weight:800;border-radius:50%}.actions button span{font-size:23px;line-height:1.1;margin-bottom:2px}.actions button:last-child{width:74px;height:74px;background:var(--pink);color:#fff;border:2px solid #ffacd0;box-shadow:0 5px 0 #b82f7070}.actions button:last-child.held{background:#cb3275}
.countdown{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;background:#80699414}.countdown>span{font-size:18px;color:white;font-weight:900;text-shadow:0 2px 8px #634c87}.countdown b{font-size:110px;color:#fff;line-height:1.4;text-shadow:0 7px 0 #d53888,0 12px 25px #994185;font-weight:900}.countdown small{max-width:90%;background:#fffE;border-radius:24px;padding:11px 18px;font-size:11px;text-align:center}
.modal{position:absolute;inset:0;background:#47346450;backdrop-filter:blur(10px);display:grid;place-items:center;padding:20px;z-index:5}.modal section{width:100%;max-height:100%;overflow-y:auto;background:#fbf8ff;border:2px solid white;border-radius:26px;padding:29px 24px;text-align:center;box-shadow:0 25px 70px #39205120}.modal h2{font-size:28px;letter-spacing:-1.6px;margin:14px 0 10px}.modal p{color:#8c7e9b;font-size:11px;line-height:1.8}.modal .start-button{justify-content:center;margin-top:24px;font-size:14px}.secondary{min-height:44px;margin-top:12px;background:transparent;font-size:12px;color:#8d7d9c}.result-icon{font-size:55px;color:#ffbf3f;text-shadow:0 5px 0 #f18c44}.result-stats{display:flex;justify-content:space-around;margin:21px 0;border-block:1px solid #e9e0f1;padding:18px 0}.result-stats b{display:block;font-size:23px;margin-top:7px}
@media(max-width:540px){.app-shell{height:100dvh;width:100%;border-radius:0;box-shadow:none}.masthead{padding-top:max(17px,env(safe-area-inset-top))}.keyboard-note{display:none}}
@container(max-height:740px){.masthead{padding:14px 20px 7px}.brand-icon{width:37px;height:37px;font-size:28px}h1{font-size:22px}.hero-stage{flex-basis:150px;min-height:150px}.hero-copy{top:7px}.hero-copy .eyebrow{display:none}.hero-copy p{font-size:11px}.hero-label{bottom:6px;padding:5px 10px}.intro{margin:0 14px;padding:14px 15px 10px}.course-summary{padding-bottom:10px;margin-bottom:12px}.selection{margin-bottom:13px}.section-title{margin-bottom:8px}.start-note{font-size:8px;margin-top:13px}.lobby-footer{padding-top:9px;padding-bottom:7px;gap:2px}.lobby-footer a{display:none}.skin{min-height:44px}.modes button{min-height:47px}.race-top{top:10px}.race-progress{top:76px}.stats{top:132px}}
@container(max-width:360px){.masthead{padding-inline:15px}.brand{gap:8px}h1{font-size:21px}.brand-sub{font-size:7px}.intro{margin-inline:10px;padding-inline:12px}.skins{gap:5px}.skin{min-height:42px}.touch-controls{left:12px;right:12px;gap:8px}.dpad{grid-template-columns:repeat(3,44px);gap:4px}.touch-controls button{min-width:44px;min-height:44px}.actions{gap:6px}.actions button{width:49px;height:49px}.actions button:last-child{width:64px;height:64px}.modes button{font-size:10px}}
@container(max-height:500px){.hero-stage{min-height:145px}.race-top{top:8px;left:10px;right:10px}.race-title{padding:7px 10px}.race-progress{top:65px;left:10px;right:10px}.stats{top:118px;left:10px;right:10px;padding:6px 0}.touch-controls{bottom:14px}.race-bottom{bottom:127px;justify-content:flex-end;padding-right:16px}#toast{bottom:165px}.modal{padding:12px}.modal section{padding:15px 18px}.modal h2{font-size:24px;margin:8px 0}.result-icon{font-size:32px}.result-stats{margin:12px 0;padding:10px}.modal .start-button{margin-top:14px;min-height:46px}.secondary{margin-top:7px;min-height:36px}}
/* Four courses, solo records and six-player room flow. */
.lobby .hero-stage{flex:0 0 210px;min-height:170px}.intro{margin-bottom:4px}.course-summary small{max-width:225px;line-height:1.5}.map-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.map-picker button{position:relative;text-align:left;padding:11px 9px 10px 38px;border:1px solid #e9e0f2;border-radius:13px;background:#f6f2fa;min-height:57px}.map-picker button>span{position:absolute;left:10px;top:14px;font-size:21px}.map-picker button b{display:block;font-size:11px;white-space:nowrap}.map-picker button small{display:block;font-size:8px;letter-spacing:1px;color:#a38bae;margin-top:3px}.map-picker button.selected{border-color:#ec7aaa;background:#fff1f8;box-shadow:0 2px 8px #e34d8110}.difficulty-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.difficulty-picker button{min-height:44px;border:1px solid #e7dff0;border-radius:12px;background:#f4eef9;font-size:11px;font-weight:800;padding:6px 2px}.difficulty-picker button.selected{background:#ffe7a5;border-color:#f9c84e;color:#66501d}.field-note{font-size:9px;color:#a18aac;margin:8px 0 0;line-height:1.5}.play-types{display:grid;grid-template-columns:1fr 1fr;gap:7px}.play-types button{min-height:52px;padding:9px 4px;border:1px solid #e7dff0;border-radius:12px;background:#f4eef9;font-size:12px;font-weight:800}.play-types button small{display:block;font-size:9px;font-weight:500;color:#9c86ad;margin-top:3px}.play-types button.selected{border-color:#b299e1;background:#eee5ff;color:#8157c4}.nick-label{display:block;font-size:10px;font-weight:800;color:#947da5;margin:0 0 7px}.text-input{width:100%;min-width:0;height:46px;border:1px solid #ded3e9;border-radius:12px;background:#fbf8ff;color:#483452;font:700 14px 'Noto Sans KR',sans-serif;padding:10px 13px;outline:none}.text-input:focus{border-color:#c78ce2;box-shadow:0 0 0 3px #deb4f333}#nickname{margin-bottom:13px}.join-row{display:flex;gap:7px;margin-top:14px}.join-row input{width:60%;font-size:15px;letter-spacing:2px}.join-row button{flex:1;border-radius:12px;background:#9c7dcd;color:white;font-size:12px;font-weight:800}.ranking-button{width:100%;height:44px;margin-top:12px;background:#efe7f8;border:1px solid #e4d9ee;border-radius:12px;font-size:13px;font-weight:800;color:#86639f}button:disabled{opacity:.5;cursor:default;filter:none}.room-code-row{display:flex;justify-content:center;align-items:center;gap:15px}.room-code-row>b{font-size:38px;letter-spacing:6px;color:#e34c91}.room-code-row .secondary{font-size:10px;margin:0;max-width:80px}.room-players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0}.room-player{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;min-height:79px;border:1px dashed #dbcce8;border-radius:14px;background:#f3edf8;color:#ab98b9}.room-player.occupied{border:1px solid #e5c9e9;background:#fff1f9;color:#8c6095}.room-player span{font-size:17px}.room-player b{font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis}.room-player small{font-size:9px}.rank-filters{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:6px;margin:15px 0}.rank-filters select{width:100%;min-width:0;height:39px;padding:0 5px;font:600 10px 'Noto Sans KR',sans-serif;border:1px solid #decfe9;border-radius:9px;background:white;color:#715282}.rank-list{max-height:310px;min-height:70px;overflow-y:auto;scrollbar-width:thin;text-align:left;font-size:11px;color:#967da5;line-height:1.7}.rank-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid #ebdfef;padding:12px 5px}.rank-row>span{flex:1;color:#6d497b;font-weight:700}.rank-row small{display:block;font-size:9px;color:#a58aae;font-weight:400}.rank-row strong{font-size:12px;color:#b64f98}.rank-row.mine{background:#ffedf6;border-radius:10px}#rankingPanel{z-index:9}#roomPanel{z-index:8}#saveStatus{font-size:10px;color:#ad6995;overflow-wrap:anywhere}#retrySave{margin:0;min-height:32px;font-size:10px}.intro.is-starting{pointer-events:none;opacity:.7}
@container(max-width:360px){.map-picker button{padding-left:32px}.map-picker button>span{left:7px;font-size:18px}.map-picker button b{font-size:10px}.difficulty-picker{gap:4px}.difficulty-picker button{font-size:10px}.course-summary small{max-width:160px}.lobby .hero-stage{flex-basis:180px;min-height:150px}.play-types button{font-size:11px}}
.skins .skin{aspect-ratio:auto;padding:5px 1px;gap:2px;align-content:center}
.skin>span{font-size:9px;font-weight:700;letter-spacing:-.6px;white-space:nowrap;color:#615071;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.skin-traits{margin-top:10px;padding:11px 12px;border-radius:12px;background:#f4effb;border:1px solid #e8ddf5;display:grid;gap:5px;color:#70538f}
.skin-traits b{font-size:12px}.skin-traits span{font-size:11px;line-height:1.6}.skin-traits small{font-size:9px;color:#9a89ac}
.map-difficulty{margin:-5px 0 20px;color:#9173a4;font-size:10px}.map-difficulty>span{font-weight:700}
.hub-identity{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;margin:4px 0 16px;font-size:10px;color:#a28eb1}.hub-identity b{color:#674d7e;font-size:12px;overflow-wrap:anywhere}.hub-identity small{grid-column:1/-1;font-size:9px}
.rank-filters{grid-template-columns:2fr 1fr}
.result-heading{display:flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;margin-bottom:9px}.result-heading .result-icon{font-size:34px;line-height:1;color:#ffbf3f;text-shadow:0 3px 0 #f18c44}.result-heading .eyebrow{font-size:8px}.result-heading h2{font-size:26px;margin:0}.bot-choice{display:flex;align-items:center;gap:10px;margin:13px 0 2px;padding:11px 13px;border:1px solid #e3d5ed;border-radius:13px;background:#f4eef9;color:#715282;text-align:left;cursor:pointer}.bot-choice input{width:20px;height:20px;margin:0;accent-color:#e34c91}.bot-choice span{display:grid;gap:2px}.bot-choice b{font-size:11px}.bot-choice small{font-size:9px;color:#9b87aa;line-height:1.45}.room-player.bot{border-style:solid;background:#eef4ff;color:#6676a8}@container(max-width:360px){.result-heading{gap:6px}.result-heading .result-icon{font-size:28px}.result-heading h2{font-size:22px}.result-heading .eyebrow{font-size:7px;padding-inline:7px}}
.masthead{gap:8px;padding-inline:20px}.brand{min-width:0;gap:8px}.racing-icon{flex-shrink:0;width:42px;height:42px}.masthead h1{font-size:20px;white-space:normal;letter-spacing:-1px}.masthead h1 span,.masthead h1 em{display:block}.brand-sub{font-size:7px;letter-spacing:1px}.hub-link{margin-left:auto;display:flex;align-items:center;justify-content:center;gap:3px;min-height:44px;padding:0 8px;flex-shrink:0;border-radius:12px;background:#eee5fa;color:#815bc9;font-size:10px;font-weight:800}.masthead .icon-button{min-width:40px;padding:0 6px;font-size:10px}
@container(max-width:360px){.masthead{padding-inline:12px;gap:5px}.racing-icon{width:34px;height:34px}.brand{gap:5px}.masthead h1{font-size:17px}.brand-sub{font-size:6px;letter-spacing:.5px}.hub-link{padding-inline:5px;font-size:9px}}
.pc-key{display:none;font-size:8px;font-weight:600;line-height:1;margin-top:2px;opacity:.75}
@media(hover:hover) and (pointer:fine){.pc-key{display:block}.actions button span{font-size:19px}}
.joystick{position:relative;flex:0 0 132px;width:132px;height:132px;border-radius:50%;border:2px solid #ffffffcc;background:radial-gradient(circle,#fff7 0 34%,#ddcdef55 35% 65%,#fff6 66%);box-shadow:0 5px 18px #48365c22,inset 0 0 0 10px #ffffff26;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none}
.joystick-knob{position:absolute;left:50%;top:50%;width:54px;height:54px;border-radius:50%;transform:translate(-50%,-50%);background:linear-gradient(145deg,#fff,#e9ddfa);border:2px solid white;box-shadow:0 5px 0 #ae93c966,0 5px 14px #6b45832b;pointer-events:none}.joystick.held .joystick-knob{background:linear-gradient(145deg,#f7edff,#d8b7f2)}.joystick-guide{position:absolute;inset:0;display:grid;place-items:center;font-size:100px;color:#9775b62b;pointer-events:none}.joystick small{position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:9px;color:#9475a9;pointer-events:none}
@container(max-width:360px){.joystick{width:116px;height:116px;flex-basis:116px}.joystick-knob{width:48px;height:48px}}
@container(max-height:500px){.joystick{width:110px;height:110px;flex-basis:110px}}
#diveButton{--charge:360deg;position:relative;isolation:isolate;background:conic-gradient(#a174e5 var(--charge),#dcd4e7 0);border:0;box-shadow:0 4px 0 #a48db842,0 0 12px #b185e633}
#diveButton:before{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff;z-index:-1}#diveButton.charging:before{background:#eee9f3}#diveButton.charging{color:#a397af;box-shadow:0 3px 0 #a48db825}#diveLabel{font-size:9px;line-height:1.2;font-weight:800}#diveButton.held:not(.charging):before{background:#eedfff}

.rank-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:15px 0}.rank-tabs button{min-height:42px;padding:6px 2px;border:1px solid #decfe9;border-radius:10px;background:#f6effb;color:#715282;font-size:11px;font-weight:700;white-space:nowrap}.rank-tabs button[aria-pressed="true"]{background:#ee3d92;color:white;border-color:#ee3d92}

.game-qr-thumb{flex-shrink:0;width:41px;padding:3px;border-radius:8px;background:#fff;color:#715282;box-shadow:0 2px 8px #78598d09;font:800 6px system-ui}.game-qr-thumb img{display:block;width:35px;height:35px}.game-qr-thumb span{display:block;margin-top:2px}.hero-sound{position:absolute;right:20px;bottom:12px;pointer-events:auto;z-index:2;font-size:10px;padding:0 7px;min-width:40px;min-height:36px}.game-qr-dialog{width:min(330px,calc(100% - 32px));padding:30px 20px 22px;border:1px solid #eee3f5;border-radius:22px;background:#fffafd;color:#392e49;text-align:center}.game-qr-dialog::backdrop{background:#33224788;backdrop-filter:blur(6px)}.game-qr-dialog h2{font-size:17px;margin:12px 0}.game-qr-dialog p{font-size:11px;color:#927aa3}.game-qr-dialog img{display:block;width:100%;max-width:260px;height:auto;aspect-ratio:1;margin:12px auto 0}.game-qr-dialog>button{position:absolute;right:8px;top:7px;width:34px;height:34px;border-radius:10px;background:#f0e7f8;font-size:23px}

.map-picker{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.map-picker button{padding:4px 4px 7px;min-height:0;text-align:center;overflow:hidden}.map-picker button b{font-size:10px;margin-top:4px}.map-picker button small{font-size:8px;letter-spacing:0}.map-preview{display:block;width:100%;height:auto;aspect-ratio:144/84}.racing-ad{clear:both;width:100%;min-height:115px;margin:16px 0;padding:12px 0;border-top:1px solid #e8dfee;border-bottom:1px solid #e8dfee;text-align:center;overflow:hidden}.racing-ad>small{display:block;font-size:9px;color:#a18aac;margin-bottom:6px;font-weight:400}.racing-ad ins{min-height:90px}#result>section{max-height:calc(100dvh - 40px);overflow-y:auto}#result .result-icon{animation:ending-badge .8s ease-out}#result[data-outcome=win] .result-icon{filter:drop-shadow(0 0 14px #ffd465)}#result[data-outcome=lose] .result-icon{animation:ending-wobble 1s ease-in-out}.ending-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}.ending-particles i{position:absolute;left:var(--x);top:-15px;width:8px;height:13px;background:var(--color);animation:ending-fall 2.8s var(--delay) ease-in forwards}#result[data-outcome=lose] .ending-particles i{border-radius:50%;opacity:.5;width:7px;height:7px}@keyframes ending-fall{to{transform:translateY(100vh) rotate(540deg);opacity:0}}@keyframes ending-badge{0%{transform:scale(.3) rotate(-20deg)}60%{transform:scale(1.2)}100%{transform:scale(1)}}@keyframes ending-wobble{25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}}@container(max-width:360px){.map-picker button{padding:3px 3px 6px}.map-picker button b{font-size:9px}}@media(prefers-reduced-motion:reduce){.ending-particles{display:none}#result .result-icon{animation:none!important}}
/* Public racing lobby: matches the bumperball room browser. */
#onlineLobby{z-index:6}
#onlineLobby .online-lobby-card{max-width:410px;padding:24px;text-align:center}
.online-globe{display:grid;place-items:center;width:78px;height:78px;margin:0 auto 17px;border-radius:24px;background:#eee3fa;font-size:42px;transform:rotate(-5deg)}
#onlineLobby h2{margin:0 0 9px;font-size:24px;letter-spacing:-1px;color:#705084}
#onlineLobby .start-button{margin-top:17px;justify-content:center;font-size:13px;min-height:52px}
#createRoomHint{font-size:9px;margin:11px 0 13px;overflow-wrap:anywhere}
.public-room-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:15px 0 9px;text-align:left;color:#8b719e;font-size:12px}
.public-room-heading .secondary{margin:0;min-height:36px;padding:7px 10px;border-radius:10px;background:#eadef7;color:#88609d;font-size:11px}
.public-rooms{display:grid;gap:8px;max-height:260px;max-height:min(32dvh,260px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;text-align:left}
.public-room{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 11px;background:#f4eef9;border:1px solid #e8dbf2;border-radius:12px}
.public-room b{display:block;color:#745386;font-size:12px;overflow-wrap:anywhere}.public-room small{display:block;color:#947da5;font-size:9px;line-height:1.7;margin-top:5px}
.public-room button{height:36px;min-width:48px;padding:0 10px;border-radius:10px;background:#a380cd;color:white;font-size:11px;font-weight:800}
#publicRoomStatus{font-size:10px;line-height:1.7;margin:10px 0 17px;color:#9076a2}
.room-number-label{display:block;text-align:left;margin:10px 0 7px;color:#a28ab4;font-size:9px}
#onlineLobby .join-row{margin:0;grid-template-columns:minmax(0,1fr) 78px;gap:7px}#onlineLobby .text-input{min-width:0;font-size:12px;height:44px}#onlineLobby .join-row button{font-size:11px;border-radius:11px;background:#f0e7f8;color:#825f97;border:1px solid #e6d9f0}
#onlineLobbyNotice:empty{display:none}#onlineLobbyNotice{font-size:11px;line-height:1.7;color:#b4527d;overflow-wrap:anywhere}
#onlineLobby .lobby-back{width:100%;min-height:42px;margin-top:13px;background:#faf5fe;border:1px solid #eee3f6;border-radius:11px;font-size:11px;color:#9c7bae}
#roomTitle{overflow-wrap:anywhere;font-size:23px}
@container(max-width:360px){#onlineLobby .online-lobby-card{padding:21px 16px}#onlineLobby h2{font-size:22px}.public-room{gap:7px;padding:10px 9px}.public-room b{font-size:11px}.public-room small{font-size:9px}.public-room button{min-width:44px}}
@container(max-height:650px){.online-globe{width:56px;height:56px;font-size:32px;margin-bottom:12px}#onlineLobby .online-lobby-card{padding-block:18px}}

/* Only the lobby action block changes; the preview and selectors above stay untouched. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lobby-actions{display:grid;gap:12px}
.lobby-action{position:relative;justify-content:center;min-height:55px;text-align:center}
.lobby-action>span:first-child{display:grid;gap:2px;justify-items:center;font-size:14px;line-height:1.25}
.lobby-action>span:first-child small{font-size:9px;font-weight:500;line-height:1.25}
.lobby-action>span:last-child{position:absolute;right:20px;font-size:22px;font-weight:500}
.online-button{display:flex;align-items:center;justify-content:center;width:100%;min-height:55px;padding:10px 20px;border:1px solid #e4d9ee;border-radius:15px;background:#efe7f8;color:#86639f;font-size:14px;font-weight:900}
.online-button small,.ranking-button small{color:#9c86ad}
.ranking-button{display:flex;align-items:center;justify-content:center;width:100%;min-height:55px;margin:0;padding:10px 20px;border:1px solid #e4d9ee;border-radius:15px;background:#efe7f8;color:#86639f;font-size:14px;font-weight:900}