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

/* ── Design tokens ─────────────────────────────────────── */
:root {
  --font-display: "Bebas Neue", Impact, sans-serif;
  --font-sans:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif:   "Source Serif 4", Georgia, serif;
}

:root, body.theme-light {
  --bg:          #f4eddb;
  --panel:       #ece4cb;
  --panel-2:     #e3d9b8;
  --ink:         #1c1812;
  --muted:       #6b614c;
  --faint:       #c8bf9f;
  --gold:        #b88a2a;
  --gold-dark:   #7e5e16;
  --red:         #b8392a;
  --overlay-bg:  rgba(28, 24, 18, 0.45);
  --lineage-glow: radial-gradient(ellipse at 50% 30%, rgba(184,138,42,0.10), transparent 70%);
}

body.theme-dark {
  --bg:          #0e1018;
  --panel:       #161a26;
  --panel-2:     #1c2030;
  --ink:         #f1ede0;
  --muted:       #8a8678;
  --faint:       #2a2e3a;
  --gold:        #caa75e;
  --gold-dark:   #8b6a1f;
  --red:         #e07060;
  --overlay-bg:  rgba(10, 12, 18, 0.78);
  --lineage-glow: radial-gradient(ellipse at 50% 30%, rgba(202,167,94,0.08), transparent 70%);
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  transition: background 0.2s, color 0.2s;
}

#app { display: flex; flex-direction: column; flex: 1; min-height: 100dvh; }

/* ── View switching ─────────────────────────────────────── */
#game-view  { display: flex; flex-direction: column; flex: 1; }
#stats-view { display: flex; flex-direction: column; flex: 1; }
#stats-view.hidden, #game-view.hidden { display: none; }

/* ── Theme icon ─────────────────────────────────────────── */
body.theme-light .theme-moon { display: none; }
body.theme-dark  .theme-sun  { display: none; }

/* ── Header ─────────────────────────────────────────────── */
.game-header {
  border-bottom: 1px solid var(--faint);
  padding: 14px 18px 12px;
  text-align: center;
}

.header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-meta {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 700;
}

.icon-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--faint);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  font-family: var(--font-sans);
  transition: border-color 0.15s, color 0.15s;
}
.icon-btn:hover { border-color: var(--gold); color: var(--gold); }

.header-stars {
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.5em;
  line-height: 1;
  margin-top: 2px;
}

.game-title {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 1px 0 var(--gold-dark);
  margin-top: 4px;
}

.game-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-top: 4px;
}

/* ── Pips ───────────────────────────────────────────────── */
.pips-row {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
}

.pip {
  width: 24px; height: 12px;
  border: 1px solid var(--faint);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700;
  color: #fff;
}
.pip.pip-wrong  { border-color: var(--red);  background: var(--red); }
.pip.pip-right  { border-color: var(--gold); background: var(--gold); }
body.theme-dark .pip.pip-wrong,
body.theme-dark .pip.pip-right { color: var(--bg); }

/* ── Main ───────────────────────────────────────────────── */
.game-main {
  flex: 1;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* ── Lineage section ────────────────────────────────────── */
.lineage-section {
  padding: 10px 16px 8px;
  background: var(--panel);
  background-image: var(--lineage-glow);
}

.section-label {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 2px;
}

/* ── Snake layout (preserved) ───────────────────────────── */
.titles-container {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0.75rem 52px;
}

.snake-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 0.25rem 0;
}
.snake-row.rtl { flex-direction: row-reverse; }

.arrows-overlay { pointer-events: none; }

.title-group {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  opacity: 0;
  animation: groupReveal 0.38s ease forwards;
}

.belt-label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel);
  color: var(--gold);
  border: 1px solid var(--faint);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-align: center;
  max-width: 210px;
  white-space: normal;
  line-height: 1.3;
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s;
  z-index: 50;
}
.title-group:hover,
.title-group.tapped { z-index: 100; }
.title-group:hover .belt-label,
.title-group.tapped .belt-label { opacity: 1; }

@keyframes groupReveal {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ── Belt stack ─────────────────────────────────────────── */
.belt-stack {
  position: relative;
  display: block;
  padding-right:  calc(var(--stack-depth, 0) * 8px);
  padding-bottom: calc(var(--stack-depth, 0) * 8px);
}
.belt-stack > .belt-wrap:first-child { position: relative; z-index: 1; }
.belt-stack > .belt-wrap:not(:first-child) {
  position: absolute;
  top:  calc(var(--stack-i) * 8px);
  left: calc(var(--stack-i) * 8px);
  z-index: calc(var(--stack-i) + 1);
}

.belt-wrap { display: block; }

.belt-svg {
  display: block;
  width: 140px;
  height: auto;
}

.belt-split {
  position: relative;
  display: block;
  width: 140px;
}
.belt-split::after { content: ''; display: block; padding-top: 40%; }
.belt-half {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.belt-half-left  { clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); }
.belt-half-right { clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); }

.title-group--simul {
  gap: 0;
}

.simul-plus {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--gold);
  line-height: 1;
  text-align: center;
  margin: -0.8rem 0;
}

.stack-count-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 11px;
  background: var(--gold);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.01em;
  border: 1.5px solid var(--panel);
  z-index: 20;
  white-space: nowrap;
  pointer-events: none;
}

/* ── Guesses list ───────────────────────────────────────── */
.guesses-list {
  padding: 4px 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.guess-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 3px;
  background: var(--panel);
  border: 1px solid var(--faint);
  animation: slideIn 0.28s ease;
}
.guess-row.correct {
  background: rgba(184,138,42,0.13);
  border-color: var(--gold);
}
body.theme-dark .guess-row.correct { background: rgba(202,167,94,0.10); }

.guess-name {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.guess-row.correct .guess-name { color: var(--gold); }

.guess-mark { font-size: 12px; color: var(--red); }
.guess-row.correct .guess-mark { color: var(--gold); }

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Result block ───────────────────────────────────────── */
.result-block { padding: 6px 18px 6px; text-align: center; }
.result-block.hidden { display: none; }

.result-eyebrow {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
}
.result-eyebrow.red { color: var(--red); }

.result-name {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--ink);
  margin-top: 2px;
}

.result-rule {
  width: 50px; height: 2px;
  background: var(--gold);
  margin: 8px auto 0;
}
.result-rule.red { background: var(--red); }

.result-share-grid {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 10px;
}
.share-sq { width: 24px; height: 24px; border-radius: 2px; }

.result-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-bottom: 8px;
}

.pill-btn {
  flex: 1;
  border-radius: 2px;
  padding: 11px 0;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
}
.pill-secondary { background: transparent; color: var(--ink); border: 1px solid var(--faint); }
.pill-primary   { background: var(--gold); color: var(--bg); }

/* ── Input section ──────────────────────────────────────── */
.input-section { padding: 0 18px 14px; }

.autocomplete-wrapper { position: relative; }

.input-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  background: var(--panel);
  border: 1px solid var(--gold);
  border-radius: 4px;
  transition: border-radius 0.1s;
}
.input-box.has-suggestions {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.input-icon { color: var(--muted); font-size: 14px; flex-shrink: 0; }

.guess-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font-size: 13px;
  font-family: var(--font-sans);
  caret-color: var(--gold);
}
.guess-input::placeholder { color: var(--muted); }

.guess-input.shake { animation: shake 0.4s ease; }

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-4px); }
  40%     { transform: translateX(4px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}

/* ── Autocomplete dropdown (above input) ────────────────── */
.autocomplete-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0; right: 0;
  background: var(--panel);
  border: 1px solid var(--gold);
  border-bottom: none;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  z-index: 200;
  overflow: hidden;
}
.autocomplete-dropdown.hidden { display: none; }

.autocomplete-item {
  padding: 8px 12px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.autocomplete-item + .autocomplete-item { border-top: 1px solid var(--faint); }
.autocomplete-item.highlighted,
.autocomplete-item:hover { background: var(--bg); color: var(--ink); }

.enter-hint { font-size: 10px; color: var(--muted); font-family: var(--font-sans); }

/* ── Stats view ─────────────────────────────────────────── */
.stats-header {
  border-bottom: 1px solid var(--faint);
  padding: 14px 18px 10px;
  text-align: center;
}
.stats-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.stats-view-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--gold);
}
.stats-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.stats-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin: 14px 18px 16px;
}
.stat-cell { text-align: center; padding: 6px 0; }
.stat-n {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.stat-l {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin-top: 2px;
}

.distribution-section { padding: 0 18px 12px; }
.distribution-label {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
}
.distribution-bars { display: flex; flex-direction: column; gap: 5px; }

.dist-row { display: flex; align-items: center; gap: 8px; }
.dist-label {
  width: 16px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  text-align: center;
}
.dist-label.hit { color: var(--gold); }
.dist-bar-wrap {
  flex: 1; height: 16px;
  background: var(--panel);
  border: 1px solid var(--faint);
  overflow: hidden;
  position: relative;
}
.dist-bar-fill {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  color: var(--bg);
  background: var(--faint);
}
.dist-bar-fill.hit { background: var(--gold); }

.stats-spacer { flex: 1; }

.share-result-btn {
  display: block;
  width: calc(100% - 36px);
  margin: 0 18px 18px;
  padding: 12px 0;
  background: var(--gold);
  color: var(--bg);
  border: none;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ── How-to-play modal ──────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 500;
  animation: fadeIn 0.25s ease;
}
.modal-overlay.hidden { display: none; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  background: var(--panel);
  border: 1.5px solid var(--gold);
  padding: 22px 22px 24px;
  width: 100%;
  max-width: 300px;
}

.modal-eyebrow {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--gold);
  text-align: center;
  margin-top: 6px;
  line-height: 1;
}

.modal-divider {
  width: 40px; height: 2px;
  background: var(--gold);
  margin: 12px auto;
}

.modal-rules { display: flex; flex-direction: column; gap: 12px; }

.rule-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
}
.rule-num {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--gold);
  letter-spacing: 0.04em;
  min-width: 24px;
  line-height: 1.2;
}

.modal-cta {
  margin-top: 18px;
  width: 100%;
  background: var(--gold);
  color: var(--bg);
  border: none;
  padding: 13px 0;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.14em;
  cursor: pointer;
}

.modal-footer {
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-align: center;
}
.modal-footer a { color: var(--muted); text-decoration: underline; }
.modal-footer a:hover { color: var(--gold); }

/* ── Disclaimer ─────────────────────────────────────────── */
.site-disclaimer {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 10px 18px 14px;
  opacity: 0.65;
}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 3px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .titles-container { padding-inline: 24px; }
  .snake-row { gap: 44px; }
  .belt-svg, .belt-split { width: min(120px, calc((100vw - 120px) / 2)); }
}

@media (max-width: 380px) {
  .belt-svg, .belt-split { width: min(100px, calc((100vw - 112px) / 2)); }
  .titles-container { padding-inline: 18px; }
  .snake-row { gap: 36px; }
}