/* Charcoal with a gold accent */
:root {
  color-scheme: dark;
  --bg: #0e0f12;
  --surface: #16181d;
  --text: #ece8e1;
  --muted: #9a958d;
  --border: #2a2d34;
  --accent: #d4af37;
  --accent-hover: #e6c35c;
  --accent-soft: rgb(212 175 55 / .12);
  --on-accent: #14120e;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgb(212 175 55 / .1), transparent),
    var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
a { color: inherit; }
.container { width: 100%; max-width: 56rem; margin: 0 auto; padding: 0 1.25rem; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: 15;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}
.brand { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; text-decoration: none; letter-spacing: .01em; }
.social { display: flex; gap: .5rem; }
.social a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  border-radius: .5rem;
  color: var(--muted);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  transition: color .15s, background .15s;
}
.social a:hover { color: var(--accent); background: var(--accent-soft); }
.social svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }

/* Hero */
.hero { padding: 5rem 0 3rem; }
.hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.5rem, 6vw, 3.5rem); line-height: 1.1; margin: 0 0 1.25rem; letter-spacing: -.01em; }
.hero h1::after { content: ""; display: block; width: 3.5rem; height: 2px; margin-top: 1.25rem; background: var(--accent); }
.hero p { font-size: 1.15rem; color: var(--muted); margin: 0; max-width: 36rem; }

/* Featured document (embedded PDF) */
.featured { padding: 2.5rem 0 3rem; }
.featured-viewer {
  display: block;
  width: 100%;
  height: min(80vh, 60rem);
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: var(--surface);
  box-shadow: 0 10px 30px rgb(0 0 0 / .4);
}
.featured-open { margin: .75rem 0 0; font-size: .9rem; text-align: right; }
.featured-open a { color: var(--accent); text-decoration: none; }
.featured-open a:hover { color: var(--accent-hover); text-decoration: underline; }

/* Documents */
.documents { padding-bottom: 4rem; }
.documents h2 { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin: 0 0 1rem; }
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .75rem;
  text-decoration: none;
  font-weight: 600;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.button:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgb(0 0 0 / .35), 0 0 0 1px rgb(212 175 55 / .25);
  transform: translateY(-1px);
}
.button .download-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  transition: background .15s;
}
.button:hover .download-icon { background: var(--accent-hover); }
.button svg { width: 1.1rem; height: 1.1rem; }
.empty { color: var(--muted); font-style: italic; }

/* Footer */
.site-footer { margin-top: auto; border-top: 1px solid var(--border); padding: 1.5rem 0; color: var(--muted); font-size: .875rem; }

@media (max-width: 30rem) {
  .social .label { display: none; }
  .hero { padding: 3.5rem 0 2.5rem; }
  .featured { padding-top: 1.5rem; }
  .featured-viewer { height: 70vh; }
  .featured-open { text-align: center; }
}

/* Dashboard */
.logout { display: flex; align-items: center; gap: 1rem; margin: 0; font-size: .9rem; }
.logout a { color: var(--accent); text-decoration: none; }
.logout a:hover { color: var(--accent-hover); }
.logout button {
  font: inherit;
  color: var(--muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .3rem .75rem;
  cursor: pointer;
}
.logout button:hover { color: var(--text); border-color: var(--muted); }
.container.dashboard { max-width: 80rem; padding: 2.5rem 1.25rem 4rem; }
.dashboard h1 { font-family: var(--serif); font-weight: 500; font-size: 2rem; margin: 0 0 2rem; }
.dashboard h2 { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin: 0 0 1rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface); }
.lead-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.lead-table th, .lead-table td { padding: .75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.lead-table th { font-weight: 600; color: var(--muted); white-space: nowrap; }
.lead-table tbody tr:last-child td { border-bottom: none; }
.lead-table .links { white-space: nowrap; }
.lead-table .links a { color: var(--accent); text-decoration: none; margin-right: .75rem; }
.lead-table .links a:hover { color: var(--accent-hover); text-decoration: underline; }
.lead-table th a.sort { color: inherit; text-decoration: none; }
.lead-table th a.sort:hover, .lead-table th a.sort.active { color: var(--accent); }
.lead-table .lead-title { color: var(--text); text-decoration: none; font-weight: 500; }
.lead-table .lead-title:hover { color: var(--accent); }

.lead-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin: 0 0 1rem; font-size: .9rem; }
/* Search and sort stay pinned under the site header while the results scroll. */
.lead-filters {
  position: sticky;
  top: 4rem;
  z-index: 10;
  margin-inline: -.75rem;
  padding: .6rem .75rem .75rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 40rem) {
  /* On phones the header wraps and the filters stack, so pinning them would cover most of the screen. */
  .lead-filters { position: static; margin-inline: 0; padding: 0; border-bottom: none; }
}
.lead-filters label { display: flex; flex-direction: column; gap: .3rem; color: var(--muted); }
.lead-filters label.toggle { flex-direction: row; align-items: center; gap: .5rem; padding-bottom: .45rem; color: var(--text); cursor: pointer; }
.lead-filters input[type="search"], .upload-form input[type="file"] {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .45rem .7rem;
  min-width: 14rem;
}
.lead-filters input[type="search"]:focus { outline: none; border-color: var(--accent); }
.lead-filters input[type="checkbox"] { accent-color: var(--accent); width: 1rem; height: 1rem; }
.lead-filters button, .upload-form button {
  font: inherit;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border: none;
  border-radius: .5rem;
  padding: .5rem 1rem;
  cursor: pointer;
}
.lead-filters button:hover, .upload-form button:hover { background: var(--accent-hover); }
.lead-filters a { color: var(--muted); padding-bottom: .5rem; }
.lead-count { color: var(--muted); font-size: .85rem; margin: 0 0 .75rem; }

.messages { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.message { padding: .75rem 1rem; border-radius: .5rem; border: 1px solid var(--border); background: var(--surface); }
.message.success { border-color: var(--accent); }
.message.error { border-color: #c0504d; }

.back { margin: 0 0 1rem; font-size: .9rem; }
.back a { color: var(--muted); text-decoration: none; }
.back a:hover { color: var(--accent); }
.dashboard h1 + .lead-meta { margin-top: -1.5rem; }
.lead-meta { color: var(--muted); margin: 0 0 1rem; }
.lead-actions { display: flex; gap: .75rem; margin: 0 0 2.5rem; }
.button-small {
  display: inline-block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: .5rem;
  padding: .35rem .85rem;
  text-decoration: none;
  white-space: nowrap;
}
.button-small:hover { background: var(--accent-hover); }
.button-small:disabled { opacity: .45; cursor: not-allowed; }
.button-small.secondary { color: var(--text); background: none; border: 1px solid var(--border); }
.button-small.secondary:hover { border-color: var(--muted); }
.lead-files, .lead-summary { margin-bottom: 2.5rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.lead-files code { color: var(--text); }
.file-list { list-style: none; margin: 0 0 1rem; padding: 0; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface); }
.file-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.file-list li:last-child { border-bottom: none; }
.file-list .file-name { font-weight: 500; margin-right: auto; word-break: break-all; }
.file-list .muted { font-size: .85rem; }
.upload-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1rem; }
.upload-form + .muted { margin-top: .5rem; }
.summary-text { max-width: 48rem; color: var(--text); }
.summary-text p { margin: 0 0 .9rem; }

@media (max-width: 30rem) {
  .lead-filters input[type="search"], .upload-form input[type="file"] { min-width: 0; width: 100%; }
  .lead-filters label { width: 100%; }
}
.applied-toggle { display: inline-flex; margin: 0; }
.applied-toggle label { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.applied-toggle input[type="checkbox"] { accent-color: var(--accent); width: 1rem; height: 1rem; cursor: pointer; }
.lead-actions { align-items: center; }

/* Dashboard tabs */
.dash-tabs { display: flex; gap: .25rem; }
.dash-tabs a {
  font-size: .95rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: .4rem .8rem;
  border-radius: .5rem;
}
.dash-tabs a:hover { color: var(--text); }
.dash-tabs a.current { color: var(--accent); background: var(--accent-soft); }

/* Weiss Schwarz cards */
.set-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.set-list a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: var(--surface);
  text-decoration: none;
}
.set-list a:hover { border-color: var(--accent); }
.set-list .set-name { font-weight: 600; }
.lead-filters select {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .45rem .7rem;
}
.page-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.page-title-row h1 { margin-right: auto; }
.card-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1.25rem; }
.card-grid a { display: flex; flex-direction: column; gap: .3rem; text-decoration: none; font-size: .85rem; }
.card-grid img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; border-radius: .5rem; background: var(--surface); border: 1px solid var(--border); }
.card-grid a:hover img { border-color: var(--accent); }
.card-grid .card-name { font-weight: 500; line-height: 1.3; }
.card-detail { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.card-detail .card-serial { margin: 0 0 .25rem; }
.card-detail h1 { margin-bottom: 1.5rem; }
.card-image { width: 100%; border-radius: .75rem; border: 1px solid var(--border); }
.card-stats { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; margin: 0 0 1.5rem; }
.card-stats dt { color: var(--muted); }
.card-stats dd { margin: 0; }
.card-text { padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface); margin-bottom: 1rem; }
.card-flavor { font-style: italic; color: var(--muted); }

@media (max-width: 40rem) {
  .site-header .container { height: auto; min-height: 4rem; flex-wrap: wrap; gap: .5rem; padding-top: .5rem; padding-bottom: .5rem; }
  .card-detail { grid-template-columns: 1fr; }
  .card-image { max-width: 20rem; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
}
.card-title-row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.card-price { color: var(--accent); font-weight: 600; white-space: nowrap; }
.card-detail .card-title-row h1 { margin-bottom: 0; }
.card-detail .card-title-row .card-price { font-size: 1.5rem; font-family: var(--serif); }
.card-price-note { margin: .4rem 0 1.5rem; }
.card-price-note a { color: var(--accent); }
.set-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1.25rem; }
.set-grid a {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: var(--surface);
  text-decoration: none;
  font-size: .85rem;
}
.set-grid a:hover { border-color: var(--accent); }
.set-grid img, .set-cover-missing { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; border-radius: .5rem; background: var(--bg); margin-bottom: .35rem; }
.set-grid .set-name { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.lead-filters input.narrow { min-width: 0; width: 8rem; }

/* Multi-select color filter: toggle chips with a colored dot. */
.color-filter { border: none; margin: 0; padding: 0; min-width: 0; }
.color-filter legend { padding: 0; margin-bottom: .3rem; color: var(--muted); }
.color-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.lead-filters label.color-chip { flex-direction: row; align-items: center; gap: .4rem; padding: .4rem .65rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; user-select: none; }
.color-chip input { position: absolute; opacity: 0; pointer-events: none; }
.color-chip span::before { content: ""; display: inline-block; width: .65rem; height: .65rem; margin-right: .4rem; border-radius: 50%; background: var(--chip, var(--muted)); vertical-align: -.05rem; }
.color-chip:has(input:checked) { border-color: var(--chip, var(--accent)); background: color-mix(in srgb, var(--chip, var(--accent)) 22%, var(--surface)); }
.color-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.color-yellow { --chip: #e3c33b; }
.color-red { --chip: #d9534f; }
.color-blue { --chip: #4a8fd9; }
.color-green { --chip: #4fae5b; }
.color-purple { --chip: #9b6cd1; }

/* Card lists side panel */
/* Weiss pages get a wider page so the side panel doesn't squeeze the card grid. */
.container.dashboard:has(.weiss-layout) { max-width: 104rem; }
.weiss-layout { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 2rem; align-items: start; }
.list-panel {
  position: sticky;
  top: 5rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: var(--surface);
  font-size: .9rem;
}
.dashboard .list-panel h2 { margin-bottom: .75rem; }
.list-panel .panel-label { margin: 0 0 .25rem; }
.panel-error { color: #e07a76; margin: 0 0 .75rem; }
.panel-editing { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.panel-list-name { margin: 0 0 .5rem; font-weight: 600; font-size: 1rem; }
.panel-list-name a { text-decoration: none; }
.panel-list-name a:hover { color: var(--accent); }
.list-counter { margin: 0 0 .4rem; color: var(--muted); }
.list-counter strong { font-size: 1.6rem; font-family: var(--serif); color: var(--accent); }
.meter { height: .35rem; border-radius: 1rem; background: var(--bg); overflow: hidden; margin-bottom: .75rem; }
.meter span { display: block; height: 100%; background: var(--accent); }
.meter.full span { background: #c0504d; }
.panel-entries { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.panel-entries li { display: grid; grid-template-columns: 1.6rem 2.4rem minmax(0, 1fr) auto; gap: 0 .55rem; align-items: center; }
.panel-level { grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; height: 1.6rem; border-radius: .35rem; font-size: .8rem; font-weight: 700; color: #fff; background: #b23a3a; }
.panel-level.climax { font-size: .65rem; background: #b8892a; }
.panel-thumb { grid-column: 2; grid-row: 1 / span 2; display: block; width: 2.4rem; aspect-ratio: 5 / 7; border-radius: .25rem; overflow: hidden; background: var(--bg); border: 1px solid var(--border); }
.panel-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.panel-entries .panel-entry-name { grid-column: 3; text-decoration: none; line-height: 1.3; }
.panel-entries .panel-entry-name:hover { color: var(--accent); }
.panel-entries .muted { grid-column: 3; }
.panel-entries .qty-controls { grid-column: 4; grid-row: 1 / span 2; }

/* Deck reminders */
.deck-toggle { margin: 0 0 .6rem; }
.deck-toggle label { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; font-size: .85rem; }
.deck-toggle input { accent-color: var(--accent); width: 1rem; height: 1rem; }
.deck-checks { --good: #5cb85c; --bad: #e0605b; --suggest: #d9a441; margin: 0 0 .9rem; }
.deck-total { margin: 0 0 .4rem; color: var(--muted); }
.deck-total strong { font-size: 1.6rem; font-family: var(--serif); color: var(--accent); }
.deck-total.good strong { color: var(--good); }
.deck-total.bad strong { color: var(--bad); }
.deck-groups { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-size: .85rem; max-width: 22rem; }
.deck-groups li { display: flex; justify-content: space-between; padding: .25rem .55rem; border-radius: .35rem; border-left: 3px solid; }
.deck-groups li.good { border-color: var(--good); background: rgb(92 184 92 / .12); }
.deck-groups li.bad { border-color: var(--bad); background: rgb(224 96 91 / .12); }
.deck-groups li.suggest { border-color: var(--suggest); background: rgb(217 164 65 / .12); }
.deck-groups li.good strong { color: var(--good); }
.deck-groups li.bad strong { color: var(--bad); }
.deck-groups li.suggest strong { color: var(--suggest); }
.deck-colors { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; font-size: .8rem; max-width: 22rem; }
.deck-colors li { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--chip, var(--border)); background: color-mix(in srgb, var(--chip, var(--muted)) 18%, var(--surface)); }
.deck-colors li::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--chip, var(--muted)); }
.deck-hint { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.deck-over-names { margin: .4rem 0 0; color: #e0605b; }
.qty-controls.over-limit button, .qty-controls.over-limit button:disabled { background: #c0504d; color: #fff; }
.qty-controls.over-limit button:hover { background: #d9625e; }
.qty-controls.over-limit .qty { color: #e0605b; font-weight: 700; }
.deck-tag { margin-left: .4rem; padding: .05rem .4rem; border-radius: .3rem; font-size: .7rem; font-weight: 600; vertical-align: middle; color: var(--accent); background: var(--accent-soft); }
.panel-new-list { display: grid; gap: .35rem; margin-bottom: 1rem; }
.panel-row { display: flex; gap: .5rem; }
.panel-row input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .4rem .6rem;
}
.panel-row input:focus { outline: none; border-color: var(--accent); }
.panel-row button, .qty-controls button {
  font: inherit;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border: none;
  border-radius: .5rem;
  padding: .4rem .75rem;
  cursor: pointer;
}
.panel-row button:hover, .qty-controls button:hover { background: var(--accent-hover); }
.panel-row button:disabled, .qty-controls button:disabled { opacity: .35; cursor: default; background: var(--accent); }
.panel-lists { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .35rem; }
.panel-lists li { display: flex; align-items: center; gap: .5rem; }
.panel-lists li a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.panel-lists li a:hover, .panel-lists li.current a { color: var(--accent); }
.panel-lists form { margin: 0; }
.list-panel .small a { color: var(--accent); }
.link-button { font: inherit; font-size: .85rem; color: var(--accent); background: none; border: none; padding: 0; cursor: pointer; }
.link-button:hover { text-decoration: underline; }
.cover-form, .cover-current { margin-top: .35rem; font-size: .8rem; }
.cover-form .link-button { font-size: .8rem; color: var(--muted); }
.cover-form .link-button:hover { color: var(--accent); }
.cover-current { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; color: var(--accent); font-weight: 600; }
.cover-current .link-button, .cover-current .muted { font-size: .8rem; font-weight: 400; }

.qty-controls { display: inline-flex; align-items: center; gap: .4rem; }
.qty-controls form { margin: 0; }
.qty-controls button { padding: .1rem .55rem; line-height: 1.4; }
.qty-controls .qty { min-width: 1.5rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.card-grid li { display: flex; flex-direction: column; gap: .4rem; }
.card-grid li > .qty-controls { align-self: flex-start; }
.card-list-controls { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.5rem; }
.list-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0 0 2rem; }
.list-actions form { margin: 0; }
/* The CPU creation tab, and the VS CPU option under Play. */
.cpu-section, .vs-cpu { margin-bottom: 2rem; }
.cpu-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin: .5rem 0; }
.cpu-form form { margin: 0; }
.cpu-form label { display: grid; gap: .2rem; }
.cpu-list { list-style: none; margin: .75rem 0; padding: 0; display: grid; gap: .4rem; }
.cpu-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; }
.cpu-excluded { margin: .5rem 0 0; padding-left: 1.1rem; display: grid; gap: .5rem; }
.cpu-profile { margin: .75rem 0; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface); }
/* Express deck building: the prompt on creating a list, and tiles of cards to tick. */
.express-prompt { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 1rem; background: rgb(0 0 0 / .6); }
.express-prompt-box { width: min(30rem, 100%); padding: 1.25rem; border: 1px solid var(--accent); border-radius: .75rem; background: var(--surface); box-shadow: 0 12px 40px rgb(0 0 0 / .7); }
.express-prompt-box h2 { margin: 0 0 .5rem; }
.express-prompt-box .list-actions { margin: 1rem 0 0; }
.express-bar { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1rem 0; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface); }
.express-mode { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0; padding: 0; border: 0; }
.express-mode legend { float: left; margin-right: .25rem; padding: 0; }
.express-mode label { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.express-grid { gap: .85rem; }
.express-review { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
.express-tile { position: relative; display: block; border-radius: .55rem; outline: 3px solid transparent; outline-offset: 1px; cursor: pointer; }
.express-tile:hover { outline-color: var(--border); }
/* Selected: a border, and a glow, in the card's own color. */
.express-tile:has(input:checked) { outline: 4px solid var(--chip, var(--accent)); box-shadow: 0 0 14px var(--chip, var(--accent)); }
.express-tile:has(input:focus-visible) { outline-color: var(--text); }
.express-tile:has(input:checked:focus-visible) { outline-color: var(--chip, var(--accent)); box-shadow: 0 0 0 7px var(--text); }
.express-tile:has(input:disabled) { cursor: not-allowed; opacity: .45; }
.express-tile.locked { cursor: default; }
.express-tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.express-roles { position: absolute; right: .3rem; bottom: .3rem; display: flex; gap: .2rem; }
.express-role { display: grid; place-items: center; min-width: 1.3rem; height: 1.3rem; font-size: .72rem; font-weight: 800; color: #fff; border-radius: .3rem; box-shadow: 0 1px 4px rgb(0 0 0 / .6); }
.role-damage { background: #b23a3a; }
.role-utility { background: #2f5fa8; }
.role-locked { background: #2b2f3a; }
.button-small.danger { background: none; color: #e07a76; border: 1px solid #c0504d; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600; }
.button-small.danger:hover { background: rgb(192 80 77 / .15); }
button.button-small { border: none; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600; }
button.button-small.secondary { border: 1px solid var(--border); }

@media (max-width: 70rem) {
  .weiss-layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; }
}
@media (max-width: 60rem) {
  .weiss-layout { grid-template-columns: 1fr; }
  .list-panel { position: static; max-height: none; order: -1; }
}
.list-total { display: flex; justify-content: space-between; align-items: baseline; margin: .25rem 0 .2rem; padding: .6rem 0 0; border-top: 1px dashed var(--border); }
.list-total strong { font-size: 1.15rem; color: var(--accent); }
.list-total-note { margin: 0 0 .75rem; }
.panel-entries .line-total { color: var(--text); }

/* Card details on hover in a set grid */
.card-peek {
  position: fixed;
  z-index: 20;
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  /* Wide rather than tall, so long card text fits on screen (the box can't be scrolled). */
  width: min(42rem, calc(100vw - 2rem));
  max-height: calc(100vh - 1.5rem);
  overflow: hidden;
  padding: 1rem;
  border: 1px solid var(--accent);
  border-radius: .75rem;
  background: var(--surface);
  box-shadow: 0 12px 40px rgb(0 0 0 / .55);
  pointer-events: none;  /* never gets in the way of the mouse moving to the next card */
  font-size: .82rem;
  line-height: 1.45;
}
.card-peek[hidden] { display: none; }
.card-peek img { width: 100%; border-radius: .5rem; aspect-ratio: auto; border: none; }
.card-peek-serial { margin: 0; }
.card-peek-name { margin: 0 0 .5rem; font-weight: 600; font-size: .95rem; }
.card-peek .card-stats { gap: .2rem 1rem; margin-bottom: .6rem; }
.card-peek .card-peek-text { max-height: none; }
.card-peek-text { padding: .5rem .65rem; border-radius: .5rem; background: var(--bg); max-height: 14rem; overflow: hidden; }

/* Deck-builder card popup. No padding on the dialog itself, so a click that lands on it is the backdrop. */
.card-popup { width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 1px solid var(--accent); border-radius: .75rem; background: var(--surface); color: var(--text); box-shadow: 0 12px 40px rgb(0 0 0 / .55); font-size: .85rem; line-height: 1.45; }
.card-popup::backdrop { background: rgb(0 0 0 / .55); }
.card-popup [data-card-popup-body] { padding: 1.1rem; }
.card-popup-close { position: absolute; top: .4rem; right: .5rem; font: inherit; font-size: 1.3rem; line-height: 1; color: var(--muted); background: none; border: none; cursor: pointer; padding: .2rem .45rem; }
.card-popup-close:hover { color: var(--text); }
.card-popup-content { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1.1rem; }
.card-popup-image { width: 100%; border-radius: .5rem; display: block; }
.card-popup .card-stats { gap: .2rem 1rem; margin-bottom: .6rem; }
.card-popup .card-peek-text { max-height: none; }
.card-popup-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .9rem; }
@media (max-width: 34rem) {
  .card-popup-content { grid-template-columns: 1fr; }
  .card-popup-image { max-width: 14rem; margin: 0 auto; }
}

/* Login and invitation pages */
.container.account-page { max-width: 28rem; padding: 4rem 1.25rem; }
.account-page h1 { font-family: var(--serif); font-weight: 500; font-size: 2rem; margin: 0 0 1rem; }
.account-form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.account-form label { display: grid; gap: .35rem; color: var(--muted); font-size: .9rem; }
.account-form input {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .6rem .8rem;
}
.account-form input:focus { outline: none; border-color: var(--accent); }
.account-form button {
  font: inherit;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border: none;
  border-radius: .5rem;
  padding: .7rem 1rem;
  cursor: pointer;
}
.account-form button:hover { background: var(--accent-hover); }
.account-form details { margin-top: -.5rem; }
.account-form details ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.form-error { color: #e07a76; font-size: .85rem; }

/* Weiss Schwarz table */
.container.dashboard:has(.play) { max-width: 110rem; }
/* Two board views, picked by the player (play.js puts layout-classic or layout-focus on .play):
   classic is three even rows with one card size; focus draws the stage large with the piles
   around it. --card-h is set alongside --card-w wherever the size changes, because a custom
   property built from another is fixed where it is defined. */
.play { --card-w: clamp(2.9rem, 4.4vw, 4.6rem); --card-h: calc(var(--card-w) * 1.4); display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.5rem; align-items: start; }
.play.layout-focus { --stage-w: clamp(4.4rem, 6.6vw, 8.4rem); --card-w: clamp(2.6rem, 3.4vw, 3.9rem); --card-h: calc(var(--card-w) * 1.4); grid-template-columns: minmax(0, 1fr) 17rem; gap: 1.25rem; }
.layout-focus .stage { --card-w: var(--stage-w); --card-h: calc(var(--card-w) * 1.4); }
/* The main piles around the stage are drawn between pile and stage size, to fill the board. */
.layout-focus :is(.zone-stock, .zone-memory, .zone-deck, .zone-resolution, .zone-waiting) { --card-w: clamp(3.4rem, 5vw, 6.2rem); --card-h: calc(var(--card-w) * 1.4); }
.play-board { display: grid; gap: .5rem; padding: .75rem; border: 1px solid var(--border); border-radius: 1rem; background: radial-gradient(ellipse at center, #1c1f26, var(--bg)); }
.table-side { display: grid; gap: .5rem; }
.table-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; text-align: center; font-size: .8rem; color: var(--muted); border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); padding: .3rem 0; letter-spacing: .05em; }
.stage { display: flex; justify-content: center; gap: .6rem; flex: 0 1 auto; }

/* Classic board: rows from the middle of the table outwards (climax / center stage / resolution,
   stock / back stage / deck, then level / clock / memory / waiting room). */
.layout-classic .mat { display: grid; gap: .5rem; }
.layout-classic .mat-row { display: flex; align-items: stretch; justify-content: space-between; gap: .5rem; }
.layout-classic .stage { flex: 1; gap: .5rem; }
.layout-classic .mat-opponent { display: flex; flex-direction: column-reverse; }
.layout-classic .mat-opponent .mat-row, .layout-classic .mat-opponent .stage { flex-direction: row-reverse; }

/* Focused board: one grid per side. Stage centered, left piles against the left edge, and
   resolution / deck / waiting room down the right edge beside both the stage and the level +
   clock row. */
.layout-focus .mat { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "left stage right" "level clock right"; gap: .6rem .9rem; align-items: stretch; }
.layout-focus .mat > .zone-level { grid-area: level; justify-self: start; }
.layout-focus .mat > .zone-clock { grid-area: clock; }
.layout-focus .zone-clock .spread-cards { justify-content: center; }
.layout-focus .mat-stage { grid-area: stage; display: flex; flex-direction: column; justify-content: center; gap: .5rem; }
.layout-focus .mat-right { grid-area: right; justify-self: end; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .5rem; }
/* Left: stock and memory at the top, the climax zone level with the middle of the stage. */
.layout-focus .mat-left { grid-area: left; display: grid; grid-template-rows: 1fr auto 1fr; justify-items: start; gap: .5rem; }
.layout-focus .mat-left-piles { grid-row: 1; align-self: start; display: flex; gap: .5rem; }
.layout-focus .mat-left > .zone-climax { grid-row: 2; }
/* The opponent sits across the table: everything turned around, so their stage faces ours. */
.layout-focus .mat-opponent { grid-template-areas: "right clock level" "right stage left"; }
.layout-focus .mat-opponent > .zone-level { justify-self: end; }
.layout-focus .mat-opponent .stage, .layout-focus .mat-opponent .mat-left-piles { flex-direction: row-reverse; }
.layout-focus .mat-opponent .mat-right, .layout-focus .mat-opponent .mat-stage { flex-direction: column-reverse; }
.layout-focus .mat-opponent .mat-right { justify-self: start; }
.layout-focus .mat-opponent .mat-left { justify-items: end; }
.layout-focus .mat-opponent .mat-left-piles { grid-row: 3; align-self: end; }
/* Climax zone: landscape and about twice the size of a pile card (1.5 x 1.3), matching the climax
   art, which is printed sideways. */
.layout-focus .zone.pile.zone-climax { --cx-w: calc(var(--card-h) * 1.95); --cx-h: calc(var(--card-w) * 1.95); min-width: calc(var(--cx-w) + .6rem); min-height: calc(var(--cx-h) + 1.6rem); }
.layout-focus .zone-climax .pcard, .layout-focus .zone-climax .zone-empty { width: var(--cx-w); height: var(--cx-h); }

/* Quick actions over one of your characters while the mouse is on its slot (or a button in it has
   focus). They sit in the slot, not on the card, so they stay upright when the card is rested. */
/* Stand / rest (stacked, top left), reverse (top right) and to-hand (bottom left) buttons, in the
   slot's side margins beside a standing card so they don't cover its level, cost or power. */
.slot-pos { position: absolute; top: .25rem; left: .2rem; z-index: 4; display: flex; flex-direction: column; gap: .2rem; }
.slot-pos-right { left: auto; right: .2rem; }
.slot-pos-bottom { top: auto; bottom: .25rem; }
/* Buttons between neighbouring stage slots (swap, or move into the empty one). They sit on the
   edge of the first slot, half outside it, so they read as being between the two. */
.slot-link { position: absolute; z-index: 6; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; padding: 0; font: inherit; font-size: .85rem; font-weight: 800; line-height: 1; color: #fff; background: #2f5fa8; border: 1px solid rgb(255 255 255 / .6); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 6px rgb(0 0 0 / .6); }
.slot-link:hover { background: #3c74c9; border-color: var(--accent); }
.slot-link.link-h { top: 50%; right: calc(-.3rem - .675rem); transform: translateY(-50%); }
.slot-link.link-dr { bottom: -.95rem; right: -.5rem; }
.slot-link.link-dl { bottom: -.95rem; left: -.5rem; }
.slot-pos-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.slot-pos button { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; padding: 0; font: inherit; font-size: .85rem; font-weight: 800; line-height: 1; color: #fff; background: #2b2f3a; border: 1px solid rgb(255 255 255 / .55); border-radius: .3rem; cursor: pointer; box-shadow: 0 2px 6px rgb(0 0 0 / .6); }
.slot-pos button:hover { border-color: var(--accent); color: var(--accent); background: #353a47; }
.slot-pos button.zone-menu { width: auto; min-width: 1.4rem; padding: 0 .15rem; font-size: .68rem; letter-spacing: -.02em; }
.slot-pos button[aria-pressed="true"] { color: #111; border-color: var(--accent); background: var(--accent); }
/* The ! button on a card with an ability to activate: bright when one can be used right now. */
.slot-pos button.ability-button, .ability-button { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; padding: 0; font: inherit; font-size: .95rem; font-weight: 900; line-height: 1; color: #d8dbe3; background: #2b2f3a; border: 1px solid rgb(255 255 255 / .35); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 6px rgb(0 0 0 / .6); }
.slot-pos button.ability-button.ready, .ability-button.ready { color: #1b1300; background: #f5c542; border-color: #fff0b8; box-shadow: 0 0 0 1px #f5c542, 0 0 10px rgb(245 197 66 / .75); }
.slot-pos button.ability-button.ready:hover, .ability-button.ready:hover { color: #1b1300; background: #ffd964; }
.slot-wrap { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.mat-opponent .slot-wrap { flex-direction: column-reverse; } /* the opponent's side is the same, turned around */
.slot-actions { position: absolute; left: 50%; top: 45%; z-index: 4; display: none; flex-direction: column; gap: .25rem; transform: translate(-50%, -50%); }
.zone.slot:hover .slot-actions, .slot-actions:focus-within { display: flex; }
:is(.slot-actions, .hand-actions) button { font: inherit; font-size: .7rem; font-weight: 600; white-space: nowrap; color: var(--text); background: rgb(20 22 28 / .88); border: 1px solid var(--border); border-radius: .35rem; padding: .25rem .5rem; cursor: pointer; box-shadow: 0 2px 8px rgb(0 0 0 / .5); }
:is(.slot-actions, .hand-actions) button:hover { border-color: var(--accent); color: var(--accent); }
.slot-actions button[data-act*='"attack"'] { color: #fff; background: #b23a3a; border-color: #d9625e; }
.slot-actions button[data-act*='"attack"']:hover { background: #c94a4a; color: #fff; }

/* Markers: a badge under the character with the top marker (or a card back) and the count. */
.marker-pile { display: inline-flex; align-items: center; gap: .35rem; margin-top: .15rem; padding: .15rem .5rem .15rem .2rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: .68rem; white-space: nowrap; cursor: pointer; }
.marker-pile:hover, .marker-pile.drop-over { border-color: var(--accent); color: var(--accent); }
.marker-face { display: block; width: 1.1rem; height: 1.55rem; border-radius: .15rem; overflow: hidden; flex: none; }
.marker-face img, .marker-face .pcard-back { display: block; width: 100%; height: 100%; object-fit: cover; }
.damage-form { display: flex; align-items: flex-end; gap: .5rem; margin-top: .6rem; }
.damage-form label { display: flex; flex-direction: column; gap: .2rem; font-size: .75rem; color: var(--muted); }
.damage-form input { width: 4.5rem; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: .4rem; padding: .3rem .45rem; }
.damage-form button { font: inherit; font-size: .8rem; font-weight: 600; color: var(--on-accent); background: #c0504d; border: none; border-radius: .4rem; padding: .4rem .7rem; cursor: pointer; }
.damage-form button:hover { background: #d9625e; }
.damage-note { margin: .35rem 0 0; }

.zone { position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .3rem; border: 1px dashed rgb(255 255 255 / .1); border-radius: .5rem; min-width: calc(var(--card-h) + .6rem); }
.zone-label { font-size: .65rem; color: var(--muted); white-space: nowrap; text-transform: uppercase; letter-spacing: .06em; }
.zone-label b { color: var(--text); font-weight: 600; }
.zone.slot, .zone.pile { min-height: calc(var(--card-h) + 1.6rem); justify-content: flex-start; }
.zone.slot { min-height: calc(var(--card-h) + .6rem); justify-content: center; } /* its name is outside it */
.zone-empty { display: block; width: var(--card-w); height: var(--card-h); border-radius: .35rem; background: rgb(255 255 255 / .03); }
/* Search (🔍) on a pile of more than one card, shown while hovering it. */
.zone-search { position: absolute; top: .2rem; right: .2rem; z-index: 4; display: none; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0; font: inherit; font-size: .85rem; line-height: 1; background: #2b2f3a; border: 1px solid rgb(255 255 255 / .55); border-radius: .3rem; cursor: pointer; box-shadow: 0 2px 6px rgb(0 0 0 / .6); }
.zone:hover > .zone-search, .zone-search:focus-visible { display: grid; }
.zone-search:hover { border-color: var(--accent); background: #353a47; }
.zone.drop-over { border-color: var(--accent); background: var(--accent-soft); }
.zone.pile { cursor: pointer; }
.zone.pile:hover { border-color: rgb(255 255 255 / .3); }
.zone.spread { flex: 1; align-items: stretch; cursor: pointer; }
.zone.spread .zone-label { align-self: center; }
.spread-cards { display: flex; align-items: center; min-height: var(--card-h); padding-right: calc(var(--card-w) * .5); }
.spread-cards .pcard { margin-right: calc(var(--card-w) * -.45); }
.spread-cards .pcard:hover { z-index: 2; }
.mat-opponent .spread-cards { flex-direction: row-reverse; padding-right: 0; padding-left: calc(var(--card-w) * .5); }
.mat-opponent .spread-cards .pcard { margin-right: 0; margin-left: calc(var(--card-w) * -.45); }

/* Focused board: clock cards at the main pile size, using the room the narrow level zone frees up. */
.layout-focus .zone-clock { --card-w: clamp(3.4rem, 5vw, 6.2rem); --card-h: calc(var(--card-w) * 1.4); }
/* Focused board's level zone: one card wide, and half as wide as a stage slot (a slot is a stage
   card's height plus padding, so it fits a rested card). Each card below covers all but the top
   strip (level and cost) of the one above. */
.play.layout-classic { --stage-w: clamp(2.9rem, 4.4vw, 4.6rem); } /* classic stage cards are the board size */
.zone.spread.zone-level { --card-w: calc(var(--stage-w) * .7 - .3rem); --card-h: calc(var(--card-w) * 1.4); flex: none; align-items: center; min-width: calc(var(--card-w) + .6rem); }
.level-stack { display: flex; flex-direction: column; align-items: center; min-height: calc(var(--card-h) * 1.66); }
.level-stack .pcard + .pcard { margin-top: calc(var(--card-h) * -.78); }
.level-stack .pcard:hover { z-index: 2; }

/* Board view switch in the controls panel. */
.layout-switch { display: inline-flex; margin-top: .6rem; border: 1px solid var(--border); border-radius: .45rem; overflow: hidden; font-size: .78rem; }
.layout-switch button { font: inherit; color: var(--muted); background: none; border: none; padding: .3rem .65rem; cursor: pointer; }
.layout-switch button + button { border-left: 1px solid var(--border); }
.layout-switch button[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); font-weight: 600; }

.pcard { position: relative; width: var(--card-w); height: var(--card-h); flex: none; border-radius: .35rem; transition: transform .15s; cursor: pointer; }
.pcard img { width: 100%; height: 100%; object-fit: cover; border-radius: .35rem; display: block; box-shadow: 0 2px 6px rgb(0 0 0 / .5); }
.pcard-back { display: block; width: 100%; height: 100%; border-radius: .35rem; border: 1px solid #3a3326; background: repeating-linear-gradient(45deg, #2a2418, #2a2418 6px, #332b1c 6px, #332b1c 12px); }
.pcard.face-down img { filter: brightness(.35) sepia(.6); }
.pcard.pos-rest { transform: rotate(90deg); }
.pcard.pos-reverse { transform: rotate(180deg); }
.pcard-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: .55rem; font-weight: 700; letter-spacing: .05em; padding: .1rem .3rem; border-radius: .25rem; background: rgb(0 0 0 / .75); color: var(--accent); white-space: nowrap; }
.pcard.pos-reverse .pcard-badge { transform: translate(-50%, -50%) rotate(180deg); }
.pcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Active colors: a strip of the colors in your clock and level zone, right-aligned between the board
   and your hand so it sits under the waiting room. Colors come from .color-<name> (--chip). */
.active-colors { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .35rem; padding: 0 .3rem; }
.active-colors .zone-label { margin-right: .15rem; }
.active-color { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; border: 1px solid var(--chip, var(--border)); background: color-mix(in srgb, var(--chip, var(--muted)) 22%, var(--surface)); }
.active-color::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--chip, var(--muted)); }

.hand { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .4rem; border-radius: .5rem; }
.hand-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; min-height: var(--card-h); }
/* Your own hand is drawn larger than the board, and a hovered card lifts and grows over the board. */
.hand-me { --card-w: clamp(4rem, 6vw, 6.4rem); --card-h: calc(var(--card-w) * 1.4); }
.hand-me .hand-cards { gap: .5rem; }
.hand-me .pcard { transform-origin: bottom center; }
.hand-card { position: relative; flex: none; }
.hand-card:hover .pcard { z-index: 5; transform: translateY(-.6rem) scale(2.3); }
/* A hovered hand card's quick moves sit over the middle of the enlarged card. They're outside the
   card element so they don't scale with it. */
.hand-actions { position: absolute; left: 50%; bottom: calc(.6rem + var(--card-h) * 2.3 * .5); z-index: 6; display: none; flex-direction: column; gap: .25rem; transform: translate(-50%, 50%); }
.hand-card:hover .hand-actions, .hand-actions:focus-within { display: flex; }
:is(.slot-actions, .hand-actions) .icon-button { font-size: 1rem; line-height: 1; padding: .2rem .45rem; text-align: center; }
.hand-center { display: flex; justify-content: center; gap: .25rem; }
.hand-back { padding: 0 1rem; } /* narrower, like the back row under the center stage */
.hand-center button { flex: 1; min-width: 1.9rem; font-size: .8rem; font-weight: 700; text-align: center; }

/* Level / cost / power overlay on face-up cards; sized from the card so it scales with the board. */
.pcard-stats { position: absolute; inset: 0; pointer-events: none; font-size: max(.55rem, calc(var(--card-w) * .17)); font-weight: 700; line-height: 1; }
.stat-corner { position: absolute; top: 4%; left: 4%; display: flex; flex-direction: column; gap: .15em; }
.stat { display: grid; place-items: center; min-width: 1.45em; height: 1.45em; padding: 0 .2em; border-radius: .35em; color: #fff; background: rgb(0 0 0 / .78); box-shadow: 0 0 0 1px rgb(255 255 255 / .25); }
.stat-level { background: #b23a3a; }
.stat-cost { background: #2f5fa8; }
.stat-power { position: absolute; bottom: 4%; left: 4%; padding: 0 .3em; }
/* Front-row soul: wisp icons in the bottom-right. Boosted numbers (a climax's bonus) glow green. */
.stat-soul { position: absolute; bottom: 4%; right: 4%; display: flex; align-items: center; gap: .05em; height: 1.45em; padding: 0 .25em; border-radius: .35em; color: #ff8fb1; background: rgb(0 0 0 / .78); box-shadow: 0 0 0 1px rgb(255 255 255 / .25); }
.stat-soul svg { width: .7em; height: .95em; fill: currentColor; filter: drop-shadow(0 0 2px rgb(255 90 140 / .8)); }
.stat-soul b { margin-left: .1em; color: #fff; }
.stat.boosted, .stat-soul.boosted { box-shadow: 0 0 0 1px #6be08a, 0 0 8px rgb(107 224 138 / .7); }
.stat-power.boosted { color: #9ff5b4; }
.stat.lowered, .stat-soul.lowered { box-shadow: 0 0 0 1px #e0605b, 0 0 8px rgb(224 96 91 / .7); }
.stat-power.lowered { color: #ffb4b0; }
.hand-opponent .pcard { width: calc(var(--card-w) * .6); height: calc(var(--card-h) * .6); }
.hand-opponent .hand-cards { min-height: 0; }

.play-side { position: sticky; top: 5rem; display: grid; gap: .75rem; font-size: .85rem; }
.play-preview { padding: .75rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface); min-height: 6rem; }
.play-preview img { width: 100%; max-width: 13rem; display: block; margin: 0 auto .5rem; border-radius: .5rem; }
.play-preview p { margin: 0 0 .3rem; }
.play-preview-name { font-weight: 600; font-size: .95rem; }
.play-preview .card-peek-text { max-height: 12rem; overflow-y: auto; font-size: .8rem; }
.play-controls { padding: .75rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface); }
.play-turn { margin: 0 0 .5rem; color: var(--muted); }
.play-turn.mine { color: var(--accent); font-weight: 600; }
.play-buttons { display: flex; flex-wrap: wrap; gap: .35rem; }
.play-buttons button { font: inherit; font-size: .8rem; font-weight: 600; color: var(--on-accent); background: var(--accent); border: none; border-radius: .4rem; padding: .35rem .6rem; cursor: pointer; }
.play-buttons button:hover { background: var(--accent-hover); }
.play-buttons button:disabled { opacity: .35; cursor: default; }
.play-log { height: 14rem; overflow-y: auto; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface); font-size: .8rem; }
.play-log p { margin: 0 0 .3rem; }
.play-log .log-chat { color: var(--accent); }

.play-menu { position: fixed; z-index: 30; min-width: 12rem; max-height: 70vh; overflow-y: auto; padding: .35rem; border: 1px solid var(--accent); border-radius: .5rem; background: var(--surface); box-shadow: 0 10px 30px rgb(0 0 0 / .6); font-size: .85rem; }
.play-menu[hidden] { display: none; }
/* The menu that opens while hovering a character on the stage: its background at half opacity. */
.play-menu.see-through { background: color-mix(in srgb, var(--surface) 50%, transparent); }
.play-menu-title { margin: .2rem .5rem .4rem; font-weight: 600; color: var(--accent); }
.play-menu button { display: block; width: 100%; text-align: left; font: inherit; color: var(--text); background: none; border: none; border-radius: .3rem; padding: .3rem .5rem; cursor: pointer; }
.play-menu button:hover { background: var(--accent-soft); color: var(--accent); }
.play-menu hr { border: none; border-top: 1px solid var(--border); margin: .25rem 0; }

.play-modal { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; padding: 1rem; background: rgb(0 0 0 / .6); }
.play-modal[hidden] { display: none; }
.play-modal-box { width: min(60rem, 100%); max-height: 85vh; overflow-y: auto; padding: 1.25rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface); }
.play-modal-head { display: flex; justify-content: space-between; align-items: center; }
.play-modal-head h2 { margin: 0; font-size: 1rem; }
.play-modal-head button { font: inherit; color: var(--text); background: none; border: 1px solid var(--border); border-radius: .4rem; padding: .25rem .7rem; cursor: pointer; }
.play-modal-cards { display: flex; flex-wrap: wrap; gap: .5rem; --card-w: 5.5rem; --card-h: 7.7rem; }

.play-setup { display: grid; gap: 1.5rem; max-width: 40rem; }
.setup-step { padding: 1.25rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface); }
.dashboard .setup-step h2 { margin-bottom: .75rem; }
.setup-step select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: .5rem; padding: .4rem .6rem; flex: 1; }
.setup-status { margin: 0 0 1rem; padding-left: 1.1rem; }
.setup-step button.button-small:disabled { opacity: .4; cursor: default; }

@media (max-width: 70rem) {
  .play, .play.layout-focus { grid-template-columns: 1fr; }
  .play-side { position: static; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}
/* Announcements over the board (play.js flash()): "Deck Out!" between the deck and center right,
   and a level up's old level flickering between the clock and level zones before the new one fades out. */
.play-flash { position: fixed; z-index: 45; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap; font-weight: 800; letter-spacing: .03em; color: var(--accent); text-shadow: 0 0 12px rgb(0 0 0 / .9), 0 2px 4px rgb(0 0 0 / .9); }
.flash-deck-out { font-size: clamp(1.6rem, 3vw, 2.6rem); animation: flash-fade 1.4s ease-in-out forwards; }
.flash-level { font-family: "Metal Mania", Impact, "Arial Black", sans-serif; font-weight: 400; letter-spacing: .04em; font-size: clamp(2.6rem, 4.6vw, 4.2rem); color: #ffd36b; -webkit-text-stroke: 1px #6b1d0f; text-shadow: 0 0 18px rgb(255 120 40 / .75), 0 3px 0 #3a0d06, 0 0 4px rgb(0 0 0 / .9); animation: flash-flicker 2s steps(1) forwards; }
.flash-level.flash-next { animation: flash-out 2s ease-out forwards; }
/* A card flying between zones while one of your moves is sent (play.js animateAction). */
.card-flight { position: fixed; z-index: 44; pointer-events: none; transform-origin: top left; border-radius: .35rem; box-shadow: 0 6px 18px rgb(0 0 0 / .6); }
.card-flight .pcard-back, .card-flight img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: .35rem; }
/* Turn phases: the current one lit, past ones dimmed, later ones clickable on your turn. */
.phase-bar { display: flex; flex-wrap: wrap; gap: .25rem; margin: .4rem 0 .2rem; }
.phase-bar button { font: inherit; font-size: .74rem; font-weight: 600; padding: .25rem .5rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: .35rem; cursor: pointer; }
.phase-bar button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.phase-bar button:disabled { cursor: default; }
.phase-bar button.past { opacity: .4; }
.phase-bar button.current { color: var(--on-accent); background: var(--accent); border-color: var(--accent); opacity: 1; }
.phase-note { margin: 0 0 .4rem; }
/* The attack phase's panel (in place of the phase bar): its steps, what's happening, and buttons. */
.attack-panel { margin: .4rem 0 .3rem; padding: .55rem .65rem; border: 1px solid #b23a3a; border-radius: .5rem; background: linear-gradient(135deg, rgb(178 58 58 / .22), rgb(20 22 28 / .6)); }
.phase-bar[hidden], .attack-panel[hidden] { display: none; }
.attack-title { margin: 0 0 .35rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; color: #ff8a80; }
.attack-steps { display: flex; flex-wrap: wrap; gap: .2rem; }
.attack-step { font-size: .7rem; font-weight: 600; padding: .18rem .45rem; border-radius: .3rem; color: var(--muted); border: 1px solid var(--border); }
.attack-step.current { color: #fff; background: #b23a3a; border-color: #d9625e; }
.attack-status { margin: .45rem 0 0; }
.attack-buttons { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.attack-buttons button, .counter-button { font: inherit; font-size: .78rem; font-weight: 700; color: #fff; background: #b23a3a; border: 1px solid #d9625e; border-radius: .35rem; padding: .3rem .6rem; cursor: pointer; }
.attack-buttons button:hover, .counter-button:hover { background: #c94a4a; }
.swap-slide { animation: swap-slide .35s ease-out; }
.swap-flip { animation: swap-flip .4s ease-out; transform-origin: top center; }
.swap-zoom { animation: swap-zoom .35s ease-out; }
.swap-skew { animation: swap-skew .35s ease-out; }
@keyframes swap-slide { from { opacity: 0; transform: translateX(-1.5rem); } to { opacity: 1; transform: none; } }
@keyframes swap-flip { from { opacity: 0; transform: perspective(600px) rotateX(-80deg); } to { opacity: 1; transform: none; } }
@keyframes swap-zoom { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes swap-skew { from { opacity: 0; transform: skewX(-18deg) translateX(1rem); } to { opacity: 1; transform: none; } }
/* A new phase's name coming in (play.js announcePhase picks one). */
.fx-pop { animation: fx-pop .5s ease-out; }
.fx-flip { animation: fx-flip .55s ease-out; }
.fx-slide { animation: fx-slide .45s ease-out; }
.fx-glow { animation: fx-glow .8s ease-out; }
@keyframes fx-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes fx-flip { 0% { transform: perspective(500px) rotateX(90deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes fx-slide { 0% { transform: translateX(-1.2rem); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes fx-glow { 0% { text-shadow: 0 0 0 transparent; filter: brightness(2.2); } 40% { text-shadow: 0 0 14px var(--accent); } 100% { text-shadow: none; filter: none; } }
/* Trigger choices in the attacker's prompt. */
.trigger-option { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.trigger-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; margin-top: .4rem; }
.trigger-buttons button { font: inherit; font-size: .76rem; font-weight: 700; color: var(--on-accent); background: var(--accent); border: none; border-radius: .35rem; padding: .3rem .55rem; cursor: pointer; }
.trigger-buttons button:hover { background: var(--accent-hover); }
.trigger-buttons button:disabled { opacity: .4; cursor: default; background: var(--accent); }
/* The other player asking to turn the turn rules on or off. */
.rules-prompt { position: fixed; top: 28vh; left: 50%; z-index: 50; width: min(26rem, calc(100vw - 2rem)); transform: translateX(-50%); padding: .8rem 1rem; border: 1px solid var(--accent); border-radius: .6rem; background: var(--surface); box-shadow: 0 12px 40px rgb(0 0 0 / .7); font-size: .88rem; }
.rules-prompt p { margin: 0; }
.rules-prompt[hidden] { display: none; }
/* Encore step choices on a reversed character: greyed until pointed at, so they read as undecided. */
.encore-choice { position: absolute; left: 50%; bottom: .3rem; z-index: 5; display: flex; gap: .25rem; transform: translateX(-50%); }
.encore-choice button { font: inherit; font-size: .72rem; font-weight: 700; line-height: 1; padding: .3rem .5rem; color: #c9ccd3; background: #3a3d45; border: 1px solid #5a5e69; border-radius: .35rem; cursor: pointer; filter: grayscale(1); opacity: .8; box-shadow: 0 2px 6px rgb(0 0 0 / .6); }
.encore-choice button:hover:not(:disabled), .encore-choice button:focus-visible { filter: none; opacity: 1; color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.encore-choice button:disabled { opacity: .35; cursor: not-allowed; }
/* A climax played in the climax phase, in the middle of the screen for both players. play.js picks
   one of these entrances at random and sets the duration (2s). */
.climax-show { position: fixed; left: 50%; top: 50%; z-index: 46; pointer-events: none; transform: translate(-50%, -50%); animation-fill-mode: forwards; animation-timing-function: ease-out; }
.climax-show img { display: block; max-width: min(70vw, 52rem); max-height: 58vh; border-radius: .9rem; box-shadow: 0 0 40px rgb(255 200 80 / .55), 0 20px 60px rgb(0 0 0 / .8); }
/* An ability shown with its targets: its card on the left, arrows across to them on the right. */
.climax-show .ability-show { position: relative; display: flex; align-items: center; gap: clamp(4rem, 10vw, 9rem); }
.climax-show .ability-show [data-source] { max-width: 40vw; max-height: 52vh; }
.ability-show-targets { display: flex; flex-direction: column; gap: .75rem; }
.climax-show .ability-show-targets img { max-width: 30vw; max-height: calc((52vh - (var(--targets) - 1) * .75rem) / var(--targets)); }
.ability-arrows { position: absolute; top: 0; left: 0; overflow: visible; filter: drop-shadow(0 0 6px rgb(255 200 80 / .8)); }
/* A trigger check, in the middle of the screen for both players. */
.trigger-show { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .75rem 1.25rem; border-radius: .9rem; background: rgb(10 12 18 / .82); }
.trigger-show-title, .trigger-show-icons { margin: 0; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 6px #000; }
.trigger-show-title { font-size: 1.5rem; color: #f5c542; }
.trigger-show-icons { font-size: 1.15rem; }
.trigger-show-cards { display: flex; gap: .75rem; }
.climax-show .trigger-show-cards img { max-width: 34vw; max-height: 46vh; }
/* A phase change: the old phase's graphic, swept away by the new one's. */
.phase-show { position: fixed; left: 50%; top: 50%; z-index: 45; width: 15rem; height: 11rem; pointer-events: none; transform: translate(-50%, -50%); }
.phase-show-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid #f5c542; border-radius: 1rem; background: linear-gradient(160deg, rgb(32 36 48 / .96), rgb(12 14 20 / .96)); box-shadow: 0 0 24px rgb(245 197 66 / .45), 0 12px 40px rgb(0 0 0 / .7); }
.phase-show-icon { font-size: 3rem; line-height: 1.1; }
.phase-show-name { font-size: 1.8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.phase-show-word { font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: #f5c542; }
.phase-show-out { animation: phase-out var(--phase-ms) ease-in both; }
.phase-show-in { animation: phase-in var(--phase-ms) ease-out both; }
@keyframes phase-out { 0%, 35% { opacity: 1; transform: none; } 65%, 100% { opacity: 0; transform: translateX(-70%) scale(.8) rotate(-6deg); } }
@keyframes phase-in { 0%, 35% { opacity: 0; transform: translateX(70%) scale(.8) rotate(6deg); } 65% { opacity: 1; transform: none; } 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1.05); } }
.climax-zoom { animation-name: climax-zoom; }
.climax-spin { animation-name: climax-spin; }
.climax-slide { animation-name: climax-slide; }
.climax-flip { animation-name: climax-flip; }
.climax-drop { animation-name: climax-drop; }
.climax-blur { animation-name: climax-blur; }
@keyframes climax-zoom {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  30%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}
@keyframes climax-spin {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-540deg) scale(.3); }
  35%, 75% { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.9); }
}
@keyframes climax-slide {
  0% { opacity: 0; transform: translate(-160%, -50%) skewX(-20deg); }
  25% { opacity: 1; transform: translate(-45%, -50%) skewX(8deg); }
  35%, 75% { opacity: 1; transform: translate(-50%, -50%) skewX(0); }
  100% { opacity: 0; transform: translate(60%, -50%) skewX(-10deg); }
}
@keyframes climax-flip {
  0% { opacity: 0; transform: translate(-50%, -50%) perspective(900px) rotateY(90deg); }
  30%, 75% { opacity: 1; transform: translate(-50%, -50%) perspective(900px) rotateY(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) perspective(900px) rotateY(-30deg); }
}
@keyframes climax-drop {
  0% { opacity: 0; transform: translate(-50%, -160%); }
  22% { opacity: 1; transform: translate(-50%, -44%); }
  30% { transform: translate(-50%, -53%); }
  36%, 75% { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.95); }
}
@keyframes climax-blur {
  0% { opacity: 0; filter: blur(24px) brightness(2.5); transform: translate(-50%, -50%) scale(1.3); }
  35%, 75% { opacity: 1; filter: blur(0) brightness(1); transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; filter: blur(8px); transform: translate(-50%, -50%) scale(1); }
}
.view-options { display: flex; flex-wrap: wrap; gap: .5rem; }
@keyframes flash-fade {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.85); }
  25%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes flash-flicker {
  0%, 20%, 40%, 60%, 80%, 100% { opacity: 1; }
  10%, 30%, 50%, 70%, 90% { opacity: .15; }
}
@keyframes flash-out {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
.level-pick { border-radius: .45rem; cursor: pointer; outline: 2px solid transparent; outline-offset: 3px; }
.level-pick:hover, .level-pick:focus-visible { outline-color: var(--accent); }
.level-pick .pcard { cursor: pointer; }
.level-pick.picked { outline-color: #e0605b; }
.level-pick.picked .pcard { opacity: .5; }
/* The stylized CX standing in for the word "climax". */
.cx { display: inline-block; padding: 0 .12em; font-weight: 900; font-style: italic; letter-spacing: -.02em; line-height: 1;
  background: linear-gradient(135deg, #ffe27a, #ff8a3d 55%, #e0405b); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 3px rgb(255 140 60 / .55)); }
button .cx, .phase-bar button.current .cx { filter: drop-shadow(0 0 2px rgb(0 0 0 / .6)); }
.confirm-box { max-width: 30rem; }
/* Rock, paper, scissors for who goes first. */
.rps-box { text-align: center; }
.rps-box h2 { margin: 0 0 .75rem; }
.rps-symbol { display: block; font-size: 3rem; line-height: 1.2; }
.rps-choices { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; margin-top: .75rem; }
.rps-choices button { min-width: 6.5rem; padding: .6rem .8rem; font: inherit; font-weight: 700; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: .5rem; cursor: pointer; }
.rps-choices button:hover { border-color: var(--accent); color: var(--accent); }
.rps-faceoff { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-bottom: .5rem; }
.rps-hand { display: flex; flex-direction: column; align-items: center; }
.rps-lost { opacity: .4; }
.rps-vs { font-weight: 700; color: var(--muted); }
.rps-result { font-size: 1.15rem; font-weight: 700; }
.rps-won { color: #9ff5b4; }
.rps-beaten { color: #ffb4b0; }
/* Wins: on a deck, and in this series of rematches either side of the turn counter. */
.deck-wins { display: flex; flex-wrap: wrap; gap: .1rem .6rem; margin: 0 0 .25rem; }
.deck-stars { display: block; margin: 0; color: #f5c542; letter-spacing: .1em; }
.deck-cpu-wins { letter-spacing: 0; }
.table-turn { display: inline-block; }
.match-stars { min-height: 1em; font-size: 1.05rem; line-height: 1; letter-spacing: .1em; color: #f5c542; text-shadow: 0 0 8px rgb(245 197 66 / .6); }
.match-stars-left { text-align: right; }
.match-stars-right { text-align: left; }
/* Victory or Defeat: a metal crest over a huge word, blue and gold or red and iron. */
.game-over { --crest-light: #fff6d2; --crest-mid: #e7b53c; --crest-dark: #7d5414; --crest-core: #10243f; --crest-gem: #6cc8ff; --word-light: #fffbe6; --word-mid: #f2c750; --word-dark: #a06c17; --glow: rgb(255 205 90 / .55);
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; overflow: hidden; padding: 1rem; background: radial-gradient(circle at center, rgb(24 62 110 / .92), rgb(4 10 22 / .97) 70%); }
.game-over-defeat { --crest-light: #d9d4d4; --crest-mid: #8c7777; --crest-dark: #352626; --crest-core: #220b0b; --crest-gem: #d63a2f; --word-light: #f7dcd8; --word-mid: #d0473a; --word-dark: #5e1712; --glow: rgb(214 58 47 / .5);
  background: radial-gradient(circle at center, rgb(84 18 16 / .92), rgb(14 4 4 / .97) 70%); }
.game-over-rays { position: absolute; left: 50%; top: 50%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; opacity: .16; background: repeating-conic-gradient(var(--word-mid) 0 6deg, transparent 6deg 18deg); -webkit-mask-image: radial-gradient(circle, #000, transparent 55%); mask-image: radial-gradient(circle, #000, transparent 55%); }
.game-over-defeat .game-over-rays { opacity: .07; }
.game-over-banner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.game-over-crest { width: min(22rem, 70vw); margin-bottom: -1.5rem; filter: drop-shadow(0 0 22px var(--glow)) drop-shadow(0 8px 12px rgb(0 0 0 / .7)); }
.game-over-word { position: relative; margin: 0; padding: 0 .2em; font-family: "Cinzel", Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(3.5rem, 12vw, 9rem); line-height: 1.15; letter-spacing: .06em; text-transform: uppercase; color: transparent; background: linear-gradient(180deg, var(--word-light) 12%, var(--word-mid) 52%, var(--word-dark) 92%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 0 rgb(0 0 0 / .65)) drop-shadow(0 0 26px var(--glow)); }
.game-over-word::before, .game-over-word::after { content: ""; position: absolute; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, transparent, var(--word-mid), transparent); }
.game-over-word::before { top: .04em; }
.game-over-word::after { bottom: .02em; }
.game-over-reason { margin: .6rem 0 0; font-size: 1.05rem; color: #fff; }
.game-over-status { min-height: 1.5em; margin: .9rem 0 .6rem; color: #eee; }
.game-over-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.game-over-buttons button { min-width: 10rem; padding: .7rem 1.4rem; font: inherit; font-family: "Cinzel", Georgia, serif; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1b1300; background: linear-gradient(180deg, var(--word-light), var(--word-mid)); border: 1px solid var(--word-dark); border-radius: .3rem; cursor: pointer; box-shadow: 0 0 14px var(--glow); }
.game-over-buttons button:hover { filter: brightness(1.12); }
.game-over-buttons button:disabled { cursor: default; opacity: .55; filter: none; }
.game-over-buttons .game-over-end { color: #eee; background: rgb(0 0 0 / .45); border-color: rgb(255 255 255 / .35); box-shadow: none; }
.game-over.animated { animation: game-over-fade .5s ease-out both; }
.game-over.animated .game-over-rays { animation: game-over-spin 40s linear infinite; }
.game-over.animated .game-over-crest { animation: game-over-drop .7s .15s cubic-bezier(.2, 1.3, .4, 1) both; }
.game-over.animated .game-over-word { animation: game-over-slam .6s .45s cubic-bezier(.2, 1.2, .4, 1) both; }
.game-over.animated :is(.game-over-status, .game-over-buttons) { animation: game-over-fade .5s 1.1s ease-out both; }
@keyframes game-over-fade { from { opacity: 0; } }
@keyframes game-over-spin { to { transform: rotate(360deg); } }
@keyframes game-over-drop { from { opacity: 0; transform: translateY(-3rem) scale(.7); } }
@keyframes game-over-slam { from { opacity: 0; transform: scale(1.9); } }
.hand-needs { padding: .15rem .4rem; font-size: .68rem; font-weight: 700; text-align: center; white-space: nowrap; color: #ffb4b0; background: rgb(20 22 28 / .88); border-radius: .35rem; }
/* An ability to trigger or resolve: the card's picture, its text and what to do. */
.ability-box { max-width: 44rem; }
.ability-row { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .75rem; }
.ability-row > div { flex: 1; min-width: 0; }
.ability-source { flex: none; width: 5.5rem; border-radius: .35rem; }
.ability-box .card-peek-text { max-height: 11rem; overflow-y: auto; }
.ability-choices { flex-direction: column; align-items: stretch; }
.ability-choices button { text-align: left; }
.level-pick.unpickable { cursor: default; opacity: .4; }
.level-pick.unpickable:hover { outline-color: transparent; }
.level-pick { position: relative; }
.ability-order { position: absolute; top: .3rem; right: .3rem; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; font-weight: 800; color: #111; background: var(--accent); border-radius: 50%; }
/* In the side panel: the board has to stay clear for a step done by hand. */
.ability-dock { margin-bottom: .6rem; padding: .6rem .7rem; border: 1px solid #f5c542; border-radius: .5rem; background: var(--bg); font-size: .85rem; }
.ability-dock[hidden] { display: none; }
.ability-dock p { margin: 0 0 .4rem; }
.trigger-buttons .button-cancel { color: var(--text); background: var(--surface); border: 1px solid var(--border); }
.trigger-buttons .button-cancel:hover { background: var(--bg); }
/* A card the opponent revealed. */
.reveal-box { max-width: 46rem; }
.reveal-card { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.reveal-card img { width: 100%; border-radius: .6rem; display: block; }
@media (max-width: 40rem) { .reveal-card { grid-template-columns: 1fr; } }
.play-zoom { position: fixed; top: 50%; left: 2rem; z-index: 40; transform: translateY(-50%); pointer-events: none; }
.play-zoom[hidden] { display: none; }
.play-zoom img { display: block; height: min(80vh, 44rem); width: auto; border-radius: .9rem; box-shadow: 0 20px 60px rgb(0 0 0 / .75); }
.play-zoom.zoom-climax img { height: min(68vh, 37.4rem); } /* landscape, so a little smaller */