/* Shared TFRA identity. Loaded after view CSS; card geometry and semantic game
   indicators (mana colors, stat changes, targeting, Flex) remain owned by their views. */
:root {
  --tfra-bg: #141516;
  --tfra-surface: #1d1e1e;
  --tfra-raised: #262624;
  --tfra-input: #151615;
  --tfra-line: #48463f;
  --tfra-ink: #eee9de;
  --tfra-muted: #b1ada4;
  --tfra-amber: #e6b66c;
  --tfra-ember: #a3392d;
  --tfra-ember-hover: #ba4637;
  --tfra-display: Georgia, 'Times New Roman', serif;
  --tfra-font: 'Segoe UI', Inter, Arial, sans-serif;
  --tfra-mat: radial-gradient(ellipse at 45% 40%, #2d2b26 0%, #211f1b 58%, #191713 100%);
  --accent: var(--tfra-amber);
  --muted: var(--tfra-muted);
  --line: var(--tfra-line);
  color: var(--tfra-ink);
  background: var(--tfra-bg);
  font-family: var(--tfra-font);
  accent-color: var(--tfra-amber);
  scrollbar-color: #625c50 var(--tfra-bg);
}
body { color: var(--tfra-ink); }
button {
  color: var(--tfra-ink);
  background: var(--tfra-raised);
  border-color: var(--tfra-line);
}
button:hover { background: #36342e; border-color: #8d8067; }
input, select, textarea {
  color: var(--tfra-ink);
  background: var(--tfra-input);
  border-color: #625d51;
}
input::placeholder, textarea::placeholder { color: #a39e94; }
a { color: var(--tfra-amber); text-underline-offset: 3px; }
a:hover { color: #ffdaa0; }
label, small, .muted { color: var(--tfra-muted); }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--tfra-amber); outline-offset: 3px;
}
.primary {
  color: #fff4e6;
  background: var(--tfra-ember);
  border-color: #d0875d;
}
.primary:hover { background: var(--tfra-ember-hover); border-color: var(--tfra-amber); }
.active { color: var(--tfra-amber); border-color: var(--tfra-amber); }
h1, h2 { font-family: var(--tfra-display); }
.tfra-mark { display: block; width: 28px; height: 28px; flex: 0 0 auto; object-fit: contain; }

/* Branding occupies existing headers, never a new strip above the tabletop. */
.entry { background: var(--tfra-mat); }
.entry-brand { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.entry-brand .tfra-mark { width: 62px; height: 62px; }
.entry .entry-brand h1 { margin: 0; font-size: 34px; color: var(--tfra-ink); }
.entry .eyebrow { color: var(--tfra-amber); font-size: 10px; letter-spacing: .15em; margin-bottom: 20px; }
.entry-panel { border-top: 1px solid #a87b434d; padding-top: 24px; }
.entry-panel a { font-weight: 600; }
.waiting-room, .draft-layout, .builder { background: var(--tfra-mat); }
.waiting-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; font: 20px var(--tfra-display); }
.flow-heading { display: flex; align-items: center; gap: 14px; min-width: 0; }
.flow-header, .deck-header, .draft-footer { border-color: var(--tfra-line); }
.flow-header small { color: var(--tfra-amber); }
.draft-footer, .draft-pool, .deck-pane { background: var(--tfra-surface); border-color: var(--tfra-line); }
.catalog-pane { border-right-color: var(--tfra-line); }
.flex-tray { background: #29232c; }
.build-warnings { color: #ebc694; }

/* Quiet stone play surface with distinct gameplay status colors. */
.table, .table .play-space { background: var(--tfra-mat); }
.rail { background: #201e1a; border-color: var(--tfra-line); }
.rail-top { border-bottom-color: var(--tfra-line); gap: 8px; }
.rail-top .tfra-mark { width: 22px; height: 22px; }
.rail.collapsed .tfra-mark { display: none; }
.room-code { color: var(--tfra-muted); }
.rail .section-line > b, .turn-summary > span { color: var(--tfra-amber); }
.log p { color: var(--tfra-muted); border-bottom-color: #373a3b; }
.rail-content > .turn-summary::before, .rail .stack::before { background: #aca18a40; }
.stack-placeholder { background: #18151022; border-color: #756b59; }
.opponent-tab, .opponent-step { background: #202527; border-color: #505a5d; color: #cccac2; }
.opponent-tab:hover, .opponent-step:hover { background: #323837; }
.opponent-tab[aria-selected=true] { background: #383a34; border-color: var(--tfra-amber); color: #fff3d9; }

/* Every modal, picker and tray shares the same surface, including inspection. */
.drawer, .compact-panel.drawer, .panel-label-tool.drawer, .panel-player.compact-panel.drawer,
.choice-panel, .library-helper {
  color: var(--tfra-ink); background: var(--tfra-surface); border-color: #75664f;
}
.drawer h3, .choice-panel h3 { color: var(--tfra-amber); }
.label-option:hover, .label-option:focus-visible { background: #39362e; }
.restore-tray { background: var(--tfra-raised); border-color: #a18a62; }
#toast { background: #f0d9af; color: #231d16; }

/* Standalone gallery: modern sans-serif controls with restrained book headings. */
.gallery { background: var(--tfra-mat); min-height: 100dvh; }
.gallery > header { background: #141617; border-color: var(--tfra-line); gap: 20px; }
.tfra-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.tfra-brand span { color: var(--tfra-ink); font: 17px/1.15 var(--tfra-display); }
.gallery > header h1 { font-size: 23px; font-weight: 400; }
.gallery > header .back-link { font-size: 12px; white-space: nowrap; }
.gallery #sidebar { border-left: 2px solid #bd843d80; padding-left: 14px; }
.gallery #filters > label, .gallery #stats h2 { color: var(--tfra-amber); }
.gallery #filters option:checked { background: #514734; color: #fff0d3; }
.gallery #filters input:focus, .gallery #filters select:focus { border-color: var(--tfra-amber); }
.gallery #status, .gallery .gallery-density, .gallery .card small,
.gallery .filter-help, .gallery #stats > small, .gallery .stat-rows dd span { color: var(--tfra-muted); }
.gallery .gallery-density > label { color: var(--tfra-ink); }
.gallery .stat-rows dt { color: #c8c2b5; }
.gallery #stats h2 { font: 600 13px var(--tfra-display); letter-spacing: .07em; }
.gallery .stat-rows > div { border-color: #55504566; }
.gallery dialog { color: var(--tfra-ink); background: var(--tfra-surface); border-color: #75664f; }
.gallery .art { background-color: var(--tfra-surface); border-color: #57534a; }
.gallery .fallback, .gallery .flavor { color: var(--tfra-muted); }
.gallery dl { border-color: var(--tfra-line); }
.gallery dt { color: var(--tfra-amber); }
.gallery #reset { border-color: #976a46; }
.gallery .motion-switch input, .gallery .gallery-density input { accent-color: var(--tfra-amber); }

/* The outer frame and minimum-size notice belong to the same visual system. */
html:has(body.stage), body.stage { background: var(--tfra-bg); color: var(--tfra-ink); font-family: var(--tfra-font); }
.stage #small-screen { background: var(--tfra-mat); }
.stage #small-screen .tfra-mark { width: 48px; height: 48px; }
.stage p, .stage output { color: var(--tfra-muted); }
.stage button { background: var(--tfra-raised); border-color: #8d8067; }

@media (max-width: 760px) {
  .gallery > header { gap: 12px; }
  .gallery > header .tfra-brand { flex: 1; }
  .gallery > header h1 { flex: 0 0 auto; font-size: 21px; }
  .gallery > header .back-link { margin-right: auto; }
}
@media (max-width: 420px) {
  .entry .entry-brand h1 { font-size: 30px; }
  .entry-brand .tfra-mark { width: 48px; height: 48px; }
  .gallery .tfra-brand span { font-size: 15px; }
  .gallery .tfra-brand .tfra-mark { width: 25px; height: 25px; }
}
/* Tabletop bookkeeping follows the warm identity, including interaction states. */
.table .player-board .player-edge.health-panel {
  background: linear-gradient(155deg, #302d26ee, #1e1e1bf5);
  border-color: #8b78564d;
}
.table .player-board.active-turn .player-edge.health-panel { border-color: #c5a16a99; }
.table .health-life .health-life-step { color: var(--tfra-muted); }
.table .health-life button:hover { background: #c6aa7824; color: #fff2d8; }
.table .health-damage button { background: #18171490; border-color: #897b6255; color: var(--tfra-muted); }
.table .health-damage .health-damage-empty { background: transparent; border-color: transparent; }
.table .health-damage .health-damage-more { background: #302b22; box-shadow: -3px 0 3px #211f1a; }
.health-detail-totals > div, .health-source { background: #302c2488; border-color: #8d7c5e40; }
.health-stepper button, .health-five button, .health-statuses button {
  background: var(--tfra-raised); border-color: #76664c; color: var(--tfra-ink);
}
.health-stepper button:hover, .health-five button:hover { background: #464034; }
.health-statuses button[aria-pressed=true], .health-status-readonly { background: #54452b66; border-color: #b8a474; color: #dfc992; }
.health-detail-totals label, .health-detail-totals label small, .health-source-name small,
.health-damage-heading small, .health-damage-note, .health-custom { color: var(--tfra-muted); }
.health-custom-counters, .health-custom { border-color: #8d7c5e40; }
.health-damage { scrollbar-color: #786c55 transparent; }

.table .zone-count-badge, .table .battlefield-stats, .field-piece > .token-group-count,
.marker-chip, .stat-hover-details {
  background: #302b22; border-color: #8b7856; color: var(--tfra-ink);
}
.table .battlefield-stats > button:is(.power-value,.toughness-value):hover { background: #514530; }
html:not(.stat-ctrl-held) .battlefield-stats:has(>button:is(.power-value,.toughness-value,.stat-gap):hover)>button:is(.power-value,.toughness-value),
html.stat-ctrl-held .battlefield-stats>button:is(.power-value,.toughness-value):hover,
html.stat-ctrl-held .battlefield-stats:has(>.stat-gap:hover)>button:is(.power-value,.toughness-value) {
  background: #514530!important; border-color: var(--tfra-amber);
}
@keyframes stat-box-pump {
  0%,100% { color: var(--tfra-ink); background: transparent; }
  50% { color: #fff4d2; background: #6f5735; }
}
.stat-counter-row button, .stat-counter-row strong { background: #e8dfcc; color: #30281d; }
.stat-counter-row button:hover, .stat-counter-row button:focus-visible { background: #d4b982; }
.counter-action-row:hover, .counter-action-row:focus-within,
.panel-tools .counter-directions button:hover, .panel-tools .counter-directions button:focus-visible { background: #484033; }

.table :is(.hand-action-buttons,.zone-strip) > button,
.table .player-board .zone-add, .resource-controls > button,
.resource-controls > .floating-mana, .zone-card-actions button, .card-tools button, .ability-indicator {
  background: #292820; border-color: #7e7056; color: var(--tfra-ink);
}
.table :is(.hand-action-buttons,.zone-strip) > button:hover,
.table .player-board .zone-add:hover, .resource-controls > button:hover,
.zone-card-actions button:hover, .card-tools button:is(:hover,:focus-visible),
.card-tools [aria-expanded=true] {
  background: #484033; border-color: var(--tfra-amber);
}
.table .hand-action-buttons > .turn-button { background: #443923; border-color: #aa8753; color: #f2d6a3; }
.table .hand-action-buttons > .turn-button:hover:not(:disabled) { background: #65502e; border-color: #e6b66c; }
.stack-fan .stack-ability-art { background: #28251f; border-color: #a68b60; }
.stack-ability-art header { background: #443923; border-color: #8b7856; color: #f2d6a3; }
.ability-source-art { background: #1e1e1b; }
.table .opponent-hand > small { background: #302b22e8; border-color: #8b7856; color: var(--tfra-ink); }
.table .health-danger, .table .health-danger button, .health-danger, .health-danger output { color: #f5a197; }
#hover-preview { background: var(--tfra-surface); border-color: #8b7856; }
#hover-card-details section { background: linear-gradient(145deg,#343027fa,#211f1afa); border-color: #8b7856; box-shadow: inset 0 1px 0 #ead8b220,0 4px 12px #0008; }
#hover-card-details { color: var(--tfra-ink); }
.zone-drawer.drawer { background: var(--tfra-surface); }
.panel-tools button:hover { background: #484033; }
.stat-clear { background: #443923; border-color: #8b7856; }
.pump-menu-row button:focus-visible, .panel-tools .counter-directions button:focus-visible { outline-color: var(--tfra-amber); }
/* Mirrored hand bands use a neutral warm shade, not the old navy overlay. */
.table .hand::after, .table .opponent > .field::after { background: rgba(18,16,12,.2); }