:root {
  --bg: #e6e0cc;
  --card-body: #f7f1e0;
  --text: #1a1a1a;
  --surface: #ece5d3;
  --border: #b8af94;
  --muted: #4a4539;
  --accent-blue: #2563eb;
  --accent-green: #166534;
  --gold: #713f12;
  --max-w: 500px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  height: 100vh;
  height: 100svh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overscroll-behavior: none;
}

.content-width {
  width: 100%;
  max-width: var(--max-w);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  z-index: 2;
  position: relative;
}

/* --- CONSTRAINED FIREWORKS (iOS FIX) --- */
.fireworks-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  contain: layout paint;
  touch-action: none;
  overflow: hidden;
  visibility: hidden;
}

body.has-winner .fireworks-layer { visibility: visible; }

@keyframes firework {
  0% { transform: translateY(95vh) scale(0.2); opacity: 1; }
  30% { opacity: 1; }
  100% { transform: translateY(var(--y)) scale(var(--s)); opacity: 0; }
}

.firework, .firework::before, .firework::after {
  content: "";
  position: absolute;
  top: 0;
  width: 3.5vmin;
  aspect-ratio: 1;
  background:
    radial-gradient(circle, #fff 0.1vmin, #0000 0) 10% 10%,
    radial-gradient(circle, var(--gold) 0.3vmin, #0000 0) 50% 0%,
    radial-gradient(circle, var(--accent-green) 0.1vmin, #0000 0) 0% 50%,
    radial-gradient(circle, var(--accent-blue) 0.4vmin, #0000 0) 90% 20%,
    radial-gradient(circle, #fff 0.05vmin, #0000 0) 80% 90%,
    radial-gradient(circle, var(--gold) 0.2vmin, #0000 0) 95% 70%,
    radial-gradient(circle, var(--accent-green) 0.15vmin, #0000 0) 20% 80%,
    radial-gradient(circle, #fff 0.25vmin, #0000 0) 40% 40%;
  background-size: 0.5vmin 0.5vmin;
  background-repeat: no-repeat;
}

body.has-winner .firework, .firework::before, .firework::after {
  animation: firework var(--d) infinite ease-out;
}

.firework:nth-child(1) { left: 10%; --y: 18vh; --s: 5; --d: 1.6s; }
.firework:nth-child(2) { left: 85%; --y: 28vh; --s: 3.5; --d: 2.2s; animation-delay: -0.4s; }
.firework:nth-child(3) { left: 45%; --y: 12vh; --s: 7; --d: 1.9s; animation-delay: -1.2s; }
.firework:nth-child(4) { left: 25%; --y: 35vh; --s: 4.5; --d: 2.5s; animation-delay: -0.8s; }
.firework:nth-child(5) { left: 92%; --y: 42vh; --s: 6; --d: 2.0s; animation-delay: -1.5s; }

.firework::before { transform: rotate(120deg); }
.firework::after { transform: rotate(240deg); }

/* SETUP SCREEN */
#setup-screen { padding: 40px 24px; flex: 1; display: flex; flex-direction: column; width: 100%; overflow-y: auto; z-index: 10; }
h1 { font-family: 'Bebas Neue'; font-size: 5rem; text-align: center; margin-bottom: 25px; line-height: 1; }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.mode-btn { background: var(--surface); border: 2px solid var(--border); color: var(--muted); padding: 15px 5px; border-radius: 12px; text-align: center; font-size: 0.75rem; font-weight: bold; cursor: pointer; text-transform: uppercase; }
.mode-btn.selected { border-color: var(--text); color: var(--text); background: #fff; }

#player-list { margin-bottom: 10px; }
.player-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.player-row input { flex: 1; background: #fff; border: 2px solid var(--border); color: var(--text); padding: 14px; border-radius: 10px; font-size: 16px; font-weight: bold; }
.del-btn { background: #fee2e2; border: 2px solid #f87171; color: #991b1b; padding: 12px; border-radius: 10px; cursor: pointer; }
.add-player-link { background: none; border: none; color: var(--accent-blue); font-weight: bold; font-size: 0.9rem; cursor: pointer; text-decoration: underline; margin-bottom: 25px; text-align: left; }
.primary-btn { width: 100%; padding: 20px; background: var(--text); border: none; border-radius: 16px; color: #fff; font-family: 'Bebas Neue'; font-size: 2rem; cursor: pointer; text-transform: uppercase; }

/* GAME SCREEN */
#game-screen { display: none; flex-direction: column; height: 100%; width: 100%; overflow: hidden; z-index: 10; position: relative; }
.header { padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; background: var(--card-body); border-bottom: 2px solid var(--border); padding-top: max(12px, env(safe-area-inset-top)); }
.header-btn { background:none; border:none; font-weight:bold; cursor:pointer; font-size: 0.75rem; text-transform: uppercase; }
#mode-title { font-family: 'Bebas Neue'; font-size: 1.8rem; }

.table-container { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 15px; background: transparent; }
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; border: 2px solid var(--border); }
th { background: var(--surface); color: var(--muted); font-size: 0.6rem; text-transform: uppercase; padding: 8px; position: sticky; top: 0; z-index: 2; }
td { text-align: center; padding: 10px 4px; border-bottom: 1px solid var(--surface); font-weight: bold; font-size: 0.8rem; cursor: pointer; }
.row-active { background: #fdf2d8; }
.cell-editing { outline: 3px solid var(--accent-blue); outline-offset: -3px; background: #eff6ff !important; }

.winner-row td:first-child { border: 3px solid #22c55e !important; border-radius: 8px; background: #f0fdf4 !important; }
.f7-count { color: var(--accent-green); font-size: 0.65rem; display: block; }
.f7-tag { color: var(--accent-green); font-size: 0.65rem; font-weight: normal; }

.controls { padding: 10px 15px; background: var(--card-body); border-top: 2px solid var(--border); border-radius: 20px 20px 0 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.current-info { display:flex; justify-content:space-between; align-items: baseline; margin-bottom: 4px; }
.active-name { font-family: 'Bebas Neue'; font-size: 1.5rem; }
.active-score { font-family: 'Bebas Neue'; font-size: 1.8rem; color: var(--accent-blue); }

.grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 8px; }
.btn-num { aspect-ratio: 1; border: 2.5px solid currentColor; background: #fff; border-radius: 8px; font-family: 'Bebas Neue'; font-size: 1.1rem; cursor: pointer; transition: opacity 0.2s; }
.btn-num.disabled { opacity: 0.15; cursor: not-allowed; }
.btn-num.selected { background: var(--accent-green) !important; color: #fff !important; border-color: var(--accent-green) !important; opacity: 1 !important; }

/* --- COLOR PALETTE --- */
.btn-num[data-n="0"] { color: #94a3b8; } .btn-num[data-n="1"] { color: #64748b; }
.btn-num[data-n="2"] { color: #849101; } .btn-num[data-n="3"] { color: #be123c; }
.btn-num[data-n="4"] { color: #0891b2; } .btn-num[data-n="5"] { color: #15803d; }
.btn-num[data-n="6"] { color: #7e22ce; } .btn-num[data-n="7"] { color: #c2410c; }
.btn-num[data-n="8"] { color: #166534; } .btn-num[data-n="9"] { color: #92400e; }
.btn-num[data-n="10"]{ color: #b91c1c; } .btn-num[data-n="11"]{ color: #1e40af; }
.btn-num[data-n="12"]{ color: #78350f; } .btn-num[data-n="13"]{ color: #1d4ed8; }

.mods-row { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; margin-bottom: 8px; }
.btn-mod { padding: 8px 12px; background: #fff; border: 2px solid var(--border); border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 0.75rem; white-space: nowrap; }
.btn-mod.active { background: var(--accent-green); color: #fff; border-color: var(--accent-green); }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-action { padding: 10px; border-radius: 10px; font-weight: bold; cursor: pointer; font-family: 'Bebas Neue'; font-size: 1.1rem; }
.bust { background: #fee2e2; color: #991b1b; border: 2px solid #f87171; }
.stay { background: #dcfce7; color: #166534; border: 2px solid #4ade80; }
#live-save-btn { padding: 15px; margin-bottom: 8px; background: var(--accent-blue); border: none; border-radius: 12px; color: #fff; font-family: 'Bebas Neue'; font-size: 1.5rem; cursor: pointer; width: 100%; }
#live-save-btn.winner-state { background: #166534; }