/* ==========================================================================
   gamehost.dev — stylesheet

   Restrained, not sterile. The paper is warm rather than pure grey and body
   text stops short of black, because full monochrome at maximum contrast is
   tiring to read in light mode. Colour comes from ONE muted teal used for
   accents, live figures and active states — never gradients across hues.
   ========================================================================== */

/* ── reset ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }

/* ── tokens ─────────────────────────────────────────────────────────────── */

:root {
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --shell: 1140px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-back: cubic-bezier(.34, 1.4, .64, 1);
  --t: .2s;
  --t-slow: .34s;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #14161a;              /* softened from near-black: less glare */
  --bg-2: #191c21;
  --surface: #1c1f25;
  --surface-2: #232730;
  --line: rgba(255, 255, 255, .085);
  --line-2: rgba(255, 255, 255, .17);
  --text: #e6e8ec;
  --text-2: #a2a8b4;
  --text-3: #757b88;
  --ink: #e9ebef;
  --ink-on: #14161a;
  --accent: #6fc4b4;
  --accent-2: #8fd3c6;
  --accent-soft: rgba(111, 196, 180, .13);
  --accent-line: rgba(111, 196, 180, .34);
  --wash: radial-gradient(120% 80% at 82% -10%, rgba(111,196,180,.13), transparent 62%);
  --shadow: 0 1px 2px rgba(0,0,0,.35);
  --shadow-lift: 0 16px 34px -18px rgba(0,0,0,.75);
  --skeleton: rgba(255,255,255,.06);
}

:root[data-theme='light'] {
  color-scheme: light;
  --bg: #f6f5f2;             /* warm paper, not #fff */
  --bg-2: #efeee9;
  --surface: #fffefb;
  --surface-2: #f1f0ea;
  --line: rgba(40, 38, 33, .11);
  --line-2: rgba(40, 38, 33, .2);
  --text: #23252b;           /* stops short of black */
  --text-2: #5f6470;
  --text-3: #8a8f9a;
  --ink: #26282e;
  --ink-on: #fffefb;
  --accent: #2c6f64;
  --accent-2: #245d54;
  --accent-soft: #e6efec;
  --accent-line: rgba(44, 111, 100, .3);
  --wash: radial-gradient(120% 80% at 82% -10%, rgba(44,111,100,.09), transparent 62%);
  --shadow: 0 1px 2px rgba(40,38,33,.05);
  --shadow-lift: 0 18px 36px -20px rgba(40,38,33,.26);
  --skeleton: rgba(40,38,33,.06);
}

/* ── base ───────────────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.62;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
}

h1, h2, h3 { font-weight: 600; line-height: 1.16; letter-spacing: -.021em; }
code { font-family: var(--mono); font-size: .88em; }

::selection { background: var(--accent-soft); color: var(--text); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: fixed; top: -100px; left: 50%; translate: -50% 0; z-index: 100;
  padding: .6rem 1rem; border-radius: var(--r-sm);
  background: var(--ink); color: var(--ink-on); font-weight: 500;
  transition: top var(--t) var(--ease);
}
.skip:focus { top: 12px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
}
.eyebrow__dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: .66rem 1.2rem; border-radius: var(--r-sm);
  font-size: .92rem; font-weight: 500; white-space: nowrap;
  border: 1px solid transparent; overflow: hidden;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease), transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--ink); color: var(--ink-on); }
.btn--solid:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
/* A single soft pass of light, not a rainbow sweep. */
.btn--solid::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 34%, rgba(255,255,255,.18) 50%, transparent 66%);
  transform: translateX(-115%);
  transition: transform .62s var(--ease);
}
.btn--solid:hover::after { transform: translateX(115%); }
.btn--quiet { color: var(--text-2); border-color: var(--line-2); }
.btn--quiet:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }

.icon-btn {
  position: relative; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  color: var(--text-2);
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.icon-btn:hover { color: var(--text); background: var(--surface-2); }
.icon-btn svg { position: absolute; width: 17px; height: 17px; transition: opacity var(--t) var(--ease), transform var(--t-slow) var(--ease-back); }
.i-sun { opacity: 0; transform: rotate(-70deg) scale(.6); }
.i-moon { opacity: 1; transform: none; }
:root[data-theme='light'] .i-sun { opacity: 1; transform: none; }
:root[data-theme='light'] .i-moon { opacity: 0; transform: rotate(70deg) scale(.6); }

/* ── header ─────────────────────────────────────────────────────────────── */

.header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.header.is-stuck { border-bottom-color: var(--line); }
.header__inner { display: flex; align-items: center; gap: 1.5rem; height: 62px; }

.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; letter-spacing: -.02em; }
.brand__mark { width: 20px; height: 20px; color: var(--accent); transition: transform var(--t) var(--ease-back); }
.brand:hover .brand__mark { transform: scale(1.08); }
.brand__tld { color: var(--text-3); font-weight: 500; }

.nav { display: flex; gap: 1.35rem; margin-left: auto; font-size: .92rem; }
.nav a { position: relative; color: var(--text-2); transition: color var(--t) var(--ease); }
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px;
  border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t) var(--ease);
}
.nav a:hover { color: var(--text); }
.nav a:hover::after { transform: scaleX(1); }

/* ── hero ───────────────────────────────────────────────────────────────── */

.hero { position: relative; padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4rem); overflow: hidden; }
.hero__wash {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--wash);
}

.hero__grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
}

.hero__title {
  margin: 1rem 0 0;
  font-size: clamp(2.05rem, 5.2vw, 3.35rem);
  letter-spacing: -.033em;
}
.hero__lede { margin-top: 1.1rem; max-width: 46ch; color: var(--text-2); font-size: clamp(1rem, 1.3vw, 1.06rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.9rem; }

/* ── hero panel ─────────────────────────────────────────────────────────── */

.panel {
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--shadow);
  overflow: hidden;
}

.panel__skeleton { display: grid; gap: 1px; background: var(--line); }
.panel__skeleton span {
  display: block; height: 74px; background: var(--surface);
  position: relative; overflow: hidden;
}
.panel__skeleton span::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--skeleton), transparent);
  animation: sweep 1.4s linear infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* live figures */
.panel__head {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem 1.1rem; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: .7rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-3);
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: beat 2.4s var(--ease) infinite;
}
@keyframes beat {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); }
  60%      { box-shadow: 0 0 0 7px color-mix(in oklab, var(--accent) 0%, transparent); }
}

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.tile { padding: 1rem 1.1rem 1.05rem; background: var(--surface); transition: background var(--t) var(--ease); }
.tile:hover { background: var(--surface-2); }
.tile__k {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
}
.tile__v {
  margin-top: .3rem; font-size: clamp(1.3rem, 2.4vw, 1.65rem); font-weight: 600;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.tile--live .tile__v { color: var(--accent); }

/* fallback variant: the model, in three lines */
.panel__list { display: grid; gap: 1px; background: var(--line); }
.panel__row {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .9rem 1.1rem; background: var(--surface);
  font-size: .875rem; color: var(--text-2);
}
.panel__row b { display: block; color: var(--text); font-weight: 500; margin-bottom: .1rem; }
.panel__row svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: .28rem; color: var(--accent); }

/* ── sections ───────────────────────────────────────────────────────────── */

.section { padding-block: clamp(2.5rem, 6vw, 3.75rem); }
.section--perks { border-top: 1px solid var(--line); margin-top: clamp(2rem, 6vw, 3.5rem); }

.section__head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.section__title { font-size: clamp(1.3rem, 2.6vw, 1.6rem); }
.counter { font-family: var(--mono); font-size: .78rem; color: var(--text-3); }

.sort { display: flex; gap: .15rem; margin-left: auto; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.sort__btn {
  padding: .34rem .68rem; border-radius: 6px;
  font-size: .82rem; color: var(--text-3);
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.sort__btn:hover { color: var(--text-2); }
.sort__btn.is-on { color: var(--text); background: var(--surface-2); }

/* ── toolbar ────────────────────────────────────────────────────────────── */

.toolbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

.search { position: relative; display: flex; align-items: center; flex: 0 1 260px; }
.search svg { position: absolute; left: .7rem; width: 15px; height: 15px; color: var(--text-3); pointer-events: none; transition: color var(--t) var(--ease); }
.search input {
  width: 100%; padding: .52rem .75rem .52rem 2.1rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); font-size: .9rem; outline: none;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.search input::placeholder { color: var(--text-3); }
.search input::-webkit-search-cancel-button { display: none; }
.search:focus-within svg { color: var(--accent); }
.search input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }

.filters { display: flex; flex-wrap: wrap; gap: .3rem; }
.filter {
  padding: .42rem .78rem; border-radius: var(--r-sm);
  font-size: .87rem; color: var(--text-2);
  border: 1px solid transparent;
  transition: color var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.filter:hover { color: var(--text); background: var(--surface-2); }
.filter.is-on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }

/* ── grid ───────────────────────────────────────────────────────────────── */

.grid { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); }

.card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.card:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: var(--shadow-lift); }
.card:has(.card__link:focus-visible) { border-color: var(--accent); }

.card__media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }

/* Stand-in when a game ships no cover: its initial, nothing louder. */
.card__fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 2.2rem; font-weight: 600; color: var(--text-3); letter-spacing: -.03em;
}

/* rank badge, only in the most-played ordering */
.card__rank {
  position: absolute; top: .6rem; left: .6rem; z-index: 2;
  min-width: 22px; height: 22px; padding: 0 .3rem; border-radius: 6px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  color: var(--ink-on); background: color-mix(in oklab, var(--accent) 88%, black);
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}

.card__body { display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.1rem 1.05rem; flex: 1; }
.card__title { font-size: 1.02rem; }
.card__desc {
  font-size: .885rem; line-height: 1.55; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line);
}
.card__meta { display: flex; align-items: center; gap: .45rem; min-width: 0; flex-wrap: wrap; }
.card__cat {
  font-size: .76rem; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card__sep { color: var(--text-3); opacity: .5; }
.card__plays {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .76rem; color: var(--accent); white-space: nowrap;
}
.card__plays svg { width: 10px; height: 10px; }

.card__play {
  display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto;
  font-size: .85rem; font-weight: 500; color: var(--text-2);
  transition: color var(--t) var(--ease);
}
.card__play svg { width: 13px; height: 13px; transition: transform var(--t) var(--ease-back); }
.card:hover .card__play { color: var(--accent); }
.card:hover .card__play svg { transform: translateX(3px); }

/* Whole card is the link; the visible "Play" is just an affordance. */
.card__link { position: absolute; inset: 0; z-index: 3; }

.card.is-in { animation: rise .38s var(--ease) backwards; animation-delay: var(--d, 0s); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* ── notice ─────────────────────────────────────────────────────────────── */

.notice {
  padding: clamp(2.5rem, 7vw, 4rem) 1.5rem; text-align: center;
  border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--surface) 50%, transparent);
}
.notice h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.notice p { color: var(--text-2); font-size: .92rem; max-width: 46ch; margin-inline: auto; }
.notice code, .note code, .panel__row code {
  padding: .1em .35em; border-radius: 4px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
}

/* ── perks ──────────────────────────────────────────────────────────────── */

.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
.perk { padding: .25rem 0; }
.perk__icon {
  display: grid; place-items: center;
  width: 34px; height: 34px; margin-bottom: .85rem;
  border-radius: 10px; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  transition: transform var(--t) var(--ease-back);
}
.perk__icon svg { width: 17px; height: 17px; }
.perk:hover .perk__icon { transform: translateY(-2px); }
.perk h3 { font-size: .98rem; margin-bottom: .35rem; }
.perk p { color: var(--text-2); font-size: .89rem; max-width: 34ch; }

/* The end state is a normal declaration, and the fill is `backwards`, not
   `forwards`. Two reasons: `rise` has only a `from`, so a forwards fill would
   hold the element's own base style (opacity 0) and re-hide it; and a held
   `transform` would outrank :hover, freezing the lift on these cards. */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-in {
  opacity: 1; transform: none;
  animation: rise .46s var(--ease) backwards;
  animation-delay: var(--d, 0s);
}

/* ── footer ─────────────────────────────────────────────────────────────── */

.footer { border-top: 1px solid var(--line); }
.footer__inner {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding-block: 1.75rem; font-size: .87rem; color: var(--text-3);
}
.footer__brand { color: var(--text-2); font-weight: 500; }
.footer__nav { display: flex; gap: 1.25rem; }
.footer__nav a { transition: color var(--t) var(--ease); }
.footer__nav a:hover { color: var(--accent); }
.footer__year { margin-left: auto; font-family: var(--mono); }

/* ── responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .hero__lede { max-width: 56ch; }
  .perks { grid-template-columns: 1fr; gap: 1.6rem; }
}

@media (max-width: 620px) {
  .nav { gap: 1rem; }
  .grid { grid-template-columns: 1fr; }
  .search { flex: 1 1 100%; }
  .sort { margin-left: 0; }
  .footer__year { margin-left: 0; width: 100%; }
}

@media (hover: none) {
  .card__cat { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal, .card { opacity: 1 !important; transform: none !important; }
}