:root {
    color-scheme: dark;
    font: 15px/1.5 system-ui, sans-serif;
    background: #171719;
    color: #eeeae4;
    --card: #242428;
    --line: #45444a;
    --muted: #bdb9b6;
    --accent: #d2b187;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
header { min-height: 59px; display: flex; align-items: center; gap: 18px; padding: 9px 22px; border-bottom: 1px solid var(--line); }
.brand { color: var(--accent); font-weight: 750; text-decoration: none; white-space: nowrap; }
#room-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#connection { margin-left: auto; font-size: .83rem; color: var(--muted); white-space: nowrap; }
main { padding: 18px; }
h1, h2, p { margin: 0; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.07rem; overflow-wrap: anywhere; }
p { color: var(--muted); font-size: .92rem; }
button, input, textarea, select, .button { font: inherit; color: inherit; }
button, .button, select, textarea, input:not([type=file]) { border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; background: #302f34; }
button, .button, select, summary { cursor: pointer; }
.button { display: inline-flex; align-items: center; text-decoration: none; }
button:hover, .button:hover, button[aria-pressed=true] { border-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.primary { color: #261c15; background: var(--accent); border-color: var(--accent); font-weight: 700; }
.quiet { background: transparent; margin-top: 6px; }
.danger { color: #ffb0a8; }
.card { padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.lobby { max-width: 370px; margin: 13vh auto 0; padding: 22px; }
.lobby p, .lobby form { margin-top: 9px; }
.lobby form, dialog form { display: grid; gap: 8px; }
#table { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
body:is([data-role=dm], [data-role=player]) #table { grid-template-columns: minmax(0, 1fr) 235px; }
body:not([data-role=dm]) .dm { display: none; }
body[data-role=display] .participant { display: none; }
#surface { min-width: 0; }
#toolbar { display: flex; gap: 7px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.view-controls { margin-left: auto; display: flex; gap: 4px; }
#pan-tool[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: #261c15; }
@media (hover: none) {
    #pan-tool[aria-pressed=false]:hover { border-color: var(--line); }
}
.obstacle-tools { display: flex; gap: 4px; }
.obstacle-options { display: flex; flex-wrap: wrap; gap: 5px 10px; align-items: center; }
.obstacle-options label { color: var(--muted); font-size: .86rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#viewport { height: calc(100dvh - 174px); min-height: 240px; overflow: auto; overflow-anchor: none; scrollbar-width: none; overscroll-behavior: contain; background: #111113; border: 1px solid var(--line); border-radius: 10px; }
body[data-role=player] #viewport { position: relative; overflow: clip; touch-action: none; }
body[data-role=player] #stage { position: absolute; top: 0; left: 0; padding: 0; }
body[data-role=player] #map-wrap { transform-origin: 0 0; }
#viewport.panning, #viewport.panning * { cursor: grabbing !important; user-select: none; }
#viewport[data-pan=true] { cursor: grab; touch-action: none; }
#viewport[data-pan=true] .token { pointer-events: none; }
#stage { width: max-content; padding: var(--pan-y, 0px) var(--pan-x, 0px); }
#map-wrap { position: relative; width: max-content; }
#board { position: relative; background: #38373d; isolation: isolate; touch-action: manipulation; overflow: hidden; user-select: none; }
#board::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 0 1px #6f6c73; }
#map-image, #obstacles, #grid-lines, #route, #obstacle-preview, #grid-cursor { position: absolute; pointer-events: none; }
#obstacles, #grid-lines, #route { inset: 0; width: 100%; height: 100%; }
#grid-lines { z-index: 1; }
#route { z-index: 2; }
#obstacle-preview { z-index: 4; border: 2px solid #ebcda4; background: #ebcda444; }
#obstacle-preview[data-saving=true] { border-style: dashed; }
#obstacle-preview[data-shape=circle] { border-radius: 50%; }
#obstacle-preview[data-layer=raised] { border-color: #f1bf74; background: #c694514d; }
#grid-cursor { z-index: 5; width: var(--cell); height: var(--cell); box-shadow: inset 0 0 0 2px #ebcda4, inset 0 0 0 4px #171719; }
#board[data-mode=erase] #obstacle-preview { border-color: #ffb0a8; background: #ffb0a844; }
#board:is([data-mode=draw], [data-mode=erase]) { cursor: crosshair; touch-action: none; }
#board:is([data-mode=draw], [data-mode=erase]) .token { pointer-events: none; }
#distance { position: absolute; z-index: 4; transform: translate(-50%, calc(-100% - 4px)); pointer-events: none; padding: 2px 7px; border-radius: 5px; color: #261c15; background: #ebcda4; white-space: nowrap; font-weight: 750; font-size: .85rem; }
#grid-size { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.map-load-error { padding-block: 6px; color: #ffb0a8; }
.edge-controls { position: absolute; z-index: 5; display: flex; gap: 4px; }
.edge-controls button { width: 32px; height: 32px; padding: 0; color: var(--accent); background: var(--card); line-height: 1; font-size: 1rem; }
.edge-controls button:disabled { opacity: .4; cursor: default; }
.edge-controls[data-side=top] { bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); }
.edge-controls[data-side=bottom] { top: calc(100% + 5px); left: 50%; transform: translateX(-50%); }
.edge-controls[data-side=left] { right: calc(100% + 5px); top: 50%; transform: translateY(-50%); flex-direction: column; }
.edge-controls[data-side=right] { left: calc(100% + 5px); top: 50%; transform: translateY(-50%); flex-direction: column; }
#tokens { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.token { position: absolute; width: var(--cell); height: var(--cell); padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; pointer-events: auto; cursor: default; font-size: min(calc(var(--cell) * .32), 29px); }
.token.movable { cursor: grab; touch-action: none; }
.token.target { cursor: pointer; }
.token span { position: absolute; inset: 9.5%; border-radius: 50%; display: grid; place-items: center; color: #20191a; background: var(--token-color); border: 1px solid #1c181d; font-weight: 800; line-height: 1; white-space: nowrap; overflow: hidden; box-shadow: 0 1px 4px #101014a0; pointer-events: none; }
.token.dragging { z-index: 1; cursor: grabbing; }
.token[aria-pressed=true], .token.dragging { z-index: 2; }
.token[data-stack]::after { content: attr(data-stack); position: absolute; right: 0; top: 0; min-width: 1.4em; padding-inline: .2em; border-radius: 1em; background: #23212a; color: #fff5e7; font-size: clamp(8px, calc(var(--cell) * .27), 14px); line-height: 1.4; pointer-events: none; }
.token.mine { z-index: 1; }
.token.mine[aria-pressed=true], .token.mine.dragging { z-index: 2; }
.token[data-color=teal] { --token-color: #bdbcc5; }
.token[data-color=blue] { --token-color: #8fc7f8; }
.token[data-color=gold] { --token-color: #eac665; }
.token[data-color=rose] { --token-color: #f59b99; }
.token[data-color=purple] { --token-color: #c5a6ef; }
.token[data-color=slate] { --token-color: #a8a9b6; }
.token[aria-pressed=true] span, .token.assigned span { outline: 2px solid white; outline-offset: 1px; }
.token.mine span { outline: 2px solid #ebcda4; outline-offset: 1px; }
.token.mine[aria-pressed=true] span { outline-color: white; }
.token.dm-only span { opacity: .65; border: 2px dashed #21191b; }
#token-tooltip { position: fixed; z-index: 11; pointer-events: none; transform: translateX(-50%); max-width: calc(100vw - 8px); padding: 3px 8px; border: 1px solid var(--line); border-radius: 5px; background: #211f23; color: #fff5e7; overflow-wrap: anywhere; font-size: .88rem; }
#board[data-mode=place], #board[data-mode=move] { cursor: crosshair; }
#hint { color: var(--muted); padding: 6px 1px; min-height: 2rem; font-size: .88rem; }
.board-help { display: flex; align-items: center; gap: 8px; }
#placement { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; padding: 6px 8px 6px 12px; border: 1px solid var(--accent); border-radius: 8px; background: #362e28; overflow-wrap: anywhere; }
#placement:not([hidden]) + #viewport { border-color: var(--accent); }
#cancel-board-action { font-size: .85rem; }
#controls { display: grid; gap: 9px; }
#players, #banned-list { display: grid; gap: 5px; }
#players { list-style: none; margin: 8px 0 0; padding: 0; }
#players li { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
#players button { width: 100%; text-align: left; overflow-wrap: anywhere; }
#players small { color: var(--accent); }
#token-list { list-style: none; padding: 0; margin: 5px 0 0; display: grid; gap: 4px; }
#token-list li { overflow-wrap: anywhere; }
#token-list button { text-align: left; width: 100%; }
#player-tools { margin-top: 12px; display: grid; gap: 5px; }
#assign-player { width: 100%; }
#player-actions { display: flex; flex-wrap: wrap; gap: 4px; }
#player-actions button, #count { font-size: .82rem; }
#count { color: var(--muted); }
#token-detail label, #owner { display: block; width: 100%; margin-top: 5px; }
.visibility { cursor: pointer; }
.visibility input { accent-color: var(--accent); vertical-align: middle; }
#grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 7px 0; }
#grid input { width: 100%; display: block; }
#grid button { grid-column: 1 / -1; }
.file { display: block; position: relative; text-align: center; }
.file input { opacity: 0; position: absolute; inset: 0; width: 100%; cursor: pointer; }
.file:focus-within { outline: 2px solid var(--accent); }
.map-files, #confirm-import { display: grid; gap: 6px; margin-top: 8px; }
#confirm-import p { overflow-wrap: anywhere; }
dialog { width: min(320px, calc(100vw - 32px)); padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: inherit; }
dialog::backdrop { background: #0009; }
.token-entry { display: grid; gap: 6px; }
#new-names { resize: vertical; }
#bulk-token-error { color: #ffb0a8; }
footer { display: flex; gap: 6px; justify-content: end; margin-top: 7px; }
#toast { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); background: #362e28; border: 1px solid var(--accent); padding: 7px 12px; border-radius: 8px; z-index: 5; text-align: center; max-width: calc(100vw - 30px); }
body[data-role=display] header { display: none; }
body[data-role=display] header:has(#connection[data-reconnecting=true]) { display: block; position: fixed; right: 12px; top: 10px; min-height: auto; padding: 4px 9px; z-index: 10; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
body[data-role=display] header :is(.brand, #room-name) { display: none; }
body[data-role=display] main { padding: 6px; }
body[data-role=display] #viewport { height: calc(100dvh - 54px); }
body[data-role=display] .board-help { display: none; }
@media (max-width: 760px) {
    body:is([data-role=dm], [data-role=player]) #table { grid-template-columns: minmax(0, 1fr); }
    main { padding: 9px; }
    header { padding-inline: 12px; }
    body[data-role=dm] #viewport { height: 53dvh; }
    body[data-role=player] #viewport { height: 62dvh; }
}
@media (pointer: coarse) {
    body[data-role=player] #toolbar button { min-width: 44px; min-height: 44px; }
}
@media (pointer: coarse) and (max-width: 1024px) {
    body[data-role=player] #table { grid-template-columns: minmax(0, 1fr); }
}

#home-actions { margin-top: 16px; display: grid; gap: 12px; }
#home-actions form { border-top: 1px solid var(--line); padding-top: 13px; }
#code-form div { display: flex; gap: 7px; }
#room-code { min-width: 0; flex: 1; text-transform: uppercase; }
#code-form button { white-space: nowrap; }
#invite-code { color: var(--accent); font: .85rem/1.6 ui-monospace, monospace; margin-top: 4px; }