/* kozel.rh1.tech — design system
   Direction: olive felt + copper, matching the in-game identity.

   Ported from king.rh1.tech, which established the shape these five sites
   share. Only the palette moves: the copper is Kozel's own, chosen in the app
   precisely so two of the five games would stop wearing the same metal, and a
   site in King's gold would hand that back. Every value below is the one the
   app's `kozelSkin` uses, so the page and the game are the same colours. */

@font-face {
  font-family: 'Aeromatics';
  src: url('../fonts/Aeromatics.ttf?v=2') format('truetype');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Ropa';
  src: url('../fonts/Ropa.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* GameSkin.ground, top to bottom. */
  --felt-deep: #0e1309;
  --felt: #1e2716;
  --felt-light: #303a23;
  /* GameSkin.panel. */
  --surface: #1a1e12;
  --surface-raised: #2c3320;
  --line: rgba(74, 84, 51, 0.55);
  /* GameSkin.accent / accentDeep. Copper, not brass — see the note above. */
  --copper: #d9793f;
  --copper-bright: #e89a63;
  --copper-deep: #8a4520;
  /* ScoreBoardTheme.textPrimary / textMuted / negative. */
  --text: #f2efe2;
  --text-dim: #a9ae92;
  --danger: #ef8a6a;
  --font-display: 'Aeromatics', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Ropa', 'Segoe UI', system-ui, sans-serif;
  --text-base: clamp(1.02rem, 0.95rem + 0.3vw, 1.15rem);
  --text-hero: clamp(3.4rem, 1.6rem + 8vw, 7.5rem);
  --text-h2: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  --space-section: clamp(4rem, 3rem + 4vw, 8rem);
  --radius: 14px;
  --duration: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1200px 700px at 50% -10%, var(--felt-light), transparent 70%),
    linear-gradient(180deg, var(--felt) 0%, var(--felt-deep) 100%);
  background-color: var(--felt-deep);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--copper-bright); }

.wrap { width: min(1120px, 92vw); margin-inline: auto; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--felt-deep) 82%, transparent);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 1.2rem;
  padding-block: 0.65rem;
}
.brand {
  display: flex; align-items: center; gap: 0.6rem;
  text-decoration: none; color: var(--text);
  font-family: var(--font-display); font-size: 1.35rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.site-nav { margin-left: auto; display: flex; gap: 1.4rem; align-items: center; }
.site-nav a {
  color: var(--text-dim); text-decoration: none; font-size: 0.95rem;
  transition: color var(--duration);
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--copper-bright); }
.lang-switch {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.2rem 0.75rem; font-size: 0.85rem;
}
/* Burger toggle — hidden on desktop, and on mobile only when JS is absent
   (the no-JS fallback keeps the links visible as wrapped rows). */
.nav-toggle { display: none; }

@media (max-width: 720px) {
  /* no-JS fallback: wrapped link rows */
  .site-header .wrap { flex-wrap: wrap; row-gap: 0; }
  .site-nav {
    margin-left: 0; width: 100%; flex-wrap: wrap;
    gap: 0.15rem 1.05rem; padding-bottom: 0.55rem;
  }
  .site-nav a { font-size: 0.88rem; }

  /* JS present: burger menu */
  .js .nav-toggle {
    display: grid; place-items: center;
    margin-left: auto;
    width: 44px; height: 44px; border-radius: 12px;
    border: 1px solid var(--line); cursor: pointer;
    background: linear-gradient(180deg, var(--surface-raised), var(--surface));
  }
  .js .nav-toggle svg { width: 24px; height: 24px; fill: var(--copper-bright); }
  .js .nav-toggle .ic-close { display: none; }
  .js .nav-open .nav-toggle .ic-close { display: block; }
  .js .nav-open .nav-toggle .ic-burger { display: none; }

  .js .site-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    gap: 0; width: auto; padding: 0.4rem 0 0.9rem;
    background: var(--felt-deep);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.45);
  }
  .js .nav-open .site-nav { display: flex; animation: nav-drop 220ms var(--ease-out); }
  .js .site-nav a {
    font-size: 1.05rem; padding: 0.85rem 1.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .js .site-nav a:last-child { border-bottom: none; }
  .js .site-nav .lang-switch {
    align-self: flex-start;
    margin: 1rem 1.6rem 0.3rem;
    padding: 0.5rem 1.35rem;
    border: 1px solid rgba(255, 179, 0, 0.45); border-radius: 999px;
    color: var(--copper-bright); font-size: 0.95rem;
  }
}
@keyframes nav-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .nav-open .site-nav { animation: none; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 6vw, 6rem) var(--space-section);
  overflow: visible;
}
.hero .wrap {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
.hero-eyebrow {
  color: var(--copper); font-family: var(--font-display);
  letter-spacing: 0.35em; text-transform: uppercase; font-size: 0.85rem;
}
.hero h1 {
  font-family: var(--font-display); font-size: var(--text-hero);
  line-height: 0.95; text-transform: uppercase; letter-spacing: 0.04em;
  margin: 0.35rem 0 1rem;
  background: linear-gradient(175deg, #fff3d0 10%, var(--copper-bright) 55%, var(--copper-deep) 120%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}
.hero-tagline { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); color: var(--text); max-width: 34ch; }
.hero-sub { color: var(--text-dim); margin-top: 0.8rem; max-width: 52ch; }

.store-buttons { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
.store-btn {
  display: inline-flex; align-items: center; gap: 0.65rem;
  padding: 0.7rem 1.15rem; border-radius: 12px; text-decoration: none;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-raised), var(--surface));
  color: var(--text);
  transition: transform var(--duration) var(--ease-out), border-color var(--duration), box-shadow var(--duration);
}
.store-btn:hover, .store-btn:focus-visible {
  transform: translateY(-2px); border-color: var(--copper);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.store-btn svg { width: 26px; height: 26px; fill: var(--text); flex: none; }
.store-btn small { display: block; font-size: 0.68rem; color: var(--text-dim); line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; }
.store-btn strong { display: block; font-size: 1.02rem; line-height: 1.2; font-weight: 600; }
.store-btn.soon { cursor: default; opacity: 0.85; }
.store-btn.soon:hover { transform: none; border-color: var(--line); box-shadow: none; }
.store-note { margin-top: 0.7rem; font-size: 0.85rem; color: var(--text-dim); }

/* Hero stage */
.card-stage {
  display: flex; justify-content: center; align-items: center;
  min-height: clamp(300px, 40vw, 430px);
}

/* The goat, which is the game's own splash art rather than a picture of cards.
   Cropped to the head: the model is a doe, and the full body puts that on the
   homepage of a game named after a male goat. The crop also reads better —
   at hero size the horns, the eye and the beard are the whole silhouette,
   where the full body is mostly flank. */
.hero-goat {
  margin: 0;
  /* Wider than the head crop this replaced: it is the whole animal now, so
     the same width would draw it half the size. */
  width: clamp(280px, 40vw, 520px);
  filter: drop-shadow(0 28px 45px rgba(0, 0, 0, 0.55));
}
.hero-goat img {
  display: block; width: 100%; height: auto;
  animation: goat-float 7s ease-in-out infinite;
}

@keyframes goat-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}


/* ---------- sections ---------- */
section { padding-block: calc(var(--space-section) / 2); }
/* Keep anchored headings clear of the sticky header when navigating to
   #features / #screenshots / … links. */
[id] { scroll-margin-top: 5.2rem; }
.section-head { margin-bottom: 2.2rem; }
.section-eyebrow {
  color: var(--copper); font-family: var(--font-display);
  letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.8rem;
}
h2 {
  font-family: var(--font-display); font-size: var(--text-h2);
  text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.1;
  margin-top: 0.3rem;
}
.section-head p { color: var(--text-dim); max-width: 60ch; margin-top: 0.6rem; }

/* features bento */
.features {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(6, 1fr);
}
.feature {
  grid-column: span 2;
  background: linear-gradient(180deg, var(--surface-raised), var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.5rem;
  transition: transform var(--duration) var(--ease-out), border-color var(--duration);
}
.feature:hover { transform: translateY(-4px); border-color: rgba(255, 179, 0, 0.45); }
.feature.wide { grid-column: span 3; }
.feature .glyph {
  width: 52px; height: 52px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255, 179, 0, 0.12); border: 1px solid rgba(255, 179, 0, 0.3);
  margin-bottom: 0.9rem;
}
.feature .glyph svg { width: 26px; height: 26px; fill: var(--copper-bright); }
.feature h3 { font-family: var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; font-size: 1.05rem; margin-bottom: 0.4rem; }
.feature p { color: var(--text-dim); font-size: 0.97rem; }
@media (max-width: 900px) { .feature, .feature.wide { grid-column: span 3; } }
@media (max-width: 620px) { .feature, .feature.wide { grid-column: span 6; } }

/* rounds strip */
.rounds { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.6rem; }
.round-chip {
  border-radius: 10px; padding: 0.6rem 0.5rem; text-align: center;
  font-size: 0.8rem; line-height: 1.25;
  border: 1px solid var(--line); background: var(--surface);
}
.round-chip b { display: block; font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.04em; }
.round-chip.penalty b { color: var(--danger); }
.round-chip.bonus b { color: var(--copper-bright); }
.rounds-label { margin: 1.1rem 0 0.5rem; font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
@media (max-width: 760px) { .rounds { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 440px) { .rounds { grid-template-columns: repeat(2, 1fr); } }

/* screenshots gallery */
.gallery {
  display: flex; gap: 1.3rem; overflow-x: auto; padding: 1.2rem 0.2rem 1.6rem;
  scroll-snap-type: x mandatory;
}
.shot { flex: none; scroll-snap-align: center; }
.shot figcaption { text-align: center; color: var(--text-dim); font-size: 0.85rem; margin-top: 0.7rem; }
.phone-frame {
  width: clamp(200px, 24vw, 250px);
  border-radius: 34px; padding: 9px;
  background: linear-gradient(160deg, #3c3c3e, #131315);
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.5), inset 0 0 0 2px #57575a;
}
.phone-frame img { border-radius: 26px; }
.desk-frame {
  width: clamp(320px, 52vw, 640px);
  border-radius: 14px; padding: 8px 8px 14px;
  background: linear-gradient(160deg, #3c3c3e, #131315);
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.5), inset 0 0 0 2px #57575a;
}
.desk-frame img { border-radius: 8px; }

.gallery-nav { display: flex; gap: 0.7rem; justify-content: flex-end; }
.gallery-btn {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-raised), var(--surface));
  transition: border-color var(--duration), transform var(--duration) var(--ease-out);
}
.gallery-btn svg { width: 24px; height: 24px; fill: var(--copper-bright); }
.gallery-btn:hover:not(:disabled), .gallery-btn:focus-visible { border-color: var(--copper); transform: translateY(-2px); }
.gallery-btn:disabled { opacity: 0.35; cursor: default; }
@media (pointer: coarse) { .gallery-nav { display: none; } }

/* split section (multiplayer etc.) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.split .shot { justify-self: center; }
.split ul { list-style: none; margin-top: 1rem; }
.split li { padding-left: 1.6rem; position: relative; margin-bottom: 0.7rem; color: var(--text-dim); }
.split li::before { content: '♠'; position: absolute; left: 0; color: var(--copper); }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

/* platform cards */
.platforms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.platform {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 1.5rem; text-align: center;
}
.platform svg { width: 40px; height: 40px; fill: var(--copper-bright); margin-inline: auto; }
.platform h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; margin: 0.7rem 0 0.3rem; }
.platform p { color: var(--text-dim); font-size: 0.9rem; }
.badge-soon {
  display: inline-block; margin-top: 0.9rem; font-size: 0.75rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper);
  border: 1px solid rgba(255, 179, 0, 0.4); border-radius: 999px; padding: 0.25rem 0.8rem;
}
@media (max-width: 720px) { .platforms { grid-template-columns: 1fr; } }

/* ---------- content pages (rules, legal) ---------- */
.page { padding-block: 3rem var(--space-section); }
.page-narrow { width: min(760px, 92vw); margin-inline: auto; }
.page h1 {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.2rem); line-height: 1.05; margin-bottom: 0.4rem;
}
.page-updated { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 2rem; }
.page h2 { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.7rem); margin: 2.4rem 0 0.7rem; }
.page h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.05rem; margin: 1.6rem 0 0.4rem; color: var(--copper-bright); }
.page p { margin-bottom: 0.9rem; }
.page ul, .page ol { margin: 0 0 1rem 1.4rem; }
.page li { margin-bottom: 0.45rem; }
.page table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.6rem; font-size: 0.97rem; }
.page th, .page td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line); }
.page th { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--copper); }
.page .table-scroll { overflow-x: auto; }
.callout {
  border: 1px solid rgba(255, 179, 0, 0.35); border-left: 4px solid var(--copper);
  background: rgba(255, 179, 0, 0.07); border-radius: 10px;
  padding: 1rem 1.2rem; margin: 1.4rem 0;
}

/* reveal on scroll (only hidden when JS is running, so no-JS still reads) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.js .reveal.on { opacity: 1; transform: none; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line); margin-top: var(--space-section);
  padding: 2.5rem 0 3rem; color: var(--text-dim); font-size: 0.92rem;
}
.site-footer .wrap { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer-links a { color: var(--text-dim); text-decoration: none; }
.footer-links a:hover { color: var(--copper-bright); }
@media (max-width: 720px) { .site-footer .wrap { grid-template-columns: 1fr; } }

@media (max-width: 820px) {
  .hero { overflow: hidden; padding-top: 1.6rem; }
  .hero .wrap { grid-template-columns: 1fr; gap: 2.6rem; }
  .card-stage { order: -1; min-height: clamp(260px, 62vw, 340px); }
  .hero-goat { width: clamp(220px, 72vw, 380px); }
  /* Centered hero copy on small screens */
  .hero .wrap > div:not(.card-stage) { text-align: center; }
  .hero-tagline, .hero-sub { margin-inline: auto; }
  .store-buttons { justify-content: center; }
  .store-btn { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-goat img { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .store-btn, .feature { transition: none; }
}

/* The trump order, which is the one place in the rules where the spacing is
   the content: the cards are laid out weakest to strongest, and reflowing the
   line as prose would lose the ranking it is drawing. Monospaced so the groups
   stay in columns, and scrollable rather than wrapped on a narrow phone. */
.trump-order {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--copper-bright);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin: 1.1rem 0;
  overflow-x: auto;
}