@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Bricolage+Grotesque:wght@400;500;700&family=JetBrains+Mono:wght@500&family=Nunito+Sans:wght@700&display=swap');

/* ════════════════════════════════════════════════════════════════════════════
   Design tokens — the client's Cosmos system, ported.

   Mirrors packages/client/src/styles/design-system.css :root, with the
   client's .surface-glass / .on-sky subtree re-point already folded in: the
   client needs that re-point because cream is its default, but here dark is
   the default, so the dark-scope values ARE the root values and there is no
   cream scope to protect. The one exception is --color-tile*, the letter-tile
   cream, which stays a physical-object colour.

   There is no build step — scripts/build.mjs copies src/ verbatim, so no
   modern colour function may appear here without a hand-written fallback,
   and every backdrop-filter needs its -webkit- twin spelled out. Every mixed
   colour in the client's palette is resolved to a literal rgba() below.

   ── The material vocabulary ────────────────────────────────────────────────
   The markup is copy-pasted across 15 pages with no templating, so a material
   is a shared *selector list*, not a class. There are seven; do not invent an
   eighth.

   Sky          html radial gradient + .page-grid starfield
                → html, .page-grid
   Glass card   --glass-bg, 1px solid --glass-edge, --glass-glow, --card-radius
                → .hero .panel .card .guide-nav .sv-hero .home-hero
                  .home-finder__panel .home-dict .wsearch__field-inner
   Well         nested inside glass: --color-surface / --color-surface-alt /
                --glass-bg-quiet, --color-edge hairline, --radius-base
                → .info-card .item-card .table-responsive .notice code
                  .sv-hero__stat .home-finder__field .wrow--open
                  .wrow__body-pad .skeleton
   Lit          well + --glass-edge-lit gold hairline + --glass-glow-lit
                → .info-card--tile .item-card--tile .home-dict--rules
   Bare on sky  starlight ramp, no fill
                → main copy, .home-feature .home-section-head .home-ticker
                  .site-footer .wrows/.wrow
   Chrome strip --chrome-scrim + --chrome-hairline + blur
                → .site-header, the mobile sticky .wsearch__field
   Cream object --color-tile*, unchanged
                → .gtile* only

   Glass inside glass double-darkens and double-edges: game-guide.html nests
   .info-card inside .panel 20+ times. The well/lit split is what keeps that
   from reading as boxes-in-boxes.

   .download-card is a glass recipe with no markup left (only its __aside
   renders), and .word-detail__* is a live family under a dead name — there is
   no dialog here. Neither name is evidence of a material.

   Blur belongs only on the chrome strip. game-guide.html carries 8 panels and
   20 cards; blurring those is 28 compositor layers on a 320px phone.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── The night sky ──
     The flat navy under the html gradient: what the browser paints on scroll
     overshoot and what the mobile sticky search bar has to occlude with.
     --color-sky-base is the client's name for the same value; both exist so a
     rule can name the job it means. */
  --color-sky-base: #0B1020;
  --color-bg: var(--color-sky-base);

  /* ── Surfaces & text ──
     The surfaces are translucent *wells*, not fills — they sit inside glass
     and lighten what is behind them rather than painting over it. Reaching for
     an opaque fill here paints a cream island on the night sky. */
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-surface-alt: rgba(255, 255, 255, 0.10);
  --color-warm: rgba(255, 255, 255, 0.10);
  --color-edge: rgba(255, 255, 255, 0.14);
  --color-text: #F3E7C9;
  --color-text-soft: #C9C3DC;
  --color-text-muted: #B7B1CC;
  --color-text-faint: #7E7893;

  /* Cream — warm text on glass, never a card fill. */
  --color-cream: #F3E7C9;
  --color-cream-lit: #FBEBC8;

  /* Starlight ramp — bare text on the night sky, where cream reads as an
     unlit card. */
  --color-sky-text: #E7E3F0;
  --color-sky-text-soft: #C9C3DC;
  --color-sky-text-muted: #B7B1CC;
  --color-sky-text-faint: #7E7893;

  /* Ink that sits on a filled surface rather than on the page. Both forward to
     the control-treatment tokens below — the selected-pill families on the
     search pages and the homepage name the job, not the treatment. */
  --color-selected-bg: var(--tabs-active-bg); /* the fill of a selected pill */
  --color-selected-fg: var(--tabs-active-fg); /* its label */

  /* ── Accents ──
     Sapphire steps up to its lit sibling #2E8FD8 everywhere it lands as TEXT
     or an outline: the base #1473C4 is only 3.73:1 on the sky. The filled
     button families never read --color-primary — they take the literal
     --btn-primary-bg / --brand-grad gradients below, whose darker stops are
     what keeps a cream label legible. That split is why the step-up costs no
     per-site edits. */
  --color-primary: #2E8FD8;
  --color-primary-deep: #0F5A9E;
  --color-accent: #2E8FD8;
  --color-accent-soft: #A9CBEC;
  --color-gold: #C8901E;
  --color-danger: #BE3A2C;
  --color-danger-lit: #F2705C;

  /* Tile / cream — letter tiles are physical objects, not surfaces that adapt
     to their scope, so this ramp does not flip with the palette. */
  --color-tile: #FFFCF2;
  --color-tile-ink: #191510;
  --color-tile-ink-soft: #4E4538;

  /* ── Glass card material ──
     The client's mixed gold/accent values resolved to literals. The `--lit` pair
     means "emphasis"; --glass-bg-quiet is the recessed well inside glass. */
  --glass-bg: linear-gradient(160deg, rgba(40, 52, 88, 0.55), rgba(9, 13, 26, 0.72));
  --glass-bg-quiet: rgba(20, 24, 40, 0.55);
  --glass-edge: rgba(200, 144, 30, 0.30);
  --glass-edge-lit: rgba(200, 144, 30, 0.70);
  --glass-glow: 0 0 16px rgba(46, 143, 216, 0.14), 0 10px 22px -14px rgba(0, 0, 0, 0.7);
  --glass-glow-lit: 0 0 22px rgba(200, 144, 30, 0.32), 0 10px 22px -12px rgba(0, 0, 0, 0.7);
  /* The client also carries a raised glass tier (--glass-bg-raised /
     --glass-blur-raised), a press wash and a modal scrim. None are ported:
     this site has no dialog, no popover and no tappable card, so each would
     be a declared token with no consumer. Add them back with their first use. */

  /* ── Chrome bars ── */
  --chrome-scrim: rgba(11, 16, 32, 0.72);
  --chrome-hairline: rgba(255, 255, 255, 0.10);

  /* ── Control treatment (rounded, gradient fills, soft drop shadows) ── */
  --btn-radius: 10px;
  --btn-active-transform: translateY(1px);
  --btn-primary-bg: linear-gradient(180deg, #2E8FD8 0%, #1473C4 58%, #0F5A9E 100%);
  --btn-primary-fg: #FAF4E6;
  --btn-primary-shadow: 0 8px 18px -7px rgba(15, 90, 158, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --btn-primary-shadow-active: 0 3px 8px -4px rgba(15, 90, 158, 0.5);
  /* Shared "you" gradient — the sapphire fill behind every selected control. */
  --brand-grad: linear-gradient(180deg, #2E8FD8 0%, #1473C4 100%);
  --tabs-active-bg: var(--brand-grad);
  --tabs-active-fg: var(--color-cream);

  /* Typography */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'Bricolage Grotesque', 'Inter Tight', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --font-tile: 'Nunito Sans', system-ui, sans-serif;

  --type-display-xl: 400 48px/1.0 var(--font-display);
  --type-display-lg: 400 36px/1.05 var(--font-display);
  --type-display-md: 400 28px/1.1 var(--font-display);
  --type-display-sm: 400 22px/1.2 var(--font-display);
  --type-display-xs: 400 18px/1.2 var(--font-display);
  --type-body-lg:    400 16px/1.6 var(--font-body);
  --type-body-md:    500 14px/1.55 var(--font-body);
  --type-body-sm:    400 12px/1.4 var(--font-body);
  --type-label:      700 10px/1.2 var(--font-body);
  --type-badge:      700 9px/1.2 var(--font-body);
  --type-mono-sm:    500 11px/1.2 var(--font-mono);

  /* Shape — 2px is the project signature and stays on ~50 call sites. Only
     the card families take --card-radius. */
  --radius-base: 2px;
  --card-radius: 14px;

  /* Shadows. --card-shadow is the soft card lift; --shadow-brand-lift is the
     sapphire tie for anything already wearing a --color-primary outline. */
  --card-shadow: 0 10px 24px -12px rgba(30, 27, 22, 0.35);
  --shadow-brand-lift: 0 0 0 3px rgba(20, 115, 196, 0.18);

  /* Spacing scale (4px base) */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-40: 40px;
  --space-48: 48px;

  /* Container */
  --max-width: 1024px;
  --site-header-h: 56px;
}

/* ════════════════════════════════════════════════════════════════════════════
   Resets, body, the night sky
   ──────────────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* The sky lives on `html`, not on the starfield host, so a visitor with JS off
   still gets the gradient. `fixed` keeps it from scrolling with the page.
   color-scheme: dark is one line here instead of fifteen meta tags, and gets
   UA form controls and scrollbars for free. */
html {
  scroll-behavior: smooth;
  color-scheme: dark;
  background-color: var(--color-bg);
  background-image: radial-gradient(ellipse at 50% 0%, #131A35 0%, #0B1020 55%, #060812 100%);
  background-attachment: fixed;
}

body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text);
  /* MUST stay transparent. A negative-z-index child paints at step 2 of the
     stacking order and a block-level background at step 4, so any fill here
     would paint straight over the whole starfield. */
  background: transparent;
  min-height: 100vh;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Starfield host ──
   Sits behind everything at z-index -1. Phase 5's starfield.js appends the
   three .star-layer children and generates their box-shadow star fields; the
   geometry, drift and twinkle are declared here so that phase's diff cannot
   touch a surface colour. */
.page-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Each layer is a tiny box whose long box-shadow list paints hundreds of
   stars; the ::after copy one field-height below is what makes the upward
   drift loop seamlessly. Only transform/opacity animate — repainting this
   many box-shadows per frame is not affordable. */
.star-layer {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  will-change: transform;
}

.star-layer::after {
  content: "";
  position: absolute;
  top: 2000px;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  box-shadow: inherit;
}

.star-layer--sm {
  width: 1px;
  height: 1px;
  animation: star-drift 200s linear infinite;
}

.star-layer--md {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  animation: star-drift 140s linear infinite;
}

.star-layer--lg {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  animation: star-drift 90s linear infinite, star-twinkle 5s ease-in-out infinite;
}

@keyframes star-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-2000px); }
}

@keyframes star-twinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

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

.wrapper {
  width: min(var(--max-width), 100% - 2rem);
  margin: 0 auto;
}

main {
  padding: var(--space-40) 0 var(--space-48);
}

/* ════════════════════════════════════════════════════════════════════════════
   Header / nav
   ──────────────────────────────────────────────────────────────────────────── */

/* One of the site's two blurred surfaces; the other is the mobile sticky search
   field, also a chrome strip. Everything else is a flat alpha tint —
   game-guide.html alone would otherwise be 28 compositor layers on a phone. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--chrome-scrim);
  border-bottom: 1px solid var(--chrome-hairline);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--space-16) 0;
}

.brand {
  font: var(--type-display-md);
  font-size: 22px;
  color: var(--color-text);
  letter-spacing: -0.005em;
}

.brand a {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

.brand a::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--color-primary);
  margin-right: var(--space-10);
  flex-shrink: 0;
  align-self: center;
  border-radius: var(--radius-base);
}

.brand__name {
  color: var(--color-text);
  transition: color 200ms ease;
}

.brand a:hover .brand__name {
  color: var(--color-primary);
}

.brand__tag {
  font: var(--type-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-left: var(--space-12);
  padding-left: var(--space-12);
  border-left: 1px solid var(--color-edge);
  align-self: center;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.nav-links a {
  font: var(--type-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-soft);
  text-decoration: none;
  padding: var(--space-8) var(--space-12);
  border: 1px solid transparent;
  border-radius: var(--radius-base);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.nav-links a:hover {
  color: var(--color-primary);
}

/* No fill: the sapphire outline is what marks the current page. A --color-warm
   wash here lightens the chrome scrim to rgb(34,38,51), which drops sapphire
   label text to 4.34:1 — under AA for a 10px nav link. */
.nav-links a[aria-current="page"] {
  color: var(--color-primary);
  border-color: var(--color-primary);
}


/* ════════════════════════════════════════════════════════════════════════════
   Typography
   ──────────────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  margin-top: 0;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

h1 { letter-spacing: -0.02em; }

p {
  margin-top: 0;
  color: var(--color-text);
}

strong {
  font-weight: 700;
  color: var(--color-text);
}

em {
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════════════
   Hero (game-guide, dictionary, terms, privacy)
   ──────────────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  border-radius: var(--card-radius);
  padding: clamp(1.6rem, 3.5vw, 2.4rem) clamp(1.4rem, 3vw, 2rem);
  margin-bottom: var(--space-24);
  box-shadow: var(--glass-glow);
}

.hero h1 {
  font: var(--type-display-xl);
  font-size: clamp(32px, 6vw, 48px);
  letter-spacing: -1px;
  margin-bottom: var(--space-16);
  color: var(--color-text);
}

.hero p {
  margin-bottom: 0;
  color: var(--color-text-soft);
  max-width: 66ch;
  font: var(--type-body-lg);
}

.hero p strong {
  color: var(--color-text);
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════════════
   Panels & cards
   ──────────────────────────────────────────────────────────────────────────── */

.panel {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  border-radius: var(--card-radius);
  padding: var(--space-24);
  margin-top: var(--space-20);
  box-shadow: var(--glass-glow);
}

.panel h2 {
  margin-bottom: var(--space-16);
  font: var(--type-display-lg);
  font-size: 30px;
  color: var(--color-text);
}

.panel h3 {
  margin-bottom: var(--space-8);
  font: var(--type-display-sm);
  color: var(--color-text);
}

.panel p,
.panel li {
  color: var(--color-text);
}

.panel p strong,
.panel li strong,
.panel td strong {
  color: var(--color-text);
  font-weight: 700;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-12);
}

.card {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  border-radius: var(--card-radius);
  padding: var(--space-16);
  box-shadow: var(--glass-glow);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    border-color 120ms ease;
}

/* The glow is the hover affordance — a card that only shifts 1px reads as
   dead. Lighting the gold edge is what says "actionable". */
.card:hover {
  transform: translate(-1px, -1px);
  border-color: var(--glass-edge-lit);
  box-shadow: var(--glass-glow-lit);
}

.card h3 {
  margin-bottom: var(--space-6);
  font: var(--type-display-sm);
  color: var(--color-text);
}

.card p {
  color: var(--color-text-soft);
  margin-bottom: 0;
  font: var(--type-body-md);
}

/* ════════════════════════════════════════════════════════════════════════════
   Badge
   ──────────────────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 4px 8px;
  font: var(--type-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-base);
  margin-bottom: var(--space-12);
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

.badge-row .badge {
  margin-bottom: 0;
}

.badge--muted {
  color: var(--color-text-muted);
  border-color: var(--color-edge);
}

/* ════════════════════════════════════════════════════════════════════════════
   Tables
   ──────────────────────────────────────────────────────────────────────────── */

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-12);
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-10) var(--space-12);
}

th {
  font: var(--type-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-soft);
  border-bottom: 1.5px solid var(--color-edge);
}

td {
  font: var(--type-body-md);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-edge);
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover td {
  background: var(--color-warm);
}

code.inline,
code {
  font: var(--type-mono-sm);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-base);
  padding: 1px 6px;
  color: var(--color-text);
}

/* ════════════════════════════════════════════════════════════════════════════
   Utilities
   ──────────────────────────────────────────────────────────────────────────── */

.small {
  font: var(--type-body-sm);
  color: var(--color-text-soft);
}

/* A well, so it recesses into the glass panel around it rather than reading
   as a second card. */
.notice {
  border: 1px solid var(--color-edge);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-12) var(--space-16);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font: var(--type-body-md);
  border-radius: var(--radius-base);
  margin: var(--space-12) 0;
}

/* Inline content links inside copy */
:where(.panel, .info-card, .item-card, .hero) a,
:where(.card) p a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--color-primary);
  transition: color 160ms ease;
}

:where(.panel, .info-card, .item-card, .hero) a:hover,
:where(.card) p a:hover {
  color: var(--color-accent-soft);
}

/* ════════════════════════════════════════════════════════════════════════════
   Footer
   ──────────────────────────────────────────────────────────────────────────── */

/* Bare on the sky — no fill, so it takes the starlight ramp rather than the
   cream one, which reads as an unlit card when nothing is behind it. */
.site-footer {
  margin-top: var(--space-48);
  padding: var(--space-30) 0 var(--space-30);
  border-top: 1px solid var(--color-edge);
  color: var(--color-sky-text-soft);
  font: var(--type-body-sm);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.4rem;
}

.site-footer__links {
  display: inline-flex;
  gap: var(--space-4);
}

.site-footer__links a {
  font: var(--type-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-sky-text-soft);
  text-decoration: none;
  padding: var(--space-6) var(--space-10);
  border: 1px solid transparent;
  border-radius: var(--radius-base);
  transition: color 160ms ease, border-color 160ms ease;
}

.site-footer__links a:hover {
  color: var(--color-primary);
}

.site-footer__links a[aria-current="page"] {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.site-footer__meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-16);
  font: var(--type-mono-sm);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-sky-text-muted);
}

.site-footer__meta a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-edge);
  text-underline-offset: 2px;
}

.site-footer__meta a:hover {
  color: var(--color-primary);
}

/* ════════════════════════════════════════════════════════════════════════════
   Focus ring
   ──────────────────────────────────────────────────────────────────────────── */

:where(a, button, input, textarea, select, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-base);
}

/* ════════════════════════════════════════════════════════════════════════════
   Scrollbar (WebKit) — thin, starlight on sky
   ──────────────────────────────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* A 14%-white hairline is what a *border* needs; a thumb has to be findable
   against the sky, so it takes the faint end of the starlight ramp instead. */
::-webkit-scrollbar-thumb {
  background: var(--color-sky-text-faint);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-sky-text-muted);
  background-clip: padding-box;
}

/* ════════════════════════════════════════════════════════════════════════════
   Guide layout (game-guide, dictionary, dictionary-sv)
   ──────────────────────────────────────────────────────────────────────────── */

.guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: var(--space-20);
  align-items: start;
}

.guide-nav {
  position: sticky;
  top: 5.25rem;
  padding: var(--space-16);
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  border-radius: var(--card-radius);
  box-shadow: var(--glass-glow);
}

.guide-nav-title {
  margin: 0 0 var(--space-12);
  font: var(--type-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.guide-nav nav {
  display: grid;
  gap: 2px;
}

.guide-nav a {
  display: block;
  padding: var(--space-8) var(--space-12);
  border-left: 2px solid transparent;
  color: var(--color-text-soft);
  text-decoration: none;
  font: var(--type-body-md);
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.guide-nav a:hover {
  color: var(--color-text);
  background: var(--color-surface-alt);
}

.guide-nav a[aria-current="location"] {
  border-left-color: var(--color-primary);
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.guide-content {
  min-width: 0;
}

.guide-section {
  scroll-margin-top: 5.75rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   Info / item cards
   ──────────────────────────────────────────────────────────────────────────── */

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-12);
}

.hero-facts {
  margin-top: var(--space-20);
}

/* Wells, not cards. game-guide.html nests these inside .panel 20+ times and
   dictionary.html does the same — glass inside glass double-darkens and gives
   the page two gold hairlines per box, so a nested card has to recess. */
.info-card,
.item-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-base);
  padding: var(--space-16);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    border-color 120ms ease;
}

.info-card:hover,
.item-card:hover {
  transform: translate(-1px, -1px);
  border-color: var(--glass-edge-lit);
  box-shadow: var(--glass-glow-lit);
}

.info-card h2,
.info-card h3,
.item-card h3 {
  margin-bottom: var(--space-8);
  font: var(--type-display-sm);
  color: var(--color-text);
}

.info-card p,
.item-card p {
  margin-bottom: 0;
  color: var(--color-text);
  font: var(--type-body-md);
}

/* Lit — the emphasis well. The gold hairline is what "this one matters" looks
   like; it used to be said with a cream fill, which on navy is a lit island.
   Cream is text here now, not a surface. */
.info-card--tile,
.item-card--tile {
  background: var(--glass-bg-quiet);
  border: 1px solid var(--glass-edge-lit);
  box-shadow: var(--glass-glow-lit);
  color: var(--color-text);
}

.info-card--tile:hover,
.item-card--tile:hover {
  background: var(--glass-bg);
  border-color: var(--glass-edge-lit);
  box-shadow: var(--glass-glow-lit);
}

.info-card--tile h2,
.info-card--tile h3,
.item-card--tile h3 {
  color: var(--color-cream-lit);
}

.info-card--tile p,
.item-card--tile p,
.info-card--tile li,
.item-card--tile li {
  color: var(--color-text);
}

.info-card--tile p strong,
.info-card--tile li strong,
.item-card--tile p strong,
.item-card--tile li strong {
  color: var(--color-cream-lit);
  font-weight: 700;
}

.compact-list {
  margin: var(--space-10) 0 0;
  padding-left: 1.15rem;
  color: var(--color-text);
}

.compact-list li {
  font: var(--type-body-md);
}

.compact-list li::marker {
  color: var(--color-text-muted);
}

.compact-list li + li {
  margin-top: var(--space-6);
}

.step-list {
  margin: var(--space-12) 0 0;
  padding-left: 1.25rem;
  color: var(--color-text);
}

.step-list li {
  font: var(--type-body-md);
}

.step-list li::marker {
  color: var(--color-primary);
  font-weight: 700;
}

.step-list li + li {
  margin-top: var(--space-8);
}

.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-12);
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-base);
  background: var(--color-surface);
}

.table-responsive table {
  min-width: 500px;
  margin-top: 0;
}

.table-responsive th,
.table-responsive td {
  padding: var(--space-12) var(--space-14);
}

/* ════════════════════════════════════════════════════════════════════════════
   Swedish dictionary page (dictionary-sv.html) — editorial hero
   ──────────────────────────────────────────────────────────────────────────── */

.sv-hero {
  position: relative;
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  border-radius: var(--card-radius);
  padding: clamp(1.6rem, 3.6vw, 2.6rem) clamp(1.4rem, 3vw, 2.4rem);
  margin-bottom: var(--space-24);
  box-shadow: var(--glass-glow);
}

.sv-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3.5vw, 2.6rem);
  align-items: center;
}

.sv-hero__lede {
  max-width: 48ch;
  font: var(--type-body-lg);
  color: var(--color-text-soft);
  margin: 0 0 var(--space-20);
}

.sv-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
}

/* A well inside .sv-hero's glass. It carried the page's heaviest letterpress
   as emphasis; the display number is what carries it now, so a second gold
   hairline inside the hero's own would only double-edge. */
.sv-hero__stat {
  position: relative;
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-base);
  padding: var(--space-24) var(--space-20) var(--space-20);
  background: var(--color-surface);
  text-align: center;
}

.sv-hero__stat-value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.5vw, 4.4rem);
  line-height: 1;
  color: var(--color-cream-lit);
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: baseline;
}

.sv-hero__stat-label {
  font: var(--type-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-10);
}

/* ════════════════════════════════════════════════════════════════════════════
   CTA buttons (mirror Arkiv .btn family)
   ──────────────────────────────────────────────────────────────────────────── */

.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-12) var(--space-16);
  border: 1.5px solid var(--color-edge);
  border-radius: var(--btn-radius);
  text-decoration: none;
  font: var(--type-body-md);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text);
  background: transparent;
  transition:
    transform 80ms ease,
    box-shadow 80ms ease,
    background 120ms ease;
}

.cta:hover {
  background: var(--color-warm);
}

.cta:active {
  transform: var(--btn-active-transform);
}

.cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-family: var(--font-display);
  font-size: 18px;
  flex-shrink: 0;
}

.cta__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  gap: var(--space-2);
}

.cta__title {
  font: var(--type-body-md);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: inherit;
}

.cta__title code {
  font: var(--type-mono-sm);
  letter-spacing: 0;
  text-transform: none;
}

.cta__sub {
  font: var(--type-mono-sm);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* The filled families take the literal --btn-primary-bg gradient rather than
   --color-primary. That is what lets --color-primary step up to the lit
   sapphire for its 26 text sites without dropping a cream label onto a fill
   too light to carry it. */
.cta--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: transparent;
  box-shadow: var(--btn-primary-shadow);
}

.cta--primary:hover {
  filter: brightness(1.08);
}

.cta--primary:active {
  transform: var(--btn-active-transform);
  box-shadow: var(--btn-primary-shadow-active);
}

.cta--primary .cta__icon {
  color: var(--btn-primary-fg);
}

/* Was a hardcoded cream at 0.78. On a saturated fill the dimming cost more
   contrast than the de-emphasis was worth — the mono face, the smaller size
   and the tracking already say "secondary". */
.cta--primary .cta__sub {
  color: var(--btn-primary-fg);
}

.cta--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-edge);
}

.cta--ghost:hover {
  background: var(--color-warm);
  border-color: var(--glass-edge-lit);
  box-shadow: var(--glass-glow);
  transform: translate(-1px, -1px);
}

.cta--ghost:active {
  transform: var(--btn-active-transform);
  box-shadow: none;
}

.cta--ghost .cta__icon {
  color: var(--color-text);
}

.cta--ghost .cta__sub {
  color: var(--color-text-muted);
}

/* ════════════════════════════════════════════════════════════════════════════
   Generic .btn-primary / .btn-ghost utilities
   ──────────────────────────────────────────────────────────────────────────── */

.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-20);
  border-radius: var(--btn-radius);
  font: var(--type-body-md);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 80ms ease, background 120ms ease;
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border: 1.5px solid transparent;
  box-shadow: var(--btn-primary-shadow);
}

.btn-primary:hover {
  filter: brightness(1.08);
}

.btn-primary:active {
  transform: var(--btn-active-transform);
  box-shadow: var(--btn-primary-shadow-active);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-edge);
}

.btn-ghost:hover {
  background: var(--color-warm);
  border-color: var(--glass-edge-lit);
}

.btn-ghost:active {
  background: var(--color-warm);
  transform: var(--btn-active-transform);
}

/* ════════════════════════════════════════════════════════════════════════════
   Word detail — the metadata body rendered inside an expanded result row

   There is no dialog. The `word-detail` name is a fossil from a `<dialog>` the
   search pages dropped; what survived is the metadata renderer, whose output
   (`dict-search.js` / `dict-search-da.js` build these six classes and no
   others) is appended into `.wrow__body-pad`. So these rules dress a *well*
   inside the row, not a raised surface — the row's own well supplies the fill
   and the hairline, and this layer only sets type and rhythm.
   ──────────────────────────────────────────────────────────────────────────── */

.word-detail__eyebrow {
  font: var(--type-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin: 0 0 var(--space-12);
}

.word-detail__section {
  margin: 0 0 var(--space-16);
}

.word-detail__section:last-child {
  margin-bottom: 0;
}

.word-detail__section-title {
  font: var(--type-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin: 0 0 var(--space-8);
}

.word-detail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.word-detail__chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: 4px 10px;
  border-radius: var(--radius-base);
  border: 1px solid currentColor;
  background: transparent;
  color: var(--color-text);
  font: var(--type-mono-sm);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.word-detail__forms {
  font: var(--type-mono-sm);
  color: var(--color-text);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   Download card (dictionary-sv)
   ──────────────────────────────────────────────────────────────────────────── */

.download-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-20);
  padding: var(--space-20) var(--space-24);
  margin: var(--space-16) 0 var(--space-24);
  border: 1px solid var(--glass-edge);
  border-radius: var(--card-radius);
  background: var(--glass-bg);
  box-shadow: var(--glass-glow);
}

.download-card .download-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--color-cream-lit);
  margin: 0 0 var(--space-10);
}

.download-card__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-16);
}

.download-card__meta li {
  font: var(--type-body-sm);
  color: var(--color-text-soft);
  position: relative;
  padding-right: var(--space-16);
}

.download-card__meta li::after {
  content: "·";
  position: absolute;
  right: 0;
  color: var(--color-text-muted);
}

.download-card__meta li:last-child {
  padding-right: 0;
}

.download-card__meta li:last-child::after {
  display: none;
}

.download-card .download-card__meta strong {
  color: var(--color-text);
  font-weight: 700;
}

.download-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-14) var(--space-20);
  border-radius: var(--btn-radius);
  font: var(--type-body-md);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  text-decoration: none;
  border: 1.5px solid transparent;
  box-shadow: var(--btn-primary-shadow);
  transition: transform 80ms ease, box-shadow 80ms ease, background 120ms ease;
}

.download-card__cta:hover {
  filter: brightness(1.08);
}

.download-card__cta:active {
  transform: var(--btn-active-transform);
  box-shadow: var(--btn-primary-shadow-active);
}

.download-card__cta span {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0;
}

.download-card__aside {
  margin: var(--space-12) 0 0;
  color: var(--color-text-soft);
  font: var(--type-body-sm);
}

.download-card__aside a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.download-card__aside a:hover {
  color: var(--color-accent-soft);
}

/* ════════════════════════════════════════════════════════════════════════════
   Responsive (general)
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .sv-hero__grid {
    grid-template-columns: 1fr;
  }

  .sv-hero__stat {
    order: -1;
    max-width: 360px;
    margin: 0 auto;
    width: 100%;
  }

  .download-card {
    grid-template-columns: 1fr;
  }

  .download-card__cta {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .sv-hero {
    padding: var(--space-20) var(--space-16);
  }
}

@media (max-width: 480px) {
  .sv-hero {
    padding: var(--space-16);
  }

  .sv-hero__stat {
    padding: var(--space-16);
  }

  .download-card {
    padding: var(--space-16);
  }
}

@media (max-width: 768px) {
  /* Header stacks brand + nav vertically below this breakpoint, so the
     sticky-offset token has to grow to match the taller header. */
  :root {
    --site-header-h: 96px;
  }

  .header-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  /* Once the nav stacks below the brand, the items have to fit the full
     wrapper width on one row. Pull the link padding flush so OVERVIEW's
     text edge aligns with the brand's left edge — keep the negative
     margin in lockstep with the link's horizontal padding so the
     alignment holds at every breakpoint. */
  .nav-links {
    margin-left: calc(-1 * var(--space-10));
    width: calc(100% + var(--space-10));
  }

  .nav-links a {
    font-size: 9px;
    letter-spacing: 1.5px;
    padding: var(--space-6) var(--space-10);
  }

  .hero {
    padding: var(--space-20);
  }

  .panel {
    padding: var(--space-16);
  }

  .guide-layout {
    grid-template-columns: 1fr;
  }

  .guide-nav {
    position: static;
  }

  .card-grid,
  .info-grid,
  .item-grid {
    grid-template-columns: 1fr;
  }

  th,
  td {
    font: var(--type-body-md);
    padding: var(--space-8) var(--space-10);
  }

  th {
    font: var(--type-label);
    letter-spacing: 2px;
  }
}

@media (max-width: 480px) {
  .wrapper {
    width: min(var(--max-width), 100% - 1rem);
  }

  .hero {
    padding: var(--space-16);
  }

  .hero h1 {
    font-size: 28px;
  }

  .panel {
    padding: var(--space-14);
  }

  .panel h2 {
    font-size: 24px;
  }

  body {
    font-size: 13px;
  }

  .badge {
    font-size: 9px;
    padding: 3px 7px;
    letter-spacing: 1.5px;
  }

  .info-card,
  .item-card,
  .card {
    padding: var(--space-14);
  }

  .nav-links {
    margin-left: calc(-1 * var(--space-8));
    width: calc(100% + var(--space-8));
  }

  .nav-links a {
    padding: var(--space-6) var(--space-8);
  }

  .brand {
    font-size: 18px;
  }

  .brand__tag {
    font-size: 9px;
    letter-spacing: 1.5px;
    padding-left: var(--space-8);
    margin-left: var(--space-8);
  }

  th,
  td {
    padding: var(--space-6) var(--space-8);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Dedicated word search page (search-sv.html)
   ──────────────────────────────────────────────────────────────────────────── */

.wsearch {
  padding: var(--space-30) 0 var(--space-48);
}

.wsearch__field {
  position: relative;
  margin-bottom: var(--space-20);
}

.wsearch__field-inner {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  column-gap: var(--space-14);
  padding: var(--space-14) var(--space-20);
  border-radius: var(--card-radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-glow);
  transition: border-color 120ms ease, box-shadow 120ms ease, padding 220ms ease;
}

.wsearch__field-inner:focus-within {
  border-color: var(--glass-edge-lit);
  box-shadow: var(--shadow-brand-lift), var(--glass-glow);
}

.wsearch__icon {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 28px);
  color: var(--color-text);
  line-height: 1;
  width: 1.4em;
  text-align: center;
  flex-shrink: 0;
  user-select: none;
  transition: color 200ms ease, transform 220ms ease;
}

.wsearch__field-inner:focus-within .wsearch__icon {
  color: var(--color-primary);
}

.wsearch__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 36px);
  letter-spacing: -0.01em;
  padding: var(--space-4) 0;
  caret-color: var(--color-primary);
  transition: font-size 220ms ease;
}

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

.wsearch__input::-webkit-search-cancel-button {
  appearance: none;
  display: none;
}

/* Clear button. Hidden by default — JS toggles `.wsearch__clear--shown`
   when the input has text and animates opacity/scale via GSAP. */
.wsearch__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: calc(-1 * var(--space-8)) 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-base);
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: color 120ms ease, background 120ms ease;
}

.wsearch__clear--shown {
  pointer-events: auto;
}

.wsearch__clear:hover {
  color: var(--color-primary);
  background: var(--color-warm);
}

.wsearch__clear:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.wsearch__clear svg {
  display: block;
}

.wsearch__status {
  font: var(--type-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  padding-left: var(--space-12);
  border-left: 1px solid var(--color-edge);
  transition: color 180ms ease;
}

.wsearch__status[data-tone="ready"]   { color: var(--color-accent); }
.wsearch__status[data-tone="loading"] { color: var(--color-sky-text-muted); }
.wsearch__status[data-tone="error"]   { color: var(--color-danger-lit); }

@media (max-width: 560px) {
  .wsearch {
    padding: var(--space-20) 0 var(--space-48);
  }

  .wsearch__field {
    position: sticky;
    top: var(--site-header-h);
    z-index: 5;
    margin: 0 0 var(--space-12);
    padding: var(--space-8) 0;
    /* A chrome strip, not a card: rows scroll under it, so it frosts them
       rather than punching a flat navy patch. The second and last blur on the
       site — affordable because both are full-width bars, not a layer per
       row. */
    background: var(--chrome-scrim);
    border-bottom: 1px solid var(--chrome-hairline);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--glass-glow);
    border-radius: var(--radius-base);
    /* `position: sticky` is broken when an ancestor has a `transform`.
       GSAP animates `.wsearch__field-inner` (not the sticky parent) so
       no transform lives here — preserves iOS Safari behaviour. */
  }

  .wsearch__field-inner {
    position: relative;
    grid-template-columns: auto 1fr auto;
    column-gap: var(--space-8);
    padding: var(--space-16) var(--space-12) var(--space-10);
  }

  .wsearch__icon {
    font-size: 22px;
  }

  .wsearch__input {
    font-size: 22px;
    padding: var(--space-2) 0;
  }

  .wsearch__status {
    position: absolute;
    top: var(--space-4);
    right: var(--space-10);
    padding-left: 0;
    border-left: 0;
    font-size: 9px;
    letter-spacing: 1.5px;
  }

  .wsearch__status[data-state="initial"] {
    display: none;
  }

  /* Mobile scroll-compact: triggered by JS toggling .wsearch__field--compact
     once the user scrolls past 24px. Smaller padding + smaller input +
     shallower shadow give a "settled" feel as the page scrolls. */
  .wsearch__field--compact {
    box-shadow: var(--card-shadow);
  }

  .wsearch__field--compact .wsearch__field-inner {
    padding: var(--space-8) var(--space-12) var(--space-6);
  }

  .wsearch__field--compact .wsearch__input {
    font-size: 18px;
  }

  .wsearch__field--compact .wsearch__icon {
    font-size: 18px;
  }

  .wsearch__mode {
    margin: var(--space-8) var(--space-12) 0;
    padding-left: 0;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .wsearch__mode::-webkit-scrollbar {
    display: none;
  }

  .wsearch__mode-item {
    flex: 0 0 auto;
  }
}

/* Mode pills + sliding indicator */

.wsearch__mode {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: var(--space-12) 0 0;
  padding-left: 2px;
}

/* The indicator is positioned by JS (Flip animates between pills). It
   sits below the pill text via z-index so the active label reads
   inverted. No border: it is sized to the pill's border-box rect, and the
   pill's own hairline already draws on top of it — a border here would only
   flash a stray ring mid-Flip and paint a 3px dot before JS places it. */
.wsearch__mode-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background: var(--color-selected-bg);
  border-radius: var(--radius-base);
  z-index: 0;
  pointer-events: none;
}

.wsearch__mode-item {
  display: inline-flex;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.wsearch__mode-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.wsearch__mode-item span {
  display: inline-flex;
  align-items: center;
  font: var(--type-body-md);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-sky-text);
  padding: var(--space-6) var(--space-12);
  border: 1.5px solid var(--color-edge);
  border-radius: var(--radius-base);
  background: transparent;
  transition: color 200ms ease, background 120ms ease, border-color 120ms ease;
  position: relative;
  z-index: 1;
}

.wsearch__mode-item:hover span {
  background: var(--color-warm);
  border-color: var(--color-sky-text-faint);
}

.wsearch__mode-item input:checked + span {
  color: var(--color-selected-fg);
  background: transparent;
}

.wsearch__mode-item input:focus-visible + span {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Results region */

.wsearch__results {
  margin-top: var(--space-20);
  min-height: 260px;
}

.wresults__count {
  font: var(--type-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-sky-text-muted);
  margin: 0 0 var(--space-12);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--color-edge);
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.wresults__count strong {
  color: var(--color-accent);
  font-weight: 700;
}

.wresults__count code {
  font: var(--type-mono-sm);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-base);
  padding: 1px 6px;
  color: var(--color-text);
  text-transform: none;
  letter-spacing: 0;
}

.wresults__overflow {
  margin-left: auto;
  color: var(--color-sky-text-soft);
}

/* Accordion list — body height is owned by GSAP.

   Bare rows on the sky, deliberately not glass cards: a query can return
   hundreds of them, and a glass gradient per row is a compositor layer per
   row. Hairlines and the starlight ramp carry the structure instead. */

.wrows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-edge);
}

.wrow {
  position: relative;
  border-bottom: 1px solid var(--color-edge);
  transition: background 120ms ease;
}

/* Three distinct steps, in order: a hovered row lifts off the sky, an open row
   lifts further, and its body sinks back below both. */
.wrow:has(.wrow__header:hover) {
  background: var(--color-surface);
}

.wrow--open {
  background: var(--color-surface-alt);
  border-radius: var(--radius-base);
}

.wrow__header {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: baseline;
  gap: var(--space-14);
  padding: var(--space-14) var(--space-16);
  color: inherit;
  text-align: left;
  font: inherit;
}

.wrow__header--static {
  cursor: default;
  grid-template-columns: auto 1fr auto;
}

.wrow:has(.wrow__header--static:hover) {
  background: transparent;
}

.wrow__header:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius: var(--radius-base);
}

.wrow__ordinal {
  font: var(--type-mono-sm);
  letter-spacing: 1.5px;
  color: var(--color-sky-text-muted);
  min-width: 2.2em;
  font-variant-numeric: tabular-nums;
}

.wrow__word {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: -0.005em;
  color: var(--color-sky-text);
  line-height: 1.15;
  word-break: break-word;
}

.wrow__meta {
  font: var(--type-mono-sm);
  letter-spacing: 0.5px;
  color: var(--color-sky-text-muted);
  text-align: right;
  white-space: nowrap;
}

/* Tile score for the word — same per-language values as the homepage tile
   preview (lib/tile-data.js), which mirrors each dictionary's config.json. */
.wrow__score {
  justify-self: end;
  align-self: center;
  font: var(--type-mono-sm);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-base);
  padding: 2px 6px;
  white-space: nowrap;
}

/* Caret rotation is owned by GSAP. The color shift on open is still
   declarative — it's a static state hint, not an animation. */
.wrow__caret {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--color-sky-text-muted);
  line-height: 1;
  padding-left: var(--space-4);
  transform-origin: center center;
}

.wrow--open .wrow__caret {
  color: var(--color-accent);
}

.wrow__body-inner {
  overflow: hidden;
  height: 0;
}

/* The well: the body sinks back below the open row's lift, so the expanded
   detail reads as recessed rather than as a second card stacked on the list. */
.wrow__body-pad {
  padding: var(--space-16) var(--space-16) var(--space-20) calc(var(--space-16) + 2.2em + var(--space-14));
  border-top: 1px solid var(--color-edge);
  background: var(--glass-bg-quiet);
}

@media (max-width: 560px) {
  .wrow__header {
    grid-template-columns: auto 1fr auto auto;
    gap: var(--space-10);
    padding: var(--space-12);
  }
  .wrow__header--static {
    grid-template-columns: auto 1fr auto;
  }
  .wrow__meta {
    display: none;
  }
  .wrow__body-pad {
    padding: var(--space-14) var(--space-12);
  }
}

/* Empty / loading / error */

.wresults__empty,
.wresults__loading,
.wresults__error {
  padding: var(--space-48) var(--space-16);
  text-align: center;
}

.wresults__empty-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 28px);
  color: var(--color-sky-text);
  margin: 0 0 var(--space-8);
}

.wresults__empty-title code {
  font: var(--type-mono-sm);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-base);
  padding: 2px 8px;
  color: var(--color-text);
  font-style: normal;
}

/* Each char of the query in the empty state gets its own span so GSAP
   can yoyo them with a random stagger. */
.wresults__empty-letter {
  display: inline-block;
  will-change: transform;
}

.wresults__empty-hint,
.wresults__loading-text,
.wresults__error-text {
  font: var(--type-body-md);
  color: var(--color-sky-text-soft);
  margin: 0;
}

.wresults__error-text {
  color: var(--color-danger-lit);
  font-style: italic;
}

/* Loading skeleton (replaces the old pulsing dots). The shimmer band is
   tweened via GSAP backgroundPositionX in search-animations.js. */
.wrows--skeleton {
  border-top: 1px solid var(--color-edge);
}

.wrow--skeleton {
  border-bottom: 1px solid var(--color-edge);
  pointer-events: none;
}

/* The crest is an explicit rgba rather than --color-surface-alt: the two
   surface tokens are four points of alpha apart, and over navy that difference
   is invisible — the band has to travel a much wider range to read as a
   shimmer at all. */
.skeleton {
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--color-surface) 0%,
    rgba(255, 255, 255, 0.20) 40%,
    var(--color-surface) 80%
  );
  background-size: 220% 100%;
  background-position-x: 220%;
  background-repeat: no-repeat;
  border-radius: var(--radius-base);
  color: transparent;
  user-select: none;
  vertical-align: middle;
}

.skeleton--ordinal {
  width: 2.2em;
  height: 10px;
}

.skeleton--word {
  width: 60%;
  height: 22px;
}

.skeleton--meta {
  width: 80px;
  height: 10px;
}

@media (max-width: 560px) {
  .skeleton--meta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wsearch__icon,
  .wsearch__input,
  .wsearch__field-inner,
  .wsearch__status,
  .wsearch__clear,
  .wsearch__mode-item span {
    transition: none;
  }
  .wresults__empty-letter {
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Utilities (homepage)
   ──────────────────────────────────────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   Game tile — hero wordmark + word-finder preview
   ──────────────────────────────────────────────────────────────────────────── */

/* Tile body mirrors the game's tile.svg texture: diagonal cream gradient
   with a bevelled edge — light catching the top/left, shade settling on
   the bottom/right — inside a dark outline. No drop shadow. The cream
   stays fixed across themes, exactly like in-game tiles. */
.gtile {
  --gtile-size: clamp(46px, 11vw, 76px);
  --gtile-bevel: max(2px, calc(var(--gtile-size) * 0.06));
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--gtile-size);
  height: var(--gtile-size);
  background: linear-gradient(135deg, #FAF9F6 0%, #F3F0E8 50%, #E7E2D5 100%);
  border: 1.5px solid var(--color-tile-ink);
  border-radius: var(--radius-base);
  box-shadow:
    inset var(--gtile-bevel) var(--gtile-bevel) 0 rgba(255, 255, 255, 0.8),
    inset calc(-1 * var(--gtile-bevel)) calc(-1 * var(--gtile-bevel)) 0 rgba(82, 71, 50, 0.28);
  user-select: none;
}

/* Letter styling mirrors the game's tile renderer: Nunito Sans 700 at
   0.55× tile size (tile-renderer.ts), JetBrains Mono for the points. */
.gtile__letter {
  font-family: var(--font-tile);
  font-weight: 700;
  font-size: calc(var(--gtile-size) * 0.55);
  line-height: 1;
  color: var(--color-tile-ink);
}

.gtile__pts {
  position: absolute;
  right: calc(var(--gtile-size) * 0.09);
  bottom: calc(var(--gtile-size) * 0.07);
  font: var(--type-mono-sm);
  font-size: max(8px, calc(var(--gtile-size) * 0.17));
  line-height: 1;
  color: var(--color-tile-ink-soft);
}

/* Gem tiles — the three A's of the wordmark wear the Alfa Power gem
   textures (copied from the game client). The square tile chrome drops
   away; the letter sits embossed on the gem face. */
.gtile--gem {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.gtile--gem img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Gem letters mirror the game's Alfa Power tiles: white glyph with an ink
   outline (no shadow), shifted onto each gem's inner-face centre
   (whiteLetterEffects + alfaLetterYOffset in tile-renderer.ts — keep the
   per-gem nudges below in sync with ALFA_FACE_NUDGE_BY_TIER there).
   Stroke is centered on the glyph edge; paint-order keeps the inner half
   under the white fill, so the visible outline is half the stroke width. */
.gtile--gem .gtile__letter {
  --gtile-stroke: max(3px, calc(var(--gtile-size) * 0.066));
  position: relative;
  z-index: 1;
  /* 0.5× tile (vs 0.55 on plain tiles) so the capital keeps clear of the
     gem's bevel ring — mirrors ALFA_LETTER_FONT_SCALE in tile-renderer.ts. */
  font-size: calc(var(--gtile-size) * 0.5);
  color: #ffffff;
  transform: translateY(calc(var(--gtile-size) * var(--gem-nudge, 0)));
  -webkit-text-stroke: var(--gtile-stroke) #191510;
  paint-order: stroke fill;
}

/* Pentagon's face sits high (deep bottom bevel), hexagon's and septagon's
   slightly high. */
.gtile--gem-lvl1 { --gem-nudge: -0.05; }
.gtile--gem-lvl2 { --gem-nudge: -0.01; }
.gtile--gem-lvl3 { --gem-nudge: -0.02; }

.gtile--mini {
  --gtile-size: clamp(30px, 8vw, 42px);
}

/* ════════════════════════════════════════════════════════════════════════════
   Home hero
   ──────────────────────────────────────────────────────────────────────────── */

.home-hero {
  position: relative;
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  border-radius: var(--card-radius);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
  margin-bottom: var(--space-24);
  box-shadow: var(--glass-glow);
}

.home-hero__content {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-base);
  background: transparent;
  font: var(--type-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-20);
}

.home-hero__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}

.home-hero__title {
  margin: 0 0 var(--space-16);
}

.home-wordmark {
  position: relative; /* anchors .home-wordmark__shine + the offsetLeft mask math */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(clamp(46px, 11vw, 76px) * 0.16);
}

.home-wordmark__row {
  display: flex;
  gap: clamp(4px, 1vw, 9px);
}

/* ── Hero wordmark = the in-game AppLogo.vue ────────────────────────────────
   The hero tiles use the real tile.svg face (not the CSS gradient) and mirror
   the client logo's bevel, point styling, gem sparkles, drop choreography, and
   diagonal shine sweep so the marketing logo is the same art and motion the
   game ships. Drop + twinkle + mask are driven by heroEntranceTimeline. */
.home-wordmark .gtile {
  will-change: transform;
}

.home-wordmark .gtile:not(.gtile--gem) {
  background: url("./assets/tile.svg") no-repeat;
  background-size: 100% 100%;
  border: 1.5px solid #191510;
  box-shadow:
    inset var(--gtile-bevel) var(--gtile-bevel) 0 rgba(255, 255, 255, 0.5),
    inset calc(-1 * var(--gtile-bevel)) calc(-1 * var(--gtile-bevel)) 0 rgba(82, 71, 50, 0.2);
}

/* Point value mirrors AppLogo.vue: tile font (not mono), soft ink at 0.6. */
.home-wordmark .gtile__pts {
  right: calc(var(--gtile-size) * 0.1);
  bottom: calc(var(--gtile-size) * 0.06);
  font-family: var(--font-tile);
  font-weight: 600;
  font-size: max(7px, calc(var(--gtile-size) * 0.24));
  line-height: 1;
  color: #191510;
  opacity: 0.6;
}

/* Idle twinkle — a small 4-point sparkle GSAP pops on each gem face. Hidden
   until GSAP drives it, so it stays dark under prefers-reduced-motion. Scoped
   to the hero wordmark since sparkles only ever exist on its gem tiles. */
.home-wordmark .gtile__sparkle {
  position: absolute;
  width: 24%;
  height: 24%;
  transform: scale(0);
  transform-origin: center;
  opacity: 0;
  background: #ffffff;
  clip-path: polygon(50% 0%, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0% 50%, 41% 41%);
  filter: drop-shadow(0 0 calc(var(--gtile-size) * 0.05) rgba(255, 255, 255, 0.9));
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
}

/* Three hand-placed light-catch spots, each on a gem facet clear of the glyph. */
.home-wordmark .gtile--gem-lvl1 .gtile__sparkle { top: 16%; left: 14%; }
.home-wordmark .gtile--gem-lvl2 .gtile__sparkle { top: 16%; left: 62%; }
.home-wordmark .gtile--gem-lvl3 .gtile__sparkle { top: 58%; left: 60%; }

/* One diagonal light wave sweeps the whole wordmark top-left → bottom-right on
   a 10s loop. Its mask is built in JS from the settled tile rects + gem
   silhouettes (heroEntranceTimeline) so the wavefront is only ever visible on
   the tiles, never the gaps behind them. */
.home-wordmark__shine {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.3) 44%,
    rgba(255, 255, 255, 0) 47%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.55) 55%,
    rgba(255, 255, 255, 0) 60%
  );
  background-repeat: no-repeat;
  background-size: 300% 300%;
  background-position: 100% 100%;
  mix-blend-mode: screen;
  will-change: background-position;
  animation: home-wordmark-shine 10s ease-in-out 1.4s infinite;
}

@keyframes home-wordmark-shine {
  0%,
  9% {
    background-position: 100% 100%;
  }
  21% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% 0%;
  }
}

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

.home-hero__sub {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-top: var(--space-20);
}

.home-hero__sub em {
  font-style: italic;
  color: var(--color-primary);
}

.home-hero__lede {
  max-width: 44ch;
  font: var(--type-body-lg);
  color: var(--color-text-soft);
  margin: var(--space-14) auto var(--space-24);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-10);
  margin-bottom: var(--space-24);
}

.home-hero__roadmap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  justify-content: center;
  gap: var(--space-12) var(--space-30);
  border-top: 1px solid var(--color-edge);
  padding-top: var(--space-16);
}

.home-hero__platform {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
  text-align: left;
}

/* The two official badges ship at different aspect ratios (3.375 vs 2.99), so
   matching on height alone leaves the Play badge ~13% wider and pushes the two
   text columns out of line. A fixed slot at the geometric mean of the ratios
   plus `contain` splits that gap evenly — neither badge is distorted, both
   occupy the same box, and the rows become identical widths. */
.home-hero__badge {
  width: 140px;
  height: 44px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-drag: none;
  filter: grayscale(0.15);
}

.home-hero__platform-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.home-hero__platform-name {
  font: var(--type-display-xs);
  color: var(--color-text);
  line-height: 1.2;
}

.home-hero__platform-status {
  font: var(--type-label);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* ════════════════════════════════════════════════════════════════════════════
   Word ticker
   ──────────────────────────────────────────────────────────────────────────── */

.home-ticker {
  overflow: hidden;
  border-top: 1px solid var(--color-edge);
  border-bottom: 1px solid var(--color-edge);
  padding: var(--space-12) 0;
  margin: var(--space-12) 0 var(--space-20);
}

.home-ticker__track {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(1.6rem, 4vw, 3rem);
  white-space: nowrap;
  will-change: transform;
}

.home-ticker__item {
  font-family: var(--font-display);
  font-size: clamp(17px, 2.4vw, 24px);
  letter-spacing: 0.06em;
  color: var(--color-sky-text-muted);
}

.home-ticker__item sup {
  font: var(--type-mono-sm);
  color: var(--color-primary);
  margin-left: var(--space-4);
}

/* ════════════════════════════════════════════════════════════════════════════
   Section heads (homepage)

   Bare on the sky like the ticker and the feature blocks below, so the copy
   takes the starlight ramp — the cream ramp is for text sitting on glass.
   ──────────────────────────────────────────────────────────────────────────── */

.home-section-head {
  margin: 0 0 var(--space-24);
  max-width: 780px;
}

.home-finder,
.home-compare,
.home-dicts {
  margin-top: var(--space-48);
}

.home-finder {
  margin-top: var(--space-30);
  scroll-margin-top: calc(var(--site-header-h) + 16px);
}

.home-section-head__index {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  font: var(--type-mono-sm);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-14);
}

.home-section-head__index::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1.5px;
  background: var(--color-primary);
}

.home-section-head__title {
  font: var(--type-display-xl);
  font-size: clamp(30px, 5.4vw, 50px);
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0 0 var(--space-12);
  color: var(--color-sky-text);
}

.home-section-head__title em {
  font-style: italic;
  color: var(--color-primary);
}

.home-section-head__lede {
  font: var(--type-body-lg);
  color: var(--color-sky-text-soft);
  margin: 0;
  max-width: 66ch;
}

/* ════════════════════════════════════════════════════════════════════════════
   Word finder
   ──────────────────────────────────────────────────────────────────────────── */

.home-finder__panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  border-radius: var(--card-radius);
  box-shadow: var(--glass-glow);
  padding: clamp(1rem, 3vw, 2rem);
}

.home-finder__langs {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: var(--space-16);
  padding: 2px;
}

.home-finder__langs::-webkit-scrollbar {
  display: none;
}

.home-finder__lang {
  flex: 0 0 auto;
  position: relative;
  cursor: pointer;
}

.home-finder__lang input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.home-finder__lang-face {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-8) var(--space-12);
  border: 1.5px solid var(--color-edge);
  border-radius: var(--radius-base);
  background: transparent;
  transition: background 140ms ease, color 140ms ease, transform 80ms ease;
}

.home-finder__lang:hover .home-finder__lang-face {
  background: var(--color-warm);
}

.home-finder__lang-name {
  font: var(--type-label);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
}

.home-finder__lang-count {
  font: var(--type-mono-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.home-finder__lang input:checked + .home-finder__lang-face {
  background: var(--color-selected-bg);
}

.home-finder__lang input:checked + .home-finder__lang-face .home-finder__lang-name {
  color: var(--color-selected-fg);
}

.home-finder__lang input:checked + .home-finder__lang-face .home-finder__lang-count {
  color: var(--color-selected-fg);
  opacity: 0.65;
}

.home-finder__lang input:focus-visible + .home-finder__lang-face {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* A well, not a card — it sits inside the glass panel, so it recesses rather
   than stacking a second glass fill and a second gold hairline on top. */
.home-finder__field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-10);
  background: var(--glass-bg-quiet);
  border: 1.5px solid var(--color-edge);
  border-radius: var(--radius-base);
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-14);
  cursor: text;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.home-finder__field:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-brand-lift);
}

.home-finder__icon {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 26px);
  color: var(--color-text);
  line-height: 1;
  user-select: none;
}

.home-finder__field:focus-within .home-finder__icon {
  color: var(--color-primary);
}

.home-finder__input {
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 4.5vw, 30px);
  letter-spacing: 0.01em;
  color: var(--color-text);
  caret-color: var(--color-primary);
  padding: var(--space-8) 0;
}

.home-finder__input::placeholder {
  color: var(--color-text-muted);
}

.home-finder__input::-webkit-search-cancel-button {
  appearance: none;
  display: none;
}

.home-finder__submit {
  font: var(--type-body-md);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border: 1.5px solid transparent;
  border-radius: var(--btn-radius);
  padding: var(--space-12) var(--space-16);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--btn-primary-shadow);
  transition: transform 80ms ease, box-shadow 80ms ease, filter 120ms ease;
}

.home-finder__submit:hover {
  filter: brightness(1.08);
}

.home-finder__submit:active {
  transform: var(--btn-active-transform);
  box-shadow: var(--btn-primary-shadow-active);
}

.home-finder__preview {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-16);
  min-height: 44px;
}

.home-finder__tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.home-finder__tiles--ghost .gtile {
  opacity: 0.35;
  box-shadow: none;
}

.home-finder__score {
  font: var(--type-mono-sm);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--color-primary);
  border: 1px solid currentColor;
  border-radius: var(--radius-base);
  padding: 4px 9px;
  white-space: nowrap;
}

.home-finder__score--ghost {
  color: var(--color-text-muted);
  opacity: 0.7;
}

.home-finder__try {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-10);
  margin-top: var(--space-16);
  padding-top: var(--space-14);
  border-top: 1px dashed var(--color-edge);
}

.home-finder__try-label {
  font: var(--type-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.home-finder__try-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.home-finder__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-base);
  padding: 4px 10px;
  background: transparent;
  transition: background 120ms ease, transform 80ms ease, box-shadow 80ms ease;
}

.home-finder__chip sup {
  font: var(--type-mono-sm);
  font-size: 9px;
  color: var(--color-primary);
}

.home-finder__chip:hover {
  background: var(--color-warm);
  transform: translate(-1px, -1px);
  box-shadow: var(--glass-glow-lit);
}

.home-finder__note {
  margin: var(--space-14) 0 0;
  color: var(--color-text-muted);
}

/* ════════════════════════════════════════════════════════════════════════════
   Feature blocks (How Alfa Kraft compares)
   ──────────────────────────────────────────────────────────────────────────── */

.home-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24) var(--space-30);
}

.home-feature {
  position: relative;
  border-top: 1.5px solid var(--color-edge);
  padding-top: var(--space-14);
}

.home-feature__no {
  display: inline-block;
  font: var(--type-mono-sm);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-10);
}

.home-feature__glyph {
  position: absolute;
  top: var(--space-14);
  right: 0;
  width: 30px;
  height: 30px;
  color: var(--color-sky-text-soft);
}

.home-feature h3 {
  font: var(--type-display-sm);
  margin: 0 0 var(--space-8);
  color: var(--color-sky-text);
}

.home-feature p {
  font: var(--type-body-md);
  color: var(--color-sky-text);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   Dictionary strip
   ──────────────────────────────────────────────────────────────────────────── */

.home-dicts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-12);
}

.home-dict {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  border-radius: var(--card-radius);
  padding: var(--space-20) var(--space-16);
  box-shadow: var(--glass-glow);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.home-dict:hover {
  transform: translate(-1px, -1px);
  border-color: var(--glass-edge-lit);
  box-shadow: var(--glass-glow-lit);
}

.home-dict__count {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.home-dict__name {
  font: var(--type-display-sm);
  margin: 0;
  color: var(--color-text);
}

.home-dict__source {
  font: var(--type-body-sm);
  color: var(--color-text-soft);
  margin: 0;
}

.home-dict__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-14);
  margin: auto 0 0;
  padding-top: var(--space-10);
}

.home-dict__links a {
  font: var(--type-label);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

.home-dict__links a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Lit — the one card in the strip that points somewhere else instead of at a
   word list. The gold hairline is what marks it out; it used to be said with a
   cream fill, which on navy is a lit island. */
.home-dict--rules {
  background: var(--glass-bg-quiet);
  border: 1px solid var(--glass-edge-lit);
  box-shadow: var(--glass-glow-lit);
}

.home-dict--rules .home-dict__name {
  color: var(--color-cream-lit);
}

.home-dict--rules .home-dict__source {
  color: var(--color-text);
}

/* ════════════════════════════════════════════════════════════════════════════
   Homepage responsive
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .home-hero__roadmap {
    grid-template-columns: minmax(0, auto);
    gap: var(--space-10);
    justify-items: start;
  }

  .home-features {
    grid-template-columns: 1fr;
    gap: var(--space-20);
  }
}

@media (max-width: 480px) {
  .home-hero {
    padding: var(--space-20) var(--space-14);
  }

  .home-hero__badge {
    width: 128px;
    height: 40px;
  }

  .home-hero__actions .btn-primary,
  .home-hero__actions .btn-ghost {
    padding: var(--space-12) var(--space-14);
    letter-spacing: 1.5px;
  }

  .home-finder__panel {
    padding: var(--space-14) var(--space-12);
  }

  .home-finder__field {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-left: var(--space-12);
  }

  .home-finder__icon {
    display: none;
  }

  .home-finder__submit {
    padding: var(--space-10) var(--space-12);
    letter-spacing: 1px;
  }

  .home-section-head__title {
    font-size: clamp(28px, 8.4vw, 34px);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Dictionary switcher (search pages)
   ──────────────────────────────────────────────────────────────────────────── */

.wsearch__dicts {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: var(--space-14) 0 var(--space-4);
  padding: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.wsearch__dicts::-webkit-scrollbar {
  display: none;
}

.wsearch__dicts-label {
  font: var(--type-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-sky-text-muted);
  flex-shrink: 0;
  margin-right: var(--space-4);
}

.wsearch__dicts a {
  flex: 0 0 auto;
  font: var(--type-body-md);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-sky-text);
  text-decoration: none;
  padding: var(--space-6) var(--space-12);
  border: 1.5px solid var(--color-edge);
  border-radius: var(--radius-base);
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.wsearch__dicts a:hover {
  background: var(--color-warm);
  border-color: var(--color-sky-text-faint);
}

.wsearch__dicts a[aria-current="page"] {
  background: var(--color-selected-bg);
  border-color: var(--color-selected-bg);
  color: var(--color-selected-fg);
}