:root{--ink:#111512;--paper:#f0e7d3;--jade:#59d99b;--gold:#e9bf67;--red:#b8453f}*{box-sizing:border-box}html,body{background:#0c100d;min-height:100%;margin:0}body{color:var(--paper);-webkit-tap-highlight-color:transparent;font-family:Pretendard,Noto Sans KR,system-ui,sans-serif;overflow-x:hidden}body:before{content:"";pointer-events:none;background:radial-gradient(circle at 15% 12%,#4b97692e,#0000 30%),radial-gradient(circle at 85% 80%,#8b393024,#0000 30%),repeating-linear-gradient(90deg,#ffffff04 0 1px,#0000 1px 90px),#0c100d;position:fixed;inset:0}.shell{grid-template-columns:minmax(320px,1fr) minmax(340px,480px);align-items:center;gap:clamp(42px,8vw,100px);width:min(1180px,100%);min-height:100svh;margin:0 auto;padding:34px clamp(20px,5vw,70px);display:grid;position:relative}.intro{max-width:560px}.eyebrow{color:#82b89c;letter-spacing:.24em;margin-bottom:18px;font:700 12px/1.2 Arial}h1{letter-spacing:-.06em;margin:0;font:800 clamp(48px,6vw,78px)/.94 Georgia,Noto Serif KR,serif}h1 span{color:var(--gold);letter-spacing:.15em;margin-top:9px;font:900 .72em/1.1 Arial Black,sans-serif;display:block}.lede{color:#adb5ac;max-width:440px;margin:25px 0 30px;font-size:18px;line-height:1.7}.commander-card{width:min(100%,390px);box-shadow:inset 3px 0 var(--gold);background:linear-gradient(100deg,#23382ceb,#161c18bf);border:1px solid #e9bf6747;align-items:center;gap:17px;padding:15px 18px;display:flex}.seal{color:#d98672;border:2px solid #b96052;place-items:center;width:54px;height:54px;font:700 29px Georgia,serif;display:grid;transform:rotate(-3deg)}.commander-card div:last-child{gap:3px;display:grid}.commander-card span{color:#829088;letter-spacing:.08em;font-size:12px}.commander-card strong{font-family:Georgia,Noto Serif KR,serif;font-size:21px}.commander-card small{color:#90c8a7}.controls{flex-wrap:wrap;gap:10px;margin-top:28px;display:flex}.controls>div{color:#849087;background:#101511c2;border:1px solid #2f3932;align-items:center;gap:5px;padding:9px 11px;font-size:12px;display:flex}kbd{text-align:center;color:#d8ddd8;background:#242c27;border:1px solid #526057;border-bottom-width:3px;border-radius:4px;min-width:27px;padding:5px;font:700 12px Arial}.controls span{margin-left:4px}.drag-icon{border:1px solid #526057;border-radius:50%;width:26px;height:26px;display:block;position:relative}.drag-icon:after{content:"↔";text-align:center;color:#d8ddd8;font-style:normal;position:absolute;inset:2px}.auth-panel{color:#9eb4a5;background:#0f1c13a3;border:1px solid #59d99b33;justify-content:space-between;align-items:center;gap:12px;width:min(100%,430px);margin-top:18px;padding:10px 12px;font-size:11px;line-height:1.35;display:flex}.auth-panel-muted{color:#718277;justify-content:flex-start}.auth-panel button{color:#f2d28d;cursor:pointer;background:#382b15cc;border:1px solid #e9bf678c;border-radius:2px;flex:none;padding:7px 10px;font:700 11px/1 system-ui,sans-serif}.auth-panel button:hover{background:#523e1ce6}.auth-panel button:focus-visible{outline-offset:2px;outline:2px solid #fff1c2}.auth-panel button:disabled{cursor:wait;opacity:.6}.auth-dot{background:var(--jade);width:6px;height:6px;box-shadow:0 0 7px var(--jade);border-radius:50%;margin-right:6px;display:inline-block}.auth-error{color:#e18b7a}.nickname-panel{background:#1d271ed1;border:1px solid #e9bf6757;gap:8px;width:min(100%,430px);margin-top:18px;padding:13px 14px;display:grid}.nickname-panel>div:first-child{gap:3px;display:grid}.nickname-kicker{color:var(--gold);letter-spacing:.14em;font:700 10px/1.2 Arial,sans-serif}.nickname-panel strong{color:#e4ebe4;font-size:13px;font-weight:700}.nickname-panel small{color:#7e8e82;font-size:10px}.nickname-panel label{color:#98aa9c;font-size:10px}.nickname-input-row{gap:7px;display:flex}.nickname-input-row input{color:#edf2ea;background:#121a14;border:1px solid #47574b;border-radius:2px;outline:none;flex:1;min-width:0;padding:9px 10px;font:12px/1.2 system-ui,sans-serif}.nickname-input-row input:focus{border-color:var(--jade);box-shadow:0 0 0 2px #59d99b24}.nickname-input-row button{color:#20180d;background:var(--gold);cursor:pointer;border:1px solid #d6a95a;border-radius:2px;flex:none;padding:8px 13px;font:800 11px/1 system-ui,sans-serif}.nickname-input-row button:disabled{cursor:wait;opacity:.6}.nickname-panel .auth-error{margin:0;font-size:10px}.prototype-note{color:#68736b;max-width:430px;margin-top:22px;font-size:13px;line-height:1.65}.game-column{justify-items:center;gap:14px;display:grid}.phone-frame{aspect-ratio:9/16;background:#111713;border:1px solid #e9bf678c;width:min(100%,430px);position:relative;overflow:hidden;box-shadow:0 35px 90px #00000085,0 0 0 7px #141a16,0 0 0 8px #313931}.phone-frame:after{content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 45px #0000006b}.game-host,.game-loading{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:100%}.game-host canvas{display:block}.game-loading{color:#91a399;background:#121814;place-content:center;justify-items:center;gap:12px;display:grid}.loading-mark{border:1px solid var(--gold);width:68px;height:68px;color:var(--gold);place-items:center;font:35px Georgia,serif;animation:1.2s ease-in-out infinite alternate breathe;display:grid}.game-loading p{font-size:14px}.lobby-panel{height:100%;color:var(--paper);background:radial-gradient(circle at 50% 20%,#539b6f33,#0000 37%),linear-gradient(#19251d 0%,#101612 62%,#0e130f 100%);flex-direction:column;padding:22px 20px 18px;display:flex}.lobby-topline,.ranking-heading{justify-content:space-between;align-items:center;display:flex}.lobby-kicker,.ranking-heading span{color:#8eb49b;letter-spacing:.16em;text-transform:uppercase;font:700 11px/1.2 Arial,sans-serif}.lobby-status{color:#71977f;letter-spacing:.1em;align-items:center;gap:5px;font:700 9px/1 Arial,sans-serif;display:inline-flex}.lobby-status i{background:var(--jade);width:5px;height:5px;box-shadow:0 0 8px var(--jade);border-radius:50%}.lobby-portrait{background:radial-gradient(circle,#295e41cc,#0d1811d9 67%);border:1px solid #e9bf6773;border-radius:50%;place-items:center;width:142px;height:142px;margin:23px auto 14px;display:grid;position:relative;overflow:hidden;box-shadow:0 0 0 7px #e9bf670a,0 0 42px #59d99b29}.lobby-portrait:before,.lobby-portrait:after{content:"";background:#e9bf6740;width:200%;height:1px;position:absolute;transform:rotate(45deg)}.lobby-portrait:after{transform:rotate(-45deg)}.lobby-portrait-image{z-index:1;background:url(/assets/characters/guan-yu.png) bottom/contain no-repeat;position:absolute;inset:5px -4px -10px}.portrait-glow{filter:blur(15px);background:#59d99b2e;border-radius:50%;position:absolute;inset:25%}.lobby-commander{text-align:center}.lobby-commander>span{color:#77867b;letter-spacing:.12em;font-size:11px}.lobby-commander h2{margin:4px 0 2px;font:700 29px/1.1 Georgia,Noto Serif KR,serif}.lobby-commander h2 small{color:#9ba99f;font:400 14px/1 system-ui,sans-serif}.lobby-commander p{color:#81bf9b;margin:0;font-size:12px}.lobby-stats{grid-template-columns:repeat(3,1fr);gap:7px;margin:20px 0 16px;display:grid}.lobby-stats div{text-align:center;background:#060c0857;border:1px solid #88a18c2e;padding:10px 3px 9px}.lobby-stats strong{color:var(--gold);font:700 20px/1 Arial,sans-serif;display:block}.lobby-stats span{color:#75847a;margin-top:5px;font-size:10px;display:block}.start-button{color:#20180d;cursor:pointer;background:linear-gradient(100deg,#e8bd68,#c9903c);border:1px solid #d6a95a;border-radius:2px;justify-content:space-between;align-items:center;width:100%;padding:15px 17px;font:800 15px/1 system-ui,sans-serif;transition:transform .18s,filter .18s;display:flex;box-shadow:0 8px 24px #c5913c33}.start-button:hover{filter:brightness(1.08);transform:translateY(-2px)}.start-button:focus-visible{outline-offset:3px;outline:2px solid #fff1c2}.start-button b{font-size:21px;font-weight:400}.lobby-ranking{border-top:1px solid #88a18c2e;margin-top:19px;padding-top:15px}.ranking-heading small{color:#5e7667;letter-spacing:.12em;font:700 9px/1 Arial,sans-serif}.lobby-ranking ol{gap:7px;margin:11px 0 0;padding:0;list-style:none;display:grid}.lobby-ranking li{color:#aab5ac;grid-template-columns:18px 1fr auto;align-items:center;gap:6px;font-size:11px;display:grid}.ranking-rank{color:var(--gold);font:700 11px/1 Arial,sans-serif}.ranking-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.lobby-ranking strong{color:#d9e0d8;font:700 11px/1 Arial,sans-serif}.lobby-tip{color:#627269;text-align:center;margin:auto 0 0;font-size:10px;line-height:1.55}.mobile-hint{color:#69756d;letter-spacing:.04em;margin:0;font-size:12px}@keyframes breathe{to{opacity:.45;transform:scale(.94)}}@media (max-width:820px){.shell{grid-template-columns:1fr;gap:32px;min-height:auto;padding:24px 16px 42px}.intro{display:contents}.eyebrow{text-align:center;order:1;margin:0}h1{text-align:center;order:2;font-size:42px}h1 span{letter-spacing:.08em;margin-left:8px;font-size:.62em;display:inline}.lede,.commander-card,.controls,.prototype-note{display:none}.game-column{order:3}.phone-frame{width:min(100vw - 32px,56.25svh - 87.1875px);min-width:300px}}@media (max-height:700px) and (min-width:821px){.shell{padding-top:20px;padding-bottom:20px}.phone-frame{width:min(390px,56.25svh - 36.5625px)}}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}