:root{color-scheme:dark;font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:12px;--header:48px;--accent:#b69c76;--ink:#d8e5ec;--line:#283a48;--muted:#8a9da9;--surface:#0e1923;--page:#0c151e}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{height:100dvh;display:grid;grid-template-rows:var(--header) minmax(0,1fr);color:var(--ink);background:var(--page)}
body[data-game=dfm]{--accent:#68f7a0;--line:#253c36;--surface:#101e1c;--page:#0b1514}
button,input,select{font:inherit}button{color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:disabled{opacity:.4;cursor:default}
button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}
.topbar{display:flex;align-items:center;gap:18px;min-width:0;padding:0 18px;border-bottom:1px solid var(--line);background:var(--surface);white-space:nowrap;z-index:40}
.identity{display:flex;align-items:center;gap:9px;color:var(--accent);text-decoration:none;font-size:16px;letter-spacing:.04em;flex-shrink:0}
.identity img{width:29px;height:29px;object-fit:contain}.identity strong{font-weight:600}
.connection{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;min-width:0}.connection span{overflow:hidden;text-overflow:ellipsis}.connection i{width:5px;height:5px;flex-shrink:0;border-radius:50%;background:var(--muted)}.connection[data-online=true] i{background:#68d5a3}
#headerTools{display:flex;gap:4px;margin-left:auto}#headerTools:empty{display:none}
.topbar button{border:1px solid var(--line);background:transparent;border-radius:5px;height:30px;padding:0 12px;font-size:12px}.topbar button:hover{border-color:var(--accent);color:var(--accent)}
#roomBadge{color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.08em;margin-left:auto}#headerTools:not(:empty)~#roomBadge{margin-left:0}
#clock{color:var(--accent);font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}
.room-content{position:relative;min-width:0;min-height:0;overflow:hidden}
.room-entry{display:grid;place-items:center;min-height:0;overflow:auto;padding:32px 24px;background:radial-gradient(ellipse at 50% 44%,color-mix(in srgb,var(--accent) 5%,transparent),transparent 60%)}
.room-form{width:min(380px,100%);text-align:center;margin:auto}.room-mark{width:70px;height:70px;object-fit:contain;margin-bottom:25px}
.room-kicker{color:var(--accent);font-size:11px;letter-spacing:.25em;margin:0 0 24px}
.room-input{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;--control-height:50px;--control-radius:6px}
.room-input input,.room-input button{height:var(--control-height);border-radius:var(--control-radius)}
.room-input input{width:100%;min-width:0;border:1px solid var(--line);outline:none;background:var(--surface);color:var(--ink);padding:0 16px;font-size:21px;letter-spacing:.18em;font-variant-numeric:tabular-nums}.room-input input:focus{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.room-input input::placeholder{color:#51605d}
.room-input button{border:0;padding:0 22px;background:var(--accent);color:#0a1812;font-weight:600;white-space:nowrap}.room-input button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ink)}
.room-error{color:#f09a96;font-size:12px;min-height:18px;line-height:18px;margin:14px 0 0}
@media(max-width:700px){:root{--header:46px}.topbar{padding:0 12px;gap:10px}.identity{font-size:14px;gap:6px}.identity img{width:24px;height:24px}.connection{display:none}.topbar button{font-size:11px;padding:0 9px}#headerTools{gap:3px}#roomBadge{display:none}#leaveRoom{margin-left:auto}.room-form{max-width:340px}}