/* Guessing-game revamp: the same GTA box-art look as css/home-revamp.css (outlined type, black plates with a
   white gutter, hard shadows), for the character / vehicle / mission / quote pages and their infinite modes.
   Scoped to body.gta-game and layered over styles.css, which is untouched: remove the game-revamp.css <link>
   from a page to get its old look back. */

@import url("modal-revamp.css?v=21");

body.gta-game {
  --gta-ink: #000;
  --gta-paper: #f4f1e8;
  --gta-outline: -2px -2px 0 var(--gta-ink), 2px -2px 0 var(--gta-ink), -2px 2px 0 var(--gta-ink), 2px 2px 0 var(--gta-ink);
  --gta-plate: 0 0 0 2px var(--gta-paper), 6px 7px 0 2px rgba(0, 0, 0, 0.7);
  --gta-fill: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #000));
}

/* Backdrop and header, as on the home page but more compact. */
body.gta-game .page-bg {
  background:
    radial-gradient(ellipse 70% 45% at 50% -5%, rgba(var(--accent-rgb), 0.3), transparent 60%),
    linear-gradient(180deg, #050505 0%, var(--bg-deep) 38%, #050505 100%);
}

body.gta-game .page-bg::after {
  opacity: 0.5;
  background-image: radial-gradient(rgba(var(--accent-rgb), 0.5) 1px, transparent 1.6px);
  background-size: 9px 9px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
}

body.gta-game .site-header {
  background: transparent;
  border-top: 6px solid var(--accent);
  border-bottom: 0;
  padding: 22px 20px 10px;
}

body.gta-game .brand {
  gap: 9px;
}

body.gta-game .star {
  width: 18px;
  height: 18px;
  fill: var(--accent);
  stroke: var(--gta-ink);
  stroke-width: 2.5;
  paint-order: stroke;
  stroke-linejoin: round;
  filter: drop-shadow(2px 2px 0 var(--gta-ink));
}

body.gta-game .brand__word {
  font-size: clamp(3rem, 7vw, 4.6rem);
  letter-spacing: 0.04em;
  line-height: 0.85;
  color: var(--gta-paper);
  -webkit-text-stroke: 7px var(--gta-ink);
  paint-order: stroke fill;
  text-shadow: 5px 6px 0 var(--gta-ink);
  transform: rotate(-2deg);
}

/* Page title and panel headings: mission-title type. */
body.gta-game .mode-page h1 {
  color: var(--accent);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: var(--gta-outline), 4px 5px 0 var(--gta-ink);
}

body.gta-game .clue-board h2,
body.gta-game .stat-board__label,
body.gta-game .quote-answer__label,
body.gta-game .quote-guess h2,
body.gta-game .mission-clue__label {
  color: var(--accent);
  text-shadow: 2px 3px 0 var(--gta-ink);
}

/* Guess box: a plate input with a chunky button. */
body.gta-game .guess-form {
  gap: 16px;
}

body.gta-game .guess-combobox input {
  border: 3px solid var(--gta-ink);
  border-radius: 6px;
  background: #0a0a0a;
  box-shadow: var(--gta-plate);
  font-size: 1.12rem;
  font-weight: 500;
}

body.gta-game .guess-combobox input:focus {
  outline: 0;
  border-color: var(--gta-ink);
  box-shadow:
    0 0 0 2px var(--accent),
    6px 7px 0 2px var(--accent);
}

body.gta-game .guess-list {
  top: calc(100% + 10px);
  border: 3px solid var(--gta-ink);
  border-radius: 6px;
  background: #0a0a0a;
  box-shadow: var(--gta-plate);
}

body.gta-game .guess-option {
  border-radius: 3px;
  font-weight: 500;
}

body.gta-game .guess-option.is-active,
body.gta-game .guess-option:hover {
  background: var(--accent);
  color: var(--on-accent);
}

body.gta-game .guess-submit,
body.gta-game .guess-giveup,
body.gta-game .guess-nextdaily {
  border: 3px solid var(--gta-ink);
  border-radius: 6px;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  box-shadow: 4px 5px 0 var(--gta-ink);
  transition:
    transform 0.12s ease,
    filter 0.12s ease;
}

body.gta-game .guess-submit:hover:not(:disabled),
body.gta-game .guess-giveup:hover:not(:disabled),
body.gta-game .guess-nextdaily:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
}

body.gta-game .guess-submit {
  padding: 10px 30px;
  background: var(--gta-fill);
  font-size: 1.7rem;
}

body.gta-game .guess-submit:hover,
body.gta-game .guess-submit:focus-visible {
  background: var(--gta-fill);
}

body.gta-game .guess-giveup {
  background: #0a0a0a;
  color: var(--gta-paper);
  font-size: 1.25rem;
}

body.gta-game .guess-giveup:hover:not(:disabled),
body.gta-game .guess-giveup:focus-visible {
  border-color: var(--gta-ink);
  background: #b42318;
  color: #fff;
}

body.gta-game .guess-nextdaily {
  border-color: var(--gta-ink);
  background: linear-gradient(180deg, #f0d15c, #c8922a);
  font-size: 1.4rem;
}

/* Panels: black plates. */
body.gta-game .clue-board,
body.gta-game .stat-board--answer,
body.gta-game .quote-panel,
body.gta-game .mission-objective-panel,
body.gta-game .mission-clue--boss,
body.gta-game .mission-clue--rewards {
  border: 3px solid var(--gta-ink);
  border-radius: 6px;
  box-shadow: var(--gta-plate);
}

body.gta-game .clue-board,
body.gta-game .stat-board--answer,
body.gta-game .quote-panel,
body.gta-game .mission-clue--boss,
body.gta-game .mission-clue--rewards {
  background: #0a0a0a;
}

body.gta-game .mission-clues,
body.gta-game .quote-guesses {
  gap: 22px;
}

body.gta-game .quote-panel {
  border-bottom: 6px solid var(--accent);
}

/* Guess rows. The board scrolls sideways, so these get hard borders rather than offset shadows. */
body.gta-game .stat-guess__name {
  border: 3px solid var(--gta-ink);
  border-radius: 4px 4px 0 0;
  text-shadow: var(--gta-outline);
}

body.gta-game .stat-guess__name::before {
  height: 4px;
}

body.gta-game .stat-tile {
  border: 2px solid var(--gta-ink);
  border-radius: 3px;
}

body.gta-game .stat-tile::before {
  height: 4px;
}

body.gta-game .stat-tile__label {
  font-size: 0.95rem;
  letter-spacing: 0.1em;
}

body.gta-game .stat-chip,
body.gta-game .clue-chip {
  border-radius: 3px;
}

body.gta-game .quote-guess-item {
  border: 3px solid var(--gta-ink);
  border-radius: 6px;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.7);
}

body.gta-game .legend {
  color: var(--gta-paper);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.gta-game .legend-swatch {
  border: 2px solid var(--gta-ink);
  box-shadow: 0 0 0 1px var(--gta-paper);
}

/* Corner buttons. */
body.gta-game .login-fab,
body.gta-game .admin-fab,
body.gta-game .tutorial-help {
  border: 2px solid var(--gta-ink);
  border-radius: 6px;
  box-shadow: 3px 4px 0 var(--gta-ink);
}

@media (prefers-reduced-motion: reduce) {
  body.gta-game .guess-submit:hover:not(:disabled),
  body.gta-game .guess-giveup:hover:not(:disabled),
  body.gta-game .guess-nextdaily:hover {
    transform: none;
  }
}

/* Game tags and pool count: square stickers instead of round pills. */
body.gta-game .selected-game {
  border: 2px solid var(--gta-ink);
  border-radius: 4px;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  box-shadow: 2px 3px 0 var(--gta-ink);
}

/* Site tabs (shown on the non-game pages that use this skin): a black plate with a hard edge. */
body.gta-game .pause-nav {
  width: min(820px, calc(100% - 32px));
  margin: 10px auto 0;
  padding: 0;
  border: 3px solid var(--gta-ink);
  border-radius: 6px;
  background: #0a0a0a;
  box-shadow: var(--gta-plate);
  overflow: hidden;
}

body.gta-game .pause-nav__items {
  max-width: none;
}

body.gta-game .pause-nav__item.is-active {
  background: var(--gta-fill);
}

body.gta-game .difficulty-pill {
  padding: 5px 11px 3px;
  border: 2px solid var(--gta-ink);
  border-radius: 4px;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  box-shadow: 2px 3px 0 var(--gta-ink);
}

body.gta-game .mode-page > p {
  color: #d9d5c9;
}

/* Privacy Policy / Terms of Use: the copy on a plate. */
body.gta-game .legal-copy {
  border: 3px solid var(--gta-ink);
  border-top: 6px solid var(--accent);
  border-radius: 6px;
  background: #0a0a0a;
  box-shadow: var(--gta-plate);
}

body.gta-game .legal-copy h2 {
  color: var(--accent);
  font-size: 1.8rem;
  line-height: 1;
  text-shadow: 2px 3px 0 var(--gta-ink);
}

body.gta-game .legal-copy p,
body.gta-game .legal-copy li {
  color: #d9d5c9;
  line-height: 1.6;
}

body.gta-game .legal-copy li::marker {
  color: var(--accent);
}

body.gta-game .legal-copy a {
  color: var(--accent);
  font-weight: 600;
}

/* The answer shown on the page after a round (Check Guesses): the same stamp type and chunky
   button as the Mission Passed / Failed screen. */
body.gta-game .easy-hint {
  text-shadow: var(--gta-outline), 4px 5px 0 var(--gta-ink);
}

body.gta-game .answer-game,
body.gta-game .answer-tries {
  text-shadow: var(--gta-outline), 2px 3px 0 var(--gta-ink);
}

body.gta-game .answer-tries {
  margin-top: 14px;
}

body.gta-game .answer-wiki {
  --wiki: #e6c34a;
  margin-top: 18px;
  padding: 9px 16px 6px;
  border: 3px solid var(--gta-ink);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--wiki), color-mix(in srgb, var(--wiki) 60%, #000));
  color: #0a0a0a;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  box-shadow:
    0 0 0 2px var(--gta-paper),
    4px 5px 0 2px var(--gta-ink);
  transition:
    transform 0.12s ease,
    filter 0.12s ease;
}

body.gta-game .answer-wiki--failed {
  --wiki: #e44545;
  color: #fff;
}

body.gta-game .answer-wiki:hover,
body.gta-game .answer-wiki:focus-visible {
  background: linear-gradient(180deg, var(--wiki), color-mix(in srgb, var(--wiki) 60%, #000));
  color: #0a0a0a;
  transform: translateY(-2px);
  filter: brightness(1.15);
}

body.gta-game .answer-wiki--failed:hover,
body.gta-game .answer-wiki--failed:focus-visible {
  color: #fff;
}

/* Life bar (hard mode, grids) and the mission hint bar: a chunky HUD gauge, like the in-game
   health readout. The fill colours and hit/critical animations still come from styles.css. */
body.gta-game .mode-hud {
  gap: 18px;
}

body.gta-game .hard-hud,
body.gta-game .hint-hud {
  gap: 10px;
}

body.gta-game .hard-hud__bar,
body.gta-game .hint-hud__bar {
  width: 172px;
  height: 24px;
  padding: 3px;
  border: 3px solid var(--gta-ink);
  border-radius: 4px;
  background: #0a0a0a;
  box-shadow:
    0 0 0 2px var(--gta-paper),
    4px 5px 0 2px var(--gta-ink);
}

body.gta-game .hint-hud__bar {
  width: 132px;
}

body.gta-game .hard-hud__fill,
body.gta-game .hint-hud__fill {
  border-radius: 1px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}

body.gta-game .hard-hud__count,
body.gta-game .hint-hud__count {
  min-width: 0.8em;
  color: var(--gta-paper);
  font-size: 2.3rem;
  text-shadow: var(--gta-outline), 3px 4px 0 var(--gta-ink);
}

body.gta-game .hint-hud__label {
  color: var(--gta-paper);
  font-size: 1.3rem;
  text-shadow: var(--gta-outline), 2px 3px 0 var(--gta-ink);
}

@media (max-width: 640px) {
  body.gta-game .hard-hud__bar {
    width: 104px;
    height: 20px;
  }

  body.gta-game .hint-hud__bar {
    width: 84px;
    height: 20px;
  }

  body.gta-game .hard-hud__count,
  body.gta-game .hint-hud__count {
    font-size: 1.8rem;
  }
}

/* Profile: the signed-in player as an ID plate, section tabs as tags, stats in panels. */
body.gta-game .profile-user-bar {
  margin-bottom: 26px;
  padding: 14px 16px;
  border: 3px solid var(--gta-ink);
  border-top: 6px solid var(--accent);
  border-radius: 6px;
  background: #0a0a0a;
  box-shadow: var(--gta-plate);
}

body.gta-game .profile-user-bar:not(:has(> :not([hidden]))) {
  display: none;
}

body.gta-game .profile-user__avatar {
  width: 60px;
  height: 60px;
  border: 3px solid var(--gta-ink);
  border-radius: 6px;
  box-shadow:
    0 0 0 2px var(--gta-paper),
    3px 4px 0 2px var(--gta-ink);
}

body.gta-game .profile-user__name {
  color: var(--gta-paper);
  font-size: 2rem;
  line-height: 1;
  text-shadow: 2px 3px 0 var(--gta-ink);
}

body.gta-game .profile-user__meta {
  color: #d9d5c9;
}

body.gta-game .profile-pane > p {
  color: #d9d5c9;
}

body.gta-game .profile-logout,
body.gta-game .profile-subtab {
  padding-top: 3px;
  border: 2px solid var(--gta-ink);
  border-radius: 4px;
  background: #1a1a1a;
  color: var(--gta-paper);
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  box-shadow: 3px 4px 0 var(--gta-ink);
  transition:
    transform 0.12s ease,
    filter 0.12s ease;
}

body.gta-game .profile-logout:hover:not(:disabled),
body.gta-game .profile-subtab:hover {
  border-color: var(--gta-ink);
  color: var(--gta-paper);
  transform: translateY(-2px);
  filter: brightness(1.2);
}

body.gta-game .profile-logout:hover:not(:disabled),
body.gta-game .profile-logout:focus-visible {
  background: #b42318;
  color: #fff;
}

body.gta-game .profile-subtab.is-active {
  border-color: var(--gta-ink);
  background: var(--gta-fill);
  color: var(--on-accent);
}

body.gta-game .profile-subtabs {
  gap: 12px;
  margin-bottom: 22px;
}

body.gta-game .stats-block__title {
  font-size: 1.6rem;
  text-shadow: 2px 3px 0 var(--gta-ink);
}

body.gta-game .stats-row__value {
  font-size: 1.5rem;
  text-shadow: 2px 2px 0 var(--gta-ink);
}

body.gta-game .profile-pane .stats-group {
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.7);
}

body.gta-game .profile-nav__item {
  justify-content: flex-start;
}

/* Mission List side panel (the Mission List modifier): an accent pull-tab on a black plate drawer. */
/* The page is zoomed to 0.9, so a plain 100vh stops short of the bottom of the window. */
body.gta-game .mission-list-dock {
  height: calc(100vh / var(--ui-scale));
}

body.gta-game .mission-list-tab {
  border: 3px solid var(--gta-ink);
  border-right: 0;
  border-radius: 6px 0 0 6px;
  background: var(--gta-fill);
  color: var(--on-accent);
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  box-shadow:
    0 0 0 2px var(--gta-paper),
    -4px 5px 0 2px rgba(0, 0, 0, 0.7);
  transition: filter 0.12s ease;
}

body.gta-game .mission-list-tab:hover,
body.gta-game .mission-list-tab:focus-visible {
  color: var(--on-accent);
  filter: brightness(1.15);
}

body.gta-game .mission-list-panel {
  gap: 14px;
  border-left: 3px solid var(--gta-ink);
  background: #0a0a0a;
  box-shadow:
    -3px 0 0 var(--gta-paper),
    -12px 0 0 rgba(0, 0, 0, 0.5);
}

body.gta-game .mission-list-panel__title {
  font-size: 2rem;
  line-height: 1;
  text-shadow: var(--gta-outline), 3px 4px 0 var(--gta-ink);
}

body.gta-game .mission-list-panel__close,
body.gta-game .mission-list-game {
  border: 2px solid var(--gta-ink);
  border-radius: 4px;
  background: #1a1a1a;
  color: var(--gta-paper);
  box-shadow: 2px 3px 0 var(--gta-ink);
}

body.gta-game .mission-list-panel__close:hover,
body.gta-game .mission-list-panel__close:focus-visible {
  background: #b42318;
  color: #fff;
}

body.gta-game .mission-list-game {
  padding-top: 3px;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
}

body.gta-game .mission-list-game:hover,
body.gta-game .mission-list-game:focus-visible {
  border-color: var(--gta-ink);
  filter: brightness(1.25);
}

body.gta-game .mission-list-game.is-active {
  border-color: var(--gta-ink);
  background: var(--gta-fill);
  color: var(--on-accent);
}

body.gta-game .mission-list-panel__status {
  color: #d9d5c9;
}

body.gta-game .mission-list-panel__list {
  gap: 3px;
}

body.gta-game .mission-list-panel__item {
  border-left: 4px solid transparent;
  border-radius: 3px;
  font-weight: 500;
}

body.gta-game .mission-list-panel__item:nth-child(odd) {
  background: #161616;
}

body.gta-game .mission-list-panel__item:hover {
  border-left-color: var(--accent);
  background: #202020;
}