/* Character Draft in pixels: a dark-fantasy 8-bit skin over the game's own
   styles. Loaded last on the game's pages (single player, the party TV and
   the phone), it swaps the paper palette for night purples, blues and
   silver, sets everything in pixel lettering, and frames panels and buttons
   with hand-made pixel borders (the images in pixel/). Layout, behaviour
   and animation all stay with the original stylesheets. */

/* --- Palette and type -------------------------------------------------- */

html[data-theme],
html[data-theme="light"],
html[data-theme="dark"] {
  --paper:       #4a4360;   /* the stone backdrop */
  --paper-warm:  #1d1928;   /* panels */
  --paper-sunk:  #15121e;   /* wells and slots */
  --ink:         #ece9f6;
  --ink-muted:   #b9b3cf;
  --ink-faint:   #857e9e;
  --rule:        #7c7794;
  --rule-strong: #b8b4c9;
  --accent:      #9cc0ff;   /* a cold blue */
  --accent-wash: rgba(110, 150, 240, 0.22);
  --violet:      #b18cff;
  --silver:      #cfcce0;
  --heart:       #e0567f;
  --gold:        #e8c25a;
  --grain: 0;
  --blotch: transparent;

  --font-display: "Pixelify Sans", ui-monospace, monospace;
  --font-hand:    "Pixelify Sans", ui-monospace, monospace;
  --font-gothic:  "Jersey 10", "Pixelify Sans", ui-monospace, monospace;
  --font-text:    "Pixelify Sans", ui-monospace, monospace;

  --radius-blob: 0;
  --radius-soft: 0;

  /* Rules become a pixel line with a diamond at each repeat. */
  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='6' viewBox='0 0 40 6' shape-rendering='crispEdges'%3E%3Crect y='2' width='40' height='2'/%3E%3Crect x='19' y='0' width='2' height='6'/%3E%3Crect x='17' y='1' width='6' height='4'/%3E%3C/svg%3E");

  --frame-panel: url("/character-draft/pixel/panel.svg");
  --frame-card:  url("/character-draft/pixel/card.svg");
  --frame-blue:  url("/character-draft/pixel/panel-blue.svg");
}
/* The dark theme sinks the backdrop to a night sky; panels stay the same. */
html[data-theme="dark"] { --paper: #1f1a2e; }


html { image-rendering: pixelated; }

body {
  background-color: var(--paper);
  /* A faint two-tone dither, like stone. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Crect width='2' height='2' fill='%23000' fill-opacity='.07'/%3E%3Crect x='4' y='4' width='2' height='2' fill='%23000' fill-opacity='.07'/%3E%3Crect x='6' y='0' width='2' height='2' fill='%23fff' fill-opacity='.03'/%3E%3C/svg%3E");
  background-size: 8px 8px;
  font-weight: 400;
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
}
body::before, body::after { display: none; }

/* Pixel corners everywhere; nothing soft or blobby. */
*, *::before, *::after { border-radius: 0 !important; }

/* Blackletter for names, titles and buttons; pixel sans for reading. */
.wordmark, h1, h2, .title, .section-label, .masthead__meta, .btn, .mode__name, .choice__name, .format__name,
.block__name, .edge__team, .final__name, .player__name, .done__title, .verdict__winner, .team__name, .card__name,
.gfb-title, .join__pin, .b8__council-team, .b8__map-name, .b8__banner span, .versus__vs, .bracket__label, .verdict__mvp {
  font-family: var(--font-gothic) !important;
  font-weight: 400 !important;
  font-style: normal !important;
}
em, i, .lede em, .choice__note, .mode__note, .format__note { font-style: normal !important; }
.wordmark, h1, h2, h3, .title, .section-label, .masthead__meta, .btn, .chip span, .money, .price,
.mode__name, .choice__name, .format__name, .block__name, .edge__team, .final__name, .player__name,
.done__title, .verdict__winner, .verdict__label, .judge__status, .hand, .team__name, .card__name {
  font-variation-settings: normal !important;
  letter-spacing: 0.01em;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.95;
  color: var(--silver);
  text-shadow: 3px 3px 0 #110e18, 6px 6px 0 rgba(17, 14, 24, 0.35);
}
.wordmark__mark { color: var(--violet); }
.masthead__meta { color: var(--ink-muted); font-size: 1.6rem; }
.lede, .lede em { color: var(--ink); }
.lede em { color: var(--violet); font-style: normal; }
em { font-style: normal; color: var(--violet); }
.section-label {
  display: inline-block;
  color: #1d1928;
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1.1;
  padding: 0.25rem 1.6rem 0.35rem;
  border: 8px solid transparent;
  border-width: 8px 12px;
  border-image: url("/character-draft/pixel/ribbon.svg") 4 6 fill / 8px 12px stretch;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.35);
}
.section-label::after { display: none !important; }

a { color: var(--accent); }
::selection { background: var(--violet); color: #110e18; }
:focus-visible { outline: 3px solid var(--accent) !important; outline-offset: 3px; }

/* --- Panels ------------------------------------------------------------ */

.mode, .choice__body, .format, .player, .block, .reveal-card, .edge, .war, .arena__card, .arena-strip,
.final__team, .recent__item, .stepper, .verdict, .judge, .roles__team, .chip--wide span,
.side, .team, .card, .bout, .settings, .join, .tv-overlay__box, .vote__btn, .pick__card,
.phone-lot, .dock, .admin-bar, .champion, .aftermath,
.gfb-panel {
  background: transparent !important;
  border: 16px solid transparent !important;
  border-image: var(--frame-panel) 8 fill / 16px stretch !important;
  box-shadow: 6px 6px 0 rgba(17, 14, 24, 0.45) !important;
}
/* Frames replace padding's job at the edge, so tighten the inside a touch. */
.mode, .format, .player, .edge, .war, .side, .team, .card, .bout { padding: 0.5rem 0.7rem; }

/* Chosen, active or winning things glow blue. */
.choice input:checked + .choice__body, .chip--wide input:checked + span, .player--active, .mode--here,
.side--won, .bout--now, .vote__btn[aria-pressed="true"], .team.is-me {
  border-image-source: var(--frame-blue) !important;
}
.side--lost { opacity: 0.55; }

/* Light parchment cards, like a note pinned to the stone. */
.rules, .tv-overlay__body .big-note {
  border: 16px solid transparent;
  border-image: var(--frame-card) 8 fill / 16px stretch;
  color: #1d1928;
  padding: 0.2rem 0.4rem;
  box-shadow: 6px 6px 0 rgba(17, 14, 24, 0.45);
}
.rules em { color: #3b2a6e; }

/* --- Buttons ------------------------------------------------------------ */

.btn, .chip-btn, .stepper__btn, .film__play, .gfb-btn, .b8__btn, .b8__council-skip {
  font-size: 1.35rem;
  line-height: 1;
  color: var(--ink) !important;
  background: transparent !important;
  border: 8px solid transparent !important;
  border-image: url("/character-draft/pixel/plate-dark.svg") 4 fill / 8px stretch !important;
  padding: 0.25rem 0.9rem 0.35rem;
  text-shadow: 2px 2px 0 #110e18;
  transform: none;
  transition: filter 0.12s steps(2);
}
.btn--primary, .btn--big, .gfb-btn--go {
  color: #1d1928 !important;
  border-image-source: url("/character-draft/pixel/plate.svg") !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
}
.btn:hover:not(:disabled), .chip-btn:hover, .stepper__btn:hover, .gfb-btn:hover, .film__play:hover {
  filter: brightness(1.18);
  transform: translate(0, -2px) !important;
}
.btn:active:not(:disabled), .chip-btn:active, .stepper__btn:active, .gfb-btn:active {
  transform: translate(2px, 2px) !important;
  filter: brightness(0.9);
}
.btn--quiet {
  border-image: none !important;
  border: 0 !important;
  color: var(--ink-muted) !important;
  text-decoration: underline 2px;
  text-underline-offset: 5px;
  text-shadow: none;
}
.btn:disabled { opacity: 0.4; filter: grayscale(0.6); }


/* Round chips (the little picks and toggles) become square stone tiles. */
.chip span, .slot, .opt span {
  background: transparent !important;
  border: 6px solid transparent !important;
  border-image: url("/character-draft/pixel/plate-dark.svg") 4 fill / 6px stretch !important;
  color: var(--ink);
}
html.tv .chip, html.phone .chip {
  background: transparent !important;
  border: 6px solid transparent !important;
  border-image: url("/character-draft/pixel/plate-dark.svg") 4 fill / 6px stretch !important;
}
.chip-btn.is-on, .chip--locked,
.chip input:checked + span, .slot--full, .opt input:checked + span {
  border-image-source: url("/character-draft/pixel/plate-blue.svg") !important;
  color: #ffffff;
}

/* --- Fields -------------------------------------------------------------- */

input[type="text"], input[type="password"], input[type="number"], input:not([type]), textarea, select,
.field__input, .gfb-text {
  font-family: var(--font-text);
  color: var(--ink) !important;
  background: transparent !important;
  border: 6px solid transparent !important;
  border-image: url("/character-draft/pixel/slot.svg") 3 fill / 6px stretch !important;
}
.field__label, label { color: var(--ink-muted); }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }

/* --- Pictures ------------------------------------------------------------ */

.portrait, .pic {
  background: var(--paper-sunk) !important;
  box-shadow: 0 0 0 2px #110e18, 0 0 0 4px #9995ae, 0 0 0 6px #110e18, 5px 5px 0 6px rgba(17, 14, 24, 0.4) !important;
  image-rendering: auto;
}
.portrait img, .pic img { image-rendering: auto; }
.portrait__badge, .pic__badge { box-shadow: 0 0 0 2px #110e18, 0 0 0 3px #cfcce0 !important; border: 0 !important; }
.portrait__letters, .pic__letters { color: var(--ink-faint); font-family: var(--font-display); }

/* --- Bars, timers and money -------------------------------------------------- */

.judge__bar, .bar, .film__progress, .b8__bar {
  background: #110e18 !important;
  box-shadow: 0 0 0 2px #110e18, 0 0 0 4px #9995ae;
}
.judge__bar > *, .bar > span, .film__bar { background: linear-gradient(#ff9ab8 0 30%, var(--heart) 30% 80%, #9c2c52 80%) !important; }
.money { color: var(--gold); text-shadow: 2px 2px 0 #110e18; }
.timer { color: var(--silver); text-shadow: 2px 2px 0 #110e18; }
.timer--low { color: var(--heart); }

/* --- Corner buttons: home, sound, theme, feedback -------------------------------- */

.home-button, .theme-toggle, .gfb-button {
  background: transparent !important;
  border: 8px solid transparent !important;
  border-image: url("/character-draft/pixel/plate-dark.svg") 4 fill / 8px stretch !important;
  color: var(--silver) !important;
  box-shadow: 4px 4px 0 rgba(17, 14, 24, 0.45);
}
.home-button:hover, .theme-toggle:hover, .gfb-button:hover, .gfb-button:focus-visible {
  transform: translate(0, -2px) !important;
  filter: brightness(1.2);
}
.home-button svg, .theme-toggle svg, .gfb-button svg { stroke-width: 2.4; shape-rendering: crispEdges; }

/* The feedback panel, in the same stone. */
.gfb-panel { color: var(--ink) !important; padding: 0.4rem 0.6rem 0.6rem !important; }
.gfb-title { font-family: var(--font-gothic) !important; font-size: 2.1rem !important; color: #ffffff; }
.gfb-note, .gfb-status { color: var(--ink-muted) !important; font-style: normal !important; }
.gfb-close { color: var(--silver) !important; font-family: var(--font-text); }

/* --- Battle and film frames ------------------------------------------------- */

.b8, .battle-view__inner, .film__screen, .tv-battle, .tv-film {
  box-shadow: 0 0 0 3px #110e18, 0 0 0 6px #9995ae, 0 0 0 9px #110e18, 8px 8px 0 9px rgba(17, 14, 24, 0.45) !important;
}
.battle-view::backdrop { background: rgba(17, 14, 24, 0.7); }

/* The party TV's big headings and the phone's notes. */
.title { font-family: var(--font-display); font-weight: 400; color: var(--silver); text-shadow: 3px 3px 0 #110e18; }
.accent { color: var(--violet) !important; }
.hand { font-family: var(--font-hand); color: var(--ink-muted); }
.join__qr { background: #ffffff !important; box-shadow: 0 0 0 4px #110e18, 0 0 0 8px #9995ae, 0 0 0 10px #110e18; }
.join__pin { font-family: var(--font-display); color: var(--silver); text-shadow: 4px 4px 0 #110e18; }

/* Keep motion where the originals had it, but no smooth rotations on cards. */
.choice:hover .choice__body { transform: translate(0, -2px) !important; }
html.tv .chip--locked, html.phone .chip--locked { border-image-source: url("/character-draft/pixel/plate-blue.svg") !important; }

/* Titles: a chunky pixel face, large and bright white so they read at a glance. */
.wordmark, h1, h2, .title, .mode__name, .choice__name, .format__name, .block__name, .edge__team, .final__name,
.player__name, .done__title, .verdict__winner, .team__name, .card__name, .b8__council-team, .b8__map-name, .verdict__mvp, .join__pin {
  color: #ffffff !important;
  text-shadow: 2px 2px 0 #110e18, 4px 4px 0 rgba(17, 14, 24, 0.35);
  letter-spacing: 0.03em;
  line-height: 1.05;
}
.wordmark { font-size: clamp(4rem, 13vw, 7.5rem); text-shadow: 4px 4px 0 #110e18, 8px 8px 0 rgba(17, 14, 24, 0.35); }
.mode__name, .choice__name, .format__name, .player__name, .edge__team, .final__name, .team__name, .card__name { font-size: 1.75rem !important; }
.block__name { font-size: clamp(2.6rem, 8vw, 4.2rem) !important; }
.title--xl { font-size: clamp(4rem, 9vw, 7rem) !important; }
.title--lg { font-size: clamp(3rem, 6vw, 5rem) !important; }
.title--md { font-size: clamp(2.2rem, 4vw, 3.2rem) !important; }
.section-label { font-size: 2.2rem; letter-spacing: 0.04em; color: #15121e; }
.btn { font-size: 1.6rem; letter-spacing: 0.03em; }
.masthead__meta { font-size: 1.4rem; color: #ece9f6; }
.wordmark__mark { color: var(--violet) !important; }
.section-label {
  color: #ffffff !important;
  border-image: url("/character-draft/pixel/plate-blue.svg") 4 fill / 8px stretch !important;
  border-width: 8px !important;
  padding: 0.1rem 1.1rem 0.25rem !important;
  text-shadow: 2px 2px 0 #110e18 !important;
}
.choice__name, .format__name { font-size: 1.5rem !important; }

/* --- Character select ----------------------------------------------------
   Teams waiting to fight are laid out like a fighting game's select screen:
   five across, each portrait in a blue bezel, with name, source and tagline
   beneath, on a rail that runs behind the row. */

.finals { grid-template-columns: 1fr !important; }
.teams { grid-template-columns: 1fr !important; }
.select {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.1rem 0.8rem;
  margin: 0.8rem 0 0.4rem;
  padding: 0;
  position: relative;
}
/* A short rail joins each bezel to the next, as on a select screen. */
.select__frame { position: relative; }
.select__tile + .select__tile .select__frame::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  width: 0.8rem;
  height: 10px;
  transform: translateY(-50%);
  background: linear-gradient(#110e18 0 2px, #9cc0ff 2px 4px, #6f8fe0 4px 7px, #3d55a3 7px 8px, #110e18 8px 10px);
}
.select__tile:nth-child(5n + 1) .select__frame::before { display: none; }
.select__tile {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  text-align: center;
  gap: 0.15rem;
  min-width: 0;
}
.select__frame {
  display: block;
  width: 100%;
  border: 12px solid transparent;
  border-image: var(--frame-blue) 8 fill / 12px stretch;
  box-shadow: 5px 5px 0 rgba(17, 14, 24, 0.45);
  margin-bottom: 0.35rem;
}
.select__frame .portrait, .select__frame .pic, .select__frame .cpic {
  display: block;
  width: 100% !important;
  aspect-ratio: 1 / 1;
  box-shadow: none !important;
}
.select__frame .cpic .pic { aspect-ratio: 1 / 1; }
.select__frame .portrait img, .select__frame .pic img { object-position: center 15%; }
.select__frame .portrait--contain img { object-position: center; }
.select__name {
  font-family: var(--font-gothic);
  font-size: 1.35rem;
  line-height: 1;
  color: #ffffff;
  text-shadow: 2px 2px 0 #110e18;
  overflow-wrap: anywhere;
}
.select__world { font-size: 0.78rem; line-height: 1.2; color: var(--ink-muted); }
.select__tag { font-size: 0.82rem; line-height: 1.25; color: #c9b2ff; }
.select__tile .price { font-family: var(--font-text); font-size: 0.9rem; color: var(--gold); }
.select__tile .cond { font-size: 0.8rem; color: var(--heart); }
html.tv .select__name { font-size: 1.7rem; }
html.tv .select__world { font-size: 1rem; }
html.tv .select__tag { font-size: 1.05rem; }
@media (max-width: 560px) {
  .select { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .select__tile:nth-child(5n + 1) .select__frame::before { display: block; }
  .select__tile:nth-child(3n + 1) .select__frame::before { display: none; }
  .select__name { font-size: 1.15rem; }
}
/* Placeholder letters only when there's no picture (see-through renders showed them). */
.portrait:has(img) .portrait__letters, .pic:has(img) .pic__letters { visibility: hidden; }

/* --- Readability ----------------------------------------------------------
   Reading text in VT323, a crisp terminal face, a size up; muted and faint
   text brighter so it holds up on the dark panels. */

html[data-theme], html[data-theme="light"], html[data-theme="dark"] {
  --font-text: "VT323", "Pixelify Sans", ui-monospace, monospace;
  --font-hand: "VT323", "Pixelify Sans", ui-monospace, monospace;
  --font-display: "VT323", "Pixelify Sans", ui-monospace, monospace;
  --ink: #ffffff;
  --ink-muted: #ddd8f0;
  --ink-faint: #b3acd0;
}
html { font-size: 118%; }
body { font-size: 1.15rem; line-height: 1.4; letter-spacing: 0.01em; }
p, li, label, .lede, .choice__note, .mode__note, .format__note, .block__note, .rules, .muted, .field__label,
.select__world, .select__tag, .war, .verdict__fight, .roles__list, .edge { letter-spacing: 0.015em; }
.lede { font-size: 1.35rem; line-height: 1.35; }
.choice__note, .mode__note, .format__note { color: #e4dff5 !important; font-size: 1.05rem; line-height: 1.25; }
.select__world { color: #e4dff5; font-size: 0.95rem; }
.select__tag { color: #d9c8ff; font-size: 1rem; }
html.tv .select__world { font-size: 1.15rem; }
html.tv .select__tag { font-size: 1.25rem; }
.money { font-family: var(--font-gothic); }
.rules { color: #15121e; font-size: 1.1rem; }
.rules em, .rules a { color: #2a1e66; }
.field__input, input, textarea, select { font-size: 1.25rem; }

/* --- Clear selection --------------------------------------------------------
   Anything chosen in a group of options (worlds, passes, judge, team size,
   the TV's settings) lights up: a bright frame, a deep blue fill, white text
   and a tick in the corner. Unchosen options sit back a little. */

.choice__body { position: relative; transition: filter 0.12s steps(2); }
.choices:has(input:checked) .choice input:not(:checked) + .choice__body { filter: brightness(0.82) saturate(0.8); }
.choice input:checked + .choice__body,
.chip--wide input:checked + span {
  border-image-source: url("/character-draft/pixel/panel-on.svg") !important;
  box-shadow: 0 0 0 3px #9cc0ff, 6px 6px 0 3px rgba(17, 14, 24, 0.5) !important;
  filter: none !important;
}
.choice input:checked + .choice__body .choice__name { color: #ffffff !important; }
.choice input:checked + .choice__body::after,
.chip--wide input:checked + span::after,
.mode--here::after {
  content: "";
  position: absolute;
  top: -14px;
  right: -14px;
  width: 26px;
  height: 26px;
  background: url("/character-draft/pixel/tick.svg") center / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.chip--wide span { position: relative; }
.mode--here { position: relative; border-image-source: url("/character-draft/pixel/panel-on.svg") !important; }

.chip input:checked + span, .opt input:checked + span, .chip-btn.is-on, .slot--full {
  border-image-source: url("/character-draft/pixel/plate-on.svg") !important;
  color: #ffffff !important;
  text-shadow: 2px 2px 0 #0b0a14;
  box-shadow: 0 0 0 2px #9cc0ff;
}
.chip input:not(:checked) + span, .opt input:not(:checked) + span { color: #ddd8f0; }
.opt input:checked + span::before, .chip input:checked + span::before { content: "✓ "; }
.choice input:focus-visible + .choice__body, .chip input:focus-visible + span, .opt input:focus-visible + span {
  outline: 3px dashed #ffffff !important; outline-offset: 4px;
}

/* --- Brighter, fuller-width reading (feedback) -----------------------------
   Purples a notch brighter, and the judge's explanations use the whole width
   the two teams take, rather than a narrow column. */
html[data-theme], html[data-theme="light"], html[data-theme="dark"] { --violet: #d4bdff; --accent: #b4d0ff; }
em, .lede em, .accent { color: #e0d0ff !important; }
.select__tag { color: #e4d6ff; }
.verdict, .verdict__fight, .verdict__turn, .verdict__mvp, .verdict__line, .verdict__reasoning p, .reasoning__fight p,
.tv-overlay__body .big-note, .verdict .big-note { max-width: none !important; }
.verdict__fight p, .verdict__reasoning p, .reasoning__fight p, .big-note { font-size: 1.2rem; line-height: 1.4; color: #ffffff; }
html.phone .big-note { font-size: 1.3rem; }

/* The arena strip: kicker, name and description each on their own line,
   so the big pixel name can't ride up over the text around it. */
.strip p > span, .arena-strip p > span { display: block; }
.strip p br { display: none; }
.strip .title, .arena-strip__name { font-size: clamp(1.6rem, 2.6vw, 2.3rem) !important; line-height: 1.1 !important; margin: 0.15rem 0 0.25rem; }
.strip .muted, .arena-strip__terrain { line-height: 1.3; }
.strip img, .arena-strip__img { image-rendering: auto; }