:root{--bg:#11161c;--panel:#1a222b;--panel-2:#222c37;--line:#2e3a47;--text:#ecf1f5;--dim:#a9b6c2;--amber:#ffb347;--amber-ink:#241503;--mint:#6fe3c1;--danger:#ff7a6b;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);margin:0;overflow:hidden}body{-webkit-text-size-adjust:100%;overscroll-behavior:none;font:16px/1.45 system-ui,-apple-system,Apple SD Gothic Neo,Noto Sans KR,sans-serif}#app{flex-direction:column;display:flex;position:fixed;inset:0}button{font:inherit;border:1px solid var(--line);background:var(--panel-2);min-width:44px;min-height:44px;color:var(--text);cursor:pointer;touch-action:manipulation;border-radius:12px;padding:0 16px}button.main{background:var(--amber);color:var(--amber-ink);border-color:var(--amber);font-weight:700}button:disabled{opacity:.55}input{font:inherit;border:1px solid var(--line);background:var(--bg);min-height:44px;color:var(--text);border-radius:12px;width:100%;padding:0 12px;font-size:16px}input::placeholder{color:#8d9aa6;opacity:1}input:focus{outline:2px solid var(--amber);outline-offset:1px}.start{padding:calc(24px + var(--safe-t)) 20px calc(24px + var(--safe-b));flex-direction:column;flex:1;justify-content:center;gap:16px;width:100%;max-width:440px;margin:0 auto;display:flex}.start h1{letter-spacing:-.5px;margin:0;font-size:34px}.start h1 span{color:var(--amber)}.start .lead{color:var(--dim);margin:0}.start .card{background:var(--panel);border:1px solid var(--line);border-radius:16px;flex-direction:column;gap:10px;padding:16px;display:flex}.start .card h2{margin:0;font-size:17px}.start .row{gap:8px;display:flex}.start .row input{flex:1;min-width:0}.start .hint{color:var(--dim);margin:0;font-size:14px}.msg{min-height:1.45em;margin:0;font-size:14px}.msg.bad{color:var(--danger)}.msg.good{color:var(--mint)}.top{padding:calc(6px + var(--safe-t)) 12px 6px;background:var(--panel);border-bottom:1px solid var(--line);align-items:center;gap:8px;min-height:52px;display:flex}.top .town{white-space:nowrap;text-overflow:ellipsis;font-weight:700;overflow:hidden}.top .count{color:var(--dim);white-space:nowrap;font-size:14px}.top .spacer{flex:1}.top .net{color:var(--dim);white-space:nowrap;align-items:center;gap:6px;font-size:13px;display:flex}.top .net:before{content:"";background:var(--mint);border-radius:50%;width:9px;height:9px}.top .net.wait:before{background:var(--amber)}.top .net.down:before{background:var(--danger)}.stage{flex:1;min-height:0;position:relative}.stage canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.banner{border:1px solid var(--line);background:#11161ceb;border-radius:12px;align-items:center;gap:10px;padding:10px 12px;font-size:14px;display:flex;position:absolute;top:10px;left:12px;right:12px}.banner.bad{border-color:var(--danger)}.banner p{flex:1;margin:0}.banner[hidden]{display:none}.chat{background:var(--panel);border-top:1px solid var(--line);padding:6px 10px calc(8px + var(--safe-b));flex-direction:column;gap:6px;display:flex}.chat .log{overscroll-behavior:contain;height:92px;font-size:14px;line-height:1.4;overflow-y:auto}.chat .log p{word-break:break-all;margin:0}.chat .log b{color:var(--mint);font-weight:600}.chat .log .me b{color:var(--amber)}.chat .log .sys{color:var(--dim)}.chat .log .bad{color:var(--danger)}.chat form{gap:8px;display:flex}.chat input{flex:1;min-width:0}.hud{background:var(--panel);border-bottom:1px solid var(--line);gap:6px;padding:5px 12px 6px;display:flex}.hud .bar{background:var(--bg);border:1px solid var(--line);border-radius:6px;flex:1;height:20px;position:relative;overflow:hidden}.hud .fill{width:0;transition:width .2s;position:absolute;inset:0 auto 0 0}.hud .hp .fill{background:#b8473c}.hud .xp .fill{background:#7a6420}.hud .txt{text-align:center;color:var(--text);white-space:nowrap;text-overflow:ellipsis;padding:0 4px;font-size:12px;line-height:18px;display:block;position:relative;overflow:hidden}.atk{width:76px;height:76px;color:var(--amber-ink);touch-action:none;-webkit-user-select:none;user-select:none;background:#ffb347eb;border:2px solid #ffd59a;border-radius:50%;padding:0;font-size:17px;font-weight:800;position:absolute;bottom:14px;right:14px;box-shadow:0 4px 14px #00000073}.atk.on{background:#ffc56e;transform:scale(.93)}.atk[hidden]{display:none}