:root{
  --bg:#050812;--surface:#0a101d;--surface-2:#0e1626;--surface-3:#111b2e;
  --line:rgba(255,255,255,.075);--line-strong:rgba(255,255,255,.13);
  --text:#f4f7ff;--muted:#8795ad;--muted-2:#63718a;
  --primary:#6f75ff;--primary-2:#4ca7ff;--cyan:#48d8ff;--green:#3ee0a4;
  --yellow:#ffd36b;--red:#ff7188;--radius:14px;--shadow:0 20px 70px rgba(0,0,0,.32);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--text);font-family:Pretendard,"Noto Sans KR",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{overflow:hidden;background:radial-gradient(circle at 20% -10%,rgba(111,117,255,.14),transparent 28%),radial-gradient(circle at 90% 10%,rgba(72,216,255,.07),transparent 24%),var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid rgba(111,117,255,.9);outline-offset:2px}
.app{height:100%;padding:10px}.shell{height:100%;min-height:0;border:1px solid var(--line);border-radius:18px;background:rgba(6,10,19,.94);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.topbar{height:58px;flex:0 0 58px;display:flex;align-items:center;gap:18px;padding:0 14px 0 16px;border-bottom:1px solid var(--line);background:rgba(8,13,24,.9);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:11px;min-width:245px}.brand-mark{width:36px;height:36px;border-radius:11px;background:linear-gradient(145deg,#6470ff,#41c7ff);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 24px rgba(79,108,255,.22)}.brand-mark span{width:11px;height:11px;border-radius:50%;background:white;box-shadow:0 0 0 5px rgba(255,255,255,.16)}
.brand-copy strong{display:block;font-size:13px;letter-spacing:-.2px}.brand-copy small{display:block;margin-top:2px;color:var(--muted);font-size:9px}
.live-status{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;color:#b8c4d8;font-size:10px}.live-status span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-dot{width:7px;height:7px;border-radius:50%;background:#65738a;box-shadow:0 0 0 4px rgba(101,115,138,.08)}.status-dot.on{background:var(--green);box-shadow:0 0 0 4px rgba(62,224,164,.10),0 0 16px rgba(62,224,164,.35)}
.top-actions{display:flex;gap:6px}.icon-button{width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.035);color:#dfe7f7;display:grid;place-items:center;transition:.15s}.icon-button:hover{background:rgba(255,255,255,.07);border-color:var(--line-strong);transform:translateY(-1px)}
.workspace{flex:1;min-height:0;display:flex;overflow:hidden}.settings{width:318px;flex:0 0 318px;min-height:0;border-right:1px solid var(--line);background:linear-gradient(180deg,rgba(11,17,30,.98),rgba(8,13,23,.98));display:flex;flex-direction:column;overflow:hidden;transition:width .22s ease,flex-basis .22s ease,border-color .22s ease}.settings.collapsed{width:0;flex-basis:0;border-right-color:transparent}.settings.collapsed>*{opacity:0;pointer-events:none}.settings-scroll{flex:1;min-height:0;overflow:auto;padding:14px 14px 8px;scrollbar-width:thin;scrollbar-color:#26334b transparent}.settings-scroll::-webkit-scrollbar,.rank-viewport::-webkit-scrollbar{width:7px}.settings-scroll::-webkit-scrollbar-thumb,.rank-viewport::-webkit-scrollbar-thumb{background:#26334b;border-radius:99px}
.control-section{padding:15px 0;border-top:1px solid var(--line)}.first-section{padding-top:4px;border-top:0}.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}.section-heading.compact{margin-bottom:9px}.eyebrow{display:block;color:#6f819e;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.section-heading h2,.rank-head h2{margin:2px 0 0;font-size:13px;line-height:1.2;letter-spacing:-.2px}.count-badge,.rank-count{padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);color:#b9c5d8;font-size:9px;font-weight:800;white-space:nowrap}
.entries{width:100%;height:116px;resize:none;border:1px solid var(--line);border-radius:12px;background:#070d18;padding:10px 11px;font-size:11px;line-height:1.5;box-shadow:inset 0 1px 8px rgba(0,0,0,.18)}.entries:focus{border-color:rgba(111,117,255,.75)}.helper{margin:7px 1px 0;color:var(--muted);font-size:9px;line-height:1.45}.helper b{color:#d6def0}
.number-maker{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.number-maker label,.form-field{display:flex;flex-direction:column;gap:5px}.number-maker label span,.form-field>span{color:var(--muted);font-size:9px;font-weight:700}.number-maker input,.form-field input,.form-field select{width:100%;height:36px;border:1px solid var(--line);border-radius:10px;background:#080f1c;padding:0 9px;font-size:10px}.number-maker .button{grid-column:1/-1}
.button{height:36px;border:1px solid var(--line);border-radius:10px;background:#121b2d;color:#eaf0fb;padding:0 12px;font-size:10px;font-weight:800;transition:.15s}.button:hover{filter:brightness(1.1);border-color:var(--line-strong)}.button:active{transform:translateY(1px)}.button-soft{background:rgba(255,255,255,.04)}.button-primary{border:0;background:linear-gradient(135deg,#6971ff,#557fff 55%,#41a8ff);box-shadow:0 9px 22px rgba(77,100,255,.24)}.button-primary span{margin-right:4px}.button-pause{background:rgba(255,190,91,.08);color:#ffd998;border-color:rgba(255,199,105,.16)}
.map-switcher{display:flex;flex-direction:column;gap:7px}.map-tab{position:relative;width:100%;height:54px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025);color:inherit;padding:7px 34px 7px 8px;display:flex;align-items:center;gap:9px;text-align:left;transition:.15s}.map-tab:hover{background:rgba(255,255,255,.045);border-color:var(--line-strong)}.map-tab.active{background:linear-gradient(90deg,rgba(111,117,255,.15),rgba(72,216,255,.04));border-color:rgba(111,117,255,.55);box-shadow:inset 0 0 0 1px rgba(111,117,255,.08)}.map-copy{min-width:0}.map-copy b{display:block;font-size:10px}.map-copy small{display:block;margin-top:3px;color:var(--muted);font-size:8px}.map-check{position:absolute;right:11px;top:50%;transform:translateY(-50%) scale(.7);opacity:0;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--primary);font-size:10px;font-weight:900;transition:.15s}.map-tab.active .map-check{opacity:1;transform:translateY(-50%) scale(1)}
.map-visual{width:39px;height:39px;flex:0 0 39px;border-radius:10px;position:relative;overflow:hidden;background:#0a1323;border:1px solid rgba(255,255,255,.07)}.map-visual i{position:absolute;display:block}.map-visual-classic i:nth-child(1){width:6px;height:6px;border-radius:50%;background:#6d7fff;left:9px;top:8px;box-shadow:14px 5px 0 #48d8ff,6px 17px 0 #ffd36b}.map-visual-classic i:nth-child(2),.map-visual-classic i:nth-child(3){width:16px;height:3px;border-radius:99px;background:#d6b76b;bottom:8px}.map-visual-classic i:nth-child(2){left:5px;transform:rotate(24deg)}.map-visual-classic i:nth-child(3){right:5px;transform:rotate(-24deg)}
.map-visual-bumper{background:radial-gradient(circle at 30% 30%,rgba(62,224,164,.14),transparent 55%),#081820}.map-visual-bumper i{border-radius:50%;background:radial-gradient(circle at 35% 30%,#cffff3,#3cd6b2 25%,#185b65 70%);box-shadow:0 0 8px rgba(62,224,164,.25)}.map-visual-bumper i:nth-child(1){width:13px;height:13px;left:5px;top:6px}.map-visual-bumper i:nth-child(2){width:17px;height:17px;right:5px;top:11px}.map-visual-bumper i:nth-child(3){width:10px;height:10px;left:13px;bottom:4px}
.map-visual-rotate{background:radial-gradient(circle at 50% 50%,rgba(197,108,255,.13),transparent 58%),#160d22}.map-visual-rotate i{width:26px;height:3px;border-radius:99px;background:#d489ff;left:6px;top:18px;transform-origin:center}.map-visual-rotate i:nth-child(1){transform:rotate(15deg)}.map-visual-rotate i:nth-child(2){transform:rotate(75deg)}.map-visual-rotate i:nth-child(3){width:7px;height:7px;border-radius:50%;left:16px;top:16px;background:#fff0bd}
.map-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}.map-info{margin-top:8px;padding:9px 10px;border-radius:11px;border:1px solid var(--line);background:#080f1c}.map-info-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.map-info-head strong{font-size:10px}.map-info-head span{font-size:8px;padding:3px 6px;border-radius:999px;background:rgba(111,117,255,.12);color:#b9c2ff}.map-info p{margin:5px 0 7px;color:var(--muted);font-size:8.5px;line-height:1.45}.map-tags{display:flex;gap:5px;flex-wrap:wrap}.map-tags span{font-size:8px;color:#a9b6ca;padding:3px 6px;border-radius:6px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05)}
.split-section{display:grid;grid-template-columns:1fr 1fr;gap:9px}.full-field{grid-column:1/-1}.custom-rank-field{opacity:.42}.custom-rank-field:has(input:not(:disabled)){opacity:1}.option-section{display:flex;flex-direction:column;gap:8px}.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.025)}.switch-row span{min-width:0}.switch-row b{display:block;font-size:9px}.switch-row small{display:block;margin-top:2px;color:var(--muted);font-size:8px;line-height:1.35}.switch-row input{appearance:none;width:34px;height:19px;flex:0 0 34px;border-radius:99px;background:#263249;position:relative;transition:.16s}.switch-row input:before{content:"";position:absolute;width:15px;height:15px;border-radius:50%;background:#e9eff9;left:2px;top:2px;transition:.16s}.switch-row input:checked{background:var(--primary)}.switch-row input:checked:before{transform:translateX(15px);background:white}
.settings-actions{flex:0 0 auto;padding:10px 14px 13px;border-top:1px solid var(--line);background:rgba(8,13,23,.96)}.secondary-actions,.primary-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.primary-actions{margin-top:7px}.primary-actions .button{height:42px}.primary-actions .button-primary{font-size:11px}
.main-stage{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}.hud{height:64px;flex:0 0 64px;display:grid;grid-template-columns:110px 1.1fr 1fr 90px 90px 1fr 1.5fr;border-bottom:1px solid var(--line);background:rgba(7,12,22,.92)}.hud-card{min-width:0;padding:10px 12px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}.hud-card:last-child{border-right:0}.hud-card span{color:#73819a;font-size:8px;font-weight:700}.hud-card b{margin-top:3px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.leader-card b{color:#ffd987}.progress-card>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px}.progress-card>div:first-child b{margin:0;color:#afbbce}.progress{height:5px;margin-top:7px;border-radius:99px;background:#151f31;overflow:hidden}.progress i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#6f75ff,#49c8ff);transition:width .16s}
.gamewrap{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px;background:#03060c;overflow:hidden}.viewport{position:relative;min-width:0;min-height:0;overflow:hidden;background:#03060c}.viewport canvas{display:block;width:100%;height:100%;min-height:0;touch-action:none;background:#03060c}.stage-topline{position:absolute;left:12px;top:12px;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none;z-index:3}.stage-pill{display:flex;align-items:center;gap:5px;padding:6px 8px;border-radius:9px;border:1px solid rgba(255,255,255,.09);background:rgba(5,9,17,.78);backdrop-filter:blur(10px);color:#9eabc0;font-size:8px}.stage-pill strong{color:#edf2fb}.pulse-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(62,224,164,.08)}
.winner{position:absolute;left:50%;top:13px;z-index:5;transform:translate(-50%,-12px);width:min(460px,76%);padding:10px 12px;border:1px solid rgba(255,211,107,.32);border-radius:13px;background:rgba(8,12,22,.92);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;gap:10px;text-align:left;opacity:0;visibility:hidden;transition:.22s}.winner.show{opacity:1;visibility:visible;transform:translate(-50%,0)}.winner-icon{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;background:rgba(255,211,107,.12);color:#ffd36b}.winner div{min-width:0}.winner small{display:block;color:#ffd36b;font-size:8px;font-weight:900}.winner strong{display:block;margin:1px 0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.winner div>span{display:block;color:var(--muted);font-size:8px}
.minimap{position:absolute;right:10px;top:12px;width:30px;height:200px;border:1px solid rgba(255,255,255,.11);border-radius:10px;background:rgba(3,7,14,.72);backdrop-filter:blur(10px);z-index:4;overflow:hidden}.mini-track{position:absolute;left:12px;top:7px;bottom:7px;width:4px;border-radius:99px;background:rgba(255,255,255,.09)}.mini-leader{position:absolute;left:8px;width:12px;height:4px;border-radius:99px;background:var(--yellow);top:7px;box-shadow:0 0 8px rgba(255,211,107,.42)}.mini-cam{position:absolute;left:4px;right:4px;height:22px;top:7px;border:1px solid rgba(72,216,255,.75);border-radius:5px;background:rgba(72,216,255,.07)}.canvas-guide{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);padding:5px 8px;border-radius:8px;background:rgba(2,5,11,.68);color:#64718a;font-size:8px;pointer-events:none;opacity:.72}
.rank{min-width:0;min-height:0;border-left:1px solid var(--line);background:linear-gradient(180deg,#080e19,#070c16);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;overflow:hidden}.rank-head{height:64px;padding:13px 12px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line)}.rank-head h2{font-size:12px}.rank-tools{display:grid;grid-template-columns:minmax(0,1fr) 49px;gap:6px;padding:9px 10px}.search-box{height:34px;display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;background:#070d18;padding:0 8px}.search-box span{color:#63718a}.search-box input{width:100%;min-width:0;border:0;outline:0;background:transparent;font-size:9px}.search-box input::placeholder{color:#58667c}.search-button{height:34px;padding:0 7px}.rank-viewport{position:relative;min-height:0;overflow:auto;border-top:1px solid rgba(255,255,255,.035);border-bottom:1px solid rgba(255,255,255,.035);scrollbar-width:thin;scrollbar-color:#26334b transparent}.rank-spacer{position:relative;width:100%}.rank-rows{position:absolute;inset:0 0 auto}.rankrow{height:30px;display:grid;grid-template-columns:43px 9px minmax(0,1fr);align-items:center;gap:7px;padding:0 10px;border-bottom:1px solid rgba(255,255,255,.038);font-size:9px}.rankrow:hover{background:rgba(255,255,255,.025)}.rankrow.win{background:rgba(255,211,107,.08);box-shadow:inset 2px 0 0 #ffd36b}.ranknum{color:#74839c;font-weight:900}.rankdot{width:8px;height:8px;border-radius:50%}.rankname{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rank-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#66758d;padding:20px}.empty-icon{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;margin-bottom:9px;font-size:17px;color:#53627a}.rank-empty b{font-size:9px;color:#8290a7}.rank-empty small{margin-top:4px;font-size:8px;line-height:1.4}.rank-foot{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:9px 10px}.rank-foot .button{height:34px;font-size:9px}
.creator-footer{height:28px;flex:0 0 28px;display:flex;align-items:center;justify-content:center;border-top:1px solid var(--line);background:rgba(7,12,22,.96);color:#65738b;font-size:8px;letter-spacing:-.05px;user-select:none}
.toast{position:fixed;left:50%;bottom:24px;z-index:50;transform:translate(-50%,12px);padding:9px 13px;border-radius:10px;border:1px solid var(--line);background:#101827;color:#eef3ff;font-size:10px;box-shadow:0 12px 40px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
html[data-game-map="bumper"] .map-info-head span{background:rgba(62,224,164,.12);color:#8aefd0}html[data-game-map="chaos"] .map-info-head span{background:rgba(204,111,255,.12);color:#dda4ff}
@media(max-width:1250px){.settings{width:286px;flex-basis:286px}.gamewrap{grid-template-columns:minmax(0,1fr) 260px}.hud{grid-template-columns:95px 1fr 1fr 75px 75px 1fr 1.25fr}.camera-card{display:none}.hud{grid-template-columns:95px 1fr 1fr 75px 75px 1.35fr}}
@media(max-width:940px){body{overflow:auto}.app{height:auto;min-height:100%;padding:0}.shell{height:auto;min-height:100vh;border-radius:0;border-left:0;border-right:0}.workspace{position:relative;overflow:visible}.settings{position:fixed;left:0;top:58px;bottom:28px;z-index:30;width:min(340px,88vw);flex-basis:auto;box-shadow:20px 0 60px rgba(0,0,0,.42);transform:translateX(0);transition:transform .22s}.settings.collapsed{width:min(340px,88vw);transform:translateX(-100%)}.main-stage{min-height:calc(100vh - 58px)}.hud{grid-template-columns:repeat(3,1fr);height:auto;flex-basis:auto}.hud-card{min-height:52px}.progress-card{grid-column:span 3}.gamewrap{grid-template-columns:1fr;grid-template-rows:minmax(620px,72vh) 300px;min-height:920px}.rank{border-left:0;border-top:1px solid var(--line)}.viewport{min-height:620px}.brand-copy small{display:none}}
@media(max-width:560px){.topbar{gap:8px;padding-left:10px}.brand{min-width:0;flex:1}.brand-copy strong{font-size:11px}.live-status{display:none}.top-actions{gap:4px}.icon-button{width:32px;height:32px}.hud{grid-template-columns:repeat(2,1fr)}.progress-card{grid-column:span 2}.camera-card{display:none}.gamewrap{grid-template-rows:minmax(560px,68vh) 280px}.viewport{min-height:560px}.stage-pill:nth-child(3){display:none}.canvas-guide{display:none}.winner{width:88%}}