/* ============ Generic modal card ============ */
.modal-card {
  position: relative;
  width: min(90vw, 380px);
  max-height: 82dvh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  padding: 26px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(125,252,255,.06) inset;
  backdrop-filter: blur(10px);
}
.modal-card-lg { width: min(92vw, 440px); }

.modal-card h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .06em;
  color: var(--white);
  text-align: center;
  margin-bottom: 18px;
}

.modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  font-size: 15px;
  color: #b9dfe8;
}
.modal-close:hover { background: rgba(255,255,255,.14); }

/* ============ Leaderboard ============ */
.leaderboard-status {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 14px;
  color: #8fb3c0;
  padding: 12px 0;
}
.leaderboard-status[hidden] { display: none; }

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 50dvh;
  overflow-y: auto;
  padding-right: 2px;
}

.lb-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  font-family: var(--font-ui);
}
.lb-row.lb-top1 { background: linear-gradient(90deg, rgba(255,209,102,.14), rgba(255,255,255,.03)); }
.lb-row.lb-top2 { background: linear-gradient(90deg, rgba(203,213,225,.14), rgba(255,255,255,.03)); }
.lb-row.lb-top3 { background: linear-gradient(90deg, rgba(217,119,6,.14), rgba(255,255,255,.03)); }
.lb-row.lb-you { outline: 1px solid var(--cyan); background: rgba(34,211,238,.08); }

.lb-rank { font-weight: 700; color: #9fc3cd; text-align: center; font-variant-numeric: tabular-nums; }
.lb-name {
  font-weight: 600;
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-score { font-weight: 700; color: var(--cyan-bright); font-variant-numeric: tabular-nums; }

.leaderboard-you {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255,255,255,.14);
  text-align: center;
  font-family: var(--font-ui);
  font-size: 13px;
  color: #9fc3cd;
}
.leaderboard-you[hidden] { display: none; }
.leaderboard-you strong { color: var(--cyan-bright); }

/* ============ How to play ============ */
.howto-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  font-family: var(--font-ui);
  font-size: 15px;
  color: #d3eef4;
}
.howto-list li { line-height: 1.4; }
#howto-screen .btn { display: block; width: 100%; }

/* ============ SEO content footer ============ */
.seo-content {
  background: var(--bg-1);
  color: #9fb8c2;
  padding: 40px 20px 60px;
  border-top: 1px solid rgba(125,252,255,.08);
}
.seo-inner {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--font-ui);
}
.seo-inner h2 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--white);
  margin-bottom: 14px;
}
.seo-inner h3 {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--cyan-bright);
  margin: 22px 0 10px;
}
.seo-inner p { line-height: 1.7; font-size: 15px; }
.seo-inner ul { display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.6; }
.seo-inner li::before { content: "▸ "; color: var(--cyan); }
.seo-footer-note { margin-top: 26px; font-size: 12px; color: #566e78; }

/* ============ Responsive ============ */
@media (max-width: 420px) {
  .modal-card { padding: 20px 16px; }
  .result-stats { gap: 8px; }
}

@media (min-width: 700px) {
  .app { border-left: 1px solid rgba(125,252,255,.06); border-right: 1px solid rgba(125,252,255,.06); }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Visible keyboard focus for accessibility (section 56) */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--cyan-bright);
  outline-offset: 2px;
}