:root {
  
  --bg: #08080e;
  --bg-panel: #101019;
  --bg-input: #050509;
  --border: #242637;
  --text: #e9e7f2;
  --text-dim: #9a9cb4;
  --accent: #a77bff;
  --accent-hover: #c0a1ff;
  --accent-dim: #4b2f86;
  --on-accent: #0a0810; 
  --ok: #3fcf8e;
  
  --warn: #e8b34a;
  
  --error: #ff5f6b;
  --danger: #d9534f; 
  
  --neon-green: #39ff6a; 
  --neon-red: #ff3b3b; 
  --neon-blue: #3fd8ff; 
  --neon-orange: #ff8c1a; 
  --neon-purple: #b46bff; 

  
  --neon-yellow: #ffd93f;
  --neon-indigo: #7b8cff;
  --neon-magenta: #ff5ec4;
  --neon-lime: #95ff33;
  
  --neon-teal: #33ffc4;
  --firefly-glow: #d4ff4a; 

  
  --status-online: #3ba55c;
  --status-away: #f0b232;
  --status-dnd: #ed4245;
  --status-offline: #80848e;

  
  --mana-w: #ffe066;
  --mana-u: #2fb8ff;
  --mana-b: #b565ff;
  --mana-r: #ff3b3b;
  --mana-g: #39ff6a;
  --mana-c: #c7d0dc;

  
  --mana-sym-w: #f5ecc0;
  --mana-sym-u: #57c4ff;
  --mana-sym-b: #b98cff;
  --mana-sym-r: #ff7a6b;
  --mana-sym-g: #5fe488;
  --mana-sym-generic: #b3b8bf;
  --mana-sym-ink: #14161a;
  
  --radius: 2px;

  
  --accent-rgb: 167, 123, 255;
  --error-rgb: 255, 95, 107;
  --ok-rgb: 63, 207, 142;
  --warn-rgb: 232, 179, 74;
  --danger-rgb: 217, 83, 79;

  
  
  
  --app-chrome-v: calc(
    var(--space-sm) * 2 + var(--control-h) + 1px
    + var(--space-lg) * 2 + var(--social-dock-h) + 15px
    + var(--space-xl) * 2);

  --track-stencil: 0.14em;

  
  --grid: color-mix(in srgb, var(--text) 4%, transparent);
  --grid-major: color-mix(in srgb, var(--text) 7%, transparent);
  --border-lit: color-mix(in srgb, var(--text) 34%, var(--border));
  
  --star: color-mix(in srgb, var(--text) 62%, transparent);
  --star-dim: color-mix(in srgb, var(--text) 30%, transparent);
  --nebula: color-mix(in srgb, var(--accent) 17%, transparent);
  
  --orrery: color-mix(in srgb, var(--text) 13%, transparent);
  --mono-face: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 6px;
  --space-sm: 8px;
  
  --space-snug: 10px;
  --space-md: 12px;
  --space-lg: 14px;
  --space-xl: 16px;
  --space-2xl: 20px;
  --space-3xl: 24px;

  
  --font-3xs: 0.7143rem;
  --font-2xs: 0.7857rem;
  --font-xs: 0.8571rem;
  --font-sm: 0.9286rem;
  --font-md: 1rem;
  --font-lg: 1.0714rem;
  --font-xl: 1.1429rem;
  --font-2xl: 1.2857rem;
  --font-3xl: 1.5714rem;
  --font-4xl: 2rem;
  --font-5xl: 2.5714rem;

  
  --radius-xs: 1px;
  --radius-sm: 2px;
  --radius-lg: 4px;
  --radius-pill: 999px;

  
  --control-h-sm: 26px;
  
  --control-h: 32px;
  --control-h-lg: 44px;

  
  --social-dock-h: 44px;

  
  --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), 0.45);

  
  --hairline: inset 0 0 0 0.5px rgba(255, 255, 255, 0.07), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
  --elev-1: var(--hairline), 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 12px rgba(0, 0, 0, 0.16);
  --elev-2: var(--hairline), 0 2px 4px rgba(0, 0, 0, 0.22), 0 8px 22px rgba(0, 0, 0, 0.28);
  --elev-3: var(--hairline), 0 8px 16px rgba(0, 0, 0, 0.3), 0 24px 56px rgba(0, 0, 0, 0.42);

  --shadow-modal: var(--elev-3);

  
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out-back: cubic-bezier(.18, .89, .32, 1.09);
  --transition-fast: 180ms var(--ease);
  --transition-base: 280ms var(--ease);
  --transition-slow: 420ms var(--ease);

  
  --hair: #cfc9dd;
  --wood: #8a6a45;
  --wood-dark: #5f4429;
  --wood-light: #a98454;
  --paper: #efe8d8;
  --lens: #6b6b78;
  --leather: #6b2f2c;
  --leather-dark: #481f1d;
  --flame: #ffb347;

  
  --neon: #7fd4ff;
}



:root[data-theme="steampunk"] {
  --bg: #1a1816;
  --bg-panel: #24211d;
  --bg-input: #110f0e;
  --border: #463c2e;
  --text: #f2e9db;
  --text-dim: #ab9c86;
  --accent: #c2763c;
  --accent-hover: #d68d52;
  --accent-dim: #663a1c;
  --on-accent: #1a1816;
  --ok: #4fb08a;
  --warn: #e3a93c;
  --error: #e3776c;
  --accent-rgb: 194, 118, 60;
  --error-rgb: 227, 119, 108;
  --ok-rgb: 79, 176, 138;
  --warn-rgb: 227, 169, 60;
  --neon: #4794eb;
}

:root[data-theme="signet"] {
  --bg: #0d1b33;
  --bg-panel: #152742;
  --bg-input: #091324;
  --border: #2c4874;
  --text: #eaf0fa;
  --text-dim: #9db2d2;
  --accent: #d8ad5c;
  --accent-hover: #efc984;
  --accent-dim: #6d5429;
  --on-accent: #0d1b33;
  --ok: #52b184;
  
  --warn: #e0882f;
  --error: #e46c67;
  --accent-rgb: 216, 173, 92;
  --error-rgb: 228, 108, 103;
  --ok-rgb: 82, 177, 132;
  --warn-rgb: 224, 136, 47;
  
  --neon: #ef6bff;
}


:root[data-theme="planeswalker"] {
  --bg: #121018;
  --bg-panel: #1a1626;
  --bg-input: #0e0c14;
  --border: #332c48;
  --text: #eeecf7;
  --text-dim: #a49dc2;
  --accent: #8b6ef2;
  --accent-hover: #a68bf7;
  --accent-dim: #4a3f7a;
  --on-accent: #0e0c14;
  --ok: #4caf7d;
  --warn: #e0a63c;
  --error: #e56b6b;
  --accent-rgb: 139, 110, 242;
  --error-rgb: 229, 107, 107;
  --ok-rgb: 76, 175, 125;
  --warn-rgb: 224, 166, 60;
  
  --neon: #4dff8a;
}


:root[data-theme="foil"] {
  --bg: #1c1811;
  --bg-panel: #241f16;
  --bg-input: #171307;
  --border: #40361f;
  --text: #ece3d0;
  --text-dim: #ac9c81;
  --accent: #b9915a;
  --accent-hover: #cba572;
  --accent-dim: #5f4d2e;
  --on-accent: #1c1811;
  --ok: #93a86a;
  --warn: #cf9752;
  --error: #c98170;
  --accent-rgb: 185, 145, 90;
  --error-rgb: 201, 129, 112;
  --ok-rgb: 147, 168, 106;
  --warn-rgb: 207, 151, 82;
  
  --neon: #2ff0e0;
}


:root[data-theme="eldrazi"] {
  --bg: #101718;
  --bg-panel: #172223;
  --bg-input: #0c1213;
  --border: #2c3f41;
  --text: #dceaea;
  --text-dim: #93aeae;
  --accent: #4fb0b5;
  --accent-hover: #6cc3c7;
  --accent-dim: #285356;
  --on-accent: #101718;
  --ok: #5cad8a;
  --warn: #cf9c4c;
  --error: #cf6d69;
  --accent-rgb: 79, 176, 181;
  --error-rgb: 207, 109, 105;
  --ok-rgb: 92, 173, 138;
  --warn-rgb: 207, 156, 76;
  
  --neon: #ff4fe0;
}


:root[data-mode="light"] {
  
  --bg: #f4f2ee;
  --bg-panel: #ffffff;
  --bg-input: #faf8f4;
  --border: #d7d3ca;
  --text: #1b1a24;
  --text-dim: #5c5a68;
  --accent: #6b3fc4;
  
  --accent-hover: #7d4fd8;
  --accent-dim: #d9caf5;
  --on-accent: #ffffff;
  --ok: #1a7a3a;
  --warn: #7d6a00; 
  --error: #a52a3a;
  --accent-rgb: 107, 63, 196;
  --error-rgb: 165, 42, 58;
  --ok-rgb: 26, 122, 58;
  --warn-rgb: 125, 106, 0;
  
  --neon: #0d5fb0;
  
  --neon-purple: #7a2fd0;
  --hair: #7d5326;

  
  --neon-blue: #007a99;
  --neon-orange: #b05800;
  --neon-green: #008220;
  --neon-red: #e00000;
  --firefly-glow: #5b7800;

  
  --neon-yellow: #8a6a00;
  --neon-indigo: #2a3ec9;
  --neon-magenta: #b0007a;
  --neon-lime: #3e7f00;
  
  --neon-teal: #007a5b;

  
  --mana-w: #755e00;
  --mana-u: #006599;
  --mana-b: #7a00eb;
  --mana-r: #b80000;
  --mana-g: #006e1b;
  --mana-c: #496283;

  
  --hairline: inset 0 0 0 0.5px rgba(18, 12, 40, 0.06);
  --elev-1: var(--hairline), 0 1px 2px rgba(34, 28, 53, 0.05), 0 2px 10px rgba(34, 28, 53, 0.05);
  --elev-2: var(--hairline), 0 2px 4px rgba(34, 28, 53, 0.06), 0 8px 20px rgba(34, 28, 53, 0.09);
  --elev-3: var(--hairline), 0 8px 16px rgba(34, 28, 53, 0.1), 0 24px 52px rgba(34, 28, 53, 0.16);
}



:root[data-theme="steampunk"][data-mode="light"] {
  --bg: #f6f1e7;
  --bg-panel: #ffffff;
  --bg-input: #ffffff;
  --border: #e0d5c0;
  --text: #2a2118;
  --text-dim: #6f6151;
  --accent: #96541f;
  --accent-hover: #7f4718;
  --accent-dim: #ecd9c4;
  --on-accent: #ffffff;
  --ok: #2a7052;
  --warn: #8a6410;
  --error: #b0413c;
  --accent-rgb: 150, 84, 31;
  --error-rgb: 176, 65, 60;
  --ok-rgb: 42, 112, 82;
  --warn-rgb: 138, 100, 16;
  --neon: #1a5fa8;
}

:root[data-theme="signet"][data-mode="light"] {
  --bg: #f1f5fc;
  --bg-panel: #ffffff;
  --bg-input: #ffffff;
  --border: #ccd9ef;
  --text: #15243f;
  --text-dim: #55688c;
  --accent: #8a6420;
  --accent-hover: #936c24;
  --accent-dim: #e7d8b6;
  --on-accent: #ffffff;
  --ok: #2b8254;
  --warn: #9c4d08;
  --error: #c74848;
  --accent-rgb: 138, 100, 32;
  --error-rgb: 199, 72, 72;
  --ok-rgb: 43, 130, 84;
  --warn-rgb: 156, 77, 8;
  --neon: #a41fb8;
  --hair: #3f5a86;
}


:root[data-theme="planeswalker"][data-mode="light"] {
  --bg: #f5f3fb;
  --bg-panel: #ffffff;
  --bg-input: #ffffff;
  --border: #d9d3ee;
  --text: #221c35;
  --text-dim: #6b6285;
  --accent: #6b4fd6;
  --accent-hover: #7f66e0;
  --accent-dim: #cfc3f2;
  --on-accent: #ffffff;
  --ok: #2f8f5c;
  --warn: #9c6708;
  --error: #c94f4f;
  --accent-rgb: 107, 79, 214;
  --error-rgb: 201, 79, 79;
  --ok-rgb: 47, 143, 92;
  --warn-rgb: 156, 103, 8;
  
  --neon: #15773f;
  --hair: #8039a3;
}

:root[data-theme="foil"][data-mode="light"] {
  --bg: #faf6ec;
  --bg-panel: #ffffff;
  --bg-input: #ffffff;
  --border: #e6dcc0;
  --text: #2b2313;
  --text-dim: #7a6b48;
  --accent: #86642a;
  --accent-hover: #977231;
  --accent-dim: #e8d9b5;
  --on-accent: #ffffff;
  --ok: #5f7a3a;
  --warn: #916017;
  --error: #a8503f;
  --accent-rgb: 134, 100, 42;
  --error-rgb: 168, 80, 63;
  --ok-rgb: 95, 122, 58;
  --warn-rgb: 145, 96, 23;
  
  --neon: #0d7a75;
  --hair: #8a7550;
}

:root[data-theme="eldrazi"][data-mode="light"] {
  --bg: #eef6f6;
  --bg-panel: #ffffff;
  --bg-input: #ffffff;
  --border: #cfe3e3;
  --text: #12262a;
  --text-dim: #4d6c6f;
  --accent: #1b7075;
  --accent-hover: #228086;
  --accent-dim: #bfe1e2;
  --on-accent: #ffffff;
  --ok: #337a5c;
  --warn: #8f6519;
  --error: #ad5450;
  --accent-rgb: 27, 112, 117;
  --error-rgb: 173, 84, 80;
  --ok-rgb: 51, 122, 92;
  --warn-rgb: 143, 101, 25;
  
  --neon: #9c1f88;
  --hair: #4d7a7d;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

* { box-sizing: border-box; }


* {
  scrollbar-width: thin;
  
  scrollbar-color: color-mix(in srgb, var(--text-dim) 45%, transparent) transparent;
}


.game-board-topbar-scroll,
.game-phase-strip {
  scrollbar-width: auto;
  scrollbar-color: auto;
}



html { font-size: 14px; }

body { font-size: var(--font-sm); }


html[data-font="serif"] { --font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif; }
html[data-font="rounded"] { --font-family: "Trebuchet MS", "Century Gothic", "Segoe UI", sans-serif; }
html[data-font="mono"] { --font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-family, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  
  font-variant-numeric: tabular-nums;
}


body {
  display: flex;
  flex-direction: column;
}


.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg-panel) 92%, var(--text)), var(--bg-panel));
  flex-shrink: 0;
  position: relative;
  
  z-index: 41;
  -webkit-app-region: drag;
}


.app-footer {
  text-align: center;
  padding: var(--space-lg) var(--space-md) calc(var(--space-lg) + var(--social-dock-h));
  font-size: var(--font-2xs);
  color: var(--text-dim);
}

.topbar-title {
  font-weight: 600;
  font-size: var(--font-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}


.title-icon {
  display: inline-block;
  flex: none;
  width: 1.9em;
  height: 1.9em;
  background: url("img/logo-ua.png") center / contain no-repeat;
}

.topbar button { -webkit-app-region: no-drag; }


.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-xl);
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  flex-shrink: 0;
  position: relative;
  
  z-index: 40;
  box-shadow: 0 1px 0 var(--border), 0 6px 16px rgba(0, 0, 0, 0.16);
}


.tab {
  position: relative;
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast),
    box-shadow var(--transition-fast);
}

.tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, transparent);
}


#shell-notice {
  margin: var(--space-sm) var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
}


body.is-guest .tab--locked::after {
  
  content: '\1F512 ';
  margin-left: var(--space-2xs);
  font-size: 0.85em;
  
  filter: grayscale(1);
  opacity: 0.8;
}


.tab.active {
  color: var(--text);
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent);
}

.tab.active:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}


.tab.is-building {
  color: var(--text);
  animation: build-tab-text-glow 1.8s ease-in-out infinite;
}


.tab.is-building::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--mana-u);
  border-radius: var(--radius-pill);
  pointer-events: none;
  animation: build-tab-outline-pulse 2.5s linear infinite;
}

@keyframes build-tab-outline-pulse {
  0%, 100% {
    border-color: var(--mana-w);
    box-shadow: 0 0 5px var(--mana-w), 0 0 12px color-mix(in srgb, var(--mana-w) 65%, transparent);
  }
  20% {
    border-color: var(--mana-u);
    box-shadow: 0 0 5px var(--mana-u), 0 0 12px color-mix(in srgb, var(--mana-u) 65%, transparent);
  }
  40% {
    border-color: var(--mana-b);
    box-shadow: 0 0 5px var(--mana-b), 0 0 12px color-mix(in srgb, var(--mana-b) 65%, transparent);
  }
  60% {
    border-color: var(--mana-r);
    box-shadow: 0 0 5px var(--mana-r), 0 0 12px color-mix(in srgb, var(--mana-r) 65%, transparent);
  }
  80% {
    border-color: var(--mana-g);
    box-shadow: 0 0 5px var(--mana-g), 0 0 12px color-mix(in srgb, var(--mana-g) 65%, transparent);
  }
}

@keyframes build-tab-text-glow {
  0%, 100% { text-shadow: 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent); }
  50% { text-shadow: 0 0 8px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 60%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .tab.is-building,
  .tab.is-building::before {
    animation: none;
  }
  .tab.is-building::before {
    border-color: var(--accent);
    box-shadow: 0 0 6px var(--accent);
  }
}



.nav-group {
  position: relative;
  display: flex;
}


.nav-group-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}


.nav-group-caret {
  flex: none;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.7;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-group.is-open > .nav-group-trigger .nav-group-caret {
  transform: rotate(180deg);
  opacity: 1;
}


.nav-group.is-open > .nav-group-trigger:not(.is-active) {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, transparent);
}


.nav-group-trigger.is-active {
  color: var(--text);
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent);
}

.nav-group-trigger.is-active:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}


.nav-menu {
  position: absolute;
  top: calc(100% + var(--space-sm));
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: max(100%, 210px);
  padding: var(--space-2xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  box-shadow: var(--elev-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity var(--transition-fast),
              transform 220ms var(--ease),
              visibility 0s linear 220ms;
}


.nav-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--space-sm) * -1);
  height: var(--space-sm);
}

.nav-group.is-open > .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  
  transition: opacity var(--transition-fast),
              transform 260ms var(--ease-out-back),
              visibility 0s;
}


.nav-menu > .tab {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-snug) var(--space-md);
  border-radius: var(--radius-xs);
  text-align: left;
  
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 150ms var(--ease), transform 150ms var(--ease),
              color var(--transition-fast), background var(--transition-fast),
              box-shadow var(--transition-fast);
}

.nav-group.is-open > .nav-menu > .tab {
  opacity: 1;
  transform: none;
}


.nav-group.is-open > .nav-menu > .tab:nth-child(1) { transition-delay: 20ms; }
.nav-group.is-open > .nav-menu > .tab:nth-child(2) { transition-delay: 45ms; }
.nav-group.is-open > .nav-menu > .tab:nth-child(3) { transition-delay: 70ms; }
.nav-group.is-open > .nav-menu > .tab:nth-child(4) { transition-delay: 95ms; }
.nav-group.is-open > .nav-menu > .tab:nth-child(5) { transition-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  
  .nav-menu,
  .nav-group.is-open > .nav-menu,
  .nav-group.is-open > .nav-menu > .tab { transition-delay: 0s; }
  .nav-menu > .tab { opacity: 1; transform: none; }
}



body.nav-collapsed .nav-drawer .nav-group {
  display: flex;
  flex-direction: column;
}


body.nav-collapsed .nav-drawer .tab.nav-group-trigger { justify-content: space-between; }

body.nav-collapsed .nav-drawer .nav-menu {
  
  position: relative;
  min-width: 0;
  margin: var(--space-3xs) 0 var(--space-2xs) var(--space-md);
  padding: 0 0 0 var(--space-snug);
  border: none;
  border-left: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height var(--transition-base), visibility 0s linear 280ms;
}

body.nav-collapsed .nav-drawer .nav-menu::before { content: none; }

body.nav-collapsed .nav-drawer .nav-group.is-open > .nav-menu {
  
  max-height: 420px;
  visibility: visible;
  transition: max-height var(--transition-base), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  body.nav-collapsed .nav-drawer .nav-menu { transition-delay: 0s; }
}


#app-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}


.content {
  flex: 1;
  overflow: auto;
  padding: var(--space-xl) var(--space-2xl);
  
  overscroll-behavior-y: contain;
}


.tab-panel.active {
  max-width: 1440px;
  margin-inline: auto;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }


@keyframes panel-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}


.tab-panel.active {
  animation: panel-enter var(--transition-slow);
}


@media (prefers-reduced-motion: reduce) {
  .tab-panel.active,
  .modal-overlay,
  .modal-overlay:not(.hidden) .modal {
    animation: none;
  }
  .btn:hover:not(:disabled),
  .btn:active:not(:disabled),
  .home-nav-btn:hover,
  .home-nav-btn:focus-visible {
    transform: none;
  }
}

.two-col {
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap: var(--space-2xl);
  align-items: start;
  height: 100%;
}

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-xl);
  box-shadow: var(--elev-1);
}

.form { display: flex; flex-direction: column; gap: var(--space-lg); }


.form-actions { display: flex; gap: var(--space-snug); align-items: center; }
.form-actions .btn-primary { flex: 1; }


.build-side-extra { display: flex; flex-direction: column; gap: var(--space-lg); }
.build-side-extra:empty { display: none; }


.build-side-charts { display: flex; flex-direction: column; gap: var(--space-lg); }

.field { display: flex; flex-direction: column; gap: var(--space-xs); }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}


.field-label,
.result-heading,
.settings-subheading,
.filter-dropdown-label,
.card-role-heading,
.sw-heading,
.changelog-column-heading,
.combo-section-row td,
.admin-table th {
  
  font-size: var(--font-3xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-stencil);
  color: var(--text-dim);
}

.field-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-dim);
}


.field-hint-error {
  color: var(--error);
}

input[type="text"], input[type="password"], input[type="number"], select, textarea {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  min-height: var(--control-h);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-sm);
  font-family: inherit;
  width: 100%;
  transition: border-color var(--transition-fast), background var(--transition-fast),
    box-shadow var(--transition-fast);
}


input[type="text"]:hover, input[type="password"]:hover, input[type="number"]:hover,
select:hover, textarea:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}


select {
  height: var(--control-h);
  padding-block: 0;
}


textarea {
  resize: vertical;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--font-xs);
  line-height: 1.5;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}


.btn {
  border: none;
  border-radius: var(--radius-sm);
  min-height: var(--control-h);
  padding: var(--space-xs) var(--space-lg);
  font-size: var(--font-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--elev-1);
  transition: background var(--transition-fast), transform var(--transition-fast),
    box-shadow var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast);
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--elev-2);
}


.btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--elev-1);
  transition-duration: 60ms;
}

.btn:disabled { box-shadow: none; }



.btn:focus-visible,
.tab:focus-visible,
.settings-tab:focus-visible,
.view-toggle-btn:focus-visible,
.card-qty-btn:focus-visible,
.collapsible-header:focus-visible,
.card-image-tile:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


:root:not([data-theme]) .result-heading {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
:root:not([data-theme]) .result-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-lit), transparent);
}


:root:not([data-theme]) .btn:focus-visible,
:root:not([data-theme]) .tab:focus-visible,
:root:not([data-theme]) a:focus-visible,
:root:not([data-theme]) button:focus-visible {
  outline-color: var(--warn);
}

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { background: var(--accent-dim); cursor: not-allowed; }

.btn-secondary { background: var(--border); color: var(--text); }

.btn-secondary:hover { background: color-mix(in srgb, var(--text) 18%, var(--border)); }


.btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  box-shadow: none;
}
.btn-ghost:hover { color: var(--text); border-color: var(--text-dim); }
.btn-ghost:hover:not(:disabled), .btn-ghost:active:not(:disabled) { box-shadow: none; }

.file-row { display: flex; align-items: center; gap: var(--space-sm); }
.file-row input { flex: 1; }

.file-name {
  font-size: var(--font-xs);
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}


.field-group { display: flex; flex-direction: column; gap: var(--space-lg); }


.mana-toggle-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; }


.format-toggle {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  min-height: var(--control-h-sm);
  padding: var(--space-2xs) var(--space-md);
  font-size: var(--font-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.format-toggle:hover { color: var(--text); border-color: var(--text-dim); }

.format-toggle.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}



.new-card-badge,
.rating-badge,
.format-badge,
.cf-interpreted-chip,
.game-feed-badge {
  display: inline-block;
  padding: 1px var(--space-xs);
  border-radius: var(--radius-xs);
  font-size: var(--font-2xs);
  font-weight: 700;
  vertical-align: middle;
}

.badge,
.profile-chip,
.collection-stat-pill,
.market-total-badge {
  padding: var(--space-2xs) var(--space-snug);
  border-radius: var(--radius-pill);
  font-size: var(--font-xs);
  font-weight: 600;
}

.format-badge {
  border: 1px solid var(--border);
  color: var(--text-dim);
  
  margin-right: var(--space-sm);
}


.format-badge--standard {
  border-color: var(--accent);
  color: var(--accent);
}


.deck-bracket-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 1px var(--space-xs) 1px 1px;
  border: 1px solid var(--bracket-tone, var(--border));
  border-radius: var(--radius-xs);
  font-size: var(--font-2xs);
  font-weight: 700;
  vertical-align: middle;
  
  margin-right: var(--space-sm);
}
.deck-bracket-badge-num {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2xs);
  border-radius: calc(var(--radius-xs) - 1px) 0 0 calc(var(--radius-xs) - 1px);
  background: var(--bracket-tone, var(--border));
  
  color: var(--bg);
  font-variant-numeric: tabular-nums;
}
.deck-bracket-badge-name {
  color: var(--bracket-tone, var(--text-dim));
  font-weight: 600;
}


.deck-bracket-badge--1 { --bracket-tone: var(--neon-green); }
.deck-bracket-badge--2 { --bracket-tone: color-mix(in srgb, var(--neon-green) 60%, var(--neon-red)); }
.deck-bracket-badge--3 { --bracket-tone: color-mix(in srgb, var(--neon-red) 65%, var(--neon-green)); }
.deck-bracket-badge--4 { --bracket-tone: var(--neon-red); }


@media (max-width: 560px) {
  .deck-tile .deck-bracket-badge-name { display: none; }
}


.mana-toggle {
  width: var(--control-h);
  height: var(--control-h);
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg-input);
  color: var(--text-dim);
  font-weight: 700;
  font-size: var(--font-sm);
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), box-shadow var(--transition-fast);
}

.mana-toggle:hover { border-color: var(--text-dim); color: var(--text); }

.mana-toggle--w.active { --mana-color: var(--mana-w); }
.mana-toggle--u.active { --mana-color: var(--mana-u); }
.mana-toggle--b.active { --mana-color: var(--mana-b); }
.mana-toggle--r.active { --mana-color: var(--mana-r); }
.mana-toggle--g.active { --mana-color: var(--mana-g); }
.mana-toggle--c.active { --mana-color: var(--mana-c); }

.mana-toggle.active {
  background: color-mix(in srgb, var(--mana-color) 22%, var(--bg-input));
  border-color: var(--mana-color);
  
  color: var(--text);
  
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--mana-color) 55%, transparent),
    0 0 10px color-mix(in srgb, var(--mana-color) 65%, transparent),
    0 0 20px color-mix(in srgb, var(--mana-color) 40%, transparent);
}

.hidden { display: none !important; }

.results {
  min-height: 300px;
  max-height: calc(100vh - var(--app-chrome-v));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}


.two-col > .form {
  max-height: calc(100vh - var(--app-chrome-v));
  overflow-y: auto;
}


.content > .tab-panel.active:has(> .two-col) { height: 100%; }


.content > .tab-panel.active:has(> .two-col) > .two-col { grid-template-rows: minmax(0, 1fr); }

.content > .tab-panel.active:has(> .two-col) > .two-col > .form,
.content > .tab-panel.active:has(> .two-col) > .two-col > .results {
  max-height: 100%;
}


.content > .tab-panel.active:has(> .two-col) > .two-col > .results {
  align-self: stretch;
  min-height: 0;
}


.results,
.two-col > .form {
  scrollbar-gutter: stable;
}

.results-empty {
  color: var(--text-dim);
  font-size: var(--font-sm);
  padding: var(--space-xl) 0;
  text-align: center;
}

.results-empty.results-error {
  color: var(--error);
}

.results-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-3xl) 0;
  color: var(--text-dim);
  font-size: var(--font-sm);
}

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }


.loading-progress-bar {
  width: 100%;
  max-width: 320px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.loading-progress-fill {
  position: absolute;
  top: 0;
  left: -40%;
  height: 100%;
  width: 40%;
  background: var(--accent);
  border-radius: 2px;
  animation: loading-indeterminate 1.4s ease-in-out infinite;
}

.loading-progress-fill.determinate {
  animation: none;
  left: 0;
  width: 0;
  transition: width 0.4s ease;
  box-shadow:
    0 0 8px color-mix(in srgb, var(--accent) 60%, transparent),
    0 0 16px color-mix(in srgb, var(--accent) 35%, transparent);
}

@keyframes loading-indeterminate {
  0% { left: -40%; }
  100% { left: 100%; }
}

.loading-detail {
  font-size: var(--font-xs);
  color: var(--text-dim);
  text-align: center;
  max-width: 340px;
  
  margin: 0 auto;
  line-height: 1.4;
}


.mascot-status-wrap {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.mascot-status-text { margin: 0; }

.mascot-progress-track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}


.mascot-progress-fill-bar {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, #ff3b3b, #ff9c3b, #ffe93b, #4dff7a, #3bc9ff, #7a5bff, #ff3bcf);
  background-size: 300% 100%;
  animation: mascot-progress-glow-shift 3s linear infinite;
  transition: width 0.5s ease;
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.3),
    0 0 16px color-mix(in srgb, var(--accent-hover) 55%, transparent),
    0 0 28px color-mix(in srgb, var(--accent-hover) 30%, transparent);
}
@keyframes mascot-progress-glow-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}


.deck-analysis-loading { padding: var(--space-sm) 0; }



.mascot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
}

.mascot-stage { width: 100%; max-width: 760px; }
.mascot-svg { width: 100%; height: auto; overflow: visible; display: block; }


.mascot-sign-text {
  transition: opacity 200ms ease;
  font-family: Cambria, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", serif;
  font-style: italic;
  letter-spacing: 0.015em;
}


.automaton-pos {
  transform: translateX(0px);
  transition: transform 2.3s cubic-bezier(.4,0,.2,1);
}

.automaton-facing {
  transform-origin: 219px 180px;
  transition: transform 2.3s cubic-bezier(.4,0,.2,1);
}
.mascot-svg[data-facing="left"] .automaton-facing { transform: scaleX(-1); }

.automaton-body { transform-origin: center bottom; }

.mascot-svg[data-motion="sitting"] .automaton-body,
.mascot-svg[data-motion="cabinet"] .automaton-body,
.mascot-svg[data-motion="shelf"] .automaton-body {
  animation: mascot-bob 3.2s ease-in-out infinite;
}
@keyframes mascot-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(0deg); }
}

.automaton-eye { animation: mascot-blink 4.5s ease-in-out infinite; transform-origin: center; }
@keyframes mascot-blink {
  0%, 88%, 100% { transform: scaleY(1); }
  92% { transform: scaleY(0.15); }
}
.automaton-eye-glow { animation: mascot-glow-pulse 2.6s ease-in-out infinite; }
@keyframes mascot-glow-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }


.eye-pupil {
  transform: translate(var(--eye-dx, 0px), var(--eye-dy, 0px));
  transition: transform 140ms ease-out;
}

.automaton-quill { transform-origin: 250px 191px; }
.mascot-svg[data-motion="sitting"] .automaton-quill { animation: mascot-quill-write 2.4s ease-in-out infinite; }
@keyframes mascot-quill-write { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(6deg); } }


.mascot-svg[data-motion="walking"] .automaton-body { animation: mascot-shuffle-bob 0.9s ease-in-out infinite; }
@keyframes mascot-shuffle-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-5px) rotate(2deg); }
}
.mascot-float-shadow { animation: mascot-float-shadow-pulse 3.2s ease-in-out infinite; }
@keyframes mascot-float-shadow-pulse {
  0%, 100% { opacity: 0.25; transform: scaleX(1); }
  50% { opacity: 0.15; transform: scaleX(0.85); }
}
.mascot-svg[data-motion="walking"] .automaton-arm-l { animation: mascot-swing-l 0.46s ease-in-out infinite; transform-origin: 206px 189px; }
.mascot-svg[data-motion="walking"] .automaton-arm-r { animation: mascot-swing-r 0.46s ease-in-out infinite; transform-origin: 242px 189px; }
@keyframes mascot-swing-l { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(14deg); } }
@keyframes mascot-swing-r { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(-10deg); } }


.mascot-svg[data-motion="sitting"][data-gesture="conjure"] .automaton-arm-l { animation: lebard-gesture-conjure-l 2.8s ease-in-out infinite; transform-origin: 206px 189px; }
.mascot-svg[data-motion="sitting"][data-gesture="conjure"] .automaton-arm-r { animation: lebard-gesture-conjure-r 2.8s ease-in-out infinite; transform-origin: 242px 189px; }
@keyframes lebard-gesture-conjure-l { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(-36deg) translateY(-6px); } }
@keyframes lebard-gesture-conjure-r { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(36deg) translateY(-6px); } }

.mascot-svg[data-motion="sitting"][data-gesture="stir"] .automaton-arm-r { animation: lebard-gesture-stir-r 1.9s linear infinite; transform-origin: 242px 189px; }
@keyframes lebard-gesture-stir-r {
  0% { transform: rotate(6deg) translate(0, 0); }
  25% { transform: rotate(22deg) translate(2px, -2px); }
  50% { transform: rotate(6deg) translate(3px, 2px); }
  75% { transform: rotate(-8deg) translate(-1px, 1px); }
  100% { transform: rotate(6deg) translate(0, 0); }
}


.mascot-svg[data-motion="sitting"][data-gesture="flourish"] .automaton-arm-r { animation: lebard-gesture-flourish-r 1.7s ease-in-out infinite; transform-origin: 242px 189px; }
.mascot-svg[data-motion="sitting"][data-gesture="flourish"] .automaton-arm-l { animation: lebard-gesture-flourish-l 1.7s ease-in-out infinite; transform-origin: 206px 189px; }
.mascot-svg[data-motion="sitting"][data-gesture="flourish"] .automaton-quill,
.mascot-svg[data-motion="sitting"][data-gesture="flourish"] .lebard-prop-wand { animation: lebard-gesture-flourish-prop 1.7s ease-in-out infinite; }
@keyframes lebard-gesture-flourish-r { 0%, 12% { transform: rotate(0deg); } 38% { transform: rotate(-44deg); } 60% { transform: rotate(48deg); } 82%, 100% { transform: rotate(0deg); } }
@keyframes lebard-gesture-flourish-l { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-14deg); } }
@keyframes lebard-gesture-flourish-prop { 0%, 12% { transform: rotate(-4deg); } 38% { transform: rotate(-48deg); } 60% { transform: rotate(44deg); } 82%, 100% { transform: rotate(-4deg); } }

.mascot-svg[data-motion="sitting"][data-gesture="point"] .automaton-arm-r { animation: lebard-gesture-point-r 2.6s ease-in-out infinite; transform-origin: 242px 189px; }
@keyframes lebard-gesture-point-r { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-52deg); } 70% { transform: rotate(-52deg); } }

.mascot-svg[data-motion="cabinet"] .automaton-body,
.mascot-svg[data-motion="shelf"] .automaton-body {
  animation: mascot-browse-tilt 1.8s ease-in-out infinite;
}
@keyframes mascot-browse-tilt { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-3deg); } }



.mascot-scroll-fill {
  transform: scaleY(0);
  transform-origin: top;
  transform-box: fill-box;
  transition: transform 0.6s ease;
}

.page-fill { opacity: 0.6; }


.mascot-seal-solid, .mascot-seal-half {
  transform-box: fill-box;
  transform-origin: center;
}
.mascot-seal-solid { animation: mascot-seal-hold 1.1s ease forwards; }
@keyframes mascot-seal-hold {
  0%, 85% { opacity: 1; }
  100% { opacity: 0; }
}
.mascot-seal-half {
  animation-duration: 1.1s;
  animation-timing-function: cubic-bezier(.5, 0, .75, 1);
  animation-fill-mode: forwards;
}
.mascot-seal-half--l { animation-name: mascot-seal-crack-l; }
.mascot-seal-half--r { animation-name: mascot-seal-crack-r; }
@keyframes mascot-seal-crack-l {
  0%, 78% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(-16px, 22px) rotate(-55deg); opacity: 0; }
}
@keyframes mascot-seal-crack-r {
  0%, 78% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(16px, 24px) rotate(55deg); opacity: 0; }
}


.mascot-spark { opacity: 0; }
.mascot-svg[data-motion="sitting"] .mascot-spark { animation: mascot-spark-rise 2.6s ease-out infinite; }
.mascot-spark--1 { animation-delay: 0s; } .mascot-spark--2 { animation-delay: 0.6s; } .mascot-spark--3 { animation-delay: 1.2s; }
.mascot-spark--4 { animation-delay: 1.8s; } .mascot-spark--5 { animation-delay: 0.3s; }
@keyframes mascot-spark-rise {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  15% { opacity: 1; } 80% { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-34px) scale(1); }
}
.book-glow { animation: mascot-aura-pulse 3.4s ease-in-out infinite; }
@keyframes mascot-aura-pulse { 0%, 100% { opacity: 0.12; r: 46; } 50% { opacity: 0.28; r: 56; } }


.mascot-shelf-book { cursor: grab; touch-action: none; }
.mascot-shelf-book.is-dragging { cursor: grabbing; }



.candle-flame {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: mascot-flicker 1.8s ease-in-out infinite;
}
@keyframes mascot-flicker {
  0%, 100% { transform: scale(1, 1) rotate(0deg); }
  25% { transform: scale(0.97, 1.03) rotate(-0.75deg); }
  50% { transform: scale(1.02, 0.98) rotate(0.5deg); }
  75% { transform: scale(0.98, 1.02) rotate(0.75deg); }
}
.candle-glow, .lamp-glow, .vial-glow { animation: mascot-aura-pulse 2.6s ease-in-out infinite; }
.lamp-glow { animation-duration: 3.1s; }
.vial-glow { animation-duration: 2.2s; animation-delay: 0.4s; }


.ambient-mote { opacity: 0; animation: mascot-ambient-drift 8s ease-in-out infinite; }
@keyframes mascot-ambient-drift {
  0% { opacity: 0; transform: translate(0, 0); }
  10% { opacity: 0.5; }
  50% { opacity: 0.7; transform: translate(var(--mx, 10px), calc(var(--my, -20px) * 0.5)); }
  90% { opacity: 0.3; }
  100% { opacity: 0; transform: translate(var(--mx, 10px), var(--my, -20px)); }
}


.mascot-essence-wisp {
  opacity: 0;
  animation: mascot-essence-flow 2.6s ease-in infinite;
}
@keyframes mascot-essence-flow {
  0% { opacity: 0; transform: translate(0, 0) scale(0.7); }
  12% { opacity: 0.9; }
  75% { opacity: 0.5; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(0.4); }
}


.mascot-scroll-group {
  transition: transform 4.4s cubic-bezier(.22, .9, .3, 1);
  transform-box: fill-box;
  transform-origin: center;
}
.mascot-svg.revealing .mascot-scroll-group { transform: scale(1.16); }
.mascot-svg.revealing .mascot-scroll-fill { transition: transform 4.4s cubic-bezier(.22, .9, .3, 1); }
.mascot-svg.revealing .book-glow {
  animation: none;
  opacity: 0.5;
  r: 66;
  transition: opacity 4.4s ease, r 4.4s ease;
}
.mascot-svg.revealing .mascot-spark { animation-duration: 7.5s; }
.mascot-svg.revealing .ambient-mote { animation-duration: 23s; }
.mascot-svg.revealing .mascot-essence-wisp { animation-duration: 7.5s; }
.mascot-svg.revealing .candle-flame,
.mascot-svg.revealing .candle-glow,
.mascot-svg.revealing .lamp-glow,
.mascot-svg.revealing .vial-glow { animation-duration: 7.5s; }


.mascot-svg.revealing .automaton-body { animation: mascot-celebrate-jump 1.3s ease-in-out infinite; }
@keyframes mascot-celebrate-jump {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  45% { transform: translateY(-16px) rotate(0deg); }
  55% { transform: translateY(-16px) rotate(0deg); }
}
.mascot-svg.revealing .automaton-arm-l { animation: mascot-wave-l 1.3s ease-in-out infinite; transform-origin: 206px 189px; }
.mascot-svg.revealing .automaton-arm-r { animation: mascot-wave-r 1.3s ease-in-out infinite; transform-origin: 242px 189px; }
@keyframes mascot-wave-l { 0%, 100% { transform: rotate(-48deg); } 50% { transform: rotate(-74deg); } }
@keyframes mascot-wave-r { 0%, 100% { transform: rotate(48deg); } 50% { transform: rotate(74deg); } }


.mascot-reveal-particle {
  opacity: 0;
  animation: mascot-reveal-converge 1.1s cubic-bezier(.3, .05, .35, 1) forwards;
}
@keyframes mascot-reveal-converge {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  10% { opacity: 1; }
  86% { opacity: 1; transform: translate(calc(var(--dx, 0px) * 0.96), calc(var(--dy, 0px) * 0.96)) scale(1.05); }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(1.3); }
}


.mascot-speech-bubble { opacity: 0; transform: translateY(6px) scale(0.85); transform-origin: bottom left; transition: opacity 220ms ease, transform 220ms ease; }
.mascot-speech-bubble.show { opacity: 1; transform: translateY(0) scale(1); }


.thopter {
  transform-box: fill-box;
  transform-origin: center;
  animation: thopter-hover 3.4s ease-in-out infinite;
}

@keyframes thopter-hover {
  0%, 100% { transform: translate(0, 0) rotate(-3deg); }
  50% { transform: translate(-2px, -7px) rotate(3deg); }
}


.thopter-wing {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: thopter-flap 0.42s ease-in-out infinite;
}

.thopter-wing--far { animation-delay: -0.09s; }
@keyframes thopter-flap {
  0%, 100% { transform: rotate(-16deg); }
  50% { transform: rotate(24deg); }
}


.thopter-eye-glow { animation: mascot-glow-pulse 2.6s ease-in-out infinite; }


.auth-mascot-hover { animation: auth-lebard-hover 5.6s ease-in-out infinite; }
@keyframes auth-lebard-hover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}


.auth-mascot-svg .automaton-body { animation: auth-lebard-list 6.8s ease-in-out infinite; }
@keyframes auth-lebard-list {
  0%, 100% { transform: rotate(-2.2deg); }
  50% { transform: rotate(2.2deg); }
}


.auth-mascot-svg .automaton-arm-r {
  animation: auth-lebard-offer-r 4.4s ease-in-out infinite;
  transform-origin: 242px 189px;
}
@keyframes auth-lebard-offer-r {
  0%, 100% { transform: rotate(-37deg); }
  50% { transform: rotate(-43deg); }
}


.auth-mascot-svg .automaton-arm-l {
  animation: auth-lebard-welcome-l 5.2s ease-in-out infinite;
  transform-origin: 206px 189px;
}
@keyframes auth-lebard-welcome-l {
  0%, 62%, 100% { transform: rotate(0deg); }
  74% { transform: rotate(17deg); }
  86% { transform: rotate(4deg); }
}


.auth-mascot-svg .automaton-quill { animation: auth-lebard-quill-sway 4.8s ease-in-out infinite; }
@keyframes auth-lebard-quill-sway {
  0%, 100% { transform: rotate(-9deg); }
  50% { transform: rotate(2deg); }
}


.auth-mascot-svg .thopter { animation: auth-thopter-patrol 11s ease-in-out infinite; }
@keyframes auth-thopter-patrol {
  0% { transform: translate(76px, 0) scaleX(1) rotate(-3deg); }
  44% { transform: translate(2px, -7px) scaleX(1) rotate(3deg); }
  50% { transform: translate(0, -8px) scaleX(-1) rotate(0deg); }
  94% { transform: translate(74px, -6px) scaleX(-1) rotate(-3deg); }
  100% { transform: translate(76px, 0) scaleX(1) rotate(-3deg); }
}


.auth-key {
  transform-box: fill-box;
  transform-origin: center;
  animation: auth-key-float 4.2s ease-in-out infinite;
}
@keyframes auth-key-float {
  0%, 100% { transform: translateY(0) rotate(-7deg); }
  50% { transform: translateY(-4px) rotate(7deg); }
}

.auth-key-glow { animation: auth-key-shine 3s ease-in-out infinite; }
@keyframes auth-key-shine {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.26; }
}


.auth-mote { opacity: 0; animation: auth-mote-rise 6.4s ease-in-out infinite; }
.auth-mote--2 { animation-delay: -2.1s; }
.auth-mote--3 { animation-delay: -4.3s; }
@keyframes auth-mote-rise {
  0% { opacity: 0; transform: translateY(0); }
  25% { opacity: 0.85; }
  75% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-46px); }
}

@media (prefers-reduced-motion: reduce) {
  .automaton-pos, .automaton-facing, .automaton-body, .automaton-eye, .automaton-eye-glow,
  .eye-pupil, .automaton-quill, .mascot-float-shadow, .automaton-arm-l,
  .automaton-arm-r, .lebard-prop-wand, .page-fill, .book-glow, .candle-flame, .candle-glow, .lamp-glow, .vial-glow,
  .ambient-mote, .mascot-spark, .mascot-speech-bubble, .mascot-essence-wisp, .mascot-scroll-group,
  .mascot-scroll-fill, .mascot-seal-solid, .mascot-seal-half, .mascot-progress-fill-bar,
  .mascot-reveal-particle, .reveal-section,
  .thopter, .thopter *,
  .auth-mascot-hover, .auth-key, .auth-key-glow, .auth-mote,
  .companion-svg, .companion-svg * {
    animation: none !important;
    transition: none !important;
  }
  
  .mascot-seal-solid, .mascot-seal-half { opacity: 0 !important; }
}


.reveal-section {
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.5s ease, transform 0.5s var(--ease);
}
.reveal-section--in { opacity: 1; transform: translateY(0); }

.result-block { display: flex; flex-direction: column; gap: var(--space-md); }


button.collapsible-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px var(--space-md);
  margin: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  box-shadow: var(--elev-1);
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), box-shadow var(--transition-fast);
}

button.collapsible-header:hover {
  color: var(--text);
  border-color: var(--accent-dim);
  background: color-mix(in srgb, var(--bg-panel) 80%, var(--accent) 20%);
  box-shadow: var(--elev-2);
}


.collapsible-section.is-open > button.collapsible-header {
  color: var(--text);
  border-color: var(--accent-dim);
}

.collapsible-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-hover);
  
  transition: transform 220ms var(--ease-out-back), background-color var(--transition-fast);
  font-size: var(--font-3xs);
}

.collapsible-section.is-open .collapsible-chevron {
  transform: rotate(90deg);
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

.collapsible-body { margin-top: var(--space-sm); }


@keyframes collapsible-body-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.collapsible-body:not(.hidden) {
  animation: collapsible-body-in var(--transition-base);
}


@media (prefers-reduced-motion: reduce) {
  .collapsible-body:not(.hidden) { animation: none; }
  .collapsible-chevron { transition: none; }
  .card-image-tile img,
  button.collapsible-header { transition: none; }
}


.the-cards-section > button.collapsible-header {
  position: relative;
  color: var(--neon);
  border-color: color-mix(in srgb, var(--neon) 45%, var(--border));
  text-shadow: 0 0 4px var(--neon), 0 0 10px var(--neon), 0 0 20px color-mix(in srgb, var(--neon) 65%, transparent);
  animation: the-cards-glow-pulse 2.6s ease-in-out infinite;
}

.the-cards-section > button.collapsible-header:hover,
.the-cards-section.is-open > button.collapsible-header {
  color: var(--neon);
  border-color: var(--neon);
}

.the-cards-section .collapsible-chevron {
  background: color-mix(in srgb, var(--neon) 25%, transparent);
  color: var(--neon);
}

.the-cards-section > button.collapsible-header::after {
  content: '';
  position: absolute;
  inset: -8px -12px;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--neon) 0%, transparent 70%),
    radial-gradient(circle, var(--neon) 0%, transparent 70%),
    radial-gradient(circle, var(--neon) 0%, transparent 70%),
    radial-gradient(circle, var(--neon) 0%, transparent 70%),
    radial-gradient(circle, var(--neon) 0%, transparent 70%);
  background-size: 4px 4px, 3px 3px, 5px 5px, 3px 3px, 4px 4px;
  background-repeat: no-repeat;
  background-position: 10% 15%, 30% 80%, 55% 10%, 78% 70%, 92% 30%;
  opacity: 0;
  animation: the-cards-sparkle 3.4s ease-in-out infinite;
}

@keyframes the-cards-glow-pulse {
  0%, 100% {
    text-shadow: 0 0 4px var(--neon), 0 0 10px var(--neon), 0 0 20px color-mix(in srgb, var(--neon) 65%, transparent);
  }
  50% {
    text-shadow: 0 0 6px var(--neon), 0 0 16px var(--neon), 0 0 30px color-mix(in srgb, var(--neon) 80%, transparent);
  }
}

@keyframes the-cards-sparkle {
  0%, 100% { opacity: 0; }
  8%, 22% { opacity: 1; }
  15% { opacity: 0.15; }
  38%, 52% { opacity: 1; }
  45% { opacity: 0.15; }
  68%, 82% { opacity: 1; }
  75% { opacity: 0.15; }
}



.collapsible-body.hidden { display: none; }


.deck-analysis-block > .collapsible-body {
  max-height: 60vh;
  overflow-y: auto;
}


.is-refreshing {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.15s ease;
}


.deck-analysis-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.writeup-text {
  white-space: pre-wrap;
  line-height: 1.55;
  font-size: var(--font-md);
}


.writeup-with-commander { overflow: auto; }


.writeup-game-plan::first-letter {
  float: left;
  font-family: Cambria, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", serif;
  font-weight: 700;
  font-style: italic;
  font-size: 3.6em;
  line-height: 0.8;
  margin: var(--space-2xs) var(--space-snug) 0 0;
  padding: var(--space-3xs) 7px;
  border: 3px solid #05060c;
  border-radius: 4px;
  outline: 1px solid rgba(255, 255, 255, 0.08);
  outline-offset: 2px;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.95), transparent 9%),
    radial-gradient(circle at 74% 62%, rgba(255, 255, 255, 0.55), transparent 7%),
    radial-gradient(circle at 55% 84%, rgba(255, 255, 255, 0.35), transparent 6%),
    repeating-linear-gradient(6deg, transparent 0 10px, rgba(4, 6, 14, 0.35) 10px 12px),
    repeating-linear-gradient(48deg, transparent 0 7px, rgba(4, 6, 14, 0.65) 7px 9px),
    repeating-linear-gradient(-52deg, transparent 0 9px, rgba(4, 6, 14, 0.55) 9px 11px),
    conic-gradient(
      from 210deg at 45% 35%,
      #ff2ec4 0deg 51deg,
      #7d5bff 51deg 111deg,
      #2ec6ff 111deg 171deg,
      #29ffb0 171deg 231deg,
      #f6ff3d 231deg 291deg,
      #ff8a2e 291deg 360deg
    );
  background-blend-mode: screen, screen, screen, multiply, multiply, multiply, normal;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #05060c;
  color: transparent;
  filter: saturate(1.2) contrast(1.08);
  text-shadow:
    0 0 3px #fff,
    0 0 9px var(--accent),
    0 0 20px var(--accent),
    0 0 34px color-mix(in srgb, var(--accent) 65%, #2ec6ff),
    0 0 54px color-mix(in srgb, var(--accent) 45%, #ff2ec4);
  box-shadow:
    0 0 14px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 26px color-mix(in srgb, var(--accent) 30%, #ff2ec4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 0 0 8px rgba(255, 255, 255, 0.2);
}


.game-plan-commander {
  float: right;
  width: 200px;
  max-width: 42%;
  margin: 0 0 var(--space-md) var(--space-lg);
  position: relative;
  padding-bottom: 30px;
  overflow: hidden;
}

.game-plan-commander img {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.35),
    0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 16px color-mix(in srgb, var(--accent) 60%, transparent),
    0 0 32px color-mix(in srgb, var(--accent) 32%, transparent);
  animation: commander-glow-pulse 3s ease-in-out infinite;
}

.game-plan-commander::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 30px;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--accent) 0%, transparent 70%),
    radial-gradient(circle, var(--accent) 0%, transparent 70%),
    radial-gradient(circle, var(--accent) 0%, transparent 70%),
    radial-gradient(circle, var(--accent) 0%, transparent 70%);
  background-repeat: no-repeat;
  background-size: 5px 8px, 4px 7px, 5px 9px, 4px 6px;
  background-position: 12% -10%, 40% -30%, 68% -15%, 88% -40%;
  animation: commander-drip 2.6s linear infinite;
}


.game-plan-commander-pair {
  float: right;
  width: 260px;
  max-width: 58%;
  margin: 0 0 var(--space-md) var(--space-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--space-snug);
}

.game-plan-commander-pair .game-plan-commander {
  float: none;
  width: auto;
  max-width: none;
  min-width: 0; 
  flex: 1 1 0;
  margin: 0;
}


.game-plan-commander-fallback {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2xs) var(--space-snug);
  margin: 0 0 var(--space-snug);
  border-radius: var(--radius-pill);
  font-size: var(--font-xs);
  font-weight: 600;
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
}

@keyframes commander-glow-pulse {
  0%, 100% {
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.35),
      0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
      0 0 16px color-mix(in srgb, var(--accent) 60%, transparent),
      0 0 32px color-mix(in srgb, var(--accent) 32%, transparent);
  }
  50% {
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.35),
      0 0 0 1px color-mix(in srgb, var(--accent) 75%, transparent),
      0 0 22px color-mix(in srgb, var(--accent) 80%, transparent),
      0 0 42px color-mix(in srgb, var(--accent) 48%, transparent);
  }
}

@keyframes commander-drip {
  0% { background-position: 12% -10%, 40% -30%, 68% -15%, 88% -40%; opacity: 0.9; }
  70% { opacity: 0.45; }
  100% { background-position: 12% 100%, 40% 100%, 68% 100%, 88% 100%; opacity: 0; }
}


.card-ideas-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-xl);
}

.card-ideas-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: transform var(--transition-base);
}


.card-ideas-tile:hover {
  transform: translateY(-2px);
}

.card-ideas-tile-art img,
.card-ideas-tile-art.missing-img {
  transition: filter var(--transition-base);
}

.card-ideas-tile:hover .card-ideas-tile-art img {
  filter: brightness(1.06);
}


@keyframes card-ideas-tile-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.card-ideas-gallery > .card-ideas-tile {
  animation: card-ideas-tile-in var(--transition-slow) backwards;
}

.card-ideas-gallery > *:nth-child(1) { animation-delay: 0ms; }
.card-ideas-gallery > *:nth-child(2) { animation-delay: 45ms; }
.card-ideas-gallery > *:nth-child(3) { animation-delay: 90ms; }
.card-ideas-gallery > *:nth-child(4) { animation-delay: 135ms; }
.card-ideas-gallery > *:nth-child(5) { animation-delay: 180ms; }
.card-ideas-gallery > *:nth-child(6) { animation-delay: 225ms; }
.card-ideas-gallery > *:nth-child(7) { animation-delay: 270ms; }
.card-ideas-gallery > *:nth-child(n + 8) { animation-delay: 315ms; }

.card-ideas-tile-art {
  position: relative;
  padding-bottom: 26px;
  overflow: hidden;
}

.card-ideas-tile-art img {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.35),
    0 0 0 1px color-mix(in srgb, var(--neon) 55%, transparent),
    0 0 16px color-mix(in srgb, var(--neon) 55%, transparent),
    0 0 30px color-mix(in srgb, var(--neon) 28%, transparent);
  animation: card-ideas-glow-pulse 3s ease-in-out infinite;
}

.card-ideas-tile-art.missing-img {
  aspect-ratio: 63 / 88;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: var(--font-xs);
}

.card-ideas-tile-art::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 26px;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--neon) 0%, transparent 70%),
    radial-gradient(circle, var(--neon) 0%, transparent 70%),
    radial-gradient(circle, var(--neon) 0%, transparent 70%),
    radial-gradient(circle, var(--neon) 0%, transparent 70%);
  background-repeat: no-repeat;
  background-size: 5px 8px, 4px 7px, 5px 9px, 4px 6px;
  background-position: 12% -10%, 40% -30%, 68% -15%, 88% -40%;
  animation: card-ideas-drip 2.8s linear infinite;
}

@keyframes card-ideas-glow-pulse {
  0%, 100% {
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.35),
      0 0 0 1px color-mix(in srgb, var(--neon) 55%, transparent),
      0 0 16px color-mix(in srgb, var(--neon) 55%, transparent),
      0 0 30px color-mix(in srgb, var(--neon) 28%, transparent);
  }
  50% {
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.35),
      0 0 0 1px color-mix(in srgb, var(--neon) 75%, transparent),
      0 0 22px color-mix(in srgb, var(--neon) 75%, transparent),
      0 0 42px color-mix(in srgb, var(--neon) 42%, transparent);
  }
}

@keyframes card-ideas-drip {
  0% { background-position: 12% -10%, 40% -30%, 68% -15%, 88% -40%; opacity: 0.9; }
  70% { opacity: 0.45; }
  100% { background-position: 12% 100%, 40% 100%, 68% 100%, 88% 100%; opacity: 0; }
}

.card-ideas-tile-name { font-weight: 600; font-size: var(--font-sm); color: var(--text); }
.card-ideas-tile-reason { font-size: var(--font-xs); color: var(--text-dim); }


@media (prefers-reduced-motion: reduce) {
  .card-ideas-tile-art::after { display: none; }
  .card-ideas-tile-art img { animation: none; }
  .card-ideas-gallery > .card-ideas-tile { animation: none; }
  .card-ideas-tile,
  .card-ideas-tile-art img,
  .card-ideas-tile-art.missing-img { transition: none; }
  .card-ideas-tile:hover { transform: none; }
  .card-ideas-tile:hover .card-ideas-tile-art img { filter: none; }
}


.strengths-weaknesses-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.sw-column {
  border-radius: var(--radius);
  border: 1px solid;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.sw-strengths {
  background: color-mix(in srgb, var(--ok) 12%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--ok) 45%, var(--border));
}

.sw-weaknesses {
  background: color-mix(in srgb, var(--error) 12%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--error) 45%, var(--border));
}

.sw-strengths .sw-heading { color: var(--ok); }
.sw-weaknesses .sw-heading { color: var(--error); }

.sw-list {
  margin: 0;
  padding-left: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--text);
}

.sw-list li::marker { font-weight: 700; }
.sw-strengths .sw-list li::marker { color: var(--ok); }
.sw-weaknesses .sw-list li::marker { color: var(--error); }


.changelog-section > button.collapsible-header {
  color: var(--neon-purple);
  border-color: color-mix(in srgb, var(--neon-purple) 45%, var(--border));
  text-shadow:
    0 0 4px var(--neon-purple),
    0 0 10px var(--neon-purple),
    0 0 20px color-mix(in srgb, var(--neon-purple) 65%, transparent);
  animation: changelog-glow-pulse 2.6s ease-in-out infinite;
}

.changelog-section > button.collapsible-header:hover,
.changelog-section.is-open > button.collapsible-header {
  color: var(--neon-purple);
  border-color: var(--neon-purple);
}

.changelog-section .collapsible-chevron {
  background: color-mix(in srgb, var(--neon-purple) 25%, transparent);
  color: var(--neon-purple);
}


.changelog-section > .collapsible-body {
  border: 1px solid color-mix(in srgb, var(--neon-purple) 35%, var(--border));
  border-radius: var(--radius);
  padding: var(--space-md);
  background: color-mix(in srgb, var(--neon-purple) 6%, var(--bg-panel));
  box-shadow:
    0 0 12px color-mix(in srgb, var(--neon-purple) 22%, transparent),
    inset 0 0 20px color-mix(in srgb, var(--neon-purple) 7%, transparent);
}

@keyframes changelog-glow-pulse {
  0%, 100% {
    text-shadow:
      0 0 4px var(--neon-purple),
      0 0 10px var(--neon-purple),
      0 0 20px color-mix(in srgb, var(--neon-purple) 65%, transparent);
  }
  50% {
    text-shadow:
      0 0 6px var(--neon-purple),
      0 0 16px var(--neon-purple),
      0 0 30px color-mix(in srgb, var(--neon-purple) 80%, transparent);
  }
}

.changelog-body { display: flex; flex-direction: column; gap: var(--space-md); }
.changelog-note { margin: 0; }


.changelog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.changelog-column {
  border-radius: var(--radius);
  border: 1px solid;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}


.changelog-out {
  background: color-mix(in srgb, var(--error) 10%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--error) 40%, var(--border));
}

.changelog-in {
  background: color-mix(in srgb, var(--ok) 10%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--ok) 40%, var(--border));
}

.changelog-out .changelog-column-heading { color: var(--error); }
.changelog-in .changelog-column-heading { color: var(--ok); }

.changelog-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--text);
}


.changelog-list li {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding-left: var(--space-lg);
  position: relative;
}

.changelog-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

.changelog-out .changelog-list li::before { content: '\2212'; color: var(--error); } 
.changelog-in .changelog-list li::before { content: '+'; color: var(--ok); }

.changelog-card { font-weight: 600; }
.changelog-reason { color: var(--text-dim); }


.build-inputs-list { display: flex; flex-direction: column; gap: var(--space-2xs); }
.build-inputs-row { display: flex; gap: var(--space-sm); font-size: var(--font-sm); line-height: 1.5; }
.build-inputs-label { color: var(--text-dim); min-width: 140px; flex-shrink: 0; }
.build-inputs-value { color: var(--text); white-space: pre-wrap; }

.badge-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; }


.read-aloud-btn { display: none; margin: var(--space-2xs) 0; }
html[data-voice-enabled="1"] .read-aloud-btn { display: inline-flex; align-items: center; gap: var(--space-xs); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--border);
  color: var(--text-dim);
}

.badge.ok { background: rgba(var(--ok-rgb), 0.18); color: var(--ok); }
.badge.warn { background: rgba(var(--warn-rgb), 0.18); color: var(--warn); }
.badge.error { background: rgba(var(--error-rgb), 0.18); color: var(--error); }
.badge.new { background: rgba(var(--accent-rgb), 0.18); color: var(--accent); }



.collection-row.new-card,
.collection-row.commander-card,
.collection-row.game-changer-card {
  padding: 9px 11px;
}


.card-row.new-card,
.card-row.commander-card,
.card-row.game-changer-card {
  border-width: 2px;
  padding: calc(var(--space-3xs) - 1px) calc(var(--space-2xs) - 1px);
}

.collection-row.new-card,
.card-row.new-card {
  border-color: var(--accent);
}

.card-image-tile.new-card {
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
}


.collection-row.commander-card,
.card-row.commander-card,
.card-image-tile.commander-card {
  border: 2px solid var(--accent);
  animation: commander-card-glow-pulse 3s ease-in-out infinite;
}

.commander-crown {
  margin-right: var(--space-2xs);
  font-size: 0.85em;
}

@keyframes commander-card-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 8px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  50% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 65%, transparent);
  }
}

.new-card-badge {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.18);
  margin-left: var(--space-xs);
}


.rating-badge { margin-left: var(--space-xs); }
.rating-badge--high { color: var(--ok); background: color-mix(in srgb, var(--ok) 18%, transparent); }
.rating-badge--mid { color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.rating-badge--low { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 16%, transparent); }


.collection-row.game-changer-card,
.card-row.game-changer-card,
.card-image-tile.game-changer-card {
  position: relative;
  border: 2px solid var(--neon-green);
  animation: game-changer-glow-pulse 2.2s ease-in-out infinite;
}

@keyframes game-changer-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--neon-green) 50%, transparent), 0 0 8px color-mix(in srgb, var(--neon-green) 55%, transparent);
  }
  50% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--neon-green) 70%, transparent), 0 0 16px color-mix(in srgb, var(--neon-green) 85%, transparent);
  }
}

.game-changer-badge {
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: 1;
  display: block;
  line-height: 0;
  filter: drop-shadow(0 0 3px var(--neon-green)) drop-shadow(0 0 6px var(--neon-green));
}

.lebard-face-icon {
  width: 22px;
  height: 20px;
  display: block;
}


.game-changers-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--neon-green);
  background: var(--bg-input);
  cursor: pointer;
  animation: game-changer-glow-pulse 2.2s ease-in-out infinite;
}
.game-changers-trigger:hover,
.game-changers-trigger:focus-visible {
  border-color: var(--neon-green);
  outline: none;
}
.game-changers-trigger .lebard-face-icon {
  width: 26px;
  height: 24px;
  filter: none;
}


.spicy-score-widget {
  display: block;
  width: 100%;
  max-width: 360px;
  text-align: left;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  cursor: pointer;
}
.spicy-score-widget:hover,
.spicy-score-widget:focus-visible {
  border-color: var(--text-dim);
  outline: none;
}
.spicy-score-heading {
  font-size: var(--font-xs);
  color: var(--text-dim);
  margin-bottom: var(--space-2xs);
}
.spicy-score-bar {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--bg-input);
}
.spicy-score-bar-spicy {
  background: var(--neon-red);
  box-shadow: 0 0 6px var(--neon-red);
}
.spicy-score-bar-fluffy {
  background: var(--neon-green);
  box-shadow: 0 0 6px var(--neon-green);
}
.spicy-score-labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2xs);
  font-size: var(--font-xs);
  font-weight: 600;
}
.spicy-score-label-spicy { color: var(--neon-red); }
.spicy-score-label-fluffy { color: var(--neon-green); }


.spicy-score-modal-columns {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: var(--space-md);
  max-height: 50vh;
}
.spicy-score-modal-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-lg);
}
.spicy-score-modal-divider {
  flex: 0 0 auto;
  width: 3px;
  border-radius: 2px;
  margin: 0 var(--space-2xs);
}
.spicy-score-modal-divider--spicy {
  background: var(--neon-red);
  box-shadow: 0 0 8px var(--neon-red);
}
.spicy-score-modal-divider--fluffy {
  background: var(--neon-green);
  box-shadow: 0 0 8px var(--neon-green);
}
.spicy-score-modal-column-heading {
  font-weight: 700;
  font-size: var(--font-lg);
  margin-bottom: var(--space-sm);
}
.spicy-score-modal-column--spicy .spicy-score-modal-column-heading { color: var(--neon-red); }
.spicy-score-modal-column--fluffy .spicy-score-modal-column-heading { color: var(--neon-green); }

.spicy-score-card-list {
  overflow-y: auto;
  padding-right: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.spicy-score-card-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--font-sm);
  padding: 3px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.spicy-score-card-points {
  color: var(--neon-red);
  font-weight: 600;
  flex-shrink: 0;
}




.deck-power-row {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: var(--space-snug);
  margin-bottom: var(--space-md);
}
.deck-power-row .spicy-score-widget { margin-bottom: 0; }

.deck-bracket-widget {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-dim);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
}
.deck-bracket-widget:hover,
.deck-bracket-widget:focus-visible {
  border-color: var(--text-dim);
  outline: none;
}
.deck-bracket-heading {
  font-size: var(--font-xs);
  color: var(--text-dim);
  margin-bottom: var(--space-2xs);
}
.deck-bracket-value {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}
.deck-bracket-number {
  font-size: var(--font-3xl);
  font-weight: 700;
  line-height: 1;
}
.deck-bracket-name {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-dim);
}


.deck-bracket-widget--1 { border-left-color: var(--neon-green); }
.deck-bracket-widget--1 .deck-bracket-number { color: var(--neon-green); }
.deck-bracket-widget--2 { border-left-color: color-mix(in srgb, var(--neon-green) 60%, var(--neon-red)); }
.deck-bracket-widget--2 .deck-bracket-number { color: color-mix(in srgb, var(--neon-green) 60%, var(--neon-red)); }
.deck-bracket-widget--3 { border-left-color: color-mix(in srgb, var(--neon-red) 65%, var(--neon-green)); }
.deck-bracket-widget--3 .deck-bracket-number { color: color-mix(in srgb, var(--neon-red) 65%, var(--neon-green)); }
.deck-bracket-widget--4 { border-left-color: var(--neon-red); }
.deck-bracket-widget--4 .deck-bracket-number {
  color: var(--neon-red);
  text-shadow: 0 0 8px color-mix(in srgb, var(--neon-red) 70%, transparent);
}


.deck-bracket-widget--over { border-left-color: var(--warn); }
.deck-bracket-over-flag {
  margin-top: var(--space-2xs);
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--warn);
}
.deck-bracket-over-note {
  margin: 0 0 var(--space-snug);
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--text);
  font-size: var(--font-sm);
}


.deck-bracket-not-criterion {
  font-size: var(--font-xs);
  font-weight: 400;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: normal;
}
.deck-bracket-interaction {
  font-size: var(--font-sm);
  margin: 0 0 var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--text-dim);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--border) 25%, transparent);
}
.deck-bracket-interaction--reactive { border-left-color: var(--neon-green); }
.deck-bracket-interaction--balanced { border-left-color: var(--neon); }
.deck-bracket-interaction--slow { border-left-color: var(--warn); }
.deck-bracket-interaction--thin { border-left-color: var(--neon-red); }


.deck-bracket-answers {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin-bottom: var(--space-md);
}
.deck-bracket-answer {
  display: flex;
  align-items: baseline;
  gap: var(--space-snug);
  font-size: var(--font-sm);
  padding: 3px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.deck-bracket-answer-cost {
  flex: 0 0 34px;
  text-align: right;
  font-weight: 700;
  color: var(--text-dim);
}
.deck-bracket-answer-name { flex: 1; min-width: 0; }
.deck-bracket-answer-speed {
  flex: 0 0 auto;
  font-size: var(--font-xs);
  color: var(--text-dim);
}
.deck-bracket-answer-speed--instant { color: var(--neon-green); }

.deck-bracket-reasons {
  margin: 0 0 var(--space-2xs);
  padding-left: var(--space-xl);
}
.deck-bracket-reason {
  font-size: var(--font-sm);
  padding: 3px 0;
}
.deck-bracket-signals {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
}

.deck-bracket-signal {
  display: flex;
  gap: var(--space-snug);
  font-size: var(--font-sm);
  padding: var(--space-2xs) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.deck-bracket-signal-label {
  flex: 0 0 170px;
  font-weight: 600;
}
.deck-bracket-signal-cards {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.deck-bracket-signal--empty .deck-bracket-signal-label,
.deck-bracket-signal--empty .deck-bracket-signal-cards {
  color: var(--text-dim);
  font-weight: 400;
}




.consistency-widget {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-dim);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
}
.consistency-widget:hover,
.consistency-widget:focus-visible {
  border-color: var(--text-dim);
  outline: none;
}
.consistency-heading {
  font-size: var(--font-xs);
  color: var(--text-dim);
  margin-bottom: var(--space-2xs);
}
.consistency-value {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}
.consistency-turn {
  font-size: var(--font-3xl);
  font-weight: 700;
  line-height: 1;
}
.consistency-label {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-dim);
}
.consistency-sub {
  margin-top: var(--space-2xs);
  font-size: var(--font-xs);
  color: var(--text-dim);
}

.consistency-widget--good { border-left-color: var(--neon-green); }
.consistency-widget--good .consistency-turn { color: var(--neon-green); }
.consistency-widget--fair { border-left-color: var(--warn); }
.consistency-widget--fair .consistency-turn { color: var(--warn); }
.consistency-widget--poor { border-left-color: var(--neon-red); }
.consistency-widget--poor .consistency-turn { color: var(--neon-red); }

.consistency-curve {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
}
.consistency-curve-row {
  display: flex;
  align-items: center;
  gap: var(--space-snug);
  font-size: var(--font-sm);
}
.consistency-curve-turn {
  flex: 0 0 56px;
  color: var(--text-dim);
}
.consistency-curve-track {
  flex: 1;
  min-width: 0;
  height: 10px;
  border-radius: 5px;
  background: var(--bg-input);
  overflow: hidden;
}
.consistency-curve-fill {
  height: 100%;
  background: var(--neon);
  box-shadow: 0 0 6px var(--neon);
}
.consistency-curve-pct {
  flex: 0 0 48px;
  text-align: right;
  font-weight: 600;
}

.consistency-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
}
.consistency-stat {
  display: flex;
  gap: var(--space-snug);
  font-size: var(--font-sm);
  padding: var(--space-2xs) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.consistency-stat-label {
  flex: 0 0 190px;
  font-weight: 600;
}
.consistency-stat-value {
  flex: 1;
  min-width: 0;
}




.combo-proximity-widget {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-dim);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
}
.combo-proximity-widget:hover,
.combo-proximity-widget:focus-visible {
  border-color: var(--text-dim);
  outline: none;
}
.combo-proximity-heading {
  font-size: var(--font-xs);
  color: var(--text-dim);
  margin-bottom: var(--space-2xs);
}
.combo-proximity-value {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}
.combo-proximity-count {
  font-size: var(--font-3xl);
  font-weight: 700;
  line-height: 1;
}
.combo-proximity-label {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-dim);
}
.combo-proximity-sub {
  margin-top: var(--space-2xs);
  font-size: var(--font-xs);
  color: var(--text-dim);
}

.combo-proximity-widget--has { border-left-color: var(--neon-red); }
.combo-proximity-widget--has .combo-proximity-count {
  color: var(--neon-red);
  text-shadow: 0 0 8px color-mix(in srgb, var(--neon-red) 70%, transparent);
}
.combo-proximity-widget--near { border-left-color: var(--warn); }
.combo-proximity-widget--near .combo-proximity-count { color: var(--warn); }


.combo-proximity-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}
.combo-proximity-row {
  padding: var(--space-xs) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.combo-proximity-cards {
  font-size: var(--font-sm);
  font-weight: 600;
}
.combo-proximity-add { color: var(--neon); }
.combo-proximity-with {
  color: var(--text-dim);
  font-weight: 400;
}
.combo-proximity-produces {
  font-size: var(--font-xs);
  color: var(--text-dim);
  margin-top: var(--space-3xs);
}

.combo-proximity-copies {
  font-size: var(--font-xs);
  color: var(--text-dim);
  margin-top: var(--space-3xs);
}
.combo-proximity-copies--redundant { color: var(--neon-red); }

.decklist-textarea { min-height: 220px; }






.synergy-matrix-btn {
  --btn-glow: var(--neon-orange);
  margin-top: var(--space-snug);
  min-height: var(--control-h-lg);
  padding: var(--space-xs) var(--space-xl);
  font-family: inherit;
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--text);
  background: color-mix(in srgb, var(--btn-glow) 12%, var(--bg-panel));
  border: 2px solid color-mix(in srgb, var(--btn-glow) 55%, var(--border));
  
  border-radius: var(--radius);
  cursor: pointer;
  text-shadow: 0 0 6px color-mix(in srgb, var(--btn-glow) 70%, transparent);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
  animation: home-btn-glow-pulse 3s ease-in-out infinite;
}
.synergy-matrix-btn:hover, .synergy-matrix-btn:focus-visible {
  transform: translateY(-2px);
  border-color: var(--btn-glow);
}
.synergy-matrix-btn:focus-visible { outline: 2px solid var(--btn-glow); outline-offset: 3px; }


.synergy-matrix-legend {
  margin-top: var(--space-snug);
  padding: var(--space-snug) var(--space-md);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.synergy-matrix-legend-title {
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-2xs);
}
.synergy-matrix-legend ul {
  margin: 0;
  padding-left: var(--space-lg);
}
.synergy-matrix-legend li {
  margin: var(--space-3xs) 0;
}

.synergy-matrix-scroll {
  max-height: 65vh;
  overflow-y: auto;
  margin-top: var(--space-md);
}


.synergy-matrix-stage-inner {
  position: relative;
}

.synergy-lines-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.synergy-line {
  stroke: var(--neon-green);
  stroke-linecap: round;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.synergy-line.is-active {
  opacity: var(--glow-opacity, 0.5);
  stroke-width: var(--glow-width, 2);
  filter: drop-shadow(0 0 var(--glow-blur, 4px) var(--neon-green));
  animation: synergy-line-pulse 1.8s ease-in-out infinite;
}


@keyframes synergy-line-pulse {
  0%, 100% {
    opacity: calc(var(--glow-opacity, 0.5) * 0.75);
    filter: drop-shadow(0 0 calc(var(--glow-blur, 4px) * 0.7) var(--neon-green));
  }
  50% {
    opacity: var(--glow-opacity, 0.5);
    filter: drop-shadow(0 0 var(--glow-blur, 4px) var(--neon-green));
  }
}

.synergy-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: var(--space-xl) var(--space-lg);
  align-items: start;
}

.synergy-card-tile {
  position: relative;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: opacity var(--transition-base), filter var(--transition-base),
    border-color var(--transition-base);
}


.card-image-tile.synergy-card-tile:hover img {
  box-shadow: none;
  filter: none;
  border-color: var(--border);
}


.synergy-card-tile.is-faded {
  opacity: 0.22;
  filter: grayscale(70%);
}


.synergy-card-tile.is-hovered {
  border: 2px solid var(--neon-green);
  animation: game-changer-glow-pulse 2.2s ease-in-out infinite;
}


.synergy-card-tile.is-pinned {
  outline: 2px solid var(--neon-green);
  outline-offset: 3px;
}


.synergy-card-tile.is-connected {
  border: 2px solid var(--neon-orange);
  animation: synergy-connected-glow-pulse 2.2s ease-in-out infinite;
}

@keyframes synergy-connected-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--neon-orange) 50%, transparent), 0 0 8px color-mix(in srgb, var(--neon-orange) 55%, transparent);
  }
  50% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--neon-orange) 70%, transparent), 0 0 16px color-mix(in srgb, var(--neon-orange) 85%, transparent);
  }
}


@media (prefers-reduced-motion: reduce) {
  .synergy-line.is-active,
  .synergy-card-tile.is-hovered,
  .synergy-card-tile.is-connected {
    animation: none;
  }
  .synergy-line,
  .synergy-card-tile {
    transition: none;
  }
}

.combo-search-panel { margin-bottom: var(--space-lg); }

.combo-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-md);
}


.combo-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  box-shadow: var(--elev-1);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.combo-card:hover {
  box-shadow: var(--elev-2);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.combo-card-names { font-weight: 600; margin-bottom: var(--space-2xs); }

.combo-card-description {
  white-space: pre-line;
  font-size: var(--font-xs);
  color: var(--text-dim);
  margin-top: var(--space-xs);
}


.combo-section-row td {
  background: var(--bg-panel);
  padding: var(--space-sm) var(--space-md);
}

.result-actions { display: flex; gap: var(--space-sm); }

.price-summary {
  white-space: pre-wrap;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--font-xs);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-snug) var(--space-md);
  color: var(--text-dim);
}

.sync-token-box {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--font-sm);
  word-break: break-all;
  background: var(--bg-input);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  padding: var(--space-snug) var(--space-md);
  color: var(--text);
  user-select: all;
}



.autocomplete-wrap { position: relative; }

.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: var(--space-2xs);
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.autocomplete-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-snug);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.autocomplete-item:last-child { border-bottom: none; }

.autocomplete-item:hover,
.autocomplete-item.active {
  background: var(--accent-dim);
}

.autocomplete-item-thumb {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-input);
}

.autocomplete-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.autocomplete-item-name {
  font-size: var(--font-sm);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.autocomplete-item-type {
  font-size: var(--font-2xs);
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.autocomplete-empty {
  padding: var(--space-sm) var(--space-snug);
  font-size: var(--font-xs);
  color: var(--text-dim);
}


.add-card-preview {
  display: flex;
  align-items: center;
  gap: var(--space-snug);
  padding: var(--space-sm);
  margin: -4px 0 var(--space-sm);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.add-card-preview img {
  width: 48px;
  border-radius: var(--radius-xs);
  display: block;
  flex-shrink: 0;
}

.add-card-preview-label {
  font-size: var(--font-sm);
  color: var(--text);
}



#printing-picker-modal .modal { max-height: 90vh; }

.printing-picker-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-md);
  flex: 0 0 auto;
}


.printing-picker-manual {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-md);
}

.printing-picker-manual-set { flex: 1 1 140px; }
.printing-picker-manual-number { flex: 1 1 120px; }


.printing-picker-manual .btn { flex: 0 0 auto; }


#printing-picker-status:empty { display: none; }


.printing-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  align-content: start;
  gap: var(--space-md);
  flex: 1 1 auto;
  min-height: 140px;
  overflow-y: auto;
  margin: var(--space-md) 0;
}


.printing-picker-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--elev-1);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
    transform var(--transition-fast);
}


.printing-picker-tile:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
}


.printing-picker-tile.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--elev-2);
}

.printing-picker-tile.selected:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--accent), var(--elev-3);
}

@media (prefers-reduced-motion: reduce) {
  .printing-picker-tile { transition: none; }
  .printing-picker-tile:hover,
  .printing-picker-tile.selected:hover { transform: none; }
}

.printing-picker-tile img {
  width: 100%;
  border-radius: var(--radius-xs);
  display: block;
}


.printing-picker-tile-label {
  font-size: var(--font-xs);
  color: var(--text);
  line-height: 1.4;
}

.printing-picker-tile-label .help-text {
  font-size: var(--font-2xs);
}

.error-box {
  background: rgba(var(--error-rgb), 0.1);
  border: 1px solid rgba(var(--error-rgb), 0.4);
  color: var(--error);
  border-radius: var(--radius-sm);
  padding: var(--space-snug) var(--space-md);
  font-size: var(--font-sm);
}




.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  backdrop-filter: blur(6px) saturate(115%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: overlay-fade-in var(--transition-base) both;
}


.modal {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
  padding: var(--space-2xl);
  width: 440px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}


@keyframes modal-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: none; }
}


@keyframes overlay-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}


.modal-overlay:not(.hidden) .modal {
  animation: modal-enter 280ms var(--ease-out-back);
}

.modal h2 { margin: 0 0 var(--space-2xs) 0; font-size: var(--font-xl); }

.help-text {
  font-size: var(--font-xs);
  color: var(--text-dim);
  line-height: 1.5;
}

.btn-inline-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--accent-hover);
  cursor: pointer;
  text-decoration: underline;
}

.status-text.ok { color: var(--ok); }
.status-text.error { color: var(--error); }

.status-text.warn { color: var(--warn); }


.deck-source-list { display: flex; flex-direction: column; gap: var(--space-xs); max-height: 340px; overflow-y: auto; }
.deck-source-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-snug);
  padding: var(--space-sm) var(--space-snug);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}


.deck-source-row:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-input));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.deck-source-row-label { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; }
.deck-source-row-name { font-weight: 600; overflow-wrap: anywhere; }
.deck-source-row-meta { font-size: var(--font-xs); color: var(--text-dim); }
.deck-source-linked { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.modal-wide { width: 560px; max-width: 92vw; }
.modal-xwide { width: 900px; max-width: 95vw; }


#card-group-modal-grid {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: var(--space-2xs);
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-height: 65vh;
  overflow-y: auto;
  padding-right: var(--space-2xs);
}


.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-sm);
}


.settings-tab {
  position: relative;
  flex: 0 0 auto;
  white-space: nowrap;
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: 500;
  transition: color var(--transition-fast), background var(--transition-fast),
    box-shadow var(--transition-fast);
}

.settings-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, transparent);
}


.settings-tab.active {
  color: var(--text);
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent);
}

.settings-tab.active:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.settings-panel { padding-top: var(--space-2xs); }

.settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.settings-section:last-child { border-bottom: none; padding-bottom: 0; }

.settings-section h3 {
  margin: 0;
  font-size: var(--font-md);
  color: var(--text);
}

.theme-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.theme-option {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  text-align: left;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.theme-option:hover { border-color: var(--text-dim); }
.theme-option.active { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }

.theme-swatches { display: flex; gap: var(--space-2xs); flex-shrink: 0; }

.theme-swatch {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-option-name { display: block; font-size: var(--font-sm); font-weight: 600; color: var(--text); }
.theme-option-desc { display: block; font-size: var(--font-xs); color: var(--text-dim); margin-top: var(--space-3xs); }

.font-preview-glyph {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: var(--font-lg);
  color: var(--text);
}


.font-size-controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.font-size-slider {
  flex: 1;
  accent-color: var(--accent);
}

.font-size-number {
  width: 56px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  color: var(--text);
  font-family: inherit;
  text-align: right;
}

.font-size-number:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }

.font-size-unit { color: var(--text-dim); font-size: var(--font-sm); }


.sound-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.sound-control { display: flex; flex-direction: column; gap: var(--space-3xs); }

.sound-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.sound-label { min-width: 108px; font-size: var(--font-sm); }

.sound-slider { flex: 1; accent-color: var(--accent); }


.sound-value {
  min-width: 44px;
  text-align: right;
  color: var(--text-dim);
  font-size: var(--font-sm);
  font-variant-numeric: tabular-nums;
}

.sound-track-status { margin-top: 0; }


.admin-music-upload {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}

.admin-music-list { display: flex; flex-direction: column; gap: var(--space-sm); }

.admin-music-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.admin-music-info { flex: 1; min-width: 0; }


.admin-music-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-music-meta { color: var(--text-dim); font-size: var(--font-sm); }

.admin-music-player { height: 32px; max-width: 260px; }

@media (max-width: 640px) {
  
  .admin-music-row { flex-wrap: wrap; }
  .admin-music-player { max-width: 100%; width: 100%; }
}


.settings-subheading {
  margin: var(--space-2xs) 0 0;
  color: var(--text);
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-sm);
  color: var(--text-dim);
}

.checkbox-field input { width: auto; }




.topbar-right {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-snug);
  -webkit-app-region: no-drag;
}

.profile-chip {
  color: var(--text-dim);
  background: var(--bg-input);
  border: 1px solid var(--border);
}

.friend-name-row { display: flex; align-items: center; gap: var(--space-sm); margin-right: auto; }



.friend-avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }


.friend-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
}


.lobby-commander {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-width: 0;
}
.lobby-commander-name {
  color: var(--text-dim);
  font-size: var(--font-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lobby-commander-colors { display: inline-flex; gap: var(--space-3xs); flex-shrink: 0; }


.mana-sym {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0; 
  width: 1.16em;
  height: 1.16em;
  margin: 0 0.05em;
  vertical-align: -0.2em; 
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.42);
  background: var(--mana-sym-tone, var(--mana-sym-generic));
  color: var(--mana-sym-ink);
  line-height: 1;
  overflow: hidden; 
  user-select: none;
  
  box-shadow:
    inset 0 0.09em 0.14em rgba(255, 255, 255, 0.45),
    inset 0 -0.1em 0.16em rgba(0, 0, 0, 0.28),
    0 0.04em 0.12em rgba(0, 0, 0, 0.3);
  
  animation: mana-sym-deal 340ms var(--ease-out-back) backwards;
  
  animation-delay: calc(min(var(--mana-sym-i, 0), 5) * 55ms);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}


@keyframes mana-sym-deal {
  from { transform: scale(0.4) rotate(-24deg); opacity: 0; }
  to { transform: scale(1) rotate(0deg); opacity: 1; }
}


.mana-sym::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.7) 50%, transparent 62%);
  transform: translateX(-130%);
  pointer-events: none;
  animation: mana-sym-sheen 5.4s var(--ease) infinite;
  
  animation-delay: calc(min(var(--mana-sym-i, 0), 8) * 170ms);
}

@keyframes mana-sym-sheen {
  0%, 64% { transform: translateX(-130%); }
  80%, 100% { transform: translateX(130%); }
}


@media (prefers-reduced-motion: reduce) {
  .mana-sym, .mana-sym::after { animation-delay: 0s !important; }
}

.mana-sym:hover {
  transform: scale(1.12);
  box-shadow:
    inset 0 0.09em 0.14em rgba(255, 255, 255, 0.45),
    inset 0 -0.1em 0.16em rgba(0, 0, 0, 0.28),
    0 0 0.5em color-mix(in srgb, var(--mana-sym-tone, var(--mana-sym-generic)) 75%, transparent);
}

.mana-sym-glyph {
  position: relative; 
  font-size: 0.7em;
  font-weight: 800;
  letter-spacing: 0;
}


.mana-sym-svg {
  position: relative; 
  width: 66%;
  height: 66%;
  overflow: visible; 
}

.mana-sym--w { --mana-sym-tone: var(--mana-sym-w); }
.mana-sym--u { --mana-sym-tone: var(--mana-sym-u); }
.mana-sym--b { --mana-sym-tone: var(--mana-sym-b); }
.mana-sym--r { --mana-sym-tone: var(--mana-sym-r); }
.mana-sym--g { --mana-sym-tone: var(--mana-sym-g); }
.mana-sym--generic { --mana-sym-tone: var(--mana-sym-generic); }


.mana-sym--split {
  background: linear-gradient(
    135deg,
    var(--mana-sym-tone, var(--mana-sym-generic)) 0 49%,
    
    var(--mana-sym-tone-b, var(--mana-sym-generic)) 51% 100%
  );
}
.mana-sym--split .mana-sym-glyph {
  position: absolute;
  font-size: 0.5em;
}
.mana-sym--split .mana-sym-glyph--a { top: 9%; left: 13%; }
.mana-sym--split .mana-sym-glyph--b { right: 13%; bottom: 9%; }

.status-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--bg-input); 
  box-sizing: border-box;
}

.presence-own-toggle .status-dot,
.presence-option .status-dot {
  position: static;
  border: none;
  width: 9px;
  height: 9px;
}

.status-dot--online { background: var(--status-online); }
.status-dot--away { background: var(--status-away); }
.status-dot--dnd { background: var(--status-dnd); }
.status-dot--offline { background: var(--status-offline); }

.presence-own-wrap { position: relative; }

.presence-own-toggle { display: inline-flex; align-items: center; gap: var(--space-xs); }

.presence-picker {
  position: absolute;
  top: calc(100% + var(--space-sm));
  right: 0;
  width: 200px;
  padding: var(--space-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
  z-index: 150;
}


.presence-picker:not(.hidden) {
  animation: game-popover-in 140ms var(--ease);
  transform-origin: top right;
}

.presence-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-snug);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.presence-option:hover { background: var(--bg-input); }
.presence-option.active { background: color-mix(in srgb, var(--accent) 18%, transparent); font-weight: 600; }


.presence-option.active:hover {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}



.companion-slot { width: 130px; height: 32px; overflow: visible; position: relative; flex-shrink: 0; }

.companion-svg {
  width: 34px; height: 34px; overflow: visible; opacity: 0;
  position: absolute; left: 0; top: 50%; margin-top: -17px; 
  transform: translateX(0) scale(0.4) translateY(6px);
}
.companion-svg.enter { animation: companion-enter 420ms cubic-bezier(.3,1.6,.4,1) forwards; }
.companion-svg.exit { animation: companion-exit 260ms ease-in forwards; }
@keyframes companion-enter { to { opacity: 1; transform: translateX(0) scale(1) translateY(0); } }
@keyframes companion-exit { to { opacity: 0; transform: translateX(0) scale(0.5) translateY(6px); } }


.companion-svg.pacing {
  opacity: 1;
  animation: companion-pace 5.2s ease-in-out infinite;
}
@keyframes companion-pace {
  0%, 100% { transform: translateX(0) scaleX(1); }
  48% { transform: translateX(96px) scaleX(1); }
  50% { transform: translateX(96px) scaleX(-1); }
  98% { transform: translateX(0) scaleX(-1); }
}
.companion-svg .companion-foot-l, .companion-svg .companion-foot-r { transform-origin: top center; }
.companion-svg.pacing .companion-foot-l { animation: companion-pace-step-l 0.32s ease-in-out infinite; }
.companion-svg.pacing .companion-foot-r { animation: companion-pace-step-r 0.32s ease-in-out infinite; }
@keyframes companion-pace-step-l { 0%, 100% { transform: rotate(22deg); } 50% { transform: rotate(-18deg); } }
@keyframes companion-pace-step-r { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(22deg); } }

.companion-svg .companion-idle-blink { animation: mascot-blink 3.2s ease-in-out infinite; transform-origin: center; }

.companion-svg .companion-idle-cat-tail { animation: companion-cat-tail 1.6s ease-in-out infinite; transform-origin: 20px 26px; }
@keyframes companion-cat-tail { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }

.companion-svg .companion-idle-dog-tail { animation: companion-dog-tail 0.35s ease-in-out infinite; transform-origin: 26px 22px; }
@keyframes companion-dog-tail { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } }
.companion-svg .companion-idle-dog-bob { animation: companion-dog-bob 1.1s ease-in-out infinite; }
@keyframes companion-dog-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }

.companion-svg .companion-idle-owl-tilt { animation: companion-owl-tilt 2.4s ease-in-out infinite; transform-origin: 17px 20px; }
@keyframes companion-owl-tilt { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }


.companion-slot.essence-active .companion-svg.pacing {
  filter: drop-shadow(0 0 4px var(--accent-hover)) drop-shadow(0 0 8px var(--ok));
  animation-name: companion-pace, companion-essence-glow;
  animation-duration: 5.2s, 1.6s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
}
@keyframes companion-essence-glow {
  0%, 100% { filter: drop-shadow(0 0 3px var(--accent-hover)) drop-shadow(0 0 6px var(--ok)); }
  50% { filter: drop-shadow(0 0 6px var(--accent-hover)) drop-shadow(0 0 12px var(--ok)); }
}




.auth-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: var(--space-lg) var(--space-md);
  z-index: 200;
}

.auth-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2xl);
  width: 400px;
  max-width: 92vw;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}


.auth-mascot {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}


.auth-mascot-figure {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 108px;
  
  transform: translate(-50%, -50%);
  transition: left 6.5s cubic-bezier(.4, 0, .2, 1), top 6.5s cubic-bezier(.4, 0, .2, 1);
}


@media (max-width: 600px) {
  .auth-mascot { display: none; }
}


.auth-card {
  position: relative;
  z-index: 1;
}


.auth-title {
  font-weight: 700;
  font-size: var(--font-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  justify-content: center;
  margin-bottom: var(--space-2xs);
}
.auth-title .title-icon { width: 3.6em; height: 3.6em; }


.auth-welcome {
  margin: calc(var(--space-md) * -1) 0 0 0;
  text-align: center;
  color: var(--text-dim);
  font-size: var(--font-sm);
  line-height: 1.5;
}
.auth-welcome strong { color: var(--text); font-weight: 600; }

.auth-view { display: flex; flex-direction: column; gap: var(--space-lg); }

.auth-actions { display: flex; justify-content: flex-end; gap: var(--space-sm); flex-wrap: wrap; }

.profile-list { display: flex; flex-direction: column; gap: var(--space-sm); }

.profile-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  min-height: var(--control-h);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  font-size: var(--font-sm);
  text-align: left;
}

.profile-btn:hover { border-color: var(--accent); }

.profile-btn .twofa-tag {
  font-size: var(--font-2xs);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--space-3xs) var(--space-sm);
}



.decks-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}


.decks-toolbar .filter-dropdown-group {
  flex-direction: row;
  align-items: center;
  gap: var(--space-xs);
}


.decks-toolbar .filter-dropdown {
  min-width: 0;
}


.decks-toolbar label.field {
  flex: 0 1 120px;
  min-width: 0;
}

.decks-toolbar label.field input {
  width: 100%;
  min-width: 0;
}


.toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}



.view-toggle {
  display: flex;
  gap: var(--space-2xs);
  margin-bottom: var(--space-snug);
}


#tab-collection.active {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#collection-detail:not(.hidden) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
#collection-detail .two-col {
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
#collection-detail .panel.results {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#collection-detail .collection-list {
  flex: 1;
  min-height: 0;
  max-height: none;
}


.import-mode-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: -6px 0 var(--space-md);
}
.import-mode-row .checkbox-field {
  align-items: flex-start;
  line-height: 1.4;
}
.import-mode-row .checkbox-field input { margin-top: var(--space-3xs); }
.import-mode-row .field-hint { display: block; }


.collection-view-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-snug);
}
.collection-view-toolbar .view-toggle,
.collection-view-toolbar .mana-toggle-row {
  margin-bottom: 0;
}

.view-toggle-btn {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  min-height: var(--control-h-sm);
  padding: var(--space-2xs) var(--space-md);
  font-size: var(--font-xs);
  cursor: pointer;
}

.view-toggle-btn.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}



.decks-grid.view-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.decks-grid.view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-lg);
}

.decks-grid.view-card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-lg);
}


.deck-card,
.deck-tile {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  box-shadow: var(--elev-1);
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.deck-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  box-shadow: var(--elev-1);
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base);
}


.deck-card:hover,
.deck-tile:hover,
.deck-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}


@keyframes deck-item-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}


.decks-grid > .deck-card,
.decks-grid > .deck-tile,
.decks-grid > .deck-row {
  animation: deck-item-in var(--transition-base) backwards;
}

.decks-grid > *:nth-child(1) { animation-delay: 0ms; }
.decks-grid > *:nth-child(2) { animation-delay: 25ms; }
.decks-grid > *:nth-child(3) { animation-delay: 50ms; }
.decks-grid > *:nth-child(4) { animation-delay: 75ms; }
.decks-grid > *:nth-child(5) { animation-delay: 100ms; }
.decks-grid > *:nth-child(6) { animation-delay: 125ms; }
.decks-grid > *:nth-child(7) { animation-delay: 150ms; }
.decks-grid > *:nth-child(n + 8) { animation-delay: 175ms; }



.deck-row .deck-name { flex: 0 1 auto; min-width: 140px; }
.deck-row .deck-meta { flex: 1; }
.deck-row .deck-actions { margin-top: 0; flex: 0 1 auto; }

.deck-card .deck-name,
.deck-tile .deck-name,
.deck-row .deck-name { font-weight: 600; font-size: var(--font-md); }

.deck-card .deck-meta,
.deck-tile .deck-meta,
.deck-row .deck-meta { font-size: var(--font-xs); color: var(--text-dim); line-height: 1.5; }

.deck-card .deck-actions,
.deck-tile .deck-actions,
.deck-row .deck-actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-2xs); }


.overflow-menu { position: relative; display: inline-flex; }

.overflow-menu-popup {
  position: absolute;
  top: calc(100% + var(--space-2xs));
  left: 0;
  z-index: 40; 
  min-width: 168px;
  display: flex;
  flex-direction: column;
  padding: var(--space-3xs);
  background: var(--bg-panel);
  border: 1px solid var(--border-lit);
  border-radius: var(--radius);
  box-shadow: var(--elev-2, 0 8px 24px rgba(0, 0, 0, 0.45));
}
.overflow-menu-popup.hidden { display: none; }


.deck-actions > .overflow-menu:last-child .overflow-menu-popup { left: auto; right: 0; }

.overflow-menu-item {
  appearance: none;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--font-xs);
  line-height: 1.4;
  text-align: left;
  color: var(--text);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  
  min-height: 32px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.overflow-menu-item:hover,
.overflow-menu-item:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.overflow-menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }


.overflow-menu-item--danger {
  color: var(--error);
  margin-top: var(--space-3xs);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding-top: var(--space-sm);
}
.overflow-menu-item--danger:hover,
.overflow-menu-item--danger:focus-visible {
  background: color-mix(in srgb, var(--error) 16%, transparent);
  color: var(--error);
}

@media (max-width: 760px) {
  
  .overflow-menu-item { min-height: 44px; font-size: var(--font-sm); }
}


.deck-card .deck-actions .btn,
.deck-tile .deck-actions .btn,
.deck-row .deck-actions .btn { min-height: var(--control-h-sm); padding: var(--space-2xs) var(--space-md); font-size: var(--font-xs); }

.deck-tile-art {
  width: 100%;
  aspect-ratio: 63 / 88;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.deck-tile-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
  transition: transform var(--transition-slow), filter var(--transition-slow);
}


.deck-tile:hover .deck-tile-art img {
  transform: scale(1.06);
  filter: brightness(1.05);
}


@media (prefers-reduced-motion: reduce) {
  .decks-grid > .deck-card,
  .decks-grid > .deck-tile,
  .decks-grid > .deck-row {
    animation: none;
  }
  .deck-card,
  .deck-tile,
  .deck-row,
  .deck-tile-art img {
    transition: none;
  }
  .deck-card:hover,
  .deck-tile:hover,
  .deck-row:hover {
    transform: none;
  }
  .deck-tile:hover .deck-tile-art img {
    transform: none;
  }
}

.deck-tile-art .missing-img { width: 100%; height: 100%; }


.deck-detail-back { margin-bottom: var(--space-md); }

.deck-detail-header {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}


.deck-detail-art {
  width: 140px;
  flex-shrink: 0;
  aspect-ratio: 63 / 88;
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: var(--elev-2);
}
.deck-detail-art img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }


.deck-detail-art-pair {
  width: 200px;
  aspect-ratio: auto;
  display: flex;
  gap: var(--space-xs);
}

.deck-detail-art-pair img {
  width: auto;
  height: auto;
  flex: 1 1 0;
  min-width: 0; 
  aspect-ratio: 63 / 88;
}

.deck-detail-info { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }

.deck-detail-name {
  font-size: var(--font-2xl);
  font-weight: 700;
  cursor: pointer;
}
.deck-detail-name:hover { text-decoration: underline dotted; }


#deck-detail .deck-actions {
  margin-bottom: var(--space-lg);
  display: flex;
  gap: var(--space-snug);
  flex-wrap: wrap;
}


.deck-share-link-section:empty { display: none; }

.deck-share-link-section {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.deck-share-link-heading { font-weight: 700; font-size: var(--font-sm); }

.deck-share-link-body { display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start; }

.deck-share-link-row { display: flex; gap: var(--space-xs); align-items: center; width: 100%; }


.deck-share-link-url {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--control-h-sm);
  padding: var(--space-2xs) var(--space-xs);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--font-xs);
}

.deck-share-link-note { margin: 0; color: var(--text-dim); font-size: var(--font-xs); line-height: 1.5; }
.deck-share-link-error { margin: 0; color: var(--error); font-size: var(--font-xs); line-height: 1.5; }


#deck-detail .deck-analysis-sections { margin-bottom: var(--space-lg); }

.badge-warn-text { color: var(--error) !important; }




.collection-detail-toolbar {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-md);
}


.collection-detail-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  min-width: 0;
}

.collection-stats-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}


.collection-stats-pills {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.collection-stat-pill {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  background: var(--bg-input);
  border: 1px solid var(--border);
}

.collection-stat-pill-label { color: var(--text-dim); }
.collection-stat-pill-value { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }


.collection-stat-pill--value {
  border: 2px solid var(--neon-green);
  animation: game-changer-glow-pulse 2.2s ease-in-out infinite;
}
.collection-stat-pill--value .collection-stat-pill-value {
  color: var(--neon-green);
  text-shadow: 0 0 6px color-mix(in srgb, var(--neon-green) 70%, transparent);
}

.collection-stat-pill--warn { border-color: var(--warn); }
.collection-stat-pill--warn .collection-stat-pill-value { color: var(--warn); }

.collection-list {
  max-height: 520px;
  overflow-y: auto;
}


.collection-list.view-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.collection-list.view-grid,
.card-price-list.view-grid,
.card-role-group.view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-sm);
}

.collection-list.view-card,
.card-price-list.view-card,
.card-role-group.view-card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-md);
}

.collection-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-snug) var(--space-md);
  box-shadow: var(--elev-1);
  transition: transform var(--transition-fast), background var(--transition-fast),
    box-shadow var(--transition-fast);
}


.collection-row:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel));
  box-shadow: var(--elev-2);
}


@media (prefers-reduced-motion: reduce) {
  .collection-row { transition: none; }
  .collection-row:hover { transform: none; }
}

.collection-row-name {
  flex: 1;
  
  min-width: 0;
  font-size: var(--font-sm);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.collection-row-price {
  font-size: var(--font-xs);
  color: var(--text-dim);
  white-space: nowrap;
}

.collection-row-qty {
  
  flex: 0 0 60px;
  width: 60px;
  text-align: center;
}

.collection-row .btn { min-height: var(--control-h-sm); padding: var(--space-2xs) var(--space-md); font-size: var(--font-xs); }



.card-price-list.view-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-height: 520px;
  overflow-y: auto;
}


.card-price-list.view-list,
.card-price-list .card-role-group.view-list,

.collection-list .card-role-group.view-list {
  gap: var(--space-3xs);
}

.card-row {
  display: grid;
  
  grid-template-columns: 1.75rem minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--space-xs);
  position: relative;
  padding: var(--space-3xs) var(--space-2xs);
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  font-size: var(--font-sm);
  transition: background-color var(--transition-fast);
}

.card-row:hover { background: rgba(var(--accent-rgb), 0.12); }


.card-row:focus { outline: none; }

.card-row-qty { color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }

.card-row-name {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  color: var(--text);
}


.card-row-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.card-row:hover .card-row-name-text { color: var(--accent); }

.card-row-cost { display: flex; align-items: center; gap: 1px; flex-shrink: 0; }


.card-row-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim);
  font-size: var(--font-2xs);
}


.card-row--curating .card-row-tools {
  opacity: 1;
  pointer-events: auto;
}


.card-row-tools .collection-row-qty {
  flex: 0 0 auto;
  width: 4.5rem;
  text-align: center;
}

.card-row-price {
  color: var(--text-dim);
  font-size: var(--font-2xs);
  min-width: 3.25rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}


.card-row .game-changer-badge { position: static; line-height: 0; }
.card-row .lebard-face-icon { width: 15px; height: 15px; }
.card-row .commander-crown { margin-right: 0; }
.card-row .new-card-badge,
.card-row .rating-badge { margin-left: 0; }


.card-row-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-md);
  margin-left: var(--space-xs);
}

@media (hover: hover) {
  .card-row-tools {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
  }
  .card-row:hover .card-row-tools,
  .card-row:focus-within .card-row-tools {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-row,
  .card-row-tools { transition: none; }
}


@media (hover: none) {
  .card-row { padding: var(--space-2xs); }
}


.card-price-list,
.collection-list {
  container-type: inline-size;
  container-name: deckcards;
}

@container deckcards (max-width: 560px) {
  .card-row-tools .market-links-row { display: none; }
}


.card-role-heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  padding-bottom: var(--space-3xs);
  border-bottom: 1px solid var(--border);
}

.card-role-count {
  color: var(--text);
  font-weight: 600;
  font-size: 0.9em;
  
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: normal;
  padding: 0 var(--space-2xs);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.card-role-heading .rating-badge { margin-left: auto; }


.card-view-controls {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);
  flex-wrap: wrap;
}


.price-sort-wrap {
  margin-left: auto;
}



.filter-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.filter-dropdown-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.filter-dropdown {
  width: auto;
  min-width: 140px;
  padding: 5px var(--space-snug);
  font-size: var(--font-xs);
  cursor: pointer;
}

.filter-dropdown:disabled {
  cursor: not-allowed;
}


.price-filter-bar {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);
  flex-wrap: wrap;
  padding: var(--space-snug) var(--space-lg);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.price-filter-bar--busy {
  opacity: 0.6;
}


.card-price-list.card-price-list--grouped {
  max-height: 640px;
  overflow-y: auto;
}

.card-role-heading { margin: var(--space-lg) 0 var(--space-xs); }

.card-role-heading:first-child { margin-top: 0; }


.card-price-list.view-grid > .card-role-heading,
.card-price-list.view-card > .card-role-heading,
.collection-list.view-grid > .card-role-heading,
.collection-list.view-card > .card-role-heading,
.card-price-list.view-grid > .card-role-group,
.card-price-list.view-card > .card-role-group,
.collection-list.view-grid > .card-role-group,
.collection-list.view-card > .card-role-group {
  grid-column: 1 / -1;
}

.card-role-group.view-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xs);
}



.chart-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-snug);
}


.mana-curve-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.mana-curve-bars {
  display: flex;
  align-items: flex-end;
  gap: var(--space-xs);
  height: 110px;
  padding: var(--space-2xs) 0;
  flex: 1;
  min-width: 180px;
}


.mana-curve-pie-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.4s ease, transform 0.4s var(--ease);
}
.mana-curve-pie-wrap--in { opacity: 1; transform: scale(1); }


.mana-curve-pie-stack {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}


.mana-curve-pie-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--border);
  animation: mana-curve-ring-spin 12s linear infinite, mana-curve-ring-pulse 2.6s ease-in-out infinite;
}
.mana-curve-pie-ring--empty {
  background: var(--border);
  animation: none;
}
@keyframes mana-curve-ring-spin {
  to { transform: rotate(360deg); }
}
@keyframes mana-curve-ring-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px var(--border),
      0 0 6px 1px var(--pie-glow-color, var(--neon)),
      0 0 14px 2px color-mix(in srgb, var(--pie-glow-color, var(--neon)) 55%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 1px var(--border),
      0 0 14px 3px var(--pie-glow-color, var(--neon)),
      0 0 30px 6px color-mix(in srgb, var(--pie-glow-color, var(--neon)) 70%, transparent);
  }
}

.mana-curve-pie {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--border);
  
  animation: mana-curve-pie-neon-pulse 2.6s ease-in-out infinite;
  transition: transform 0.2s var(--ease);
}
.mana-curve-pie--clickable { cursor: pointer; }
.mana-curve-pie--clickable:hover,
.mana-curve-pie--clickable:focus-visible {
  transform: scale(1.06);
}
@keyframes mana-curve-pie-neon-pulse {
  0%, 100% { filter: saturate(1.1) brightness(1) drop-shadow(0 0 3px rgba(255, 255, 255, 0.12)); }
  50% { filter: saturate(1.5) brightness(1.12) drop-shadow(0 0 9px rgba(255, 255, 255, 0.3)); }
}

.mana-curve-pie-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-size: var(--font-2xs);
  color: var(--text-dim);
  white-space: nowrap;
}


.mana-curve-pie-legend-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  background: none;
  border: none;
  margin: -2px -4px;
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: 4px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.mana-curve-pie-legend-row:hover,
.mana-curve-pie-legend-row:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  transform: translateX(2px);
}
.mana-curve-pie-legend-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.mana-curve-pie-legend-row:disabled {
  cursor: default;
}
.mana-curve-pie-legend-row:disabled:hover {
  background: none;
  transform: none;
}

.mana-curve-pie-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}


.mana-curve-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2xs);
  height: 100%;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.mana-curve-col:disabled {
  cursor: default;
}
.mana-curve-col:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.mana-curve-bar {
  width: 100%;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--ease), filter 0.15s ease, box-shadow 0.15s ease;
}
.mana-curve-col:not(:disabled):hover .mana-curve-bar,
.mana-curve-col:focus-visible .mana-curve-bar {
  filter: brightness(1.3);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent);
}

.mana-curve-bar--in { transform: scaleY(1); }

.mana-curve-count { font-size: var(--font-2xs); color: var(--text-dim); }
.mana-curve-label { font-size: var(--font-2xs); color: var(--text-dim); }

.swatch.W { background: #f8f6d8; }
.swatch.U { background: #4f8fd8; }
.swatch.B { background: #3a3a3f; }
.swatch.R { background: #d8503a; }
.swatch.G { background: #4f9a5a; }
.swatch.C { background: #9aa1ae; }


.game-changers-wrap {
  margin: 0 auto;
  align-self: center;
}



.card-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-sm);
  
  align-items: stretch;
}

.card-image-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
  
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  
  height: 100%;
}


.card-price-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }


.market-totals-row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin: var(--space-2xs) 0 var(--space-sm);
}

.market-total-badge {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  background: var(--bg-input);
  border: 1px solid var(--border);
}


.market-total-needed { border-color: var(--accent-dim); }
.market-total-needed .market-total-value { color: var(--accent); }

.market-total-label { color: var(--text-dim); }
.market-total-value { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }


.price-refresh {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin: 0 0 var(--space-sm);
}

.price-refresh-button {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  min-height: var(--control-h-sm);
  padding: var(--space-2xs) var(--space-md);
  font-size: var(--font-xs);
  cursor: pointer;
}

.price-refresh-button:hover:not(:disabled) {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.price-refresh-button:disabled {
  opacity: 0.6;
  cursor: default;
}

.price-refresh-status {
  font-size: var(--font-xs);
  color: var(--text-dim);
}


.price-refresh-status--warn { color: var(--warn); }



.market-links-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.market-link {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-2xs);
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--accent-dim);
  border-radius: 50%;
  background: var(--bg-input);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.market-link:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }


.market-link-unavailable {
  color: var(--text-dim);
  border-color: var(--border);
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}
.market-link-unavailable:hover { background: var(--bg-input); }


.card-printing-clickable { cursor: pointer; border-radius: var(--radius-sm); transition: background-color var(--transition-fast); }
.card-price-row-info.card-printing-clickable:hover,
.card-row-name.card-printing-clickable:hover,
.collection-row-name.card-printing-clickable:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.card-image-tile.card-printing-clickable:hover { outline: 1px solid var(--accent-dim); outline-offset: 2px; }


.card-qty-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}


.card-qty-stepper-tile { margin-top: var(--space-3xs); }


.card-qty-btn {
  padding: var(--space-3xs) var(--space-sm) !important;
  font-size: var(--font-sm) !important;
  line-height: 1;
  color: var(--text-dim);
  
  min-width: var(--control-h-sm);
}

.card-qty-btn:hover { color: var(--text); }

.card-qty-btn--danger:hover { color: var(--danger); }

.card-qty-value {
  min-width: 1.4em;
  text-align: center;
  font-size: var(--font-xs);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}


.undo-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-snug) var(--space-lg);
  box-shadow: var(--shadow-modal);
  z-index: 500;
  animation: undo-toast-in var(--transition-base);
}

@keyframes undo-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.undo-toast-message { font-size: var(--font-sm); color: var(--text); }
.undo-toast-btn { flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .undo-toast { animation: none; }
}


.replacement-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  text-align: center;
  border-style: dashed;
}

.replacement-list { display: flex; flex-direction: column; gap: var(--space-sm); max-height: 50vh; overflow-y: auto; }

.replacement-row {
  display: flex;
  align-items: center;
  gap: var(--space-snug);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-snug);
}

.replacement-row > div:first-child { flex: 1; min-width: 0; }


.card-image-tile img {
  width: 100%;
  display: block;
  aspect-ratio: 63 / 88;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: box-shadow var(--transition-fast), filter var(--transition-fast),
    border-color var(--transition-fast);
}


.card-image-tile:hover img {
  box-shadow: var(--elev-2), 0 0 16px color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  filter: brightness(1.06);
}

.card-image-tile .qty-badge {
  font-size: var(--font-2xs);
  color: var(--text-dim);
}


.card-name-line {
  line-height: 1.35;
  min-height: 2.7em;
  margin-bottom: auto;
}

.card-image-tile .missing-img {
  width: 100%;
  aspect-ratio: 63 / 88;
  background: var(--bg-input);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-3xs);
  color: var(--text-dim);
  padding: var(--space-2xs);
}




.card-hover-target:not(button):not(.btn) { cursor: zoom-in; }


.card-name-link {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  text-decoration-color: var(--text-dim);
}

.card-name-link:hover { text-decoration-color: var(--accent); }

.card-hover-preview {
  position: fixed;
  z-index: 500;
  pointer-events: none; 
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  max-width: 300px;
}

.card-hover-preview.hidden { display: none; }

.card-hover-preview img {
  display: block;
  width: 100%;
  border-radius: var(--radius-sm);
}

.card-hover-preview-label {
  margin-top: var(--space-xs);
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--text);
  text-align: center;
}





.card-qty-btn {
  min-height: var(--control-h-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.chat-window-close {
  min-height: var(--control-h-sm);
  min-width: var(--control-h-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}



.scan-video-wrap {
  position: relative;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scan-video-wrap video {
  width: 100%;
  max-height: 340px;
  display: block;
}


.scan-guide-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  pointer-events: none;
}

.scan-guide {
  width: min(56%, 100%);
  max-height: 100%;
  aspect-ratio: 63 / 88;
  border-radius: 16px;
  border: 3px solid var(--neon-green);
  animation: scan-guide-pulse 2.2s ease-in-out infinite;
}

.scan-guide--active {
  animation: scan-guide-pulse 0.7s ease-in-out infinite;
}

@keyframes scan-guide-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--neon-green) 50%, transparent),
      0 0 10px color-mix(in srgb, var(--neon-green) 55%, transparent),
      inset 0 0 10px color-mix(in srgb, var(--neon-green) 25%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--neon-green) 80%, transparent),
      0 0 22px color-mix(in srgb, var(--neon-green) 90%, transparent),
      inset 0 0 18px color-mix(in srgb, var(--neon-green) 45%, transparent);
  }
}

.scan-live-hint {
  text-align: center;
  min-height: 1.2em;
  margin-top: -4px;
  color: var(--neon-green);
}


.scan-result {
  display: flex;
  gap: var(--space-md);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  box-shadow: var(--elev-1);
  align-items: flex-start;
}

.scan-result img {
  width: 100px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.scan-result-img-pickable {
  cursor: pointer;
  outline-offset: 2px;
  transition: box-shadow var(--transition-fast);
}

.scan-result-img-pickable:hover,
.scan-result-img-pickable:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
}

.scan-result-info { display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; }

.scan-result-name { font-weight: 700; font-size: var(--font-md); }

.scan-result-meta { font-size: var(--font-xs); color: var(--text-dim); line-height: 1.5; }


.scan-result-note {
  font-size: var(--font-xs);
  line-height: 1.5;
  color: var(--warn);
  border-left: 2px solid currentColor;
  padding-left: var(--space-sm);
}


.scan-exact-badge {
  font-size: var(--font-xs);
  line-height: 1.5;
  color: var(--neon-green);
  border-left: 2px solid currentColor;
  padding-left: var(--space-sm);
  font-weight: 600;
}




.decklist-scan-preview {
  display: block;
  max-width: 100%;
  max-height: 180px;
  width: auto;
  margin: var(--space-sm) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--elev-1);
  object-fit: contain;
}

.decklist-scan-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: var(--space-sm) 0;
}
.decklist-scan-results:empty { display: none; }



.scan-review-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 2px solid var(--warn);
  border-radius: var(--radius);
  box-shadow: var(--elev-1);
  
  animation: deck-item-in var(--transition-base) backwards;
  transition: transform var(--transition-fast), background var(--transition-fast),
    box-shadow var(--transition-fast);
}

.scan-review-row:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel));
  box-shadow: var(--elev-2);
}

.scan-review-main { display: flex; flex-direction: column; gap: var(--space-3xs); flex: 1; min-width: 0; }
.scan-review-name { font-weight: 600; }
.scan-review-raw { font-size: var(--font-xs); color: var(--text-dim); font-style: italic; }


.scan-unread-list {
  margin: var(--space-2xs) 0 0;
  padding-left: var(--space-xl);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--font-xs);
  color: var(--text-dim);
  line-height: 1.6;
}


.admin-table-wrap {
  overflow-x: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--elev-1);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-xs);
  white-space: nowrap;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: var(--space-snug) var(--space-md);
  border-bottom: 1px solid var(--border);
}


.admin-table tbody tr:last-child td { border-bottom: none; }


.admin-table select {
  width: auto;
  min-width: 170px;
  padding: var(--space-xs) var(--space-snug);
}


.admin-table tbody tr:not(.combo-section-row):hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}


@media (max-width: 760px) {
  #combo-browse-table th:nth-child(3),
  #combo-browse-table td:nth-child(3) { display: none; }

  #combo-browse-table th,
  #combo-browse-table td {
    white-space: normal;
    padding: var(--space-snug) var(--space-sm);
  }
}




.home-hero {
  position: relative;
  
  min-height: 232px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
    var(--bg-panel);
  box-shadow: var(--elev-2);
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
}


.home-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.home-hero-text, .home-actions {
  position: relative;
  z-index: 1;
}

.home-hero-text { text-align: center; max-width: 560px; }

.home-title {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-4xl);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.home-subtitle { margin: 0; color: var(--text-dim); font-size: var(--font-md); line-height: 1.5; }


.home-glance {
  margin: var(--space-sm) 0 0;
  color: var(--text-dim);
  font-size: var(--font-xs);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}



.home-recent { margin-top: 0; }

.home-recent-title {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-2xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.home-recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-2xs);
}


.home-recent-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3xs);
  width: 100%;
  padding: var(--space-snug) var(--space-md);
  font-family: inherit;
  text-align: left;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base);
}
.home-recent-row:hover,
.home-recent-row:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-panel));
}
.home-recent-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.home-recent-name {
  font-weight: 600;
  font-size: var(--font-sm);
  line-height: 1.3;
  
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-recent-meta {
  font-size: var(--font-2xs);
  color: var(--text-dim);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.home-feed {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: var(--space-xl);
  align-items: start;
}


#tab-home.active {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

body.is-guest #tab-home > .home-feed { order: -1; }

.home-feed-panel {
  min-width: 0; 
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.home-feed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}

.home-feed-title {
  margin: 0;
  font-size: var(--font-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.home-feed-note {
  font-size: var(--font-2xs);
  color: var(--text-dim);
  opacity: 0.8;
}




.home-news-window {
  height: 268px;
  overflow-y: auto;
  overscroll-behavior: contain; 
  scrollbar-width: thin;
}
.home-news-window:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.home-news-list { list-style: none; margin: 0; padding: 0; }

.home-news-item + .home-news-item { border-top: 1px solid var(--border); }

.home-news-link {
  display: block;
  padding: var(--space-sm) var(--space-2xs);
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background var(--transition-base);
}
a.home-news-link:hover,
a.home-news-link:focus-visible {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
a.home-news-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.home-news-link--plain { cursor: default; }

.home-news-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-size: var(--font-2xs);
  color: var(--text-dim);
}
.home-news-source {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 70%, var(--text-dim));
}
.home-news-when { margin-left: auto; white-space: nowrap; }

.home-news-headline {
  font-size: var(--font-sm);
  font-weight: 600;
  line-height: 1.35;
  margin-top: var(--space-3xs);
}


.home-news-summary {
  margin: var(--space-3xs) 0 0;
  font-size: var(--font-2xs);
  line-height: 1.4;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}



.home-meta-formats { display: flex; gap: var(--space-2xs); }

.home-meta-note {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-2xs);
}

.home-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: var(--space-sm);
  
  max-height: 268px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.home-meta-tile {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-2xs) var(--space-sm) var(--space-2xs) var(--space-2xs);
  font-family: inherit;
  text-align: left;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base);
}
.home-meta-tile:hover,
.home-meta-tile:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-panel));
}
.home-meta-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


.home-meta-tile.is-loading { opacity: 0.55; cursor: progress; }


.home-meta-art {
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: var(--radius);
  background: var(--bg);
}

.home-meta-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.home-meta-tile-head {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--font-2xs);
  color: var(--text-dim);
}
.home-meta-rank { font-variant-numeric: tabular-nums; }
.home-meta-pips { display: inline-flex; align-items: center; gap: 1px; }

.home-meta-name {
  font-size: var(--font-2xs);
  font-weight: 600;
  line-height: 1.25;
  
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-meta-count { font-size: var(--font-2xs); color: var(--text-dim); font-variant-numeric: tabular-nums; }


@media (max-width: 900px) {
  .home-feed { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .home-meta-grid { max-height: none; overflow-y: visible; }
}

@media (max-width: 760px) {
  .home-news-window { height: 220px; }
  .home-meta-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}


.home-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  max-width: 720px;
}


.home-nav-btn {
  
  --btn-glow: var(--accent);
  position: relative;
  padding: var(--space-snug) var(--space-lg);
  font-size: var(--font-md);
  font-weight: 700;
  font-family: inherit;
  color: var(--text);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--btn-glow) 18%, transparent), transparent 60%),
    color-mix(in srgb, var(--btn-glow) 10%, var(--bg-panel));
  
  border: 1px solid color-mix(in srgb, var(--btn-glow) 70%, var(--border));
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform var(--transition-base), border-color var(--transition-base),
    background var(--transition-base), box-shadow var(--transition-base);
  
  animation: home-btn-glow-pulse 3s ease-in-out infinite;
}


.home-nav-btn:hover, .home-nav-btn:focus-visible {
  transform: translateY(-4px);
  border-color: var(--btn-glow);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--btn-glow) 28%, transparent), transparent 60%),
    color-mix(in srgb, var(--btn-glow) 16%, var(--bg-panel));
}

.home-nav-btn:active {
  transform: translateY(-1px);
  transition-duration: 60ms;
}

.home-nav-btn:focus-visible { outline: 2px solid var(--btn-glow); outline-offset: 3px; }


@keyframes home-btn-glow-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--btn-glow) 45%, transparent),
      0 0 16px color-mix(in srgb, var(--btn-glow) 35%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--btn-glow) 68%, transparent),
      0 0 26px color-mix(in srgb, var(--btn-glow) 55%, transparent);
  }
}


.home-stage-figure {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130px;
  transition: left 6.5s cubic-bezier(.4, 0, .2, 1), top 6.5s cubic-bezier(.4, 0, .2, 1);
}

.lebard-bob { animation: lebard-bob 4.2s ease-in-out infinite; }
@keyframes lebard-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

.lebard-svg {
  width: 100%;
  height: auto;
  overflow: visible;
  display: block;
  opacity: 0.92;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}


.lebard-prop { animation: lebard-prop-fade-in 0.6s ease; }
@keyframes lebard-prop-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.lebard-glow { animation: mascot-aura-pulse 2.8s ease-in-out infinite; }
.lebard-glow--2 { animation-delay: 0.4s; }
.lebard-glow--3 { animation-delay: 0.8s; }

.lebard-bubble { animation: mascot-spark-rise 2.2s ease-out infinite; }
.lebard-bubble--2 { animation-delay: 0.5s; }
.lebard-bubble--3 { animation-delay: 1s; }
.lebard-bubble--4 { animation-delay: 1.5s; }
.lebard-bubble--5 { animation-delay: 0.25s; }

.lebard-twinkle { animation: lebard-twinkle 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.lebard-twinkle--2 { animation-delay: 0.5s; }
.lebard-twinkle--3 { animation-delay: 1s; }
@keyframes lebard-twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.7) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(25deg); }
}

.lebard-sand { animation: lebard-sand-fall 2s ease-in-out infinite; transform-box: fill-box; transform-origin: top; }
@keyframes lebard-sand-fall {
  0% { transform: scaleY(1) translateY(0); opacity: 0.85; }
  90% { transform: scaleY(0.25) translateY(7px); opacity: 0.6; }
  100% { transform: scaleY(1) translateY(0); opacity: 0.85; }
}

.lebard-rune-ring, .lebard-crystal-swirl, .lebard-circle-a {
  transform-box: fill-box;
  transform-origin: center;
  animation: lebard-rotate 9s linear infinite;
}
.lebard-crystal-swirl { animation-duration: 5s; }
.lebard-circle-a { animation-duration: 6s; }
.lebard-circle-b {
  transform-box: fill-box;
  transform-origin: center;
  animation: lebard-rotate-reverse 4s linear infinite;
}
@keyframes lebard-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes lebard-rotate-reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

.lebard-wand-trail { animation: lebard-trail-flow 2.4s ease-in-out infinite; }
@keyframes lebard-trail-flow {
  0%, 100% { stroke-dashoffset: 0; opacity: 0.5; }
  50% { stroke-dashoffset: 8; opacity: 0.85; }
}


.lebard-prop-wand { animation: lebard-wand-sway 3.2s ease-in-out infinite; transform-origin: 278px 188px; }
@keyframes lebard-wand-sway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

@media (max-width: 760px) {
  
  .home-hero { min-height: 200px; padding: var(--space-lg); }
  .home-title { font-size: var(--font-2xl); }
  .home-stage-figure { width: 96px; }
}




.nav-drawer-toggle { display: none; }
.nav-drawer { display: none; }


.topbar-btn-label { display: none; }

body.nav-collapsed .topbar {
  
  position: relative;
  gap: var(--space-sm);
}


body.nav-collapsed .topbar-title { min-width: 0; }
body.nav-collapsed .topbar-title span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.nav-collapsed .nav-drawer-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  width: 42px;
  height: 42px;
  padding: 0;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

body.nav-collapsed .nav-drawer-toggle:hover,
body.nav-collapsed .nav-drawer-toggle.is-open { border-color: var(--accent); color: var(--accent); }

.nav-drawer-bars {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.nav-drawer-bars > span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--transition-base), opacity var(--transition-fast);
}

.nav-drawer-bars > span:nth-child(1) { top: 0; }
.nav-drawer-bars > span:nth-child(2) { top: 6px; }
.nav-drawer-bars > span:nth-child(3) { top: 12px; }


.nav-drawer-toggle.is-open .nav-drawer-bars > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-drawer-toggle.is-open .nav-drawer-bars > span:nth-child(2) { opacity: 0; }
.nav-drawer-toggle.is-open .nav-drawer-bars > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

body.nav-collapsed .nav-drawer {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  
  z-index: 90;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-modal);
  
  -webkit-app-region: no-drag;
  
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: max-height var(--transition-base),
              opacity var(--transition-fast),
              transform var(--transition-base),
              visibility 0s linear 300ms;
}

body.nav-collapsed .nav-drawer.is-open {
  
  max-height: min(76dvh, 620px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: max-height var(--transition-base),
              opacity var(--transition-fast),
              transform var(--transition-base),
              visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  
  body.nav-collapsed .nav-drawer { transition-delay: 0s; }
}


body.nav-collapsed .nav-drawer .tabs,
body.nav-collapsed .nav-drawer .topbar-right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3xs);
  padding: var(--space-sm);
  background: transparent;
  border-bottom: none;
  overflow: visible;
}


body.nav-collapsed .nav-drawer:not(.nav-drawer--no-tabs) .topbar-right {
  border-top: 1px solid var(--border);
}


body.nav-collapsed .nav-drawer--no-tabs .tabs { display: none; }

body.nav-collapsed .nav-drawer .tab,
body.nav-collapsed .nav-drawer .topbar-right > .btn,
body.nav-collapsed .nav-drawer .presence-own-toggle,
body.nav-collapsed .nav-drawer .notif-bell {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
}

body.nav-collapsed .nav-drawer .presence-own-wrap,
body.nav-collapsed .nav-drawer .notif-bell-wrap { width: 100%; }

body.nav-collapsed .nav-drawer .profile-chip { justify-content: center; }

body.nav-collapsed .nav-drawer .topbar-btn-label {
  display: inline;
  
  pointer-events: none;
}

body.nav-collapsed .nav-drawer .notif-bell { gap: var(--space-snug); display: flex; align-items: center; }
body.nav-collapsed .nav-drawer .notif-bell-badge { top: 8px; right: auto; left: 26px; }


body.nav-collapsed .nav-drawer .tab.active { background: var(--bg-input); }
body.nav-collapsed .nav-drawer .tab.active::after {
  left: 0;
  right: auto;
  top: 6px;
  bottom: 6px;
  width: 2px;
  height: auto;
  border-radius: 0 2px 2px 0;
}


body.nav-collapsed .nav-drawer .presence-picker,
body.nav-collapsed .nav-drawer .notif-dropdown {
  position: static;
  width: 100%;
  max-width: none;
  max-height: none;
  margin-top: var(--space-2xs);
  box-shadow: none;
}




@media (max-width: 760px) {
  
  body { height: 100dvh; }

  .strengths-weaknesses-grid { grid-template-columns: 1fr; }
  .changelog-grid { grid-template-columns: 1fr; }

  
  
  
  .content, .modal, .modal-body, .collection-list, .card-price-list.view-list, .autocomplete-dropdown, .cf-chips {
    -webkit-overflow-scrolling: touch;
  }

  .content { padding: var(--space-md); }

  .two-col {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  
  .content > .tab-panel.active:has(> .two-col) { height: auto; }

  .content > .tab-panel.active:has(> .two-col) > .two-col > .form,
  .content > .tab-panel.active:has(> .two-col) > .two-col > .results {
    max-height: none;
  }

  .content > .tab-panel.active:has(> .two-col) > .two-col > .results {
    align-self: auto;
    min-height: 200px;
  }

  .results {
    max-height: none;
    min-height: 200px;
  }

  .two-col > .form {
    max-height: none;
  }

  .field-row { grid-template-columns: 1fr; }

  
  .cf-chips {
    max-height: calc(var(--control-h-sm) * 4 + var(--space-sm) * 3 + var(--space-xs) * 2 + 2px);
    overflow-y: auto;
    padding: var(--space-xs);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }

  
  .tabs {
    padding: var(--space-sm) var(--space-snug) 0 var(--space-snug);
  }

  .tab { white-space: nowrap; padding: var(--space-sm) var(--space-md); }

  .topbar { padding: var(--space-snug) var(--space-md); }
  .topbar-title span:last-child { font-size: var(--font-sm); }

  .modal-wide, .modal-xwide, .auth-card { width: 100%; max-width: 100vw; }

  .modal { padding: var(--space-lg); border-radius: 0; }

  .spicy-score-modal-columns { flex-direction: column; max-height: none; }
  .spicy-score-modal-divider { width: 100%; height: 3px; margin: var(--space-sm) 0; }

  .decks-grid.view-grid, .decks-grid.view-card { grid-template-columns: 1fr; }

  
  .cf-tile .deck-tile-art {
    width: 55%;
    max-width: 200px;
    margin: 0 auto;
  }

  .file-row { flex-wrap: wrap; }

  
  #tab-decks .decks-toolbar { justify-content: flex-start; }

  
  :root {
    --control-h-sm: 32px;
    --control-h: 44px;
    --control-h-lg: 48px;
  }

  input[type="text"], input[type="password"], input[type="number"], select, textarea, .btn {
    font-size: 16px; 
  }

  

  
  .settings-tab,
  .view-toggle-btn,
  .format-toggle,
  .price-refresh-button,
  .deck-card .deck-actions .btn,
  .deck-tile .deck-actions .btn,
  .deck-row .deck-actions .btn,
  .collection-row .btn {
    min-height: var(--control-h);
  }

  
  .cf-chips .format-toggle { min-height: var(--control-h-sm); }

  
  .collection-row .btn.card-qty-btn { min-height: var(--control-h-sm); }

  
  input[type="checkbox"], input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
  }

  
  .game-direct-video-label.game-direct-video-label input[type='checkbox'] { min-height: 24px; }

  
  .cf-check input[type="checkbox"],
  .import-mode-row .checkbox-field input[type="radio"] { margin-top: 0; }

  
  .market-links-row { gap: var(--space-sm); }
  .market-link { width: var(--control-h-sm); height: var(--control-h-sm); }

  
  .forum-card-title { position: relative; }
  .forum-card-title::after {
    content: '';
    position: absolute;
    inset: calc(var(--space-sm) * -1) 0;
  }

  
  #cf-open-from-build,
  #cf-open-from-new-deck {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }

  
  .game-plan-commander {
    float: none;
    width: 55%;
    max-width: 220px;
    margin: 0 auto var(--space-md);
  }

  
  .game-plan-commander-pair {
    float: none;
    width: 100%;
    max-width: 320px;
    margin: 0 auto var(--space-md);
  }

  
  .card-hover-preview { display: none !important; }
}


@media (hover: none) {
  .btn:hover:not(:disabled),
  .card-ideas-tile:hover,
  .synergy-matrix-btn:hover,
  .printing-picker-tile:hover,
  .mana-sym:hover,
  .deck-row:hover,
  .deck-tile:hover .deck-tile-art img,
  .collection-row:hover,
  .mana-curve-pie--clickable:hover,
  .mana-curve-pie-legend-row:hover,
  .scan-review-row:hover,
  .home-nav-btn:hover {
    transform: none;
  }
  
  .life-color-swatch:hover::before { transform: none; }
}



.friend-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.friend-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: var(--space-snug) var(--space-md);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}


.friend-row:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-input));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.friend-name { font-weight: 600; }

.friend-row-actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; }



.social-dock {
  position: fixed;
  right: 16px;
  bottom: 0;
  
  z-index: 30;
  display: flex;
  align-items: flex-end;
  gap: var(--space-md);
  max-width: calc(100vw - 24px);
}

.chat-windows {
  display: flex;
  align-items: flex-end;
  gap: var(--space-md);
  overflow-x: auto;
}


@keyframes chat-window-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.chat-window {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-modal);
  animation: chat-window-in var(--transition-base);
}

.chat-window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  
  cursor: pointer;
  user-select: none;
}

.chat-window-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex-shrink: 0;
}


.chat-window--minimized .chat-messages,
.chat-window--minimized .chat-form {
  display: none;
}

.chat-window--minimized .chat-window-header {
  border-bottom: none;
}


.chat-window-unread {
  width: var(--space-sm);
  height: var(--space-sm);
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--neon-orange);
  box-shadow: 0 0 6px var(--neon-orange);
}

.chat-window-minimize {
  
  font-size: var(--font-lg);
}

.chat-window-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: var(--font-2xl);
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--space-2xs);
  transition: color var(--transition-fast);
}
.chat-window-close:hover { color: var(--text); }

.friends-dock { position: relative; }


.friends-dock-toggle,
.sound-dock-toggle {
  border-radius: var(--radius) var(--radius) 0 0;
}

.friends-dock-toggle:hover:not(:disabled),
.friends-dock-toggle:active:not(:disabled),
.sound-dock-toggle:hover:not(:disabled),
.sound-dock-toggle:active:not(:disabled) {
  transform: none;
}

.friends-dock-panel {
  position: absolute;
  bottom: 100%;
  right: 0;
  width: 340px;
  max-width: calc(100vw - 24px);
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-modal);
}


.friends-dock-panel:not(.hidden) {
  animation: game-popover-in 140ms var(--ease);
  transform-origin: bottom right;
}

.friends-dock-panel .panel { margin: 0; }


.friends-dock-panel .autocomplete-dropdown {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: var(--space-2xs);
}



.sound-dock { position: relative; }


.sound-dock-panel {
  position: absolute;
  bottom: 100%;
  right: 0;
  width: 300px;
  max-width: calc(100vw - 24px);
  padding: var(--space-md);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-modal);
}


.sound-dock-panel:not(.hidden) {
  animation: game-popover-in 140ms var(--ease);
  transform-origin: bottom right;
}

.sound-dock-panel .panel { margin: 0; }



.sound-controls-now {
  font-size: var(--font-sm);
  color: var(--text-dim);
  
  min-height: 2.4em;
}


.sound-controls-now--track {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.sound-controls-transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}


.sound-controls-btn {
  width: 40px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.sound-controls-play {
  width: 52px;
  height: 40px;
}

.sound-controls-volumes {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}


.sound-controls-volumes .sound-row {
  flex-wrap: wrap;
  gap: var(--space-sm);
  row-gap: var(--space-3xs);
}
.sound-controls-volumes .sound-label { flex: 1 0 100%; min-width: 0; }

.sound-controls-volumes .sound-slider { min-width: 0; }


.sound-dock-playing {
  display: inline-block;
  width: var(--space-xs);
  height: var(--space-xs);
  margin-left: var(--space-2xs);
  vertical-align: middle;
  border-radius: var(--radius-pill);
  background: var(--neon-orange);
  box-shadow: 0 0 6px var(--neon-orange);
  animation: sound-dock-pulse 2.4s ease-in-out infinite;
}

@keyframes sound-dock-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}


.sound-dock-playing--paused {
  background: var(--text-dim);
  box-shadow: none;
  animation: none;
}

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-height: 320px;
  overflow-y: auto;
  padding: var(--space-md);
  background: var(--bg-input);
  margin: 0;
}

.chat-bubble {
  align-self: flex-start;
  max-width: 75%;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  box-shadow: var(--elev-1);
}

.chat-bubble--mine {
  align-self: flex-end;
  background: color-mix(in srgb, var(--accent) 22%, var(--bg-panel));
  border-color: var(--accent-dim);
}

.chat-bubble-text { white-space: pre-wrap; word-break: break-word; }

.chat-bubble-time { font-size: var(--font-2xs); color: var(--text-dim); margin-top: var(--space-2xs); }

.chat-form { display: flex; gap: var(--space-sm); }

.chat-window .chat-form { padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--border); }


@media (prefers-reduced-motion: reduce) {
  .chat-window,
  .friends-dock-panel:not(.hidden),
  .sound-dock-panel:not(.hidden),
  .sound-dock-playing,
  .presence-picker:not(.hidden) {
    animation: none;
  }
  .friend-row,
  .chat-window-close,
  .presence-option {
    transition: none;
  }
}



.inbox-preview { margin: var(--space-xs) 0; }



.forum-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.forum-toolbar .forum-search { flex: 1 1 14rem; min-width: 10rem; }


.forum-toolbar select { width: auto; }

.forum-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.forum-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--elev-1);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}


.forum-card:hover {
  border-color: var(--accent-dim);
  box-shadow: var(--elev-2);
}

.forum-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.forum-card-kind {
  padding: var(--space-3xs) var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--font-2xs);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


.forum-card-title {
  align-self: flex-start;
  padding: 0;
  background: none;
  border: none;
  color: var(--text);
  font-size: var(--font-xl);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.forum-card-title:hover { color: var(--accent); }

.forum-card-attachment {
  font-size: var(--font-sm);
  color: var(--accent);
}

.forum-card-preview {
  font-size: var(--font-sm);
  color: var(--text-dim);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.forum-card-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.forum-card-date {
  margin-left: auto;
  font-size: var(--font-2xs);
  color: var(--text-dim);
}


.forum-like-btn.is-liked {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}

.forum-post-title {
  margin: var(--space-md) 0 var(--space-sm);
  font-size: var(--font-3xl);
}

.forum-attachment {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.forum-attachment-line {
  font-size: var(--font-lg);
  color: var(--accent);
}

.forum-post-body {
  margin: var(--space-lg) 0;
}

.forum-post-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.forum-comments {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.forum-comment-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.forum-comment {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.forum-comment-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.forum-comment-head .forum-card-date { margin-left: auto; }

.forum-comment-delete {
  min-height: var(--control-h-sm);
  padding: var(--space-3xs) var(--space-sm);
  font-size: var(--font-2xs);
}

.forum-comment-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.forum-comment-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-sm);
}

.forum-comment-input {
  flex: 1;
  min-height: var(--control-h);
  resize: vertical;
}

@media (max-width: 700px) {
  
  .forum-card-foot .forum-card-date { display: none; }
  .forum-comment-form { flex-direction: column; align-items: stretch; }
}



.user-menu {
  position: fixed;
  z-index: 600; 
  min-width: 11rem;
  max-width: min(18rem, calc(100vw - var(--space-lg)));
  padding: var(--space-2xs);
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-modal);
  animation: game-popover-in 120ms var(--ease);
  transform-origin: top left;
}

.user-menu-title {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-2xs);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-item {
  padding: var(--space-sm);
  min-height: var(--control-h-sm);
  background: none;
  border: none;
  border-radius: var(--radius-xs);
  color: var(--text);
  font-size: var(--font-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.user-menu-item:hover,
.user-menu-item:focus-visible {
  background: var(--bg-input);
  color: var(--accent);
}

.user-menu-item--danger:hover,
.user-menu-item--danger:focus-visible {
  color: var(--danger);
}

.user-menu-item[disabled] { opacity: 0.5; cursor: default; }

.user-menu-error {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-2xs);
  color: var(--danger);
}


[data-profile-id] { cursor: context-menu; }




.notif-bell-wrap { position: relative; }

.notif-bell {
  position: relative;
  font-size: var(--font-xl);
  line-height: 1;
  padding: var(--space-sm) var(--space-snug);
}

.notif-bell-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: var(--font-3xs);
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.notif-bell.has-unread {
  color: var(--neon-orange);
  border-color: color-mix(in srgb, var(--neon-orange) 55%, var(--border));
  animation: notif-bell-glow-pulse 3s ease-in-out infinite;
}

@keyframes notif-bell-glow-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--neon-orange) 40%, transparent),
      0 0 12px color-mix(in srgb, var(--neon-orange) 30%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--neon-orange) 65%, transparent),
      0 0 22px color-mix(in srgb, var(--neon-orange) 55%, transparent);
  }
}


.notif-bell.just-arrived {
  animation: notif-bell-flash 0.6s ease-in-out 2;
}

@keyframes notif-bell-flash {
  0%, 100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--neon-orange) 65%, transparent),
      0 0 22px color-mix(in srgb, var(--neon-orange) 55%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 2px var(--neon-orange),
      0 0 36px color-mix(in srgb, var(--neon-orange) 90%, transparent),
      0 0 60px color-mix(in srgb, var(--neon-orange) 60%, transparent);
    transform: scale(1.08);
  }
}



.inbox-firefly {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  margin: 0;
  border-radius: 50%;
  background: var(--firefly-glow);
  box-shadow:
    0 0 4px 1px var(--firefly-glow),
    0 0 9px 2px color-mix(in srgb, var(--firefly-glow) 70%, transparent);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  z-index: 2;
}


@media (prefers-reduced-motion: reduce) {
  .inbox-firefly {
    animation-duration: 1ms !important;
    opacity: 0 !important;
  }
}

.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-width: 90vw;
  max-height: 420px;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
  z-index: 150;
  
  animation: game-popover-in 140ms var(--ease);
  transform-origin: top right;
}


@media (prefers-reduced-motion: reduce) {
  .notif-dropdown { animation: none; }
  .notif-row { transition: none; }
}

.notif-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-snug) var(--space-md);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}

.notif-dropdown-list { display: flex; flex-direction: column; }

.notif-row {
  padding: var(--space-snug) var(--space-md);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.notif-row:hover { background: var(--bg-input); }

.notif-row--unread { border-left: 3px solid var(--neon-orange); }

.notif-row-text { font-size: var(--font-sm); }

.notif-row-time { font-size: var(--font-3xs); color: var(--text-dim); margin-top: var(--space-3xs); }

.btn-small { min-height: var(--control-h-sm); padding: var(--space-2xs) var(--space-md); font-size: var(--font-2xs); }

@media (max-width: 760px) {
  
  .social-dock { right: 8px; gap: var(--space-xs); }
  .chat-window { width: calc(100vw - 16px); }
  .friends-dock-panel { width: calc(100vw - 16px); }
  
  .sound-dock-panel { max-width: calc(100vw - 16px); }

  
  .sound-controls-btn { width: var(--control-h); }
  .sound-controls-play {
    width: calc(var(--control-h) + var(--space-md));
    height: calc(var(--control-h) + var(--space-sm));
  }
}




.game-board-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background:
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 65%),
    radial-gradient(70% 60% at 50% 110%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 60%),
    var(--bg);
  display: flex;
  flex-direction: column;
  
  --game-board-pad: var(--space-md);
  padding: var(--game-board-pad);
  gap: var(--space-sm);
  overflow-y: auto;
}


.game-board-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--game-board-pad) var(--space-sm);
  
  margin: 0 calc(-1 * var(--game-board-pad));
  position: sticky;
  top: calc(-1 * var(--game-board-pad));
  z-index: 3;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 88%, var(--text)), var(--bg));
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.game-board-turn-info { font-weight: 600; }

.game-board-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: nowrap;
  min-width: 0;
}
.game-board-topbar-scroll {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.game-board-topbar-exit { display: flex; align-items: center; gap: var(--space-xs); flex: 0 0 auto; }


.game-card-zoom {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0 var(--space-2xs);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.game-card-zoom-value {
  font-size: var(--font-2xs);
  color: var(--text-dim);
  min-width: 4ch; 
  text-align: center;
}


.game-topbar-menu { position: relative; display: flex; }
.game-topbar-menu-caret { margin-left: var(--space-2xs); font-size: var(--font-2xs); }


.game-topbar-menu-panel {
  position: fixed;
  
  z-index: 512;
  min-width: 13rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--space-2xs);
  background: var(--bg-panel);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
  
  animation: game-popover-in 140ms var(--ease);
  transform-origin: top center;
}

@keyframes game-popover-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.game-topbar-menu-item {
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-sm);
  text-align: left;
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.game-topbar-menu-item:hover:not(:disabled) { background: rgba(var(--accent-rgb), 0.18); }
.game-topbar-menu-item:disabled { color: var(--text-dim); cursor: not-allowed; opacity: 0.55; }

.game-topbar-menu-item--danger:hover:not(:disabled) {
  background: rgba(var(--danger-rgb), 0.18);
  color: var(--danger);
}
.game-topbar-menu-sep { height: 1px; background: var(--border); margin: var(--space-2xs) 0; }

.game-topbar-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-2xs) var(--space-md);
}
.game-topbar-menu-row-label { font-size: var(--font-sm); color: var(--text); }


.game-topbar-menu-sound {
  width: 260px;
  max-width: calc(100vw - 32px);
  padding: var(--space-2xs) var(--space-sm) var(--space-sm);
}


.game-topbar-menu-sound .sound-controls-transport { margin-top: var(--space-2xs); }


.game-board-close-btn {
  
  min-width: var(--control-h);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  font-size: var(--font-lg);
  line-height: 1;
}


.game-phase-strip { display: flex; gap: var(--space-3xs); flex-wrap: wrap; }


.game-phase-pip {
  font-size: var(--font-3xs);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  transition: background var(--transition-base), color var(--transition-base),
    border-color var(--transition-base), box-shadow var(--transition-base);
}
.game-phase-pip--current {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 700;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
}


.game-mana-pool { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }

.game-mana-chip {
  font-size: var(--font-3xs);
  font-weight: 700;
  padding: 1px var(--space-xs);
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  transition: opacity var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base), background var(--transition-base);
}

.game-player-board--mine .game-mana-chip:hover {
  background: color-mix(in srgb, currentColor 16%, var(--bg-input));
  border-color: currentColor;
}
.game-player-board--mine .game-mana-chip { cursor: pointer; }
.game-mana-chip--empty { opacity: 0.45; }
.game-mana-chip--w { color: var(--mana-w); }
.game-mana-chip--u { color: var(--mana-u); }
.game-mana-chip--b { color: var(--mana-b); }
.game-mana-chip--r { color: var(--mana-r); }
.game-mana-chip--g { color: var(--mana-g); }
.game-mana-chip--c { color: var(--mana-c); }


.game-mana-chip--choosable {
  cursor: pointer;
  border-color: currentColor;
  box-shadow: 0 0 0 1px currentColor, 0 0 10px color-mix(in srgb, currentColor 70%, transparent);
  animation: game-mana-await-pulse 1.1s ease-in-out infinite;
}
.game-mana-chip--dimmed { opacity: 0.3; }
@keyframes game-mana-await-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

.game-mana-pick { font-weight: 700; background: var(--bg-input); border: 1px solid currentColor; }
.game-mana-pick--w { color: var(--mana-w); }
.game-mana-pick--u { color: var(--mana-u); }
.game-mana-pick--b { color: var(--mana-b); }
.game-mana-pick--r { color: var(--mana-r); }
.game-mana-pick--g { color: var(--mana-g); }


.game-stack-panel {
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-panel);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.game-stack-list { display: flex; flex-direction: column; gap: var(--space-3xs); }

.game-stack-waiting {
  margin-top: var(--space-2xs);
  padding-top: var(--space-2xs);
  border-top: 1px dashed var(--border);
}
.game-stack-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--bg-input);
  border-radius: var(--radius);
}
.game-stack-row--top { border: 1px solid var(--accent-dim); font-weight: 600; }
.game-stack-row-owner { font-size: var(--font-3xs); color: var(--text-dim); }
.game-stack-actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; }

.game-stack-row-name--ability { font-style: italic; }


.game-choice-panel {
  
  position: fixed;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  z-index: 515;
  width: min(30rem, 92vw);
  max-height: 64vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
.game-choice-title { font-weight: 700; color: var(--accent); }
.game-choice-prompt { font-size: var(--font-sm); }
.game-choice-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  max-height: 32vh;
  overflow-y: auto;
}

.game-choice-option {
  text-align: left;
  justify-content: flex-start;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 400;
}
.game-choice-option:hover { border-color: var(--accent-dim); }

.game-choice-option--picked {
  border-color: var(--accent);
  background: var(--accent-dim);
  font-weight: 600;
}
.game-choice-actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; align-items: center; }
.game-choice-number { width: 5rem; }



.game-card--attacking { outline: 2px solid var(--error); outline-offset: 1px; }
.game-card--blocking { outline: 2px solid var(--ok); outline-offset: 1px; }
.game-card--sick { filter: saturate(0.55); }
.game-card-damage-badge {
  position: absolute;
  top: 0.1em;
  right: 0.1em;
  background: var(--error);
  color: #fff;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  padding: 0.1em 0.3em;
  border-radius: 3px;
}
.game-card-combat-badge {
  position: absolute;
  bottom: 0.1em;
  left: 0.1em;
  font-size: 0.9em;
  line-height: 1;
  text-shadow: 0 0 2px #000;
}

.game-card--under-attack { outline: 2px dashed var(--error); outline-offset: 1px; }

.game-card-under-attack-badge {
  position: absolute;
  top: 0.1em;
  right: 0.1em;
  font-size: 0.9em;
  line-height: 1;
  opacity: 0.9;
  transform: scaleX(-1); 
  text-shadow: 0 0 2px #000;
}


.game-card-glyphs {
  position: absolute;
  top: 0.1em;
  left: 0.1em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08em;
  line-height: 1;
}
.game-card-sick-badge,
.game-card-keyword {
  font-size: 0.9em;
  line-height: 1;
  text-shadow: 0 0 2px #000;
}

.game-card-keyword--text {
  font-size: 0.75em;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 2px;
  padding: 0 0.2em;
  text-shadow: none;
}

.game-card-keyword--granted {
  background: var(--accent-dim);
  border-radius: 2px;
  padding: 0 0.1em;
}


.game-card-stack {
  position: relative;
  flex-shrink: 0;
  padding-right: calc(var(--game-stack-depth, 0) * 7px * var(--game-card-size, 1));
  padding-bottom: calc(var(--game-stack-depth, 0) * var(--space-xs) * var(--game-card-size, 1));
}

.game-card.game-card--tucked {
  position: absolute;
  left: calc(var(--game-stack-index, 1) * 7px * var(--game-card-size, 1));
  top: calc(var(--game-stack-index, 1) * 6px * var(--game-card-size, 1));
  border-color: var(--accent-dim);
}

.game-card.game-card--attachment:not(.game-card--tucked) {
  border-color: var(--accent);
  border-style: dashed;
}
.game-card-attach-badge {
  position: absolute;
  top: 0.1em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8em;
  line-height: 1;
  text-shadow: 0 0 2px #000;
}

.game-card--attach-target {
  outline: 2px dashed var(--accent);
  outline-offset: 1px;
}


.game-combat-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm);
  margin-bottom: var(--space-sm);
  background: var(--bg-panel);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
}
.game-combat-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.game-combat-line { flex: 1; min-width: 12ch; }
.game-combat-form {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  align-items: center;
}
.game-combat-name { flex: 1; min-width: 14ch; }
.game-combat-target { min-width: 12ch; }
@media (max-width: 700px) {
  .game-combat-form { flex-direction: column; align-items: stretch; }
}

.game-board-players {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-md);
  position: relative; 
}

.game-board-players--free {
  display: block;
  min-height: 78vh;
}
.game-board-players--free .game-player-board {
  position: absolute;
  margin: 0;
}


.game-board-players--tpl-highlight,
.game-board-players--tpl-grid {
  display: grid;
  height: 78vh;
}

.game-board-players--tpl-highlight {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: repeat(var(--game-tpl-rows, 1), minmax(0, 1fr));
}
.game-board-players--tpl-highlight .game-player-board--focus {
  grid-column: 1;
  grid-row: 1 / -1;
}

.game-board-players--tpl-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}

.game-board-players--tpl-highlight .game-player-board,
.game-board-players--tpl-grid .game-player-board {
  min-width: 0;
  min-height: 0;
  resize: none;
}

.game-player-board {
  --game-card-scale: 1; 
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  
  resize: both;
  overflow: auto;
  min-width: 260px;
  min-height: 220px;
  box-shadow: var(--elev-1);
  
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.game-player-board--mine { border-color: var(--accent-dim); }


.game-player-board--active {
  box-shadow:
    0 0 0 2px var(--accent) inset,
    0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
    0 0 24px color-mix(in srgb, var(--accent) 25%, transparent),
    var(--elev-2);
}


.game-player-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  cursor: grab;
  touch-action: none; 
}
.game-player-board--dragging { cursor: grabbing; opacity: 0.9; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); }
.game-player-board--dragging .game-player-header { cursor: grabbing; }
.game-player-name { font-weight: 700; }

.game-player-identity { display: flex; align-items: center; gap: var(--space-2xs); min-width: 0; }
.game-player-focus-btn { line-height: 1; }

.game-player-board--focus { border-color: var(--accent); }
.game-player-life { display: flex; align-items: center; gap: var(--space-2xs); }
.game-life-value { font-weight: 700; font-size: var(--font-xl); min-width: 2ch; text-align: center; }


.game-player-resources { display: flex; flex-direction: column; gap: var(--space-2xs); }
.game-resource-strip { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2xs); }
.game-resource-label {
  font-size: var(--font-3xs);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.game-resource-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  white-space: nowrap;
  font-size: var(--font-3xs);
  padding: 1px var(--space-xs);
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-input);
}
.game-resource-name { color: var(--text-dim); }
.game-resource-amount { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }


.game-resource-chip--lethal {
  border-color: var(--error);
  background: rgba(var(--error-rgb), 0.16);
}
.game-resource-chip--lethal .game-resource-name,
.game-resource-chip--lethal .game-resource-amount { color: var(--error); }


.game-resource-step {
  padding: 0 var(--space-2xs);
  min-width: var(--control-h-sm);
  line-height: 1;
}


.game-counter-add { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.game-counter-add-choices { display: none; gap: var(--space-2xs); }
.game-counter-add--open .game-counter-add-choices { display: inline-flex; flex-wrap: wrap; }

.game-zone-row { display: flex; flex-direction: column; gap: var(--space-2xs); }
.game-zone-row-inline { display: flex; gap: var(--space-sm); }
.game-zone-row-inline .game-zone-row { flex: 1; }
.game-zone-label { font-size: var(--font-2xs); color: var(--text-dim); display: flex; align-items: center; gap: var(--space-2xs); flex-wrap: wrap; }


.game-commander-tax {
  font-weight: 700;
  color: var(--warn);
  border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2xs);
}


.game-hand-over {
  font-weight: 700;
  color: var(--warn);
  border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2xs);
}


.game-zone-cards,
.game-card {
  --game-card-size: calc(var(--game-card-scale, 1) * var(--game-card-zoom, 1));
}

.game-zone-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  min-height: calc(46px * var(--game-card-size, 1)); 
}

.game-card {
  position: relative;
  
  width: calc(44px * var(--game-card-size, 1));
  height: calc(61px * var(--game-card-size, 1));
  
  border-radius: calc(4px * var(--game-card-size, 1));
  overflow: hidden;
  background: var(--bg-input);
  border: 1px solid var(--border);
  flex-shrink: 0;
  
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    filter var(--transition-fast), border-color var(--transition-fast);
  
  font-size: calc(10px * var(--game-card-size, 1));
}
.game-card img { width: 100%; height: 100%; object-fit: cover; }


.game-card:hover {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
    0 calc(2px * var(--game-card-size, 1)) calc(10px * var(--game-card-size, 1)) rgba(0, 0, 0, 0.45),
    0 0 calc(14px * var(--game-card-size, 1)) color-mix(in srgb, var(--accent) 30%, transparent);
  filter: brightness(1.12);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  z-index: 2; 
}


.game-card--dragging:hover {
  box-shadow: none;
  filter: none;
}


:root {
  --mtg-card-back: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63 88' preserveAspectRatio='none'><defs><linearGradient id='b' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%237a5330'/><stop offset='.5' stop-color='%234a2e16'/><stop offset='1' stop-color='%23241408'/></linearGradient><radialGradient id='o' cx='.5' cy='.4' r='.65'><stop offset='0' stop-color='%236b4622'/><stop offset='1' stop-color='%231a0f06'/></radialGradient></defs><rect width='63' height='88' rx='4' fill='%230b0806'/><rect x='2.5' y='2.5' width='58' height='83' rx='3' fill='url(%23b)'/><rect x='4.5' y='4.5' width='54' height='79' rx='2' fill='none' stroke='%23c9a267' stroke-width='.5' opacity='.45'/><ellipse cx='31.5' cy='44' rx='19' ry='29' fill='url(%23o)' stroke='%23c9a267' stroke-width='1.1'/><ellipse cx='31.5' cy='44' rx='16' ry='25.5' fill='none' stroke='%23e0c08a' stroke-width='.45' opacity='.4'/><path d='M31.5 26 C22.5 36 22.5 52 31.5 62 C40.5 52 40.5 36 31.5 26 Z' fill='%23e6c791' opacity='.5'/><path d='M31.5 30 C26 37.5 26 50.5 31.5 58 C37 50.5 37 37.5 31.5 30 Z' fill='%23241408' opacity='.55'/><circle cx='31.5' cy='44' r='3' fill='%23f7e4bb' opacity='.75'/></svg>");
}
.game-card--back { background: var(--mtg-card-back) center / 100% 100% no-repeat; }


.game-library-pile {
  position: relative;
  width: calc(44px * var(--game-card-size, 1));
  height: calc(61px * var(--game-card-size, 1));
  flex-shrink: 0;
  border-radius: 4px;
  background: var(--mtg-card-back) center / 100% 100% no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(10px * var(--game-card-size, 1));
  --game-library-edge: calc(2px * var(--game-card-size, 1));
}
.game-library-pile--depth-1 {
  box-shadow: var(--game-library-edge) var(--game-library-edge) 0 0 #100c0a;
}
.game-library-pile--depth-2 {
  box-shadow:
    var(--game-library-edge) var(--game-library-edge) 0 0 #100c0a,
    calc(var(--game-library-edge) * 2) calc(var(--game-library-edge) * 2) 0 0 #4a3018,
    calc(var(--game-library-edge) * 2.5) calc(var(--game-library-edge) * 2.5) 0 0 #100c0a;
}
.game-library-pile--depth-3 {
  box-shadow:
    var(--game-library-edge) var(--game-library-edge) 0 0 #100c0a,
    calc(var(--game-library-edge) * 2) calc(var(--game-library-edge) * 2) 0 0 #4a3018,
    calc(var(--game-library-edge) * 2.5) calc(var(--game-library-edge) * 2.5) 0 0 #100c0a,
    calc(var(--game-library-edge) * 3.5) calc(var(--game-library-edge) * 3.5) 0 0 #4a3018,
    calc(var(--game-library-edge) * 4) calc(var(--game-library-edge) * 4) 0 0 #100c0a;
}

.game-library-pile--depth-0 {
  background: none;
  border: 1px dashed var(--border);
}

.game-library-pile-count {
  position: absolute;
  bottom: 0.35em;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 1.1em;
  color: #f7e4bb;
  background: rgba(11, 8, 6, 0.82);
  border: 1px solid rgba(201, 162, 103, 0.5);
  border-radius: 999px;
  padding: 0.05em 0.45em;
  line-height: 1.35;
}
.game-library-pile--depth-0 .game-library-pile-count {
  color: var(--text-dim);
  background: none;
  border-color: transparent;
}

.game-card { --game-card-tap-rotate: 0deg; }
.game-card--tapped { --game-card-tap-rotate: 90deg; transform: rotate(var(--game-card-tap-rotate)); }
.game-card--selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.game-card--dragging { opacity: 0.4; }
.game-card--entering { animation: game-card-enter 0.25s ease; }
@keyframes game-card-enter {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}




.game-card--picked-up {
  animation: game-card-pickup 0.18s ease forwards;
  z-index: 3;
}
@keyframes game-card-pickup {
  from { transform: translateY(0) rotate(var(--game-card-tap-rotate)) scale(1); }
  to { transform: translateY(-18%) rotate(var(--game-card-tap-rotate)) scale(1.12); }
}


.game-card--attacking { animation: game-card-lunge 0.9s ease-in-out infinite alternate; }
.game-card--blocking { animation: game-card-brace 0.9s ease-in-out infinite alternate; }
@keyframes game-card-lunge {
  from { transform: translateY(0) rotate(var(--game-card-tap-rotate)); }
  to { transform: translateY(-14%) rotate(var(--game-card-tap-rotate)); }
}
@keyframes game-card-brace {
  from { transform: translateY(0) rotate(var(--game-card-tap-rotate)); }
  to { transform: translateY(9%) rotate(var(--game-card-tap-rotate)); }
}


.game-card--damaged { animation: game-card-damaged 0.45s ease; }
@keyframes game-card-damaged {
  0% { transform: translateX(0) rotate(var(--game-card-tap-rotate)); filter: none; }
  15% { transform: translateX(-9%) rotate(var(--game-card-tap-rotate)); filter: brightness(1.5) sepia(1) hue-rotate(-35deg) saturate(4); }
  35% { transform: translateX(8%) rotate(var(--game-card-tap-rotate)); }
  55% { transform: translateX(-6%) rotate(var(--game-card-tap-rotate)); filter: brightness(1.3) sepia(1) hue-rotate(-35deg) saturate(3); }
  75% { transform: translateX(4%) rotate(var(--game-card-tap-rotate)); }
  100% { transform: translateX(0) rotate(var(--game-card-tap-rotate)); filter: none; }
}


.game-card--leaving {
  position: fixed;
  
  z-index: 505;
  pointer-events: none;
  margin: 0;
}

.game-card--died { animation: game-card-died 0.6s ease forwards; }
@keyframes game-card-died {
  0% { transform: rotate(var(--game-card-tap-rotate)) translateY(0) scale(1); opacity: 1; filter: none; }
  30% { transform: rotate(calc(var(--game-card-tap-rotate) - 8deg)) translateY(6%) scale(0.98); filter: brightness(1.4) sepia(1) hue-rotate(-35deg) saturate(4); }
  100% { transform: rotate(calc(var(--game-card-tap-rotate) - 22deg)) translateY(70%) scale(0.72); opacity: 0; filter: grayscale(1) brightness(0.5); }
}

.game-card--to-graveyard { animation: game-card-to-graveyard 0.5s ease forwards; }
@keyframes game-card-to-graveyard {
  from { transform: translateY(0) rotate(var(--game-card-tap-rotate)) scale(1); opacity: 1; }
  to { transform: translateY(55%) rotate(var(--game-card-tap-rotate)) scale(0.8); opacity: 0; filter: grayscale(0.8); }
}

.game-card--exiled { animation: game-card-exiled 0.6s ease forwards; }
@keyframes game-card-exiled {
  0% { transform: translateY(0) rotate(var(--game-card-tap-rotate)) scale(1); opacity: 1; filter: none; }
  40% { transform: translateY(-12%) rotate(var(--game-card-tap-rotate)) scale(1.06); filter: brightness(3) saturate(0); }
  100% { transform: translateY(-45%) rotate(var(--game-card-tap-rotate)) scale(0.6); opacity: 0; filter: brightness(4) saturate(0); }
}

.game-card--recalled { animation: game-card-recalled 0.4s ease forwards; }
@keyframes game-card-recalled {
  from { transform: translateY(0) rotate(var(--game-card-tap-rotate)) scale(1); opacity: 1; }
  to { transform: translateY(30%) rotate(var(--game-card-tap-rotate)) scale(0.45); opacity: 0; }
}


.game-zone-cards--drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent);
}

.game-card-context-menu {
  position: fixed;
  
  z-index: 510;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2xs);
  background: var(--bg-panel);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  padding: var(--space-sm);
  box-shadow: var(--elev-3);
  max-width: 220px;
  
  animation: game-popover-in 120ms var(--ease);
  transform-origin: top left;
}
.game-card-context-menu .game-action-bar-name { margin: 0 0 var(--space-2xs); }

.game-card-noimg {
  font-size: 0.9em;
  padding: 0.2em;
  text-align: center;
  color: var(--text);
  word-break: break-word;
}

.game-card--face-down {
  background: repeating-linear-gradient(
    135deg,
    var(--surface-2, #2b2b33),
    var(--surface-2, #2b2b33) 4px,
    var(--surface, #23232a) 4px,
    var(--surface, #23232a) 8px
  );
  border-style: dashed;
}
.game-card-face-down {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 0.2em;
  color: var(--text-muted, var(--text));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.game-card-counter-badge {
  position: absolute;
  bottom: 0.1em;
  right: 0.1em;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

.game-card-pt-badge {
  position: absolute;
  bottom: 0.1em;
  right: 0.1em;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 0.95em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  padding: 0.1em 0.28em;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.game-card-pt-badge--buffed { background: rgba(26, 92, 48, 0.92); box-shadow: 0 0 0 1px var(--ok); }
.game-card-pt-badge--weakened { background: rgba(112, 30, 30, 0.92); box-shadow: 0 0 0 1px var(--error); }

.game-card-counter-badge--above-pt { bottom: 1.62em; }

.game-card-counter-badge--above-two { bottom: 3.24em; }


.game-card-loyalty-badge {
  position: absolute;
  bottom: 0.1em;
  right: 0.1em;
  background: rgba(66, 40, 96, 0.92);
  color: #fff;
  font-size: 0.95em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  padding: 0.1em 0.34em;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.game-card-loyalty-badge--above-pt { bottom: 1.45em; }


.game-life-value--gain { animation: game-life-gain 0.75s ease-out; }
.game-life-value--loss { animation: game-life-loss 0.75s ease-out; }
@keyframes game-life-gain {
  0% { transform: scale(1); text-shadow: none; }
  25% {
    transform: scale(1.3);
    color: #6ee7a0;
    text-shadow: 0 0 10px rgba(72, 219, 128, 0.95), 0 0 24px rgba(72, 219, 128, 0.55);
  }
  100% { transform: scale(1); text-shadow: none; }
}
@keyframes game-life-loss {
  0% { transform: scale(1); text-shadow: none; }
  15% { transform: scale(1.3) translateX(-6%); color: #ff8177; text-shadow: 0 0 10px rgba(226, 76, 62, 0.95), 0 0 24px rgba(226, 76, 62, 0.55); }
  45% { transform: scale(1.18) translateX(5%); color: #ff8177; text-shadow: 0 0 8px rgba(226, 76, 62, 0.8); }
  100% { transform: scale(1) translateX(0); text-shadow: none; }
}


.game-life-particles {
  position: fixed;
  z-index: 505;
  width: 0;
  height: 0;
  pointer-events: none;
}
.game-life-particle {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  opacity: 0;
  
  animation: game-life-particle-fly 0.6s ease-out var(--delay, 0ms) forwards;
}
.game-life-particles--gain .game-life-particle { background: #5fe08c; box-shadow: 0 0 6px rgba(72, 219, 128, 0.9); }
.game-life-particles--loss .game-life-particle { background: #f0655a; box-shadow: 0 0 6px rgba(226, 76, 62, 0.9); }
@keyframes game-life-particle-fly {
  0% { opacity: 1; transform: rotate(var(--angle, 0deg)) translateX(0) scale(1); }
  100% { opacity: 0; transform: rotate(var(--angle, 0deg)) translateX(var(--distance, 24px)) scale(0.35); }
}

.game-board-action-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  background: var(--bg-panel);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  padding: var(--space-sm);
}
.game-action-bar-name { font-weight: 600; margin-right: var(--space-sm); }


.game-board-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  
  height: 200px;
  min-height: 120px;
  resize: vertical;
  overflow: auto;
  
  flex: none;
}
.game-board-bottom-panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  align-items: stretch; 
  flex: 1;
  min-height: 0; 
}

.game-board-bottom-title {
  margin: 0;
  font-size: var(--font-2xs);
  font-weight: 600;
  color: var(--text-dim);
  cursor: grab;
  touch-action: none; 
}

.game-board-bottom--free {
  position: absolute;
  inset: auto;
  width: min(720px, 92vw);
  background: var(--bg-panel);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  padding: var(--space-sm);
  resize: both;
  overflow: auto;
  min-width: 280px;
  min-height: 160px;
}
.game-board-bottom-pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0; 
  min-height: 0; 
}
.game-rulings-input { width: 100%; }

.game-board-bottom .autocomplete-dropdown { max-height: 150px; }

.game-rulings-results.game-rulings-results {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}
@media (max-width: 700px) {
  .game-board-bottom-panes { grid-template-columns: 1fr; }
  
  .game-board-bottom:not(.game-board-bottom--free) { height: auto; resize: none; }
  
  .game-rulings-results.game-rulings-results,
  .game-board-log.game-board-log { max-height: 140px; flex: none; }
}

.game-board-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  padding-top: var(--space-xs);
  font-size: var(--font-2xs);
  color: var(--text-dim);
}
.game-log-row { padding: 1px 0; }

.game-player-away-badge { font-size: var(--font-2xs); color: var(--warn); margin-left: var(--space-xs); }
.game-player-defeated-badge { font-size: var(--font-2xs); color: var(--error); margin-left: var(--space-xs); }
.game-player-board--defeated { opacity: 0.55; }


.game-result-overlay {
  
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  
  align-items: flex-start;
  justify-content: center;
  text-align: center;
}

.game-result-overlay { pointer-events: none; }
.game-result-overlay--victory {
  background: linear-gradient(to bottom, #3a2e05 0%, color-mix(in srgb, #1a1400 55%, transparent) 30%, transparent 60%);
}
.game-result-overlay--defeat {
  background: linear-gradient(to bottom, #2a0a0a 0%, color-mix(in srgb, #150606 55%, transparent) 30%, transparent 60%);
  animation: game-defeat-fade-in 1.2s ease;
}
.game-result-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg, 24px);
  
  margin-top: 6vh;
  pointer-events: auto; 
  background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.game-result-title {
  font-size: var(--font-5xl);
  font-weight: 800;
}
.game-result-overlay--victory .game-result-title {
  color: #ffd76a;
  text-shadow: 0 0 20px rgba(255, 215, 100, 0.8), 0 0 60px rgba(255, 215, 100, 0.4);
  animation: game-victory-title-pop 0.8s ease;
}
.game-result-overlay--defeat .game-result-title {
  color: #9a9a9a;
  letter-spacing: 3px;
}
.game-result-detail { color: var(--text-dim); font-size: var(--font-lg); }

@keyframes game-victory-title-pop {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes game-defeat-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.game-result-sparks { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; }
.game-result-spark {
  position: absolute;
  bottom: -10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffe28a;
  box-shadow: 0 0 8px 2px rgba(255, 226, 138, 0.9);
  animation: game-victory-spark-rise 3.4s ease-in infinite;
  opacity: 0;
}
.game-result-spark:nth-child(1) { left: 4%; animation-delay: 0s; }
.game-result-spark:nth-child(2) { left: 13%; animation-delay: 0.4s; }
.game-result-spark:nth-child(3) { left: 22%; animation-delay: 0.8s; }
.game-result-spark:nth-child(4) { left: 33%; animation-delay: 1.2s; }
.game-result-spark:nth-child(5) { left: 44%; animation-delay: 1.6s; }
.game-result-spark:nth-child(6) { left: 55%; animation-delay: 0.2s; }
.game-result-spark:nth-child(7) { left: 63%; animation-delay: 0.6s; }
.game-result-spark:nth-child(8) { left: 71%; animation-delay: 1.0s; }
.game-result-spark:nth-child(9) { left: 80%; animation-delay: 1.4s; }
.game-result-spark:nth-child(10) { left: 88%; animation-delay: 1.8s; }
.game-result-spark:nth-child(11) { left: 95%; animation-delay: 2.2s; }
.game-result-spark:nth-child(12) { left: 50%; animation-delay: 2.6s; }
@keyframes game-victory-spark-rise {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.6; }
  100% { transform: translateY(-420px) scale(0.3); opacity: 0; }
}


.game-board-drawer {
  
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  width: min(420px, 92vw);
  display: flex;
  background: var(--bg-panel);
  border-left: 1px solid var(--accent-dim);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.45);
  animation: game-drawer-slide-in 0.22s ease;
}
@keyframes game-drawer-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.game-board-drawer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  width: 100%;
  min-height: 0; 
}

.game-board-drawer-title { margin: 0; font-size: var(--font-xl); cursor: grab; touch-action: none; }

.game-board-drawer-tabs { margin-bottom: 0; }

.game-board-drawer-panel {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: var(--space-sm);
}
.game-board-drawer-panel.active { display: flex; }


.game-board-drawer--free {
  position: absolute;
  inset: auto;
  width: min(420px, 92vw);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  resize: both;
  overflow: auto;
  min-width: 260px;
  min-height: 220px;
  animation: none; 
}


.game-camera-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--border);
}
.game-camera-controls { display: flex; gap: var(--space-xs); flex-wrap: wrap; }


.game-direct-video {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.game-direct-video-label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-xs);
  color: var(--text);
  cursor: pointer;
}

.game-direct-video-label input[type='checkbox'] {
  width: auto;
  min-height: 0;
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
}


.game-board-view {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 40vh;
  background: #000;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: crosshair; 
}
.game-board-view-media { width: 100%; height: 100%; object-fit: contain; display: block; }
.game-board-view-waiting {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: var(--font-xs);
  text-align: center;
  padding: var(--space-sm);
}


.game-feed-badge {
  margin-left: var(--space-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.game-feed-badge--live {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 55%, var(--border));
}


.game-scan-outline {
  position: absolute;
  z-index: 2; 
  border: 2px solid color-mix(in srgb, var(--neon-orange) 70%, transparent);
  border-radius: 5px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--neon-orange) 35%, transparent);
  pointer-events: none;
  transition: left 90ms ease-out, top 90ms ease-out, width 90ms ease-out, height 90ms ease-out;
}

.game-scan-outline--loose {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--text-dim) 70%, transparent);
  box-shadow: none;
}


.game-scan-pulse {
  position: absolute;
  z-index: 3; 
  border-radius: 5px; 
  border: 2px solid var(--neon-orange);
  pointer-events: none;
  animation: game-scan-pulse-ring 1.3s ease-in-out infinite;
}

.game-scan-pulse--loose { border-style: dashed; }
.game-scan-pulse--hit {
  border-color: var(--ok);
  box-shadow: 0 0 14px var(--ok), inset 0 0 14px color-mix(in srgb, var(--ok) 55%, transparent);
  animation: game-scan-pulse-settle 0.9s ease-out forwards;
}
.game-scan-pulse--miss {
  border-color: var(--error);
  box-shadow: 0 0 14px var(--error), inset 0 0 14px color-mix(in srgb, var(--error) 55%, transparent);
  animation: game-scan-pulse-settle 0.9s ease-out forwards;
}
@keyframes game-scan-pulse-ring {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 6px var(--neon-orange), inset 0 0 6px color-mix(in srgb, var(--neon-orange) 40%, transparent);
  }
  50% {
    opacity: 0.75;
    box-shadow:
      0 0 20px var(--neon-orange),
      0 0 34px color-mix(in srgb, var(--neon-orange) 55%, transparent),
      inset 0 0 18px color-mix(in srgb, var(--neon-orange) 55%, transparent);
  }
}
@keyframes game-scan-pulse-settle {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}


.game-scan-chip {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-input);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  align-items: flex-start;
}
.game-scan-chip-thumb { width: 44px; border-radius: 4px; flex-shrink: 0; }
.game-scan-chip-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.game-scan-chip-name { font-weight: 700; }
.game-scan-chip-printing { font-size: var(--font-2xs); color: var(--neon-blue); }
.game-log-row--card { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-2xs) 0; }
.game-log-actor { font-size: var(--font-2xs); color: var(--text-dim); }

.game-history-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  font-size: var(--font-xs);
}



.game-library-modal-inner {
  width: min(1100px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.game-library-controls {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
}
.game-library-search { flex: 1; min-width: 16ch; }
.game-library-filter-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--font-xs);
  white-space: nowrap;
}
.game-library-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--space-xs);
  padding: var(--space-2xs);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
}
.game-library-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-3xs);
  background: none;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  color: var(--text);
  font: inherit;
}
.game-library-tile:hover { border-color: var(--accent-dim); }
.game-library-tile img { width: 100%; border-radius: 4px; display: block; }
.game-library-tile--chosen { border-color: var(--accent); }
.game-library-tile-label {
  font-size: var(--font-3xs);
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-library-tile-name { font-size: var(--font-2xs); padding: var(--space-sm) 0; word-break: break-word; }
.game-library-chosen {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  max-height: 22vh;
  overflow-y: auto;
}
.game-library-chosen-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.game-library-chosen-name { flex: 1; min-width: 12ch; font-weight: 700; }
@media (max-width: 700px) {
  .game-library-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}




.game-frame-resizer {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  touch-action: none; 
  z-index: 1; 
}
.game-frame-resizer::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: transparent;
  transition: background 0.12s ease;
}
.game-frame-resizer:hover::before,
.game-frame-resizer--dragging::before { background: var(--accent); }

.game-board-drawer--free .game-frame-resizer { display: none; }

.game-chat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.game-chat-row {
  padding: var(--space-2xs) var(--space-xs);
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border);
}

.game-chat-row--mine { border-left-color: var(--accent); }
.game-chat-row-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}
.game-chat-author { font-weight: 700; font-size: var(--font-2xs); }
.game-chat-time { font-size: var(--font-3xs); color: var(--text-dim); }
.game-chat-text { font-size: var(--font-xs); word-break: break-word; }
.game-chat-form { display: flex; gap: var(--space-xs); }
.game-chat-input { flex: 1; min-width: 0; }

.game-chat-btn--unread { color: var(--accent); font-weight: 700; }


.settings-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
}
.settings-toggle-row > span { display: flex; flex-direction: column; gap: var(--space-3xs); }
.social-filter-preview {
  padding: var(--space-sm);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
}
.game-board-modal {
  
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}


.rulings-results {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}
.rulings-card-name { font-weight: 700; }
.rulings-row {
  background: var(--bg-input);
  border-radius: var(--radius);
  padding: var(--space-xs) var(--space-sm);
}
.rulings-row-date { font-size: var(--font-3xs); color: var(--text-dim); margin-bottom: var(--space-3xs); }
.rulings-row-text { font-size: var(--font-xs); }


.glossary-search-panel { margin-bottom: var(--space-md); }
.glossary-tabs { margin-bottom: var(--space-md); }
.glossary-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.glossary-entry,
.glossary-rule {
  background: var(--bg-input);
  border-radius: var(--radius);
  padding: var(--space-xs) var(--space-sm);
}
.glossary-entry-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.glossary-term { font-weight: 700; }
.glossary-definition { font-size: var(--font-xs); margin-top: var(--space-3xs); }
.glossary-rule-jump { font-size: var(--font-3xs); }
.glossary-rule-number {
  font-weight: 700;
  font-size: var(--font-3xs);
  color: var(--text-dim);
  margin-bottom: var(--space-3xs);
}
.glossary-rule-text { font-size: var(--font-xs); white-space: pre-line; }

.glossary-rule--section .glossary-rule-text,
.glossary-rule--group .glossary-rule-text {
  font-weight: 700;
  font-size: var(--font-sm);
}

.glossary-match {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: inherit;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3xs);
}


.keybind-list { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-xs); }
.keybind-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-input);
  border-radius: var(--radius);
}
.keybind-label { display: flex; flex-direction: column; gap: var(--space-3xs); }
.keybind-key { min-width: 96px; font-family: monospace; font-weight: 700; }
.keybind-key--capturing {
  border-color: var(--accent);
  color: var(--accent);
  animation: game-mana-await-pulse 1.1s ease-in-out infinite;
}

.game-configure-list { display: flex; flex-direction: column; gap: var(--space-2xs); }
.game-configure-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-input);
  border-radius: var(--radius);
}
.game-configure-row-label { font-weight: 600; display: flex; align-items: center; gap: var(--space-xs); }
.game-configure-row-actions { display: flex; gap: var(--space-2xs); }

.game-configure-row { cursor: grab; }
.game-configure-grip { color: var(--text-dim); cursor: grab; }
.game-configure-row--dragging { opacity: 0.5; cursor: grabbing; }
.game-configure-row--drop-target { outline: 2px dashed var(--accent); outline-offset: 2px; }


.game-layout-templates {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}
.game-layout-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.game-layout-option:hover { border-color: var(--accent-dim); }
.game-layout-option--active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.game-layout-option-text { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; }
.game-layout-option-name { font-weight: 600; }
.game-layout-option-hint { font-size: var(--font-2xs); color: var(--text-dim); }


.game-layout-thumb {
  display: grid;
  gap: var(--space-3xs);
  width: 54px;
  height: 38px;
  flex: none;
}
.game-layout-thumb i { display: block; background: var(--accent-dim); border-radius: 2px; }
.game-layout-thumb--auto { grid-template-columns: repeat(3, 1fr); }
.game-layout-thumb--auto i:nth-child(4) { grid-column: span 3; } 
.game-layout-thumb--highlight { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr); }
.game-layout-thumb--highlight i:first-child { grid-row: 1 / -1; background: var(--accent); }
.game-layout-thumb--grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }

.game-layout-focus-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.game-layout-focus-row select { flex: 1; min-width: 0; }
.game-layout-subhead { font-size: var(--font-sm); margin: var(--space-sm) 0 var(--space-2xs); }
.game-layout-saved { display: flex; flex-direction: column; gap: var(--space-2xs); }
.game-layout-saved-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.game-layout-saved-text { display: flex; flex-direction: column; min-width: 0; }
.game-layout-saved-name { font-weight: 600; overflow-wrap: anywhere; }
.game-layout-saved-meta { font-size: var(--font-2xs); color: var(--text-dim); }
.game-layout-saved-actions { display: flex; gap: var(--space-2xs); flex: none; }
.game-layout-save-form {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}
.game-layout-save-form input { flex: 1; min-width: 0; }

@media (max-width: 760px) {
  .game-board-players { grid-template-columns: 1fr; }
  
  .game-board-players--tpl-highlight,
  .game-board-players--tpl-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
    height: auto;
  }
  .game-board-players--tpl-highlight .game-player-board--focus {
    grid-column: auto;
    grid-row: auto;
  }
  
  .game-card {
    width: calc(38px * var(--game-card-size, 1));
    height: calc(53px * var(--game-card-size, 1));
    font-size: calc(9px * var(--game-card-size, 1));
  }
  .game-board-drawer { width: 100vw; }
  .game-result-title { font-size: var(--font-3xl); }
}


@media (max-width: 700px) {
  .game-board-overlay {
    
    --game-board-pad: var(--space-sm);
    gap: var(--space-xs);
  }

  
  .game-board-players--free {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .game-board-players--free .game-player-board {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0;
  }

  

  .game-player-board {
    
    min-width: 0;
    min-height: 0;
    
    resize: none;
  }
  
  .game-player-header {
    cursor: default;
    touch-action: auto;
  }

  
  .game-board-topbar-scroll,
  .game-phase-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    
    -webkit-overflow-scrolling: touch;
  }
  .game-board-topbar-scroll > *,
  .game-phase-pip {
    flex-shrink: 0;
  }

  
  .game-board-topbar-scroll::-webkit-scrollbar,
  .game-phase-strip::-webkit-scrollbar { height: 3px; }
  .game-board-topbar-scroll::-webkit-scrollbar-track,
  .game-phase-strip::-webkit-scrollbar-track { background: transparent; }
  .game-board-topbar-scroll::-webkit-scrollbar-thumb,
  .game-phase-strip::-webkit-scrollbar-thumb {
    background: var(--accent-dim);
    border-radius: var(--radius-pill);
  }

  
  .game-board-action-bar {
    padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
  }

  
  .game-board-view { max-height: 30vh; }

  
  .game-library-modal-inner {
    width: 100vw;
    max-height: 92vh;
    border-radius: 0;
  }
  .game-combat-row,
  .game-library-chosen-row {
    align-items: flex-start;
  }
}


.game-spectator-banner {
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-panel);
  border: 1px solid var(--accent-dim);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: var(--font-xs);
}

.game-watchers {
  font-size: var(--font-2xs);
  color: var(--text-dim);
}

.game-board-overlay--spectating #game-board-next-phase-btn,
.game-board-overlay--spectating #game-board-next-turn-btn,

.game-board-overlay--spectating #game-board-random-menu-wrap,
.game-board-overlay--spectating #game-board-table-menu-wrap,
.game-board-overlay--spectating .game-board-action-bar,
.game-board-overlay--spectating .game-stack-actions,
.game-board-overlay--spectating .game-combat-panel,
.game-board-overlay--spectating #game-chat-form {
  display: none !important;
}

.game-board-overlay--spectating .game-card {
  cursor: default;
}
.game-board-overlay--spectating .game-player-header {
  cursor: default;
}




.game-mulligan-panel {
  position: fixed;
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  z-index: 514;
  width: min(46rem, 94vw);
  max-height: 76vh;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.game-mulligan-prompt { font-weight: 700; }
.game-mulligan-grid { max-height: 52vh; }


.game-coach-panel {
  position: fixed;
  right: var(--space-sm);
  top: 6rem;
  bottom: var(--space-sm);
  z-index: 512;
  width: min(24rem, 92vw);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.game-coach-header { display: flex; align-items: center; gap: var(--space-xs); }
.game-coach-title { flex: 1; margin: 0; font-size: var(--font-md); }
.game-coach-auto-label {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--font-3xs);
  color: var(--text-dim);
  white-space: nowrap;
}
.game-coach-status { font-size: var(--font-2xs); color: var(--text-dim); }
.game-coach-headline { font-weight: 700; line-height: 1.35; }
.game-coach-plan { font-size: var(--font-xs); color: var(--text-dim); line-height: 1.45; }
.game-coach-steps {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.game-coach-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.game-coach-step:hover { border-color: var(--accent-dim); }
.game-coach-step--active { border-color: var(--accent); background: var(--bg-panel); }
.game-coach-step-num {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--text);
  font-size: var(--font-3xs);
  font-weight: 700;
}
.game-coach-step-body { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; }
.game-coach-step-label { font-weight: 700; font-size: var(--font-xs); }
.game-coach-step-why { font-size: var(--font-2xs); color: var(--text-dim); line-height: 1.4; }
.game-coach-step-principle {
  font-size: var(--font-3xs);
  color: var(--accent);
  font-style: italic;
  line-height: 1.4;
}

.game-coach-watchout {
  padding: var(--space-xs);
  border-left: 3px solid var(--warn);
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  font-size: var(--font-2xs);
  line-height: 1.4;
}
.game-coach-actions { display: flex; gap: var(--space-xs); }
.game-coach-actions .btn { flex: 1; }
.game-coach-ask { display: flex; gap: var(--space-xs); }
.game-coach-question {
  flex: 1;
  min-width: 0;
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text);
  font: inherit;
  font-size: var(--font-xs);
}


.game-coach-spotlight {
  position: fixed;
  z-index: 513;
  pointer-events: none;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.28), 0 0 18px 2px var(--accent);
  animation: game-coach-pulse 1.6s ease-in-out infinite;
}
@keyframes game-coach-pulse {
  0%, 100% { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.28), 0 0 12px 1px var(--accent); }
  50% { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.28), 0 0 26px 6px var(--accent); }
}
.game-coach-callout {
  position: fixed;
  z-index: 514;
  width: min(22rem, 88vw);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  animation: game-coach-callout-in 0.18s ease-out;
}
@keyframes game-coach-callout-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.game-coach-callout-title { font-weight: 700; margin-bottom: var(--space-3xs); }
.game-coach-callout-why { font-size: var(--font-xs); color: var(--text-dim); line-height: 1.45; }
.game-coach-callout-principle {
  margin-top: var(--space-2xs);
  font-size: var(--font-2xs);
  color: var(--accent);
  font-style: italic;
}


@media (prefers-reduced-motion: reduce) {
  .game-coach-spotlight { animation: none; }
  .game-coach-callout { animation: none; }
}


@media (prefers-reduced-motion: reduce) {
  .game-card--leaving { display: none; }
  .game-life-particles { display: none; }

  .game-card--entering,
  .game-card--picked-up,
  .game-card--damaged,
  .game-life-value--gain,
  .game-life-value--loss,
  .game-mana-chip--choosable,
  .game-topbar-menu-panel,
  .game-card-context-menu,
  .game-result-overlay--defeat,
  .game-result-overlay--victory .game-result-title,
  .game-result-spark,
  .game-board-drawer,
  .keybind-key--capturing {
    animation: none;
  }

  
  .game-card--attacking,
  .game-card--blocking {
    animation: none;
  }

  
  .game-scan-pulse { animation: none; }
  .game-scan-pulse--hit,
  .game-scan-pulse--miss {
    animation: game-scan-pulse-settle 0.9s ease-out forwards;
  }

  
  .game-player-board,
  .game-phase-pip,
  .game-mana-chip,
  .game-card {
    transition: none;
  }
}

@media (max-width: 700px) {
  
  .game-coach-panel {
    left: var(--space-2xs);
    right: var(--space-2xs);
    top: auto;
    bottom: var(--space-2xs);
    width: auto;
    max-height: 58vh;
  }
  .game-mulligan-panel { top: var(--space-xs); width: 96vw; padding: var(--space-sm); }
  .game-coach-callout { width: min(20rem, 92vw); }
}


.game-board-topbar-actions .btn-active { outline: 2px solid var(--accent); outline-offset: 1px; }



.arcane-portal {
  position: fixed;
  inset: 0;
  
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, rgba(var(--accent-rgb), 0.14) 0%, transparent 62%),
    radial-gradient(ellipse at center, var(--bg-panel) 0%, var(--bg) 70%, #000 100%);
  cursor: pointer;
  
  opacity: 1;
}



.arcane-portal.is-leaving {
  opacity: 0;
  transform: scale(1.35);
  transition: opacity 0.62s ease-in, transform 0.68s cubic-bezier(0.5, 0, 0.9, 0.4);
}
.arcane-portal.is-reduced.is-leaving { transform: none; transition: opacity 0.25s ease-out; }




.arcane-portal-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.32) 0px,
      rgba(0, 0, 0, 0.32) 1px,
      transparent 1px,
      transparent 3px
    ),
    radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.55) 100%);
  mix-blend-mode: hard-light;
  animation: arcane-flicker 3.4s steps(1, end) infinite;
}


.arcane-portal-roll {
  position: absolute;
  left: 0;
  right: 0;
  height: 28%;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(var(--accent-rgb), 0.07), transparent);
  animation: arcane-roll 5.5s linear infinite;
}

@keyframes arcane-flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.82; }
  95% { opacity: 1; }
  96% { opacity: 0.88; }
}

@keyframes arcane-roll {
  from { top: -30%; }
  to { top: 100%; }
}



.arcane-portal-core {
  --arcane-progress: 0; 
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.arcane-sigil {
  width: min(46vh, 340px);
  height: min(46vh, 340px);
  overflow: visible;
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.4));
}

.arcane-halo {
  fill: rgba(var(--accent-rgb), 0.06);
  stroke: none;
}

.arcane-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  opacity: 0.85;
  
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  
  animation: arcane-draw 1s ease-out forwards;
  transform-origin: 200px 200px;
}
.arcane-ring--outer {
  stroke-width: 2.4;
  stroke-dasharray: 0.055 0.02;
  stroke-dashoffset: 0;
  animation: arcane-spin 26s linear infinite;
}
.arcane-ring--mid { animation-delay: 0.15s; }
.arcane-ring--inner {
  stroke: var(--accent-hover);
  animation-delay: 0.3s;
}

.arcane-star {
  fill: rgba(var(--accent-rgb), 0.05);
  stroke: var(--accent-hover);
  stroke-width: 1.3;
  opacity: 0.75;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: arcane-draw 1.1s 0.25s ease-out forwards;
}

@keyframes arcane-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes arcane-spin {
  to { transform: rotate(360deg); }
}

.arcane-rune-ring {
  transform-origin: 200px 200px;
  animation: arcane-spin-reverse 44s linear infinite;
}
@keyframes arcane-spin-reverse {
  to { transform: rotate(-360deg); }
}

.arcane-rune {
  fill: none;
  stroke: var(--accent-hover);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.35;
  animation: arcane-rune-shimmer 2.4s ease-in-out infinite;
}
@keyframes arcane-rune-shimmer {
  0%, 100% { opacity: 0.22; }
  50% { opacity: 0.72; }
}


.arcane-core {
  fill: var(--accent-hover);
  transform-origin: 200px 200px;
  transform: scale(calc(0.35 + var(--arcane-progress) * 0.65));
  transition: transform 0.34s ease-out;
}
.arcane-core-glow {
  fill: rgba(var(--accent-rgb), 0.28);
  transform-origin: 200px 200px;
  transform: scale(calc(0.4 + var(--arcane-progress) * 0.6));
  transition: transform 0.34s ease-out;
  animation: arcane-core-pulse 2.2s ease-in-out infinite;
}
@keyframes arcane-core-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}



.arcane-node { opacity: 0.28; transition: opacity 0.3s ease-out; }
.arcane-node.is-lit { opacity: 1; }

.arcane-node-disc {
  fill: var(--bg);
  stroke: var(--border);
  stroke-width: 1.6;
  transition: stroke 0.3s ease-out;
}
.arcane-node-glow {
  fill: transparent;
  transition: fill 0.3s ease-out;
}
.arcane-node-glyph {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  fill: var(--text-dim);
  transition: fill 0.3s ease-out;
}


.arcane-node[data-mana="w"].is-lit .arcane-node-disc { stroke: var(--mana-w); }
.arcane-node[data-mana="w"].is-lit .arcane-node-glyph { fill: var(--mana-w); }
.arcane-node[data-mana="u"].is-lit .arcane-node-disc { stroke: var(--mana-u); }
.arcane-node[data-mana="u"].is-lit .arcane-node-glyph { fill: var(--mana-u); }
.arcane-node[data-mana="b"].is-lit .arcane-node-disc { stroke: var(--mana-b); }
.arcane-node[data-mana="b"].is-lit .arcane-node-glyph { fill: var(--mana-b); }
.arcane-node[data-mana="r"].is-lit .arcane-node-disc { stroke: var(--mana-r); }
.arcane-node[data-mana="r"].is-lit .arcane-node-glyph { fill: var(--mana-r); }
.arcane-node[data-mana="g"].is-lit .arcane-node-disc { stroke: var(--mana-g); }
.arcane-node[data-mana="g"].is-lit .arcane-node-glyph { fill: var(--mana-g); }


.arcane-node[data-mana="w"].is-lit .arcane-node-glow { fill: rgba(255, 224, 102, 0.22); }
.arcane-node[data-mana="u"].is-lit .arcane-node-glow { fill: rgba(47, 184, 255, 0.22); }
.arcane-node[data-mana="b"].is-lit .arcane-node-glow { fill: rgba(181, 101, 255, 0.22); }
.arcane-node[data-mana="r"].is-lit .arcane-node-glow { fill: rgba(255, 59, 59, 0.22); }
.arcane-node[data-mana="g"].is-lit .arcane-node-glow { fill: rgba(57, 255, 106, 0.22); }


.arcane-portal.is-igniting .arcane-sigil {
  animation: arcane-ignite 0.5s ease-out forwards;
}
@keyframes arcane-ignite {
  0% { filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.4)); transform: scale(1); }
  35% { filter: drop-shadow(0 0 46px rgba(var(--accent-rgb), 1)) brightness(1.9); transform: scale(1.06); }
  100% { filter: drop-shadow(0 0 26px rgba(var(--accent-rgb), 0.8)) brightness(1.3); transform: scale(1.02); }
}



.arcane-portal-caption { text-align: center; }

.arcane-portal-title {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--font-xl);
  font-weight: 700;
  letter-spacing: 0.42em;
  
  text-shadow: 1.5px 0 rgba(255, 59, 59, 0.5), -1.5px 0 rgba(63, 216, 255, 0.5);
  color: var(--text);
  
  margin-right: -0.42em;
}

.arcane-portal-subtitle {
  margin-top: var(--space-2xs);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--font-2xs);
  letter-spacing: 0.3em;
  color: var(--text-dim);
  margin-right: -0.3em;
}

.arcane-portal-log {
  width: min(30rem, 88vw);
  min-height: 8.5rem; 
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--font-xs);
  color: var(--text-dim);
}

.arcane-log-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding: 1px 0;
  animation: arcane-log-in 0.24s ease-out;
}
.arcane-log-line.is-done { color: var(--ok); }
.arcane-log-line--welcome {
  margin-top: var(--space-2xs);
  color: var(--accent-hover);
  font-weight: 700;
}
@keyframes arcane-log-in {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: none; }
}

.arcane-log-label { white-space: nowrap; }
.arcane-log-label::before { content: "> "; opacity: 0.6; }


.arcane-log-leader {
  flex: 1;
  border-bottom: 1px dotted currentColor;
  opacity: 0.35;
  transform: translateY(-0.2em);
}

.arcane-log-status { white-space: nowrap; }

.arcane-log-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  background: currentColor;
  transform: translateY(0.12em);
  animation: arcane-cursor-blink 1s steps(1, end) infinite;
}
@keyframes arcane-cursor-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}




.arcane-portal-skip {
  position: absolute;
  right: var(--space-xl);
  bottom: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: var(--space-xs) var(--space-lg);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  color: var(--text);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.arcane-portal-skip-label {
  font-size: var(--font-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
}
.arcane-portal-skip-hint {
  font-size: var(--font-3xs);
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.arcane-portal-skip:hover {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: var(--accent);
}

@media (max-width: 700px) {
  .arcane-sigil { width: min(38vh, 240px); height: min(38vh, 240px); }
  .arcane-portal-title { font-size: var(--font-md); letter-spacing: 0.28em; margin-right: -0.28em; }
  .arcane-portal-log { font-size: var(--font-2xs); }
  .arcane-portal-skip { right: var(--space-md); bottom: var(--space-md); }
}


@media (prefers-reduced-motion: reduce) {
  .arcane-portal-scanlines,
  .arcane-rune,
  .arcane-rune-ring,
  .arcane-core-glow,
  .arcane-log-line,
  .arcane-log-cursor,
  .arcane-ring,
  .arcane-star,
  .arcane-portal.is-igniting .arcane-sigil {
    animation: none;
  }
  .arcane-portal-roll { display: none; }
  .arcane-ring,
  .arcane-star { stroke-dashoffset: 0; }
  .arcane-ring--outer { stroke-dasharray: 0.055 0.02; }
  .arcane-core,
  .arcane-core-glow { transition: none; }
}




.cf-idea-row {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
}

.cf-idea-row input { flex: 1; min-width: 0; }
.cf-idea-row .btn { flex: 0 0 auto; }


.cf-more-filters { display: flex; flex-direction: column; gap: var(--space-lg); }


.cf-more-section { margin: 0; }


.cf-more-count { margin-left: var(--space-sm); }


.cf-interpreted {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--font-xs);
  color: var(--text-dim);
}

.cf-interpreted:empty { display: none; }
.cf-interpreted-label { font-weight: 600; }


.cf-interpreted-chip {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}

.cf-interpreted-rest { font-style: italic; }


.cf-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  font-size: var(--font-xs);
  cursor: pointer;
}

.cf-check input { margin-top: var(--space-3xs); flex: 0 0 auto; }

.cf-form-actions,
.cf-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.cf-form-actions { margin-top: var(--space-lg); }
.cf-results-header { margin: var(--space-xl) 0 var(--space-md); }

.cf-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-lg);
}


.cf-why {
  margin: 0;
  padding-left: var(--space-lg);
  font-size: var(--font-2xs);
  color: var(--text-dim);
  line-height: 1.5;
}

.cf-why li { margin-bottom: var(--space-3xs); }


.cf-pitch {
  font-size: var(--font-xs);
  color: var(--text);
  line-height: 1.55;
}


.cf-partial {
  font-size: var(--font-2xs);
  font-weight: 600;
  color: var(--warn);
}


.update-banner {
  position: fixed;
  left: 50%;
  bottom: var(--space-xl);
  transform: translateX(-50%);
  z-index: 96;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: calc(100vw - var(--space-2xl));
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-panel);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  box-shadow: var(--elev-3);
  animation: update-banner-in var(--transition-slow) var(--ease-out-back) both;
}

@keyframes update-banner-in {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.update-banner-text { font-size: var(--font-sm); font-weight: 600; }


.update-banner .btn { white-space: nowrap; }

@media (max-width: 560px) {
  .update-banner { flex-wrap: wrap; justify-content: center; text-align: center; border-radius: var(--radius-lg); }
}



.phone-app-wrap { position: relative; }

.phone-app-panel {
  position: absolute;
  top: calc(100% + var(--space-sm));
  right: 0;
  width: 260px;
  max-width: 90vw;
  padding: var(--space-md);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
  z-index: 150;
  text-align: center;
  
  animation: game-popover-in 140ms var(--ease);
  transform-origin: top right;
}


.phone-app-qr {
  display: inline-block;
  line-height: 0;
  background: #ffffff;
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.phone-app-qr:empty { display: none; }

.phone-app-qr svg { display: block; }


.phone-app-url {
  margin: var(--space-sm) 0 var(--space-xs);
  font-size: var(--font-2xs);
  color: var(--text);
  word-break: break-all;
}


.phone-app-url:empty { display: none; }

.phone-app-note {
  margin: 0;
  font-size: var(--font-2xs);
  color: var(--text-dim);
  text-align: left;
}


.phone-app-actions {
  margin-top: var(--space-sm);
  display: flex;
  justify-content: center;
}


.nav-drawer .phone-app-panel {
  position: static;
  width: auto;
  max-width: none;
  margin-top: var(--space-sm);
  box-shadow: none;
  animation: none;
}





.life-setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-lg);
}

.life-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}


.life-preset.is-active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent-hover);
}

.life-names-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-sm);
}


.life-start-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}


.life-start-btn {
  align-self: flex-start;
  min-height: var(--control-h-lg);
  padding-inline: var(--space-3xl);
  font-size: var(--font-lg);
}



.life-game {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.life-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}


.life-grid > .life-centre-bar {
  grid-column: 1 / -1;
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--space-2xs);
  padding-block: var(--space-3xs);
  overflow: hidden;
}


.life-status {
  margin: 0;
  margin-inline-start: auto;
  text-align: right;
}


.life-grid {
  display: grid;
  grid-template-columns: repeat(var(--life-columns, 2), minmax(0, 1fr));
  gap: var(--space-md);
  grid-auto-rows: minmax(min(24vh, 190px), 1fr);
}



.life-tile {
  --tile-across: 100cqw;
  --tile-along: 100cqh;
  position: relative;
  container-type: size;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--elev-1);
  transition: opacity var(--transition-base), border-color var(--transition-fast),
    box-shadow var(--transition-base);
}


.life-tile--out {
  opacity: 0.55;
  filter: saturate(0.4);
}


.life-tile-inner {
  position: absolute;
  inset: 0;
  
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "name  chips"
    "main  chips"
    "meta  meta"
    "out   out";
  align-items: center;
  justify-items: center;
  gap: var(--space-3xs);
  padding: var(--space-xs);
  transform: rotate(var(--tile-rotation, 0deg));
}


.life-tile[data-rot="90"],
.life-tile[data-rot="270"] {
  --tile-across: 100cqh;
  --tile-along: 100cqw;
}



.life-tile[data-rot="90"] .life-tile-inner,
.life-tile[data-rot="270"] .life-tile-inner {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 100cqh;
  height: 100cqw;
  
  transform: translate(-50%, -50%) rotate(var(--tile-rotation, 0deg));
}


.life-tile-name {
  grid-area: name;
  
  min-width: 0;
  max-width: 100%;
  border: none;
  background: none;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-xs);
  color: var(--text-dim);
  font-size: var(--font-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.life-tile-name:hover { color: var(--text); background: rgba(var(--accent-rgb), 0.1); }


.life-tile-main {
  grid-area: main;
  
  align-self: stretch;
  justify-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
}


.life-total {
  
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  position: relative;
  z-index: 1;
  border: none;
  background: none;
  padding: 0;
  color: var(--text);
  
  font-size: clamp(2.2rem, min(calc(var(--tile-across) * 0.46), calc(var(--tile-along) * 0.34)), 6.4rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.life-total:hover { color: var(--accent-hover); }


.life-step {
  display: flex;
  align-items: center;
  justify-content: center;
  
  flex: 1 1 0;
  width: 100%;
  height: auto;
  min-height: 44px;
  padding: var(--space-2xs) 0;
  border-radius: var(--radius);
  background: none;
  border: none;
  
  box-shadow: none;
  
  color: var(--text-dim);
  opacity: 0.55;
  font-size: clamp(var(--font-lg), calc(var(--tile-across) * 0.09), var(--font-3xl));
  font-weight: 700;
  line-height: 1;
  
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}


.life-step:hover:not(:disabled) { background: rgba(var(--accent-rgb), 0.07); opacity: 1; transform: none; box-shadow: none; }
.life-step:active:not(:disabled) { background: rgba(var(--accent-rgb), 0.13); opacity: 1; transform: none; box-shadow: none; }
.life-step--minus:hover:not(:disabled) { color: var(--error); }
.life-step--plus:hover:not(:disabled) { color: var(--ok); }


.life-step--plus { align-items: flex-start; }
.life-step--minus { align-items: flex-end; }




.life-chips {
  display: flex;
  gap: var(--space-3xs);
  min-width: 0;
  max-width: 100%;
}

.life-chips--cmd {
  grid-area: chips;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}

.life-chips--cmd::-webkit-scrollbar { display: none; }

.life-chips--meta {
  grid-area: meta;
  flex-wrap: wrap;
  justify-content: center;
}


.life-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: clamp(34px, calc(var(--tile-across) * 0.13), 52px);
  min-height: 0;
  padding: var(--space-3xs) var(--space-2xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-input);
  color: var(--text-dim);
  
  box-shadow: none;
  line-height: 1.05;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast);
}

.life-chip:hover { background: var(--bg-panel); border-color: var(--accent); color: var(--text); transform: none; box-shadow: none; }
.life-chip:active { transform: none; box-shadow: none; }

.life-chip-name {
  font-size: var(--font-3xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.life-chip-value {
  font-size: var(--font-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}


.life-chip--lethal {
  border-color: var(--error);
  color: var(--error);
}

.life-chip--lethal .life-chip-value { color: var(--error); }

.life-badge {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-input);
  font-size: var(--font-3xs);
  line-height: 1.2;
  white-space: nowrap;
}

.life-badge-label { color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.life-badge-value { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }


.life-badge--cmd { border-color: rgba(var(--accent-rgb), 0.5); }
.life-badge--cmd .life-badge-label { color: var(--accent); }


.life-badge--lethal {
  border-color: var(--error);
  background: rgba(var(--error-rgb), 0.16);
}

.life-badge--lethal .life-badge-label,
.life-badge--lethal .life-badge-value { color: var(--error); }


.life-tile-out {
  color: var(--error);
  font-size: var(--font-3xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}




.life-delta {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-sm);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--bg-input);
  font-size: var(--font-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  animation: life-delta-in 200ms var(--ease-out-back);
}

.life-delta--up { color: var(--ok); }
.life-delta--down { color: var(--error); }

@keyframes life-delta-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.9); }
  to { opacity: 1; transform: none; }
}


@media (prefers-reduced-motion: reduce) {
  .life-delta { animation: none; }
}



.life-detail-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.life-detail-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.life-detail-heading {
  margin: 0;
  font-size: var(--font-lg);
  color: var(--accent);
}

.life-detail-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}


.life-detail-label {
  flex: 1 1 140px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.life-detail-hint { color: var(--text-dim); font-size: var(--font-3xs); }

.life-detail-input { flex: 1 1 160px; min-width: 0; }

.life-detail-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--font-sm);
  color: var(--text-dim);
  cursor: pointer;
}

.life-mini-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}


.life-mini-btn {
  width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: var(--font-xl);
  font-weight: 700;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.life-mini-value {
  min-width: 2.5ch;
  text-align: center;
  font-size: var(--font-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.life-mini-value--lethal { color: var(--error); }

.life-detail-remove { flex: 0 0 auto; }

.life-add-counter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-2xs);
}

.life-rotate-group { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }


.life-rotate-btn.is-active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent-hover);
}




.life-rulings-results {
  max-height: 46vh;
  overflow-y: auto;
}





.life-wake-note {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0;
  font-size: var(--font-3xs);
  color: var(--text-dim);
}

.life-wake-note::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--ok);
  
  flex: 0 0 auto;
}


#life-undo-btn {
  max-width: 15rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.life-count-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.life-count-btn {
  min-width: 52px;
  min-height: var(--control-h-lg);
  padding-inline: var(--space-md);
  font-size: var(--font-lg);
  font-variant-numeric: tabular-nums;
}


.life-count-btn.is-active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent-hover);
}

.life-layout-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
}


.life-layout-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-dim);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition-fast), background var(--transition-fast),
    color var(--transition-fast);
}

.life-layout-option:hover {
  border-color: var(--accent);
  color: var(--text);
}

.life-layout-option.is-active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--text);
}

.life-layout-label { font-size: var(--font-sm); font-weight: 600; }
.life-layout-hint { font-size: var(--font-3xs); line-height: 1.35; }


.life-layout-preview {
  display: grid;
  grid-template-columns: repeat(var(--preview-columns, 2), 1fr);
  gap: 0.3em;
  font-size: var(--font-3xs);
  width: 6.8em;
  margin-bottom: var(--space-2xs);
}

.life-layout-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2em;
  border-radius: 0.3em;
  background: var(--bg-panel);
  border: 1px solid var(--border);
}


.life-layout-cell--span { grid-column: 1 / -1; }


.life-layout-arrow {
  font-size: 0.9em;
  line-height: 1;
  color: var(--accent);
  transform: rotate(var(--cell-rotation, 0deg));
}

.life-layout-option.is-active .life-layout-arrow { color: var(--accent-hover); }


.life-tile--span { grid-column: 1 / -1; }




[data-seat-color="blue"] { --seat-color: var(--neon-blue); }
[data-seat-color="orange"] { --seat-color: var(--neon-orange); }
[data-seat-color="green"] { --seat-color: var(--neon-green); }
[data-seat-color="pink"] { --seat-color: var(--neon-magenta); }
[data-seat-color="purple"] { --seat-color: var(--neon-purple); }
[data-seat-color="gold"] { --seat-color: var(--neon-yellow); }
[data-seat-color="red"] { --seat-color: var(--neon-red); }
[data-seat-color="teal"] { --seat-color: var(--neon-teal); }
[data-seat-color="indigo"] { --seat-color: var(--neon-indigo); }
[data-seat-color="lime"] { --seat-color: var(--neon-lime); }


.life-tile { border-color: var(--seat-color, var(--border)); }
.life-tile[data-seat-color] { border-width: 2px; }


.life-tile[data-seat-color] .life-tile-name::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0.7em;
  height: 0.7em;
  margin-inline-end: 0.45em;
  border-radius: var(--radius-pill);
  background: var(--seat-color);
}



.life-color-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}


.life-color-swatch {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.life-color-swatch::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: var(--radius-pill);
  background: var(--seat-color, transparent);
  border: 2px solid var(--seat-color, var(--border));
  transition: transform var(--transition-fast);
}


.life-color-swatch--none::before {
  background: transparent;
  border-style: dashed;
}

.life-color-swatch:hover::before { transform: scale(1.12); }


.life-color-swatch.is-active {
  box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 4px var(--accent);
}




body.life-immersive .topbar,
body.life-immersive .tabs,
body.life-immersive .app-footer,
body.life-immersive .social-dock {
  display: none;
}


body.life-immersive .content {
  padding: 0;
  overflow: hidden;
}


body.life-immersive .tab-panel:not(#tab-life) {
  display: none;
}

body.life-immersive #tab-life {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}


body.life-immersive .life-game {
  flex: 1;
  min-height: 0;
  gap: var(--space-2xs);
  padding: calc(var(--space-2xs) + env(safe-area-inset-top, 0px))
    calc(var(--space-2xs) + env(safe-area-inset-right, 0px))
    calc(var(--space-2xs) + env(safe-area-inset-bottom, 0px))
    calc(var(--space-2xs) + env(safe-area-inset-left, 0px));
}


body.life-immersive .life-toolbar {
  flex: 0 0 auto;
  gap: var(--space-2xs);
}


body.life-immersive .life-toolbar .btn {
  min-height: var(--control-h-lg);
  padding-inline: var(--space-sm);
  font-size: var(--font-2xs);
}


body.life-immersive .life-status,
body.life-immersive .life-wake-note {
  display: none;
}


body.life-immersive .life-grid {
  flex: 1;
  min-height: 0;
  grid-auto-rows: 1fr;
  gap: var(--space-2xs);
}


body.life-immersive .life-total {
  font-size: clamp(2.6rem, min(calc(var(--tile-across) * 0.56), calc(var(--tile-along) * 0.4)), 8rem);
}



.life-toolbar .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}


.life-btn-icon {
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
}


body.life-immersive .life-btn-label {
  display: none;
}

body.life-immersive .life-toolbar .btn {
  
  min-width: var(--control-h-lg);
  justify-content: center;
  padding-inline: var(--space-2xs);
}

body.life-immersive .life-btn-icon {
  width: 1.5em;
  height: 1.5em;
}

@media (max-width: 760px) {
  .life-btn-label {
    display: none;
  }

  .life-toolbar .btn {
    min-width: var(--control-h-lg);
    justify-content: center;
    padding-inline: var(--space-2xs);
  }

  .life-btn-icon {
    width: 1.5em;
    height: 1.5em;
  }
}




.life-badge--designation .life-badge-label { color: var(--text); }


.life-badge--stale {
  border-color: var(--warn);
  background: rgba(var(--warn-rgb), 0.16);
}

.life-badge--stale .life-badge-label { color: var(--warn); }


.life-badge--more {
  border-color: transparent;
  background: none;
  color: var(--text-dim);
  padding-inline: var(--space-3xs);
}


.life-designation-btn {
  flex: 0 0 auto;
  min-height: var(--control-h-lg);
}

.life-detail-row.is-active .life-detail-label > span:first-child { color: var(--accent); }




.life-tile[data-turn="fresh"],
.life-tile[data-turn="long"] {
  box-shadow: var(--elev-1), inset 0 0 0 3px rgba(var(--accent-rgb), 0.85);
}


.life-tile[data-turn="fading"] {
  box-shadow: var(--elev-1), inset 0 0 0 3px rgba(var(--accent-rgb), 0.35);
}


.life-turn-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: var(--control-h-lg);
  padding: var(--space-2xs) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text);
  cursor: pointer;
  
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.life-turn-bar:hover { border-color: var(--accent); background: var(--bg-panel); }

.life-turn-bar-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.life-turn-bar-main {
  font-size: var(--font-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}


.life-turn-bar-meta {
  font-size: var(--font-3xs);
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}


.life-turn-bar--out { border-color: var(--warn); }
.life-turn-bar--out .life-turn-bar-meta { color: var(--warn); }




@media (max-width: 760px) {
  .life-status {
    margin-inline-start: 0;
    width: 100%;
    text-align: left;
  }

  .life-grid {
    grid-auto-rows: minmax(min(22vh, 160px), 1fr);
    gap: var(--space-sm);
  }

  .life-start-btn { align-self: stretch; }
}






body:not(.nav-collapsed) #app-shell { flex-direction: row; }

body:not(.nav-collapsed) .tabs {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  
  width: clamp(212px, 15.5rem, 288px);
  flex-shrink: 0;
  gap: var(--space-3xs);
  
  padding: var(--space-md);
  border-bottom: none;
  border-right: 1px solid var(--border);
  
  box-shadow: 1px 0 0 var(--border), 6px 0 16px rgba(0, 0, 0, 0.16);
  
  overflow-y: auto;
  
  overflow-x: hidden;
}


body:not(.nav-collapsed) .tab {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-md);
  white-space: nowrap;
}


body:not(.nav-collapsed) .tab.active {
  box-shadow: inset 3px 0 0 var(--accent),
              inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent);
}



body:not(.nav-collapsed) .nav-group { flex-direction: column; }


body:not(.nav-collapsed) .tab.nav-group-trigger { justify-content: space-between; }


body:not(.nav-collapsed) .tab.is-building::before { border-radius: var(--radius-sm); }

body:not(.nav-collapsed) .nav-menu {
  position: relative;
  
  top: auto;
  left: auto;
  min-width: 0;
  margin: var(--space-3xs) 0 var(--space-2xs) var(--space-md);
  
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-snug);
  border: none;
  border-left: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height var(--transition-base), visibility 0s linear 280ms;
}


body:not(.nav-collapsed) .nav-menu::before { content: none; }

body:not(.nav-collapsed) .nav-group.is-open > .nav-menu {
  
  max-height: 420px;
  visibility: visible;
  transition: max-height var(--transition-base), visibility 0s;
  
  margin-left: 0;
  padding-left: 0;
  border-left: none;
}


body:not(.nav-collapsed) .nav-group.is-open > .tab.nav-group-trigger {
  
  padding: var(--space-sm) var(--space-md) var(--space-3xs);
  min-height: 0;
  font-size: var(--font-2xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: none;
  box-shadow: none;
}
body:not(.nav-collapsed) .nav-group.is-open > .tab.nav-group-trigger:hover {
  color: var(--text);
  background: none;
}

body:not(.nav-collapsed) .nav-group.is-open > .tab.nav-group-trigger.is-active {
  color: var(--text-dim);
  font-weight: 700;
  background: none;
  box-shadow: none;
}

body:not(.nav-collapsed) .nav-group.is-open > .tab.nav-group-trigger .nav-group-caret {
  opacity: 0.4;
  transform: scale(0.8);
}

@media (prefers-reduced-motion: reduce) {
  body:not(.nav-collapsed) .nav-menu { transition-delay: 0s; }
}


body:not(.nav-collapsed) .content { min-width: 0; }




body:not(.nav-collapsed) .rail-toggle {
  display: block;
  margin-top: auto;
  width: 100%;
  min-height: var(--control-h);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

body:not(.nav-collapsed) .rail-toggle:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}


body:not(.nav-collapsed) .rail-toggle::before {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  margin: 0 auto;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition-base);
}

body.rail-collapsed:not(.nav-collapsed) .rail-toggle::before { transform: rotate(-135deg); }


body.rail-collapsed:not(.nav-collapsed) .tabs {
  width: calc(var(--control-h) + var(--space-md) * 2);
  padding-inline: var(--space-md);
}

body.rail-collapsed:not(.nav-collapsed) .tabs > .tab,
body.rail-collapsed:not(.nav-collapsed) .tabs > .nav-group {
  display: none;
}


@media (max-width: 999.98px) {
  body:not(.nav-collapsed) .two-col {
    display: flex;
    flex-direction: column;
    height: auto;
  }
}


.rail-toggle { display: none; }





.home-actions {
  gap: var(--space-sm);
}


.home-nav-btn {
  padding: var(--space-snug) var(--space-lg);
  
  animation: none;
  box-shadow: var(--elev-1);
}

.home-nav-btn:hover, .home-nav-btn:focus-visible {
  box-shadow: var(--elev-2);
}



.two-col {
  gap: var(--space-xl);
}


.card-role-heading {
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}





#tab-decks > .decks-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  margin-inline: calc(var(--space-2xl) * -1);
  padding: var(--space-sm) var(--space-2xl);
  margin-bottom: var(--space-md);
  background: var(--bg);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}



body:not(.nav-collapsed) .decks-grid.view-grid { grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: var(--space-md); }
body:not(.nav-collapsed) .decks-grid.view-card { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-md); }




.collection-stat-pill {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 108px;
  padding: var(--space-xs) var(--space-snug);
  border-radius: var(--radius-xs);
}

.collection-stat-pill-label {
  font-size: var(--font-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.collection-stat-pill-value {
  font-size: var(--font-lg);
  line-height: 1.2;
}


@media (max-width: 760px) {
  #tab-decks > .decks-toolbar {
    position: static;
    margin-inline: 0;
    padding-inline: 0;
  }
}


.collection-list { max-height: clamp(320px, 58vh, 720px); }



:root:not([data-theme]) body {
  
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    radial-gradient(circle at 17% 23%, var(--star) 0 1px, transparent 1.4px),
    radial-gradient(circle at 68% 71%, var(--star-dim) 0 0.8px, transparent 1.2px),
    radial-gradient(circle at 50% 132%, transparent 0 59.6%, var(--orrery) 59.6% 59.9%, transparent 60%),
    radial-gradient(circle at 50% 132%, transparent 0 74%, var(--grid-major) 74% 74.25%, transparent 74.4%),
    radial-gradient(ellipse 68% 46% at 82% 8%, var(--nebula), transparent 72%);
  background-size:
    100% 24px, 24px 100%, 100% 120px, 120px 100%,
    167px 139px, 241px 199px,
    100% 100%, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
}


:root:not([data-theme]) {
  --bracket: 9px;
}


:root:not([data-theme]) .tabs {
  background-image:
    radial-gradient(circle at 26px calc(100% - 96px), transparent 0 33px, var(--grid-major) 33px 33.8px, transparent 34px),
    radial-gradient(circle at 26px calc(100% - 96px), transparent 0 19px, var(--grid-major) 19px 19.7px, transparent 20px),
    radial-gradient(circle at 26px calc(100% - 96px), var(--grid-major) 0 1.6px, transparent 2px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: auto, auto, auto, 54px 1px, 1px 54px;
  background-position:
    0 0, 0 0, 0 0,
    left -1px bottom 95px, left 25px bottom calc(100% - 100% + 69px);
}

:root:not([data-theme]) .panel,
:root:not([data-theme]) .modal,
:root:not([data-theme]) .auth-card {
  border-color: var(--border);
  background-image:
    linear-gradient(var(--border-lit), var(--border-lit)),
    linear-gradient(var(--border-lit), var(--border-lit)),
    linear-gradient(var(--border-lit), var(--border-lit)),
    linear-gradient(var(--border-lit), var(--border-lit)),
    linear-gradient(var(--border-lit), var(--border-lit)),
    linear-gradient(var(--border-lit), var(--border-lit)),
    linear-gradient(var(--border-lit), var(--border-lit)),
    linear-gradient(var(--border-lit), var(--border-lit));
  background-repeat: no-repeat;
  background-size:
    var(--bracket) 1px, 1px var(--bracket),
    var(--bracket) 1px, 1px var(--bracket),
    var(--bracket) 1px, 1px var(--bracket),
    var(--bracket) 1px, 1px var(--bracket);
  background-position:
    left 0 top 0, left 0 top 0,
    right 0 top 0, right 0 top 0,
    left 0 bottom 0, left 0 bottom 0,
    right 0 bottom 0, right 0 bottom 0;
}



:root[data-theme="steampunk"] {
  
  --display-face: "Rockwell", "Bookman Old Style", "Bodoni MT", Georgia, "Times New Roman", serif;
  
  --brass-edge: color-mix(in srgb, var(--accent) 30%, var(--border));
  
  --rivet-hi: color-mix(in srgb, var(--accent) 45%, #fff);
  --rivet: color-mix(in srgb, var(--accent) 92%, transparent);
  --rivet-shade: color-mix(in srgb, #000 55%, transparent);
  
  --rivet-glint: color-mix(in srgb, #fff 70%, transparent);
}


:root[data-theme="steampunk"] .panel,
:root[data-theme="steampunk"] .modal,
:root[data-theme="steampunk"] .auth-card {
  border-color: var(--brass-edge);
  --rivet-glint-layer: radial-gradient(circle at 9.1px 9.1px,
      var(--rivet-glint) 0 0.9px,
      transparent 1px);
  --rivet-head-layer: radial-gradient(circle at 10px 10px,
      var(--rivet-hi) 0 1.4px,
      var(--rivet) 1.4px 2.6px,
      var(--rivet-shade) 2.6px 3.4px,
      transparent 3.5px);
  background-image:
    var(--rivet-glint-layer), var(--rivet-head-layer),
    var(--rivet-glint-layer), var(--rivet-head-layer),
    var(--rivet-glint-layer), var(--rivet-head-layer),
    var(--rivet-glint-layer), var(--rivet-head-layer),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent) 0, transparent 72px);
  background-repeat: no-repeat;
  background-size:
    20px 20px, 20px 20px,
    20px 20px, 20px 20px,
    20px 20px, 20px 20px,
    20px 20px, 20px 20px,
    100% 100%;
  background-position:
    left 0 top 0, left 0 top 0,
    right 0 top 0, right 0 top 0,
    left 0 bottom 0, left 0 bottom 0,
    right 0 bottom 0, right 0 bottom 0,
    0 0;
}


:root[data-theme="steampunk"] .auth-card {
  --rivet-glint: color-mix(in srgb, #fff 26%, transparent);
  --rivet-hi: color-mix(in srgb, var(--accent) 76%, #fff);
  --rivet: color-mix(in srgb, var(--accent) 40%, transparent);
  --rivet-shade: color-mix(in srgb, #000 24%, transparent);
}


:root[data-theme="steampunk"][data-mode="light"] {
  --rivet-glint: color-mix(in srgb, #fff 88%, transparent);
  --rivet-hi: color-mix(in srgb, var(--accent) 82%, #fff);
  --rivet: color-mix(in srgb, var(--accent) 92%, transparent);
  --rivet-shade: color-mix(in srgb, #000 26%, transparent);
}


:root[data-theme="steampunk"][data-mode="light"] .auth-card {
  --rivet-glint: color-mix(in srgb, #fff 55%, transparent);
  --rivet-hi: color-mix(in srgb, var(--accent) 70%, #fff);
  --rivet: color-mix(in srgb, var(--accent) 50%, transparent);
  --rivet-shade: color-mix(in srgb, #000 14%, transparent);
}


:root[data-theme="steampunk"] .btn-primary {
  background-image: linear-gradient(180deg,
    color-mix(in srgb, #fff 24%, transparent) 0,
    transparent 48%,
    color-mix(in srgb, #000 14%, transparent) 100%);
}


:root[data-theme="steampunk"] .topbar,
:root[data-theme="steampunk"] .tabs {
  border-bottom-color: var(--brass-edge);
}


:root[data-theme="steampunk"] .tabs {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Crect id='t' x='55.5' y='11' width='9' height='19' rx='2'/%3E%3C/defs%3E%3Cg fill='%23a0692c' opacity='.13'%3E%3Cuse href='%23t'/%3E%3Cuse href='%23t' transform='rotate(45 60 60)'/%3E%3Cuse href='%23t' transform='rotate(90 60 60)'/%3E%3Cuse href='%23t' transform='rotate(135 60 60)'/%3E%3Cuse href='%23t' transform='rotate(180 60 60)'/%3E%3Cuse href='%23t' transform='rotate(225 60 60)'/%3E%3Cuse href='%23t' transform='rotate(270 60 60)'/%3E%3Cuse href='%23t' transform='rotate(315 60 60)'/%3E%3C/g%3E%3Cg fill='none' stroke='%23a0692c' stroke-width='7' opacity='.13'%3E%3Ccircle cx='60' cy='60' r='31'/%3E%3Ccircle cx='60' cy='60' r='13'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Crect id='t' x='55.5' y='11' width='9' height='19' rx='2'/%3E%3C/defs%3E%3Cg fill='%23a0692c' opacity='.10'%3E%3Cuse href='%23t'/%3E%3Cuse href='%23t' transform='rotate(45 60 60)'/%3E%3Cuse href='%23t' transform='rotate(90 60 60)'/%3E%3Cuse href='%23t' transform='rotate(135 60 60)'/%3E%3Cuse href='%23t' transform='rotate(180 60 60)'/%3E%3Cuse href='%23t' transform='rotate(225 60 60)'/%3E%3Cuse href='%23t' transform='rotate(270 60 60)'/%3E%3Cuse href='%23t' transform='rotate(315 60 60)'/%3E%3C/g%3E%3Cg fill='none' stroke='%23a0692c' stroke-width='7' opacity='.10'%3E%3Ccircle cx='60' cy='60' r='31'/%3E%3Ccircle cx='60' cy='60' r='13'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-size: 46px 46px, 26px 26px;
  background-position: right 20px center, right 60px top 4px;
}


:root[data-theme="steampunk"] body:not(.nav-collapsed) .tabs {
    
    background-position:
      left 22px bottom calc(var(--space-md) * 2 + var(--control-h)),
      left 68px bottom calc(var(--space-md) * 2 + var(--control-h) + 46px);
}


:root[data-theme="steampunk"] .topbar-title,
:root[data-theme="steampunk"] .tab,
:root[data-theme="steampunk"] .settings-tab,
:root[data-theme="steampunk"] .card-role-heading {
  font-family: var(--display-face);
  letter-spacing: 0.01em;
}


@media print {
  
  :root:root:root {
    --bg: #f4f2ee;
    --bg-panel: #ffffff;
    --bg-input: #faf8f4;
    --border: #d7d3ca;
    --text: #1b1a24;
    --text-dim: #5c5a68;
    --accent: #6b3fc4;
    --accent-hover: #7d4fd8;
    --accent-dim: #d9caf5;
    --on-accent: #ffffff;
    --ok: #1a7a3a;
    --warn: #7d6a00;
    --error: #a52a3a;
    --accent-rgb: 107, 63, 196;
    --error-rgb: 165, 42, 58;
    --ok-rgb: 26, 122, 58;
    --warn-rgb: 125, 106, 0;
    --neon: #0d5fb0;
    --neon-purple: #7a2fd0;
    --hair: #7d5326;
    --neon-blue: #007a99;
    --neon-orange: #b05800;
    --neon-green: #008220;
    --neon-red: #e00000;
    --firefly-glow: #5b7800;
    --neon-yellow: #8a6a00;
    --neon-indigo: #2a3ec9;
    --neon-magenta: #b0007a;
    --neon-lime: #3e7f00;
    --neon-teal: #007a5b;
    --mana-w: #755e00;
    --mana-u: #006599;
    --mana-b: #7a00eb;
    --mana-r: #b80000;
    --mana-g: #006e1b;
    --mana-c: #496283;

    
    --hairline: none;
    --elev-1: none;
    --elev-2: none;
    --elev-3: none;
  }

  
  .topbar,
  .tabs,
  .nav-drawer,
  .nav-drawer-toggle,
  .home-stage,
  .companion-slot,
  .auth-mascot,
  .mascot-wrap,
  .sound-dock,
  .social-dock,
  .undo-toast,
  .view-toggle,
  .card-qty-btn {
    display: none;
  }

  
  .form-actions,
  .cf-form-actions,
  .result-actions,
  .toolbar-actions,
  .modal-actions,
  .auth-actions,
  .collection-detail-actions,
  .deck-actions,
  .forum-post-actions,
  .friend-row-actions {
    display: none;
  }

  
  .tab-panel:not(.active) {
    display: none;
  }

  
  html,
  body {
    height: auto;
  }

  body,
  #app-shell {
    display: block;
  }

  .content {
    overflow: visible;
  }

  
  .results,
  .two-col,
  .two-col > .form,
  .content > .tab-panel.active:has(> .two-col),
  .content > .tab-panel.active:has(> .two-col) > .two-col > .form,
  .content > .tab-panel.active:has(> .two-col) > .two-col > .results {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  
  .two-col {
    display: flex;
    flex-direction: column;
  }

  
  .collection-list,
  .card-price-list.view-list,
  .card-price-list.card-price-list--grouped,
  
  .deck-analysis-block > .collapsible-body,
  .synergy-matrix-scroll,
  .cf-chips {
    max-height: none;
    overflow: visible;
  }

  
  
  .collection-row,
  .card-row,
  .card-image-tile,
  .deck-row,
  .deck-tile,
  .deck-card,
  .admin-table tr {
    break-inside: avoid;
  }

  .card-role-heading,
  .result-heading {
    break-after: avoid;
  }

  
  .btn-primary,
  .format-toggle.active {
    color: var(--text);
  }

  
  :root[data-theme="steampunk"] .panel,
  :root[data-theme="steampunk"] .modal,
  :root[data-theme="steampunk"] .auth-card,
  :root[data-theme="steampunk"] .btn-primary,
  :root[data-theme="steampunk"] .tabs {
    background-image: none;
  }
}