:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --text: #1b1e24;
  --muted: #6b7280;
  --border: #e2e4e9;
  --accent: #3b5bdb;
  --accent-soft: #e8ecfd;
  --good: #1a8a4a;
  --good-soft: #e7f7ee;
  --bad: #c92a2a;
  --bad-soft: #fdecec;
  --held: #ffd43b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: linear-gradient(160deg, #e8edfb 0%, #eaf6ee 100%);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 14px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.topbar-actions {
  display: flex;
  gap: 10px;
}

button {
  font: inherit;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  background: var(--accent);
  color: white;
  cursor: pointer;
}

button:hover { filter: brightness(1.08); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

button.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

button.gold {
  background: linear-gradient(135deg, #f6c453, #dfa32a);
  color: #4a3200;
  box-shadow: 0 2px 8px rgba(223, 163, 42, 0.4);
}
button.gold:hover { filter: brightness(1.06); }

#app {
  max-width: 760px;
  margin: 24px auto;
  padding: 0 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.accuracy-display {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 700;
  padding: 0 4px;
}

.accuracy-label {
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.accuracy-value {
  font-size: 2.1rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}

.panel h2 {
  margin: 0 0 12px;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--muted);
}

#rerolls-label {
  /* Belt-and-suspenders against the dice box's height changing: reserve
     one full line regardless of content (a collapsed/empty line box would
     otherwise shrink the box when this label has no text). */
  min-height: 1.2em;
}

.game-card {
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(20, 22, 28, 0.08);
  border-radius: 12px;
}

.game-card .scorecard-panel {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.game-card .dice-panel {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.dice-row-wrap {
  width: fit-content;
  margin: 0 auto 16px;
}

.dice-row {
  display: flex;
  gap: 12px;
  align-items: center;
  height: 64px;
}

.dice-controls {
  position: relative;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.dice-feedback {
  /* Absolutely positioned so its (variable-length) text can never affect
     the roll box's size -- it pops up over the Roll button instead. */
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 6px;
  transform: translate(-50%, 4px);
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--panel);
  box-shadow: 0 6px 18px rgba(20, 22, 28, 0.2);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.dice-feedback.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.dice-feedback.optimal { color: var(--good); }
.dice-feedback.suboptimal { color: var(--bad); }

.die {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: var(--bg);
  border: 2px solid var(--border);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 11px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.08s ease, border-color 0.08s ease, background 0.08s ease;
}

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

.pip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text);
  justify-self: center;
  align-self: center;
}
.pip.tl { grid-row: 1; grid-column: 1; }
.pip.tr { grid-row: 1; grid-column: 3; }
.pip.ml { grid-row: 2; grid-column: 1; }
.pip.c  { grid-row: 2; grid-column: 2; }
.pip.mr { grid-row: 2; grid-column: 3; }
.pip.bl { grid-row: 3; grid-column: 1; }
.pip.br { grid-row: 3; grid-column: 3; }

@media (max-width: 480px) {
  .dice-row {
    gap: 8px;
    height: 48px;
  }
  .die {
    width: 48px;
    height: 48px;
    padding: 8px;
    border-radius: 10px;
  }
  .pip {
    width: 7px;
    height: 7px;
  }
}

.die.held {
  border-color: var(--held);
  background: #fff8e1;
}

.die.locked {
  cursor: default;
}
.die.locked:hover { transform: none; }

@keyframes dice-roll {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(-10deg) scale(1.06); }
  50%  { transform: rotate(8deg) scale(0.95); }
  75%  { transform: rotate(-6deg) scale(1.04); }
  100% { transform: rotate(0deg) scale(1); }
}

.die.rolling {
  animation: dice-roll 0.22s ease-in-out infinite;
  border-color: var(--accent);
}

#roll-btn {
  padding: 13px 32px;
  font-size: 1.1rem;
  font-weight: 600;
}

table.scorecard {
  width: 100%;
  border-collapse: collapse;
  /* Fixed layout: column widths come only from the <colgroup>, never from
     cell content (e.g. an absolutely-positioned feedback badge's text) --
     so the table, and everything around it, can never resize itself. */
  table-layout: fixed;
}

table.scorecard td {
  padding: 8px 9px;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
}

table.scorecard tr.filled td { color: var(--muted); }
table.scorecard tr.filled .mini-die { border-color: var(--muted); }
table.scorecard tr.filled .mini-die .pip { background: var(--muted); }

table.scorecard td.cat-name { font-weight: 500; }
table.scorecard td.cat-score { font-variant-numeric: tabular-nums; text-align: right; }
table.scorecard td.cat-action { text-align: right; }

.action-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.row-feedback {
  /* Absolutely positioned so its (variable-length) text can never affect
     the action column's width -- it just overlays above the Fill button. */
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--panel);
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.row-feedback.visible { opacity: 1; }
.row-feedback.optimal { color: var(--good); }
.row-feedback.suboptimal { color: var(--bad); }

.score-extra {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
}

.dice-icon-group {
  display: flex;
  align-items: center;
  gap: 3px;
}

.dice-icon-sep {
  width: 8px;
  flex-shrink: 0;
}

.mini-die {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 4.5px;
  background: var(--panel);
  border: 1.5px solid var(--text);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 3.5px;
}

.mini-die .pip {
  width: 3.5px;
  height: 3.5px;
}

table.scorecard button.fill-btn {
  padding: 6px 13px;
  font-size: 0.88rem;
}

table.scorecard button.fill-btn-placeholder {
  visibility: hidden;
}

table.scorecard tr.summary-row td {
  font-weight: 600;
  background: var(--bg);
}

table.scorecard tr.grand-total-row td {
  font-weight: 700;
  border-top: 2px solid var(--border);
  border-bottom: none;
}

#scorecard-lower tr:first-child td {
  padding-top: 18px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 28, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  background: var(--panel);
  border-radius: 14px;
  padding: 28px 32px;
  max-width: 380px;
  text-align: center;
}

.modal h2 { margin-top: 0; }
.modal p { font-size: 0.95rem; line-height: 1.5; color: var(--muted); }

.modal-wide {
  max-width: 640px;
  width: 100%;
}

.modal-scroll {
  max-height: 85vh;
  overflow-y: auto;
}

.nickname-intro {
  text-align: left;
  background: var(--bg);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.88rem;
}

#nickname-form {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

#nickname-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.hiscores-sort-toggle {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}

.sort-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.hiscores-table-wrap {
  overflow-x: auto;
  margin-bottom: 14px;
}

.hiscores-more-btn {
  margin-bottom: 12px;
}

table.hiscores-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

table.hiscores-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

table.hiscores-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  white-space: nowrap;
}

table.hiscores-table tbody tr:first-child td {
  font-weight: 700;
}

td.hiscores-empty {
  text-align: center;
  color: var(--muted);
  padding: 24px 10px;
}

.hiscores-rank {
  font-weight: 700;
  color: var(--muted);
  width: 32px;
}

.hiscores-score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.hiscores-accuracy {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

table.hiscores-table tr.rank-1 {
  background: linear-gradient(90deg, #fff6d8, transparent);
}
table.hiscores-table tr.rank-1 .hiscores-rank {
  color: #b8860a;
}
table.hiscores-table tr.rank-1 .hiscores-rank::before { content: "🥇 "; }

table.hiscores-table tr.rank-2 {
  background: linear-gradient(90deg, #eef1f5, transparent);
}
table.hiscores-table tr.rank-2 .hiscores-rank {
  color: #7a8699;
}
table.hiscores-table tr.rank-2 .hiscores-rank::before { content: "🥈 "; }

table.hiscores-table tr.rank-3 {
  background: linear-gradient(90deg, #fbe8d9, transparent);
}
table.hiscores-table tr.rank-3 .hiscores-rank {
  color: #b3651c;
}
table.hiscores-table tr.rank-3 .hiscores-rank::before { content: "🥉 "; }

/* ---------------------------------------------------------------------- */
/* Game-over move-by-move breakdown table                                  */
/* ---------------------------------------------------------------------- */

.final-summary {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin: 4px 0 20px;
  flex-wrap: wrap;
}

.final-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.final-stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
}

.final-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.breakdown-table-wrap {
  overflow-x: auto;
  margin-bottom: 20px;
}

table.breakdown-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

table.breakdown-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  padding: 6px 2px;
  border-bottom: 1px solid var(--border);
}

table.breakdown-table td {
  border-bottom: 1px solid var(--border);
  padding: 2px;
}

.breakdown-round {
  text-align: center;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.breakdown-cell-inner {
  display: flex;
  justify-content: center;
  padding: 2px 0;
}

.marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: default;
}

.marker-good { background: var(--good-soft); color: var(--good); }
.marker-bad { background: var(--bad-soft); color: var(--bad); }

/* Rendered as a single shared element appended to <body> (see index.html),
   positioned in JS via getBoundingClientRect -- deliberately NOT nested
   inside the scrollable modal, so it can never be clipped by the modal's
   overflow (a real problem for the topmost table rows) and never inflates
   the table wrapper's scrollable content box while hidden. */
.cell-tooltip {
  position: fixed;
  z-index: 100;
  width: max-content;
  max-width: 250px;
  background: var(--text);
  color: white;
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  text-align: left;
  pointer-events: none;
}

.tooltip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  border-radius: 6px;
  font-size: 0.78rem;
}

.tooltip-row.chosen {
  background: rgba(255, 255, 255, 0.14);
}

.tooltip-icon {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

/* .mini-die's default white fill + dark pips already reads fine against
   the tooltip's dark background -- no override needed. */

.tooltip-empty-hold {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}

.tooltip-loss {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
  color: #ffd166;
}

.tooltip-tag {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.final-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ---------------------------------------------------------------------- */
/* Game Analysis: standalone what-if sandbox                               */
/* ---------------------------------------------------------------------- */

.analysis-intro {
  font-size: 0.85rem;
  margin-top: -4px;
}

.analysis-scorecard {
  margin-bottom: 18px;
}

.analysis-scorecard tr {
  cursor: pointer;
}

.analysis-scorecard tr:hover td {
  background: var(--bg);
}

.analysis-scorecard tr.closed {
  background: #e9eaee;
  color: var(--muted);
}
.analysis-scorecard tr.closed:hover td {
  background: #e2e3e8;
}
.analysis-scorecard tr.closed .mini-die {
  border-color: var(--muted);
}
.analysis-scorecard tr.closed .mini-die .pip {
  background: var(--muted);
}

.analysis-status {
  text-align: right;
  font-weight: 600;
}

.analysis-setup {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 18px;
  text-align: left;
}

.analysis-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.analysis-field-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  font-weight: 600;
}

#analysis-u-input {
  width: 64px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 9px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stepper button {
  width: 32px;
  height: 32px;
  padding: 0;
  font-weight: 700;
  line-height: 1;
}

.stepper span {
  min-width: 1.2em;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.analysis-dice-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

#analysis-dice-display {
  gap: 6px;
}
#analysis-dice-display .die {
  width: 40px;
  height: 40px;
  padding: 6px;
  cursor: default;
}
#analysis-dice-display .die .pip {
  width: 6px;
  height: 6px;
}

#analysis-run-btn {
  display: block;
  margin: 0 auto 20px;
  padding: 11px 28px;
  font-weight: 600;
}

#analysis-results h3 {
  font-size: 1rem;
  margin: 0 0 12px;
  color: var(--muted);
}

.analysis-results-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.analysis-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg);
}

.analysis-result-row.best {
  background: var(--good-soft);
}

.analysis-result-icon {
  display: flex;
  align-items: center;
}

.analysis-result-loss {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--bad);
}

.analysis-result-row.best .analysis-result-loss {
  color: var(--good);
}

#set-dice-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

.set-dice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#set-dice-total {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}