/* Animated Battle Maps — true black, ember orange and gold, from the channel logo. Tokens first so the brand can be swapped in one place. */
:root {
  --bg: #0A0807;
  --bg-2: #120E0C;
  --card: #17110F;
  --muted: #261C18;
  --muted-fg: #ADA49C;
  --fg: #F3EFEA;
  --steel: #453736;
  --border: rgba(255, 255, 255, 0.09);
  --silver: #CDCBCC;
  --accent: #E05010;
  --accent-hi: #F0C060;
  --on-accent: #160A04;
  --danger: #EF4444;
  --ring: #FFFFFF;

  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-body: "Josefin Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 22px 48px rgba(0,0,0,.55);

  --t-fast: 160ms;
  --t-med: 260ms;
  --t-slow: 420ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  --ease-back: cubic-bezier(.34, 1.4, .64, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: .02em; line-height: 1.15; margin: 0; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: .55em 1.1em;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--muted); color: var(--fg);
  font-weight: 600; text-decoration: none; letter-spacing: .01em;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.btn:hover { background: #33261f; border-color: rgba(255,255,255,.18); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn.primary { background: linear-gradient(180deg, var(--accent-hi) 0%, #E8903A 55%, var(--accent) 100%); color: var(--on-accent); border-color: transparent; box-shadow: 0 0 0 0 rgba(240,150,60,0); }
.btn.primary:hover { box-shadow: 0 0 24px -4px rgba(240,150,60,.55); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: rgba(255,255,255,.06); }

input[type=search], input:not([type]), input[type=text] {
  font: inherit; color: var(--fg);
  min-height: 44px; padding: .55em .9em;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(224,80,16,.25); }
.hint { color: var(--muted-fg); font-size: .9rem; margin: .4rem 0 0; min-height: 1.4em; }

/* ---------- home ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem clamp(16px, 4vw, 48px);
  background: rgba(10,8,7,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.brand { color: var(--silver); display: flex; align-items: center; gap: .7rem; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .04em; }
.brand-mark { border-radius: 50%; box-shadow: 0 0 18px -2px rgba(224,80,16,.6); }
.brand-mark.big { margin: 0 auto 1rem; }

.hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(56px, 10vw, 120px) clamp(16px, 4vw, 48px) clamp(48px, 7vw, 88px); }
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); filter: saturate(1.1); transition: opacity 1.2s var(--ease-out), transform 8s var(--ease-out); }
.hero-bg img.loaded { opacity: .5; transform: scale(1); }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 20% 10%, rgba(10,8,7,.2), rgba(10,8,7,.85) 60%, var(--bg) 100%), linear-gradient(180deg, transparent 50%, var(--bg)); }
.hero-inner { max-width: 760px; }
.hero h1 { text-wrap: balance; max-width: 18ch; font-size: clamp(2rem, 4.6vw, 3.3rem); text-shadow: 0 2px 30px rgba(0,0,0,.6); }
.lede { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: #E4DCD3; max-width: 60ch; margin: 1rem 0 2rem; }
.join { background: rgba(23,17,15,.72); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem; max-width: 460px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.join label { font-weight: 600; display: block; margin-bottom: .5rem; }
.join-row { display: flex; gap: .5rem; }
.join-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .18em; font-weight: 600; }

.library { padding: 0 clamp(16px, 4vw, 48px) 64px; }
.library-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.library-head h2 { font-size: 1.6rem; }
.count { font-family: var(--font-body); font-size: .95rem; color: var(--muted-fg); font-weight: 500; letter-spacing: 0; margin-left: .4rem; }
.search { position: relative; flex: 1 1 280px; max-width: 420px; display: flex; align-items: center; }
.search svg { position: absolute; left: .8rem; color: var(--muted-fg); pointer-events: none; }
.search input { width: 100%; padding-left: 2.4rem; padding-right: 2.4rem; }
.search kbd { position: absolute; right: .7rem; font: 600 .8rem var(--font-body); color: var(--muted-fg); border: 1px solid var(--border); border-radius: 5px; padding: .05rem .4rem; }
@media (hover: none) { .search kbd { display: none; } }

.tag-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.tag-filter button { min-height: 40px; padding: .3rem .95rem; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted-fg); font-weight: 600; text-transform: capitalize; transition: all var(--t-fast) var(--ease-out); }
.tag-filter button:hover { color: var(--fg); border-color: rgba(255,255,255,.2); }
.tag-filter button[aria-pressed=true] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.catalogue { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 2vw, 24px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.card { animation: rise var(--t-slow) var(--ease-back) both; animation-delay: calc(min(var(--i, 0), 12) * 50ms); }
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(.94); } }
.card a { display: block; text-decoration: none; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow-1); transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out); }
.card a:hover, .card a:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-2), 0 0 0 1px rgba(240,150,60,.35); border-color: rgba(240,150,60,.4); }
.thumb { position: relative; aspect-ratio: 16 / 9; background: var(--muted); overflow: hidden; }
.thumb img, .thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--t-med) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.thumb video { opacity: 0; }
.tier-chip { position: absolute; left: .6rem; top: .6rem; display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .02em; background: rgba(10,8,7,.8); color: var(--fg); border: 1px solid rgba(255,255,255,.14); }
.tier-chip.t-free { color: #BFF0CF; border-color: rgba(120,220,150,.45); }
.tier-chip.t-hero { color: #D8E4FF; }
.tier-chip.t-conqueror { color: #F6DCA0; border-color: rgba(240,192,96,.45); }
.tier-chip.t-emperor { color: #F3C2FF; border-color: rgba(220,140,255,.45); }
.tier-filter { min-height: 44px; padding: 0 .8rem; border-radius: var(--r-sm); background: var(--card); color: var(--fg); border: 1px solid var(--border); font: inherit; }
.more-maps { display: block; margin: 1.6rem auto 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.card a.previewing video { opacity: 1; }
.card a:hover .thumb img { transform: scale(1.04); }
.play-chip { position: absolute; left: .7rem; bottom: .7rem; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem .3rem .55rem; border-radius: 999px; background: rgba(10,8,7,.78); font-size: .85rem; font-weight: 700; opacity: 0; transform: translateY(6px); transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); }
.card a:hover .play-chip, .card a:focus-visible .play-chip { opacity: 1; transform: none; }
@media (hover: none) { .play-chip { opacity: 1; transform: none; } }
.card-body { padding: .85rem 1rem 1rem; }
.card-body h3 { font-size: 1.12rem; }
.pack { margin: .2rem 0 0; color: var(--muted-fg); font-size: .9rem; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0 0; padding: 0; }
.tags li { font-size: .78rem; font-weight: 600; text-transform: capitalize; padding: .1rem .55rem; border-radius: 999px; background: var(--muted); color: #D6CCC2; }
.empty { color: var(--muted-fg); padding: 2rem 0; }
.site-footer { padding: 2rem clamp(16px, 4vw, 48px); color: var(--muted-fg); border-top: 1px solid var(--border); font-size: .9rem; }

/* ---------- player ---------- */
body.player { background: #000; overflow: hidden; height: 100dvh; }
.stage { position: fixed; inset: 0; display: grid; place-items: center; background: #000; }
.stage video, .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage video { object-fit: contain; transition: opacity var(--t-slow) var(--ease-out); }
.stage canvas { pointer-events: none; }
body.loading .stage video { opacity: .55; }
.spinner { width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: var(--accent-hi); animation: spin .9s linear infinite; opacity: 0; transition: opacity var(--t-med); z-index: 1; }
body.loading .spinner { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
.waiting-msg, .fatal-msg { display: none; z-index: 2; text-align: center; padding: 1rem; }
body.waiting .waiting-msg { display: block; }
body.waiting .spinner { opacity: 0; }
body.fatal .fatal-msg { display: grid; gap: 1rem; justify-items: center; }
body.fatal .waiting-msg { display: none; }
.tap-to-play { display: none; z-index: 3; }
body.needs-tap .tap-to-play { display: inline-flex; }

.hud { position: fixed; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: .6rem; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.hud-top { top: 0; background: linear-gradient(180deg, rgba(0,0,0,.7), transparent); }
.hud-top h1 { font-size: clamp(1rem, 2.2vw, 1.35rem); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.hud-bottom { bottom: 0; justify-content: center; flex-wrap: wrap; padding-bottom: max(16px, env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(0,0,0,.7), transparent); }
body.idle .hud-top { opacity: 0; transform: translateY(-8px); pointer-events: none; }
body.idle .hud-bottom { opacity: 0; transform: translateY(8px); pointer-events: none; }
body.idle { cursor: none; }
.icon-btn { padding: .5rem; width: 44px; }
.ctrl { background: rgba(23,17,15,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ctrl[aria-pressed=false] { color: var(--muted-fg); }
.ctrl[aria-pressed=true] svg, .ctrl[aria-expanded=true] svg { color: var(--accent-hi); }
.ctrl.primary svg { color: inherit !important; }
body.is-guest .host-only { display: none; }
@media (max-width: 560px) { .hud-bottom .ctrl span { display: none; } .hud-bottom .ctrl { width: 48px; padding: 0; } }

.pill { font-size: .85rem; font-weight: 600; padding: .3rem .75rem; border-radius: 999px; background: rgba(23,17,15,.85); border: 1px solid var(--border); white-space: nowrap; }
.pill.warn { color: #fbd38d; }

.panel { position: fixed; z-index: 6; right: max(16px, env(safe-area-inset-right)); bottom: 84px; width: min(380px, calc(100vw - 32px)); max-height: calc(100dvh - 120px); overflow: auto; padding: 1.1rem 1.2rem; background: rgba(18,13,11,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-2); animation: pop var(--t-med) var(--ease-back); }
.panel-wide { width: min(640px, calc(100vw - 32px)); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.panel h2 { font-size: 1.1rem; margin-bottom: .7rem; }
.panel p { margin: 0 0 .8rem; color: #DDD4CB; font-size: .95rem; }
.panel label { display: grid; gap: .3rem; font-weight: 600; font-size: .92rem; margin-bottom: .9rem; }
.panel output { color: var(--muted-fg); font-weight: 500; }
.panel hr { border: 0; border-top: 1px solid var(--border); margin: 1.1rem 0; }
.panel details { margin-bottom: .6rem; }
.panel summary { cursor: pointer; font-weight: 600; min-height: 32px; }
input[type=range] { width: 100%; accent-color: var(--accent); min-height: 32px; }
.swatches { display: flex; gap: .6rem; margin-bottom: .9rem; }
.swatches button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--border); background: var(--c); transition: transform var(--t-fast) var(--ease-out); }
.swatches button[aria-pressed=true] { border-color: var(--accent-hi); box-shadow: 0 0 0 3px rgba(240,150,60,.3); }
.swatches button:hover { transform: scale(1.06); }
.link-row { display: flex; gap: .5rem; margin-bottom: .8rem; }
.link-row input { flex: 1; min-width: 0; }
#tv-code { text-transform: uppercase; letter-spacing: .18em; font-weight: 700; }
.code-line strong { font-size: 1.3rem; letter-spacing: .18em; color: var(--accent-hi); margin-left: .3rem; }
.map-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.map-pick { display: grid; gap: .35rem; padding: 0; background: none; border: 2px solid transparent; border-radius: var(--r-sm); text-align: left; font-size: .88rem; font-weight: 600; transition: border-color var(--t-fast); }
.map-pick img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; }
.map-pick span { padding: 0 .25rem .3rem; }
.map-pick[aria-current=true] { border-color: var(--accent-hi); }
.map-pick:hover img { filter: brightness(1.15); }

.toast { position: fixed; z-index: 9; left: 50%; top: 72px; transform: translate(-50%, -10px); opacity: 0; padding: .55rem 1rem; border-radius: 999px; background: var(--fg); color: var(--bg); font-weight: 600; pointer-events: none; transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* TV display: no controls, just the map and a small game badge that fades. */
body.tv .hud-bottom, body.tv .hud-top .btn, body.tv #map-title { display: none; }
body.tv .hud-top { background: none; justify-content: flex-end; }
body.tv.idle .hud-top { opacity: 0; }
body.tv { cursor: none; }

/* ---------- TV pairing page ---------- */
body.tv-pair { min-height: 100dvh; display: grid; place-items: center; text-align: center; padding: 24px 16px; background: radial-gradient(80% 70% at 50% 0%, #2a130a, var(--bg) 70%); }
.tv-pair h1 { font-size: clamp(1.6rem, 4vw, 2.8rem); margin: .2rem 0 1rem; }
.eyebrow { font-family: var(--font-display); color: var(--accent-hi); letter-spacing: .12em; text-transform: uppercase; font-size: .9rem; margin: 0; }
.step { font-size: clamp(1rem, 2vw, 1.35rem); color: #E4DCD3; max-width: 36ch; margin: 0 auto; }
.tv-code { font: 700 clamp(3.5rem, 14vw, 9rem)/1 var(--font-display); letter-spacing: .14em; margin: 2.2rem 0 1rem; color: var(--fg); text-shadow: 0 0 40px rgba(240,150,60,.35); }
.small { color: var(--muted-fg); font-size: .9rem; margin-top: 2rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .spinner { animation: spin 2s linear infinite !important; }
  .hero-bg img { transform: none !important; }
}

/* Rising embers in the hero, echoing the logo. Decorative only. */
.embers { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.embers i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-hi); box-shadow: 0 0 8px 2px rgba(224,80,16,.8); opacity: 0; animation: ember var(--d, 9s) linear infinite; animation-delay: var(--delay, 0s); left: var(--x, 50%); }
@keyframes ember {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  10% { opacity: .9; }
  70% { opacity: .5; }
  100% { opacity: 0; transform: translate(var(--drift, 30px), -70vh) scale(.4); }
}
@media (prefers-reduced-motion: reduce) { .embers { display: none; } }
input::placeholder { text-transform: none; letter-spacing: normal; font-weight: 400; color: #8a817a; }

/* ---------- tokens ---------- */
.token-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.token {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto; touch-action: none; cursor: grab;
  border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 45%, color-mix(in srgb, var(--c) 70%, #000) 100%);
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 3px 10px rgba(0,0,0,.6), inset 0 -3px 6px rgba(0,0,0,.35);
  transition: left 120ms linear, top 120ms linear, box-shadow var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.token.dragging { cursor: grabbing; transition: none; transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 10px 24px rgba(0,0,0,.7); z-index: 2; }
.token.selected { border-color: var(--accent-hi); box-shadow: 0 0 0 3px rgba(240,192,96,.55), 0 3px 10px rgba(0,0,0,.6); }
.token-label { font: 700 var(--fs, 14px)/1 var(--font-body); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); letter-spacing: .02em; pointer-events: none; user-select: none; }
.token.light .token-label { color: #1a1210; text-shadow: none; }
body.tv .token { cursor: none; }

/* ---------- playlist + library panel ---------- */
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .6rem; }
.panel-head h2 { margin: 0; }
.panel-head input { max-width: 240px; min-height: 40px; }
.small-btn { min-height: 36px; padding: .3rem .8rem; font-size: .9rem; }
.playlist { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; gap: .4rem; counter-reset: pl; }
.playlist li { display: flex; align-items: center; gap: .5rem; padding: .3rem; border-radius: var(--r-sm); background: rgba(255,255,255,.04); border: 1px solid transparent; counter-increment: pl; }
.playlist li.current { border-color: var(--accent-hi); background: rgba(240,192,96,.08); }
.pl-play { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; background: none; border: 0; padding: 0; text-align: left; font-weight: 600; font-size: .92rem; min-height: 40px; }
.pl-play::before { content: counter(pl); width: 1.4em; color: var(--muted-fg); text-align: right; }
.pl-play img { width: 64px; height: 36px; object-fit: cover; border-radius: 4px; }
.pl-play span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-actions { display: flex; gap: .25rem; }
.pl-actions button { width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--border); background: var(--muted); }
.pl-actions button:disabled { opacity: .35; cursor: default; }
.map-tile { position: relative; }
.map-add { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(10,8,7,.75); font-weight: 700; font-size: 1.1rem; line-height: 1; }
.map-add[aria-pressed=true] { background: var(--accent-hi); color: var(--on-accent); border-color: transparent; }
.panel select { font: inherit; color: var(--fg); min-height: 44px; padding: .4em .7em; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.panel form .btn.primary { width: 100%; }
.token-colors { flex-wrap: wrap; }
.token-colors button { width: 36px; height: 36px; }

/* ---------- picture tokens, name tags, HP ---------- */
.token.has-img { background-color: transparent; background-size: cover; background-position: center; border: 0; box-shadow: 0 4px 12px rgba(0,0,0,.65); }
.token.has-img.selected { box-shadow: 0 0 0 3px rgba(240,192,96,.75), 0 4px 12px rgba(0,0,0,.65); }
.token-tag { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; display: grid; justify-items: center; gap: 2px; pointer-events: none; }
.token-name { font: 700 var(--tag, 12px)/1.15 var(--font-body); color: #fff; white-space: nowrap; padding: 1px 6px; border-radius: 999px; background: rgba(10,8,7,.72); }
.token-name:empty { display: none; }
.token-hp { display: block; width: max(28px, 70%); min-width: 28px; height: 5px; border-radius: 3px; background: rgba(0,0,0,.7); box-shadow: 0 0 0 1px rgba(255,255,255,.25); overflow: hidden; }
.token-hp[hidden] { display: none; }
.token-hp i { display: block; height: 100%; background: #3fbf6a; transition: width var(--t-med) var(--ease-out), background var(--t-med); }
.token-hp[data-level=hurt] i { background: #f0b030; }
.token-hp[data-level=low] i { background: #e5402f; }
.token-tag:has(.token-name:empty) .token-hp { width: 80%; }

/* ---------- tokens panel ---------- */
.token-selected h2 { font-size: 1.15rem; }
.hp-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.hp-row[hidden], #hp-show-row[hidden] { display: none; }
.hp-row .btn { min-width: 48px; font-size: 1.3rem; padding: 0; }
.panel .hp-value { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: 0; flex: 1; }
.hp-value input { width: 5.2em; text-align: center; font-size: 1.1rem; }
.panel label.check { display: flex; align-items: center; gap: .55rem; font-weight: 500; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
input[type=number] { font: inherit; color: var(--fg); min-height: 44px; padding: .4em .6em; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.my-tokens { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .6rem; margin-bottom: .6rem; }
.my-token { position: relative; }
.mt-place, .mt-pick { width: 100%; display: grid; justify-items: center; gap: .25rem; padding: .5rem .3rem; color: var(--fg); background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; font: 600 .85rem/1.2 var(--font-body); transition: transform var(--t-fast) var(--ease-back), border-color var(--t-fast), background var(--t-fast); }
.mt-place:hover, .mt-pick:hover { transform: translateY(-2px); border-color: rgba(240,192,96,.45); }
.mt-place img, .mt-pick img { width: 64px; height: 64px; border-radius: 50%; }
.mt-place span, .mt-pick span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-place small { color: var(--muted-fg); font-weight: 500; }
.mt-actions { display: flex; justify-content: center; gap: .3rem; margin-top: .25rem; }
.mt-actions button { min-height: 30px; padding: 0 .6rem; font: 600 .8rem var(--font-body); color: var(--silver); background: transparent; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.mt-actions button:hover { color: var(--fg); border-color: rgba(255,255,255,.3); }
.mt-pick[aria-checked=true] { border-color: var(--accent-hi); background: rgba(240,192,96,.1); box-shadow: 0 0 0 2px rgba(240,192,96,.35); }
.mt-none { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; border: 2px dashed var(--border); color: var(--muted-fg); font-size: 1.4rem; }
.file-btn { position: relative; cursor: pointer; }
.backup-row { flex-wrap: wrap; }
.backup-row [hidden] { display: none; }
.people { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.people li { padding: .3rem .7rem; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--border); font-weight: 600; font-size: .9rem; }
.people .tag { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-hi); margin-left: .2rem; }
.people .tag.you { color: var(--silver); }
#token-edit[hidden], .token-selected[hidden] { display: none; }

/* ---------- dialogs: join screen + token maker ---------- */
.dialog { color: var(--fg); background: rgba(18,13,11,.97); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 1.3rem 1.4rem; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow: auto; }
.dialog[open] { animation: pop var(--t-med) var(--ease-back); }
.dialog::backdrop { background: rgba(5,3,2,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.dialog h2 { font-size: 1.3rem; margin: 0 0 1rem; }
.dialog label { display: grid; gap: .3rem; font-weight: 600; font-size: .92rem; margin-bottom: .9rem; }
.dialog .label { font-weight: 600; font-size: .92rem; margin: 0 0 .45rem; }
.dialog select { font: inherit; color: var(--fg); min-height: 44px; padding: .4em .7em; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: .6rem; }
.join-dialog { width: min(460px, calc(100vw - 32px)); }
.join-tokens { max-height: 260px; overflow: auto; padding: 3px; }
.tm-dialog { width: min(860px, calc(100vw - 32px)); }
.tm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.tm-head h2 { margin: 0; }
.tm-body { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 1.4rem; }
.tm-left { display: grid; align-content: start; gap: .6rem; justify-items: center; }
.tm-preview { width: 100%; aspect-ratio: 1; border-radius: var(--r-md); background: repeating-conic-gradient(#1c1512 0 25%, #14100e 0 50%) 0 0 / 24px 24px; display: grid; place-items: center; border: 2px dashed transparent; transition: border-color var(--t-fast); }
.tm-preview.over { border-color: var(--accent-hi); }
#tm-canvas { width: 92%; height: auto; touch-action: none; cursor: grab; }
#tm-canvas:active { cursor: grabbing; }
.tm-zoom { width: 100%; }
.tm-rings { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: .45rem; margin-bottom: 1rem; }
.tm-ring { display: grid; justify-items: center; gap: .15rem; padding: .35rem .2rem; color: var(--fg); background: transparent; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; font: 600 .75rem var(--font-body); transition: transform var(--t-fast) var(--ease-back), border-color var(--t-fast); }
.tm-ring canvas { width: 48px; height: 48px; }
.tm-ring:hover { transform: translateY(-2px); }
.tm-ring[aria-pressed=true] { border-color: var(--accent-hi); background: rgba(240,192,96,.1); }
.tm-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.tm-tip { margin: -.3rem 0 .8rem; font-size: .82rem; }
#tm-msg.bad { color: #ff9c8a; }
@media (max-width: 640px) {
  .tm-body { grid-template-columns: 1fr; gap: .8rem; }
  .tm-left { max-width: 260px; margin: 0 auto; }
  .dialog { padding: 1rem; }
}
.tm-body > * { min-width: 0; }
.tm-dialog .link-row { flex-wrap: wrap; }
.tm-dialog .link-row input { flex: 1 1 160px; }
@media (max-width: 640px) {
  .tm-rings { grid-template-columns: repeat(4, 1fr); }
  .tm-ring canvas { width: 40px; height: 40px; }
}

/* ---------- dice ---------- */
.dice-overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.dice-3d { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-med); }
.dice-3d.show { opacity: 1; }
.dice-3d canvas { width: 100% !important; height: 100% !important; }
.dice-banner { position: absolute; left: 50%; bottom: 110px; transform: translate(-50%, 20px) scale(.96); opacity: 0; min-width: min(360px, calc(100vw - 32px)); max-width: calc(100vw - 32px); padding: .8rem 1.1rem; text-align: center; background: rgba(14,10,8,.9); border: 1px solid rgba(240,192,96,.35); border-radius: var(--r-lg); box-shadow: var(--shadow-2); transition: opacity var(--t-med), transform var(--t-med) var(--ease-back); }
.dice-banner.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.dice-who { font-weight: 600; color: var(--silver); margin-bottom: .45rem; }
.dice-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; }
.die-chip { min-width: 2.1em; padding: .2em .4em; border-radius: 8px; background: rgba(255,255,255,.08); border: 1px solid var(--border); font: 700 1.05rem var(--font-body); font-variant-numeric: tabular-nums; }
.die-chip.crit { background: rgba(63,191,106,.25); border-color: #3fbf6a; }
.die-chip.fumble { background: rgba(229,64,47,.25); border-color: #e5402f; }
.die-mod { color: var(--muted-fg); font-weight: 700; }
.dice-total { margin-left: .4rem; font: 700 2.2rem/1 var(--font-display); color: var(--accent-hi); text-shadow: 0 0 18px rgba(240,150,60,.5); font-variant-numeric: tabular-nums; }
body.tv .dice-banner { bottom: 60px; transform-origin: bottom center; font-size: 1.4rem; }
.dice-buttons { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; margin-bottom: .7rem; }
.die-btn { min-height: 48px; color: var(--fg); background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: var(--r-sm); font: 700 .85rem var(--font-body); cursor: pointer; transition: transform var(--t-fast) var(--ease-back), border-color var(--t-fast); }
.die-btn:hover { transform: translateY(-2px); border-color: rgba(240,192,96,.5); }
.dice-pool { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 36px; margin-bottom: .6rem; align-items: center; }
.pool-chip { min-height: 34px; padding: 0 .7rem; color: var(--on-accent); background: var(--accent-hi); border: 0; border-radius: 999px; font: 700 .9rem var(--font-body); cursor: pointer; }
.dice-mod-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; font-weight: 600; }
.dice-mod-row output { min-width: 2.6em; text-align: center; font-variant-numeric: tabular-nums; }
.dice-mod-row .btn:not(.ghost) { min-width: 40px; padding: 0; }
.dice-mod-row #dice-clear { margin-left: auto; }
.dice-roll-btn { width: 100%; }
.dice-log { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .9rem; }
.dice-log li { display: flex; flex-wrap: wrap; gap: .35rem; align-items: baseline; }
.dice-log .log-who { font-weight: 700; }
.dice-log .log-what { color: var(--muted-fg); }
.dice-log .log-dice { color: var(--muted-fg); font-size: .8rem; }
.dice-log .hidden-roll { opacity: .7; font-style: italic; }
.small { font-size: .8rem; }

/* ---------- initiative ---------- */
.init-bar { position: fixed; z-index: 5; top: 64px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 24px); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: center; padding: .45rem .6rem; background: rgba(14,10,8,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-1); }
.init-bar[hidden] { display: none; }
.init-round { font: 700 .8rem var(--font-display); letter-spacing: .08em; color: var(--accent-hi); padding-left: .3rem; }
.init-list { list-style: none; margin: 0; padding: 0; display: flex; gap: .35rem; overflow-x: auto; max-width: min(70vw, 900px); scrollbar-width: none; }
.init-chip { position: relative; display: flex; align-items: center; gap: .35rem; padding: .2rem .5rem .2rem .2rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; transition: background var(--t-fast), border-color var(--t-fast); }
.init-chip.current { background: rgba(240,192,96,.16); border-color: var(--accent-hi); box-shadow: 0 0 14px -2px rgba(240,150,60,.55); }
.init-chip.mine .init-name { color: var(--accent-hi); }
.init-face { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 .7rem var(--font-body); color: #fff; background: var(--c) center/cover no-repeat; border: 1.5px solid rgba(255,255,255,.7); flex: none; }
.init-name { font-weight: 600; font-size: .88rem; max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.init-value { min-width: 2em; min-height: 28px; padding: 0 .35rem; border-radius: 8px; background: rgba(255,255,255,.08); border: 1px solid var(--border); color: var(--fg); font: 700 .9rem var(--font-body); font-variant-numeric: tabular-nums; display: inline-grid; place-items: center; }
button.init-value { cursor: pointer; }
button.init-value.empty { border-color: var(--accent); color: var(--accent-hi); animation: pulse 1.6s ease-in-out infinite; }
.init-x { width: 22px; height: 22px; border-radius: 50%; border: 0; background: transparent; color: var(--muted-fg); cursor: pointer; }
.init-controls { display: flex; gap: .35rem; }
.init-edit { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; width: 100%; justify-content: center; padding: .3rem 0 .1rem; }
.init-edit[hidden] { display: none; }
.init-edit label { display: flex; align-items: center; gap: .3rem; font-weight: 600; font-size: .85rem; }
.init-edit input { width: 4.2em; min-height: 36px; }
body.has-init .hud-top #map-title { opacity: .0; }
body.tv .init-bar { top: 16px; font-size: 1.15rem; }
body.tv .init-face { width: 40px; height: 40px; }
.token.turn { box-shadow: 0 0 0 3px var(--accent-hi), 0 0 22px 4px rgba(240,150,60,.75); animation: turn-glow 1.6s ease-in-out infinite; }
@keyframes turn-glow { 50% { box-shadow: 0 0 0 3px var(--accent-hi), 0 0 30px 8px rgba(240,150,60,.45); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 3px rgba(224,80,16,.35); } }
.init-start-row .btn { width: 100%; margin-bottom: .5rem; }

/* ---------- the host's notes ---------- */
.notes-layer { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
body.is-guest .notes-layer, body.tv .notes-layer { display: none; }
.note-panel { position: absolute; pointer-events: auto; display: flex; flex-direction: column; min-width: 200px; min-height: 120px; resize: both; overflow: hidden; color: var(--fg); background: rgba(14,10,8,var(--alpha, .82)); backdrop-filter: blur(calc(var(--alpha, .82) * 6px)); -webkit-backdrop-filter: blur(calc(var(--alpha, .82) * 6px)); border: 1px solid rgba(240,192,96,.3); border-radius: var(--r-md); box-shadow: var(--shadow-2); animation: pop var(--t-med) var(--ease-back); }
.note-panel.vault { border-color: rgba(167,139,250,.45); }
.note-head { display: flex; align-items: center; gap: .3rem; padding: .3rem .4rem .3rem .6rem; cursor: grab; touch-action: none; background: rgba(255,255,255,.04); border-bottom: 1px solid var(--border); }
.note-head:active { cursor: grabbing; }
.note-title { flex: 1; min-width: 0; min-height: 30px !important; padding: .1rem .3rem !important; font: 700 .95rem var(--font-body) !important; background: transparent !important; border: 1px solid transparent !important; }
.note-title:focus { border-color: var(--border) !important; box-shadow: none !important; }
.note-title[readonly] { cursor: grab; }
.note-alpha { width: 64px !important; min-height: 24px !important; }
.note-head button { min-height: 28px; padding: 0 .5rem; color: var(--silver); background: transparent; border: 1px solid var(--border); border-radius: 6px; font: 600 .8rem var(--font-body); cursor: pointer; }
.note-head .note-close { font-size: 1.1rem; line-height: 1; padding: 0 .45rem; }
.note-body { flex: 1; overflow: auto; padding: .5rem .8rem .8rem; font-size: .95rem; line-height: 1.5; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.note-body h2, .note-body h3, .note-body h4 { font-family: var(--font-display); margin: .6rem 0 .3rem; font-size: 1.05rem; color: var(--accent-hi); }
.note-body p, .note-body ul, .note-body ol, .note-body blockquote { margin: 0 0 .55rem; }
.note-body ul, .note-body ol { padding-left: 1.2rem; }
.note-body li.task { list-style: "☐ "; } .note-body li.task.done { list-style: "☑ "; color: var(--muted-fg); }
.note-body blockquote { border-left: 3px solid var(--accent); padding-left: .6rem; color: var(--silver); }
.note-body code, .note-body pre { font-size: .85em; background: rgba(0,0,0,.35); border-radius: 4px; padding: .05em .3em; }
.note-body pre { padding: .5rem; overflow: auto; }
.note-body mark { background: rgba(240,192,96,.35); color: inherit; }
.note-body a { color: #c4b5fd; }
.note-body .embed { color: var(--muted-fg); font-style: italic; }
.note-text { display: none; flex: 1; resize: none; margin: 0; padding: .6rem .8rem; color: var(--fg); background: rgba(0,0,0,.25); border: 0; font: .95rem/1.5 var(--font-body); outline: none; }
.note-panel.editing .note-text { display: block; }
.note-panel.editing .note-body { display: none; }
.note-list { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .3rem; }
.note-list li { display: flex; gap: .3rem; }
.note-list button { min-height: 38px; color: var(--fg); background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: var(--r-sm); font: 600 .9rem var(--font-body); cursor: pointer; text-align: left; }
.note-open, .vault-open { flex: 1; padding: .3rem .6rem; display: grid; }
.vault-open small { color: var(--muted-fg); font-weight: 400; font-size: .75rem; }
.note-del { width: 38px; }
.vault-results { max-height: 240px; overflow: auto; margin-top: .5rem; }
#vault-search { width: 100%; }

/* ---------- map board (rotate / flip) ---------- */
.board { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); transition: transform var(--t-med) var(--ease-out); }
.stage { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.token { transform: translate(-50%, -50%) scaleX(var(--unflip, 1)) rotate(var(--unrot, 0deg)); }
.token.dragging { transform: translate(-50%, -50%) scaleX(var(--unflip, 1)) rotate(var(--unrot, 0deg)) scale(1.12); }

/* ---------- conditions, hidden tokens ---------- */
.token-conds { position: absolute; left: 50%; bottom: 82%; transform: translateX(-50%); display: flex; gap: 1px; pointer-events: none; font-size: var(--ci, 14px); line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.9)); white-space: nowrap; }
.token-conds:empty { display: none; }
.token-conds b { font-weight: normal; }
.token.hidden-token { opacity: .5; outline: 2px dashed rgba(255,255,255,.75); outline-offset: 2px; }
.token.hidden-token::after { content: "Hidden"; position: absolute; top: -1.6em; left: 50%; transform: translateX(-50%); font: 600 10px/1 var(--font-body, sans-serif); letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.75); padding: 3px 5px; border-radius: 4px; pointer-events: none; }
.token.is-dead { filter: grayscale(1) brightness(.7); }
.cond-picker { display: flex; flex-wrap: wrap; gap: 6px; margin: .3rem 0 .8rem; }
.cond-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: inherit; font: inherit; font-size: .85rem; cursor: pointer; }
.cond-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--accent, #E05010) 35%, transparent); border-color: var(--accent-hi, #F0C060); }
.cond-btn:focus-visible { outline: 2px solid var(--accent-hi, #F0C060); outline-offset: 2px; }

/* ---------- ping ---------- */
.ping { position: absolute; width: var(--d); height: var(--d); transform: translate(-50%, -50%) scaleX(var(--unflip, 1)) rotate(var(--unrot, 0deg)); pointer-events: none; z-index: 3; }
.ping i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--accent-hi, #F0C060); box-shadow: 0 0 14px rgba(240,192,96,.9); animation: ping-ring 1.2s ease-out 2 both; }
.ping i + i { animation-delay: .3s; }
.ping span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; white-space: nowrap; font-weight: 600; font-size: 13px; color: #fff; background: rgba(0,0,0,.75); padding: 3px 7px; border-radius: 6px; animation: fade-out 2.6s ease-in both; }
@keyframes ping-ring { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes fade-out { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ping i { animation: none; opacity: .9; } .board { transition: none; } }

/* ---------- pause button ---------- */
#motion-btn .i-play { display: none; }
#motion-btn.is-paused .i-play { display: inline; }
#motion-btn.is-paused .i-pause { display: none; }
#motion-btn.is-paused { background: color-mix(in srgb, var(--accent, #E05010) 30%, rgba(0,0,0,.6)); }

/* ---------- joining: locked door, requests, QR ---------- */
.door-msg { display: none; position: absolute; inset: 0; place-items: center; text-align: center; padding: 24px; background: rgba(0,0,0,.82); z-index: 5; }
body.at-door .door-msg { display: grid; }
.door-msg p { max-width: 26rem; line-height: 1.5; }
.join-requests { position: fixed; top: 64px; right: 16px; z-index: 40; display: grid; gap: 8px; max-width: min(360px, calc(100vw - 32px)); }
.join-request { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: rgba(20,14,12,.94); border: 1px solid var(--accent-hi, #F0C060); box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.join-request > span { flex: 1 1 140px; }
.admin-people li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.admin-people .admin-actions { display: flex; gap: 6px; }
.qr-row { display: flex; gap: 14px; align-items: center; margin: .6rem 0; }
.invite-qr { flex: 0 0 auto; width: 120px; height: 120px; background: #fff; border-radius: 8px; padding: 4px; }
.invite-qr svg, .tv-qr-img svg { width: 100%; height: 100%; display: block; }
.tv-qr { position: absolute; right: 2vw; bottom: 3vh; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 14px; background: rgba(0,0,0,.72); color: #fff; }
.tv-qr[hidden] { display: none; }
.tv-qr-img { width: clamp(110px, 12vw, 200px); aspect-ratio: 1; background: #fff; border-radius: 8px; padding: 4px; }
.tv-qr p { margin: 0; font-size: clamp(14px, 1.3vw, 22px); line-height: 1.35; }
body.table-lock, body.table-lock * { touch-action: none !important; }
/* Hosts have the most buttons: Pause and Full screen go icon-only so the bar stays on one row. */
body.is-host #motion-btn span, body.is-host #fullscreen-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.join-requests { right: auto; left: 16px; }
.admin-people li > span:first-child { flex: 1; min-width: 0; }

/* ---------- TV help page ---------- */
.help-main { max-width: 820px; margin: 0 auto; padding: 1.5rem clamp(16px, 4vw, 32px) 3rem; }
.help-main h1 { font-size: clamp(1.5rem, 4vw, 2.3rem); margin: .3rem 0 1.2rem; }
.help-pick { border: 0; padding: 0; margin: 0 0 1.2rem; }
.help-pick legend { font-family: var(--font-display); color: var(--accent-hi); margin-bottom: .5rem; }
.help-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.help-opt { text-align: left; display: grid; gap: 2px; padding: 12px 14px; min-height: 56px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: inherit; font: inherit; cursor: pointer; }
.help-opt small { color: var(--muted-fg); font-size: .82rem; }
.help-opt[aria-pressed="true"] { border-color: var(--accent-hi); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.help-opt:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.help-steps { margin-top: 1.4rem; padding: 1.2rem 1.4rem; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,.03); }
.help-steps h2 { margin: 0 0 .6rem; font-size: 1.25rem; }
.help-steps ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .55rem; line-height: 1.5; }

/* ---------- zoom, fog, spell shapes ---------- */
.zoom { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.stage canvas.fog-canvas { inset: auto; position: absolute; z-index: 2; pointer-events: none; filter: blur(var(--fog-blur, 4px)); image-rendering: auto; }
.shape-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.shape .shape-mark { fill: color-mix(in srgb, var(--sc) 28%, transparent); stroke: var(--sc); vector-effect: non-scaling-stroke; }
.shape-ruler .shape-mark { fill: none; stroke: var(--sc); stroke-dasharray: 8 6; }
.shape .ruler-end { fill: var(--sc); }
.shape text { fill: #fff; stroke: rgba(0,0,0,.85); paint-order: stroke; font-family: var(--font-body, sans-serif); font-weight: 700; }
.shape-layer.erasing .shape:not(.live) { pointer-events: visiblePainted; cursor: pointer; }
.shape-layer.erasing .shape:not(.live):hover .shape-mark { stroke-width: 4px; }
.token-tag, .token-conds { --uz: 1; }
.zoom .token-tag { transform: translateX(-50%) scale(var(--uz, 1)); transform-origin: top center; }
.zoom .token-conds { transform: translateX(-50%) scale(var(--uz, 1)); transform-origin: bottom center; }
body.drawing .stage { cursor: crosshair; }

.tool-bar { position: fixed; left: 50%; bottom: 86px; transform: translateX(-50%); z-index: 35; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; max-width: calc(100vw - 24px); padding: 8px 10px; border-radius: 14px; background: rgba(16,11,9,.94); border: 1px solid var(--border); box-shadow: 0 12px 30px rgba(0,0,0,.6); }
.tool-bar[hidden] { display: none; }
.tb-group { display: inline-flex; gap: 4px; }
.tb-btn { min-height: 40px; padding: 6px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: inherit; font: inherit; font-size: .9rem; cursor: pointer; }
.tb-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--accent, #E05010) 40%, transparent); border-color: var(--accent-hi, #F0C060); }
.tb-btn.primary { background: var(--accent, #E05010); border-color: transparent; color: #fff; }
.tb-swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); background: var(--c); cursor: pointer; }
.tb-swatch[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--accent-hi, #F0C060); }
.tb-btn:focus-visible, .tb-swatch:focus-visible { outline: 2px solid var(--accent-hi, #F0C060); outline-offset: 2px; }
.tb-check { margin: 0 4px; }
.tb-hint { flex-basis: 100%; text-align: center; font-size: .82rem; color: var(--muted-fg, #bbb); }
body.idle .tool-bar { opacity: 1; }

.zoom-chip { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 34; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px; background: rgba(16,11,9,.9); border: 1px solid var(--border); }
.zoom-chip[hidden] { display: none; }
body.has-init .zoom-chip { top: 200px; }
#zoom-level { min-width: 3ch; text-align: center; font-weight: 600; }

.tv-calib { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 24px; background: rgba(0,0,0,.85); color: #fff; text-align: center; }
.tv-calib[hidden] { display: none; }
.calib-card { border: 3px dashed var(--accent-hi, #F0C060); border-radius: 4%/6%; display: grid; place-items: center; font-size: 18px; }
.tv-calib p { max-width: 32rem; font-size: clamp(16px, 1.6vw, 26px); margin: 0; }
.sound-tap { position: absolute; z-index: 6; bottom: 12vh; left: 50%; transform: translateX(-50%); }
.sound-tap[hidden] { display: none; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; margin: .3rem 0; }
.seg label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); cursor: pointer; }
.seg label:has(input:checked) { border-color: var(--accent-hi, #F0C060); background: color-mix(in srgb, var(--accent, #E05010) 25%, transparent); }
.inch-setup { margin: .4rem 0 .8rem; }
.saved-games { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: 6px; }
.saved-games li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sg-name { display: grid; min-width: 0; }
.sg-name small { color: var(--muted-fg, #aaa); font-size: .78rem; }
.sg-actions { display: flex; gap: 4px; }
.spinner { pointer-events: none; }

/* ---------- phone views (host remote, player view) ---------- */
body.phone-view { --stage-h: min(56.25vw + 52px, 50vh); }
body.phone-view .stage { inset: 0 0 auto 0; height: var(--stage-h); }
body.phone-view .hud-bottom { display: none; }
body.phone-view.idle .hud-top { opacity: 1; transform: none; }
.phone-sheet { position: fixed; left: 0; right: 0; bottom: 0; top: var(--stage-h, 44vh); z-index: 6; overflow-y: auto; padding: 12px max(14px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); background: linear-gradient(180deg, #17100d, #0a0807); border-top: 1px solid var(--border); }
.phone-sheet[hidden] { display: none; }
body.phone-view .init-bar { top: calc(var(--stage-h) - 8px); transform: translate(-50%, -100%); }
body.phone-view .tool-bar { bottom: auto; top: calc(var(--stage-h) + 8px); }
body.phone-view .zoom-chip { top: calc(var(--stage-h) - 52px); }
.ps-exit { float: right; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.ps-now { display: grid; margin-bottom: 10px; }
.ps-now small, .ps-label { color: var(--muted-fg, #aaa); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin: 12px 0 6px; }
.ps-now strong { font-family: var(--font-display); font-size: 1.15rem; }
.ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ps-btn { min-height: 56px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: inherit; font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer; }
.ps-btn.on { border-color: var(--accent-hi, #F0C060); background: color-mix(in srgb, var(--accent, #E05010) 28%, transparent); }
.ps-btn.primary { background: var(--accent, #E05010); border-color: transparent; color: #fff; }
.ps-btn:disabled { opacity: .45; cursor: default; }
.ps-dice { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ps-die { min-height: 52px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: inherit; font: inherit; font-weight: 700; cursor: pointer; padding: 0; }
.ps-last { margin: 10px 0 0; }
.ps-last strong { font-size: 1.4rem; color: var(--accent-hi, #F0C060); }
.ps-last span { color: var(--muted-fg, #aaa); font-size: .85rem; }
.ps-turn { padding: 12px 14px; border-radius: 14px; background: var(--accent, #E05010); color: #fff; font-weight: 700; font-size: 1.2rem; text-align: center; margin-bottom: 10px; animation: pulse 1.6s ease-in-out infinite; }
.ps-next { color: var(--muted-fg, #aaa); margin-bottom: 8px; }
.ps-token { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); margin-bottom: 8px; }
.ps-face { flex: 0 0 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--c); background-size: cover; background-position: center; }
.ps-token-main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.ps-hp { display: flex; align-items: center; gap: 8px; }
.ps-hp-btn { width: 52px; height: 48px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: inherit; font-size: 1.4rem; cursor: pointer; }
.ps-hp-val { flex: 1; text-align: center; font-weight: 700; font-size: 1.1rem; }
.ps-conds { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ps-cond { font-size: .85rem; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.08); }
.ps-link { background: none; border: 0; color: var(--accent-hi, #F0C060); text-decoration: underline; font: inherit; cursor: pointer; padding: 4px 0; }
@media (prefers-reduced-motion: reduce) { .ps-turn { animation: none; } }

/* ---- Walls and areas editor (/layouts) ---- */
.layouts-page .le-key { display: flex; gap: 8px; align-items: center; }
.layouts-page .le-key label { color: var(--muted-fg); font-size: 14px; }
.layouts-page .le-key input { background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; min-width: 220px; font: inherit; }
.le-main { display: grid; grid-template-columns: 220px minmax(0, 1fr) 260px; gap: 16px; padding: 12px 16px 24px; align-items: start; }
.le-maps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.le-filter { width: 100%; margin: 0 0 10px; background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; font: inherit; }
.le-maps ul { max-height: 70vh; overflow: auto; }
.le-count { color: var(--muted-fg); font-size: 14px; margin: 0 0 10px; }
.le-map { width: 100%; display: flex; justify-content: space-between; gap: 8px; align-items: center; text-align: left; background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px; font: inherit; cursor: pointer; }
.le-map.active { border-color: var(--accent); }
.le-badge { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--muted); color: var(--muted-fg); white-space: nowrap; }
.le-badge.reviewed { background: #1F4D2E; color: #BFF0CF; }
.le-badge.auto { background: #163A44; color: #B5E6F2; }
.le-badge.reported { background: #5A1E1E; color: #FFC9C9; }
.le-badge.proposed { background: #4D3A12; color: #F6DCA0; }
.le-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.le-tools h1 { font-family: var(--font-display); font-size: 22px; margin: 0 8px 0 0; }
.le-tool-group { display: flex; gap: 6px; }
.le-tool-group .btn[aria-pressed="true"] { border-color: var(--accent-hi); color: var(--accent-hi); }
.le-hint { color: var(--muted-fg); font-size: 14px; }
.le-stage { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-md); overflow: hidden; }
.le-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.le-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.le-stage.drawing svg { cursor: crosshair; }
.le-piece { cursor: pointer; }
.le-piece .le-shape { fill: none; stroke-width: 5; vector-effect: non-scaling-stroke; }
.le-piece .le-hit { fill: none; stroke: transparent; stroke-width: 18; vector-effect: non-scaling-stroke; }
.le-area .le-hit { fill: transparent; }
.le-wall .le-shape { stroke: #F0C060; }
.le-door .le-shape { stroke: #3B9BFF; stroke-width: 7; }
.le-light .le-shape { fill: rgba(255, 204, 102, .2); stroke: #FFCC66; stroke-width: 2; }
.le-area .le-shape { stroke-width: 3; }
.le-area.t-no-go .le-shape { fill: rgba(220, 40, 40, .32); stroke: #FF5A5A; }
.le-area.t-hazard .le-shape { fill: rgba(255, 110, 20, .32); stroke: #FF8A3D; }
.le-area.t-water .le-shape { fill: rgba(40, 140, 240, .32); stroke: #5AB0FF; }
.le-area.t-difficult .le-shape { fill: rgba(240, 190, 40, .26); stroke: #F0C040; }
.le-piece.pending .le-shape { stroke-dasharray: 10 6; }
.le-piece.rejected { opacity: .25; }
.le-piece.selected .le-shape { stroke: #FFFFFF; }
.le-handle { fill: #FFFFFF; stroke: #000; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: grab; }
.le-floor { fill: rgba(220, 40, 40, .3); pointer-events: none; }
.le-floor.pending { fill: rgba(220, 40, 40, .22); }
.le-floor.rejected { fill: rgba(220, 40, 40, .07); }
.le-stage.painting svg { cursor: cell; }
.le-stage.painting .le-piece { pointer-events: none; }
.le-paint { display: flex; gap: 6px; margin-top: 6px; }
.le-paint .btn { padding: 6px 10px; font-size: 14px; }
.le-paint .btn[aria-pressed="true"] { border-color: var(--accent-hi); color: var(--accent-hi); }
.le-floor-new { width: 100%; }
.le-drawing { fill: rgba(255, 255, 255, .15); stroke: #FFFFFF; stroke-width: 3; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
polyline.le-drawing { fill: none; }
.le-actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 10px; }
.le-status { margin-right: auto; color: var(--muted-fg); font-size: 14px; }
.le-pieces h2 { font-family: var(--font-display); font-size: 16px; margin: 14px 0 6px; }
.le-row { display: flex; gap: 6px; align-items: center; padding: 4px; border-radius: var(--r-sm); }
.le-row.selected { background: var(--muted); }
.le-row.rejected .le-row-name { text-decoration: line-through; color: var(--muted-fg); }
.le-row-name { flex: 1; text-align: left; background: none; border: 0; color: var(--fg); font: inherit; padding: 6px 4px; cursor: pointer; min-height: 32px; }
.le-row select { background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 4px; font: inherit; font-size: 14px; }
.le-yes, .le-no { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); color: var(--muted-fg); cursor: pointer; font-size: 15px; }
.le-yes[aria-pressed="true"] { background: #1F4D2E; color: #BFF0CF; border-color: #2E7A48; }
.le-no[aria-pressed="true"] { background: #5A1E1E; color: #FFC9C9; border-color: #8A2E2E; }
.le-empty { color: var(--muted-fg); font-size: 14px; }
.le-help { margin-top: 16px; color: var(--muted-fg); font-size: 14px; }
.le-help ul { padding-left: 18px; }
@media (max-width: 1000px) { .le-main { grid-template-columns: 1fr; } }

/* Walls and areas, shown faintly while a token moves */
.terrain-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; opacity: 0; transition: opacity var(--t-med) var(--ease-out); }
.terrain-layer.on { opacity: 1; }
.terrain-layer .ter-area { stroke-width: 2px; vector-effect: non-scaling-stroke; }
.terrain-layer .t-no-go { fill: rgba(220, 40, 40, .22); stroke: rgba(255, 90, 90, .8); }
.terrain-layer .t-hazard { fill: rgba(255, 110, 20, .22); stroke: rgba(255, 138, 61, .8); }
.terrain-layer .t-water { fill: rgba(40, 140, 240, .2); stroke: rgba(90, 176, 255, .8); }
.terrain-layer .t-difficult { fill: rgba(240, 190, 40, .16); stroke: rgba(240, 192, 64, .7); stroke-dasharray: 6 4; }
.terrain-layer .ter-floor { stroke: none; }
.terrain-layer .ter-wall { fill: none; stroke: #F0C060; stroke-width: 4px; vector-effect: non-scaling-stroke; }
.terrain-layer .ter-door { fill: none; stroke: #3B9BFF; stroke-width: 5px; vector-effect: non-scaling-stroke; }
.stage .map-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
body.still-map #motion-btn { display: none; }

/* Members' maps the viewer's tier doesn't cover */
.locked-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; width: min(420px, calc(100% - 32px)); padding: 22px 24px; border-radius: var(--r-md); background: rgba(10, 8, 7, .9); border: 1px solid var(--border); box-shadow: var(--shadow-2); text-align: center; display: grid; gap: 10px; justify-items: center; }
.locked-card[hidden] { display: none; }
.locked-tier { margin: 0; display: inline-flex; gap: 6px; align-items: center; font-family: var(--font-display); font-size: 20px; color: #F6DCA0; }
.locked-card p { margin: 0; }
body.map-locked #tap-to-play { display: none; }
.pick-lock { font-weight: 400; }
.btn.small { min-height: 36px; padding: .3rem .8rem; font-size: .9rem; }