:root {
  color-scheme: dark;
  --bg: #0b1120;
  --bg-soft: #111827;
  --bg-card: rgba(15, 23, 42, 0.82);
  --bg-card-strong: rgba(17, 24, 39, 0.94);
  --line: rgba(148, 163, 184, 0.18);
  --line-strong: rgba(148, 163, 184, 0.34);
  --text: #e5eefb;
  --muted: #94a3b8;
  --accent: #8b5cf6;
  --accent-2: #22c55e;
  --warning: #f59e0b;
  --danger: #fb7185;
  --shadow: 0 18px 40px rgba(2, 6, 23, 0.4);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top, rgba(139, 92, 246, 0.16), transparent 28%),
    radial-gradient(circle at bottom right, rgba(34, 197, 94, 0.09), transparent 22%),
    linear-gradient(180deg, #020617, var(--bg));
}
button, input { font: inherit; }
button { border: 0; }

.app-shell { width: min(1180px, calc(100vw - 24px)); margin: 0 auto; padding: 16px 0 92px; }
.panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-card-strong), var(--bg-card));
  border-radius: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.compact-panel { padding: 20px; }
.eyebrow, .panel-label {
  margin: 0 0 8px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c4b5fd;
}
.hero-text, .minor-copy, .notes-list, .hub-card p, .placeholder-card li, .status-card p, .feed-item, .player-note, .answer-note {
  color: var(--muted);
  line-height: 1.55;
}
h1, h2, h3, strong { margin: 0; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  position: sticky;
  top: 10px;
  z-index: 10;
  margin-bottom: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), #4338ca);
  font-weight: 800;
}
.brand-copy { display: grid; text-align: left; }
.brand-copy small { color: var(--muted); }
.topnav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.nav-chip, .bottom-tab, .profile-chip, .stage-pill, .player-badge, .stat-pill, .problem-dot, .status-pill, .path-chip, .path-empty {
  border: 1px solid var(--line);
  background: rgba(30, 41, 59, 0.8);
  color: var(--text);
  border-radius: 999px;
}
.nav-chip, .bottom-tab, .profile-chip, .button {
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.nav-chip:hover, .bottom-tab:hover, .profile-chip:hover, .button:hover:not(:disabled) { transform: translateY(-1px); }
.nav-chip { padding: 10px 14px; }
.nav-chip--active, .bottom-tab--active, .profile-chip--active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.38), rgba(67, 56, 202, 0.28));
  border-color: rgba(196, 181, 253, 0.4);
}

.hero-panel {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: stretch;
  padding: 24px;
}
.hero-panel h1, .page-intro h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.hero-copy { max-width: 56rem; }
.hero-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 10px;
  align-self: center;
}
.summary-card {
  padding: 14px;
  border-radius: 18px;
  background: rgba(30, 41, 59, 0.74);
  border: 1px solid var(--line);
}
.summary-card span { display: block; color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; }
.summary-card strong { display: block; margin-top: 8px; font-size: 1.05rem; }

.hub-grid, .placeholder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.hub-card, .placeholder-card, .notes-panel { padding: 18px; }
.hub-card { display: grid; gap: 16px; }
.hub-card--live { border-color: rgba(34, 197, 94, 0.32); }
.hub-card__top { display: grid; gap: 10px; }
.hub-card__top h2, .placeholder-card h2, .notes-panel h2, .players-head h2, .answer-panel h2, .feed-panel h2, .problem-copy h3, .arena-head h2 { font-size: 1.35rem; }
.hub-card__meta { color: var(--muted); font-size: 0.88rem; }
.status-pill { padding: 7px 10px; font-size: 0.72rem; width: fit-content; }
.status-pill--live { color: #bbf7d0; border-color: rgba(34, 197, 94, 0.28); background: rgba(20, 83, 45, 0.46); }
.status-pill--placeholder { color: #fde68a; border-color: rgba(245, 158, 11, 0.28); background: rgba(120, 53, 15, 0.44); }
.notes-panel { margin-top: 16px; }
.notes-list { margin: 14px 0 0; padding-left: 18px; }
.notes-list li + li { margin-top: 8px; }

.page-intro { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 16px; }
.hero-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.profile-switch { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.profile-chip { display: grid; gap: 2px; min-width: 100px; padding: 10px 12px; text-align: left; }
.profile-chip span { font-weight: 700; }
.profile-chip small { color: var(--muted); }

.main-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(300px, 0.92fr); gap: 16px; }
.stage-column, .players-panel, .answer-panel, .feed-panel { padding: 18px; }
.sidebar { display: grid; gap: 16px; align-self: start; }
.stage-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.stage-pill { padding: 8px 12px; font-size: 0.74rem; }
.stage-pill--accent { background: linear-gradient(135deg, var(--accent), #4338ca); border-color: transparent; }
.arena-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-top: 16px; }
.timer-chip {
  min-width: 96px;
  padding: 12px 14px;
  border-radius: 18px;
  text-align: center;
  font-weight: 700;
  background: linear-gradient(135deg, #1d4ed8, #0f766e);
}
.timer-chip[data-stage="memorize"] { background: linear-gradient(135deg, #7c3aed, #4338ca); }
.timer-chip[data-stage="match_over"] { background: linear-gradient(135deg, #334155, #1e293b); }

.board-hud { display: grid; grid-template-columns: 1.3fr repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.hud-card { padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: rgba(15, 23, 42, 0.68); }
.hud-card strong { display: block; margin-top: 8px; font-size: 1.1rem; }
.hud-card p { margin: 8px 0 0; color: var(--muted); }
.hud-card--mission { background: linear-gradient(180deg, rgba(67, 56, 202, 0.24), rgba(15, 23, 42, 0.8)); }
.hud-card--target { background: linear-gradient(180deg, rgba(34, 197, 94, 0.16), rgba(15, 23, 42, 0.8)); }
.hud-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.16em; color: #c4b5fd; }

.board-shell {
  position: relative;
  margin-top: 18px;
  padding: 32px 14px 14px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.92), rgba(15, 23, 42, 0.84));
}
.board-shell[data-mode="numbers"] { background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(226, 232, 240, 0.9)); }
.board-shell[data-mode="numbers"] .cell-value { color: #0f172a; }
.board-shell[data-mode="hidden"] { background: linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.84)); }
.round-banner {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.82);
  border: 1px solid var(--line);
}
.formula-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-strong); border-radius: 20px; overflow: hidden; }
.board-cell {
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.02);
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  color: var(--text);
}
.board-cell:nth-child(4n) { border-right: 0; }
.board-cell:nth-last-child(-n + 4) { border-bottom: 0; }
.board-cell--clickable { cursor: pointer; }
.board-cell--hidden { color: rgba(226, 232, 240, 0.34); }
.board-cell--selected { background: linear-gradient(180deg, rgba(139, 92, 246, 0.28), rgba(34, 197, 94, 0.14)); }
.board-cell--start { box-shadow: inset 0 0 0 3px rgba(139, 92, 246, 0.74); }
.board-cell--end { box-shadow: inset 0 0 0 3px rgba(34, 197, 94, 0.74); }
.cell-value { font-weight: 800; font-size: clamp(2rem, 6vw, 3.8rem); }
.board-cell--letter .cell-value { color: #f8fafc; }
.cell-marker, .cell-step {
  position: absolute;
  font-size: 0.64rem;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.74);
  border: 1px solid rgba(148, 163, 184, 0.2);
}
.cell-marker { top: 8px; left: 8px; }
.cell-step { right: 8px; bottom: 8px; }

.problem-panel { margin-top: 16px; padding: 18px; border-radius: 22px; border: 1px solid var(--line); background: rgba(15, 23, 42, 0.68); }
.problem-actions, .answer-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.target-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.target-card, .answer-stat, .status-card, .player-card {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(30, 41, 59, 0.66);
}
.target-card span, .answer-stat span { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.target-card strong { display: block; margin-top: 8px; font-size: 1.4rem; }
.target-card--accent { background: linear-gradient(180deg, rgba(139, 92, 246, 0.22), rgba(30, 41, 59, 0.68)); }
.progress-track, .stats-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.problem-progress { display: grid; gap: 8px; margin-top: 12px; }
.problem-dot { padding: 7px 10px; font-size: 0.72rem; }
.problem-dot--current { background: linear-gradient(135deg, var(--accent), #4338ca); border-color: transparent; }
.problem-dot--done { border-color: rgba(34, 197, 94, 0.28); color: #bbf7d0; }

.players-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.player-grid { display: grid; gap: 12px; margin-top: 12px; }
.player-name-field { display: grid; gap: 8px; }
.player-name-field span { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em; }
.player-name-field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(15, 23, 42, 0.9);
  color: var(--text);
}
.player-score-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 12px; }
.score-orb {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.34), rgba(17, 24, 39, 0.34));
  font-size: 1.7rem;
  font-weight: 800;
}
.player-meta { display: grid; gap: 8px; justify-items: end; }
.player-badge, .stat-pill { padding: 7px 10px; font-size: 0.72rem; }

.answer-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.answer-stat strong { display: block; margin-top: 8px; font-size: 1rem; }
.path-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 50px;
  margin-top: 12px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(15, 23, 42, 0.6);
}
.path-chip, .path-empty { padding: 8px 12px; }
.answer-actions { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.answer-actions .button--primary { grid-column: 1 / -1; }
.answer-note { margin-top: 12px; }

.feed-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.feed-item { padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(30, 41, 59, 0.5); }
.feed-item--success { color: #bbf7d0; }
.feed-item--warning { color: #fde68a; }
.feed-item--notice { color: #c4b5fd; }

.button {
  width: auto;
  padding: 12px 16px;
  border-radius: 14px;
  color: white;
}
.button:disabled { opacity: 0.5; cursor: not-allowed; }
.button--primary { background: linear-gradient(135deg, var(--accent), #4338ca); }
.button--secondary { background: linear-gradient(135deg, #334155, #1e293b); }
.button--ghost { background: linear-gradient(135deg, #4c0519, #881337); }

.bottom-nav {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 20;
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
}
.bottom-tab { padding: 10px 8px; font-size: 0.72rem; }

@media (max-width: 960px) {
  .main-layout, .hub-grid, .placeholder-grid { grid-template-columns: 1fr; }
  .hero-panel, .page-intro, .players-head, .arena-head, .player-score-row, .topbar { flex-direction: column; align-items: stretch; }
  .hero-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .topnav { display: none; }
  .bottom-nav { display: grid; }
}

@media (max-width: 760px) {
  .app-shell { width: min(100vw - 10px, 1180px); padding: 10px 0 96px; }
  .panel, .hero-panel, .problem-panel, .stage-column, .players-panel, .answer-panel, .feed-panel, .hub-card, .placeholder-card, .notes-panel { border-radius: 20px; }
  .topbar { position: static; margin-bottom: 10px; padding: 12px; }
  .hero-panel, .compact-panel, .hub-card, .placeholder-card, .notes-panel, .stage-column, .players-panel, .answer-panel, .feed-panel, .problem-panel { padding: 14px; }
  .hero-panel h1, .page-intro h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .hero-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .summary-card { padding: 10px; }
  .profile-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .profile-chip { min-width: 0; padding: 9px; }
  .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-actions > * { width: 100%; }
  .main-layout, .sidebar { gap: 10px; }
  .board-hud { grid-template-columns: 1fr; }
  .arena-head h2, .hub-card__top h2, .placeholder-card h2, .notes-panel h2, .players-head h2, .answer-panel h2, .feed-panel h2, .problem-copy h3 { font-size: 1.08rem; }
  .stage-pill { font-size: 0.65rem; padding: 7px 10px; }
  .timer-chip { min-width: 72px; padding: 9px 10px; font-size: 0.84rem; }
  .board-shell { padding: 24px 8px 8px; }
  .cell-value { font-size: clamp(1.5rem, 11vw, 2.6rem); }
  .cell-marker, .cell-step { font-size: 0.5rem; padding: 3px 5px; }
  .target-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .target-card, .answer-stat, .status-card, .player-card { padding: 10px; border-radius: 14px; }
  .target-card strong { font-size: 1rem; }
  .answer-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .answer-stat span { font-size: 0.5rem; }
  .answer-stat strong { font-size: 0.74rem; }
  .answer-actions, .problem-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .button { width: 100%; min-height: 42px; padding: 10px 12px; }
  .feed-panel { display: none; }
  .players-panel { order: 2; }
  .answer-panel { order: 1; }
}

@media (max-width: 420px) {
  .hero-summary { grid-template-columns: 1fr; }
  .answer-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .target-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.answer-panel--inline { display: none; margin-top: 12px; }

.page--formula .page-intro {
  gap: 12px;
  align-items: flex-start;
}

.page--formula .hero-actions {
  width: min(100%, 420px);
}

.page--formula .profile-switch {
  width: 100%;
  align-items: stretch;
}

.page--formula .profile-chip {
  min-height: 64px;
  align-content: center;
}

@media (max-width: 760px) {
  .page--formula .page-intro {
    margin-bottom: 10px;
    padding: 12px;
  }

  .page--formula .page-intro .eyebrow,
  .page--formula .page-intro .hero-text,
  .page--formula .board-hud,
  .page--formula .answer-panel:not(.answer-panel--inline) {
    display: none;
  }

  .page--formula .page-intro h1 {
    font-size: 1.35rem;
    line-height: 1.05;
  }

  .page--formula .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }

  .page--formula .profile-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .page--formula .profile-chip {
    min-width: 0;
    min-height: 56px;
    padding: 8px 6px;
    text-align: center;
  }

  .page--formula .profile-chip span {
    font-size: 0.82rem;
    line-height: 1.1;
  }

  .page--formula .profile-chip small {
    font-size: 0.68rem;
    line-height: 1.1;
  }

  .page--formula .stage-column {
    padding: 12px;
  }

  .page--formula .stage-strip {
    gap: 6px;
  }

  .page--formula .arena-head {
    margin-top: 8px;
    gap: 8px;
  }

  .page--formula .arena-head .minor-copy {
    display: none;
  }

  .page--formula .timer-chip {
    align-self: flex-start;
  }

  .page--formula .board-shell {
    margin-top: 10px;
    padding: 20px 6px 6px;
  }

  .page--formula .round-banner {
    top: 6px;
    padding: 5px 12px;
    font-size: 0.72rem;
  }

  .page--formula .cell-value {
    font-size: clamp(1.7rem, 12vw, 2.8rem);
  }

  .page--formula .answer-panel--inline {
    display: block;
    padding: 12px;
  }

  .page--formula .answer-panel--inline h2,
  .page--formula .answer-panel--inline .panel-label,
  .page--formula .answer-panel--inline #answerLead,
  .page--formula .answer-panel--inline .answer-summary,
  .page--formula .answer-panel--inline .path-strip,
  .page--formula .answer-panel--inline .answer-note {
    display: none;
  }

  .page--formula .answer-panel--inline .answer-actions {
    margin-top: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .page--formula .answer-panel--inline .button--primary {
    grid-column: 1 / -1;
    order: -1;
    min-height: 48px;
    font-weight: 800;
  }

  .page--formula .problem-panel {
    margin-top: 10px;
    padding: 12px;
  }

  .page--formula .players-panel {
    margin-top: 0;
  }

  .page--formula + .bottom-nav {
    display: none;
  }
}