:root{--c-bg:#071014;--c-panel:#0c1a20e6;--c-panel-solid:#0f2128;--c-panel-hi:#1a343d;--c-panel-top:#24454f;--c-well:#00000052;--c-line:#ffffff12;--c-line-strong:#ffffff24;--c-ink:#050b0e;--c-text:#f4efe1;--c-dim:#9bb2b6;--c-faint:#8fa7ac;--c-gold:#ffd23f;--c-gold-hi:#ffe680;--c-gold-edge:#b8860b;--c-gold-text:#3b2600;--c-teal:#35c7b4;--c-teal-hi:#74e6d6;--c-teal-edge:#137a6f;--c-teal-text:#03231f;--c-red:#ff5148;--c-red-edge:#9e221c;--c-purple:#9a6bff;--c-pink:#ff63ad;--c-green:#86e69a;--c-sky:#7dd3fc;--c-me:#8fd0ff;--c-paper:#f6efdc;--c-paper-ink:#2a241c;--c-redpen:#d23a2a;--f-body:"Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;--f-display:"Black Han Sans", var(--f-body);--f-hand:"Gaegu", var(--f-body);--r-sm:10px;--r-md:14px;--r-lg:20px;--shadow-panel:inset 0 1px 0 #ffffff14, 0 16px 40px #00000073;--ease-pop:cubic-bezier(.3, 1.45, .5, 1);--ease-out:cubic-bezier(.2, .8, .2, 1);--outline:0 2px 0 var(--c-ink), 2px 0 0 var(--c-ink), -2px 0 0 var(--c-ink), 0 -2px 0 var(--c-ink), 1.5px 1.5px 0 var(--c-ink), -1.5px 1.5px 0 var(--c-ink), 1.5px -1.5px 0 var(--c-ink), -1.5px -1.5px 0 var(--c-ink);--lobby-text:var(--c-text);--lobby-dim:var(--c-dim);--lobby-bg:var(--c-panel-solid);--lobby-line:var(--c-line-strong);--lobby-accent:var(--c-gold);--lobby-accent-dark:var(--c-gold-edge);--lobby-accent-text:var(--c-gold-text);--lobby-ok:var(--c-green);--lobby-me:var(--c-me);--lobby-error:#ff8f8f;--lobby-font:var(--f-body);--font-display:var(--f-display);--font-hand:var(--f-hand);--ink:var(--c-paper-ink);--ink-dim:#6d6252;--paper:var(--c-paper);--redpen:var(--c-redpen)}.icon{vertical-align:-.14em;flex:none;width:1em;height:1em;display:inline-block}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}.coin-ic{box-sizing:border-box;border:2px solid var(--c-ink);color:#04261c;width:28px;height:28px;font:400 13px/1 var(--f-display);background:linear-gradient(#77f2cd,#1f9e7c);border-radius:50%;flex:none;place-items:center;display:inline-grid;box-shadow:inset 0 -3px #00000040}.coin-ic.sm{border-width:1.5px;width:20px;height:20px;font-size:10px;box-shadow:inset 0 -2px #00000040}.btn,.lobby-btn{--btn-bg:var(--c-panel-hi);--btn-hi:var(--c-panel-top);--btn-edge:#00000073;--btn-text:var(--c-text);box-sizing:border-box;border:2px solid var(--c-ink);border-radius:var(--r-md);background:linear-gradient(var(--btn-hi), var(--btn-bg) 62%);min-height:46px;color:var(--btn-text);font:400 17px/1.1 var(--f-display);letter-spacing:.2px;white-space:nowrap;box-shadow:inset 0 -5px 0 var(--btn-edge), inset 0 2px 0 #fff3;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:8px;padding:0 18px 4px;text-decoration:none;transition:transform 80ms,filter .15s,box-shadow 80ms;display:inline-flex;position:relative}.btn:hover:not(:disabled),.lobby-btn:hover:not(:disabled){filter:brightness(1.08)}.btn:active:not(:disabled),.lobby-btn:active:not(:disabled){box-shadow:inset 0 -2px 0 var(--btn-edge), inset 0 2px 0 #fff3;transform:translateY(3px)}.btn:disabled,.lobby-btn:disabled{cursor:default;filter:saturate(.35)brightness(.8);opacity:.75}.btn .icon{width:1.1em;height:1.1em}.btn.gold,.lobby-btn.primary{--btn-bg:var(--c-gold);--btn-hi:var(--c-gold-hi);--btn-edge:var(--c-gold-edge);--btn-text:var(--c-gold-text)}.btn.teal{--btn-bg:var(--c-teal);--btn-hi:var(--c-teal-hi);--btn-edge:var(--c-teal-edge);--btn-text:var(--c-teal-text)}.btn.red,.lobby-btn.danger{--btn-bg:#ec3d35;--btn-hi:#ff7b74;--btn-edge:var(--c-red-edge);--btn-text:#fff}.btn.sm,.lobby-btn.small{border-radius:var(--r-sm);min-height:36px;box-shadow:inset 0 -3px 0 var(--btn-edge), inset 0 2px 0 #fff3;padding:0 12px 3px;font-size:14px}.btn.sm:active:not(:disabled),.lobby-btn.small:active:not(:disabled){box-shadow:inset 0 -1px 0 var(--btn-edge);transform:translateY(2px)}.btn.lg{min-height:66px;box-shadow:inset 0 -6px 0 var(--btn-edge), inset 0 2px 0 #ffffff59, 0 10px 26px #00000059;border-radius:18px;padding:0 26px 6px;font-size:26px}.btn.lg:active:not(:disabled){box-shadow:inset 0 -2px 0 var(--btn-edge), inset 0 2px 0 #ffffff59;transform:translateY(4px)}.btn.block,.lobby-btn.block{width:100%;display:flex}.btn.shine{overflow:hidden}.btn.shine:after{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,#0000 38%,#ffffff8c 50%,#0000 62%) -160% 0/60% 100% no-repeat;animation:3.4s ease-in-out infinite btn-shine;position:absolute;inset:0}.btn.shine:disabled:after{content:none}@keyframes btn-shine{0%,55%{background-position:-160% 0}to{background-position:260% 0}}.btn.busy:before{content:"";border:3px solid;border-right-color:#0000;border-radius:50%;width:.9em;height:.9em;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(1turn)}}.link,.lobby-link{color:var(--c-dim);font:700 13px var(--f-body);text-underline-offset:3px;cursor:pointer;background:0 0;border:0;align-items:center;gap:5px;padding:4px 2px;-webkit-text-decoration:underline #ffffff40;text-decoration:underline #ffffff40;display:inline-flex}.link:hover,.lobby-link:hover{color:var(--c-text);text-decoration-color:currentColor}.icon-btn{min-width:52px;color:var(--c-text);font:700 11.5px var(--f-body);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;justify-items:center;gap:3px;padding:0;text-decoration:none;display:grid;position:relative}.icon-btn .ib{border:2px solid var(--c-ink);background:linear-gradient(var(--c-panel-top), var(--c-panel-hi) 60%);width:46px;height:46px;transition:transform .15s var(--ease-out);border-radius:14px;place-items:center;font-size:22px;line-height:1;display:grid;position:relative;box-shadow:inset 0 -4px #0006,inset 0 2px #ffffff1f}.icon-btn .ib .icon{width:24px;height:24px}.icon-btn:hover .ib{transform:translateY(-2px)}.icon-btn:active .ib{transform:translateY(2px);box-shadow:inset 0 -1px #0006}.icon-btn .dot{box-sizing:border-box;border:2px solid var(--c-ink);background:var(--c-red);color:#fff;min-width:16px;height:16px;font:400 10px/12px var(--f-display);text-align:center;border-radius:999px;padding:0 4px;position:absolute;top:-5px;right:-5px}.panel{box-sizing:border-box;border:2px solid var(--c-ink);border-radius:var(--r-lg);background:var(--c-panel);min-width:0;min-height:0;box-shadow:var(--shadow-panel);color:var(--c-text);flex-direction:column;display:flex;position:relative}.panel-head{align-items:center;gap:10px;padding:14px 16px 10px;display:flex}.panel-title{font:400 21px/1.15 var(--f-display);letter-spacing:.2px;margin:0}.panel-title .icon{color:var(--c-gold);margin-right:6px}.well{border-radius:var(--r-md);background:var(--c-well);box-shadow:inset 0 2px 0 #00000040, inset 0 0 0 1px var(--c-line)}.field,.lobby-input{box-sizing:border-box;border:2px solid var(--c-ink);border-radius:var(--r-md);width:100%;min-height:48px;box-shadow:inset 0 3px 0 #00000059, inset 0 0 0 1px var(--c-line-strong);color:var(--c-text);font:700 16px var(--f-body);background:#0a171c;outline:none;padding:0 14px;transition:box-shadow .15s}.field::placeholder,.lobby-input::placeholder{color:var(--c-faint);font-weight:600}.field:focus,.lobby-input:focus{box-shadow:inset 0 3px #00000059,0 0 0 3px #ffd23fbf}.field[readonly]{opacity:.7}.field-label{color:var(--c-dim);font:800 12px var(--f-body);margin:0 0 6px;display:block}.chip{border:2px solid var(--c-line-strong);min-height:32px;color:var(--c-dim);font:800 12.5px var(--f-body);white-space:nowrap;cursor:pointer;background:0 0;border-radius:999px;align-items:center;gap:5px;padding:0 13px;transition:background .15s,color .15s,border-color .15s;display:inline-flex}.chip:hover:not(:disabled):not(.on){color:var(--c-text);border-color:#ffffff47}.chip.on{border-color:var(--c-ink);background:var(--c-gold);color:var(--c-gold-text)}.chip.on.t-hard{background:var(--c-red);color:#fff}.chip.on.t-rip{background:var(--c-purple);color:#fff}.chip.on.t-park{background:var(--c-pink);color:#fff}.chip:disabled{opacity:.4;cursor:default}.seg{background:var(--c-well);border-radius:13px;gap:2px;padding:4px;display:flex;box-shadow:inset 0 2px #00000040}.seg>button{min-height:36px;color:var(--c-dim);font:400 15px var(--f-display);white-space:nowrap;cursor:pointer;background:0 0;border:0;border-radius:10px;flex:1;padding:0 10px;transition:background .15s,color .15s}.seg>button:hover:not(.on){color:var(--c-text)}.seg>button.on{background:linear-gradient(var(--c-panel-top), var(--c-panel-hi));color:var(--c-text);box-shadow:0 0 0 2px var(--c-ink), inset 0 -3px 0 #00000059, inset 0 1px 0 #ffffff1f}.seg>button .count{color:var(--c-gold);font:400 13px var(--f-display);margin-left:5px}.tag{color:var(--c-gold);font:400 12px/1.6 var(--f-display);letter-spacing:.2px;white-space:nowrap;background:#ffd23f29;border-radius:7px;flex:none;align-items:center;gap:4px;padding:1px 8px;display:inline-flex}.tag.t-hard{color:#ff9b94;background:#ff51482b}.tag.t-rip{color:#cfb8ff;background:#9a6bff33}.tag.t-park{color:#ffb0d6;background:#ff63ad2b}.tag.t-plain{color:var(--c-dim);background:#ffffff14}.level-badge{background:var(--c-gold);color:var(--c-gold-text);font:400 12px/1.6 var(--f-display);letter-spacing:.2px;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:none;vertical-align:1px;border-radius:6px;padding:0 6px;display:inline-block}.title-tag{color:#d8c2ff;font:800 11px/1.65 var(--f-body);white-space:nowrap;text-shadow:none;background:#b77cff2e;border-radius:6px;padding:0 6px;display:inline-block}.title-tag.mod-title{color:#52e080;background:#52e0801f}.guest-tag{color:var(--c-sky);white-space:nowrap;font-weight:800}.name-tag{overflow-wrap:anywhere}.xp-bar{--xp:0;background:#00000073;border-radius:999px;width:100%;height:8px;display:block;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff0f}.xp-fill{width:calc(var(--xp) * 100%);border-radius:inherit;background:linear-gradient(90deg, #f0a81a, var(--c-gold-hi));transition:width .6s var(--ease-out);position:absolute;inset:0 auto 0 0;box-shadow:0 0 10px #ffd23f8c}.face{box-sizing:border-box;border:3px solid var(--face-ring,#ffffff29);background:var(--face) 50% 28% / 190% auto no-repeat, radial-gradient(circle at 50% 30%, #3c6a74, #13282f 75%);width:48px;height:48px;box-shadow:0 0 0 2px var(--c-ink);border-radius:50%;flex:none;display:inline-block;position:relative}kbd,.kbd{box-sizing:border-box;border:2px solid var(--c-ink);min-width:26px;height:26px;color:var(--c-text);font:400 12px var(--f-display);background:linear-gradient(#2c4f59,#1c3740);border-radius:7px;place-items:center;padding:0 6px;display:inline-grid;box-shadow:inset 0 -3px #0006}.sheet-overlay{z-index:30;box-sizing:border-box;padding:max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));font-family:var(--f-body);color:var(--c-text);background:radial-gradient(at 50% 40%,#050c0f99,#020507db);place-items:center;display:grid;position:fixed;inset:0}.sheet-overlay.enter{animation:.18s ease-out fade-in}.sheet-overlay.enter>.sheet{animation:sheet-pop .34s var(--ease-pop)}.sheet-overlay.leave{pointer-events:none;animation:.14s ease-in forwards fade-out}.sheet-overlay.leave>.sheet{animation:.14s ease-in forwards sheet-drop}@keyframes fade-in{0%{opacity:0}}@keyframes rise-in{0%{opacity:0;transform:translateY(10px)}}@keyframes fade-out{to{opacity:0}}@keyframes sheet-pop{0%{opacity:0;transform:translateY(18px)scale(.94)}}@keyframes sheet-drop{to{opacity:0;transform:translateY(10px)scale(.97)}}.sheet{box-sizing:border-box;border:2px solid var(--c-ink);background:linear-gradient(#183239,#0e1f25 70%);border-radius:22px;flex-direction:column;width:min(560px,100%);max-height:100%;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff1a,0 0 0 1px #ffffff0a,0 26px 70px #0009}.sheet.wide{width:min(880px,100%)}.sheet:focus{outline:none}.sheet-head{align-items:center;gap:12px;padding:16px 16px 10px 20px;display:flex}.sheet-title{min-width:0;font:400 24px/1.15 var(--f-display);letter-spacing:.2px;flex:1;margin:0}.sheet-title .icon{color:var(--c-gold);margin-right:8px}.sheet-sub{color:var(--c-dim);font:700 13px var(--f-body);margin:2px 0 0}.sheet-close{border:2px solid var(--c-ink);background:linear-gradient(var(--c-panel-top), var(--c-panel-hi));width:42px;height:42px;color:var(--c-dim);cursor:pointer;border-radius:13px;flex:none;place-items:center;padding:0;display:grid;box-shadow:inset 0 -3px #0006}.sheet-close:hover{color:var(--c-text)}.sheet-close .icon{width:20px;height:20px}.sheet-body{overscroll-behavior:contain;flex:1;min-height:0;padding:4px 20px 18px;overflow-y:auto}.sheet-foot{border-top:2px solid #00000047;justify-content:flex-end;align-items:center;gap:10px;padding:12px 20px 18px;display:flex}body.sheet-open .game-settings.docked{visibility:hidden}.toast-stack{top:calc(env(safe-area-inset-top,0px) + 14px);z-index:45;pointer-events:none;justify-items:center;gap:8px;width:max-content;max-width:calc(100vw - 24px);display:grid;position:fixed;left:50%;translate:-50%}.toast{box-sizing:border-box;border:2px solid var(--c-ink);color:#3a2a12;max-width:min(560px,100vw - 24px);font:800 15px/1.35 var(--f-body);text-align:left;pointer-events:auto;cursor:pointer;animation:toast-in .32s var(--ease-pop);background:#fff4cf;border-radius:14px;align-items:center;gap:10px;padding:10px 16px 11px 12px;display:flex;box-shadow:inset 0 -3px #0000001f,0 12px 30px #00000080}.toast .icon{color:#b07d00;width:22px;height:22px}.toast.warn{color:#6b1a10;background:#ffe0da}.toast.warn .icon{color:var(--c-redpen)}.toast.leaving{animation:.2s ease-in forwards toast-out}@keyframes toast-in{0%{opacity:0;transform:translateY(-14px)scale(.92)}}@keyframes toast-out{to{opacity:0;transform:translateY(-10px)}}.ribbon{box-sizing:border-box;border:2px solid var(--c-ink);background:var(--c-gold);max-width:min(640px,100vw - 24px);min-height:40px;color:var(--c-gold-text);font:800 14px var(--f-body);pointer-events:auto;animation:toast-in .34s var(--ease-pop);border-radius:999px;align-items:center;gap:8px;padding:4px 6px 4px 14px;display:flex;box-shadow:inset 0 -3px #00000026,0 10px 26px #00000073}.ribbon.green{color:#08301a;background:#7fe8a4}.ribbon.blue{color:#08253a;background:#8fd0ff}.ribbon-text{min-width:0;color:inherit;font:inherit;text-align:left;overflow-wrap:anywhere;cursor:pointer;background:0 0;border:0;flex:1;padding:4px 0;text-decoration:none}.ribbon-close{width:30px;height:30px;color:inherit;cursor:pointer;background:#0000001f;border:0;border-radius:50%;flex:none;place-items:center;padding:0;display:grid}.ribbon-close .icon{width:16px;height:16px}.lobby-card{box-sizing:border-box;border:2px solid var(--c-ink);border-radius:var(--r-lg);background:var(--c-panel-solid);box-shadow:var(--shadow-panel);color:var(--c-text);padding:20px 22px;position:relative}.lobby-card h2{font:400 23px var(--f-display);color:var(--c-text);margin:0 0 8px}.lobby-title{font:400 40px/1.1 var(--f-display);color:var(--c-gold);letter-spacing:.5px;text-shadow:var(--outline), 0 5px 0 var(--c-ink);margin:0}.lobby-sub{color:var(--c-dim);margin:6px 0 16px;font-size:14px;line-height:1.6}.lobby-row{gap:10px;display:flex}.lobby-row>*{flex:1}:where(#ui,.sheet-overlay,.game-results,.install-hint,.toast-stack,.patch-page,.admin-page) :focus-visible{outline:3px solid var(--c-gold);outline-offset:3px}:where(#ui,.sheet-overlay,.game-results,.install-hint) .field:focus-visible,:where(#ui,.sheet-overlay,.game-results,.install-hint) .lobby-input:focus-visible{outline:none}@media (prefers-reduced-motion:reduce){:where(#ui,.sheet-overlay,.game-results,.install-hint,.toast-stack,.patch-page,.admin-page,.settings-panel) *,:where(#ui,.sheet-overlay,.game-results,.install-hint,.toast-stack,.patch-page,.admin-page,.settings-panel) :before,:where(#ui,.sheet-overlay,.game-results,.install-hint,.toast-stack,.patch-page,.admin-page,.settings-panel) :after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}
