:root { color-scheme: light; font-family: system-ui, "Microsoft YaHei", sans-serif; color: #202124; background: #fafafa; }
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input { font: inherit; min-height: 46px; border-radius: 4px; }
button { border: 1px solid #202124; background: #202124; color: #fff; cursor: pointer; padding: 0 16px; }
button:disabled { opacity: .55; cursor: wait; }
button:focus-visible, input:focus-visible { outline: 2px solid #3767b0; outline-offset: 3px; }
#entry { min-height: 100svh; display: grid; place-items: center; padding: 24px; }
#room-form { width: 100%; max-width: 300px; }
h1 { margin: 0 0 32px; font-size: 21px; font-weight: 500; }
label { display: block; margin-bottom: 10px; font-size: 14px; }
input { width: 100%; border: 1px solid #c9cdd2; background: #fff; color: #202124; padding: 0 12px; font-size: 16px; }
#join { width: 100%; margin-top: 12px; }
#form-error { min-height: 20px; margin: 12px 0 0; font-size: 13px; color: #a12a2a; }
#view { height: 100svh; display: flex; flex-direction: column; }
header { min-height: 58px; display: flex; align-items: center; gap: 16px; padding: 6px 16px; border-bottom: 1px solid #e2e4e7; }
#active-room { font-variant-numeric: tabular-nums; font-size: 14px; }
#connection { flex: 1; color: #686d75; font-size: 12px; }
#leave { min-height: 44px; padding: 0 12px; color: #202124; background: transparent; border-color: #c9cdd2; font-size: 13px; }
#canvas-wrap { position: relative; flex: 1; min-height: 0; background: #fff; overflow: hidden; }
canvas { display: block; width: 100%; height: 100%; }
.north { position: absolute; top: 16px; right: 18px; color: #686d75; font-size: 12px; }
#empty { position: absolute; inset: 0; display: grid; place-items: center; color: #686d75; font-size: 14px; pointer-events: none; }
#stale { position: absolute; top: 16px; left: 16px; color: #8b5824; font-size: 12px; }
.legend { position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); left: 16px; display: flex; gap: 18px; color: #686d75; font-size: 12px; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 8px; height: 8px; }
.self { background: #17846f; clip-path: polygon(50% 0,100% 100%,0 100%); }
.team { background: #3767b0; }
.enemy { background: #c43e4b; border-radius: 50%; }
@media (max-width: 400px) { header { gap: 12px; padding-inline: 12px; } }