@import '/css/global.css';

.yahtzee-board {
  /* Local surface tokens (used in 2+ places below). */
  --yh-paper: #fffaf3; /* warm off-white scorecard surface */
  --yh-preview: #16a34a; /* green — a scorable (preview) category */
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(10px, 1.8vw, 16px);
  user-select: none;
}

/* --- Dice tray: a felt panel so the white dice pop and read as a real game -- */
.yh-dice-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 2.2vw, 22px);
  border-radius: var(--border-radius-md);
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.18), transparent 28%),
    linear-gradient(160deg, #4b1d0d, var(--color-yahtzee));
  box-shadow:
    inset 0 2px 12px rgba(0, 0, 0, 0.42),
    var(--shadow-sm);
  cursor: pointer;
}
.yh-dice-area:hover .yh-die:not(.is-held) {
  transform: translateY(-2px);
}

.yh-dice {
  display: flex;
  gap: clamp(8px, 1.6vw, 16px);
  justify-content: center;
}

/* Die face reuses the shared 3×3 pip grid + `.dice-pip` styling (dice.css) so a
   Yahtzee die and a Ludo die render identically. */
.yh-die {
  width: clamp(56px, 9vw, 82px);
  height: clamp(56px, 9vw, 82px);
  box-sizing: border-box;
  border-radius: 16%;
  background: var(--dice-bg);
  border: none;
  cursor: pointer;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0.15rem;
  padding: clamp(7px, 1.1vw, 11px);
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.35),
    inset 0 -2px 3px rgba(0, 0, 0, 0.12);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.yh-die:hover {
  transform: translateY(-3px);
}

/* A held die lifts and gets a golden ring + a check badge so it's obvious. */
.yh-die.is-held {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 3px var(--color-goose),
    0 8px 10px rgba(0, 0, 0, 0.4);
}

.yh-die.is-held::after {
  content: '📌';
  position: absolute;
  top: -10px;
  right: -8px;
  font-size: 14px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

/* Before the first roll the dice are placeholders, not yet interactive-looking. */
.yh-die.is-fresh {
  opacity: 0.72;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.42),
    0 8px 16px rgba(0, 0, 0, 0.36);
}

.yh-die.is-rolling {
  animation: diceTumble 0.6s ease-in-out;
}

/* --- Scorecard ------------------------------------------------------------- */
.yh-score-section {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--color-yahtzee) 30%, var(--border-color-light));
  border-radius: var(--border-radius-md);
  background: var(--yh-paper);
  box-shadow: inset 0 0 0 3px rgba(124, 45, 18, 0.04);
}
.yh-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-size-sm);
}

.yh-table th {
  text-align: left;
  padding: 8px 10px;
  color: var(--text-color-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: color-mix(in srgb, var(--color-yahtzee) 12%, var(--yh-paper));
  border-bottom: 2px solid color-mix(in srgb, var(--color-yahtzee) 28%, var(--border-color-light));
}
.yh-table th:last-child {
  text-align: right;
}

.yh-row td {
  padding: 7px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-yahtzee) 14%, var(--border-color-light));
}
.yh-row .yh-cat {
  cursor: default;
}

/* The score cell holds each category's number, right-aligned and tabular. */
.yh-score-cell {
  min-width: 40px;
  text-align: right;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

/* A committed score shows the points in the primary color. */
.yh-row.is-scored td {
  color: var(--text-color-muted);
}
.yh-row.is-scored .yh-score-cell {
  color: var(--primary-color);
}

/* An unscored category the current dice could fill: green and clickable, with
   the projected points preceded by a green dot. */
.yh-row.is-preview .yh-cat,
.yh-row.is-preview .yh-score-cell {
  cursor: pointer;
}
.yh-row.is-preview .yh-score-cell {
  color: var(--yh-preview);
}
.yh-row.is-preview .yh-score-cell::before {
  content: '';
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: var(--yh-preview);
  vertical-align: middle;
}
.yh-row.is-preview:hover {
  background: color-mix(in srgb, var(--yh-preview) 14%, transparent);
}

.yh-sep td {
  padding: 3px 0;
}
.yh-sep td::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--border-color-light);
  border-radius: 2px;
}

.yh-table tfoot td {
  padding: 7px 10px;
  font-weight: var(--font-weight-bold);
  border-top: 2px solid color-mix(in srgb, var(--color-yahtzee) 28%, var(--border-color-light));
}
.yh-table tfoot td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* The grand total is the headline number. */
.yh-table tfoot tr:last-child td {
  font-size: var(--font-size-md);
  color: var(--color-yahtzee);
}