/* Arcade theme (docs/retro-theme-scope.md §4, docs/arcade-plan.md).
 *
 * Loaded on every page by ui/theme.py. Every page rule is scoped under
 * body.theme-arcade, so the Clean theme is untouched; only the new pixel
 * components (.pixel-*, .seg-bar) have a base look that Clean uses too.
 *
 * Cascade notes. NiceGUI declares the layers
 *   theme, base, quasar, nicegui, components, utilities, overrides, quasar_importants
 * and this file is unlayered, so its normal declarations beat Quasar and
 * Tailwind whatever their specificity. Quasar's color utilities (.bg-primary,
 * .text-white...) are !important in the last layer, and an unlayered !important
 * loses to them; only !important in the first layer (theme) wins. So colors
 * go through Quasar's variables where they can, and the few remaining
 * overrides sit in "@layer theme" at the end of this file.
 *
 * Contrast (WCAG AA) of every text/background pair used here is checked by
 * tests/test_theme.py against the tokens below; keep the two in step.
 */

/* --- fonts (self-hosted, SIL OFL 1.1; see ASSETS.md) --------------------------- */

@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/PressStart2P-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/PressStart2P-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "VT323";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/VT323-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "VT323";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/VT323-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Numbers stay in the readable font everywhere (scope §3.7): inside pixel-font
 * text (titles, buttons, "LV 7"), digits and the marks around them come from
 * VT323, scaled up to Press Start 2P's height. */
@font-face {
  font-family: "Arcade Digits";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/VT323-latin.woff2") format("woff2");
  unicode-range: U+0025, U+002B-002E, U+0030-003A;
  size-adjust: 165%;
}

/* --- tokens ------------------------------------------------------------------------ */

/* The pixel themes share every rule below and differ only in these color
 * tokens, all from Endesga 32 (game/config.py lists them; the user picks one in
 * Ajustes). This block is Neón, the default; the others override it below.
 * Roles: bg page, panel cards and header, text body text and borders, muted
 * secondary text, accent titles and highlights, success green actions,
 * danger red icons and borders, danger-deep filled red buttons (white text),
 * danger-text red text, raised hover and empty bar blocks, on-fill text on
 * accent and success fills. */
body.theme-arcade {
  --arc-bg: #3e2731;
  --arc-panel: #181425;
  --arc-text: #ead4aa;
  --arc-accent: #2ce8f5;
  --arc-success: #63c74d;
  --arc-danger: #e43b44;
  --arc-raised: #733e39;
  --arc-muted: #8b9bb4;
  /* White on --arc-danger is only 4.19:1 (docs/arcade-plan.md D5), so filled red
   * buttons use the deeper red and red text the lighter one. */
  --arc-danger-deep: #a22633;
  --arc-danger-text: #f6757a;
  --arc-white: #ffffff;
  --arc-on-fill: #181425;
  --arc-shadow: rgb(0 0 0 / 0.55);

  --arc-font-pixel: "Arcade Digits", "Press Start 2P", ui-monospace, monospace;
  --arc-font-body: "VT323", ui-monospace, monospace;
  --arc-border: 3px;

  background: var(--arc-bg);
  color: var(--arc-text);
  font-family: var(--arc-font-body);
  font-size: 20px;
  line-height: 1.2;
  font-synthesis: none; /* VT323 has no bold: no smeared fake bold */
  letter-spacing: 0;
}

/* Arcade: the scope's original palette, near-black purple and orange. */
body.theme-arcade.palette-arcade {
  --arc-bg: #181425;
  --arc-panel: #262b44;
  --arc-text: #c0cbdc;
  --arc-accent: #feae34;
  --arc-raised: #3a4466;
  --arc-muted: #8b9bb4;
}

/* Ámbar: warm browns and cream, the least blue light. */
body.theme-arcade.palette-ambar {
  --arc-bg: #181425;
  --arc-panel: #3e2731;
  --arc-text: #ead4aa;
  --arc-accent: #feae34;
  --arc-raised: #733e39;
  --arc-muted: #e4a672;
}

/* Papel: light, for bright gyms. Quasar runs in light mode (arcade-light). */
body.theme-arcade.palette-papel {
  --arc-bg: #ead4aa;
  --arc-panel: #ffffff;
  --arc-text: #262b44;
  --arc-accent: #124e89;
  --arc-success: #265c42;
  --arc-danger: #a22633;
  --arc-danger-text: #a22633;
  --arc-raised: #c0cbdc;
  --arc-muted: #3a4466;
  --arc-on-fill: #ffffff;
  --arc-shadow: rgb(38 43 68 / 0.35);
}

/* Quasar's brand colors, so its components follow the palette. NiceGUI sets
 * them inline on <body>, so they are redefined on its children (the app, and
 * the menus, dialogs and toasts Quasar adds next to it). */
body.theme-arcade > * {
  --q-primary: var(--arc-accent);
  --q-secondary: var(--arc-muted);
  --q-accent: var(--arc-accent);
  --q-positive: var(--arc-success);
  --q-negative: var(--arc-danger);
  --q-warning: var(--arc-accent);
  --q-info: var(--arc-muted);
  --q-dark: var(--arc-panel);
  --q-dark-page: var(--arc-bg);
}

/* No rounded corners anywhere in Arcade (Quasar and Tailwind alike). */
body.theme-arcade *,
body.theme-arcade *::before,
body.theme-arcade *::after {
  border-radius: 0;
}

body.theme-arcade ::selection {
  background: var(--arc-accent);
  color: var(--arc-on-fill);
}

body.theme-arcade :focus-visible {
  outline: 2px solid var(--arc-accent);
  outline-offset: 2px;
}

/* --- type ---------------------------------------------------------------------------- */

/* VT323 reads small: Tailwind's sizes scale up (icons keep theirs). */
body.theme-arcade .text-xs:not(.q-icon) { font-size: 16px; line-height: 1.15; }
body.theme-arcade .text-sm:not(.q-icon) { font-size: 18px; line-height: 1.15; }
body.theme-arcade .text-base:not(.q-icon) { font-size: 20px; }
body.theme-arcade .text-lg:not(.q-icon) { font-size: 22px; }
body.theme-arcade .text-xl:not(.q-icon) { font-size: 24px; }
body.theme-arcade .text-2xl:not(.q-icon) { font-size: 28px; }
body.theme-arcade .text-3xl:not(.q-icon) { font-size: 32px; }

/* Titles (the pages use text-2xl/xl bold and text-lg semibold or bold for
 * them) become Press Start 2P, 10-14 px. */
body.theme-arcade :is(.text-2xl.font-bold, .text-xl.font-bold, .text-lg.font-semibold, .text-lg.font-bold):not(.q-icon),
body.theme-arcade .pixel-title {
  font-family: var(--arc-font-pixel);
  font-size: 12px;
  line-height: 1.5;
  color: var(--arc-accent);
  overflow-wrap: anywhere;
}
body.theme-arcade .text-2xl.font-bold:not(.q-icon),
body.theme-arcade .pixel-title--1 {
  font-size: 14px;
}

/* Stat values ("82.1 kg", a calculator's result): numbers, so the readable
 * font, large and highlighted. */
body.theme-arcade .text-xl.font-semibold:not(.q-icon) {
  font-size: 30px;
  line-height: 1;
  color: var(--arc-accent);
}
body.theme-arcade .text-4xl.font-bold:not(.q-icon) {
  font-size: 48px;
  line-height: 1;
  color: var(--arc-accent);
}
body.theme-arcade .text-6xl:not(.q-icon) {
  font-size: 80px;
  line-height: 1;
}

body.theme-arcade :is(.font-bold, .font-semibold, .font-medium) {
  font-weight: 400;
}

/* Tailwind's grays (the pages' text scale) onto the palette. */
body.theme-arcade :is(.text-gray-900, .text-gray-800, .text-gray-700) { color: var(--arc-text); }
body.theme-arcade :is(.text-gray-600, .text-gray-500, .text-gray-400) { color: var(--arc-muted); }
body.theme-arcade .text-blue-600 { color: var(--arc-accent); }
body.theme-arcade .text-green-600 { color: var(--arc-success); }
body.theme-arcade :is(.text-amber-700, .text-amber-900) { color: var(--arc-accent); }
body.theme-arcade .text-amber-900 { color: var(--arc-text); }
body.theme-arcade :is(.text-red-500, .text-red-600):not(.q-icon) { color: var(--arc-danger-text); }
body.theme-arcade .q-icon:is(.text-red-500, .text-red-600) { color: var(--arc-danger); }

/* Inset wells (list rows, notes): the page background inside a panel. */
body.theme-arcade :is(.bg-slate-100, .bg-slate-800) {
  background: var(--arc-bg);
  border: 2px solid var(--arc-raised);
}
body.theme-arcade .bg-amber-50 {
  background: var(--arc-bg);
  border: 2px solid var(--arc-accent);
}
body.theme-arcade .bg-gray-900 { background: var(--arc-text); }
body.theme-arcade .bg-gray-400 { background: var(--arc-muted); }

/* --- header ---------------------------------------------------------------------------- */

body.theme-arcade .q-header {
  border-bottom: var(--arc-border) solid var(--arc-text);
  box-shadow: 0 4px 0 var(--arc-shadow);
}
body.theme-arcade .q-header .text-base.font-bold {
  font-family: var(--arc-font-pixel);
  font-size: 10px;
  color: var(--arc-accent);
}

/* --- panels: cards, dialogs, menus ---------------------------------------------------- */

body.theme-arcade .q-card,
body.theme-arcade .pixel-panel {
  background: var(--arc-panel);
  color: var(--arc-text);
  border: var(--arc-border) solid var(--arc-text);
  box-shadow: 4px 4px 0 var(--arc-shadow);
}
body.theme-arcade .q-menu {
  background: var(--arc-panel);
  color: var(--arc-text);
  border: var(--arc-border) solid var(--arc-text);
  box-shadow: 4px 4px 0 var(--arc-shadow);
}
body.theme-arcade .q-dialog__backdrop {
  background: rgb(24 20 37 / 0.8);
}
body.theme-arcade .q-tooltip {
  background: var(--arc-bg);
  color: var(--arc-text);
  border: 2px solid var(--arc-text);
  font-family: var(--arc-font-body);
  font-size: 18px;
}
body.theme-arcade .q-separator {
  background: var(--arc-raised);
}
body.theme-arcade .q-item {
  color: var(--arc-text);
}
body.theme-arcade .q-item__label--caption {
  color: var(--arc-muted);
}

/* The day being trained (ui/pages/training.py) and the routine being followed
 * (ui/components/routine_card.py): a colored frame instead of a tint. */
body.theme-arcade .exercise-track > .q-card.exercise-done {
  background: var(--arc-panel);
  border-color: var(--arc-success);
}
body.theme-arcade .q-card.routine-current {
  background: var(--arc-panel);
  border-color: var(--arc-accent);
}

/* --- buttons ------------------------------------------------------------------------- */

body.theme-arcade .q-btn {
  font-family: var(--arc-font-pixel);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0;
}
/* Content drawn inside a button (a section header, a list row: NiceGUI
 * labels are divs, Quasar's own label is span.block) keeps the readable font;
 * a title among it still gets the pixel font above. */
body.theme-arcade .q-btn .q-btn__content div {
  font-family: var(--arc-font-body);
  text-transform: none;
}
/* Toggle groups (kg | lb): short choices in the readable font; the chosen one in accent. */
body.theme-arcade .q-btn-toggle .q-btn {
  font-family: var(--arc-font-body);
  font-size: 18px;
  text-transform: none;
  box-shadow: none;
}
/* Wrap between words only: "kg" must not break into "k g". */
body.theme-arcade .q-btn-toggle .q-btn .q-btn__content .block {
  overflow-wrap: normal;
}
body.theme-arcade .q-btn .q-btn__content .block {
  overflow-wrap: break-word;
}
/* Filled buttons: hard offset shadow, and they press down by as much. */
body.theme-arcade :is(.q-btn--unelevated, .q-btn--standard, .q-btn--outline, .pixel-btn) {
  box-shadow: 3px 3px 0 var(--arc-shadow);
}
body.theme-arcade :is(.q-btn--unelevated, .q-btn--standard, .q-btn--outline, .pixel-btn):active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--arc-shadow);
}
body.theme-arcade .q-btn--standard::before {
  box-shadow: none;
}
body.theme-arcade .q-btn--outline::before {
  border-width: 2px;
}
body.theme-arcade .q-btn--flat:active {
  transform: translate(1px, 1px);
}
body.theme-arcade .q-btn.disabled {
  color: var(--arc-muted);
}

/* --- form fields ---------------------------------------------------------------------- */

body.theme-arcade .q-field {
  font-family: var(--arc-font-body);
  font-size: 20px;
  min-width: 0; /* VT323 runs wider than Roboto: let fields shrink in tight rows */
}
body.theme-arcade :is(.q-field__control-container, .q-field__native) {
  min-width: 0;
}
body.theme-arcade .q-select .q-field__native > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.theme-arcade :is(.q-field__native, .q-field__input, .q-field__prefix, .q-field__suffix) {
  font-family: var(--arc-font-body);
  font-size: 22px;
  color: var(--arc-text);
}
body.theme-arcade .q-field__label {
  font-family: var(--arc-font-body);
  font-size: 18px;
  color: var(--arc-muted);
}
body.theme-arcade .q-field--dense .q-field__label {
  font-size: 16px;
}
body.theme-arcade .q-field--outlined .q-field__control::before {
  border: 2px solid var(--arc-muted);
}
body.theme-arcade .q-field--outlined.q-field--highlighted .q-field__control::after {
  border-width: 2px;
}
body.theme-arcade :is(.q-field--standout, .q-field--filled) .q-field__control {
  background: var(--arc-bg);
}
body.theme-arcade .q-field__bottom {
  font-size: 16px;
}
body.theme-arcade .q-field__marginal {
  color: var(--arc-muted);
}

/* Toggles, checkboxes, radios: square. */
body.theme-arcade .q-toggle__track {
  background: var(--arc-raised);
  opacity: 1;
}
body.theme-arcade .q-toggle__thumb::after {
  background: var(--arc-text);
  box-shadow: none;
}
body.theme-arcade .q-toggle__inner--truthy .q-toggle__thumb::after {
  background: currentColor;
}
body.theme-arcade :is(.q-toggle__label, .q-checkbox__label, .q-radio__label) {
  font-size: 20px;
}

/* Badges, chips, avatars, tabs. */
body.theme-arcade :is(.q-badge, .q-chip) {
  font-family: var(--arc-font-body);
  font-size: 16px;
  line-height: 1.1;
}
body.theme-arcade .q-tab__label {
  font-family: var(--arc-font-pixel);
  font-size: 10px;
}
body.theme-arcade .q-expansion-item__container > .q-item {
  font-size: 20px;
}

/* Quasar's progress bars as 10 discrete blocks (the segmented_bar look). */
body.theme-arcade .q-linear-progress {
  height: 12px;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent calc(10% - 2px) 10%);
  mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent calc(10% - 2px) 10%);
}
body.theme-arcade .q-linear-progress__track {
  background: var(--arc-raised);
  opacity: 1;
}

/* Toasts: a panel with a colored frame. */
body.theme-arcade .q-notification {
  border: var(--arc-border) solid var(--arc-text);
  box-shadow: 4px 4px 0 var(--arc-shadow);
  font-family: var(--arc-font-body);
  font-size: 20px;
}
body.theme-arcade .q-notification.bg-positive { border-color: var(--arc-success); }
body.theme-arcade .q-notification.bg-negative { border-color: var(--arc-danger); }
body.theme-arcade .q-notification.bg-warning { border-color: var(--arc-accent); }

/* --- pixel icons (Pixelarticons, mapped in ui/theme_icons.py) ------------------------ */

body.theme-arcade .q-icon.pxi {
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--pxi) center / contain no-repeat;
  mask: var(--pxi) center / contain no-repeat;
}

/* --- pixel components (ui/components/pixel.py): base look, also used by Clean ------ */

.seg-bar {
  display: flex;
  gap: 2px;
  width: 100%;
  height: 12px;
}
.seg-bar__seg {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 2px;
  background: rgb(128 128 128 / 0.25);
}
.seg-bar__seg--on {
  background: var(--seg-color, var(--q-positive, #21ba45));
}
.pixel-title {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
}
.pixel-title--1 {
  font-size: 1.5rem;
}

body.theme-arcade .seg-bar {
  gap: 2px;
}
body.theme-arcade .seg-bar__seg {
  background: var(--arc-raised);
}
body.theme-arcade .seg-bar__seg--on {
  background: var(--seg-color, var(--arc-success));
}

/* The mascot's speech bubble (ui/components/mascot_dialog.py): a framed box
 * with a stepped pixel tail pointing at the mascot on its left. */
body.theme-arcade .pixel-bubble {
  position: relative;
  padding: 8px 10px;
  background: var(--arc-bg);
  color: var(--arc-text);
  border: var(--arc-border) solid var(--arc-text);
  box-shadow: 3px 3px 0 var(--arc-shadow);
}
body.theme-arcade .pixel-bubble::before {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  left: -9px;
  width: 6px;
  height: 12px;
  background: var(--arc-text);
  box-shadow: -3px 3px 0 0 var(--arc-text);
}

/* Choice chips (ui/components/pixel.py ChoiceChips): square, framed, long
 * labels wrap instead of being cut. */
body.theme-arcade .pixel-chip {
  height: auto;
  min-height: 36px;
  border-radius: 0;
  font-size: 18px;
}
body.theme-arcade .pixel-chip.q-chip--outline {
  border-width: 2px;
}
body.theme-arcade .pixel-chip .q-chip__content {
  white-space: normal;
}
body.theme-arcade .pixel-chip .q-chip__icon {
  color: inherit; /* the check of a chosen chip: the color of its text */
}

/* --- CRT scanlines (off by default; Ajustes) ------------------------------------------ */

body.theme-arcade.arcade-crt::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.22) 0 1px, transparent 1px 3px);
}

/* --- reduced motion ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  body.theme-arcade *,
  body.theme-arcade *::before,
  body.theme-arcade *::after {
    animation: none !important;
    transition: none !important;
  }
  body.theme-arcade.arcade-crt::after {
    display: none;
  }
}

/* --- overrides of Quasar's !important color utilities (see the note at the top) ------- */

@layer theme {
  body.theme-arcade .q-header {
    background: var(--arc-panel) !important;
    color: var(--arc-text) !important;
  }
  body.theme-arcade .q-header .q-btn.text-white {
    color: var(--arc-text) !important;
  }
  /* Primary actions are red (scope §4), white text on the deep red. */
  body.theme-arcade .q-btn.bg-primary,
  body.theme-arcade :is(.q-btn.bg-red, .q-btn.bg-negative) {
    background: var(--arc-danger-deep) !important;
    color: var(--arc-white) !important;
  }
  body.theme-arcade .q-btn-toggle .q-btn.bg-primary {
    background: var(--arc-accent) !important;
    color: var(--arc-on-fill) !important;
  }
  /* Text on the accent and success fills. */
  body.theme-arcade :is(.bg-primary, .bg-positive, .bg-amber, .bg-warning):not(.q-btn.bg-primary, .q-header, .q-notification) {
    color: var(--arc-on-fill) !important;
  }
  body.theme-arcade .q-btn.bg-positive {
    background: var(--arc-success) !important;
    color: var(--arc-on-fill) !important;
  }
  /* Red labels and messages: the lighter red; red icons keep the scope's red. */
  body.theme-arcade :is(.text-red, .text-negative):not(.q-icon) {
    color: var(--arc-danger-text) !important;
  }
  body.theme-arcade .q-btn:is(.text-red, .text-negative) .q-icon,
  body.theme-arcade .q-icon:is(.text-red, .text-negative) {
    color: var(--arc-danger) !important;
  }
  /* Toasts: panel background, palette text, frame colored by type. */
  body.theme-arcade .q-notification {
    background: var(--arc-panel) !important;
    color: var(--arc-text) !important;
  }
  body.theme-arcade .q-notification .q-icon { color: var(--arc-text) !important; }
}