/* ===========================================================
   Yahtzee — game-specific styles only.
   Chrome, buttons, #status, .hint, .score-box/.stat and the
   help dialog all come from shared.css.
   =========================================================== */

/* Tighten the default body gap a touch for this denser layout */
body { gap: 14px; }

h1 { margin-bottom: -2px; }

/* ---------- scoreboard chips row ---------- */
.chips {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- dice tray ---------- */
.dice {
  display: flex;
  gap: clamp(8px, 2.5vw, 14px);
  flex-wrap: wrap;
  justify-content: center;
}

.die {
  width: clamp(52px, 14vw, 72px);
  height: clamp(52px, 14vw, 72px);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 3px 10px var(--shadow);
  cursor: pointer;
  /* Inset for the pip grid. Must be a fixed/viewport unit, not a % —
     as a flex item the die resolves % padding against the .dice row width,
     which (with min-width:auto) blows the die up and collapses the pip
     columns to 0. This mirrors ~12% of the die's own clamped size. */
  padding: clamp(6px, 1.7vw, 9px);
  display: grid;
  /* 3x3 grid of pip slots */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6%;
  transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.die:hover { transform: translateY(-2px); }

/* A held die is visually pinned with the accent colour */
.die.held {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent), 0 3px 10px var(--shadow);
}

/* Disabled dice (before first roll / after scoring) can't be toggled */
.die.locked { cursor: default; opacity: 0.55; }
.die.locked:hover { transform: none; }

/* Little roll wiggle when dice change */
.die.rolling { animation: tumble 0.3s ease; }
@keyframes tumble {
  0%   { transform: rotate(0deg)   scale(1); }
  50%  { transform: rotate(-12deg) scale(1.08); }
  100% { transform: rotate(0deg)   scale(1); }
}

/* Pips — each occupies a fixed cell of the 3x3 grid */
.pip {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--text);
  align-self: center;
  justify-self: center;
}
/* Named grid positions so each face places pips correctly */
.pip.tl { grid-area: 1 / 1; }
.pip.tr { grid-area: 1 / 3; }
.pip.ml { grid-area: 2 / 1; }
.pip.mc { grid-area: 2 / 2; }
.pip.mr { grid-area: 2 / 3; }
.pip.bl { grid-area: 3 / 1; }
.pip.br { grid-area: 3 / 3; }

/* ---------- roll / new-game controls ---------- */
.controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.controls button { padding: 10px 24px; }
.controls button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Secondary "ghost" button (New Game) uses surface colours */
button.ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

/* ---------- score sheet ---------- */
.sheet {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  width: min(680px, 100%);
}
.section {
  flex: 1 1 280px;
  background: var(--surface);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 2px 10px var(--shadow);
}
.section-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 700;
}

.cats { display: flex; flex-direction: column; gap: 5px; }

/* A single scoring row */
.cat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.95rem;
  transition: background 0.12s, border-color 0.12s;
}
.cat .cat-name { font-weight: 500; }

/* The right-hand value: a live preview when empty, a fixed score when taken */
.cat .cat-val {
  font-weight: 700;
  min-width: 28px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Empty + selectable this turn → clickable, shows preview in accent */
.cat.open {
  cursor: pointer;
  border-color: var(--border);
}
.cat.open:hover { background: var(--surface-3); }
.cat.open .cat-val { color: var(--accent); }

/* Already filled → muted, not clickable */
.cat.filled { opacity: 0.72; }
.cat.filled .cat-val { color: var(--green); }

/* Empty but no dice rolled yet → just sits there, no preview */
.cat.idle .cat-val { color: var(--muted); }

/* ---------- subtotal lines (upper section) ---------- */
.subtotals {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sub {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--muted);
  padding: 0 12px;
}
.sub span:last-child {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}