/* ============================================================================
   Veranda Games — "The broadsheet puzzle desk"
   The puzzle page of a beautiful newspaper: warm paper, rich ink, hairline
   rules, big serif headlines (Fraunces), printed-card game tiles.
   Built legibility-first for a 45+ audience: 18px base, high contrast,
   48px tap targets, almost no motion.
   ========================================================================== */

:root {
  /* paper + ink */
  --paper:      #F7F2E9;
  --paper-deep: #EFE7D8;
  --card:       #FFFDF7;
  --ink:        #1F1D1A;
  --ink-soft:   #57503F;
  --muted:      #6B6353;
  /* rules (fine print lines) */
  --rule:       rgba(31, 29, 26, .82);
  --rule-soft:  rgba(31, 29, 26, .28);
  --rule-faint: rgba(31, 29, 26, .14);
  /* the single confident accent pair */
  --blue:       #22457E;   /* deep editorial blue */
  --blue-deep:  #17335F;
  --terra:      #B0541F;   /* existing terracotta */
  --terra-deep: #8F4218;
  --stamp:      #B3301F;   /* ink-stamp red for the POPULAR badge */
  /* shape + shadow: crisp corners, pressed-paper shadows */
  --radius: 9px;
  --shadow:      0 1px 2px rgba(31, 29, 26, .10), 0 2px 6px rgba(31, 29, 26, .07);
  --shadow-lift: 0 2px 4px rgba(31, 29, 26, .12), 0 10px 24px rgba(31, 29, 26, .14);
  /* type */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --body:  Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --ui:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: light; font-size: 112.5%; }   /* 18px base for older eyes */
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background: var(--paper);
  /* barely-there laid-paper texture */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.11 0 0 0 0 0.09 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  overflow-x: hidden;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -.01em; }

/* Calm by decree: everything eases briefly, nothing bounces. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- small-caps kicker, used all over the page ---------- */
.sh-kick, .tile-kicker {
  font-family: var(--ui);
  font-size: .78rem;                 /* 14px */
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--terra);
}

/* ============================================================================
   Masthead
   ========================================================================== */
.site-header {
  background: rgba(247, 242, 233, .96);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 3px double var(--rule);   /* the masthead's double rule */
}
.header-inner {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 16px; max-width: 1160px; margin: 0 auto;
}
.logo {
  font-family: var(--serif);
  font-size: 1.45rem; font-weight: 800; color: var(--ink);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  letter-spacing: -.015em;
  min-height: 48px;
}
.logo:hover { text-decoration: none; }
.logo-mark { flex-shrink: 0; }
.logo-word { color: var(--ink); }
.logo-word span { color: var(--terra); }

/* Category chips: understated small-caps index links */
.nav {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding: 2px 0;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  color: var(--ink); background: transparent;
  font-family: var(--ui); font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  padding: 13px 14px; min-height: 48px;
  display: inline-flex; align-items: center;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav a:hover { text-decoration: none; color: var(--terra-deep); border-bottom-color: var(--terra); }
.nav-emoji { display: none; }   /* small-caps words carry the nav; no emoji clutter */

/* ---------- Header tools: search + random ---------- */
.header-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.search-toggle { display: none; }
.search { position: relative; display: flex; align-items: center; }
.search-icon { position: absolute; left: 13px; font-size: .85rem; pointer-events: none; opacity: .6; }
.search input {
  width: 200px; min-height: 48px;
  border: 1px solid var(--rule-soft); border-radius: var(--radius);
  padding: 10px 14px 10px 36px;
  font-family: var(--ui); font-size: .89rem; font-weight: 600;
  color: var(--ink); background: var(--card);
  outline: none;
  transition: width .2s ease, border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none; appearance: none;
}
.search input:focus { width: 260px; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(34, 69, 126, .15); }
.search input::placeholder { color: var(--muted); font-weight: 500; }
.search-results {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: min(360px, calc(100vw - 32px));
  background: var(--card);
  border: 1px solid var(--rule-soft); border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 6px; z-index: 60; max-height: 60vh; overflow-y: auto;
}
.search-results[hidden] { display: none; }
.search-hit {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center;
  gap: 12px; padding: 8px 10px; min-height: 48px;
  border-radius: 6px; color: var(--ink);
}
.search-hit img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; border: 1px solid var(--rule-faint); }
.search-hit:hover, .search-hit.active { background: var(--paper-deep); text-decoration: none; }
.search-hit-title { font-family: var(--ui); font-weight: 700; font-size: .89rem; }
.search-hit-cat { font-family: var(--ui); font-size: .78rem; color: var(--muted); font-weight: 600; text-transform: capitalize; }
.search-none { padding: 14px; color: var(--muted); font-size: .85rem; text-align: center; }
.search-label { padding: 10px 10px 6px; color: var(--muted); font-family: var(--ui); font-size: .78rem; font-weight: 600; line-height: 1.35; }
.random-btn {
  color: var(--card); background: var(--blue);
  font-family: var(--ui); font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  padding: 13px 18px; min-height: 48px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius);
  transition: background .2s ease;
}
.random-btn:hover { text-decoration: none; background: var(--blue-deep); color: var(--card); }

/* ============================================================================
   Section headings — serif headlines over hairline rules
   ========================================================================== */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin: 44px 0 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.section-head h2 {
  font-size: 1.55rem; margin: 0; font-weight: 700; color: var(--ink); line-height: 1.2;
}
.section-head a {
  font-family: var(--ui); font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); white-space: nowrap;
  padding: 8px 0; text-underline-offset: 4px;
}
.section-head a:hover { color: var(--terra-deep); }
.sh-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.section-blurb { font-family: var(--ui); font-size: .82rem; color: var(--muted); font-weight: 500; }

/* Numbered newspaper-section headers for the collections (No. 1 — Pure logic) */
.sh-no {
  font-family: var(--ui); font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blue);
  display: inline-block; margin-right: 10px;
  padding: 2px 8px; border: 1px solid var(--rule-soft); border-radius: 3px;
  vertical-align: 3px;
}
.sh-col { border-bottom-style: solid; border-bottom-width: 1px; }
.sh-col::after { content: none; }

/* "Just published" strip header */
.sh-new { border-bottom: 1px dashed var(--rule-soft); }

/* Category rows: fine rule + drop-cap style big initial */
.sh-drop { border-bottom: 1px solid var(--rule-soft); }
.sh-drop h2::first-letter { font-size: 1.45em; color: var(--terra); font-weight: 800; }

/* The archive: closing section, double rule like the end of the paper */
.sh-arch { border-bottom: 3px double var(--rule); }

/* Trending: a boxed digest with a double-rule border */
#trendSection {
  border: 1px solid var(--rule);
  outline: 1px solid var(--rule);
  outline-offset: 3px;
  background: var(--card);
  border-radius: 2px;
  padding: 6px 22px 22px;
  margin: 48px 2px 8px;
}
#trendSection .section-head { margin-top: 16px; border-bottom: 1px solid var(--rule-soft); }

/* ============================================================================
   The game grid — printed cards
   ========================================================================== */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-flow: dense;
  gap: 18px;
  margin-top: 18px;
}
.tile {
  position: relative; display: block;
  aspect-ratio: 1 / 1;             /* square in a single cell; grid wins when spanning */
  border-radius: var(--radius); overflow: hidden;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--rule-soft), var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
  color: #fff;
}
.tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--rule), var(--shadow-lift);   /* pressed-paper lift */
  text-decoration: none; z-index: 2; color: #fff;
}
.tile-featured { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

/* Artwork always fills the tile exactly. */
.tile-art {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.tile-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 24% 20%, rgba(255,255,255,.28), transparent 44%),
    radial-gradient(circle at 80% 88%, rgba(0,0,0,.14), transparent 46%);
}
.tile-emoji {
  font-size: clamp(3.4rem, 9vw, 4.6rem); line-height: 1; z-index: 1;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,.28));
}
.tile-featured .tile-emoji { font-size: clamp(5rem, 13vw, 7.5rem); }

/* High-contrast title bar: solid ink plate, revealed calmly on hover */
.tile-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 9px 10px 10px;
  background: rgba(31, 29, 26, .92);
  border-top: 1px solid rgba(255, 253, 247, .35);
  display: flex; justify-content: center;
  opacity: 0; transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.tile:hover .tile-overlay { opacity: 1; transform: translateY(0); }
.tile-title {
  font-family: var(--ui);
  font-weight: 700; font-size: .89rem; color: #FBF7EE; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.25;
}
.tile-featured .tile-title { font-size: 1.05rem; }
/* Touch devices: names always visible — no hover to discover */
@media (hover: none) {
  .tile-overlay { opacity: 1; transform: none; }
}

/* ---------- The lead story: game-of-the-day hero tile ---------- */
.tile-hero {
  grid-column: span 3; grid-row: span 2; aspect-ratio: auto;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px var(--rule),
    0 0 0 5px var(--paper),
    0 0 0 6px var(--rule-soft),
    var(--shadow);
}
.tile-hero:hover {
  transform: none;
  box-shadow:
    0 0 0 1px var(--rule),
    0 0 0 5px var(--paper),
    0 0 0 6px var(--rule),
    var(--shadow-lift);
}
.tile-preview {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1;
  pointer-events: none; opacity: 0; transition: opacity .6s ease; background: transparent;
}
.tile-hero.has-preview .tile-preview { opacity: 1; }
/* Hover previews on ordinary tiles: rendered at 2x and scaled down so the
   game is legible inside a small card. */
.tile:not(.tile-hero) .tile-preview { width: 200%; height: 200%; transform: scale(.5); transform-origin: 0 0; }
.tile.has-live .tile-preview { opacity: 1; }
.tile-overlay { z-index: 2; }
.tile-hero.has-preview .tile-hero-overlay { background: linear-gradient(180deg, transparent, rgba(20, 18, 14, .92)); }
.tile-hero .tile-emoji { font-size: clamp(6rem, 16vw, 9rem); }
.tile-hero-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 70px 26px 22px;
  background: linear-gradient(180deg, transparent, rgba(20, 18, 14, .86));
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
}
.tile-kicker { color: #F0C9A8; font-size: .78rem; }
.tile-hero .tile-title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 700;
  white-space: normal; text-align: left; letter-spacing: -.01em;
  display: block; -webkit-line-clamp: none;
}
.btn-play {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--terra); color: #fff;
  font-family: var(--ui); font-weight: 700; font-size: 1rem;
  letter-spacing: .04em;
  padding: 13px 34px; min-height: 48px;
  border-radius: var(--radius);
  box-shadow: 0 2px 0 var(--terra-deep);
  transition: background .2s ease;
  margin-top: 6px;
}
.tile-hero:hover .btn-play { background: var(--terra-deep); }
a.btn-play:hover { background: var(--terra-deep); text-decoration: none; color: #fff; }

/* ---------- POPULAR badge: an ink stamp ---------- */
.tile-badge {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  background: rgba(247, 242, 233, .93);
  color: var(--stamp);
  border: 2px solid var(--stamp);
  font-family: var(--ui); font-size: .72rem; font-weight: 800;
  letter-spacing: .12em; padding: 4px 10px; border-radius: 3px;
  transform: rotate(-3deg);
  box-shadow: 0 1px 3px rgba(31, 29, 26, .25);
}
.tile-badge-new { color: var(--blue); border-color: var(--blue); transform: rotate(2deg); }

/* Per-game tile art gradients (fallback first so specific slugs win) */
.tile .tile-art { background: linear-gradient(135deg, #12b5c9, #5b4fe9); }
.tile-daily-word  .tile-art { background: linear-gradient(135deg, #43d98c, #1fa563); }
.tile-2048        .tile-art { background: linear-gradient(135deg, #f7b733, #ee7752); }
.tile-sudoku      .tile-art { background: linear-gradient(135deg, #4facfe, #2b6de0); }
.tile-solitaire   .tile-art { background: linear-gradient(135deg, #2bb673, #0c7a4a); }
.tile-minesweeper .tile-art { background: linear-gradient(135deg, #ff7b6b, #d63c3c); }
.tile-snake       .tile-art { background: linear-gradient(135deg, #a8e063, #56ab2f); }
.tile-memory      .tile-art { background: linear-gradient(135deg, #f66bd8, #a24bcf); }
.tile-breakout    .tile-art { background: linear-gradient(135deg, #8a7ff0, #5b4fe9); }
.tile-block-fit   .tile-art { background: linear-gradient(135deg, #36d1dc, #4a7fe0); }
.tile-whack-a-mole .tile-art { background: linear-gradient(135deg, #f2994a, #b95f22); }
.tile-word-search .tile-art { background: linear-gradient(135deg, #26c6a2, #0d8f7a); }
.tile-hangman .tile-art { background: linear-gradient(135deg, #74c7f5, #3a86c9); }
.tile-simon .tile-art { background: linear-gradient(135deg, #ff5f6d, #ffc371); }
.tile-spider-solitaire .tile-art { background: linear-gradient(135deg, #8a63d2, #4527a0); }
.tile-mahjong .tile-art { background: linear-gradient(135deg, #f0c04b, #c98a2f); }
.tile-fifteen-puzzle .tile-art { background: linear-gradient(135deg, #6c8ff5, #3d5bd9); }
.tile-water-sort .tile-art { background: linear-gradient(135deg, #38bdf8, #6366f1); }
.tile-number-match .tile-art { background: linear-gradient(135deg, #f472b6, #c026d3); }
.tile-yatzy .tile-art { background: linear-gradient(135deg, #fb7185, #be123c); }
.tile-connect-four .tile-art { background: linear-gradient(135deg, #facc15, #ea580c); }
.tile-checkers .tile-art { background: linear-gradient(135deg, #d97706, #7c2d12); }
.tile-block-drop .tile-art { background: linear-gradient(135deg, #22d3ee, #0e7490); }
.tile-gem-match .tile-art { background: linear-gradient(135deg, #a78bfa, #6d28d9); }
.tile-jigsaw .tile-art { background: linear-gradient(135deg, #4ade80, #0f766e); }
.tile-trivia .tile-art { background: linear-gradient(135deg, #60a5fa, #1d4ed8); }
.tile-golf-solitaire .tile-art { background: linear-gradient(135deg, #86efac, #15803d); }
.tile-hearts .tile-art { background: linear-gradient(135deg, #ff6a7a, #c81e3a); }
.tile-spades .tile-art { background: linear-gradient(135deg, #4b6cb7, #182848); }
.tile-gin-rummy .tile-art { background: linear-gradient(135deg, #43cea2, #185a9d); }
.tile-crazy-eights .tile-art { background: linear-gradient(135deg, #f7971e, #d62976); }
.tile-blackjack .tile-art { background: linear-gradient(135deg, #0f9b6c, #065a3c); }
.tile-video-poker .tile-art { background: linear-gradient(135deg, #8E2DE2, #4A00E0); }
.tile-reversi .tile-art { background: linear-gradient(135deg, #2ebf91, #0f6b52); }
.tile-dots-and-boxes .tile-art { background: linear-gradient(135deg, #4568dc, #b06ab3); }
.tile-battleship .tile-art { background: linear-gradient(135deg, #2c3e50, #1a2634); }
.tile-peg-solitaire .tile-art { background: linear-gradient(135deg, #6a3093, #a044ff); }
.tile-dominoes .tile-art { background: linear-gradient(135deg, #f0c04b, #c98a2f); }
.tile-backgammon .tile-art { background: linear-gradient(135deg, #c79081, #8a5a3b); }
.tile-picture-cross .tile-art { background: linear-gradient(135deg, #ec008c, #8e2de2); }
.tile-math-grid .tile-art { background: linear-gradient(135deg, #11998e, #38ef7d); }
.tile-pipe-link .tile-art { background: linear-gradient(135deg, #00b4db, #0083b0); }
.tile-slide-out .tile-art { background: linear-gradient(135deg, #f2994a, #c0392b); }
.tile-light-flip .tile-art { background: linear-gradient(135deg, #fceabb, #f8b500); }
.tile-tile-collapse .tile-art { background: linear-gradient(135deg, #8360c3, #2ebf91); }
.tile-fruit-drop .tile-art { background: linear-gradient(135deg, #f857a6, #ff5858); }
.tile-tower-stack .tile-art { background: linear-gradient(135deg, #396afc, #2948ff); }
.tile-hive-words .tile-art { background: linear-gradient(135deg, #f7b733, #fc4a1a); }
.tile-word-rush .tile-art { background: linear-gradient(135deg, #11998e, #38ef7d); }
.tile-word-maker .tile-art { background: linear-gradient(135deg, #4776E6, #8E54E9); }
.tile-astro-blast .tile-art { background: linear-gradient(135deg, #0f2027, #2c5364); }
.tile-plinko-drop .tile-art { background: linear-gradient(135deg, #eb3349, #f45c43); }

/* Collection rows: one horizontal strip that scrolls sideways (all screens) */
.game-grid.game-grid-row {
  display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px;
  scroll-snap-type: x proximity;
}
.game-grid-row::-webkit-scrollbar { display: none; }
.game-grid-row .tile { flex: 0 0 150px; aspect-ratio: 1 / 1; scroll-snap-align: start; }

/* ---------- Tile artwork (SVG thumbnails) ---------- */
.tile-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .2s ease;
}
img.tile-img { background: var(--paper-deep); }
/* The artwork is drawn with breathing room around the subject; zooming it in a
   touch crops that margin so the picture fills the tile edge to edge. */
.tile-img { transform: scale(1.18); transform-origin: 50% 50%; }
.tile:hover .tile-img { transform: scale(1.22); }   /* a whisper of life, no lunge */
.tile-hero .tile-img { transform: scale(1.02); }
.tile-hero:hover .tile-img { transform: scale(1.04); }
/* the sheen overlay is for emoji tiles; real artwork brings its own lighting */
.tile-art.has-art .tile-glow { display: none; }

/* ============================================================================
   Pre-play splash — the dark plate under glass
   ========================================================================== */
.game-splash {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
  transition: opacity .35s ease;
}
.game-splash.no-art { background: linear-gradient(160deg, #26221B, #17140F); }
.game-splash::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(23, 20, 15, .62);
  backdrop-filter: blur(3px);
}
/* The self-playing preview sits under a lighter scrim than the artwork did, so
   the motion reads clearly; the scrim darkens toward the centre for the text. */
.splash-preview {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  pointer-events: none; z-index: 0; background: #17140F;
  filter: saturate(1.05);
}
.game-splash.has-preview::before {
  background: radial-gradient(ellipse at center, rgba(23, 20, 15, .68), rgba(23, 20, 15, .3));
  backdrop-filter: none;
}
.game-splash.branding .splash-preview { display: none; }
.game-splash.gone { opacity: 0; pointer-events: none; }
.splash-inner { position: relative; z-index: 1; text-align: center; color: #FBF7EE; padding: 24px; max-width: 560px; }
.splash-emoji { font-size: 4rem; line-height: 1; margin-bottom: 10px; }
.splash-inner h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 10px; font-weight: 700;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}
.splash-inner p { margin: 0 0 22px; opacity: .95; font-size: 1rem; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.splash-play { font-size: 1.15rem; padding: 15px 52px; }
.splash-play:disabled { opacity: .55; cursor: default; }
.splash-status { margin-top: 14px; font-family: var(--ui); font-size: .89rem; opacity: .85; }

/* ---------- Branded load screen (shown while the game boots) ---------- */
.game-splash.branding::before { background: rgba(20, 17, 12, .92); backdrop-filter: blur(6px); }
.brand-screen {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 24px;
}
/* an author `display` beats the UA stylesheet's [hidden], so restore it explicitly */
.brand-screen[hidden], .splash-inner[hidden] { display: none; }
.brand-screen-mark {
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .45));
  animation: brandPop .5s ease both;
}
.brand-screen-word {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4.5vw, 2.1rem); font-weight: 700; color: #FBF7EE;
  letter-spacing: -.01em; text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
  animation: brandRise .45s .12s ease both;
}
.brand-screen-word span { color: #E8A878; }
.brand-screen-bar {
  width: min(200px, 60vw); height: 4px; border-radius: 999px; overflow: hidden;
  background: rgba(251, 247, 238, .22);
  animation: brandRise .45s .2s ease both;
}
.brand-screen-bar i {
  display: block; width: 40%; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--terra), #E8A878);
  animation: brandSlide 1.1s ease-in-out infinite;
}
/* Same living face as the page loader, so the logo behaves consistently. */
.bs-eye { transform-box: fill-box; transform-origin: center; animation: bsBlink 2.8s infinite; }
.bs-eye.r { animation-delay: .06s; }
.bs-smile { stroke-dasharray: 100; stroke-dashoffset: 100; animation: bsDraw 1.8s ease-in-out infinite; }
@keyframes bsBlink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
@keyframes bsDraw {
  0% { stroke-dashoffset: 100; }
  45% { stroke-dashoffset: 0; }
  72% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -100; }
}
@media (prefers-reduced-motion: reduce) {
  .bs-eye, .bs-smile { animation: none; }
  .bs-smile { stroke-dashoffset: 0; }
}
@keyframes brandPop  { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes brandRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes brandSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
@media (prefers-reduced-motion: reduce) {
  .brand-screen-mark, .brand-screen-word, .brand-screen-bar { animation: none; }
  .brand-screen-bar i { animation: none; width: 100%; }
}

/* ============================================================================
   Game page — the plate illustration in a print layout
   ========================================================================== */
.crumbs {
  margin-top: 18px;
  font-family: var(--ui); font-size: .8rem; font-weight: 600;
  letter-spacing: .04em; color: var(--muted);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.crumbs a { color: var(--ink-soft); padding: 4px 0; }
.crumbs a:hover { color: var(--terra-deep); }
.crumbs .crumb-current { color: var(--muted); }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.game-main { min-width: 0; }
.play-next { display: none; }
@media (min-width: 1100px) {
  .game-layout { grid-template-columns: minmax(0, 1fr) 230px; }
  .play-next { display: block; position: sticky; top: 96px; margin-top: 18px; }
}
.play-next-head {
  color: var(--ink); font-family: var(--serif); font-weight: 700; font-size: 1.1rem;
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--rule);
}
.play-next-item {
  display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto;
  column-gap: 12px; align-items: center;
  background: var(--card);
  border: 1px solid var(--rule-faint); border-radius: var(--radius);
  padding: 9px; margin-bottom: 8px; color: var(--ink); min-height: 48px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.play-next-item:hover { text-decoration: none; border-color: var(--rule-soft); box-shadow: var(--shadow); }
.play-next-item img, .play-next-dice { grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 6px; object-fit: cover; border: 1px solid var(--rule-faint); }
.play-next-dice { display: flex; align-items: center; justify-content: center; font-size: 1.8rem; background: var(--paper-deep); }
.play-next-title { font-family: var(--ui); font-weight: 700; font-size: .85rem; line-height: 1.25; }
.play-next-cat { font-family: var(--ui); font-size: .78rem; color: var(--muted); font-weight: 600; }

/* Caption-style title row above the plate */
.game-stage-wrap { margin-top: 20px; }
.game-title-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--rule);
}
.game-title-row h1 {
  font-size: 1.8rem; margin: 0; display: flex; align-items: center; gap: 10px;
  font-weight: 700; color: var(--ink); line-height: 1.2;
}
.game-title-row .plays { color: var(--muted); font-family: var(--ui); font-size: .82rem; font-weight: 600; letter-spacing: .02em; }

/* The dark game framed like a plate illustration: double hairline mat */
.game-stage {
  position: relative;
  background: #17140F;
  border-radius: 4px;
  overflow: hidden;
  height: min(78vh, 720px);
  height: min(78dvh, 720px);   /* dvh accounts for mobile browser chrome; vh does not */
  min-height: 420px;
  box-shadow:
    0 0 0 1px var(--rule),
    0 0 0 6px var(--card),
    0 0 0 7px var(--rule-soft),
    0 14px 30px rgba(31, 29, 26, .18);
  margin: 8px;                 /* room for the mat ring above */
}
.game-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.stage-bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; flex-wrap: wrap; padding: 16px 8px 10px;
}
.stage-bar-group { display: flex; gap: 8px; }
.like-btn .like-heart { display: inline-block; filter: grayscale(1); opacity: .65; transition: filter .2s, opacity .2s; }
.like-btn.liked { color: var(--blue); border-color: var(--blue); }
.like-btn.liked .like-heart { filter: none; opacity: 1; }
.dislike-btn { filter: grayscale(1); opacity: .8; }
.dislike-btn.disliked { filter: none; opacity: 1; color: var(--stamp); border-color: var(--stamp); }
.rating-pill {
  align-self: center;
  font-family: var(--ui); font-size: .78rem; font-weight: 700;
  color: var(--ink-soft); padding: 0 6px; letter-spacing: .02em;
}
.rating-pill[hidden] { display: none; }
.fav-btn .fav-star { color: var(--terra); font-size: 1.05rem; line-height: 1; }
.fav-btn.on { background: #FBEEDC; border-color: var(--terra); }
.stage-bar-group { flex-wrap: wrap; align-items: center; }
.stage-bar button {
  background: var(--card); color: var(--ink);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius); padding: 11px 18px; min-height: 48px;
  font-family: var(--ui); font-size: .82rem; cursor: pointer; font-weight: 700;
  letter-spacing: .02em;
  transition: border-color .2s ease, box-shadow .2s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.stage-bar button:hover { border-color: var(--rule); box-shadow: var(--shadow); }
.game-stage:fullscreen { height: 100%; max-height: none; border-radius: 0; margin: 0; }

/* Fallback fullscreen for browsers with no Fullscreen API on ordinary elements
   (notably iOS Safari, where only <video> can go fullscreen). */
.game-stage.faux-fullscreen {
  position: fixed; inset: 0; z-index: 9990;
  width: 100%; height: 100vh; height: 100dvh;
  max-height: none; min-height: 0;
  border-radius: 0; box-shadow: none; margin: 0;
}
body.faux-lock { overflow: hidden; }
.faux-exit {
  position: fixed; z-index: 9991;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  background: rgba(23, 20, 15, .78); color: #FBF7EE; border: 0;
  border-radius: 999px; padding: 12px 18px; min-height: 44px;
  font-family: var(--ui); font-weight: 700; font-size: .85rem;
  cursor: pointer; backdrop-filter: blur(6px);
}
.faux-exit:active { transform: scale(.96); }

/* ---------- About / How to play / Tips & Strategy: a joy to read ---------- */
.game-info {
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: 30px clamp(20px, 4vw, 44px) 34px;
  margin-top: 28px;
}
.game-info h2 {
  font-size: 1.4rem; margin: 34px 0 12px; font-weight: 700; color: var(--ink);
  padding-bottom: 8px; border-bottom: 1px solid var(--rule-soft);
  max-width: 68ch;
}
.game-info h2:first-child { margin-top: 0; }
.game-info p {
  color: var(--ink-soft); margin: 0 0 16px;
  max-width: 68ch; line-height: 1.7; font-size: 1rem;
}
.game-info .howto { white-space: pre-line; }
.game-meta {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px 20px; margin: 8px 0 20px; padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--rule-faint); border-radius: 6px;
}
.game-meta div { display: flex; flex-direction: column; gap: 2px; }
.game-meta dt {
  font-family: var(--ui); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted); font-weight: 700;
}
.game-meta dd { margin: 0; font-family: var(--ui); font-size: .85rem; font-weight: 600; color: var(--ink); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.tag {
  background: transparent; color: var(--blue);
  border: 1px solid rgba(34, 69, 126, .35);
  font-family: var(--ui); font-size: .74rem; font-weight: 700;
  padding: 5px 12px; border-radius: 999px; letter-spacing: .03em;
}

/* ============================================================================
   Ads
   ========================================================================== */
.ad-box { margin: 26px auto; text-align: center; min-height: 0; overflow: hidden; }
.ad-placeholder {
  background: var(--card); border: 1px dashed var(--rule-soft); border-radius: 6px;
  color: var(--muted); font-family: var(--ui); font-size: .78rem; padding: 34px 10px; max-width: 728px;
  margin: 0 auto;
}

/* ============================================================================
   Static pages
   ========================================================================== */
.page {
  background: var(--card);
  border: 1px solid var(--rule-soft); border-radius: var(--radius);
  padding: 32px clamp(20px, 4vw, 40px); margin: 32px 0;
}
.page h1 { margin-top: 0; font-weight: 700; font-size: 1.9rem; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.page h2 { font-size: 1.3rem; font-weight: 700; }
.page p, .page li { color: var(--ink-soft); max-width: 68ch; line-height: 1.7; }
.page input, .page textarea {
  border: 1px solid var(--rule-soft) !important; background: var(--paper) !important;
  color: var(--ink) !important; font-family: var(--ui) !important;
  border-radius: 6px !important; padding: 12px !important;
}
.page button[type="submit"] {
  background: var(--blue) !important; color: #fff !important;
  font-family: var(--ui) !important; font-weight: 700 !important;
  min-height: 48px !important; border-radius: var(--radius) !important;
  border: 0 !important; padding: 12px 28px !important; cursor: pointer;
}

/* ============================================================================
   Category hero — a section front
   ========================================================================== */
.hero { text-align: center; padding: 42px 8px 8px; }
.hero h1 {
  font-size: clamp(1.9rem, 5vw, 2.8rem); margin: 0 0 10px; font-weight: 700; color: var(--ink);
  display: inline-block; padding: 0 6px 12px; border-bottom: 3px double var(--rule);
}
.hero p { color: var(--muted); margin: 0; font-size: 1.02rem; }

/* ============================================================================
   Footer — the colophon
   ========================================================================== */
.site-footer {
  background: transparent; margin-top: 64px; padding: 0 0 44px;
  border-top: 3px double var(--rule);
}
.footer-inner { text-align: center; color: var(--ink-soft); padding-top: 26px; }
.footer-brand { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--ink); margin-bottom: 14px; }
.footer-links { display: flex; justify-content: center; gap: 8px 26px; flex-wrap: wrap; margin-bottom: 14px; }
.footer-links a {
  color: var(--ink-soft);
  font-family: var(--ui); font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 0; display: inline-block;
}
.footer-links a:hover { color: var(--terra-deep); }
.footer-copy { color: var(--muted); font-size: .78rem; font-family: var(--ui); }

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1150px) {
  .search input { width: 150px; }
  .search input:focus { width: 210px; }
  .random-btn span { display: none; }
}

@media (max-width: 640px) {
  html { font-size: 106.25%; }        /* 17px base on phones — still generous */
  /* 3 tiles across at 375px: 3×101 + 2×10 gap + 32 gutter = 355 ✓ */
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(101px, 1fr)); gap: 10px; }
  /* Keep the POPULAR stamp legible on narrow phones. */
  .tile-badge { top: 6px; left: 6px; font-size: 11px; padding: 3px 7px; border-width: 1.5px; }
  /* Full width on phones means no neighbour defines its row height, and its art
     is absolutely positioned — so give the hero an explicit shape of its own. */
  .tile-hero { grid-column: 1 / -1; grid-row: span 1; aspect-ratio: 3 / 2; }
  /* With only three columns a 2x2 tile would span oddly, so featured tiles are
     plain squares on phones. */
  .tile-featured:not(.tile-hero) { grid-column: span 1; grid-row: span 1; aspect-ratio: 1 / 1; }
  .tile-hero-overlay { padding: 44px 16px 14px; }
  .tile-hero {
    box-shadow: 0 0 0 1px var(--rule), 0 0 0 4px var(--paper), 0 0 0 5px var(--rule-soft), var(--shadow);
  }
  .btn-play { padding: 11px 22px; font-size: .92rem; min-height: 44px; }
  .tile-title { font-size: .78rem; }
  .section-head { margin: 34px 0 4px; }
  .section-head h2 { font-size: 1.3rem; }
  #trendSection { padding: 2px 12px 14px; margin: 38px 1px 6px; }

  /* Size off the space actually left below the header + title so the
     Restart/Fullscreen bar always stays on screen. That bar matters on touch:
     the game itself captures your finger, so it is the reliable place to drag
     the page. ~235px covers header, title row, bar and margins. */
  .game-stage {
    height: min(74vh, 640px);                        /* fallback for no dvh support */
    height: min(calc(100dvh - 235px), 560px);
    min-height: 300px;
    margin: 6px 5px;
    box-shadow:
      0 0 0 1px var(--rule),
      0 0 0 4px var(--card),
      0 0 0 5px var(--rule-soft),
      0 10px 22px rgba(31, 29, 26, .16);
  }
  .stage-bar { padding: 12px 5px 8px; gap: 6px; }
  .stage-bar-group { gap: 6px; }
  .stage-bar button { padding: 11px 13px; font-size: .78rem; min-height: 48px; }
  .game-title-row h1 { font-size: 1.4rem; }
  .game-info { padding: 22px 18px 26px; }

  /* Phone masthead: logo + tool buttons on the first row, category links on the
     second. The search input only appears when the search button is tapped, so
     the sticky header stays two rows tall and the game keeps its screen space. */
  .header-inner { flex-wrap: wrap; align-items: center; gap: 4px 9px; padding: 8px 14px 6px; }
  .logo { order: 1; font-size: 1.3rem; min-height: 44px; }
  .header-tools { order: 2; margin: 0 0 0 auto; }
  .nav { order: 3; }
  .search { display: none; order: 4; width: 100%; margin-bottom: 8px; }
  .search-open .search { display: flex; }
  .search-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border: 1px solid var(--rule-soft); border-radius: var(--radius);
    background: var(--card); font-size: 1rem; cursor: pointer;
  }
  .search-open .search-toggle { background: var(--paper-deep); border-color: var(--rule); }
  /* All four categories fit on one row; equal-width links give big tap targets. */
  .nav { width: 100%; gap: 0; padding: 0; overflow: visible; border-top: 1px solid var(--rule-faint); }
  .nav a {
    flex: 1 1 0; min-width: 0; justify-content: center; text-align: center;
    padding: 12px 2px; min-height: 46px; font-size: .78rem; letter-spacing: .05em;
  }
  .search input, .search input:focus { width: 100%; }
  .random-btn span { display: none; }
  .random-btn { padding: 12px 14px; min-height: 46px; }
  .search-results { left: 0; right: auto; width: 100%; }
  .game-meta { grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 14px; }
  .game-grid-row .tile { flex-basis: 122px; }
  .game-grid.game-grid-row { gap: 12px; }
  .fav-label, .rating-pill, .section-blurb { display: none; }
}

/* Very narrow phones (320): keep everything on the page, nothing sliced. */
@media (max-width: 355px) {
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .nav a { font-size: .74rem; letter-spacing: .02em; }
  .logo { font-size: 1.18rem; }
}