/* ── Reset & variables ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #0d1117;
  --surface:      #161b22;
  --surface2:     #21262d;
  --border:       #30363d;
  --accent:       #f0c040;
  --accent-glow:  rgba(240, 192, 64, 0.3);
  --teal:         #14b8a6;
  --teal-glow:    rgba(20, 184, 166, 0.35);
  --teal-bg:      #0a2520;
  --green:        #3fb950;
  --green-bg:     #0d2a16;
  --text:         #e6edf3;
  --muted:        #8b949e;
  --radius:       8px;
  --die-size:     clamp(40px, 16vw, 80px);
  --die-z:        calc(var(--die-size) / 2);
}

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100%;
  line-height: 1.4;
}

/* ── App shell ────────────────────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-areas:
    "header header"
    "main   aside";
  grid-template-columns: 1fr 240px;
  grid-template-rows: auto 1fr;
  height: 100vh;
  max-width: 1100px;
  margin: 0 auto;
  gap: 12px;
  padding: 12px;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.app-header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.app-header h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.logo-die {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.turn-info {
  font-size: 0.88rem;
  color: var(--muted);
}

/* ── Main column ──────────────────────────────────────────────────────────── */
.app-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* ── Dice area ────────────────────────────────────────────────────────────── */
#dice-area {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

#dice-container {
  display: flex;
  gap: clamp(4px, 1.5vw, 12px);
  justify-content: center;
  flex-wrap: nowrap;
  perspective: 800px;
  width: 100%;
}

/* ── Individual die ───────────────────────────────────────────────────────── */
.die-scene {
  width: var(--die-size);
  height: var(--die-size);
  perspective: 600px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.12s ease;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.15, 0.55, 0.3, 1);
  transform: rotateX(0deg) rotateY(0deg);
}

.cube-face {
  position: absolute;
  width: var(--die-size);
  height: var(--die-size);
  background: #ffffff;
  border-radius: calc(var(--die-size) * 0.175);
  border: max(1px, calc(var(--die-size) * 0.0375)) solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.2);
  backface-visibility: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cube-face svg { width: 77.5%; height: 77.5%; display: block; }

.cube-face.front  { transform: rotateY(  0deg) translateZ(var(--die-z)); }
.cube-face.right  { transform: rotateY( 90deg) translateZ(var(--die-z)); }
.cube-face.back   { transform: rotateY(180deg) translateZ(var(--die-z)); }
.cube-face.left   { transform: rotateY(-90deg) translateZ(var(--die-z)); }
.cube-face.top    { transform: rotateX( 90deg) translateZ(var(--die-z)); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(var(--die-z)); }

.die-scene:not(.kept):not(.rolling):hover {
  transform: translateY(-4px) scale(1.05);
}

.die-scene.kept .cube-face {
  border-color: var(--accent);
  box-shadow: inset 0 0 15px rgba(0,0,0,0.1), 0 0 18px var(--accent-glow);
}

/* ── Dice tumble animation (1s) ───────────────────────────────────────────── */
.die-scene.rolling {
  pointer-events: none;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.dice-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.btn-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

#roll-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #111;
  border: none;
  border-radius: var(--radius);
  padding: 10px 22px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, transform 0.1s, opacity 0.2s;
}

.btn-die-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

#roll-btn:hover:not(:disabled) {
  background: #f5d060;
  transform: translateY(-1px);
}

#roll-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none;
}

#confirm-btn {
  padding: 10px 22px;
  background: transparent;
  color: var(--teal);
  border: 2px solid var(--teal);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.2s, transform 0.1s, opacity 0.2s;
  letter-spacing: 0.04em;
}

#confirm-btn:not(:disabled):hover {
  background: var(--teal-bg);
  box-shadow: 0 0 16px var(--teal-glow);
  transform: translateY(-1px);
}

#confirm-btn:not(:disabled) {
  box-shadow: 0 0 10px var(--teal-glow);
}

#confirm-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: var(--border);
  color: var(--muted);
  box-shadow: none;
}

#hint-text {
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
  max-width: 460px;
}

/* ── Scoreboard ───────────────────────────────────────────────────────────── */
#scoreboard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* 2-column grid */
#scoreboard-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.score-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.score-col .score-cell {
  flex: 1;
}

.col-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ── Score cell (horizontal row layout) ───────────────────────────────────── */
.score-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  min-height: 34px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.cat-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  color: var(--muted);
  flex: 1;
  min-width: 0;
}

.cat-label-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
}

.cat-icon svg {
  width: 100%;
  height: 100%;
}

.cat-label small {
  font-size: 0.72rem;
  opacity: 0.7;
}

.cat-score {
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 700;
  color: var(--muted);
  min-width: 40px;
  text-align: right;
}

/* Available (preview): gold */
.score-cell.available {
  border-color: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 6px var(--accent-glow);
}
.score-cell.available:hover {
  background: #1e1b0b;
  box-shadow: 0 0 14px var(--accent-glow);
}
.score-cell.available .cat-score  { color: var(--accent); }
.score-cell.available .cat-label  { color: #cbb878; }

/* Selected: teal pulse */
.score-cell.selected {
  border-color: var(--teal);
  background: var(--teal-bg);
  cursor: pointer;
  box-shadow: 0 0 14px var(--teal-glow);
}
.score-cell.selected .cat-score { color: var(--teal); }
.score-cell.selected .cat-label { color: #70d5cb; }

/* Confirmed: green, locked */
.score-cell.confirmed {
  background: var(--green-bg);
  border-color: #238636;
  cursor: default;
}
.score-cell.confirmed .cat-score { color: var(--green); }
.score-cell.confirmed .cat-label { color: #5bb87a; }

/* Info cells */
.score-cell.info-cell {
  background: #0f1520;
  border-color: #2a3a50;
  cursor: default;
}
.score-cell.info-cell .cat-label { color: #6a8aaa; }
.score-cell.info-cell .cat-score { color: #6a9ed8; font-size: 0.85rem; }

.score-cell.bonus-row .cat-score { color: #a0c070; }

/* Split cell */
.split-cell {
  padding: 0;
}
.split-half {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 8px;
  min-width: 0;
}
.split-half .cat-label {
  font-size: clamp(0.75rem, 1.2vw, 0.85rem);
  flex: none;
}
.split-half .cat-score {
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  min-width: auto;
}
.split-divider {
  width: 1px;
  background: #2a3a50;
  align-self: stretch;
}
.bonus-half .cat-score {
  color: #a0c070 !important;
}

/* Total row: full width, accent */
.total-row {
  background: #1a120a;
  border-color: var(--accent);
  padding: 10px 16px;
  min-height: 42px;
}
.total-row .cat-label {
  font-size: clamp(0.88rem, 1.5vw, 1.05rem);
  font-weight: 700;
  color: #c8a030;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.total-row .cat-score {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  color: var(--accent);
}

/* ── Leaderboard ──────────────────────────────────────────────────────────── */
#leaderboard {
  grid-area: aside;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 12px;
  align-self: start;
  position: sticky;
  top: 12px;
}

#leaderboard h2 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#leaderboard-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#leaderboard-list li {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 5px 8px;
  background: var(--surface2);
  border-radius: 5px;
  font-size: 0.78rem;
}

#leaderboard-list li.empty {
  display: block;
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
  padding: 8px;
}

.rank     { color: var(--muted); font-weight: 700; }
.lb-name  { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { color: var(--accent); font-weight: 700; }

/* ── Modal ────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.modal-overlay[hidden] { display: none; }

.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 28px;
  text-align: center;
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: pop-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pop-in {
  from { transform: scale(0.82); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.modal-box h2          { font-size: 1.5rem; color: var(--accent); }
.final-score-line      { font-size: 1rem; color: var(--muted); }
.final-score-line strong { color: var(--accent); font-size: 1.6rem; }
.modal-rank            { font-size: 0.95rem; color: var(--green); min-height: 1.4em; }

.name-entry { display: flex; gap: 8px; }
.name-entry input {
  flex: 1;
  padding: 8px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s;
}
.name-entry input:focus { border-color: var(--accent); }

.name-entry button {
  padding: 8px 16px;
  background: var(--accent);
  color: #111;
  border: none;
  border-radius: var(--radius);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, opacity 0.2s;
}
.name-entry button:hover:not(:disabled) { background: #f5d060; }
.name-entry button:disabled { opacity: 0.4; cursor: not-allowed; }

.new-game-btn {
  width: 100%;
  padding: 11px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.15s;
}
.new-game-btn:hover { background: var(--surface2); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .app {
    grid-template-areas:
      "header"
      "main"
      "aside";
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
  }
  .app-main { overflow: visible; }
  #scoreboard { overflow-y: visible; }
  #leaderboard { position: static; }
}

@media (max-width: 600px) {
  #scoreboard-cols {
    grid-template-columns: 1fr;
  }
  .score-col .score-cell { flex: none; }
}

@media (max-width: 400px) {
  .app-header h1 { font-size: 1.1rem; }
  #roll-btn, #confirm-btn { padding: 9px 14px; font-size: 0.88rem; }
}

/* ── Yacht Celebration ────────────────────────────────────────────────────── */
.yacht-celebration {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5rem;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 0 20px #f0c040, 0 0 40px #f0c040, 0 0 80px #f0c040;
  z-index: 2000;
  pointer-events: none;
  animation: yacht-pop 3s ease-out forwards;
}

@keyframes yacht-pop {
  0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  10%  { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  20%  { transform: translate(-50%, -50%) scale(0.9); opacity: 1; }
  30%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  80%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

.yacht-flash {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1999;
  pointer-events: none;
  animation: yacht-flash-anim 3s ease-out forwards;
}

@keyframes yacht-flash-anim {
  0% { opacity: 1; }
  100% { opacity: 0; }
}