:root {
  --bg: #05080d;
  --panel: #0d1b2a;
  --panel-strong: #12263a;
  --text: #f5f2e8;
  --muted: #a9c2d8;
  --line: #29445d;
  --accent: #39a9ff;
  --accent-soft: rgba(57, 169, 255, 0.18);
  --accent-strong: #8fd5ff;
  --danger: #d36a5f;
  --shadow: 0 22px 80px rgba(0, 12, 28, 0.42);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 0%, rgba(57, 169, 255, 0.24), transparent 34%),
    radial-gradient(circle at 10% 18%, rgba(18, 88, 170, 0.28), transparent 34%),
    linear-gradient(135deg, #05080d 0%, #0c1622 52%, #06101a 100%);
}

button,
input {
  font: inherit;
}

select {
  font: inherit;
}

textarea {
  font: inherit;
}

button {
  border: 0;
  color: inherit;
  cursor: pointer;
  min-width: 0;
}

.app-shell {
  width: min(1500px, calc(100% - 20px));
  min-height: calc(100vh - 20px);
  margin: 10px auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: visible;
}

.top-bar,
.controls,
.tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 17, 27, 0.9);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}

.top-bar {
  position: relative;
  min-height: 176px;
  justify-content: center;
  padding: 14px 132px;
  overflow: hidden;
}

.top-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 0%, rgba(57, 169, 255, 0.2), transparent 46%),
    linear-gradient(90deg, transparent, rgba(143, 213, 255, 0.08), transparent);
  pointer-events: none;
}

.brand {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 4px;
}

.brand-logo {
  width: min(280px, 42vw);
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 18px 34px rgba(57, 169, 255, 0.28));
}

.eyebrow {
  margin: 0;
  color: var(--accent);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  text-align: center;
  transform: perspective(320px) rotateX(10deg);
  text-shadow:
    0 1px 0 #bfeaff,
    0 2px 0 #5dbdff,
    0 3px 0 #1269aa,
    0 8px 16px rgba(0, 0, 0, 0.72),
    0 0 24px rgba(57, 169, 255, 0.7);
}

.page-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 7px;
  padding: 4px;
  border: 1px solid rgba(143, 213, 255, 0.22);
  border-radius: 8px;
  background: rgba(3, 12, 21, 0.72);
}

.page-tabs button {
  min-height: 34px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 0 16px;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.page-tabs button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #03101c;
  box-shadow: 0 0 22px rgba(57, 169, 255, 0.28);
}

.page-panel:not(.active) {
  display: none !important;
}

.life-page {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.top-actions {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
}

.top-actions,
.mode-buttons,
.stepper,
.segmented,
.roll-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-button,
.text-button,
.mini-button,
.segmented button,
.mode-buttons button,
.counter button,
.tools button,
.deck-tools button,
.player-header button {
  min-height: 34px;
  border-radius: 7px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  color: var(--text);
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.icon-button {
  width: 40px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
}

.icon-button.small {
  width: 34px;
  min-height: 34px;
}

.text-button,
.tools button,
.deck-tools button,
.inline-toggle {
  padding: 0 16px;
  font-weight: 800;
}

.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

button:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent), var(--panel-strong) 68%);
  box-shadow: 0 0 18px rgba(57, 169, 255, 0.22);
}

button:active,
.text-button:active {
  transform: translateY(1px);
  opacity: 0.72;
  animation: buttonPulse 180ms ease;
}

.text-button:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent), var(--panel-strong) 68%);
  box-shadow: 0 0 18px rgba(57, 169, 255, 0.22);
}

.hyperframes-link {
  border-color: rgba(57, 169, 255, 0.58);
  background: rgba(57, 169, 255, 0.16);
  color: var(--accent-strong);
}

#historyButton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#historyCount {
  min-width: 22px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border: 1px solid rgba(143, 213, 255, 0.42);
  border-radius: 999px;
  background: rgba(57, 169, 255, 0.16);
  color: var(--accent-strong);
  font-size: 0.76rem;
  font-weight: 950;
}

#historyButton.has-history #historyCount {
  border-color: var(--accent);
  background: var(--accent);
  color: #03101c;
}

.turn-tracker-strip {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: stretch;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(143, 213, 255, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(57, 169, 255, 0.12), transparent 46%),
    rgba(3, 12, 21, 0.78);
  box-shadow: var(--shadow);
}

.turn-tracker-head {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) minmax(260px, auto);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.turn-tracker-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.turn-tracker-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.turn-tracker-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  min-width: 190px;
}

.turn-tracker-controls button {
  min-height: 100%;
  min-width: 88px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-strong);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 900;
}

.turn-tracker-controls button:disabled {
  cursor: not-allowed;
  border-color: rgba(143, 213, 255, 0.12);
  background: rgba(50, 58, 66, 0.38);
  color: rgba(169, 194, 216, 0.46);
  box-shadow: none;
}

.last-action-output {
  min-width: 0;
  min-height: 34px;
  display: block;
  overflow: hidden;
  padding: 9px 10px;
  border: 1px solid rgba(143, 213, 255, 0.18);
  border-radius: 7px;
  background: rgba(4, 13, 22, 0.7);
  color: var(--muted);
  font-size: clamp(0.76rem, 1vw, 0.88rem);
  font-weight: 780;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.last-action-output::before {
  content: "Last Action: ";
  color: var(--accent-strong);
  font-weight: 950;
}

.turn-tracker-text {
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border: 1px solid rgba(57, 169, 255, 0.34);
  border-radius: 7px;
  background: rgba(57, 169, 255, 0.1);
  color: var(--accent-strong);
  font-size: clamp(0.76rem, 1vw, 0.88rem);
  font-weight: 950;
  text-align: center;
  white-space: normal;
}

.turn-tracker-strip.tracking-disabled {
  border-color: rgba(143, 213, 255, 0.12);
  background: rgba(38, 45, 52, 0.5);
  box-shadow: none;
}

.turn-tracker-strip.tracking-disabled .turn-tracker-text,
.turn-tracker-strip.tracking-disabled .turn-tracker-toggle span {
  color: rgba(169, 194, 216, 0.46);
}

.controls {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.deck-builder {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(57, 169, 255, 0.13), transparent 36%),
    rgba(8, 17, 27, 0.9);
  box-shadow: var(--shadow);
}

.deck-builder-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.section-kicker {
  margin: 0 0 4px;
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.deck-builder h1 {
  margin: 0;
  font-size: clamp(1.12rem, 1.8vw, 1.55rem);
  line-height: 1.05;
}

.deck-toolbar,
.deck-search-row,
.deck-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.deck-toolbar button,
.deck-search-row button,
.deck-result-actions button,
.deck-list-row button,
.deck-ai-review button {
  min-height: 34px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--panel-strong);
  color: var(--text);
  padding: 0 12px;
  font-weight: 900;
}

.deck-toolbar button:nth-child(3),
.deck-search-row button {
  background: var(--accent);
  border-color: var(--accent);
  color: #03101c;
}

.deck-import-strip {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(143, 213, 255, 0.18);
  border-radius: 8px;
  background: rgba(3, 12, 21, 0.62);
}

.deck-import-strip label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.deck-import-strip input {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(3, 12, 21, 0.88);
  color: var(--text);
  padding: 0 10px;
  font-weight: 780;
}

.deck-import-strip button {
  min-height: 34px;
  border-radius: 7px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #03101c;
  padding: 0 12px;
  font-weight: 900;
}

.deck-toast {
  justify-self: start;
  padding: 8px 12px;
  border: 1px solid rgba(91, 255, 143, 0.46);
  border-radius: 8px;
  background: rgba(14, 79, 39, 0.86);
  color: #dfffe9;
  font-weight: 950;
  box-shadow: 0 0 22px rgba(83, 255, 142, 0.18);
}

.deck-toast[data-tone="warning"] {
  border-color: rgba(255, 216, 91, 0.58);
  background: rgba(95, 68, 12, 0.9);
  color: #fff0b8;
}

.deck-toast.show {
  animation: deckToastFlash 1000ms ease both;
}

.saved-decks-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(143, 213, 255, 0.16);
  border-radius: 8px;
  background: rgba(5, 13, 24, 0.58);
}

.saved-decks-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.saved-decks-head h2,
.saved-decks-head p {
  margin: 0;
}

.saved-decks-head h2 {
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  line-height: 1;
}

.saved-decks-head > p {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 850;
  text-align: right;
}

.saved-decks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 126px), 154px));
  align-items: start;
  justify-content: start;
  gap: 10px;
}

.saved-decks-empty {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.saved-deck-card {
  display: grid;
  aspect-ratio: 1 / 1.06;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(143, 213, 255, 0.16);
  border-radius: 8px;
  background: rgba(3, 12, 21, 0.78);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.saved-deck-card.active {
  border-color: rgba(57, 169, 255, 0.62);
  box-shadow: 0 0 22px rgba(57, 169, 255, 0.16);
}

.saved-deck-card:hover,
.saved-deck-card:focus-within {
  border-color: rgba(57, 169, 255, 0.62);
  background: rgba(8, 25, 42, 0.86);
  box-shadow: 0 0 24px rgba(57, 169, 255, 0.18);
}

.saved-deck-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.saved-deck-card-head {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 7px;
  height: 100%;
  min-height: 0;
}

.saved-deck-hero {
  justify-self: center;
  width: clamp(72px, 66%, 94px);
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid rgba(143, 213, 255, 0.28);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(57, 169, 255, 0.22), rgba(5, 13, 24, 0.9));
  background-position: center;
  background-size: cover;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.saved-deck-card:hover .saved-deck-hero,
.saved-deck-card:focus-within .saved-deck-hero {
  border-color: var(--accent);
  box-shadow: 0 0 18px rgba(57, 169, 255, 0.22);
}

.saved-deck-title {
  min-width: 0;
  display: grid;
  align-content: center;
}

.saved-deck-title h3,
.saved-deck-name-button,
.saved-deck-title p {
  margin: 0;
}

.saved-deck-title h3,
.saved-deck-name-button {
  display: -webkit-box;
  overflow: hidden;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.76rem;
  line-height: 1.08;
  font-weight: 950;
  text-align: center;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.saved-deck-card:hover .saved-deck-name-button,
.saved-deck-card:focus-within .saved-deck-name-button,
.saved-deck-name-button:hover {
  color: var(--accent-strong);
}

.saved-deck-title p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 850;
}

.saved-deck-card-groups,
.deck-library-list {
  display: grid;
  gap: 8px;
  max-height: min(620px, calc(100vh - 150px));
  overflow: auto;
  padding-right: 3px;
}

.saved-deck-card-group {
  display: grid;
  gap: 5px;
}

.saved-deck-card-group h4 {
  margin: 0;
  color: var(--accent-strong);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.saved-deck-card-row {
  display: grid;
  grid-template-columns: 44px auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(143, 213, 255, 0.13);
  border-radius: 8px;
  background: rgba(4, 13, 22, 0.66);
}

.deck-library-card-row {
  grid-template-columns: 66px auto minmax(0, 1fr);
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.deck-library-card-row .deck-card-thumb {
  width: 66px;
  min-width: 66px !important;
  height: 92px;
  min-height: 92px !important;
}

.deck-library-card-row:hover {
  transform: translateX(2px);
  border-color: rgba(57, 169, 255, 0.48);
  background: rgba(57, 169, 255, 0.1);
}

.saved-deck-card-row .deck-card-thumb {
  width: 44px;
  min-width: 44px !important;
  height: 62px;
  min-height: 62px !important;
}

.deck-library-card-row.saved-deck-card-row .deck-card-thumb {
  width: 66px;
  min-width: 66px !important;
  height: 92px;
  min-height: 92px !important;
}

.deck-builder-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.92fr) minmax(360px, 1.2fr);
  gap: 10px;
  align-items: start;
}

.deck-search-panel,
.deck-editor-panel {
  position: relative;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(143, 213, 255, 0.18);
  border-radius: 8px;
  background: rgba(4, 13, 22, 0.72);
}

.deck-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.deck-search-row input,
.deck-editor-fields input,
.deck-editor-fields select,
.deck-editor-fields output,
.deck-editor-fields textarea,
.deck-filter-row input,
.deck-filter-row select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(3, 12, 21, 0.88);
  color: var(--text);
  padding: 0 10px;
  font-weight: 780;
}

.ai-bracket-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ai-bracket-field output {
  display: grid;
  align-items: center;
  color: var(--accent-strong);
  background:
    linear-gradient(180deg, rgba(57, 169, 255, 0.2), rgba(3, 12, 21, 0.86)),
    rgba(3, 12, 21, 0.88);
  border-color: rgba(57, 169, 255, 0.48);
  box-shadow: inset 0 0 0 1px rgba(191, 234, 255, 0.14);
}

.deck-editor-fields textarea {
  min-height: 58px;
  padding: 8px 10px;
  resize: vertical;
  line-height: 1.25;
}

.deck-filter-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.deck-filter-row label,
.deck-editor-fields label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.deck-search-suggestions {
  position: absolute;
  z-index: 60;
  top: 52px;
  left: 10px;
  right: 10px;
  display: grid;
  max-height: 230px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(3, 12, 21, 0.98);
  box-shadow: var(--shadow);
}

.deck-search-suggestions[hidden] {
  display: none;
}

.deck-search-suggestions button {
  min-height: 34px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: var(--text);
  padding: 0 9px;
  text-align: left;
}

.deck-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  max-height: 560px;
  overflow: auto;
  padding-right: 3px;
}

.deck-result-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(143, 213, 255, 0.18);
  border-radius: 8px;
  background: rgba(10, 24, 38, 0.82);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.deck-result-card:hover,
.deck-result-card:focus-visible {
  border-color: rgba(57, 169, 255, 0.58);
  background: rgba(11, 32, 52, 0.92);
  box-shadow: 0 0 22px rgba(57, 169, 255, 0.16);
  transform: translateY(-1px);
}

.deck-result-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.deck-result-card img {
  width: 100%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid rgba(143, 213, 255, 0.18);
  background: #08111b;
}

.deck-result-card strong,
.deck-list-row strong {
  display: block;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.1;
}

.deck-result-card small,
.deck-list-row span,
.deck-stat span {
  color: var(--muted);
  font-weight: 800;
}

.deck-result-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.deck-result-text p {
  margin: 0;
  color: #d9e9f7;
  font-size: 0.78rem;
  line-height: 1.24;
}

.game-changer-badge {
  display: inline-grid;
  justify-self: start;
  width: fit-content;
  margin-top: 2px;
  padding: 3px 7px;
  border: 1px solid rgba(255, 216, 91, 0.62);
  border-radius: 5px;
  background: rgba(255, 213, 74, 0.18);
  color: #ffe58a !important;
  font-size: 0.68rem !important;
  font-weight: 950 !important;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 0 16px rgba(255, 213, 74, 0.14);
}

.deck-result-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
}

.deck-editor-fields {
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) minmax(110px, 0.75fr) minmax(76px, 0.45fr);
  gap: 8px;
}

.deck-notes-field {
  grid-column: 1 / -1;
}

.deck-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 7px;
}

.deck-stat {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid rgba(143, 213, 255, 0.16);
  border-radius: 8px;
  background: rgba(3, 12, 21, 0.62);
}

.deck-stat strong {
  font-size: 1.12rem;
  color: var(--accent-strong);
}

.deck-mana-profile {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(143, 213, 255, 0.16);
  border-radius: 8px;
  background: rgba(3, 12, 21, 0.54);
}

.deck-mana-profile[hidden] {
  display: none;
}

.mana-profile-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mana-profile-title strong {
  color: var(--accent-strong);
  font-size: 0.9rem;
}

.mana-profile-title span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-align: right;
}

.mana-profile-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(92px, 1fr));
  gap: 8px;
}

.mana-profile-item {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  padding: 8px;
  border-radius: 8px;
  background: rgba(8, 17, 27, 0.78);
}

.mana-profile-icon {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.mana-profile-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4));
}

.mana-profile-details {
  width: 100%;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 5px;
}

.mana-profile-item strong {
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
}

.mana-profile-item span,
.mana-profile-item small,
.mana-profile-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
}

.mana-profile-icon span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: var(--mana-color);
  color: #071018;
  font-size: 1rem;
  font-weight: 950;
  opacity: 0;
}

.mana-profile-icon span.show {
  opacity: 1;
}

.mana-pips {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  width: 100%;
  max-width: 72px;
}

.mana-pips i {
  height: 10px;
  border-radius: 3px 3px 0 0;
  background: rgba(255, 255, 255, 0.1);
}

.mana-pips i.active {
  background: var(--mana-color);
}

.mana-bar {
  width: 100%;
  height: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.52);
}

.mana-bar b {
  height: 100%;
  min-width: 24px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--mana-color), transparent 20%);
  color: #061018;
  font-size: 0.62rem;
  font-weight: 950;
}

.mana-w { --mana-color: #f7f4bd; }
.mana-u { --mana-color: #a9cfea; }
.mana-b { --mana-color: #bdb4ad; }
.mana-r { --mana-color: #ee8b68; }
.mana-g { --mana-color: #9dca92; }
.mana-c { --mana-color: #777b84; }

.deck-warnings,
.deck-ai-review {
  display: grid;
  gap: 6px;
  color: #ffe9c1;
  font-size: 0.84rem;
  font-weight: 800;
}

.deck-warning,
.deck-ai-review {
  padding: 8px;
  border: 1px solid rgba(213, 174, 93, 0.35);
  border-radius: 8px;
  background: rgba(65, 45, 12, 0.35);
}

.deck-warning {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  animation: deckWarningPop 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.deck-warning.closing {
  pointer-events: none;
  animation: deckWarningExit 220ms ease both;
}

.deck-warning span {
  min-width: 0;
}

.deck-warning-close {
  width: 28px;
  height: 28px;
  min-height: 28px !important;
  display: grid;
  place-items: center;
  padding: 0 !important;
  border: 1px solid rgba(255, 232, 194, 0.28);
  border-radius: 999px;
  background: rgba(255, 232, 194, 0.1);
  color: #ffe9c1;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
}

.deck-warning-close:hover {
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 232, 194, 0.22);
  color: #ffffff;
}

.deck-ai-review {
  color: #dff3ff;
  border-color: rgba(57, 169, 255, 0.35);
  background: rgba(10, 39, 63, 0.42);
}

.deck-ai-review h3 {
  margin: 4px 0 0;
  color: var(--accent-strong);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.deck-ai-review p {
  margin: 0;
  line-height: 1.38;
}

.review-bracket {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid rgba(57, 169, 255, 0.42);
  border-radius: 8px;
  background: rgba(57, 169, 255, 0.12);
}

.review-bracket span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.review-bracket strong {
  color: var(--accent-strong);
  font-size: 1.08rem;
}

.review-suggestions {
  display: grid;
  gap: 8px;
}

.review-suggestion-toolbar {
  display: flex;
  justify-content: flex-start;
}

.review-suggestion-toolbar button {
  min-height: 32px;
  border-color: rgba(57, 169, 255, 0.46);
  background: rgba(57, 169, 255, 0.16);
  color: var(--accent-strong);
}

.review-type-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(82px, 1fr));
  gap: 7px;
}

.review-type-stats span {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid rgba(143, 213, 255, 0.18);
  border-radius: 8px;
  background: rgba(3, 12, 21, 0.62);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.review-type-stats strong {
  color: var(--accent-strong);
  font-size: 1.15rem;
  line-height: 1;
}

.review-color-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.review-color-stats span {
  display: grid;
  gap: 2px;
  padding: 6px 10px;
  border: 1px solid rgba(143, 213, 255, 0.18);
  border-radius: 8px;
  background: rgba(3, 12, 21, 0.62);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}

.review-color-stats strong { font-size: 1.05rem; line-height: 1; }
.review-color-W strong { color: #f6e7c9; }
.review-color-U strong { color: #9fd1ff; }
.review-color-B strong { color: #c8b8d8; }
.review-color-R strong { color: #ff9d8a; }
.review-color-G strong { color: #9fe0a8; }

.review-insight-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  gap: 7px;
  margin: 4px 0 10px;
}

.review-insight-stats span {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid rgba(143, 213, 255, 0.16);
  border-radius: 8px;
  background: rgba(3, 12, 21, 0.55);
}

.review-insight-stats strong { color: var(--accent-strong); font-size: 1.1rem; line-height: 1; }
.review-insight-stats em { font-style: normal; font-weight: 800; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: #cfe0f5; }
.review-insight-stats small { color: #7f95b0; font-size: 0.66rem; }

.review-best-opener { color: #9db2cc; font-size: 0.82rem; margin: 0 0 12px; }
.review-best-opener span { color: #cfe0f5; }

.review-suggestion {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 9px 38px 9px 9px;
  border: 1px solid rgba(143, 213, 255, 0.18);
  border-radius: 8px;
  background: rgba(3, 12, 21, 0.5);
  animation: reviewSuggestionPop 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.review-suggestion.closing {
  pointer-events: none;
  animation: reviewSuggestionExit 220ms ease both;
}

.review-suggestion strong {
  color: var(--text);
}

.review-suggestion button {
  justify-self: start;
}

.review-suggestion-close {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 24px;
  height: 24px;
  min-height: 24px !important;
  display: grid;
  place-items: center;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 999px;
  background: rgba(2, 8, 14, 0.74) !important;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
}

.review-suggestion-close:hover {
  border-color: rgba(255, 116, 109, 0.72) !important;
  background: rgba(255, 72, 64, 0.28) !important;
}

.review-suggestions-empty {
  padding: 9px;
  border: 1px dashed rgba(143, 213, 255, 0.24);
  border-radius: 8px;
  color: var(--muted);
}

.deck-list-search {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr);
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(143, 213, 255, 0.16);
  border-radius: 8px;
  background: rgba(3, 12, 21, 0.48);
}

.deck-list-search label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.deck-list-search input {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(3, 12, 21, 0.88);
  color: var(--text);
  padding: 0 10px;
  font-weight: 780;
}

.deck-list {
  display: grid;
  gap: 8px;
  max-height: 560px;
  overflow: auto;
  padding-right: 3px;
}

.deck-list-section {
  display: grid;
  gap: 5px;
}

.deck-list-section h3 {
  margin: 0;
  color: var(--accent-strong);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.deck-list-row {
  display: grid;
  grid-template-columns: 50px auto minmax(0, 1fr) minmax(104px, auto) auto auto auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(143, 213, 255, 0.15);
  border-radius: 8px;
  background: rgba(4, 13, 22, 0.74);
}

.deck-card-thumb {
  width: 50px;
  min-width: 50px !important;
  height: 70px;
  min-height: 70px !important;
  display: grid;
  place-items: center;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 7px;
  border: 1px solid rgba(143, 213, 255, 0.35);
  background: rgba(57, 169, 255, 0.1);
  color: var(--accent-strong);
  font-weight: 950;
}

.deck-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.deck-qty-badge {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--accent);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(57, 169, 255, 0.34), rgba(57, 169, 255, 0.12));
  color: var(--accent-strong) !important;
  box-shadow: inset 0 0 0 1px rgba(191, 234, 255, 0.16), 0 0 18px rgba(57, 169, 255, 0.12);
  font-size: 0.82rem;
  font-weight: 950 !important;
}

.deck-card-info {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.deck-card-info .deck-title-flash {
  animation: deckTitleFlash 900ms ease both;
}

.deck-list-row.deck-row-flash {
  animation: deckRowFlash 950ms ease both;
}

.deck-list-row select {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(3, 12, 21, 0.9);
  color: var(--text);
  font-weight: 800;
}

.deck-list-row button {
  min-width: 34px;
  padding: 0 9px;
}

.deck-list-row .deck-quantity-button.minus:hover,
.deck-list-row .deck-quantity-button.minus:focus-visible {
  border-color: #ff6b6b;
  background: linear-gradient(180deg, rgba(255, 107, 107, 0.88), rgba(137, 28, 28, 0.78));
  color: #fff7f7;
  box-shadow: 0 0 18px rgba(255, 79, 79, 0.34);
}

.deck-list-row .deck-quantity-button.plus:hover,
.deck-list-row .deck-quantity-button.plus:focus-visible {
  border-color: #54f59b;
  background: linear-gradient(180deg, rgba(84, 245, 155, 0.88), rgba(20, 105, 60, 0.78));
  color: #f4fff8;
  box-shadow: 0 0 18px rgba(84, 245, 155, 0.34);
}

.deck-list-row .deck-quantity-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.rules-tools {
  display: grid;
  grid-template-columns: auto minmax(150px, 260px) auto;
  align-items: end;
  gap: 6px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(4, 13, 22, 0.86);
}

.rules-tools a,
.rules-tools button,
.turn-cycle-control button {
  min-height: 34px;
  border-radius: 7px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  color: var(--text);
  display: inline-grid;
  place-items: center;
  padding: 0 12px;
  font-weight: 900;
  text-decoration: none;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.rules-tools a:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}

.rules-tools input {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(4, 13, 22, 0.88);
  color: var(--text);
  padding: 0 10px;
  font-weight: 800;
}

.turn-cycle-control {
  display: grid;
  grid-template-columns: 34px minmax(42px, auto) 34px;
  align-items: center;
  gap: 5px;
}

.turn-cycle-control output {
  min-height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(4, 13, 22, 0.88);
  color: var(--text);
  font-weight: 950;
}

.control-group {
  display: grid;
  gap: 5px;
}

.control-group label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.new-game-control .new-game-button {
  min-height: 38px;
  border-color: var(--accent);
  background: var(--accent);
  color: #03101c;
  font-weight: 950;
}

.segmented,
.mode-buttons {
  padding: 3px;
  border-radius: 8px;
  background: rgba(4, 13, 22, 0.86);
  border: 1px solid var(--line);
}

.segmented button,
.mode-buttons button {
  min-width: 36px;
  padding: 0 9px;
}

.segmented button.active,
.mode-buttons button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #03101c;
  font-weight: 900;
}

.stepper input {
  width: 66px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(4, 13, 22, 0.88);
  color: var(--text);
  text-align: center;
  font-weight: 900;
  font-size: 1rem;
}

.mini-button {
  width: 34px;
  font-size: 1.15rem;
  font-weight: 900;
}

.undo-button {
  width: auto;
  min-width: 58px;
  padding-inline: 10px;
  font-size: 0.82rem;
}

.undo-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.45);
}

.board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-auto-rows: min-content;
  align-items: start !important;
  align-content: start !important;
  gap: 10px;
  flex: 0 0 auto;
  overflow: visible;
}

.board[data-layout="duel"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.board[data-layout="pod"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.player-card {
  position: relative;
  min-height: 0;
  height: auto;
  min-block-size: 0;
  block-size: auto;
  max-block-size: none;
  flex: none;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--player-color), #ffffff 12%);
  border-radius: 8px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--player-color), transparent 74%), transparent 52%),
    var(--panel);
  box-shadow: var(--shadow);
}

.player-card:has(.counter-picker[open]) {
  z-index: 1000;
}

.player-card > *:not(.card-art):not(.card-shade) {
  position: relative;
  z-index: 4;
}

.player-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-top: 7px solid var(--player-color);
  pointer-events: none;
}

.card-art,
.card-shade {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  overflow: hidden;
  pointer-events: none;
}

.card-art {
  z-index: 0;
  opacity: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.04) contrast(1.05);
  transition: opacity 180ms ease;
}

.card-shade {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(12, 13, 13, 0.52), rgba(12, 13, 13, 0.22) 42%, rgba(12, 13, 13, 0.68)),
    linear-gradient(160deg, color-mix(in srgb, var(--player-color), transparent 82%), rgba(0, 0, 0, 0.08));
}

.player-card.has-art .card-art {
  opacity: 0.78;
}

.player-card.spawning .card-art {
  animation: commanderSpawn 900ms ease both;
}

.player-card.spawning .player-name,
.player-card.spawning .player-header button,
.player-card.spawning .life-total,
.player-card.spawning .counter,
.player-card.spawning .counter output,
.player-card.spawning .counter-picker summary,
.player-card.spawning .inline-toggle {
  animation: spawnTextFlash 900ms ease both;
}

.death-overlay {
  position: absolute;
  inset: 0;
  z-index: 30 !important;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.08), transparent 22%),
    linear-gradient(0deg, rgba(148, 0, 0, 0.95), rgba(148, 0, 0, 0.2) 52%, rgba(33, 0, 0, 0.72));
  transform: translateY(14px);
}

.player-card.dead {
  border-color: rgba(255, 76, 76, 0.76);
  box-shadow: inset 0 0 0 2px rgba(255, 76, 76, 0.32), 0 0 32px rgba(255, 38, 38, 0.26);
}

.player-card.dead.death-entering {
  animation: deadCardPulse 1600ms ease-in-out 1;
}

.player-card.dead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 24;
  pointer-events: none;
  border-radius: 8px;
  background: rgba(150, 0, 0, 0.34);
}

.player-card.dead.death-entering::after {
  animation: deathFlood 900ms cubic-bezier(0.22, 0.92, 0.32, 1) both;
}

.player-card.dead .death-overlay {
  opacity: 1;
  pointer-events: none;
  z-index: 90 !important;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
}

.player-card.dead.death-entering .death-overlay {
  animation: deathFlood 900ms cubic-bezier(0.22, 0.92, 0.32, 1) both;
}

.death-skull {
  color: #ffffff;
  font-size: clamp(4rem, 14vw, 8.5rem);
  line-height: 0.9;
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.52), 0 12px 28px rgba(0, 0, 0, 0.62);
  opacity: 0;
  transform: scale(0.54) rotate(-8deg);
}

.player-card.dead .death-skull {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.player-card.dead.death-entering .death-skull {
  opacity: 0;
  transform: scale(0.5) rotate(-10deg);
  animation: skullPop 760ms 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.death-overlay strong {
  color: #ffffff;
  font-size: clamp(1.6rem, 6vw, 3.7rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.72);
  opacity: 0;
}

.player-card.dead .death-overlay strong {
  opacity: 1;
  animation: deathTextFlash 780ms ease-in-out infinite;
}

.player-card.dead.death-entering .death-overlay strong {
  opacity: 0;
  animation:
    deathTextPop 520ms 980ms cubic-bezier(0.16, 1, 0.3, 1) both,
    deathTextFlash 780ms 1500ms ease-in-out infinite;
}

.death-reason {
  color: #ffe2e2;
  font-size: 0.95rem;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.72);
}

.player-header {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 34px;
  align-items: center;
  gap: 6px;
}

.player-header > button:not(.icon-button) {
  min-width: 0;
  padding: 0 6px;
  font-weight: 850;
  white-space: normal;
  line-height: 1.05;
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

.player-name-wrap {
  grid-column: 1 / -2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, 0.42fr);
  gap: 5px;
  min-width: 0;
}

.player-name {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(18, 21, 20, 0.82);
  color: var(--text);
  padding: 0 9px;
  font-weight: 900;
}

.saved-deck-select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid rgba(57, 169, 255, 0.45);
  border-radius: 7px;
  background: rgba(3, 12, 21, 0.9);
  color: var(--accent-strong);
  padding: 0 7px;
  font-size: 0.72rem;
  font-weight: 900;
}

.saved-deck-select:disabled {
  opacity: 0.52;
}

.player-header .icon-button {
  grid-column: -2 / -1;
}

.player-header [data-action="set-art-deck"],
.player-header [data-action="arts"],
.player-header [data-action="smart"],
.player-header [data-action="deck"] {
  grid-row: 2;
}

.player-header [data-action="set-art-deck"] {
  grid-column: 1;
}

.player-header [data-action="arts"] {
  grid-column: 2;
}

.player-header [data-action="smart"] {
  grid-column: 3;
}

.player-header [data-action="deck"] {
  grid-column: 4;
}

.player-header button:disabled,
.player-header button.is-disabled {
  cursor: not-allowed;
  pointer-events: none;
  border-color: rgba(143, 213, 255, 0.12);
  background: rgba(50, 58, 66, 0.38) !important;
  color: rgba(169, 194, 216, 0.46) !important;
  box-shadow: none !important;
  filter: grayscale(0.9);
  opacity: 0.48;
  transform: none !important;
}

.deck-tools {
  position: relative;
}

.deck-tools[hidden],
.inline-toggle[hidden] {
  display: none;
}

.deck-tools button {
  white-space: nowrap;
}

.deck-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.deck-import-close {
  position: absolute;
  z-index: 3;
  top: 6px;
  right: 6px;
  width: 28px;
  min-height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 107, 107, 0.62);
  border-radius: 7px;
  background: rgba(116, 14, 20, 0.86);
  color: #fff2f2;
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 0 16px rgba(255, 70, 70, 0.22);
}

.deck-import-close:hover,
.deck-import-close:focus-visible {
  border-color: rgba(255, 158, 158, 0.92);
  background: rgba(176, 24, 31, 0.94);
  color: #ffffff;
}

.deck-import {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(18, 21, 20, 0.82);
  color: var(--text);
  padding: 8px 42px 8px 10px;
  font-weight: 750;
  resize: vertical;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.25;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.deck-import::-webkit-scrollbar {
  display: none;
}

.inline-toggle {
  min-height: 30px;
  border-radius: 8px;
  background: rgba(18, 21, 20, 0.7);
  border: 1px dashed var(--line);
  color: var(--muted);
}

.suggestions,
.rules-suggestions {
  position: fixed;
  z-index: 2147483647;
  display: grid;
  max-height: 220px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(18, 21, 20, 0.98);
  box-shadow: var(--shadow);
}

.rules-suggestions {
  max-height: min(420px, calc(100vh - 24px));
  width: min(560px, calc(100vw - 16px));
}

.suggestions[hidden],
.rules-suggestions[hidden] {
  display: none;
}

.suggestions button,
.rules-suggestions button {
  min-height: 34px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0 9px;
  text-align: left;
  width: 100%;
}

.suggestions button {
  display: grid;
  gap: 2px;
  height: auto;
  padding: 8px 9px;
}

.suggestions strong {
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.15;
}

.suggestions span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
}

.suggestions .saved-deck-suggestion {
  border: 1px solid rgba(57, 169, 255, 0.24);
  background: rgba(57, 169, 255, 0.09);
}

.suggestions .saved-deck-suggestion span {
  color: var(--accent-strong);
}

.rules-suggestions button {
  display: grid;
  gap: 3px;
  height: auto;
  padding: 8px 9px;
  border-bottom: 1px solid rgba(143, 213, 255, 0.12);
}

.rules-suggestions strong {
  color: var(--accent-strong);
  font-size: 0.82rem;
  line-height: 1.2;
}

.rules-suggestions span,
.rules-suggestions p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.28;
}

.suggestions button:hover,
.rules-suggestions button:hover {
  background: var(--panel-strong);
  transform: none;
}

.life-area {
  display: grid;
  grid-template-columns: clamp(58px, 5vw, 76px) minmax(0, 1fr) clamp(58px, 5vw, 76px);
  align-items: stretch;
  flex: 0 0 auto;
  gap: 10px;
  min-height: clamp(112px, 12vh, 150px);
}

.life-total {
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(5.8rem, 8vw, 8.4rem);
  line-height: 1;
  font-weight: 950;
  color: var(--text);
  text-shadow: 0 8px 34px rgba(0, 0, 0, 0.45);
  transform: translateY(-0.03em);
}

.life-total.flash-gain {
  animation: lifeGain 520ms ease;
}

.life-total.flash-loss {
  animation: lifeLoss 520ms ease;
}

.player-card:has(.life-total.flash-gain) .card-art {
  animation: artGainFlash 520ms ease;
}

.player-card:has(.life-total.flash-loss) .card-art {
  animation: artLossFlash 520ms ease;
}

.life-button {
  min-height: 100%;
  border-radius: 8px;
  background: color-mix(in srgb, var(--player-color), #111313 62%);
  border: 1px solid color-mix(in srgb, var(--player-color), #ffffff 18%);
  font-size: clamp(2.15rem, 3.4vw, 3.4rem);
  font-weight: 950;
  position: relative;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.life-button:hover {
  filter: brightness(1.16);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--player-color), transparent 55%), 0 10px 24px rgba(0, 0, 0, 0.22);
}

.life-button:hover {
  transform: translateY(-2px) scale(1.025);
}

.life-button[data-life="1"]:hover,
.life-button[data-life="1"]:focus-visible,
.life-button[data-life="1"].holding {
  border-color: rgba(84, 245, 155, 0.78);
  background:
    linear-gradient(145deg, rgba(84, 245, 155, 0.34), rgba(12, 74, 42, 0.92)),
    color-mix(in srgb, var(--player-color), #101814 68%);
  color: #eafff1;
  box-shadow: 0 0 0 2px rgba(84, 245, 155, 0.22), 0 0 28px rgba(84, 245, 155, 0.28), 0 10px 24px rgba(0, 0, 0, 0.22);
}

.life-button[data-life="-1"]:hover,
.life-button[data-life="-1"]:focus-visible,
.life-button[data-life="-1"].holding {
  border-color: rgba(255, 107, 107, 0.82);
  background:
    linear-gradient(145deg, rgba(255, 107, 107, 0.34), rgba(91, 20, 25, 0.94)),
    color-mix(in srgb, var(--player-color), #171010 68%);
  color: #fff0f0;
  box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.22), 0 0 28px rgba(255, 107, 107, 0.3), 0 10px 24px rgba(0, 0, 0, 0.22);
}

.life-button.holding {
  filter: brightness(1.25);
  transform: scale(0.98);
}

.life-button:active {
  animation: buttonPulse 220ms ease;
}

.commander-damage-button {
  min-height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(57, 169, 255, 0.58);
  background:
    linear-gradient(135deg, rgba(57, 169, 255, 0.24), rgba(9, 22, 36, 0.86)),
    rgba(3, 12, 21, 0.78);
  color: var(--accent-strong);
  font-size: 0.84rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: inset 0 0 0 1px rgba(191, 234, 255, 0.08), 0 0 18px rgba(57, 169, 255, 0.1);
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.commander-damage-button:hover,
.commander-damage-button:focus-visible {
  transform: translateY(-1px);
  border-color: var(--accent);
  background:
    linear-gradient(135deg, rgba(57, 169, 255, 0.42), rgba(10, 32, 52, 0.92)),
    rgba(3, 12, 21, 0.84);
  box-shadow: 0 0 0 2px rgba(57, 169, 255, 0.18), 0 0 24px rgba(57, 169, 255, 0.22);
}

.commander-damage-button.has-damage {
  color: #ffffff;
  border-color: rgba(255, 218, 118, 0.72);
  background:
    linear-gradient(135deg, rgba(255, 218, 118, 0.28), rgba(57, 169, 255, 0.2)),
    rgba(3, 12, 21, 0.88);
}

.life-change-tracker {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 2;
  min-width: 34px;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.48);
  color: var(--text);
  font-size: clamp(0.68rem, 1.1vw, 0.86rem);
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px) scale(0.94);
  transition: opacity 160ms ease, transform 160ms ease;
}

.life-change-tracker.visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.life-change-tracker.gain {
  border-color: rgba(125, 255, 155, 0.44);
  color: #7dff9b;
  box-shadow: 0 0 14px rgba(80, 255, 130, 0.22);
}

.life-change-tracker.loss {
  border-color: rgba(255, 116, 109, 0.48);
  color: #ff746d;
  box-shadow: 0 0 14px rgba(255, 72, 64, 0.22);
}

.life-change-tracker.gain.flash {
  animation: lifeTrackerGainFlash 420ms ease;
}

.life-change-tracker.loss.flash {
  animation: lifeTrackerLossFlash 420ms ease;
}

.counter-grid {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  gap: 5px;
  align-self: end;
  width: 100%;
}

.counter-picker {
  position: relative;
  justify-self: start;
  align-self: start;
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
  height: 28px;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(18, 21, 20, 0.72);
  overflow: visible;
}

.counter-picker[open] {
  height: 28px;
  z-index: 2147482000;
}

.counter-picker[open] summary {
  position: fixed;
  top: var(--counter-button-top, 8px);
  left: var(--counter-menu-left, 8px);
  z-index: 2147483647;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: rgba(8, 17, 27, 0.98);
  box-shadow: 0 0 0 2px var(--accent-soft), 0 8px 24px rgba(0, 0, 0, 0.42);
}

.counter-picker summary {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.64rem;
  list-style: none;
  white-space: nowrap;
}

.counter-picker summary::-webkit-details-marker {
  display: none;
}

.counter-picker summary::after {
  content: "";
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-soft);
  background-image:
    linear-gradient(45deg, transparent 48%, var(--accent-strong) 50%, var(--accent-strong) 62%, transparent 64%),
    linear-gradient(135deg, transparent 48%, var(--accent-strong) 50%, var(--accent-strong) 62%, transparent 64%);
  background-position: 4px 4px, 8px 4px;
  background-repeat: no-repeat;
  background-size: 7px 7px;
}

.counter-picker[open] summary::after {
  background-image:
    linear-gradient(135deg, transparent 48%, var(--accent-strong) 50%, var(--accent-strong) 62%, transparent 64%),
    linear-gradient(45deg, transparent 48%, var(--accent-strong) 50%, var(--accent-strong) 62%, transparent 64%);
  background-position: 4px 6px, 8px 6px;
}

.counter-options {
  position: fixed;
  top: var(--counter-menu-top, 0);
  left: var(--counter-menu-left, 0);
  z-index: 2147483000;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: var(--counter-menu-width, min(330px, calc(100vw - 32px)));
  max-height: 230px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 17, 27, 0.98);
  box-shadow: var(--shadow);
}

.counter-option {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 800;
  min-height: 26px;
  padding: 0 4px;
}

.counter-option input {
  accent-color: var(--accent);
}

.counter {
  display: grid;
  gap: 3px;
  flex: 1 1 106px;
  color: var(--muted);
  font-weight: 800;
  min-width: 0;
}

.counter span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.counter div {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(12, 14, 14, 0.62);
}

.counter button {
  min-height: 26px;
  border-radius: 0;
  border-width: 0;
  background: rgba(21, 25, 24, 0.85);
  font-size: 0.95rem;
  font-weight: 950;
}

.counter output {
  min-height: 26px;
  display: grid;
  place-items: center;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  font-weight: 900;
}

.tools {
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-block: 8px;
}

.tools output {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.9rem;
}

.roll-tools {
  flex-wrap: wrap;
}

.roll-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.roll-icon {
  width: 25px;
  height: 25px;
  display: inline-grid;
  place-items: center;
  color: #03101c;
  background: linear-gradient(145deg, var(--accent-strong), var(--accent));
  box-shadow: inset 0 -2px 5px rgba(0, 25, 50, 0.38), 0 0 14px rgba(57, 169, 255, 0.26);
  font-size: 0.66rem;
  font-weight: 950;
  line-height: 1;
}

.die-d6 {
  border-radius: 5px;
}

.die-d8 {
  clip-path: polygon(50% 0, 94% 50%, 50% 100%, 6% 50%);
}

.die-d10 {
  clip-path: polygon(50% 0, 94% 34%, 82% 100%, 18% 100%, 6% 34%);
}

.die-d12 {
  clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
}

.die-d20 {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.coin-icon {
  border-radius: 999px;
  font-family: Georgia, serif;
  font-size: 0.9rem;
}

.roll-display {
  width: 100px;
  min-height: 50px;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(4, 13, 22, 0.88);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.random-display {
  width: min(180px, 46vw);
}

.roll-label {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#rollResult,
#randomResult {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 950;
}

#randomResult {
  font-size: clamp(0.82rem, 1.3vw, 1.02rem);
}

#rollResult.result-flash,
#randomResult.result-flash {
  animation: rollResultFlash 760ms ease both;
}

.roll-display.result-flash {
  animation: rollBoxFlash 760ms ease both;
}

.roll-display.rolling {
  animation: tumble 980ms cubic-bezier(0.25, 0.9, 0.32, 1);
}

.roll-display.flipping {
  animation: coinFlip 980ms cubic-bezier(0.22, 0.9, 0.24, 1);
}

body.light {
  --bg: #edf7ff;
  --panel: #f8fcff;
  --panel-strong: #dcefff;
  --text: #071522;
  --muted: #42647e;
  --line: #a9cfea;
  --shadow: 0 18px 58px rgba(14, 70, 116, 0.18);
  background:
    radial-gradient(circle at 50% 0%, rgba(57, 169, 255, 0.22), transparent 34%),
    linear-gradient(135deg, #edf7ff 0%, #dff2ff 55%, #f7fbff 100%);
}

body.light .card-shade {
  background:
    linear-gradient(180deg, rgba(255, 250, 240, 0.5), rgba(255, 250, 240, 0.24) 42%, rgba(255, 250, 240, 0.66)),
    linear-gradient(160deg, color-mix(in srgb, var(--player-color), transparent 84%), rgba(255, 255, 255, 0.06));
}

body.light .player-card.has-art .card-art {
  opacity: 0.62;
}

@keyframes tumble {
  0% {
    transform: rotate(0deg) scale(1);
  }
  35% {
    transform: rotate(15deg) scale(1.05);
  }
  65% {
    transform: rotate(-13deg) scale(1.08);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

@keyframes coinFlip {
  0% {
    transform: rotateY(0deg) scale(1);
  }
  45% {
    transform: rotateY(540deg) scale(1.08);
  }
  100% {
    transform: rotateY(1080deg) scale(1);
  }
}

@keyframes rollResultFlash {
  0% {
    color: var(--text);
    text-shadow: none;
  }
  32% {
    color: #ffffff;
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.95), 0 0 34px rgba(143, 213, 255, 0.58);
    transform: scale(1.14);
  }
  100% {
    color: var(--text);
    text-shadow: none;
    transform: scale(1);
  }
}

@keyframes rollBoxFlash {
  0% {
    border-color: var(--line);
    background: rgba(4, 13, 22, 0.88);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  }
  32% {
    border-color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 28px rgba(255, 255, 255, 0.72), inset 0 0 0 1px rgba(255, 255, 255, 0.32);
  }
  100% {
    border-color: var(--line);
    background: rgba(4, 13, 22, 0.88);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  }
}

@keyframes lifeGain {
  0% {
    color: var(--text);
    text-shadow: 0 8px 34px rgba(0, 0, 0, 0.45);
    transform: translateY(-0.03em) scale(1);
  }
  35% {
    color: #7dff9b;
    text-shadow: 0 0 28px rgba(80, 255, 130, 0.82);
    transform: translateY(-0.03em) scale(1.08);
  }
  100% {
    color: var(--text);
    text-shadow: 0 8px 34px rgba(0, 0, 0, 0.45);
    transform: translateY(-0.03em) scale(1);
  }
}

@keyframes lifeLoss {
  0% {
    color: var(--text);
    text-shadow: 0 8px 34px rgba(0, 0, 0, 0.45);
    transform: translateY(-0.03em) scale(1);
  }
  35% {
    color: #ff746d;
    text-shadow: 0 0 28px rgba(255, 72, 64, 0.82);
    transform: translateY(-0.03em) scale(1.08);
  }
  100% {
    color: var(--text);
    text-shadow: 0 8px 34px rgba(0, 0, 0, 0.45);
    transform: translateY(-0.03em) scale(1);
  }
}

@keyframes deckWarningPop {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  68% {
    opacity: 1;
    transform: translateY(1px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes deckWarningExit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 90px;
    margin-block: 0;
  }
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.94);
    max-height: 0;
    margin-block: -3px;
    padding-block: 0;
  }
}

@keyframes synergyCardExit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 180px;
  }
  100% {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
    max-height: 0;
    margin-block: -4px;
    padding-block: 0;
  }
}

@keyframes reviewSuggestionPop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes reviewSuggestionExit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 180px;
  }
  100% {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
    max-height: 0;
    margin-block: -4px;
    padding-block: 0;
  }
}

@keyframes lifeTrackerGainFlash {
  0% {
    background: rgba(0, 0, 0, 0.48);
    color: #7dff9b;
    transform: translate(-50%, 0) scale(1);
  }
  38% {
    background: rgba(84, 255, 132, 0.34);
    color: #ffffff;
    box-shadow: 0 0 22px rgba(80, 255, 130, 0.72);
    transform: translate(-50%, -2px) scale(1.18);
  }
  100% {
    background: rgba(0, 0, 0, 0.48);
    color: #7dff9b;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes lifeTrackerLossFlash {
  0% {
    background: rgba(0, 0, 0, 0.48);
    color: #ff746d;
    transform: translate(-50%, 0) scale(1);
  }
  38% {
    background: rgba(255, 72, 64, 0.38);
    color: #ffffff;
    box-shadow: 0 0 22px rgba(255, 72, 64, 0.72);
    transform: translate(-50%, -2px) scale(1.18);
  }
  100% {
    background: rgba(0, 0, 0, 0.48);
    color: #ff746d;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes artGainFlash {
  0% {
    opacity: 0.78;
    filter: saturate(1.04) contrast(1.05);
  }
  35% {
    opacity: 0.96;
    filter: sepia(0.22) saturate(1.8) hue-rotate(62deg) brightness(1.22) contrast(1.08);
  }
  100% {
    opacity: 0.78;
    filter: saturate(1.04) contrast(1.05);
  }
}

@keyframes artLossFlash {
  0% {
    opacity: 0.78;
    filter: saturate(1.04) contrast(1.05);
  }
  35% {
    opacity: 0.96;
    filter: sepia(0.32) saturate(2.2) hue-rotate(-42deg) brightness(1.08) contrast(1.18);
  }
  100% {
    opacity: 0.78;
    filter: saturate(1.04) contrast(1.05);
  }
}

@keyframes commanderSpawn {
  0% {
    opacity: 0;
    transform: scale(1.08);
    filter: saturate(1.5) contrast(1.2) brightness(1.25) blur(5px);
  }
  45% {
    opacity: 0.72;
    transform: scale(1.02);
    filter: saturate(1.3) contrast(1.18) brightness(1.18) blur(0);
  }
  100% {
    opacity: 0.55;
    transform: scale(1);
    filter: saturate(1.04) contrast(1.05) brightness(1) blur(0);
  }
}

@keyframes spawnTextFlash {
  0% {
    color: var(--text);
    text-shadow: 0 0 0 rgba(57, 169, 255, 0);
  }
  28%,
  58% {
    color: #dff5ff;
    text-shadow: 0 0 18px rgba(57, 169, 255, 0.96), 0 0 36px rgba(143, 213, 255, 0.58);
  }
  100% {
    color: var(--text);
    text-shadow: inherit;
  }
}

@keyframes deathFlood {
  0% {
    opacity: 0;
    transform: translateY(24px);
    clip-path: inset(100% 0 0 0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes deadCardPulse {
  0%, 100% {
    filter: saturate(1.05);
  }
  50% {
    filter: saturate(1.36) brightness(1.08);
  }
}

@keyframes deathTextFlash {
  0%, 100% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.38), 0 6px 20px rgba(0, 0, 0, 0.72);
  }
  50% {
    opacity: 0.62;
    text-shadow: 0 0 26px rgba(255, 255, 255, 0.95), 0 6px 20px rgba(0, 0, 0, 0.72);
  }
}

@keyframes skullPop {
  0% {
    opacity: 0;
    transform: scale(0.42) rotate(-10deg);
    filter: blur(4px);
    text-shadow: 0 0 0 rgba(255, 255, 255, 0), 0 12px 28px rgba(0, 0, 0, 0.62);
  }
  65% {
    opacity: 1;
    transform: scale(1.16) rotate(2deg);
    filter: blur(0);
    text-shadow: 0 0 36px rgba(255, 255, 255, 0.78), 0 12px 28px rgba(0, 0, 0, 0.62);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
    filter: blur(0);
    text-shadow: 0 0 28px rgba(255, 255, 255, 0.52), 0 12px 28px rgba(0, 0, 0, 0.62);
  }
}

@keyframes deathTextPop {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }
  70% {
    opacity: 1;
    transform: translateY(-2px) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes buttonPulse {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(0.94);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes deckTitleFlash {
  0% {
    color: #c9ffd9;
    text-shadow: 0 0 0 rgba(83, 255, 142, 0);
  }
  24% {
    color: #6dff9f;
    text-shadow: 0 0 18px rgba(83, 255, 142, 0.72);
  }
  100% {
    color: var(--text);
    text-shadow: none;
  }
}

@keyframes deckRowFlash {
  0% {
    border-color: rgba(83, 255, 142, 0.2);
    background: rgba(4, 13, 22, 0.74);
    box-shadow: none;
  }
  22% {
    border-color: rgba(83, 255, 142, 0.82);
    background: rgba(36, 125, 63, 0.34);
    box-shadow: 0 0 26px rgba(83, 255, 142, 0.28);
  }
  100% {
    border-color: rgba(143, 213, 255, 0.15);
    background: rgba(4, 13, 22, 0.74);
    box-shadow: none;
  }
}

@keyframes deckToastFlash {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slotDeal {
  0% {
    opacity: 0;
    transform: translateY(-18px) rotateX(80deg) scale(0.82);
    filter: blur(4px) brightness(1.6);
  }
  55% {
    opacity: 1;
    transform: translateY(4px) rotateX(-10deg) scale(1.04);
    filter: blur(0) brightness(1.14);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0) scale(1);
    filter: none;
  }
}

@keyframes historyEntryPop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes commanderTileIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#cardModal,
#deckImageModal,
#deckLibraryModal,
#drawHandModal,
#historyModal {
  width: min(1120px, calc(100% - 24px));
  max-height: min(820px, calc(100% - 24px));
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--panel);
  box-shadow: var(--shadow);
}

#cardModal::backdrop,
#deckImageModal::backdrop,
#deckLibraryModal::backdrop,
#drawHandModal::backdrop,
#historyModal::backdrop {
  background: rgba(0, 0, 0, 0.64);
}

.modal-panel,
.deck-image-panel,
.deck-library-panel,
.draw-hand-panel,
.history-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.deck-library-panel,
.draw-hand-panel,
.history-panel {
  max-height: calc(100vh - 24px);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

#historyModal {
  width: min(880px, calc(100% - 24px));
  border: 0;
  background: transparent;
  box-shadow: none;
}

.history-panel {
  border: 1px solid rgba(57, 169, 255, 0.24);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(5, 13, 24, 0.98), rgba(10, 24, 38, 0.96)),
    rgba(5, 13, 24, 0.96);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58), 0 0 36px rgba(57, 169, 255, 0.14);
}

.history-panel .modal-header {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: end;
}

.history-summary {
  justify-self: end;
  margin-left: 0;
  padding: 7px 11px;
  border: 1px solid rgba(143, 213, 255, 0.18);
  border-radius: 8px;
  background: rgba(4, 13, 22, 0.72);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.history-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 260px;
  overflow: auto;
  padding-right: 4px;
}

.history-entry {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(143, 213, 255, 0.16);
  border-radius: 8px;
  background: rgba(4, 13, 22, 0.82);
  animation: historyEntryPop 180ms ease both;
  overflow: hidden;
}

.history-entry-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-position: center 28%;
  background-size: cover;
  opacity: 0.34;
  filter: saturate(1.26) contrast(1.12) brightness(1.08);
}

.history-entry.has-history-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 13, 22, 0.86), rgba(4, 13, 22, 0.56) 52%, rgba(4, 13, 22, 0.84)),
    linear-gradient(180deg, rgba(4, 13, 22, 0.34), rgba(4, 13, 22, 0.66));
}

.history-entry.has-history-art > :not(.history-entry-art) {
  position: relative;
  z-index: 2;
}

.history-marker {
  min-width: 42px;
  min-height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(143, 213, 255, 0.2);
  border-radius: 7px;
  background: rgba(57, 169, 255, 0.12);
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 950;
}

.history-entry > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.history-entry strong {
  color: var(--text);
  font-size: 0.95rem;
}

.history-entry span:not(.history-marker) {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 760;
}

.history-entry small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  white-space: nowrap;
}

.history-entry.gain .history-marker {
  border-color: rgba(84, 245, 155, 0.5);
  color: #83ffae;
  background: rgba(43, 135, 74, 0.28);
}

.history-entry.loss .history-marker {
  border-color: rgba(255, 107, 107, 0.52);
  color: #ff9a9a;
  background: rgba(137, 28, 28, 0.28);
}

.history-entry.death {
  border-color: rgba(255, 58, 58, 0.34);
  background:
    linear-gradient(90deg, rgba(148, 18, 24, 0.2), rgba(4, 13, 22, 0.82));
}

.history-entry.death .history-marker {
  min-width: 58px;
  border-color: rgba(255, 58, 58, 0.68);
  color: #ffffff;
  background:
    linear-gradient(145deg, rgba(255, 58, 58, 0.42), rgba(108, 8, 12, 0.92));
  box-shadow: 0 0 22px rgba(255, 58, 58, 0.34);
}

.history-entry.death strong {
  color: #ffdede;
}

.history-entry.token-entry .history-marker {
  border-color: rgba(var(--history-token-rgb, 201, 238, 255), 0.58);
  color: var(--history-token-color, #c9eeff);
  background:
    linear-gradient(145deg, rgba(var(--history-token-rgb, 201, 238, 255), 0.28), rgba(4, 13, 22, 0.78));
  box-shadow: 0 0 18px rgba(var(--history-token-rgb, 201, 238, 255), 0.22);
}

.history-entry.token-entry {
  border-color: rgba(var(--history-token-rgb, 201, 238, 255), 0.18);
}

.history-entry.action .history-marker {
  border-color: rgba(143, 213, 255, 0.52);
  color: #c9eeff;
  background: rgba(57, 169, 255, 0.18);
}

.history-entry.reset {
  border-color: rgba(57, 169, 255, 0.36);
  background: linear-gradient(90deg, rgba(57, 169, 255, 0.16), rgba(4, 13, 22, 0.82));
}

.history-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.history-actions .text-button {
  min-height: 38px;
}

.history-empty {
  margin: 0;
  padding: 16px;
  border: 1px dashed rgba(143, 213, 255, 0.22);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
  font-weight: 800;
}

#deckLibraryModal {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.deck-library-panel {
  border: 1px solid rgba(57, 169, 255, 0.22);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(5, 13, 24, 0.98), rgba(10, 24, 38, 0.96)),
    rgba(5, 13, 24, 0.96);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58), 0 0 36px rgba(57, 169, 255, 0.14);
}

.deck-library-back[hidden] {
  visibility: hidden;
  display: inline-grid !important;
}

.deck-library-select {
  margin-left: 0;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(57, 169, 255, 0.48);
  border-radius: 8px;
  background: rgba(57, 169, 255, 0.18);
  color: var(--accent-strong);
  font-size: 0.76rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.deck-library-select:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(57, 169, 255, 0.3);
  color: #ffffff;
}

.deck-library-select:disabled {
  cursor: default;
  opacity: 0.62;
}

.deck-library-detail {
  display: grid;
  grid-template-columns: minmax(240px, 380px) minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
}

.deck-library-detail-image {
  padding: 0;
  border: 1px solid rgba(143, 213, 255, 0.26);
  border-radius: 8px;
  background: rgba(3, 12, 21, 0.8);
}

.deck-library-detail-image img {
  width: 100%;
  display: block;
  border-radius: 8px;
}

.deck-library-detail-info {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
}

.deck-library-detail-info h3,
.deck-library-detail-info p,
.card-synergy-panel h4,
.card-synergy-panel p {
  margin: 0;
}

.deck-library-detail-info h3 {
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  line-height: 1;
}

.deck-library-detail-info > p:first-of-type {
  color: var(--muted);
  font-weight: 900;
}

.deck-library-suggestion-note {
  padding: 8px;
  border: 1px solid rgba(213, 174, 93, 0.28);
  border-radius: 8px;
  background: rgba(213, 174, 93, 0.1);
  color: #ffe9c1 !important;
  font-weight: 850;
}

.deck-library-detail-info button {
  justify-self: start;
  min-height: 36px;
  padding: 0 12px;
  border-color: var(--accent);
  background: rgba(57, 169, 255, 0.16);
}

.card-synergy-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(143, 213, 255, 0.18);
  border-radius: 8px;
  background: rgba(4, 13, 22, 0.66);
}

.card-synergy-panel h4 {
  color: var(--accent-strong);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.card-synergy-panel p {
  color: #d9e9f7;
  font-size: 0.83rem;
  line-height: 1.35;
}

.synergy-card-grid {
  display: grid;
  gap: 8px;
}

.synergy-card {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 8px;
  border: 1px solid rgba(143, 213, 255, 0.16);
  border-radius: 8px;
  background: rgba(3, 12, 21, 0.72);
}

.synergy-card.closing {
  pointer-events: none;
  animation: synergyCardExit 220ms ease both;
}

.synergy-card.clickable {
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.synergy-card.clickable:hover,
.synergy-card.clickable:focus-visible {
  border-color: rgba(57, 169, 255, 0.54);
  background: rgba(9, 30, 48, 0.86);
  box-shadow: 0 0 18px rgba(57, 169, 255, 0.16);
  transform: translateY(-1px);
}

.synergy-card.clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.synergy-card-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 24px;
  height: 24px;
  min-height: 24px !important;
  display: grid;
  place-items: center;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 999px;
  background: rgba(2, 8, 14, 0.72) !important;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
}

.synergy-card-close:hover {
  border-color: rgba(255, 116, 109, 0.72) !important;
  background: rgba(255, 72, 64, 0.28) !important;
}

.synergy-card-image {
  width: 70px;
  min-height: 98px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(143, 213, 255, 0.24);
  border-radius: 7px;
  background: rgba(57, 169, 255, 0.08);
  color: var(--muted);
  font-weight: 950;
}

.synergy-card-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 63 / 88;
  object-fit: cover;
}

.synergy-card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.synergy-card-copy strong {
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.08;
}

.synergy-card-copy span {
  justify-self: start;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(57, 169, 255, 0.12);
  color: var(--accent-strong);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.synergy-card-copy p {
  font-size: 0.78rem;
}

.synergy-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.synergy-scryfall-button {
  min-height: 28px !important;
  padding: 0 9px !important;
  border: 1px solid rgba(143, 213, 255, 0.26) !important;
  border-radius: 7px;
  background: rgba(57, 169, 255, 0.12) !important;
  color: var(--accent-strong);
  font-size: 0.68rem;
  font-weight: 950;
}

.synergy-scryfall-button:hover {
  border-color: var(--accent) !important;
  background: rgba(57, 169, 255, 0.24) !important;
}

.synergy-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.synergy-chips span {
  padding: 4px 7px;
  border: 1px solid rgba(57, 169, 255, 0.34);
  border-radius: 999px;
  background: rgba(57, 169, 255, 0.12);
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 900;
}

.draw-hand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
  gap: 10px;
  min-height: 0;
}

.draw-hand-card {
  appearance: none;
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(143, 213, 255, 0.2);
  border-radius: 8px;
  background: rgba(3, 12, 21, 0.78);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.draw-hand-card:hover,
.draw-hand-card:focus-visible {
  border-color: var(--accent);
  background: rgba(57, 169, 255, 0.16);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34), 0 0 22px rgba(57, 169, 255, 0.2);
}

.draw-hand-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.draw-hand-card img {
  width: 100%;
  aspect-ratio: 63 / 88;
  object-fit: cover;
  border-radius: 6px;
}

.draw-hand-card strong {
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.1;
}

.draw-hand-card.rolling-slot {
  animation: slotDeal 900ms cubic-bezier(0.18, 0.9, 0.22, 1) both;
  animation-delay: var(--slot-delay, 0ms);
}

.draw-hand-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

.draw-hand-action {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  color: var(--text);
  font-weight: 950;
  letter-spacing: 0.02em;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

.draw-hand-action.primary {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  color: #03101c;
  box-shadow: 0 0 18px rgba(57, 169, 255, 0.22);
}

.draw-hand-action.secondary {
  border-color: rgba(143, 213, 255, 0.22);
  background: rgba(12, 24, 38, 0.92);
}

.draw-hand-action:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent), var(--panel-strong) 66%);
  color: #ffffff;
  box-shadow: 0 0 20px rgba(57, 169, 255, 0.28);
}

.draw-hand-action.primary:hover {
  background: linear-gradient(180deg, #c3ecff, var(--accent));
  color: #020910;
}

.draw-hand-action:active {
  opacity: 0.72;
}

#deckImageModal {
  width: min(980px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  box-sizing: border-box;
  overflow: visible;
}

.deck-image-panel {
  max-height: calc(100vh - 24px);
  box-sizing: border-box;
  grid-template-rows: auto auto auto;
  overflow: visible;
}
.deck-image-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.deck-image-actions .primary-button { margin-right: auto; }

.deck-image-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(280px, 1fr);
  align-items: start;
  gap: 12px;
  min-height: 0;
}

.deck-image-layout.single-art {
  grid-template-columns: minmax(260px, min(420px, 100%));
  justify-content: center;
}

.deck-image-layout.single-art #deckImagePreview {
  max-height: min(680px, calc(100vh - 180px));
}

.deck-image-main {
  display: grid;
  grid-template-rows: auto auto;
  gap: 8px;
  min-height: 0;
}

#deckImagePreview {
  width: 100%;
  height: auto;
  max-height: min(610px, calc(100vh - 180px));
  min-height: 0;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid rgba(143, 213, 255, 0.2);
  background: #05080d;
}

.deck-image-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 850;
}

.deck-art-choice-grid {
  display: grid;
  grid-template-columns: repeat(var(--deck-art-columns, 4), minmax(76px, 108px));
  grid-auto-rows: auto;
  align-self: start;
  align-content: start;
  justify-content: center;
  gap: clamp(4px, 0.7vw, 8px);
  min-height: 0;
  overflow: visible;
}

.deck-art-choice-grid[hidden] {
  display: none;
}

.deck-art-choice {
  position: relative;
  min-width: 0;
  min-height: auto;
  height: auto;
  padding: 3px;
  border-radius: 8px;
  border: 1px solid rgba(143, 213, 255, 0.2);
  background: rgba(3, 12, 21, 0.78);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.deck-art-choice:hover {
  z-index: 50;
  transform: translateY(-2px) scale(1.08);
  border-color: var(--accent);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.52), 0 0 24px rgba(57, 169, 255, 0.26);
}

.deck-art-choice.active {
  border-color: var(--accent);
  background: rgba(57, 169, 255, 0.22);
  box-shadow: 0 0 18px rgba(57, 169, 255, 0.28);
}

.deck-art-choice img {
  width: 100%;
  height: auto;
  aspect-ratio: 63 / 88;
  display: block;
  object-fit: cover;
  border-radius: 6px;
}

.deck-art-choice span {
  overflow: hidden;
  display: -webkit-box;
  color: var(--text);
  font-size: 0.68rem;
  line-height: 1.1;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 720px) {
  .deck-image-panel {
    gap: 10px;
    padding: 10px;
  }

  .deck-image-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
  }

  #deckImagePreview {
    max-height: min(430px, calc(100vh - 260px));
  }

  .deck-art-choice-grid {
    grid-template-columns: repeat(var(--deck-art-columns, 3), minmax(64px, 94px));
    justify-content: center;
  }

  .deck-image-status {
    font-size: 0.76rem;
  }

  .deck-art-choice {
    padding: 2px;
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.1;
}

.modal-grid {
  display: grid;
  gap: 14px;
  max-height: min(700px, calc(100vh - 130px));
  overflow: auto;
  padding-right: 4px;
}
/* Import-to-paper-tracker: compact 4-seat grid with small circular commander thumbnails */
.table-import-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.table-import-note { grid-column: 1 / -1; margin: 0 0 2px; font-size: 13px; opacity: .8; }
.table-import-player { display: flex; align-items: center; gap: 11px; text-align: left; padding: 9px 11px; border-radius: 13px; border: 1px solid var(--hairline, rgba(255,255,255,.12)); background: rgba(255,255,255,.04); color: inherit; cursor: pointer; transition: border-color .12s ease, background .12s ease, transform .12s ease; }
.table-import-player:hover { border-color: var(--owner-color, #46c2d8); background: rgba(70,194,216,.09); transform: translateY(-1px); }
.table-import-player-art { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: rgba(0,0,0,.35); border: 2px solid var(--owner-color, rgba(255,255,255,.25)); font-weight: 800; font-size: 17px; color: #fff; }
.table-import-player-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.table-import-player-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.table-import-player-copy strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-import-player-copy small { font-size: 11.5px; opacity: .65; }
.table-import-player-action { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--owner-color, #46c2d8); white-space: nowrap; }
@media (max-width: 560px) { .table-import-grid { grid-template-columns: 1fr; } }

.commander-damage-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: stretch;
  gap: 12px;
}

.commander-damage-tile {
  --owner-color: var(--accent);
  position: relative;
  display: grid;
  grid-template-rows: minmax(170px, 1fr) auto auto auto;
  gap: 9px;
  min-width: 0;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--owner-color), #ffffff 18%);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--owner-color), transparent 78%), rgba(3, 12, 21, 0.92)),
    rgba(3, 12, 21, 0.9);
  box-shadow: inset 0 0 0 1px rgba(191, 234, 255, 0.08), 0 12px 30px rgba(0, 0, 0, 0.22);
  animation: commanderTileIn 240ms ease both;
}

.commander-damage-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-top: 7px solid var(--owner-color);
  border-radius: 8px 8px 0 0;
  pointer-events: none;
}

.commander-damage-tile.lethal {
  border-color: rgba(255, 90, 90, 0.86);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 30px rgba(255, 52, 52, 0.26);
}

.commander-damage-art {
  display: grid;
  place-items: center;
  min-height: 170px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--owner-color), #ffffff 12%);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--owner-color), transparent 55%), transparent 52%),
    rgba(2, 8, 14, 0.92);
  color: var(--accent-strong);
  font-size: 2rem;
  font-weight: 950;
}

.commander-damage-art img {
  width: 100%;
  height: 100%;
  min-height: 170px;
  object-fit: cover;
  filter: saturate(1.06) contrast(1.04);
  transition: transform 180ms ease, filter 180ms ease;
}

.commander-damage-tile:hover .commander-damage-art img {
  transform: scale(1.035);
  filter: saturate(1.15) contrast(1.08) brightness(1.06);
}

.commander-damage-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.commander-damage-meta strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commander-damage-meta span {
  color: color-mix(in srgb, var(--owner-color), #ffffff 32%);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.commander-damage-value {
  min-height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(143, 213, 255, 0.22);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.38);
  color: #ffffff;
  font-size: 2.05rem;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 0 18px rgba(57, 169, 255, 0.24);
}

.commander-damage-tile.lethal .commander-damage-value {
  border-color: rgba(255, 90, 90, 0.72);
  color: #fff2f2;
  text-shadow: 0 0 20px rgba(255, 70, 70, 0.54);
}

.commander-damage-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.commander-damage-controls button {
  min-height: 48px;
  border-radius: 8px;
  font-size: 1.4rem;
  font-weight: 950;
  border: 1px solid var(--line);
  background: rgba(21, 25, 24, 0.9);
  color: var(--text);
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.commander-damage-controls button:first-child {
  color: #ffb4b4;
  border-color: rgba(255, 107, 107, 0.35);
}

.commander-damage-controls button:last-child {
  color: #9cf5c4;
  border-color: rgba(84, 245, 155, 0.35);
}

.commander-damage-controls button:first-child:hover,
.commander-damage-controls button:first-child:focus-visible {
  border-color: #ff6b6b;
  background: linear-gradient(180deg, rgba(255, 107, 107, 0.72), rgba(91, 20, 25, 0.9));
  color: #fff5f5;
  box-shadow: 0 0 20px rgba(255, 80, 80, 0.28);
}

.commander-damage-controls button:last-child:hover,
.commander-damage-controls button:last-child:focus-visible {
  border-color: #54f59b;
  background: linear-gradient(180deg, rgba(84, 245, 155, 0.72), rgba(20, 105, 60, 0.9));
  color: #f4fff8;
  box-shadow: 0 0 20px rgba(84, 245, 155, 0.28);
}

.commander-damage-controls button:active {
  transform: scale(0.95);
}

/* Keywords reference popup */
.keyword-modal {
  width: min(720px, calc(100% - 24px));
  max-width: 720px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0;
  background: var(--panel, #14171f);
  color: var(--text);
}
.keyword-panel {
  display: grid;
  gap: 12px;
  padding: 18px;
  max-height: min(82vh, 760px);
  grid-template-rows: auto 1fr;
}
.keyword-panel .modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.keyword-search {
  flex: 1 1 180px;
  min-width: 120px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
.keyword-list {
  overflow-y: auto;
  display: grid;
  gap: 8px;
  padding-right: 4px;
}
.keyword-row {
  border: 1px solid var(--line);
  border-left: 4px solid var(--kw-color, #888);
  border-radius: 10px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.025);
}
.keyword-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.keyword-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--kw-color, #888);
  box-shadow: 0 0 8px var(--kw-color, #888);
  flex: 0 0 auto;
}
.keyword-name {
  font-weight: 800;
  font-size: 0.98rem;
}
.keyword-tag {
  margin-left: auto;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--kw-color, #aaa);
  border: 1px solid var(--kw-color, #555);
  border-radius: 999px;
  padding: 2px 8px;
  opacity: 0.85;
}
.keyword-desc {
  margin: 4px 0 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--muted, #aab);
}

.deck-section {
  display: grid;
  gap: 9px;
}

.deck-browser-actions {
  display: flex;
  justify-content: flex-end;
  padding: 8px;
  border: 1px solid rgba(143, 213, 255, 0.18);
  border-radius: 8px;
  background: rgba(5, 13, 24, 0.72);
}

.deck-browser-actions button {
  min-height: 38px;
  padding: 0 14px;
  border-color: rgba(57, 169, 255, 0.58);
  background: rgba(57, 169, 255, 0.16);
}

.deck-section h3 {
  margin: 0;
  color: var(--accent);
  font-size: 0.86rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.deck-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}

.card-preview {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(18, 21, 20, 0.72);
}

.card-preview.single-art {
  grid-template-columns: minmax(180px, 320px) minmax(0, 1fr);
}

.card-preview[hidden] {
  display: none;
}

.card-preview img {
  width: 100%;
  max-height: 300px;
  border-radius: 8px;
  object-fit: contain;
  background: #111313;
}

.card-preview.single-art > img {
  max-height: 420px;
}

.card-preview-details {
  display: grid;
  gap: 8px;
}

.card-preview-details h3,
.card-preview-details p {
  margin: 0;
}

.card-preview-details h3 {
  font-size: 1.4rem;
  line-height: 1.1;
}

.card-preview-details p {
  color: var(--muted);
  font-weight: 800;
}

.art-status {
  color: var(--accent-strong);
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.art-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: 7px;
  overflow: visible;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(4, 13, 22, 0.58);
}

.art-choice {
  position: relative;
  min-width: 0;
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: rgba(18, 21, 20, 0.74);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.art-choice:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}

.art-choice.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft), 0 0 18px rgba(57, 169, 255, 0.28);
}

.art-choice img {
  width: 100%;
  aspect-ratio: 63 / 88;
  display: block;
  max-height: none;
  border-radius: 5px;
  object-fit: cover;
}

.card-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.card-preview-details button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #03101c;
  font-weight: 950;
}

.card-preview-actions button:not(:last-child) {
  background: var(--panel-strong);
  border-color: var(--line);
  color: var(--text);
}

.card-tile {
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 100%;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(18, 21, 20, 0.86);
  color: var(--text);
  text-align: left;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.card-tile:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.26);
}

.card-tile img,
.image-fallback {
  width: 100%;
  aspect-ratio: 63 / 88;
  border-radius: 6px;
  object-fit: cover;
  background: #06101a;
}

.image-fallback {
  display: grid;
  place-items: center;
  padding: 10px;
  color: var(--muted);
  text-align: center;
}

.card-tile span {
  font-weight: 900;
  line-height: 1.15;
  font-size: 0.9rem;
}

.card-tile small {
  color: var(--muted);
  font-weight: 750;
  font-size: 0.78rem;
}

.card-tile strong {
  color: var(--accent);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.modal-note {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
}

@media (max-width: 1280px) {
  .top-bar {
    min-height: 154px;
  }

  .brand-logo {
    width: min(230px, 38vw);
  }

  .board {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  .player-card {
    min-height: 0;
  }

  .life-area {
    grid-template-columns: clamp(54px, 5.2vw, 68px) minmax(0, 1fr) clamp(54px, 5.2vw, 68px);
    min-height: 136px;
  }

  .life-total {
    font-size: clamp(5.2rem, 8.2vw, 7.2rem);
  }
}

@media (max-width: 1080px) {
  .deck-builder-grid {
    grid-template-columns: 1fr;
  }

  .board[data-layout="pod"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .top-bar {
    padding-inline: 96px;
  }
}

@media (max-width: 860px) {
  .board[data-layout="duel"] {
    grid-template-columns: 1fr;
  }

  .board {
    grid-template-columns: 1fr;
  }

  .player-card {
    min-height: 0;
  }

  .life-total {
    font-size: clamp(5rem, 11vw, 6.8rem);
  }
}

@media (max-width: 720px) {
  .app-shell {
    width: min(100% - 12px, 1440px);
    margin: 6px auto;
    min-height: calc(100vh - 12px);
    gap: 8px;
  }

  .top-bar,
  .controls,
  .tools {
    padding: 9px;
  }

  .top-bar {
    min-height: 146px;
    padding: 12px 9px 56px;
  }

  .brand-logo {
    width: min(190px, 58vw);
  }

  .top-actions {
    top: auto;
    right: 9px;
    bottom: 9px;
  }

  .eyebrow {
    font-size: 0.68rem;
  }

  .top-bar,
  .controls,
  .tools {
    align-items: stretch;
    flex-direction: column;
  }

  .top-actions,
  .tools,
  .roll-tools,
  .rules-tools,
  .turn-tracker-strip,
  .page-tabs {
    width: 100%;
  }

  .turn-tracker-strip {
    grid-template-columns: 1fr;
  }

  .turn-tracker-head {
    grid-template-columns: 1fr;
  }

  .last-action-output {
    white-space: normal;
  }

  .turn-tracker-controls {
    min-width: 0;
  }

  .page-tabs button {
    flex: 1;
    padding-inline: 8px;
  }

  .deck-builder {
    padding: 9px;
  }

  .deck-builder-head,
  .deck-toolbar,
  .saved-decks-head {
    align-items: stretch;
    flex-direction: column;
  }

  .saved-decks-head > p {
    text-align: left;
  }

  .saved-deck-card-head {
    grid-template-columns: none;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .saved-deck-hero {
    width: clamp(72px, 66%, 94px);
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .deck-toolbar button {
    width: 100%;
  }

  .deck-filter-row,
  .deck-editor-fields,
  .deck-import-strip,
  .deck-list-search {
    grid-template-columns: 1fr;
  }

  .deck-results,
  .deck-list {
    max-height: none;
  }

  .deck-list-row {
    grid-template-columns: 48px auto minmax(0, 1fr) auto auto auto;
  }

  .deck-list-row select {
    grid-column: 1 / -1;
  }

  .deck-card-thumb {
    width: 48px;
    min-width: 48px !important;
    height: 66px;
    min-height: 66px !important;
  }

  .rules-tools {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .top-actions .text-button,
  .tools button,
  .roll-tools button {
    flex: 1;
  }

  .board,
  .board[data-layout="duel"],
  .board[data-layout="pod"] {
    grid-template-columns: 1fr;
  }

  .player-card {
    min-height: 0;
    padding: 9px;
  }

  .player-header {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 34px;
    gap: 6px;
  }

  .player-name-wrap {
    grid-column: 1 / -2;
    grid-template-columns: 1fr;
  }

  .player-header .icon-button {
    grid-column: -2 / -1;
  }

  .player-header > button:not(.icon-button) {
    min-height: 32px;
    font-size: 0.72rem;
  }

  .player-header [data-action="set-art-deck"],
  .player-header [data-action="smart"] {
    grid-column: 1;
  }

  .player-header [data-action="arts"],
  .player-header [data-action="deck"] {
    grid-column: 2;
  }

  .player-header [data-action="set-art-deck"],
  .player-header [data-action="arts"] {
    grid-row: 2;
  }

  .player-header [data-action="smart"],
  .player-header [data-action="deck"] {
    grid-row: 3;
  }

  .deck-import {
    min-height: 58px;
    font-size: 0.9rem;
  }

  .life-area {
    grid-template-columns: 50px minmax(0, 1fr) 50px;
    min-height: 124px;
    gap: 8px;
  }

  .life-total {
    font-size: clamp(4.5rem, 18vw, 6.2rem);
  }

  .counter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deck-tools {
    display: grid;
  }

  .deck-import {
    grid-column: 1 / -1;
  }

  .modal-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }

  .commander-damage-grid {
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  }

  .commander-damage-tile {
    grid-template-rows: minmax(140px, 1fr) auto auto auto;
  }

  .commander-damage-art,
  .commander-damage-art img {
    min-height: 140px;
  }

  .card-preview {
    grid-template-columns: 1fr;
  }

  .card-preview img {
    max-height: 420px;
  }
}

@media (max-width: 430px) {
  .rules-tools {
    grid-template-columns: 1fr 1fr;
  }

  .rules-tools input {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .player-card {
    min-height: 0;
  }

  .player-header > button:not(.icon-button) {
    font-size: 0.66rem;
    padding-inline: 4px;
  }

  .life-area {
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    min-height: 112px;
  }

  .life-total {
    font-size: clamp(3.9rem, 19vw, 5.2rem);
  }

  .counter-grid,
  .counter-options {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* Top-bar account chrome — QA round 2026-07-02, G6.42 + G6.43.        */
/* auth.js injects its own base styles at runtime; these selectors     */
/* carry higher specificity (.nav-actions descendant) so they win.     */
/* ------------------------------------------------------------------ */

/* G6.42: retire the "Local only" / "Synced" badge next to Sign in. */
.nav-actions .auth-ind {
  display: none !important;
}

/* G6.43: Sign-in button goes BLUE — same family as the What's New +
   bug-report top-bar buttons (brand-blue accents on the dark chrome). */
.nav-actions .auth-btn {
  background: var(--ink-2);
  color: var(--brand-bright);
  border: 1px solid var(--brand);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.nav-actions .auth-btn:hover {
  color: #eaf5ff;
  border-color: var(--brand-bright);
  background: rgba(77, 163, 255, 0.14);
  box-shadow: 0 0 14px rgba(77, 163, 255, 0.35);
}

/* ==================================================================== */
/* QA G7.46 · Mobile ergonomics (Agent C-M) — ADDITIVE, phone-only.     */
/* All rules are guarded by a coarse pointer or a narrow viewport so    */
/* desktop pixel output is unchanged. No existing desktop rule touched. */
/* ==================================================================== */

/* Kill the grey iOS/Android tap-flash + honour safe-area on the shell.
   -webkit-tap-highlight-color is a no-op on desktop mouse pointers, so
   this is safe to apply unconditionally. */
@media (pointer: coarse) {
  button,
  a,
  summary,
  .icon-button,
  .text-button,
  .page-tabs button,
  .deck-card-thumb,
  .saved-deck-card {
    -webkit-tap-highlight-color: transparent;
  }

  /* Comfortable ≥40px touch targets for the small square controls that
     were sized 34px for the mouse. Only widens on touch devices. */
  .icon-button,
  .icon-button.small,
  .mini-button,
  .segmented button,
  .mode-buttons button {
    min-height: 40px;
  }
  .icon-button,
  .icon-button.small,
  .mini-button {
    min-width: 40px;
  }
}

/* iOS zooms the page when a focused input renders below 16px. Bump the
   font to 16px on phones only (visual size barely changes; layout uses
   min-height not font-size for these fields). */
@media (max-width: 720px) {
  input,
  select,
  textarea,
  .deck-import-strip input,
  .deck-search-row input,
  .deck-editor-fields input,
  .deck-editor-fields select,
  .deck-editor-fields textarea,
  .deck-filter-row input,
  .deck-filter-row select,
  .deck-list-search input,
  .rules-tools input,
  .player-name,
  .deck-import {
    font-size: 16px;
  }

  /* Respect the notch / home-indicator on the fixed page frame. */
  .app-shell {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* Wide grids that still overflow on the smallest phones get a
     horizontal-scroll escape hatch instead of clipping. */
  .commander-damage-grid,
  .mana-profile-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tracker-page dialogs become near-full-screen sheets. These are
     <dialog> elements already width-capped for desktop. */
  #historyModal,
  #deckLibraryModal,
  #drawHandModal,
  #deckImageModal,
  #cardModal {
    width: min(100% - 12px, 720px) !important;
    max-width: 100%;
  }
}

/* Very narrow phones: single-column the ranked/type stat grids on the
   deck-review panel so nothing clips. */
@media (max-width: 480px) {
  .review-type-stats,
  .review-insight-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .deck-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}