/* The frame around every seneng.lol game: header, stage, start card, results and leaderboard.
   Load after seneng-base.css. The game's script sizes the stage and sets --s (its scale) and
   --stage-w (its width) so the header and footer line up with it. */
html, body { height: 100%; }
body { overflow: hidden; }

.app {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-block: calc(10px + env(safe-area-inset-top, 0px)) calc(10px + env(safe-area-inset-bottom, 0px));
  padding-inline: 16px;
}

/* ---------- header & footer ---------- */
.app > header, .app > footer {
  width: min(100%, max(var(--stage-w, 360px), 320px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
/* The header is as wide as the game, which gets narrow on short screens. Sizes follow its width. */
.app > header { container-type: inline-size; }
.app h1 {
  flex: none;
  font-size: clamp(17px, 6.6cqi, 30px);
  font-weight: 700;
  white-space: nowrap;
}
.app h1 a { text-decoration: none; }
.app h1 a:hover { color: inherit; }
.meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.meta > * { flex: none; }
/* A long username gives way and ends in "…"; the buttons and the title don't. */
.meta #account { flex: 0 1 auto; min-width: 0; }
.meta .langs button { padding: 5px 8px; font-size: 12px; }
@container (max-width: 400px) {
  .meta { gap: 4px; }
  .meta .pill-btn { min-height: 32px; min-width: 32px; font-size: 13px; padding-inline: 9px; box-shadow: 0 2px 0 var(--drop); }
  .meta .pill-btn.icon { width: 32px; padding: 0; }
  .meta .pill-btn svg { width: 16px; height: 16px; }
  .meta .langs button { padding: 4px 6px; }
}
.app > footer { color: var(--ink-soft); font-size: 14px; font-weight: 700; }
.app > footer a:hover { color: var(--coral); }
.best-label b { color: var(--ink); font-family: var(--display); font-size: 20px; font-variant-numeric: tabular-nums; }
.legal { text-align: right; }

/* ---------- stage ---------- */
.wrap {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.stage {
  --s: 1;
  position: relative;
  border: var(--line) solid var(--edge);
  border-radius: 20px;
  box-shadow: 0 6px 0 var(--drop);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
canvas { display: block; width: 100%; height: 100%; }

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}
.ready-card {
  width: calc(var(--s) * 290px);
  padding: calc(var(--s) * 18px) calc(var(--s) * 20px);
  background: #FFFFFF;
  color: #2E1A47;
  border: var(--line) solid #2E1A47;
  border-radius: calc(var(--s) * 22px);
  box-shadow: 0 calc(var(--s) * 6px) 0 #2E1A47;
}
.ready-title { margin: 0; font-family: var(--display); font-weight: 700; font-size: calc(var(--s) * 40px); line-height: 1; }
.ready-sub { margin: calc(var(--s) * 10px) 0 0; font-size: calc(var(--s) * 16px); line-height: 1.35; color: #6B5A80; text-wrap: balance; }
.tap {
  display: inline-block;
  margin: calc(var(--s) * 14px) 0 0;
  padding: calc(var(--s) * 8px) calc(var(--s) * 18px);
  border: var(--line) solid #2E1A47;
  border-radius: 999px;
  background: var(--sun);
  font-family: var(--display);
  font-weight: 600;
  font-size: calc(var(--s) * 20px);
  animation: bob 1.1s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(-4px) scale(1.04); } }

/* ---------- results dialog ---------- */
dialog.sheet.result { width: min(calc(100vw - 32px), 360px); }
dialog.sheet.result[open] { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
dialog.sheet.result h2 { margin: 0; font-size: 38px; }
.sheet.success h2 { color: var(--coral); }
.tally { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.tally div { display: flex; flex-direction: column; align-items: center; padding: 8px; border-radius: var(--r-sm); background: var(--bg); }
.tally dt { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); }
.tally dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 42px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stats { margin: 0; color: var(--ink-soft); font-size: 15px; }
.comment { margin: 0; font-family: var(--display); font-weight: 600; font-size: 22px; color: var(--mint); }
.result .btn { margin-top: 4px; font-size: 20px; }
.online {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: .4em;
  max-width: 19em;
  font-size: 15px;
  color: var(--ink-soft);
  text-wrap: balance;
}
.online .link-btn { font-size: inherit; padding: 0; }
.result > .link-btn { font-size: 15px; padding: 0; }

/* ---------- leaderboard ---------- */
.board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.board-list li {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--bg);
  font-weight: 700;
}
.board-list .rank { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.board-list .podium .rank { color: var(--coral); font-family: var(--display); font-size: 20px; }
.board-list .podium:nth-child(1) { background: color-mix(in srgb, var(--sun) 40%, var(--bg)); }
.board-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list .score { font-family: var(--display); font-weight: 600; font-size: 20px; font-variant-numeric: tabular-nums; }
.board-list .me { outline: var(--line) solid var(--mint); }
.board-status, .board-me { margin: 10px 0 0; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .tap { animation: none; }
}