/* Landing page, 404 and legal page. Idea: "a seat at the kafenio table" – a lamp above, the board lying in
 * front of you, the dice rolling onto it. Everything else stays quiet so the table is the one bold thing.
 * Type: Inter only (same @font-face rules as style.css), behind --font-display / --font-text.
 * Scale (1.25, body 18 px): 14 · 16 · 18 · 22 · 28 · 36–48 (h2) · 40–76 (h1); headings 800, tight tracking. */

/* Inter (SIL OFL 1.1, fonts/Inter-OFL.txt), self-hosted, variable weight 100–900, Latin + Greek subsets. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-greek.woff2") format("woff2");
  unicode-range: U+0370-03FF, U+1F00-1FFF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212;
}

:root {
  --walnut: #1b1410;      /* page: dark kafenio brown */
  --smoke: #251a13;       /* raised band */
  --line: #4a3626;
  --line-strong: #8a6a4a;
  --ivory: #f3e9d2;       /* text, ivory checkers, dice */
  --ivory-dim: #cdbd9a;   /* secondary text (8.9:1 on walnut) */
  --gold: #e3b23c;        /* action + the lucky pip */
  --gold-hover: #f0c45a;
  --red: #a8423b;         /* point red: rules and strikes, never text */
  --lamp: rgba(227, 178, 60, .13);
  --pip: #2b1a10;

  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-display: var(--font-text);
  --gutter: clamp(16px, 4.5vw, 48px);
  --wide: 1120px;
  --measure: 36rem;
  --roll-ms: 1100ms;      /* keep in step with ROLL_MS in landing-dice.js */
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ivory);
  background: radial-gradient(ellipse min(1100px, 130vw) 760px at 50% -120px, var(--lamp), transparent 72%) no-repeat, var(--walnut);
  font: 1.125rem/1.6 var(--font-text);
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
a { color: var(--ivory); text-underline-offset: 4px; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; margin: 0; letter-spacing: -0.022em; text-wrap: balance; }
p, li, summary { text-wrap: pretty; }
p { margin: 0; }
img, svg { max-width: 100%; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--gold); color: var(--walnut); padding: 12px 16px; z-index: 10; }
.skip:focus { left: 16px; }

/* ------------------------------------------------------------- header */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: var(--wide); margin: 0 auto; padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gutter) 10px;
}
.brand { display: inline-flex; min-height: 48px; align-items: center; border-radius: 8px; }
.brand-logo, .brand img { display: block; height: clamp(34px, 9vw, 46px); width: auto; }
.lang {
  font: inherit; font-size: 1rem; color: var(--ivory); background: var(--walnut);
  border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 12px; min-height: 48px;
}

/* ------------------------------------------------------------- buttons */
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 30px;
  border-radius: 999px; text-decoration: none; font-weight: 650; font-size: 1.125rem; letter-spacing: .005em;
}
.btn-primary { background: var(--gold); color: var(--walnut); box-shadow: 0 10px 28px rgba(227, 178, 60, .22); }
.btn-primary:hover { background: var(--gold-hover); }
.btn-primary:focus-visible { outline-color: var(--ivory); }
.btn-quiet { color: var(--ivory); border: 1.5px solid var(--line-strong); }
.btn-quiet:hover { border-color: var(--ivory); }
.btn:active { transform: translateY(1px); }

/* ------------------------------------------------------------- hero: the table */
.hero {
  position: relative; text-align: center; padding: 20px 0 8px;
}
.hero-copy { max-width: 46rem; margin: 0 auto; padding: 0 var(--gutter); }
.hero h1 { font-size: clamp(2.5rem, 7.2vw, 4.75rem); line-height: 1.02; letter-spacing: -0.032em; }
.lead { margin: 18px auto 0; max-width: 32rem; font-size: clamp(1.125rem, 2.2vw, 1.3125rem); color: var(--ivory-dim); }
.hero .actions { margin-top: 28px; }
.live { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 18px; color: var(--ivory-dim); font-size: 1rem; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #7cc47f; box-shadow: 0 0 0 4px rgba(124, 196, 127, .18); }

.stage {
  position: relative; width: min(108vw, 1040px); margin: clamp(20px, 5vw, 48px) 0 0 50%; transform: translateX(-50%);
  perspective: 1500px; perspective-origin: 50% -30%;
}
.stage::before {             /* warm pool of lamp light on the table top */
  content: ""; position: absolute; inset: -12% -20% -6%; pointer-events: none;
  background: radial-gradient(ellipse 50% 46% at 50% 48%, rgba(227, 178, 60, .16), transparent 70%);
}
.table {
  position: relative; container-type: inline-size; transform-style: preserve-3d;
  transform: rotateX(28deg); transform-origin: 50% 100%;
}
.board-photo {
  display: block; width: 100%; height: auto; border-radius: 1.4%;
  box-shadow: 0 2px 0 #3b2414, 0 34px 60px rgba(0, 0, 0, .55), 0 8px 18px rgba(0, 0, 0, .4);
}
.dice-result { min-height: 3.4em; margin: 18px auto 0; padding: 0 var(--gutter); max-width: 34rem; color: var(--ivory-dim); font-size: 1rem; }
.dice-result b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; letter-spacing: -0.01em; color: var(--ivory); }

/* ------------------------------------------------------------- dice (3D, pure CSS) */
.dice {
  --s: 7cqw;
  position: absolute; left: 64.5%; top: 50%; width: 21%; min-width: 48px; min-height: 48px; height: 15%;
  transform: translateY(-50%); transform-style: preserve-3d;
  display: flex; align-items: center; justify-content: center; gap: 2.6cqw;
  padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; touch-action: manipulation;
}
.die3d {
  --rx: 0deg; --ry: 0deg;
  position: relative; flex: none; width: var(--s); height: var(--s);
  transform-style: preserve-3d; transform: translateZ(calc(var(--s) / 2)) rotateZ(var(--rz, 0deg));
}
.die3d:first-child { --rz: 14deg; }
.die3d:last-child { --rz: -22deg; translate: 0 18%; }
.die3d::after {            /* contact shadow on the board */
  content: ""; position: absolute; inset: 4%; border-radius: 20%; background: rgba(20, 10, 4, .55);
  transform: translateZ(calc(var(--s) / -2 + 1px)) translate(6%, 10%); filter: blur(3px);
}
.die3d[data-face="1"] { --rx: 0deg;   --ry: 0deg; }
.die3d[data-face="2"] { --rx: -90deg; --ry: 0deg; }
.die3d[data-face="3"] { --rx: 0deg;   --ry: -90deg; }
.die3d[data-face="4"] { --rx: 0deg;   --ry: 90deg; }
.die3d[data-face="5"] { --rx: 90deg;  --ry: 0deg; }
.die3d[data-face="6"] { --rx: 0deg;   --ry: 180deg; }
.cube { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.face {
  --p: radial-gradient(circle, var(--pip) 0 40%, transparent 46%);
  position: absolute; inset: 0; border-radius: 17%; padding: 13%;
  background-color: var(--ivory); background-repeat: no-repeat; background-size: 33.34% 33.34%; background-origin: content-box;
  box-shadow: inset 0 0 0 1px rgba(120, 90, 50, .35), inset -3px -4px 8px rgba(120, 90, 50, .28);
  backface-visibility: hidden;
}
.f1 { transform: translateZ(calc(var(--s) / 2)); background-image: var(--p); background-position: 50% 50%; }
.f6 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); background-image: var(--p), var(--p), var(--p), var(--p), var(--p), var(--p); background-position: 0 0, 100% 0, 0 50%, 100% 50%, 0 100%, 100% 100%; }
.f3 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); background-image: var(--p), var(--p), var(--p); background-position: 0 0, 50% 50%, 100% 100%; }
.f4 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); background-image: var(--p), var(--p), var(--p), var(--p); background-position: 0 0, 100% 0, 0 100%, 100% 100%; }
.f2 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); background-image: var(--p), var(--p); background-position: 0 0, 100% 100%; }
.f5 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); background-image: var(--p), var(--p), var(--p), var(--p), var(--p); background-position: 0 0, 100% 0, 50% 50%, 0 100%, 100% 100%; }
.dice:hover .face { box-shadow: inset 0 0 0 2px var(--gold), inset -3px -4px 8px rgba(120, 90, 50, .28); }
.dice:focus-visible { outline-offset: 6px; }

.die3d.rolling { animation: slide-in var(--roll-ms) cubic-bezier(.2, .75, .3, 1) both; }
.die3d.rolling .cube { animation: tumble var(--roll-ms) cubic-bezier(.25, .8, .35, 1) both; }
.die3d.rolling:last-child, .die3d.rolling:last-child .cube { animation-delay: 70ms; }
@keyframes slide-in {
  0% { transform: translate3d(130%, -260%, calc(var(--s) * 2.4)) rotateZ(var(--rz, 0deg)); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: translate3d(-8%, 6%, calc(var(--s) * .9)) rotateZ(var(--rz, 0deg)); }
  78% { transform: translate3d(2%, 0, calc(var(--s) * .62)) rotateZ(var(--rz, 0deg)); }
  100% { transform: translateZ(calc(var(--s) / 2)) rotateZ(var(--rz, 0deg)); }
}
@keyframes tumble {
  0% { transform: rotateX(calc(var(--rx) + 540deg)) rotateY(calc(var(--ry) - 360deg)); }
  70% { transform: rotateX(calc(var(--rx) + 20deg)) rotateY(calc(var(--ry) - 8deg)); }
  100% { transform: rotateX(var(--rx)) rotateY(var(--ry)); }
}

/* ------------------------------------------------------------- sections */
main > section:not(.hero) { max-width: var(--wide); margin: 0 auto; padding: clamp(64px, 10vw, 120px) var(--gutter) 0; }
h2 { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.1; }
.section-lead { margin-top: 14px; max-width: var(--measure); color: var(--ivory-dim); }

/* the three games really are a sequence: numbered, joined by a red rule */
.variants {
  list-style: none; margin: 44px 0 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 56px);
}
.variant .mini { display: block; width: 100%; max-width: 280px; height: auto; border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.variant h3 { display: flex; align-items: baseline; gap: 14px; margin-top: 22px; font-size: clamp(1.75rem, 3vw, 2.125rem); }
.variant .num {
  display: inline-grid; place-items: center; flex: none; width: 1.6em; height: 1.6em; border-radius: 50%;
  border: 1.5px solid var(--red); color: var(--gold); font-size: .62em; transform: translateY(-.12em);
}
.variant p { margin-top: 10px; color: var(--ivory-dim); max-width: 30rem; }

.ways-list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.way { padding: 28px clamp(20px, 3vw, 36px) 8px; border-left: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; }
.way:first-child { border-left: 0; padding-left: 0; }
.way-icon { width: 44px; height: 44px; color: var(--gold); }
.way h3 { margin-top: 18px; font-size: 1.625rem; }
.way p { margin-top: 8px; color: var(--ivory-dim); flex: 1; }
.way-link {
  display: inline-flex; align-items: center; min-height: 48px; margin-top: 12px;
  color: var(--gold); font-weight: 650; text-decoration: underline; text-decoration-color: rgba(227, 178, 60, .5);
}
.way-link:hover { text-decoration-color: var(--gold); }

.nots {
  position: relative; text-align: center;
}
.nots::before {           /* full-bleed smoky band behind the list */
  content: ""; position: absolute; z-index: -1; inset: clamp(32px, 6vw, 72px) 50% -48px; margin: 0 -50vw;
  background: var(--smoke); border-block: 1px solid var(--line);
}
main { isolation: isolate; overflow-x: clip; }   /* the stage and the band bleed; never a sideways scroll */
.nots-list { list-style: none; margin: 28px 0 0; padding: 0; font-family: var(--font-display); font-weight: 750; letter-spacing: -0.02em; font-size: clamp(1.75rem, 4.4vw, 2.75rem); line-height: 1.3; }
.nots-list li { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: .085em; color: var(--ivory-dim); }
.nots-after { margin: 28px auto 0; max-width: var(--measure); font-size: 1.1875rem; }

.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px clamp(32px, 5vw, 72px); align-items: start; }
.faq h2 { position: sticky; top: 24px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 60px; padding: 16px 0; font-family: var(--font-display); font-weight: 650; font-size: 1.1875rem; line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 50%; font-family: var(--font-text); font-size: 1.25rem; color: var(--gold);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover::after { border-color: var(--gold); }
.faq-item p { padding: 0 48px 22px 0; color: var(--ivory-dim); max-width: var(--measure); }

.closing { text-align: center; padding-bottom: clamp(72px, 10vw, 120px) !important; }
.closing-die { display: block; margin: 0 auto 20px; width: 64px; height: 64px; }
.closing h2 { font-size: clamp(2.25rem, 5.6vw, 4rem); }
.closing .actions { margin-top: 28px; }

.foot {
  max-width: var(--wide); margin: 0 auto; padding: 28px var(--gutter) 40px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; color: var(--ivory-dim); font-size: 1rem;
}
.foot-brand img { display: block; height: 28px; width: auto; }
.foot a { color: var(--ivory-dim); display: inline-flex; align-items: center; min-height: 48px; }

/* ------------------------------------------------------------- 404 */
.not-found { max-width: var(--wide); margin: 0 auto; padding: clamp(40px, 9vh, 112px) var(--gutter) 96px; text-align: center; }
.not-found h1 { font-size: clamp(2.75rem, 7vw, 5rem); line-height: 1.04; margin-top: 28px; }
.not-found .lead { margin-top: 18px; }
.not-found .actions { margin-top: 32px; }
.nf-code { display: flex; justify-content: center; gap: 14px; }
.nf-die {
  --p: radial-gradient(circle, var(--pip) 0 40%, transparent 46%);
  width: 64px; height: 64px; padding: 11px; border-radius: 17%; background-color: var(--ivory);
  background-image: var(--p), var(--p), var(--p), var(--p); background-position: 0 0, 100% 0, 0 100%, 100% 100%;
  background-repeat: no-repeat; background-size: 33.34% 33.34%; background-origin: content-box;
  box-shadow: 0 5px 0 #cdbb94;
}
.nf-die + .nf-die { transform: rotate(-12deg); }

/* ------------------------------------------------------------- legal page */
.legal { max-width: 44rem; margin: 0 auto; padding: 24px var(--gutter) 80px; }
.legal h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); }
.legal h2 { font-size: 1.625rem; margin-top: 40px; }
.legal p, .legal ul { margin-top: 12px; color: var(--ivory-dim); }
.legal .todo { color: #e58b82; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 860px) {
  .variants, .ways-list { grid-template-columns: 1fr; }
  .variant .mini { max-width: 240px; }
  .variant h3 { margin-top: 16px; }
  .way, .way:first-child { border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 4px; }
  .way:first-child { border-top: 0; padding-top: 0; }
  .faq { grid-template-columns: 1fr; }
  .faq h2 { position: static; }
}
@media (max-width: 520px) {
  .hero .actions { flex-direction: column; align-items: stretch; max-width: 22rem; margin-inline: auto; }
  .stage { perspective: 900px; }
  .table { transform: rotateX(24deg); }
  .faq-item p { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .faq-item summary::after { transition: none; }
  .die3d.rolling, .die3d.rolling .cube { animation: none; }
}
@media (forced-colors: active) {
  .face, .nf-die { border: 2px solid CanvasText; }
  .btn { border: 2px solid ButtonText; }
}