:root {
  color-scheme: dark;
  --bg: #0a0a0a;
  --surface: #161616;
  --accent-brand: #ff7a1a;
  --accent-positive: #4ade80;
  --accent-positive-rgb: 74, 222, 128;
  --accent-caution: #ff3d81;
  --accent-caution-rgb: 255, 61, 129;
  --accent-negative: #e63946;
  --accent-negative-rgb: 230, 57, 70;
  --accent-neutral: #8a8798;
  --accent-neutral-rgb: 138, 135, 152;
  --text: #f5efe6;
  --text-muted: rgba(245, 239, 230, 0.62);
  --ink: #16121f;
  --border: rgba(245, 239, 230, 0.14);

  /* Per-source identity colors — distinct from the verdict stamp accents
     above, so a reader never confuses "who said this" with "what it means". */
  --source-metacritic: #4ecdc4;
  --source-igdb: #9d7fe8;
  --source-steam: #5b8def;

  --font-display: "Anton", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  padding: 24px 16px;
}

.app {
  width: 100%;
  max-width: 420px;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
}

.hero-logo {
  height: 76px;
  width: 76px;
  flex-shrink: 0;
}

.app-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  text-align: center;
  margin: 0;
  font-weight: 400;
}

/* Language switch: small and out of the way — this isn't the point of the screen */

.lang-switch {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 8px;
}

.lang-switch select {
  padding: 4px 8px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.8rem;
  cursor: pointer;
}

/* Search */

.search-box {
  position: relative;
  margin-bottom: 20px;
}

#search-input {
  width: 100%;
  /* Right side leaves room for the clear button that sits on top of it. */
  padding: 12px 44px 12px 14px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
}

#search-input::placeholder {
  color: var(--text-muted);
}

/* Browsers that ship their own clear affordance (Edge's ::-ms-clear, and
   WebKit's, should this ever become type="search") would sit right next to
   ours in a colour we don't control — suppress them and keep only ours. */
#search-input::-ms-clear,
#search-input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

#search-input::-webkit-search-cancel-button,
#search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Clear button: brand orange, matching the focus ring on the field it
   belongs to. Flat like everything else — the hover is a faint wash of the
   same colour, no shadow, no glow. */
.search-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--accent-brand);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* Author display:flex would otherwise beat the UA [hidden] rule. */
.search-clear[hidden] {
  display: none;
}

.search-clear svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: square;
  fill: none;
}

.search-clear:hover {
  background: rgba(255, 122, 26, 0.14);
}

.suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 10;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  max-height: 320px;
  overflow-y: auto;
}

.suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border-radius: 0;
  border: none;
  background: none;
  color: var(--text);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
}

.suggestion:hover {
  background: rgba(245, 239, 230, 0.06);
}

.suggestion-image {
  width: 46px;
  height: 22px;
  object-fit: cover;
  border-radius: 0;
  background: var(--border);
  flex-shrink: 0;
}

.suggestion-name {
  font-size: 0.9rem;
}

.suggestion-empty {
  padding: 10px;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}

/* "Em destaque" carousel: square covers, ranked biggest-to-smallest.
   Desktop only for now — the whole section is hidden under 768px at the
   bottom of this block. */

/* The one section that breaks out of the 420px reading column. Everything
   else on this page is a narrow single-column read, but a ranked strip of
   twelve covers is the whole reason this section is desktop-only — kept at
   column width you'd see three of them, and the size gradient that carries
   the ranking wouldn't read at all. Centered on the column rather than
   left-aligned to it, so the hero above still looks like the anchor.
   `translate` rather than `transform` so it can't collide with the hover
   scale on the items inside. */
.featured {
  width: min(1040px, 92vw);
  margin-left: 50%;
  translate: -50% 0;
  /* A deliberate pause between the main task (search) and discovery
     (browsing covers) — different modes, they shouldn't read as one block.
     Collapses with .search-box's own bottom margin, so this is the gap. */
  margin-top: 52px;
  margin-bottom: 28px;
}

/* Author `display` would otherwise tie with the UA stylesheet's
   [hidden]{display:none} and win the cascade — same reason .cost-chip and
   .specs-field carry this. The section starts hidden and only appears once
   /featured has actually returned games. */
.featured[hidden] {
  display: none;
}

/* Display face, like the app title — it's a section heading, and in the
   body font at 0.8rem muted grey it was the one piece of text on screen
   that didn't look like it belonged to the same system. Centred on the
   carousel so it lines up with the hero above rather than hanging off the
   left edge of a strip that's wider than the reading column. */
.featured-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  margin: 0 0 16px;
}

/* The carousel itself: a plain overflow-x strip. No library, no JS-driven
   transform — the browser's own scrolling is the carousel. scroll-behavior
   covers programmatic scrolls too, so tabbing through the covers glides
   instead of jumping. align-items:start keeps the smaller, lower-ranked
   covers on the top edge rather than centering them in the tallest item's
   row. */
.featured-track {
  display: flex;
  align-items: start;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  /* app.js switches this off inline for the duration of a wheel gesture and
     restores it once the wheel goes quiet — see the wheel handler. Touch and
     drag-the-scrollbar scrolling keep snapping normally throughout. */
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-brand) var(--surface);
}

.featured-track::-webkit-scrollbar {
  height: 6px;
}

.featured-track::-webkit-scrollbar-track {
  background: var(--surface);
}

.featured-track::-webkit-scrollbar-thumb {
  background: var(--accent-brand);
  border-radius: 0;
}

/* Square by construction (aspect-ratio 1), sized by rank: app.js sets
   --featured-size per item, interpolating from the biggest at rank 1 down
   to the smallest at the end of the list. The transparent border is what
   the hover state colors in — reserving it here means hovering never
   nudges the neighbours. */
.featured-item {
  flex: 0 0 auto;
  width: var(--featured-size);
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0;
  background: var(--surface);
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.featured-cover {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0;
  background: var(--bg);
}

/* Brand color and a hair of scale — no shadow, no glow, same flat-surface
   discipline as everything that isn't the stamp. */
.featured-item:hover {
  border-color: var(--accent-brand);
  transform: scale(1.03);
}

.featured-item:focus-visible {
  outline: 2px solid var(--accent-brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .featured-track {
    scroll-behavior: auto;
  }

  .featured-item {
    transition: none;
  }

  .featured-item:hover {
    transform: none;
  }
}

/* Desktop only, as agreed — the strip needs horizontal room this layout
   doesn't have on a phone. Overrides the [hidden] rule above, so it wins
   whether or not the section has games in it. */
@media (max-width: 767px) {
  .featured,
  .featured[hidden] {
    display: none;
  }
}

/* Status */

.loading,
.error {
  text-align: center;
  padding: 12px;
  border-radius: 0;
  font-size: 0.9rem;
}

.loading {
  color: var(--text-muted);
}

.error {
  background: rgba(255, 61, 129, 0.12);
  border: 1px solid rgba(255, 61, 129, 0.35);
  color: var(--text);
}

/* Result card */

.result {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  /* No overflow:hidden here — the image gets its own top radius below,
     so absolutely-positioned content further down (e.g. the info
     popover) isn't clipped by the card's edge. */
}

.game-image {
  display: block;
  width: 100%;
  aspect-ratio: 460 / 215;
  object-fit: cover;
  background: var(--bg);
  border-radius: 0;
}

.result-body {
  padding: 20px;
}

.game-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 18px;
}

.game-name {
  font-size: 1.05rem;
  font-weight: 600;
}

.game-price {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  white-space: nowrap;
}

/* "Already included" toggle: about the central question (money vs. time),
   not hardware — same quiet, disciplined treatment as everything except
   the stamp itself. */

.already-included-toggle {
  margin: 0 0 16px;
}

.already-included-toggle label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
}

.already-included-toggle input[type='checkbox'] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--accent-positive);
  cursor: pointer;
}

/* Informative, not a warning — same muted treatment as the label above
   it, just smaller, and indented to align with its text past the
   checkbox rather than the checkbox itself. */
.already-included-note {
  margin: 6px 0 0;
  padding-left: 24px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* The stamp: the one loud element on the screen */

.stamp-wrap {
  display: flex;
  justify-content: center;
  padding: 10px 0 18px;
}

.stamp {
  display: inline-flex;
  max-width: 100%;
  border-width: 5px;
  border-style: solid;
  border-radius: 0;
  padding: 12px 22px;
  transform: rotate(-5deg);
  animation: stamp-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.stamp--positive {
  border-color: var(--accent-positive);
  background: rgba(var(--accent-positive-rgb), 0.78);
}

.stamp--caution {
  border-color: var(--accent-caution);
  background: rgba(var(--accent-caution-rgb), 0.78);
}

.stamp--negative {
  border-color: var(--accent-negative);
  background: rgba(var(--accent-negative-rgb), 0.78);
}

.stamp--neutral {
  border-color: var(--accent-neutral);
  background: rgba(var(--accent-neutral-rgb), 0.78);
}

.stamp-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 7vw, 2.2rem);
  line-height: 1.05;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
}

@keyframes stamp-in {
  from {
    transform: rotate(-15deg) scale(0.7);
    opacity: 0;
  }
  to {
    transform: rotate(-5deg) scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stamp {
    animation: none;
  }
}

.reason {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: 0 0 20px;
}

/* Cost/hour: our own metric, not "one more third-party score" */

.cost-chip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 2px solid var(--accent-positive);
  border-radius: 0;
  background: rgba(var(--accent-positive-rgb), 0.1);
}

/* [hidden] and .cost-chip{display:flex} tie on specificity, and the
   author rule below would otherwise win the cascade over the UA
   stylesheet's [hidden]{display:none} — cost-chip and playtime-chip are
   meant to be mutually exclusive, so this has to actually hide it. */
.cost-chip[hidden] {
  display: none;
}

.cost-chip-label {
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 600;
}

.cost-chip-value {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

/* Support stats: quiet, scoreboard-like — each source gets a small
   color-coded dot so you can tell them apart at a glance. */

.stats {
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.stat {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 0;
  flex-shrink: 0;
}

.stat--metacritic .stat-dot {
  background: var(--source-metacritic);
}

.stat--igdb .stat-dot {
  background: var(--source-igdb);
}

.stat--steam .stat-dot,
.stat--playtime .stat-dot {
  background: var(--source-steam);
}

.stat-label-hint {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.stat-label-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.info-icon {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

.info-icon:hover {
  color: var(--text);
}

.info-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  width: max-content;
  max-width: 220px;
  padding: 8px 10px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: normal;
}

.stats li strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 600;
}

/* Specs form: quiet and disciplined, never competing with the stamp */

.specs-form {
  margin-top: 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
}

.specs-title {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 14px;
}

.specs-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

/* Same [hidden] vs author-display specificity tie as .cost-chip above —
   the GPU and Mac-model fields are mutually exclusive by OS, so this
   has to actually hide whichever one loses. */
.specs-field[hidden] {
  display: none;
}

.specs-field:last-child {
  margin-bottom: 0;
}

.specs-field label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.specs-field select,
.specs-field input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.specs-field select::placeholder,
.specs-field input::placeholder {
  color: var(--text-muted);
}

/* Keyboard focus: visible everywhere, no glow */

#search-input:focus-visible,
.search-clear:focus-visible,
.suggestion:focus-visible,
.specs-field select:focus-visible,
.specs-field input:focus-visible,
.info-icon:focus-visible,
.already-included-toggle input:focus-visible,
.lang-switch select:focus-visible {
  outline: 2px solid var(--accent-brand);
  outline-offset: 2px;
}