/*
 * Crown & Calamity game menus and deck editor (docs/game-scope.md). Dark, card-forward
 * screens in the accepted hybrid palette, using the Quiet Table tokens
 * (design/battlefield/system/v1/tokens.css). The duel itself uses the table board.
 */

.cc-game {
  --game-page: var(--cc-table-page, #111416);
  --game-panel: #161b1fee;
  --game-panel-strong: #1d2327;
  --game-line: #ffffff1c;
  --game-ink: var(--cc-table-ink, #e9e4d9);
  --game-muted: var(--cc-table-muted, #aaa99f);
  --game-gold: var(--cc-table-gold, #e0b76c);
  --game-cognac: var(--cc-table-cognac, #b87333);
  --game-ready: #8fd39a;
  --game-todo: #f0c070;
  --game-danger: #ff9f9f;
  --game-display: var(--cc-table-font-display, Georgia, serif);
  --game-body: var(--cc-table-font-body, Arial, Helvetica, sans-serif);
  --game-bar-height: 56px;
  margin: 0;
  min-height: 100vh;
  color: var(--game-ink);
  font: 15px/1.45 var(--game-body);
  background: radial-gradient(ellipse at 50% -10%, #3a2f22 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, #1c2a2f 0%, transparent 50%), var(--game-page);
}

.cc-game *, .cc-game *::before, .cc-game *::after { box-sizing: border-box; }
.cc-game a { color: var(--game-gold); }
.cc-game :focus-visible { outline: 2px solid var(--game-gold); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Top bar ---------------------------------------------------------------- */

.game-bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 24px;
  height: var(--game-bar-height); padding: 0 20px;
  background: linear-gradient(#0d1012f2, #12161af2); border-bottom: 1px solid #b79b5b40;
}
.game-bar__title { color: var(--game-ink) !important; font: 600 22px/1 var(--game-display); letter-spacing: 0.04em; text-decoration: none; font-variant: small-caps; }
.game-bar__title span, .home__title h1 span { color: var(--game-gold); }
.game-bar__nav { display: flex; gap: 4px; overflow-x: auto; }
.game-bar__nav a { padding: 7px 12px; border-radius: 999px; color: var(--game-muted); text-decoration: none; white-space: nowrap; }
.game-bar__nav a[aria-current="page"] { color: #1a1408; background: var(--game-gold); font-weight: 700; }

.screen { padding: 20px; outline: none; }
.screen--error { color: var(--game-danger); }
.screen__loading { height: 100%; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--game-muted); }
.screen__loading img { width: 84px; height: 84px; border-radius: 20px; opacity: .9; animation: loading-breathe 1.6s ease-in-out infinite; }
.screen__loading p { margin: 0; font: 600 15px/1 var(--game-display); letter-spacing: .08em; }
@keyframes loading-breathe { 50% { opacity: .55; transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) { .screen__loading img { animation: none; } }
.pane__title { margin: 0 0 12px; font: 600 28px/1.15 var(--game-display); }

/* ---- Shared controls ---------------------------------------------------------- */

.button, .text-button, .chip, .round-button { font: inherit; cursor: pointer; }
.button {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border: 1px solid #ffffff30; border-radius: 6px; color: var(--game-ink); background: var(--game-panel-strong); text-decoration: none;
}
.button--primary { color: #1a1408; background: linear-gradient(#ecc77f, #c9963f); border-color: #ecc77f; font-weight: 700; }
.button[hidden] { display: none; }
.text-button { padding: 2px 4px; border: 0; color: var(--game-gold); background: none; text-decoration: underline; text-underline-offset: 3px; }
.text-button--danger { color: var(--game-danger); }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pill--ready { color: #10230f; background: var(--game-ready); }
.pill--todo { color: #2a1d05; background: var(--game-todo); }
.notice { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--game-todo); background: #f0c0701a; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 5px 12px; border: 1px solid #ffffff30; border-radius: 999px; color: var(--game-muted); background: transparent; }
.chip[aria-pressed="true"] { color: #1a1408; background: var(--game-gold); border-color: var(--game-gold); font-weight: 700; }
.cc-game select, .cc-game input[type="search"], .cc-game input[type="text"], .deck-name {
  padding: 7px 10px; border: 1px solid #ffffff30; border-radius: 6px; color: var(--game-ink); background: #0e1214; font: inherit;
}
.round-button {
  width: 36px; height: 36px; border: 1px solid #ffffff40; border-radius: 50%;
  color: var(--game-ink); background: var(--game-panel-strong); font-size: 20px; line-height: 1;
}
.round-button:disabled, .grid-tile__action:disabled { opacity: 0.35; cursor: not-allowed; }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 20; max-width: min(560px, calc(100vw - 32px));
  padding: 10px 18px; border: 1px solid #b79b5b80; border-radius: 8px; color: var(--game-ink); background: #0e1214f2;
  box-shadow: 0 8px 24px #0009; transform: translate(-50%, 140%); visibility: hidden;
  transition: transform 180ms ease, visibility 0s linear 180ms;
}
.toast--shown { transform: translate(-50%, 0); visibility: visible; transition: transform 180ms ease; }

/* ---- Home --------------------------------------------------------------------- */

.home { max-width: 1100px; margin: 0 auto; }
.home__hero { position: relative; overflow: hidden; height: 320px; border-radius: 12px; border: 1px solid #b79b5b55; background: #0b0d0f; }
.home__art { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; opacity: 0.7; }
.home__title { position: absolute; inset: auto 0 0 0; padding: 28px 32px; background: linear-gradient(transparent, #0b0d0ff0 60%); }
.home__title h1 { margin: 0; font: 600 54px/1 var(--game-display); font-variant: small-caps; letter-spacing: 0.03em; }
.home__title p { margin: 8px 0 0; color: var(--game-muted); font-size: 17px; }
.home__menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 18px 0; }
.menu-tile {
  display: grid; gap: 4px; padding: 20px; border: 1px solid #ffffff22; border-radius: 10px; text-decoration: none;
  background: linear-gradient(160deg, #222a2f, #161b1f); transition: border-color 120ms, transform 120ms;
}
.menu-tile strong { color: var(--game-ink); font: 600 22px/1.2 var(--game-display); }
.menu-tile span { color: var(--game-muted); }
.home__decks { color: var(--game-ink); }
.home__dev { color: var(--game-muted); font-size: 13px; }

/* ---- Card detail ---------------------------------------------------------------- */

.detail-slot { min-width: 0; }
.card-detail {
  position: sticky; top: calc(var(--game-bar-height) + 12px);
  display: grid; gap: 6px; padding: 14px; border: 1px solid var(--game-line); border-radius: 10px; background: var(--game-panel);
}
.card-detail--empty { color: var(--game-muted); }
.card-detail__face { width: min(100%, 300px); justify-self: center; }
.card-detail__name { margin: 6px 0 0; font: 600 21px/1.2 var(--game-display); }
.card-detail__type { margin: 0; color: var(--game-gold); font-size: 13px; letter-spacing: 0.03em; }
.card-detail__stats { display: flex; gap: 16px; margin: 0; font-size: 18px; font-weight: 700; }
.card-detail__stats em { color: var(--game-muted); font-size: 12px; font-style: normal; letter-spacing: 0.08em; }
.card-detail__effect { margin: 4px 0 0; padding: 10px; border-radius: 6px; background: #0e1214; white-space: pre-line; }
.copy-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.copy-controls__count { min-width: 120px; text-align: center; color: var(--game-muted); }

/* ---- Card browser ------------------------------------------------------------------ */

.two-pane { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 20px; align-items: start; }
.pane { min-width: 0; }
.card-browser__controls { display: grid; gap: 8px; margin-bottom: 12px; }
.card-browser__search { width: 100%; }
.card-browser__selects { display: flex; flex-wrap: wrap; gap: 8px; }
.card-browser__count { margin: 0; color: var(--game-muted); font-size: 13px; }
.card-browser__empty { color: var(--game-muted); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.grid-tile { position: relative; }
.grid-tile__face { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; transition: transform 100ms; }
.grid-tile--maxed .grid-tile__face { opacity: 0.55; }
/* Copy counts sit on the art's corner, below the name plate, so the card's name stays readable. */
.grid-tile__badge {
  position: absolute; top: 13%; left: 6%; padding: 1px 7px; border-radius: 999px;
  color: #1a1408; background: var(--game-gold); font-size: 12px; font-weight: 800; pointer-events: none;
}
.grid-tile__action {
  position: absolute; right: 4px; bottom: 4px; width: 30px; height: 30px; border: 1px solid #ecc77f; border-radius: 50%;
  color: #1a1408; background: var(--game-gold); font: 800 18px/1 var(--game-body); cursor: pointer; box-shadow: 0 2px 6px #0008;
}

/* ---- Deck list ------------------------------------------------------------------------ */

.deck-list { max-width: 1200px; margin: 0 auto; }
.deck-list__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.deck-list__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.deck-list__empty { color: var(--game-muted); }
.deck-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 12px 0 0; padding: 0; list-style: none; }
.deck-slot { display: grid; border: 1px solid var(--game-line); border-radius: 10px; overflow: hidden; background: var(--game-panel); }
.deck-slot__open { display: grid; gap: 4px; padding-bottom: 10px; text-decoration: none; color: var(--game-ink) !important; }
.deck-slot__art { width: 100%; height: 150px; object-fit: cover; object-position: 50% 25%; }
.deck-slot__art--back { object-position: 50% 50%; }
.deck-slot__name { padding: 0 12px; font: 600 18px/1.2 var(--game-display); }
.deck-slot__count { padding: 0 12px; color: var(--game-muted); font-size: 13px; }
.deck-slot .pill { justify-self: start; margin: 0 12px; }
.deck-slot__tools { display: flex; gap: 10px; padding: 8px 10px; border-top: 1px solid var(--game-line); }
.deck-missing { max-width: 640px; }
.shared-deck { max-width: 900px; margin: 0 auto; }
.ready-made { display: inline-flex; gap: 6px; align-items: center; }
.options { display: grid; gap: 14px; max-width: 760px; margin: 0 auto; }
.option { margin: 0; padding: 16px 18px; border: 1px solid var(--game-line); border-radius: 10px; background: var(--game-panel); }
.option legend, .option h2 { padding: 0 6px 0 0; margin: 0; color: var(--game-gold); font: 600 19px/1.2 var(--game-display); }
.option p { margin: 6px 0 10px; color: var(--game-muted); }
.shared-deck__eyebrow { margin: 0 0 4px; color: var(--game-gold); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.shared-deck__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 16px 0; }
.shared-deck__group { padding: 12px 16px; border: 1px solid var(--game-line); border-radius: 10px; background: var(--game-panel); }
.shared-deck__group h2 { margin: 0 0 6px; font: 600 18px/1.2 var(--game-display); }
.shared-deck__group ul { margin: 0; padding-left: 18px; color: var(--game-muted); }

/* ---- Deck editor ------------------------------------------------------------------------ */

.screen--editor { padding: 12px 16px 0; }
.editor { display: grid; gap: 12px; }
.editor__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.back-link { text-decoration: none; font-weight: 700; }
.deck-name { min-width: 220px; font: 600 20px/1.2 var(--game-display); }
.editor__tools { display: flex; gap: 8px; margin-left: auto; }
.editor__body {
  display: grid; grid-template-columns: minmax(250px, 300px) minmax(300px, 1fr) minmax(330px, 1.15fr); gap: 16px;
  height: calc(100vh - var(--game-bar-height) - 80px);
}
.editor__body > * { min-height: 0; overflow-y: auto; padding-bottom: 16px; }
.editor__body .card-detail { position: static; }
.deck-panel { padding: 12px 14px; border: 1px solid #b79b5b40; border-radius: 10px; background: linear-gradient(#1b2024, #14181b); }
.deck-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.deck-panel__head h2 { margin: 0; font: 600 20px/1.2 var(--game-display); }
.deck-panel__head--fusion { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--game-line); }
.deck-panel__total { color: var(--game-gold); font-weight: 700; }
.deck-panel__empty { color: var(--game-muted); }
.deck-group h3 { margin: 12px 0 6px; color: var(--game-muted); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.deck-group h3 span { color: var(--game-ink); }
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.deck-tile { position: relative; }
.deck-tile__face { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.deck-tile__copies {
  position: absolute; top: 13%; left: 6%; padding: 0 6px; border-radius: 999px;
  color: #1a1408; background: var(--game-gold); font-size: 12px; font-weight: 800; pointer-events: none;
}
.deck-tile__remove {
  position: absolute; right: 3px; bottom: 3px; width: 24px; height: 24px; border: 1px solid #ffffff60; border-radius: 50%;
  color: var(--game-ink); background: #0e1214e6; font: 800 15px/1 var(--game-body); cursor: pointer;
}
.deck-stats { margin: 10px 0; padding: 10px; border-radius: 8px; background: #0e1214; }
.rank-curve { display: grid; grid-template-columns: repeat(8, 1fr); align-items: end; gap: 6px; height: 110px; }
.rank-curve__column { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; height: 100%; }
.rank-curve__count { color: var(--game-muted); font-size: 12px; }
.rank-curve__bar { align-self: end; width: 70%; height: calc(var(--fill, 0) * 100%); min-height: 2px; border-radius: 3px 3px 0 0; background: linear-gradient(var(--game-gold), var(--game-cognac)); }
.rank-curve__rank { font-size: 12px; font-weight: 700; }
.deck-stats__odds { margin: 10px 0 0; padding-left: 18px; color: var(--game-muted); font-size: 13px; }

/* ---- Solo Duel and How to Play ----------------------------------------------------------- */

.lobby, .guide { max-width: 900px; margin: 0 auto; }
.lobby__note, .guide__intro { color: var(--game-muted); font-size: 17px; }
.opponents { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; padding: 0; list-style: none; }
.opponent { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--game-line); border-radius: 10px; background: var(--game-panel); }
.opponent__head { display: flex; align-items: center; gap: 12px; }
.opponent__head > div { display: grid; gap: 2px; min-width: 0; }
.opponent__portrait { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--game-line); }
.opponent strong { font: 600 20px/1.2 var(--game-display); }
.opponent p { margin: 0; color: var(--game-muted); }
.opponent__level { color: var(--game-gold); font-size: 13px; font-weight: 700; }
.opponent__soon { justify-self: start; margin-top: 6px; padding: 2px 10px; border-radius: 999px; color: var(--game-muted); border: 1px solid var(--game-line); font-size: 12px; }
.opponent--locked { opacity: 0.8; }
.campaign__summary { display: flex; align-items: center; gap: 14px; font-size: 18px; }
.campaign__summary p { margin: 0; }
.campaign__badge { width: 72px; height: 72px; flex: none; filter: drop-shadow(0 4px 8px #0008); }
.campaign__rank .lobby__heading { display: flex; align-items: center; gap: 10px; }
.campaign__rank-badge { width: 40px; height: 40px; flex: none; }
.campaign__rank--far { opacity: 0.6; }
.campaign__rank--far .campaign__rank-badge { filter: grayscale(1); }
.campaign__place-head { display: flex; align-items: center; gap: 12px; }
.campaign__place-head > div { display: grid; gap: 2px; min-width: 0; }
.campaign__portrait { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--game-line); }
.campaign__place--rival { border-color: var(--game-gold); }
.campaign__place--challenger { border-color: #b8a3ff; box-shadow: 0 0 18px #8f7ad855; }
.campaign__reward { margin: 18px 0; padding: 12px 16px; border: 1px solid var(--game-gold); border-radius: 10px; background: var(--game-panel); }
.campaign__reward .campaign__pulls li { display: grid; gap: 6px; justify-items: center; }
.campaign__subheading { margin: 16px 0 6px; font: 600 18px/1.2 var(--game-display); }
.campaign__singles { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.campaign__single { width: 112px; display: grid; gap: 4px; justify-items: center; text-align: center; font-size: 13px; }
.campaign__single > :first-child { width: 100%; }
.campaign__single .button { padding: 4px 8px; font-size: 13px; }
.campaign__place .action-row { margin: 8px 0 0; }
.campaign__place .action-row .button { margin-top: 0; }
/* The three starters, each shown with its hero. */
.campaign__starters { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; padding: 0; list-style: none; }
.campaign__starter { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 16px; border: 1px solid var(--game-line);
  border-radius: 10px; background: var(--game-panel); }
.campaign__starter > :first-child { width: min(180px, 100%); }
.campaign__starter strong { font: 600 22px/1.2 var(--game-display); }
.campaign__starter p { margin: 0; color: var(--game-muted); }
/* A story scene, line by line, over the Campaign screen. */
.story-stage { position: fixed; inset: 0; z-index: 50; display: grid; place-items: end center; padding: 16px; background: #0009; }
.story-stage[hidden] { display: none; }
.story { width: min(720px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 18px 20px; border: 1px solid var(--game-gold);
  border-radius: 12px; background: var(--game-panel); box-shadow: 0 12px 40px #000a; }
.story__title { margin: 0 0 12px; font: 600 22px/1.2 var(--game-display); color: var(--game-gold); }
.story__lines { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.story__line { display: flex; align-items: flex-start; gap: 12px; }
.story__line--you { flex-direction: row-reverse; text-align: right; }
.story__line--narrator p { font-style: italic; color: var(--game-muted); }
.story__line--new { animation: story-line-in 0.35s ease-out; }
@keyframes story-line-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .story__line--new { animation: none; } }
.story__portrait { width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--game-gold); }
.story__words { display: grid; gap: 2px; }
.story__words strong { font: 600 16px/1.2 var(--game-display); }
.story__words p { margin: 0; font-size: 17px; line-height: 1.45; }
.story__actions { display: flex; justify-content: flex-end; gap: 10px; margin: 16px 0 0; }
.campaign__rank { margin-top: 18px; }
.campaign__status { color: var(--game-gold); font-weight: 600; }
.campaign__file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.campaign__deck, .campaign__shop { margin-top: 18px; }
.campaign__pack { padding: 12px 16px; border: 1px solid var(--game-gold); border-radius: 10px; background: var(--game-panel); }
.campaign__pack h3 { margin: 0 0 6px; font: 600 18px/1.2 var(--game-display); }
.campaign__pack-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 16px; align-items: start; }
.campaign__pulls { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.campaign__pull { width: 96px; display: grid; gap: 4px; justify-items: center; padding: 4px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: inherit; font-size: 11px; line-height: 1.25; text-align: center; cursor: pointer; }
.campaign__pull:focus-visible { border-color: var(--game-gold); }
.campaign__pull > :first-child { width: 100%; }
@media (max-width: 640px) { .campaign__pack-body { grid-template-columns: 1fr; } }
.campaign .button { position: relative; }
.lobby__heading { font: 600 20px/1.2 var(--game-display); }
.lobby__pick { font-size: 17px; }
.lobby__deck { min-width: 240px; margin-left: 6px; }
.opponent .button { justify-self: start; margin-top: 8px; }
.opponent .button:disabled { opacity: 0.45; cursor: not-allowed; }
.player-seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 18px 0; }
.player-seat { display: grid; gap: 10px; margin: 0; padding: 16px; border: 1px solid var(--game-line); border-radius: 10px; background: var(--game-panel); }
.player-seat legend { padding: 0 6px; color: var(--game-gold); font: 600 18px/1.2 var(--game-display); }
.player-seat label { display: grid; gap: 4px; color: var(--game-muted); font-size: 14px; }
.player-seat .lobby__deck { min-width: 0; margin-left: 0; }
.practice-list { padding-left: 18px; }
.guide__section { margin: 14px 0; padding: 14px 18px; border: 1px solid var(--game-line); border-radius: 10px; background: var(--game-panel); }
.guide__section h2 { margin: 0 0 6px; color: var(--game-gold); font: 600 19px/1.2 var(--game-display); }
.guide__section ul { margin: 0; padding-left: 18px; }

/* ---- Smaller screens ---------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .editor__body { grid-template-columns: minmax(300px, 1fr) minmax(330px, 1.15fr); height: auto; }
  .editor__body > .detail-slot { grid-column: 1 / -1; }
  .editor__body > * { overflow: visible; }
  .editor__body .card-detail { grid-template-columns: 160px 1fr; align-items: start; }
  .editor__body .card-detail__face { grid-row: span 6; }
}
@media (max-width: 760px) {
  .screen { padding: 14px 16px; }
  .two-pane, .editor__body { grid-template-columns: 1fr; }
  .card-detail { position: static; }
  .home__title h1 { font-size: 38px; }
}

/* Options → Your picture: the player's portraits and object pictures (the arena kit). */
.picture-row { display: flex; flex-wrap: wrap; gap: 10px; }
.picture-choice { width: 64px; height: 64px; padding: 0; border-radius: 50%; overflow: hidden; border: 2px solid transparent; background: none; cursor: pointer; }
.picture-choice[aria-pressed="true"] { border-color: #f0c66e; box-shadow: 0 0 0 3px #f0c66e44; }
.picture-choice:focus-visible { outline: 2px solid #f0c66e; outline-offset: 2px; }
.picture-choice__image { width: 100%; height: 100%; object-fit: cover; display: block; }

/* C-6: Rank Points and the exam, under the summary; the goals beside the ladder. */
.campaign__exam { margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--line, #3a352b); border-radius: 10px; background: #ffffff08; }
.campaign__exam p { margin: 0 0 8px; }
.campaign__meter { display: block; width: 100%; height: 10px; accent-color: #e0b76c; }
.campaign__goal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.campaign__goal { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--line, #3a352b); border-radius: 8px; }
.campaign__goal--met { border-color: #e0b76c99; background: #e0b76c12; }

/* ---- The app's frame, held sideways like most games ---------------------------------------------------------------
   The creator, October 25, 2026: "we should just force landscape and the whole app work in landscape like most games";
   of the first TestFlight build, "doesn't look or feel like a real app yet"; and "with the app there will be no web
   version. so we can build it to preform well as an app without worrying about the web version". So this is the game's
   one layout, on the iPhone and in a browser alike: a rail of icons down the left side; only the screen's own area
   scrolls, so the frame stays put; nothing under the camera cutout or the home indicator (the safe-area insets, which
   are 0 in a browser; the app's pages reach every edge, viewport-fit=cover). */
:root {
  --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px);
}
html:has(> body.cc-game), body.cc-game { height: 100%; overflow: hidden; overscroll-behavior: none; }
.cc-game { --rail-w: 76px; --game-bar-height: 0px; min-height: 0; }
.game-bar {
  position: fixed; inset: 0 auto 0 0; z-index: 10; width: calc(var(--rail-w) + var(--safe-left)); height: auto;
  flex-direction: column; align-items: stretch; gap: 0;
  padding: max(8px, var(--safe-top)) 6px max(8px, var(--safe-bottom)) calc(6px + var(--safe-left));
  border-bottom: 0; border-right: 1px solid #b79b5b40; background: linear-gradient(90deg, #0a0d0ff8, #12161af4);
}
.game-bar__title { display: none; }
.game-bar__nav { flex: 1; flex-direction: column; justify-content: center; gap: 2px; overflow: visible; }
.game-bar__nav a {
  display: grid; justify-items: center; gap: 3px; padding: 7px 2px 6px; border-radius: 12px;
  font-size: 10.5px; font-weight: 600; line-height: 1.1; letter-spacing: .02em; text-align: center; white-space: nowrap;
  transition: background-color 120ms, color 120ms, transform 120ms;
}
.game-bar__nav a:active { transform: scale(.94); }
.game-bar__icon { display: block; width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.game-bar__nav a[aria-current="page"] { color: #1a1408; background: linear-gradient(#ecc77f, #c9963f); box-shadow: 0 2px 10px #e0b76c44; }
/* Two Players and How to Play are on the main menu; the rail keeps to six. Options sits at the foot. */
.game-bar__nav a:is([data-route="two-players"], [data-route="how-to-play"]) { display: none; }
.game-bar__nav a[data-route="options"] { margin-top: auto; }
.game-bar__nav a[data-route="home"] { margin-bottom: auto; }
.screen {
  position: fixed; inset: 0 0 0 calc(var(--rail-w) + var(--safe-left)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  padding: max(12px, var(--safe-top)) max(16px, var(--safe-right)) max(12px, var(--safe-bottom)) 16px;
}
.pane__title { font-size: 24px; }
.toast { bottom: calc(14px + var(--safe-bottom)); left: calc(50% + (var(--rail-w) + var(--safe-left)) / 2); }
.button, .chip, .menu-tile, .deck-slot__open { transition: transform 100ms, border-color 120ms; }
:is(.button, .chip, .menu-tile):active { transform: scale(.97); }

/* The main menu on one screen: the art and the name on the left, the modes on the right, Campaign first and widest. */
.screen--home { padding-top: max(10px, var(--safe-top)); padding-bottom: max(10px, var(--safe-bottom)); }
.home {
  height: 100%; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-rows: minmax(0, 1fr) auto; gap: 10px 14px;
}
.home__hero { grid-row: 1 / -1; height: auto; min-height: 0; border-radius: 14px; }
.home__art { opacity: .85; object-position: 50% 12%; }
.home__title { padding: 18px 20px; }
.home__title h1 { font-size: clamp(28px, 8.5vh, 42px); }
.home__title p { font-size: 13px; }
.home__menu { margin: 0; min-height: 0; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); gap: 8px; }
.menu-tile { align-content: center; gap: 2px; padding: 8px 12px; border-radius: 12px; }
.menu-tile strong { font-size: 17px; }
.menu-tile span { font-size: 12px; line-height: 1.25; }
.menu-tile[href="#/campaign"] {
  grid-column: 1 / -1; border-color: #e0b76caa;
  background: linear-gradient(120deg, #3a2d18f0, #1d1a14f0 55%, #161b1ff0), radial-gradient(circle at 85% 40%, #e0b76c33, transparent 60%);
}
.menu-tile[href="#/campaign"] strong { color: var(--game-gold); font-size: 21px; }
.home__decks { margin: 0; color: var(--game-muted); font-size: 12px; }

/* Solo Duel: three duelists a row, each a portrait and a name, then the Duel button. */
.lobby { max-width: none; }
.lobby__pick { margin: 0 0 10px; font-size: 15px; }
.opponents { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 0; }
.opponent { grid-template-rows: auto 1fr auto; gap: 6px; padding: 10px 12px; border-radius: 12px; }
.opponent strong { font-size: 15px; line-height: 1.15; }
.opponent__portrait { width: 48px; height: 48px; border-color: #e0b76c66; }
.opponent__level { font-size: 11.5px; }
.opponent p { font-size: 12px; line-height: 1.35; }
.opponent .button { justify-self: stretch; justify-content: center; margin-top: 2px; padding: 7px 12px; }
.lobby__note { font-size: 13px; }

/* Cards: the card's details beside the grid, sized to the screen's height; the search and filters in two short rows. */
.two-pane { grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); gap: 14px; }
.card-detail { top: 0; padding: 10px; }
.card-detail__face { width: min(100%, 190px); }
.card-browser__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.card-browser__search { flex: 1 1 170px; width: auto; }
.card-browser__selects { flex: 1 1 100%; gap: 6px; }
.card-browser__count { flex: 1 1 100%; }
.card-browser__controls :is(select, input[type="search"]) { padding: 5px 8px; font-size: 13px; }
.card-browser__controls .chip { padding: 4px 10px; font-size: 13px; }
.card-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }

/* Campaign: the three starters side by side, small enough to see whole. */
.campaign__starters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.campaign__starter { padding: 10px; gap: 6px; }
.campaign__starter > :first-child { width: min(150px, 100%); }
.campaign__starter strong { font-size: 18px; }
.campaign__starter p { font-size: 12.5px; }

/* A game, not a web page: no text selection or long-press menus (iOS's "Copy | Look Up", or "Save to Photos" on a card
   picture) except in fields you type in, and no grey flash on each tap. The pages also turn zoom off (their viewport). */
html { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea, select { -webkit-user-select: text; user-select: text; }

/* The deck editor, like Master Duel's: the card's details, your deck, and the library side by side at full height, each
   scrolling on its own; the deck's name and tools in one short bar above. */
.screen--editor { padding-top: max(8px, var(--safe-top)); padding-bottom: max(8px, var(--safe-bottom)); }
.editor { height: 100%; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
.editor__bar { flex-wrap: nowrap; gap: 8px; min-width: 0; }
.editor__bar .back-link { white-space: nowrap; }
.editor__bar .deck-name { flex: 1 1 auto; min-width: 0; padding: 5px 8px; font-size: 17px; }
.editor__bar .pill { font-size: 12px; padding: 2px 8px; }
.editor__tools { flex: none; gap: 6px; }
.editor__tools .button { padding: 5px 10px; font-size: 13px; white-space: nowrap; }
.editor__body {
  grid-template-columns: minmax(150px, 176px) minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px; height: auto; min-height: 0;
}
.editor__body > * { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
.editor__body > .detail-slot { grid-column: auto; }
.editor__body .card-detail { grid-template-columns: 1fr; gap: 4px; padding: 8px; }
.editor__body .card-detail__face { grid-row: auto; width: 100%; }
.editor__body .card-detail__name { font-size: 16px; }
.editor__body .card-detail__type { font-size: 11.5px; }
.editor__body .card-detail__stats { gap: 10px; font-size: 14px; }
.editor__body .card-detail__effect { padding: 7px; font-size: 12px; line-height: 1.4; }
.editor__body .copy-controls { gap: 8px; margin-top: 4px; }
.editor__body .copy-controls__count { min-width: 0; font-size: 12px; }
.editor__body .round-button { width: 30px; height: 30px; font-size: 17px; }
.deck-panel { padding: 8px 10px; }
.deck-panel__head h2 { font-size: 17px; }
.deck-group h3 { margin: 8px 0 4px; font-size: 11.5px; }
.deck-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.deck-tile__copies { font-size: 10px; padding: 0 4px; }
.deck-tile__remove { width: 20px; height: 20px; font-size: 13px; }
.editor__body .card-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 6px; }
.editor__body .grid-tile__action { width: 24px; height: 24px; font-size: 15px; }
.editor__body .grid-tile__badge { font-size: 10px; padding: 0 5px; }
/* The library's filters: search and the card types always; the dropdowns behind a Filters button. */
.card-browser__more { flex: 1 1 100%; }
.card-browser__filters-label {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid #ffffff30; border-radius: 999px;
  color: var(--game-muted); font-size: 13px; cursor: pointer; list-style: none;
}
.card-browser__filters-label::-webkit-details-marker { display: none; }
.card-browser__filters-label::after { content: '▾'; font-size: 11px; }
.card-browser__more[open] > .card-browser__filters-label { color: #1a1408; background: var(--game-gold); border-color: var(--game-gold); }
.card-browser__more[open] > .card-browser__filters-label::after { content: '▴'; }
.card-browser__more > .card-browser__selects { margin-top: 6px; }
/* Hover only where there is a pointer that hovers: on a touch screen the last tapped thing keeps :hover, which turned
   the current rail button's label light on gold (unreadable). */
@media (hover: hover) {
  .game-bar__nav a:not([aria-current="page"]):hover { color: var(--game-ink); background: #ffffff0d; }
  .button:hover { border-color: var(--game-gold); }
  .menu-tile:hover { border-color: var(--game-gold); transform: translateY(-2px); }
  .grid-tile__face:hover { transform: translateY(-3px); }
  .deck-slot__open:hover .deck-slot__name { color: var(--game-gold); }
  .campaign__pull:hover { border-color: var(--game-gold); }
}


/* The Campaign's tabs (Ladder, Goals, Deck, Shop, Save) under the rank, record, and Crowns. */
.campaign__summary { font-size: 15px; }
.campaign__summary .campaign__badge { width: 52px; height: 52px; }
.campaign__tabs {
  position: sticky; top: calc(-1 * max(12px, var(--safe-top))); z-index: 3; display: flex; gap: 4px; margin: 10px 0 12px;
  padding: 4px; border: 1px solid #ffffff1c; border-radius: 999px; background: #0e1214f0; backdrop-filter: blur(6px);
}
.campaign__tab {
  flex: 1; padding: 7px 10px; border: 0; border-radius: 999px; color: var(--game-muted); background: transparent;
  font: 600 14px/1 var(--game-body); cursor: pointer; transition: background-color 120ms, color 120ms;
}
.campaign__tab[aria-selected="true"] { color: #1a1408; background: linear-gradient(#ecc77f, #c9963f); }
.campaign__panel > :first-child { margin-top: 0; }
.campaign__panel .campaign__rank:first-of-type { margin-top: 6px; }