:root{color:#e5e7de;font-synthesis:none;--muted:#96a8a8;--line:#334346;--accent:#a9d9c4;--gold:#d7bd83;background:#131c20;font-family:Inter,Pretendard,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(at 20% 10%,#263437 0,#0000 60%);min-height:100dvh;margin:0}button,input,select{font:inherit}button{cursor:pointer;color:inherit;background:#263337;border:1px solid #465759;border-radius:5px;padding:11px 16px;transition:background .15s}button:hover{background:#34494b}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.primary{background:var(--accent);color:#102720;border-color:var(--accent);font-weight:700}.primary:hover{background:#c0e9d8}main{max-width:1280px;margin:auto;padding:0 36px}.masthead{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:86px;display:flex}.brand{color:var(--gold);align-items:center;gap:12px;font-size:27px;text-decoration:none;display:flex}.brand span{color:#e5e7de;letter-spacing:1px;font-size:15px;font-weight:600}.eyebrow{letter-spacing:2px;color:var(--muted);font:10px ui-monospace,monospace}.accent{color:var(--gold)}.lobby{grid-template-columns:1fr 430px;align-items:center;gap:80px;min-height:680px;padding:45px 40px;display:grid}.intro h1{letter-spacing:-2px;margin:24px 0;font-size:clamp(34px,4vw,58px);font-weight:500;line-height:1.3}.intro p,.entry p{color:var(--muted);font-size:14px;line-height:1.9}.fine{color:var(--muted);line-height:1.6;font-size:11px!important}.motif{place-items:center;width:170px;height:150px;margin:22px 0;display:grid;position:relative}.motif:before,.motif:after{content:"";border:1px solid #56645b;border-radius:50%;width:120px;height:120px;position:absolute;transform:rotateX(30deg)}.motif:after{opacity:.45;border-style:dashed;width:150px;height:150px}.motif i{background:linear-gradient(0deg,transparent,var(--gold));width:7px;height:130px;position:absolute;transform:rotate(30deg)}.motif b{color:var(--gold);font-size:26px;position:absolute;top:90px;left:57px}.panel{border:1px solid var(--line);background:#1b282ca6;border-radius:10px;padding:32px}.entry h2{margin:17px 0 12px;font-size:25px;font-weight:500}.entry label{color:#abbcba;margin:24px 0 8px;font-size:12px;display:block}select,input{color:inherit;background:#142023;border:1px solid #475858;border-radius:4px;width:100%;min-width:0;padding:12px}select{font-size:12px}.entry>.primary{justify-content:space-between;width:100%;margin-top:14px;padding:16px;display:flex}.divider{text-align:center;color:#849a98;margin:23px 0 0;font-size:10px}.join-row{gap:8px;display:flex}.join-row button{min-width:67px}#status{min-height:40px;margin-bottom:0;font-size:12px}#reconnect{width:100%;margin-top:15px}.play-toolbar{justify-content:space-between;align-items:center;gap:12px;padding:20px 0;display:flex}.toolbar-actions{align-items:center;gap:8px;display:flex}.play-toolbar button{padding:8px 12px;font-size:12px}#connection{color:var(--accent);font-size:11px}#room-code{letter-spacing:1px;font-family:ui-monospace,monospace}.arena-frame{background:#182326;border:1px solid #495753;border-radius:8px;width:min(100%,177.778dvh - 391.111px);margin:auto;position:relative;overflow:hidden;box-shadow:0 25px 60px #0003}#game{aspect-ratio:16/9;width:100%}#game canvas{touch-action:none;max-width:100%;display:block}.under-arena{color:var(--muted);justify-content:space-between;align-items:center;gap:16px;padding:8px 0;font-size:12px;display:flex}.under-arena p{margin:8px 0}#summary{color:var(--gold);white-space:nowrap;font-size:11px}#combat-toast{letter-spacing:2px;pointer-events:none;text-shadow:0 2px 6px #000;font-size:18px;font-weight:700;position:absolute;top:19%;left:50%;transform:translate(-50%)}#joystick{touch-action:none;-webkit-user-select:none;user-select:none;background:#21373366;border:1px solid #9ab8ad66;border-radius:50%;width:94px;height:94px;position:absolute;bottom:7%;left:4%}#stick{pointer-events:none;background:#a9d9c459;border:1px solid #a9d9c499;border-radius:50%;width:38px;height:38px;position:absolute;top:27px;left:27px}.action-pad{align-items:flex-end;gap:10px;display:flex;position:absolute;bottom:7%;right:3%}.action{touch-action:none;-webkit-user-select:none;user-select:none;background:#1d3031d9;border-color:#829b8b80;border-radius:50%;width:70px;height:70px;padding:5px;position:relative}.action small{color:var(--muted);margin-bottom:5px;font-size:9px;display:block}.action strong{font-size:12px}.action.defend{border-color:var(--accent);width:86px;height:86px;color:var(--accent)}.action.pressed{background:#486a60}.action span{height:12px;margin-top:2px;font:10px ui-monospace,monospace;display:block}details{border-top:1px solid var(--line);margin-top:8px;padding:14px 0}details summary{cursor:pointer;color:#b9cac7;font-size:12px}#rtt-mini{float:right;color:var(--muted);font:11px ui-monospace,monospace}.diagnostic-grid{grid-template-columns:1fr 1fr;gap:24px;margin-top:14px;display:grid}pre{white-space:pre-wrap;color:var(--accent);font-size:11px;line-height:1.8}#events{color:var(--muted);max-height:160px;padding-left:20px;font:11px ui-monospace,monospace;overflow:auto}#drop{padding:7px 10px;font-size:11px}footer{border-top:1px solid var(--line);color:#7c9390;justify-content:space-between;margin-top:22px;padding:21px 0;font-size:10px;display:flex}body.playing .masthead{height:60px}[hidden]{display:none!important}@media (width<=900px){main{padding:0 18px}.lobby{grid-template-columns:1fr 360px;gap:35px;padding:45px 0}.intro h1{font-size:38px}.masthead>.eyebrow{display:none}}@media (width<=640px) and (orientation:portrait){.lobby{grid-template-columns:1fr;gap:20px;padding:30px 0}.motif{display:none}.intro h1{font-size:38px}.intro .fine{display:none}.entry{padding:24px}.play-toolbar{flex-wrap:wrap}.play-toolbar .eyebrow{display:none}.action{width:50px;height:50px}.action.defend{width:58px;height:58px}.action-pad{gap:5px}.action small{display:none}#joystick{width:64px;height:64px}#stick{width:26px;height:26px;top:18px;left:18px}.under-arena{display:block}.diagnostic-grid{grid-template-columns:1fr}#hint:before{content:"가로 화면을 권장합니다. ";color:var(--gold)}}@media (height<=550px) and (orientation:landscape){main{padding:0 max(12px,env(safe-area-inset-left))}body.playing .masthead{display:none}.play-toolbar{padding:7px 0}.play-toolbar .eyebrow{display:none}.arena-frame{width:min(100%,177.778dvh - 163.556px);margin:auto}.action{width:54px;height:54px}.action.defend{width:64px;height:64px}.action small{margin:0;font-size:8px}#joystick{width:70px;height:70px}#stick{width:30px;height:30px;top:19px;left:19px}.action-pad{gap:6px}footer{display:none}.under-arena{padding:0;font-size:10px}#summary{font-size:10px}.lobby{gap:30px;min-height:0;padding:24px 0}.entry{padding:20px}.intro h1{font-size:34px}.motif{display:none}}.action.pressed{color:#102720;background:#a9d9c4;transform:scale(.94);box-shadow:0 0 22px #b9e7d088}.action.pressed small{color:#26463b}.action.input-flash{animation:.25s ease-out input-flash}@keyframes input-flash{0%{box-shadow:0 0 0 5px #e0fff0cc,0 0 25px #b9e7d0aa}to{box-shadow:0 0 0 12px #e0fff000}}