@font-face {
  font-family: 'DM Serif Display Fallback';
  src: local('Georgia');
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #062018;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 50% -10%, #0B3B2E 0%, #062018 78%);
  color: #EDE7D6;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.serif { font-family: Georgia, 'Times New Roman', serif; }
.mono { font-family: ui-monospace, Menlo, 'SF Mono', Consolas, monospace; }

button { font-family: inherit; }
button:active { transform: translateY(1px); }

/* ---- setup ---- */
.setup { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.setup-hero { padding: max(28px, env(safe-area-inset-top)) 22px 0; }
.setup-title { font-size: clamp(34px, 9vw, 46px); line-height: 1.05; }
.setup-sub { font-size: 13px; letter-spacing: .06em; color: #C9A227; padding-top: 8px; }
.setup-names { padding: 26px 18px 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.name-row { display: flex; gap: 10px; }
.name-input {
  flex: 1; min-width: 0; height: 56px; border-radius: 14px; padding: 0 16px;
  font-size: 16px; background: rgba(0,0,0,.32); color: #EDE7D6;
  border: 1px solid rgba(237,231,214,.2); outline: none;
}
.name-input:focus { border-color: rgba(201,162,39,.6); }
.name-remove {
  width: 56px; height: 56px; border-radius: 14px; background: transparent;
  border: 1px solid rgba(237,231,214,.2); color: #EDE7D6; font-size: 16px; cursor: pointer;
}
.add-player {
  height: 56px; border-radius: 14px; margin-top: 2px;
  background: linear-gradient(180deg, rgba(237,231,214,.08), rgba(237,231,214,.02));
  border: 1px dashed rgba(237,231,214,.32); color: #EDE7D6; font-size: 13px;
  letter-spacing: .09em; text-transform: uppercase; cursor: pointer;
}
.rules-block { padding: 24px 22px 0; font-size: 12.5px; line-height: 1.65; opacity: .75; }
.rules-block .rules-head {
  color: #C9A227; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  font-size: 10px; padding-bottom: 8px;
}
.spacer { flex: 1; min-height: 12px; }
.start-btn {
  width: 100%; height: 68px; border-radius: 18px; border: 0; cursor: pointer;
  font-weight: 700; font-size: 16px; letter-spacing: .1em; text-transform: uppercase;
}
.setup-footer { padding: 14px 18px max(26px, env(safe-area-inset-bottom)); }

.brass {
  background: linear-gradient(180deg,#F0D274 0%,#D8B23A 38%,#C9A227 62%,#9E7C17 100%);
  color: #1A1408;
  box-shadow: inset 0 1px 0 rgba(255,246,214,.85), inset 0 -3px 0 rgba(88,66,10,.55), 0 6px 0 -1px rgba(83,62,8,.5), 0 10px 22px rgba(0,0,0,.42);
}
.dim-btn {
  background: linear-gradient(180deg, rgba(237,231,214,.16), rgba(237,231,214,.08));
  color: #EDE7D6;
  box-shadow: inset 0 1px 0 rgba(237,231,214,.22), inset 0 -2px 0 rgba(0,0,0,.35);
}

/* ---- game ---- */
.game { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chips-row { padding: max(20px, env(safe-area-inset-top)) 16px 0; display: flex; gap: 8px; flex: none; flex-wrap: wrap; }
.chip {
  flex: 1; min-width: 84px; padding: 10px 12px; border-radius: 14px;
  background: rgba(0,0,0,.3); border: 1px solid rgba(237,231,214,.14);
}
.chip.active { background: rgba(201,162,39,.18); border-color: #C9A227; }
.chip-name {
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase; opacity: .72;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip-score { font-size: 24px; font-weight: 500; line-height: 1.15; }
.chip-score.dq { color: #B5322B; }

.turn-row { padding: 16px 20px 10px; display: flex; align-items: flex-end; justify-content: space-between; flex: none; gap: 10px; }
.turn-label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .55; }
.turn-name { font-size: clamp(24px, 7vw, 32px); line-height: 1.1; }
.rules-btn {
  background: transparent; border: 1px solid rgba(237,231,214,.25); border-radius: 12px;
  color: #EDE7D6; height: 40px; padding: 0 14px; font-size: 12.5px; cursor: pointer; flex: none;
}
.left-label { padding: 0 20px 8px; font-size: 11px; flex: none; }

.ball-grid {
  padding: 0 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  flex: 1; min-height: 0; align-content: start; overflow-y: auto;
}
@media (min-width: 560px) { .ball-grid { grid-template-columns: repeat(6, 1fr); max-width: 640px; margin: 0 auto; width: 100%; } }
.ball {
  aspect-ratio: 1; border: 0; border-radius: 999px; display: flex; align-items: center;
  justify-content: center; padding: 0; cursor: pointer; transition: transform .12s;
}
.ball:active { transform: scale(.93); }
.ball-inner {
  width: 52%; height: 52%; border-radius: 999px; display: flex; align-items: center;
  justify-content: center; background: #F2ECDC; color: #15171B; font-weight: 600; font-size: 16px;
}
.msg-line { padding: 10px 20px 0; font-size: 11px; opacity: .5; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.commit-bar {
  padding: 12px 16px max(20px, env(safe-area-inset-bottom));
  background: rgba(4,20,15,.94); border-top: 1px solid rgba(237,231,214,.14);
  margin-top: 10px; flex: none;
}
.eq-row { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px 10px; }
.eq-label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .55; }
.eq-val { font-size: 20px; color: #C9A227; }
.commit-row { display: flex; gap: 10px; }
.undo-btn {
  width: 82px; height: 66px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(237,231,214,.14), rgba(237,231,214,.04));
  border: 1px solid rgba(237,231,214,.28); color: #EDE7D6; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.commit-btn { flex: 1; height: 66px; border-radius: 18px; border: 0; cursor: pointer; font-weight: 700; font-size: 16px; letter-spacing: .09em; text-transform: uppercase; }

/* ---- over ---- */
.over { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.over-title { padding: max(40px, env(safe-area-inset-top)) 22px 0; font-size: clamp(32px, 8vw, 42px); }
.rank-list { padding: 24px 18px 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.rank-row {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 18px;
  border-radius: 16px; background: rgba(0,0,0,.28); border: 1px solid rgba(237,231,214,.12);
}
.rank-row.first { background: rgba(201,162,39,.16); border-color: #C9A227; }
.rank-pos { font-size: 13px; opacity: .5; }
.rank-name { font-size: 17px; padding-left: 14px; }
.rank-score { font-size: 26px; }
.over-footer { padding: 14px 18px max(26px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.newround-btn { height: 58px; border-radius: 16px; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; border: 1px solid rgba(237,231,214,.25); }

/* ---- sheet ---- */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(3,14,10,.72); display: flex; align-items: flex-end; z-index: 10;
}
.sheet {
  width: 100%; max-width: 640px; margin: 0 auto; background: #0A2C22;
  border-top: 1px solid rgba(201,162,39,.3); border-radius: 24px 24px 0 0;
  padding: 22px 18px max(26px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-title { font-size: 24px; }
.sheet-close {
  width: 44px; height: 44px; border-radius: 12px; background: transparent;
  border: 1px solid rgba(237,231,214,.25); color: #EDE7D6; font-size: 16px; cursor: pointer;
}
.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left;
  padding: 16px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid rgba(237,231,214,.14);
  color: #EDE7D6; cursor: pointer; width: 100%;
}
.toggle-label { font-size: 14px; }
.toggle-pill {
  width: 52px; height: 30px; border-radius: 999px; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; background: rgba(237,231,214,.14);
}
.toggle-pill.on { background: #C9A227; color: #15171B; }
.swatch-head { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .5; padding-top: 4px; }
.swatch-row { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch {
  width: 46px; height: 46px; border-radius: 999px; border: 0; display: flex;
  align-items: center; justify-content: center; font: 600 11px ui-monospace, monospace;
  color: #15171B; background: #F6F2E7;
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }