:root {
  /* Aliased to the site's design tokens (web/static/css/globals.css) -- tt-005.
     Do not hardcode brand hex here; if a token is missing from globals.css,
     that's a conversation, not a new hex value. */
  --green:        var(--primary-color);
  --green-dark:   var(--primary-dark);
  --green-light:  var(--primary-light);
  --pink:         var(--accent-primary);
  --orange:       var(--accent-orange);
  --orange-light: var(--accent-orange-light);
  --blue:         var(--blue-primary);
  --text:         var(--text-color);
  --muted:        #6f7d74;
  --white:        var(--bg-white);

  /* Game-table scaffolding -- not brand colours, stay local. */
  --page:         #e4ebee;   /* page: cool light gray-blue (cards pop above it) */
  --border:       #cbddd4;   /* visible soft border on white */
  --border-strong:#9fc9b8;   /* mat / lane edge */
  --mat-1:        #eef8f2;    /* table felt (top) */
  --mat-2:        #cfe7dc;    /* table felt (bottom) */
  --lane:         #eaf5ef;    /* stivă drop lane */

  --font-body: var(--font-heebo, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
  --font-head: var(--font-ibm, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);

  --radius:    16px;
  --radius-sm: 12px;
  --shadow:    0 8px 24px rgba(12, 58, 40, 0.12);
  --shadow-sm: 0 2px 8px rgba(12, 58, 40, 0.08);

  --stack-die: 84px;         /* dice are smaller inside the stivă */
  --stack-gap: 0.5rem;
}

* , *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* globals.css sets html { font-size: 20px } site-wide; every rem dimension
   below was tuned assuming the browser default (16px), so loading globals.css
   would silently scale this whole layout by 1.25x. This file loads after
   globals.css in index.html, so this override wins and pins the base back to
   16px for this page only (tt-005 is a tuning pass, not a layout redesign). */
html { font-size: 16px; }
html, body { height: 100%; }
body {
  margin: 0;
  display: flex; flex-direction: column; min-height: 100vh;
  font-family: var(--font-body);
  color: var(--text); background: var(--page);
  -webkit-user-select: none; user-select: none;
}

/* ── Header: one compact row — ☰ menu | title — subtitle | 🌐 language ──── */
header {
  padding: 0.55rem 1.2rem;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
header .header-top { display: flex; align-items: center; gap: 0.9rem; }
header h1 {
  margin: 0; font-family: var(--font-head);
  font-size: 1.35rem; font-weight: 700; color: var(--green);
  display: flex; align-items: center; gap: 0.5rem;
  white-space: nowrap;
}
/* subtitle rides inline with the title and soaks up the middle space,
   pushing the language picker to the right edge */
header .sub {
  margin: 0; flex: 1; min-width: 0;
  color: var(--muted); font-size: 0.92rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ☰ site menu — the "way home"; replaces the old dark site-strip */
.site-menu-wrap { position: relative; flex: 0 0 auto; }
#site-menu-btn {
  width: 2.4rem; height: 2.4rem; padding: 0;
  font-size: 1.15rem; line-height: 1;
  border: 1px solid var(--border-strong); border-radius: 0.5rem;
}
#site-menu {
  position: absolute; top: calc(100% + 0.45rem); left: 0; z-index: 200;
  display: flex; flex-direction: column; min-width: 11rem;
  background: var(--white); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 0.35rem;
}
#site-menu a {
  padding: 0.5rem 0.8rem; border-radius: 0.4rem;
  font-family: var(--font-head); font-weight: 600; font-size: 0.95rem;
  color: var(--green); text-decoration: none;
}
#site-menu a:hover { background: var(--green-light); }

/* 🌐 language picker — deliberately hard to miss */
.lang-wrap {
  display: flex; align-items: center; gap: 0.4rem;
  flex: 0 0 auto; font-size: 1.25rem;
}
#lang-select {
  font: inherit; font-family: var(--font-head); font-weight: 600; font-size: 0.95rem;
  border: 2px solid var(--green); border-radius: 0.5rem;
  padding: 0.4rem 0.6rem; background: var(--white); color: var(--green);
  cursor: pointer;
}

/* ── Fatal-error panel (lang.json missing/unreachable — tt-004) ─────────── */
.fatal-error {
  max-width: 32rem; margin: 4rem auto; padding: 2rem;
  text-align: center; font-family: var(--font-body); color: var(--text);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.fatal-error p { margin: 0.4rem 0; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
button {
  font: inherit; font-weight: 600; font-family: var(--font-head); cursor: pointer;
  border: 1px solid var(--border); border-radius: 0.55rem;
  padding: 0.7rem 1.2rem; background: var(--white); color: var(--green);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.04s ease;
}
button:hover { background: var(--green-light); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.4; cursor: default; }
button:disabled:hover { background: var(--white); }

button.primary {
  background: var(--green); border-color: var(--green); color: var(--white);
  box-shadow: var(--shadow-sm);
}
button.primary:hover { background: var(--orange-light); border-color: var(--orange-light); color: var(--green); }
button.primary:disabled:hover { background: var(--green); color: var(--white); }

button.ghost { background: var(--white); border: 1px solid var(--border-strong); color: var(--green); }
button.ghost:hover { background: var(--green-light); }

/* the "tip the stivă out" button — as tall as the stivă itself */
button.dump {
  background: var(--orange); border-color: var(--orange); color: var(--white);
  font-size: 1.05rem; padding: 0.7rem 1.1rem;
  align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  box-shadow: var(--shadow-sm);
}
button.dump:hover { background: var(--orange-light); border-color: var(--orange-light); color: var(--green); }
button.dump:disabled:hover { background: var(--orange); color: var(--white); }

/* ── Stivă (story sequence) — centered above the table ─────────────────── */
.stiva-bar {
  padding: 0.9rem 1.2rem;
  background: var(--white); border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
/* balanced 1fr | lane | 1fr grid: the lane sits at the exact page center,
   matching the table below, regardless of how wide the side buttons are */
.stiva-wrap {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 1rem;
  width: 100%;
}
.stiva-side { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.stiva-side-left { justify-content: flex-end; }
.stiva-side-right { justify-content: flex-start; align-items: stretch; }
.stiva-label { display: flex; flex-direction: column; justify-content: center; white-space: nowrap; }
.stiva-label h2 { margin: 0; font-family: var(--font-head); color: var(--green); font-size: 1.15rem; }

@keyframes tilt {
  0% { transform: rotate(0); } 25% { transform: rotate(-1.2deg); }
  60% { transform: rotate(0.8deg); } 100% { transform: rotate(0); }
}
.stiva-wrap.tilt { animation: tilt 0.4s ease-in-out; }

/* exactly 10 slots wide: 9 dice + one free space to rearrange */
.stack {
  display: flex; flex-direction: row; align-items: center; gap: var(--stack-gap);
  width: calc(10 * var(--stack-die) + 9 * var(--stack-gap) + 1.2rem + 4px);
  max-width: 100%;
  overflow-x: auto; min-height: calc(var(--stack-die) + 1.3rem);
  padding: 0.6rem; border-radius: var(--radius-sm);
  border: 2px dashed var(--border-strong); background: var(--lane);
}
.stiva-wrap.drop-over .stack { border-style: solid; border-color: var(--green); background: var(--green-light); }
/* text comes from JS (data-empty-hint, set by applyStrings) — never a literal string here (tt-004) */
.stack:empty::before {
  content: attr(data-empty-hint);
  color: var(--muted); font-size: 0.85rem; margin: auto; padding: 0 0.5rem; text-align: center;
}

/* ── Main: balanced 1fr | table | 1fr grid — the table sits at the exact
   page center, aligned with the stivă lane above ─────────────────────── */
main {
  flex: 1; display: grid; grid-template-columns: 1fr minmax(0, 58rem) 1fr;
  gap: 1rem; padding: 1.2rem 1.2rem 1.2rem 0.25rem; min-height: 0; align-items: stretch;
}

.rail { display: flex; flex-direction: column; gap: 1.2rem; }
/* count squares hug the screen edge; roll button sits against the table,
   with clear space between the two */
.rail-left { flex-direction: row; align-items: center; justify-content: space-between; gap: 2.5rem; }
/* the panel slides out from under the table and runs toward the screen's
   right edge (small right margin accepted) */
.rail-right .help-panel { width: calc(100% + 3.5rem); margin-left: -2.6rem; padding-left: 3.4rem; }
/* when hidden it keeps its footprint, so the table never shifts */
.rail-right.is-hidden { visibility: hidden; }

.panel {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 1rem;
}

.count-panel { display: flex; flex-direction: column; gap: 0.7rem; align-self: center; }
.seg-label { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--green); text-align: center; max-width: 4.6rem; }
.seg {
  display: flex; flex-direction: column; gap: 0.5rem;
}
.seg button {
  width: 4.6rem; height: 4.6rem; padding: 0;
  border: 1px solid var(--border-strong); border-radius: 0.6rem; box-shadow: none;
  background: var(--white); color: var(--green);
  font-size: 1.6rem;
}
.seg button:hover { background: var(--green-light); }
.seg button.active { background: var(--green); color: var(--white); }
.seg button.active:hover { background: var(--green); }

/* big square roll button, vertically centered beside the table */
#roll {
  width: 11rem; aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
  font-size: 1.45rem; border-radius: var(--radius);
}

/* game.html only. The master wraps its roll button + error message in this
   column so the message sits under the button without .rail-left needing to
   wrap (wrapping it would stack the count panel on desktop and move the demo's
   mobile roll button -- the CSS is shared with the frozen demo). */
.roll-col { display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem; min-width: 0; }

/* Roll failed (game.html only -- the demo rolls client-side and never renders
   this element). Quiet, wrapping, tap-anywhere-to-dismiss. `hidden` keeps it
   out of the flow entirely, so the rail never shifts while it is not showing. */
.roll-error {
  background: var(--orange-light); border-color: var(--orange); color: var(--green-dark);
  padding: 0.6rem 0.9rem; border-radius: var(--radius-sm);
  font-size: 0.98rem; line-height: 1.4; text-align: center;
  white-space: normal; cursor: pointer;
}
.roll-error:hover { background: var(--orange); }
.roll-error[hidden] { display: none; }

.help-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.help-head h3 { margin: 0; font-family: var(--font-head); font-size: 1.2rem; color: var(--green); }
.help-head button { padding: 0.2rem 0.55rem; font-size: 0.85rem; border-radius: 0.45rem; }
/* big and dark enough for grandma */
.help-panel ol { margin: 0; padding-left: 1.3rem; color: var(--text); font-size: 1.08rem; line-height: 1.55; }
.help-panel li { margin-bottom: 0.6rem; }
.help-panel li:last-child { margin-bottom: 0; }
.help-panel b { color: var(--green); font-weight: 700; }

/* anchored to the table's top-right corner, on the outside —
   dice can never land on top of it */
.help-fab {
  position: absolute; left: calc(100% + 0.6rem); top: 0; z-index: 5;
  width: 3.2rem; height: 3.2rem; padding: 0; border-radius: 50%;
  font-size: 1.3rem; box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
}

/* ── Masa (the table / play mat) ───────────────────────────────────────── */
.table-wrap { position: relative; z-index: 1; display: flex; }
.table {
  flex: 1;
  position: relative; min-height: 58vh;
  background: radial-gradient(circle at 30% 16%, var(--mat-1), var(--mat-2));
  border: 2px solid var(--pink); border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.7);
  overflow: hidden;
}

/* brand watermark stamped on the felt, bottom-right. pointer-events: none is
   load-bearing: dice must drag/tap straight through it */
.table-stamp {
  position: absolute; right: 1.1rem; bottom: 0.9rem; z-index: 2;
  width: 110px; height: auto;
  opacity: 0.45;
  pointer-events: none;
  -webkit-user-select: none; user-select: none;
}
/* offline build swaps the <img> for this text stamp (no network for the image) */
.table-stamp--text {
  width: auto;
  font-family: var(--font-head); font-weight: 600; font-size: 0.95rem;
  color: var(--green); opacity: 0.5;
}

/* ── Zarurile (the dice) ────────────────────────────────────────────────── */
.die {
  width: 116px; height: 116px;
  background: var(--white); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  font-size: 4.2rem; line-height: 1;
  cursor: grab; touch-action: none;
  transition: box-shadow 0.15s ease;
}
.die:hover { box-shadow: 0 12px 26px rgba(12,58,40,0.22); }
.table-die { position: absolute; }
.stack-die { position: relative; flex: 0 0 auto; }
.stack .die { width: var(--stack-die); height: var(--stack-die); font-size: 2.9rem; border-radius: 14px; }
.die .face { pointer-events: none; }

/* in the stivă = kept: warm orange ring */
.die.kept { border-color: var(--orange-light); box-shadow: 0 0 0 4px rgba(255,188,72,0.6), var(--shadow); }

/* picked up to re-roll — like lifting the dice you don't like off the table */
.die.picked {
  border: 3px dashed var(--pink); background: #fff6f9;
  box-shadow: 0 16px 30px rgba(229, 25, 83, 0.28);
}
.die .pick {
  position: absolute; top: -12px; right: -12px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--pink); color: #fff; font-size: 1.05rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}

/* covered = used in the story (stivă only): strong dark-green outline + check */
.die.covered { background: var(--green-light); border: 2px solid var(--green); }
.die.covered .face { opacity: 0.45; }
.die .check {
  position: absolute; bottom: -8px; right: -8px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--green); color: #fff; font-size: 0.95rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.die .order {
  position: absolute; left: -8px; top: -8px;
  min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px;
  background: var(--green); color: #fff; font-size: 0.82rem; font-weight: 700;
  font-family: var(--font-head);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}

@keyframes tumble {
  0%   { transform: rotate(-240deg) scale(0.3); opacity: 0.15; }
  70%  { opacity: 1; }
  100% { transform: rotate(var(--rot, 0deg)) scale(1); opacity: 1; }
}
.die.rolling { animation: tumble 0.5s cubic-bezier(0.2, 0.8, 0.3, 1); }

/* ── Tablet, landscape (e.g. iPad at 1024–1194px) ──────────────────────── */
@media (max-width: 700px) {
  /* phones: the inline subtitle is the first thing to give up its space */
  header .sub { display: none; }
}

@media (max-width: 1240px) {
  /* stivă: compact header row (label + buttons), full-width lane below,
     so all 10 slots stay visible */
  .stiva-bar { padding: 0.7rem 0.8rem; }
  .stiva-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; }
  .stiva-side-left { flex: 1; justify-content: flex-start; }
  .stiva-side-right { align-items: center; }
  button.dump { flex-direction: row; padding: 0.6rem 1.1rem; }
  .stack { order: 3; width: 100%; }

  /* table on top at full width, a slim controls row underneath —
     browser chrome eats vertical space, so every rem counts */
  main { display: flex; flex-direction: column; gap: 0.7rem; padding: 0.7rem; }
  .table-wrap { order: 1; flex: 1; }
  .table { min-height: 17rem; }
  .rail-left { order: 2; justify-content: center; align-items: center; gap: 2rem; }
  .rail-left .panel { padding: 0.6rem 0.9rem; }
  .count-panel { flex-direction: row; align-items: center; gap: 0.8rem; align-self: auto; }
  .seg { flex-direction: row; }
  /* game.html only (--wide = the five-button 3/4/5/6/9 selector). Its ~436px
     min-content width would shove the roll button off a 390px screen, so let the
     panel shrink and the buttons wrap onto a second line. Scoped by class rather
     than applied to .count-panel: the demo's two buttons always fit, and its
     layout is frozen -- widening this selector shifts the demo by a few px. */
  .count-panel--wide { min-width: 0; }
  .count-panel--wide .seg { flex-wrap: wrap; justify-content: center; }
  /* game.html only. #roll's fixed 16rem becomes .roll-col's min-content width, so
     the column must be told it may shrink (the demo's #roll is a direct flex child
     of .rail-left and shrinks on its own). */
  .roll-col { flex: 0 1 16rem; min-width: 0; }
  .roll-col #roll { width: 100%; min-width: 0; }
  .seg button { width: 4rem; height: 4rem; }
  .seg-label { max-width: none; }
  #roll { width: 16rem; aspect-ratio: auto; min-height: 4.2rem; flex-direction: row; font-size: 1.3rem; }

  /* help becomes a floating card opening from the header's corner,
     so it never squeezes the table */
  .rail-right { order: 3; position: fixed; right: 0.6rem; top: 0.6rem; bottom: auto; width: min(24rem, 70vw); z-index: 60; }
  .rail-right .help-panel {
    width: 100%; margin-left: 0; padding-left: 1.2rem;
    box-shadow: var(--shadow); max-height: calc(100vh - 1.2rem); overflow-y: auto;
  }
  .rail-right.is-hidden { display: none; }
  /* the ? lives in the header's top-right corner */
  .help-fab { position: fixed; left: auto; right: 0.7rem; top: 0.7rem; bottom: auto; }
}