:root {
  color-scheme: dark;
  --ink: #f2ede4;
  --muted: #a9a2ae;
  --panel: #1c1922;
  --panel-2: #24202b;
  --line: #3a3442;
  --accent: #d79b5e;
  --accent-strong: #f0b875;
  --green: #72c59a;
  --danger: #d57575;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #111016; color: var(--ink); }
button, input, select, textarea { font: inherit; }
button, select, input, textarea { color: inherit; }
button { cursor: pointer; }

#app-shell { height: 100%; display: grid; grid-template-rows: 62px minmax(0, 1fr); }
.topbar { display: flex; align-items: center; gap: 24px; padding: 0 18px; background: rgba(23, 21, 29, .98); border-bottom: 1px solid var(--line); z-index: 10; }
.brand { min-width: 205px; display: flex; align-items: center; gap: 11px; }
.brand-mark { color: var(--accent); font-size: 25px; text-shadow: 0 0 20px rgba(215,155,94,.45); }
.brand strong, .brand small { display: block; }
.brand strong { letter-spacing: .02em; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.scene-controls, .top-actions { display: flex; align-items: center; gap: 8px; }
.scene-controls { flex: 1; }
.scene-controls label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.top-actions { justify-content: flex-end; }

select, input[type="text"], input[type="number"], textarea { border: 1px solid var(--line); border-radius: 8px; background: #16131b; padding: 8px 10px; outline: none; }
select:focus, input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(215,155,94,.12); }
.scene-controls select { min-width: 180px; }
.icon-button, .text-button, .primary-button, .wide-button, .small-button { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); padding: 8px 11px; }
.icon-button:hover, .text-button:hover, .wide-button:hover, .small-button:hover { border-color: #62596d; background: #2d2734; }
.icon-button { font-size: 18px; line-height: 1; padding: 7px 9px; }
.text-button { background: transparent; }
.primary-button { border-color: #9c6b3d; background: linear-gradient(180deg, #bd7f45, #8d572e); color: white; font-weight: 700; }
.primary-button:hover { filter: brightness(1.08); }
.role-badge { padding: 5px 9px; border: 1px solid rgba(215,155,94,.45); border-radius: 999px; color: var(--accent-strong); background: rgba(215,155,94,.08); font-size: 12px; cursor: pointer; }
.role-badge:hover { border-color: rgba(240,184,117,.85); background: rgba(215,155,94,.16); }
.connection { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.connection i { width: 7px; height: 7px; border-radius: 50%; background: #d9a85c; box-shadow: 0 0 8px currentColor; }
.connection.online i { background: var(--green); }
.connection.offline i { background: var(--danger); }

.workspace { min-height: 0; display: grid; grid-template-columns: 210px minmax(0,1fr) 250px; }
.tool-panel, .inspector { overflow-y: auto; background: var(--panel); border-color: var(--line); border-style: solid; z-index: 4; }
.tool-panel { border-width: 0 1px 0 0; padding: 16px 13px; }
.inspector { border-width: 0 0 0 1px; padding: 18px; }
.tool-panel section { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.tool-panel h2 { margin: 0 0 10px; color: #d6cfda; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.fog-tools { grid-template-columns: 1fr; }
.tool { display: flex; align-items: center; gap: 7px; min-height: 38px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); padding: 8px; color: #d7d0dc; text-align: left; font-size: 12px; }
.tool span { width: 18px; color: var(--accent-strong); text-align: center; font-size: 17px; }
.tool:hover { border-color: #665c71; }
.tool.active { border-color: var(--accent); background: rgba(215,155,94,.12); color: white; box-shadow: inset 0 0 0 1px rgba(215,155,94,.18); }
.field-label, .range-label { display: flex; justify-content: space-between; margin: 8px 0 6px; color: var(--muted); font-size: 11px; }
.range-label output { color: var(--accent-strong); }
.tool-panel select, .wide-button { width: 100%; }
.wide-button { margin-top: 8px; }
.wide-button:disabled { cursor: not-allowed; opacity: .45; }
.hint { margin: 7px 2px 0; color: #807887; font-size: 11px; line-height: 1.4; }
.scene-size-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }
.scene-size-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.scene-size-grid input { width: 100%; min-width: 0; padding: 7px 6px; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.button-row { display: flex; gap: 7px; margin-top: 9px; }
.button-row > * { flex: 1; }
.small-button { padding: 7px 6px; color: #cfc7d3; font-size: 11px; }
.rotation-buttons { margin-top: 7px; }
.shortcut-note { color: #7e7784; font-size: 10px; line-height: 1.8; }
kbd { border: 1px solid #504957; border-bottom-width: 2px; border-radius: 4px; background: #28232d; padding: 1px 4px; color: #bab2bf; }

.board-wrap { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: radial-gradient(circle at 50% 45%, #2d2933, #131218 70%); }
#board { width: 100%; height: 100%; display: block; touch-action: none; cursor: default; }
.board-wrap[data-tool="pan"] #board { cursor: grab; }
.board-wrap[data-tool="pan"] #board:active { cursor: grabbing; }
.board-wrap[data-tool^="fog"] #board { cursor: crosshair; }
.board-wrap[data-tool="grid-calibrate"] #board { cursor: crosshair; }
.board-wrap[data-tool="background-grid-align"] #board { cursor: crosshair; }
.board-wrap[data-tool="laser"] #board { cursor: crosshair; }
#drop-overlay { position: absolute; inset: 18px; display: none; place-content: center; border: 2px dashed var(--accent); border-radius: 18px; background: rgba(25,21,29,.82); color: var(--accent-strong); text-align: center; pointer-events: none; backdrop-filter: blur(8px); }
#drop-overlay strong, #drop-overlay span { display: block; }
#drop-overlay strong { font-size: 22px; }
#drop-overlay span { margin-top: 4px; color: var(--muted); }
.board-wrap.dragging #drop-overlay { display: grid; }
.calibration-hint { position: absolute; z-index: 14; left: 50%; top: 14px; transform: translateX(-50%); border: 1px solid rgba(215,155,94,.65); border-radius: 999px; background: rgba(25,22,30,.94); padding: 8px 13px; color: var(--accent-strong); font-size: 11px; box-shadow: 0 8px 24px rgba(0,0,0,.32); pointer-events: none; }
.calibration-hint[hidden] { display: none; }
.board-status { position: absolute; right: 14px; bottom: 13px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(90,82,98,.8); border-radius: 9px; background: rgba(24,21,28,.86); padding: 5px 8px; color: var(--muted); font-size: 11px; backdrop-filter: blur(8px); }
.board-status button { border: 0; background: transparent; color: var(--accent-strong); padding: 2px 5px; }
.player-help { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); border: 1px solid var(--line); border-radius: 999px; background: rgba(25,22,30,.88); padding: 8px 14px; color: var(--muted); font-size: 12px; }

#inspector-empty { padding: 54px 12px; text-align: center; color: var(--muted); }
.empty-icon { display: block; color: #655c6d; font-size: 42px; }
#inspector-empty h2 { margin: 10px 0 5px; color: #d7d0dc; font-size: 15px; }
#inspector-empty p { margin: 0; font-size: 12px; line-height: 1.5; }
.inspector-heading { display: flex; justify-content: space-between; align-items: center; padding-bottom: 13px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.inspector-heading button { border: 0; background: transparent; color: var(--danger); font-size: 11px; }
#inspector-fields > label { display: grid; gap: 6px; margin-top: 14px; color: var(--muted); font-size: 11px; }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.two-columns label { display: grid; gap: 6px; margin-top: 14px; color: var(--muted); font-size: 11px; }
.switch-row { grid-template-columns: 1fr auto !important; align-items: center; border: 1px solid var(--line); border-radius: 9px; padding: 10px; }
.switch-row strong, .switch-row small { display: block; }
.switch-row strong { color: var(--ink); }
.switch-row small { margin-top: 2px; color: var(--muted); }
.switch-row input { width: 18px; height: 18px; accent-color: var(--accent); }

#toast { position: fixed; left: 50%; bottom: 26px; z-index: 50; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; border: 1px solid #5b5263; border-radius: 9px; background: #211d27; padding: 10px 14px; color: #eee8f0; font-size: 13px; box-shadow: 0 12px 35px rgba(0,0,0,.4); transition: .2s ease; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.player-only { display: none; }
body.player .gm-only { display: none !important; }
body.player .player-only { display: block; }
body.player .workspace { grid-template-columns: minmax(0,1fr); }
body.player .scene-controls { flex: 1; }
body.player #scene-select { pointer-events: none; opacity: .8; }
body.player .brand { min-width: auto; }

@media (max-width: 900px) {
  .workspace { grid-template-columns: 180px minmax(0,1fr); }
  .inspector { display: none; }
  .brand { min-width: auto; }
  .brand small, .scene-controls label, #rename-scene, #preview-player { display: none; }
  .topbar { gap: 12px; padding: 0 10px; }
  .scene-controls select { min-width: 120px; }
}

/* Compact, canvas-first interface */
#app-shell { grid-template-rows: 52px minmax(0, 1fr); }
.topbar { gap: 14px; padding: 0 12px; background: rgba(21, 19, 26, .92); backdrop-filter: blur(14px); }
.brand { min-width: 170px; gap: 8px; }
.brand-mark { font-size: 19px; }
.brand strong { font-size: 14px; }
.brand small { font-size: 9px; }
.scene-controls label { display: none; }
.scene-controls select { min-width: 145px; max-width: 220px; padding: 6px 30px 6px 9px; border-radius: 999px; background: rgba(34,30,40,.88); }
.topbar .icon-button { width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0; border-radius: 50%; background: rgba(38,34,44,.9); }
.topbar .icon-button[aria-pressed="true"] { border-color: rgba(215,155,94,.7); background: rgba(215,155,94,.18); color: var(--accent-strong); }
.topbar .invite-button { border-color: rgba(215,155,94,.55); color: var(--accent-strong); }
.role-badge { padding: 4px 8px; font-size: 10px; }
.connection span { display: none; }

.workspace { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.board-wrap { grid-column: 1; grid-row: 1; }

.tool-dock { position: absolute; z-index: 12; left: 14px; top: 14px; display: flex; flex-direction: column; gap: 5px; padding: 6px; border: 1px solid rgba(90,82,98,.78); border-radius: 13px; background: rgba(27,24,32,.9); box-shadow: 0 12px 32px rgba(0,0,0,.28); backdrop-filter: blur(13px); }
.board-wrap.library-open .tool-dock { left: 360px; }
.board-wrap.character-open .tool-dock { left: 406px; }
.dock-tool { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: #c8c0cc; font-size: 19px; }
.dock-tool:hover { background: rgba(255,255,255,.07); color: white; }
.dock-tool.active { background: rgba(215,155,94,.17); color: var(--accent-strong); box-shadow: inset 0 0 0 1px rgba(215,155,94,.45); }
.dock-tool[data-shortcut]::after { content: attr(data-shortcut); position: absolute; right: 3px; bottom: 1px; color: #77717c; font-size: 8px; font-weight: 700; }
.dock-tool.active[data-shortcut]::after { color: var(--accent); }
.dock-divider { height: 1px; margin: 2px 5px; background: var(--line); }
.laser-tool-dot { display: block; width: 9px; height: 9px; border: 1px solid rgba(255,255,255,.86); border-radius: 50%; background: #ff3b30; box-shadow: 0 0 4px #ff3b30, 0 0 11px rgba(255,59,48,.9); }
.dock-tool.active .laser-tool-dot { box-shadow: 0 0 5px #ff3b30, 0 0 16px #ff3b30, 0 0 25px rgba(255,59,48,.7); }

.library-panel { position: absolute; z-index: 16; inset: 0 auto 0 0; width: 346px; display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; gap: 10px; border-right: 1px solid rgba(96,88,104,.95); background: rgba(25,22,30,.98); padding: 14px; box-shadow: 18px 0 46px rgba(0,0,0,.4); backdrop-filter: blur(18px); }
.library-panel[hidden] { display: none; }
.markers-panel { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.library-heading { display: flex; align-items: center; justify-content: space-between; }
.library-heading strong, .library-heading small { display: block; }
.library-heading strong { color: #ece6ef; font-size: 14px; }
.library-heading small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.library-search { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 10px; background: #16131b; padding: 0 9px; color: var(--muted); }
.library-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(215,155,94,.12); }
.library-search input { width: 100%; min-width: 0; border: 0; background: transparent; padding: 9px 0; outline: 0; }
.library-filter-box { border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); padding: 8px 9px; }
.library-filter-box summary { display: flex; justify-content: space-between; cursor: pointer; color: #cfc7d3; font-size: 10px; list-style: none; }
.library-filter-box summary::-webkit-details-marker { display: none; }
.library-filter-box summary::before { content: "▸"; margin-right: 6px; color: var(--accent); }
.library-filter-box[open] summary::before { content: "▾"; }
.library-filter-box summary span { margin-left: auto; color: var(--muted); }
.library-filter-actions { display: flex; gap: 6px; margin-top: 8px; }
.library-filter-actions button { border: 0; border-radius: 6px; background: rgba(255,255,255,.055); padding: 4px 7px; color: var(--muted); font-size: 9px; }
.library-filters { max-height: 180px; overflow: auto; display: grid; gap: 3px; margin-top: 7px; padding-right: 3px; }
.library-filter-group { margin: 6px 0 2px; color: var(--accent-strong); font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.library-filter-label { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 6px; border-radius: 6px; padding: 4px 5px; color: #bcb4c1; font-size: 9px; }
.library-filter-label:hover { background: rgba(255,255,255,.045); }
.library-filter-label input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.library-filter-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-filter-label small { color: #756e7a; font-size: 8px; }
.library-results-heading { display: flex; justify-content: space-between; align-items: center; color: #d5ced9; font-size: 10px; }
.library-results-heading small { color: var(--muted); font-size: 8px; }
.library-results { min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 7px; padding-right: 3px; }
.library-token { min-width: 0; border: 1px solid rgba(75,68,83,.9); border-radius: 9px; background: rgba(255,255,255,.025); padding: 5px; cursor: grab; user-select: none; }
.library-token:hover, .library-token:focus-visible { border-color: rgba(215,155,94,.75); background: rgba(215,155,94,.08); outline: 0; }
.library-token:active { cursor: grabbing; }
.library-token img { width: 100%; aspect-ratio: 1; display: block; object-fit: contain; border-radius: 6px; background-color: #eee; background-image: linear-gradient(45deg,#d5d5d5 25%,transparent 25%),linear-gradient(-45deg,#d5d5d5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d5d5d5 75%),linear-gradient(-45deg,transparent 75%,#d5d5d5 75%); background-position: 0 0,0 5px,5px -5px,-5px 0; background-size: 10px 10px; }
.library-token strong { display: block; overflow: hidden; margin-top: 5px; color: #ddd6e1; font-size: 8px; font-weight: 650; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.library-token small { display: block; overflow: hidden; margin-top: 2px; color: #7f7785; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.marker-results .library-token img { background-color: rgba(245,240,246,.92); }
.library-empty { align-self: center; padding: 22px 8px; color: var(--muted); text-align: center; font-size: 10px; line-height: 1.5; }
.library-empty[hidden] { display: none; }

.moves-panel { grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; }
.moves-panel.move-reading { grid-template-rows: auto minmax(0, 1fr); }
.moves-panel.move-reading .library-search,
.moves-panel.move-reading .move-category-filters,
.moves-panel.move-reading .reference-filters,
.moves-panel.move-reading .library-results-heading,
.moves-panel.move-reading .moves-results,
.moves-panel.move-reading .library-empty { display: none; }
.move-category-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.move-category-filters button { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.025); padding: 7px 9px; color: #a9a1ae; font-size: 10px; }
.move-category-filters button[aria-pressed="true"] { border-color: rgba(215,155,94,.62); background: rgba(215,155,94,.12); color: var(--accent-strong); }
.move-category-filters span { min-width: 20px; border-radius: 999px; background: rgba(0,0,0,.2); padding: 2px 5px; color: #8e8693; font-size: 8px; text-align: center; }
.reference-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.reference-filters label { min-width: 0; display: grid; gap: 4px; color: #8f8795; font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.reference-filters select { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.035); padding: 7px 22px 7px 8px; color: #d9d2dd; font-size: 9px; text-transform: none; }
.moves-results { min-height: 0; overflow-y: auto; display: grid; grid-auto-rows: minmax(60px, max-content); align-content: start; gap: 8px; padding-right: 3px; }
.move-card { width: 100%; min-height: 60px; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 7px; overflow: hidden; border: 1px solid rgba(75,68,83,.9); border-radius: 10px; background: rgba(255,255,255,.025); padding: 5px 6px; }
.move-card:focus-within, .move-card:hover { border-color: rgba(215,155,94,.56); background: rgba(215,155,94,.055); }
.move-card-open { min-width: 0; min-height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 9px; border: 0; border-radius: 7px; background: transparent; padding: 6px 5px; color: inherit; text-align: left; cursor: pointer; }
.move-card-open::after { content: "›"; color: var(--accent); font-size: 16px; line-height: 1; }
.move-card-open:hover, .move-card-open:focus-visible { background: rgba(255,255,255,.045); outline: 0; }
.move-icon-button { position: relative; width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(92,83,99,.86); border-radius: 8px; background: rgba(8,7,10,.38); padding: 3px; }
.move-icon-button img { width: 100%; height: 100%; display: block; object-fit: contain; }
button.move-icon-button { cursor: default; }
button.move-icon-button:disabled { opacity: 1; }
button.move-icon-button:not(:disabled):hover, button.move-icon-button:not(:disabled):focus-visible { border-color: var(--accent); background: rgba(215,155,94,.1); outline: 0; }
button.move-icon-button:not(:disabled):hover::after, button.move-icon-button:not(:disabled):focus-visible::after { content: "✎"; position: absolute; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(20,17,23,.9); color: var(--accent-strong); font-size: 10px; }
.move-card-title { min-width: 0; display: grid; align-content: center; gap: 3px; }
.move-card-title strong, .move-card-title small { display: block; }
.move-card-title strong { overflow: hidden; color: #e5dee8; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.move-card-title small { color: #817987; font-size: 8px; line-height: 1.25; }
.move-roll { flex: 0 0 auto; border: 1px solid rgba(215,155,94,.32); border-radius: 999px; padding: 3px 6px; color: var(--accent-strong); font-size: 8px; font-weight: 750; letter-spacing: .03em; }
.move-reader { min-height: 0; overflow-y: auto; padding-right: 3px; }
.move-reader[hidden] { display: none; }
.move-reader-back { position: sticky; z-index: 1; top: 0; width: 100%; border: 1px solid rgba(215,155,94,.42); border-radius: 9px; background: rgba(33,29,39,.97); padding: 8px 10px; color: var(--accent-strong); font-size: 9px; text-align: left; box-shadow: 0 7px 18px rgba(0,0,0,.24); }
.move-reader-back:hover, .move-reader-back:focus-visible { border-color: var(--accent); color: #fff; outline: 0; }
.move-reader-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 18px 3px 12px; }
.move-reader-heading > div { min-width: 0; flex: 1; }
.move-reader-icon-button { width: 62px; height: 62px; flex: 0 0 auto; }
.move-reader-heading small { color: var(--accent); font-size: 8px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.move-reader-heading h2 { margin: 4px 0 0; color: #f0eaf2; font-size: 17px; line-height: 1.25; }
.move-reader-roll-button { width: calc(100% - 6px); margin: 0 3px 12px; border: 1px solid rgba(181,119,62,.72); border-radius: 9px; background: linear-gradient(180deg, rgba(190,125,67,.28), rgba(118,72,38,.22)); padding: 9px 11px; color: var(--accent-strong); font-size: 10px; font-weight: 750; }
.move-reader-roll-button:hover { border-color: var(--accent-strong); background: rgba(215,155,94,.2); }
.move-reader-body { border-top: 1px solid rgba(93,84,100,.68); padding: 13px 3px 28px; color: #d0c8d4; font-size: 11px; line-height: 1.65; white-space: pre-line; }
.move-roll-dialog { width: min(420px, calc(100vw - 32px)); }
.move-roll-dialog form { display: grid; gap: 12px; }
.move-roll-dialog .hint { margin: 0; line-height: 1.45; }
.move-stat-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.move-stat-choices[hidden] { display: none; }
.move-stat-choice { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 9px; border: 1px solid rgba(82,74,89,.92); border-radius: 9px; background: rgba(255,255,255,.03); padding: 8px 9px; color: #d9d1dd; text-align: left; }
.move-stat-choice:hover:not(:disabled), .move-stat-choice:focus-visible:not(:disabled) { border-color: var(--accent); background: rgba(215,155,94,.1); outline: 0; }
.move-stat-choice:disabled { opacity: .4; }
.move-stat-choice span, .move-stat-choice strong, .move-stat-choice small { display: block; min-width: 0; }
.move-stat-choice small { margin-top: 2px; overflow: hidden; color: #8d8493; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.move-stat-choice b { color: var(--accent-strong); font-size: 13px; }
.move-modifier-field { display: grid; gap: 6px; color: var(--muted); font-size: 10px; }
.move-modifier-field[hidden] { display: none; }
.move-modifier-field input { width: 100%; }

.character-panel { width: 392px; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
.character-heading-actions { display: flex; align-items: center; gap: 8px; }
.character-edit-button { border: 1px solid rgba(215,155,94,.36); border-radius: 7px; background: rgba(215,155,94,.08); padding: 5px 8px; color: var(--accent-strong); font-size: 8px; }
.character-edit-button:hover { border-color: rgba(215,155,94,.72); background: rgba(215,155,94,.14); }
.character-edit-button:disabled { cursor: default; opacity: .42; }
#character-save-state { color: #756e7a; font-size: 8px; }
#character-save-state.saving { color: var(--accent-strong); }
#character-save-state.saved { color: var(--green); }
.character-form { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 12px; padding: 1px 4px 24px 1px; }
.character-form section { min-width: 0; }
.character-roster { border: 1px solid rgba(215,155,94,.24); border-radius: 10px; background: rgba(215,155,94,.045); padding: 9px; }
.character-roster .character-section-heading { margin-bottom: 7px; }
.character-roster-list { max-height: 150px; overflow-y: auto; display: grid; gap: 5px; padding-right: 2px; }
.character-roster-card { width: 100%; min-width: 0; display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 8px; border: 1px solid rgba(74,67,81,.9); border-radius: 8px; background: rgba(18,16,22,.62); padding: 6px 7px; color: #c9c1ce; text-align: left; }
.character-roster-card:hover, .character-roster-card:focus-visible { border-color: rgba(215,155,94,.55); outline: 0; }
.character-roster-card.active { border-color: rgba(215,155,94,.8); background: rgba(215,155,94,.12); }
.character-roster-avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(215,155,94,.12); color: var(--accent-strong); font-size: 15px; }
.character-roster-copy { min-width: 0; }
.character-roster-copy strong, .character-roster-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.character-roster-copy strong { color: #e2dae6; font-size: 9px; }
.character-roster-copy small { margin-top: 2px; color: #807887; font-size: 7px; }
.character-roster-status { display: inline-flex; align-items: center; gap: 4px; color: #77707c; font-size: 7px; }
.character-roster-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5c5660; }
.character-roster-status.online { color: var(--green); }
.character-roster-status.online::before { background: var(--green); box-shadow: 0 0 7px rgba(114,197,154,.55); }
.character-empty { border: 1px solid rgba(215,155,94,.38); border-radius: 12px; background: rgba(215,155,94,.07); padding: 16px; text-align: center; }
.character-empty[hidden] { display: none; }
.character-empty strong { color: #eee5f0; font-size: 13px; }
.character-empty p { margin: 6px 0 13px; color: #918996; font-size: 9px; line-height: 1.5; }
.character-identity { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px; }
.character-readonly > div { min-width: 0; border: 1px solid rgba(76,69,84,.8); border-radius: 9px; background: rgba(255,255,255,.025); padding: 9px; }
.character-readonly small, .character-readonly strong { display: block; }
.character-readonly small { color: #817987; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.character-readonly strong { margin-top: 3px; overflow: hidden; color: #eee7f0; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.character-field { min-width: 0; display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 650; letter-spacing: .03em; }
.character-field select, .character-field textarea { width: 100%; min-width: 0; }
.character-vitals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.character-vitals label, .character-vitals > div { display: grid; grid-template-columns: 1fr; gap: 4px; border: 1px solid rgba(76,69,84,.8); border-radius: 9px; background: rgba(255,255,255,.025); padding: 7px; color: #8f8795; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.character-vitals > div strong { color: #eee7f0; font-size: 17px; line-height: 24px; }
.character-vitals input { width: 100%; min-width: 0; border: 0; background: transparent; padding: 1px 0; color: #eee7f0; font-size: 17px; font-weight: 750; box-shadow: none; }
.character-vitals input:focus { box-shadow: none; }
.character-class-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.character-class-summary > div, .character-class-summary > button { min-width: 0; min-height: 82px; display: grid; align-content: center; gap: 3px; border: 1px solid rgba(215,155,94,.3); border-radius: 10px; background: linear-gradient(145deg, rgba(215,155,94,.11), rgba(255,255,255,.018)); padding: 9px; text-align: left; }
.character-class-summary small { color: #a39aa8; font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.character-class-summary strong { color: var(--accent-strong); font-size: 22px; line-height: 1; }
.character-class-summary span { overflow: hidden; color: #716978; font-size: 7px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.character-damage-roll:not(:disabled), .character-level-up:not(:disabled) { cursor: pointer; }
.character-damage-roll:not(:disabled):hover, .character-damage-roll:not(:disabled):focus-visible, .character-level-up:not(:disabled):hover, .character-level-up:not(:disabled):focus-visible { border-color: rgba(242,179,107,.82); background: linear-gradient(145deg, rgba(215,155,94,.2), rgba(255,255,255,.035)); box-shadow: 0 0 0 2px rgba(215,155,94,.1); outline: 0; }
.character-damage-roll:not(:disabled):active, .character-level-up:not(:disabled):active { transform: translateY(1px); }
.character-damage-roll:disabled, .character-level-up:disabled { cursor: default; opacity: .48; }
.character-damage-roll:not(:disabled) span, .character-level-up:not(:disabled) span { color: var(--accent); }
.character-section { border-top: 1px solid rgba(78,70,86,.72); padding-top: 12px; }
.character-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.character-section-heading strong, .character-section-heading small { display: block; }
.character-section-heading strong { color: #ded7e2; font-size: 10px; }
.character-section-heading small { margin-top: 2px; color: #817987; font-size: 8px; }
.character-section-heading button { border: 0; border-radius: 6px; background: rgba(255,255,255,.045); padding: 5px 7px; color: #918997; font-size: 8px; }
.character-section-heading button:hover { background: rgba(215,155,94,.12); color: var(--accent-strong); }
.character-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.character-stats > div, .character-stats > label, .character-stats > button { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; gap: 6px; border: 1px solid rgba(75,68,83,.86); border-radius: 9px; background: rgba(255,255,255,.022); padding: 6px 7px; color: inherit; text-align: left; }
.character-stats > div > span, .character-stats > label > span, .character-stats > button > span { min-width: 0; }
.character-stats > button:hover, .character-stats > button:focus-visible { border-color: rgba(215,155,94,.72); background: rgba(215,155,94,.08); outline: 0; }
.character-stats > button:active { transform: translateY(1px); }
.character-stats strong, .character-stats small { display: block; }
.character-stats strong { overflow: hidden; color: #d8d0dc; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.character-stats small { margin-top: 1px; color: #756e7a; font-size: 7px; }
.character-stats select { width: 57px; min-width: 0; padding: 6px 19px 6px 6px; font-size: 10px; }
.character-stats output { display: grid; place-items: center; min-height: 29px; border-radius: 7px; background: rgba(215,155,94,.1); color: var(--accent-strong); font-size: 11px; font-weight: 750; }
.character-stats [data-penalized="true"] output { background: rgba(213,117,117,.13); color: #f2a7a7; }
.character-conditions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.character-condition { min-width: 0; display: grid; gap: 2px; border: 1px solid rgba(75,68,83,.86); border-radius: 8px; background: rgba(255,255,255,.022); padding: 7px 6px; color: #8e8693; text-align: left; }
.character-condition strong { color: #cfc7d3; font-size: 9px; }
.character-condition small { font-size: 7px; }
.character-condition[aria-pressed="true"] { border-color: rgba(213,117,117,.7); background: rgba(213,117,117,.12); }
.character-condition[aria-pressed="true"] strong { color: #f1aaaa; }
.character-alignment-summary > small, .character-alignment-summary > strong { display: block; }
.character-alignment-summary > small { color: #817987; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.character-alignment-summary > strong { margin-top: 4px; color: #ded7e2; font-size: 11px; }
.character-alignment-description { min-height: 32px; margin: 7px 2px 0; color: #8e8693; font-size: 9px; line-height: 1.45; }
.character-bonds-section textarea { resize: vertical; min-height: 108px; max-height: 240px; line-height: 1.5; }

.character-setup-dialog { width: min(620px, calc(100vw - 32px)); }
.character-setup-dialog form { max-height: calc(100vh - 48px); overflow-y: auto; display: grid; gap: 14px; }
.character-setup-dialog section { min-width: 0; border-top: 1px solid rgba(78,70,86,.72); padding-top: 12px; }
.character-setup-identity { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.character-setup-identity label { min-width: 0; display: grid; gap: 5px; color: var(--muted); font-size: 9px; }
#character-setup-level-field[hidden] { display: none; }
.character-setup-identity input, .character-setup-identity select { width: 100%; min-width: 0; }
.character-setup-stats > label { grid-template-columns: minmax(0,1fr) 57px 34px; }
.character-setup-stats .complete, #character-setup-stat-hint.complete { color: var(--green); }
.character-level-up-dialog { width: min(460px, calc(100vw - 32px)); }
.character-level-up-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 12px; }
.character-level-up-stat { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 9px; border: 1px solid rgba(82,74,89,.92); border-radius: 9px; background: rgba(255,255,255,.03); padding: 9px; color: #d9d1dd; text-align: left; }
.character-level-up-stat:hover:not(:disabled), .character-level-up-stat:focus-visible:not(:disabled) { border-color: var(--accent); background: rgba(215,155,94,.1); outline: 0; }
.character-level-up-stat:disabled { cursor: default; opacity: .4; }
.character-level-up-stat strong, .character-level-up-stat small { display: block; }
.character-level-up-stat small { margin-top: 2px; color: #8d8493; font-size: 8px; }
.character-level-up-stat b { color: var(--accent-strong); font-size: 12px; }
.character-level-up.ready { border-color: rgba(114,197,154,.62); background: linear-gradient(145deg, rgba(114,197,154,.12), rgba(255,255,255,.018)); }
.character-picker-dialog, .character-assignment-dialog { width: min(430px, calc(100vw - 32px)); }
.character-picker-dialog form, .character-assignment-dialog form { display: grid; gap: 11px; }
.character-picker-dialog .hint, .character-assignment-dialog .hint { margin: 0; }
.character-picker-list { max-height: min(430px, 56vh); overflow-y: auto; display: grid; gap: 7px; padding-right: 2px; }
.character-picker-card { width: 100%; min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px; border: 1px solid rgba(75,68,83,.9); border-radius: 10px; background: rgba(255,255,255,.025); padding: 8px; color: #d8d0dc; text-align: left; }
.character-picker-card:hover, .character-picker-card:focus-visible { border-color: rgba(215,155,94,.68); background: rgba(215,155,94,.07); outline: 0; }
.character-picker-card.active { border-color: rgba(114,197,154,.72); background: rgba(114,197,154,.08); }
.character-picker-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(215,155,94,.12); color: var(--accent-strong); font-size: 17px; }
.character-picker-copy { min-width: 0; }
.character-picker-copy strong, .character-picker-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.character-picker-copy strong { font-size: 10px; }
.character-picker-copy small { margin-top: 2px; color: #817987; font-size: 8px; }
.character-picker-active { color: var(--green); font-size: 8px; }
.character-new-button { width: 100%; margin-top: 2px; }

.monsters-panel { grid-template-rows: auto auto minmax(0,1fr); }
.monsters-panel.monster-editing { grid-template-rows: minmax(0,1fr); }
.monsters-panel.monster-editing > .library-heading,
.monsters-panel.monster-editing > .monster-panel-tabs,
.monsters-panel.monster-editing > .monster-panel-view { display: none; }
.monster-panel-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.monster-panel-tabs button { border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); padding: 7px; color: #928a98; font-size: 9px; }
.monster-panel-tabs button[aria-pressed="true"] { border-color: rgba(215,155,94,.6); background: rgba(215,155,94,.12); color: var(--accent-strong); }
.monster-panel-view { min-height: 0; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; gap: 9px; }
.monster-panel-view[hidden] { display: none; }
#monster-library-view { grid-template-rows: auto auto minmax(0,1fr) auto; }
.monster-add-button { margin-top: 0; }
.monster-results { min-height: 0; overflow-y: auto; display: grid; grid-auto-rows: max-content; align-content: start; gap: 7px; padding-right: 3px; }
.monster-card { border: 1px solid rgba(75,68,83,.9); border-radius: 10px; background: rgba(255,255,255,.025); padding: 8px; }
.monster-card:hover { border-color: rgba(215,155,94,.55); background: rgba(215,155,94,.045); }
.monster-card-open { width: 100%; min-width: 0; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 8px; border: 0; background: transparent; padding: 0; color: inherit; text-align: left; }
.monster-portrait { width: 36px; height: 36px; display: grid; place-items: center; flex: none; object-fit: cover; border: 1px solid rgba(99,88,106,.9); border-radius: 8px; background: rgba(8,7,10,.48); color: #8f8495; font-size: 18px; }
.monster-portrait-fallback { line-height: 1; }
.monster-card-copy { min-width: 0; }
.monster-card-copy strong, .monster-card-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monster-card-copy strong { color: #e4dce7; font-size: 11px; }
.monster-card-copy small { margin-top: 2px; color: #817987; font-size: 8px; }
.monster-card-hp { color: var(--accent-strong); font-size: 11px; font-weight: 750; }
.monster-hp-bar { height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.07); }
.monster-card .monster-hp-bar { margin-top: 7px; }
.monster-hp-bar i { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #a64343, #d86a55 55%, #72c59a); transition: width .18s ease; }
.monster-hp-bar.large { height: 8px; margin: 3px 0 4px; }
.monster-card-actions, .monster-hp-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; margin-top: 7px; }
.monster-card-actions button, .monster-hp-actions button { border: 1px solid rgba(77,69,85,.9); border-radius: 7px; background: rgba(255,255,255,.035); padding: 5px; color: #aaa2af; font-size: 9px; }
.monster-card-actions button:hover, .monster-hp-actions button:hover { border-color: rgba(215,155,94,.6); color: var(--accent-strong); }
.monster-damage-button { width: 100%; border: 1px solid rgba(181,119,62,.72); border-radius: 8px; background: rgba(181,119,62,.13); padding: 7px 9px; color: var(--accent-strong); font-size: 9px; font-weight: 750; }
.monster-card > .monster-damage-button { margin-top: 7px; }
.monster-damage-button:hover:not(:disabled) { border-color: var(--accent-strong); background: rgba(215,155,94,.2); }
.monster-damage-button:disabled { cursor: default; opacity: .42; }
.monster-editor { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 11px; padding-right: 3px; }
.monster-editor[hidden] { display: none; }
.monster-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 3px 0; }
.monster-editor-heading small, .monster-editor-heading h2 { display: block; }
.monster-editor-heading small { color: var(--accent); font-size: 8px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.monster-editor-heading h2 { margin: 3px 0 0; color: #efe8f1; font-size: 17px; }
.monster-editor-image { width: 100%; max-height: 180px; display: block; object-fit: contain; border: 1px solid rgba(75,68,83,.9); border-radius: 10px; background: rgba(8,7,10,.38); }
.monster-editor-image[hidden] { display: none; }
#monster-save-state { color: var(--green); font-size: 8px; }
#monster-save-state.saving { color: var(--accent-strong); }
.monster-hp-fields { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: end; gap: 8px; }
.monster-damage-field { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 8px; }
.monster-damage-field .monster-damage-button { width: auto; min-height: 34px; white-space: nowrap; }
.monster-hp-fields > span { padding-bottom: 9px; color: #736c78; }
.monster-hp-fields label { display: grid; gap: 5px; color: #8f8795; font-size: 9px; }
.monster-hp-fields input { width: 100%; min-width: 0; font-size: 17px; font-weight: 750; }
.monster-notes-field { margin-top: 5px; }
.monster-notes-field textarea { resize: vertical; min-height: 130px; line-height: 1.45; }
.monster-delete-button { border: 1px solid rgba(213,117,117,.38); border-radius: 8px; background: rgba(213,117,117,.08); padding: 8px; color: #df9a9a; font-size: 9px; }
.monster-delete-button:hover { border-color: rgba(213,117,117,.7); background: rgba(213,117,117,.14); }
.monster-library-results { min-height: 0; overflow-y: auto; display: grid; grid-auto-rows: max-content; align-content: start; gap: 6px; padding-right: 3px; }
.monster-library-card { width: 100%; min-width: 0; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 8px; border: 1px solid rgba(75,68,83,.9); border-radius: 9px; background: rgba(255,255,255,.025); padding: 8px; color: inherit; text-align: left; }
.monster-library-card:hover, .monster-library-card:focus-visible { border-color: rgba(215,155,94,.65); background: rgba(215,155,94,.07); outline: 0; }
.monster-library-card strong, .monster-library-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monster-library-card strong { color: #e1dae5; font-size: 10px; }
.monster-library-card small { margin-top: 3px; color: #817987; font-size: 7px; }
.monster-library-card span:last-child { color: var(--accent-strong); font-size: 9px; font-weight: 750; white-space: nowrap; }

.move-icon-dialog { width: min(760px, calc(100vw - 32px)); }
.move-icon-dialog form { height: min(720px, calc(100vh - 48px)); display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; gap: 10px; }
.move-icon-dialog .menu-heading { margin-bottom: 0; }
.move-icon-dialog .hint { margin: 0; }
.marker-icon-button { margin-top: 2px; }
.move-icon-results-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #cfc7d3; font-size: 10px; }
.move-icon-results-heading button { border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.035); padding: 5px 8px; color: #aaa2af; font-size: 9px; }
.move-icon-results-heading button:hover { border-color: var(--accent); color: var(--accent-strong); }
.move-icon-results { min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); align-content: start; gap: 7px; padding-right: 3px; }
.move-icon-tile { min-width: 0; display: grid; gap: 5px; border: 1px solid rgba(75,68,83,.9); border-radius: 9px; background: rgba(255,255,255,.025); padding: 5px; color: #bdb5c2; text-align: left; }
.move-icon-tile:hover, .move-icon-tile:focus-visible, .move-icon-tile.selected { border-color: rgba(215,155,94,.72); background: rgba(215,155,94,.09); outline: 0; }
.move-icon-tile img { width: 100%; aspect-ratio: 1; display: block; object-fit: contain; border-radius: 6px; background: rgba(8,7,10,.34); }
.move-icon-tile strong, .move-icon-tile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.move-icon-tile strong { font-size: 8px; font-weight: 650; }
.move-icon-tile small { color: #756e7a; font-size: 7px; }

.dice-panel { position: absolute; z-index: 17; right: 14px; top: 14px; width: min(470px, calc(100% - 84px)); height: min(620px, calc(100% - 28px)); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.dice-panel-heading { min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 9px 10px 9px 14px; }
.dice-panel-heading strong, .dice-panel-heading small { display: block; }
.dice-panel-heading strong { color: #eee8f0; font-size: 13px; }
.dice-panel-heading small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.dice-panel iframe { width: 100%; height: 100%; border: 0; background: #15121a; }
#dice-announcement { position: absolute; z-index: 20; left: 50%; top: 14px; max-width: min(520px, calc(100% - 150px)); transform: translate(-50%, -18px); opacity: 0; pointer-events: none; border: 1px solid rgba(215,155,94,.58); border-radius: 999px; background: rgba(24,21,29,.96); padding: 8px 14px; color: #f6eee5; font-size: 11px; font-weight: 680; text-align: center; box-shadow: 0 12px 34px rgba(0,0,0,.38); transition: opacity .18s ease, transform .18s ease; }
#dice-announcement.show { transform: translate(-50%, 0); opacity: 1; }

.floating-menu { z-index: 13; border: 1px solid rgba(91,83,100,.92); border-radius: 13px; background: rgba(28,25,34,.95); box-shadow: 0 16px 42px rgba(0,0,0,.38); backdrop-filter: blur(16px); }
.floating-menu[hidden] { display: none !important; }
.tool-popover { position: absolute; left: 70px; top: 14px; width: 238px; padding: 12px; }
#fog-menu { width: 280px; max-height: calc(100% - 28px); overflow-y: auto; }
.fog-menu-section { margin-top: 13px; border-top: 1px solid var(--line); padding-top: 8px; }
.tool-popover select, .floating-menu select { width: 100%; }
.menu-heading { display: flex; align-items: center; justify-content: space-between; min-height: 27px; margin-bottom: 9px; color: #e5dfe8; font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.menu-close { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #8f8795; padding: 0; font-size: 20px; }
.menu-close:hover { background: rgba(255,255,255,.07); color: white; }
.segmented-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.segmented-tools .tool { min-height: 58px; display: grid; place-items: center; gap: 2px; padding: 6px 3px; text-align: center; }
.segmented-tools .tool span { width: auto; font-size: 20px; }
.segmented-tools .tool small { font-size: 9px; }
.tool-popover .wide-button { width: 100%; }
.advanced-details { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.advanced-details summary { cursor: pointer; color: #b9b1be; font-size: 11px; }

.inspector { position: absolute; z-index: 15; right: 14px; top: 14px; width: 270px; max-height: calc(100% - 28px); overflow-y: auto; padding: 13px; border-width: 1px; }
body.player .inspector:not([hidden]) { display: block; }
.inspector-heading { padding-bottom: 8px; }
.inspector-heading > span:last-child { display: flex; align-items: center; gap: 3px; }
.inspector-heading .menu-close { color: #8f8795; font-size: 19px; }
.inspector-icon-button { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: #9a929f; padding: 0; cursor: pointer; }
.inspector-icon-button:hover { border-color: rgba(215,155,94,.55); color: #eee7f0; }
.inspector-icon-button svg { grid-area: 1 / 1; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inspector-icon-button[aria-pressed="true"] { border-color: rgba(215,155,94,.55); color: var(--accent-strong); background: rgba(215,155,94,.1); }
.inspector-icon-button[aria-pressed="true"] .visibility-off,
.inspector-icon-button[aria-pressed="false"] .visibility-on { display: none; }
.inspector-icon-button[aria-pressed="false"] { color: #e99a9a; background: rgba(176,76,76,.12); }
#inspector-fields > label { margin-top: 10px; }
#inspector-fields .advanced-details > label { display: grid; gap: 6px; margin-top: 10px; color: var(--muted); font-size: 11px; }
.two-columns label { margin-top: 9px; }
.dimension-controls { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); align-items: end; gap: 6px; }
.dimension-controls label { min-width: 0; margin-top: 9px; }
.dimension-controls input { width: 100%; }
.aspect-link-button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: #211d28; color: #8f8795; cursor: pointer; }
.aspect-link-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aspect-link-button:hover { border-color: rgba(215,155,94,.52); color: #d8cfde; }
.aspect-link-button[aria-pressed="true"] { border-color: rgba(215,155,94,.78); background: rgba(215,155,94,.16); color: var(--accent-strong); box-shadow: 0 0 0 2px rgba(215,155,94,.1); }
.size-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.size-actions.single { grid-template-columns: 1fr; }
.size-actions .wide-button { min-width: 0; padding-inline: 7px; font-size: 10px; }
.switch-row { margin-top: 8px !important; }
#tint-controls[hidden] { display: none; }
#tint-controls select { width: 100%; }
.tint-reset-button { width: 100%; margin-top: 8px; }
.background-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.background-actions[hidden] { display: none; }
.background-actions > span { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
.background-actions .wide-button { min-width: 0; padding-inline: 7px; font-size: 10px; }
.background-actions .background-grid-button { grid-column: 1 / -1; }
.background-actions .auto-grid-button { border-color: rgba(142,224,179,.42); color: #dff9e9; background: rgba(94,158,125,.13); }
.background-actions .auto-grid-button:hover { border-color: rgba(142,224,179,.72); background: rgba(94,158,125,.22); }

.settings-dialog { width: min(620px, calc(100vw - 32px)); border: 1px solid rgba(96,88,104,.95); border-radius: 16px; background: rgba(28,25,34,.98); color: var(--ink); padding: 0; box-shadow: 0 24px 80px rgba(0,0,0,.6); }
.settings-dialog::backdrop { background: rgba(8,7,10,.62); backdrop-filter: blur(4px); }
.settings-dialog form { padding: 16px; }
.player-name-dialog { width: min(360px, calc(100vw - 32px)); }
.player-name-dialog form > label { display: block; margin: 14px 0 6px; color: var(--muted); font-size: 11px; }
.player-name-dialog input { width: 100%; }
.settings-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.settings-columns.single-column-settings { grid-template-columns: 1fr; }
.settings-columns section { min-width: 0; }
.settings-columns h2, .shortcut-list h2 { margin: 0 0 10px; color: #d7d0dc; font-size: 11px; letter-spacing: .11em; text-transform: uppercase; }
.settings-columns select { width: 100%; }
.calibrate-button { width: 100%; margin-top: 8px; }
.grid-offset-readout { margin: 6px 2px 0; color: var(--muted); font-size: 9px; }
.grid-dialog { width: min(390px, calc(100vw - 32px)); }
.grid-dialog select { width: 100%; }
.grid-dialog .grid-color-row { margin-top: 9px; }
.laser-dialog { width: min(370px, calc(100vw - 32px)); }
.laser-dialog .grid-color-row { margin-top: 12px; }
.laser-dialog .hint { margin: 12px 2px 0; line-height: 1.5; }
.fog-global-actions { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 13px; }
.grid-color-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.grid-color-row strong, .grid-color-row small { display: block; }
.grid-color-row strong { color: var(--ink); font-size: 11px; }
.grid-color-row small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.grid-color-row input { width: 42px; height: 30px; border: 0; border-radius: 6px; background: transparent; padding: 0; cursor: pointer; }
.shortcut-list { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 13px; }
.shortcut-list > div { display: flex; flex-wrap: wrap; gap: 8px 13px; color: var(--muted); font-size: 10px; }
.shortcut-list kbd { margin-right: 4px; }

.board-status { right: 12px; bottom: 11px; border-radius: 999px; }
#presence { cursor: pointer; }
.player-help { bottom: 12px; padding: 6px 11px; font-size: 10px; }
body.player .workspace { grid-template-columns: minmax(0,1fr); }

@media (max-width: 700px) {
  .brand strong, .brand small { display: none; }
  .brand { min-width: auto; }
  .topbar { gap: 8px; }
  .scene-controls select { min-width: 110px; max-width: 150px; }
  .tool-dock { left: 8px; top: 8px; }
  .board-wrap.library-open .tool-dock { left: auto; right: 8px; }
  .board-wrap.character-open .tool-dock { left: auto; right: 8px; }
  .library-panel { width: min(330px, calc(100vw - 58px)); }
  .character-panel { width: min(380px, calc(100vw - 58px)); }
  .tool-popover { left: 61px; top: 8px; width: min(230px, calc(100vw - 78px)); }
  #fog-menu { width: min(280px, calc(100vw - 78px)); }
  .dice-panel { inset: 8px 8px 8px 61px; width: auto; height: auto; }
  #dice-announcement { top: 8px; max-width: calc(100% - 130px); }
  .inspector { right: 8px; top: 8px; width: min(270px, calc(100vw - 82px)); }
  .settings-columns { grid-template-columns: 1fr; }
  .character-identity, .character-stats, .character-setup-identity, .character-level-up-stats { grid-template-columns: 1fr; }
}