/* app.css — component styles. Design tokens live in themes.css.
   Everything here is theme-driven: hairlines use rgb(var(--border) / a) and
   type uses var(--font-display|body), so the light "kids" theme and the dark
   themes both render correctly from the same rules. */

/* 100dvh, not 100vh: iOS reports 100vh taller than the visible area, which
   pushed the screens' reserved bottom padding (and the game's Start button)
   underneath the fixed nav bar. */
.app-body { min-height: 100dvh; }

body {
  background-color: rgb(var(--bg));
  color: rgb(var(--text));
  font-family: var(--font-body);
  overflow-x: hidden;
  /* No transition here on purpose: animating a property that reads a custom
     property makes Chrome settle on the *previous* theme's colour, leaving the
     page one theme behind. Instant swapping is correct (and feels snappier). */
}
.material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.hidden { display: none !important; }

.glass, .glass-card {
  background: rgb(var(--glass) / var(--glass-a));
  backdrop-filter: blur(16px);
  border: 1px solid rgb(var(--border) / 0.10);
  transition: background .25s ease, border-color .25s ease, transform .15s ease;
}
.glass-card:hover { border-color: rgb(var(--accent) / 0.3); }
.glass-card:active { transform: scale(0.995); }

.empty-state { text-align: center; color: rgb(var(--text-muted)); padding: 40px 16px; font-size: 14px; line-height: 1.7; }

/* --- Practice: the swinging metronome (markup built in js/pendulum.js) --- */
.metro-stack { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.metro { display: flex; justify-content: center; width: 100%; }
.metro-svg { width: 104px; height: auto; filter: drop-shadow(0 3px 6px rgb(var(--metro-shell) / .16)); }
.metro-ticks line { stroke: rgb(var(--metro-shell) / .62); stroke-width: 3.6; stroke-linecap: round; }
/* No CSS transition on the arm: its angle is recomputed from the audio clock
   every frame, and a transition would lag the sound it is meant to visualise. */

/* Short phones (iPhone SE and friends) can't hold the practice column at full
   size. Rather than let the play button slide under the nav — the bug this
   layout already had — the instrument and the primary button step down a size
   there, and the column fits once Stella's hint is dismissed.
   An ID selector is used for the button so it outranks its Tailwind w-24/h-24. */
@media (max-height: 720px) {
  .metro-svg { width: 82px; }
  .metro-stack { gap: 6px; }
  .beat-dot { width: 12px; height: 12px; }
  .beat-dots { gap: 9px; }
  #screen-practice { gap: 10px; }
  #play-button { width: 84px; height: 84px; }
}

/* --- Practice: beat dots (bouncy) --- */
.beat-dots { display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; }
.beat-dot {
  width: 14px; height: 14px; border-radius: 9999px; background: rgb(var(--border) / 0.3);
  transition: transform .12s cubic-bezier(.34, 1.8, .64, 1), background .1s ease, box-shadow .1s ease;
}
.beat-dot.is-accent { outline: 2px solid rgb(var(--accent) / 0.35); outline-offset: 3px; }
.beat-dot.is-active { background: rgb(var(--accent)); box-shadow: 0 0 14px rgb(var(--accent) / 0.55); transform: scale(1.5); }

/* --- Practice: tempo card. A flex row, so the -/+ buttons can never collide
       with the number the way the old absolutely-positioned dial did. --- */
.tempo-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 11px 16px; border-radius: 26px;
  background: rgb(var(--glass) / var(--glass-a)); border: 1px solid rgb(var(--border) / 0.10);
  user-select: none;
}
.tempo-readout { display: flex; flex-direction: column; align-items: center; min-width: 0; }
#bpm-display {
  font-family: var(--font-display); font-size: 54px; font-weight: 700;
  line-height: 1; letter-spacing: -0.02em; color: rgb(var(--bright));
  font-variant-numeric: tabular-nums;
}
.bpm-unit { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: rgb(var(--text-muted)); margin-top: 4px; }
.dial-btn {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 9999px;
  background: rgb(var(--accent) / 0.12); border: 1px solid rgb(var(--accent) / 0.25);
  display: flex; align-items: center; justify-content: center; color: rgb(var(--accent));
  transition: background .15s, transform .1s;
}
.dial-btn .material-symbols-outlined { font-size: 27px; }
.dial-btn:hover { background: rgb(var(--accent) / 0.2); }
.dial-btn:active { transform: scale(0.9); }

.ctrl-label { font-size: 12px; color: rgb(var(--text-muted)); }
.ctrl-value { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: rgb(var(--bright)); }
.play-btn { box-shadow: 0 10px 26px rgb(var(--accent) / 0.4); }
.add-btn { box-shadow: 0 8px 22px rgb(var(--accent) / 0.3); }

@keyframes pulse-glow {
  0% { box-shadow: 0 0 0 0 rgb(var(--accent) / 0.4); }
  70% { box-shadow: 0 0 0 22px rgb(var(--accent) / 0); }
  100% { box-shadow: 0 0 0 0 rgb(var(--accent) / 0); }
}
.active-pulse { animation: pulse-glow 1s infinite ease-out; }

/* --- Tuner --- */
#note-letter { font-family: var(--font-display); transition: color .15s; }
.note-octave { font-size: .35em; vertical-align: super; margin-left: 4px; opacity: .7; }
.needle-track { position: relative; height: 8px; border-radius: 9999px; background: rgb(var(--border) / 0.18); }
.needle-zero { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2px; height: 20px; border-radius: 2px; background: rgb(var(--border) / 0.35); }
.needle { position: absolute; top: 50%; left: 50%; width: 4px; height: 34px; border-radius: 3px; transform: translate(-50%, -50%); transition: left .08s cubic-bezier(.2, 0, .2, 1), background .15s; }
.tuner-good { color: rgb(var(--good)); }
.tuner-close { color: rgb(var(--accent)); }
.tuner-off { color: rgb(var(--text-muted) / 0.7); }
.needle.tuner-good { background: rgb(var(--good)); box-shadow: 0 0 18px rgb(var(--good) / 0.5); }
.needle.tuner-close { background: rgb(var(--accent)); box-shadow: 0 0 18px rgb(var(--accent) / 0.5); }
.needle.tuner-off { background: rgb(var(--text-muted)); box-shadow: none; }

/* --- Library / History rows --- */
.preset-row, .session-row { padding: 16px; border-radius: 20px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.preset-main, .session-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.preset-icon, .session-icon { width: 46px; height: 46px; border-radius: 16px; background: rgb(var(--accent) / 0.14); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: rgb(var(--accent)); }
.preset-name, .session-name { font-weight: 600; font-size: 16px; color: rgb(var(--text)); }
.preset-meta { display: flex; gap: 14px; margin-top: 4px; flex-wrap: wrap; }
.preset-meta span { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: rgb(var(--text-dim)); }
.preset-meta .material-symbols-outlined { font-size: 15px; }
.preset-actions { display: flex; gap: 2px; flex-shrink: 0; }
.icon-btn { padding: 8px; border-radius: 12px; color: rgb(var(--text-dim)); transition: color .15s, background .15s, transform .1s; }
.icon-btn:hover { color: rgb(var(--accent)); background: rgb(var(--border) / 0.08); }
.icon-btn:active { transform: scale(0.9); }
.icon-btn.is-fav { color: rgb(var(--star)); }
.icon-btn.del:hover { color: rgb(var(--error)); }

.session-date { font-size: 12px; color: rgb(var(--text-muted)); margin-top: 2px; }
.session-stats { display: flex; gap: 26px; align-items: center; flex-shrink: 0; }
.stat { text-align: right; }
.stat-label { display: block; font-size: 11px; color: rgb(var(--text-muted)); }
.stat-val { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: rgb(var(--text)); line-height: 1; }
.stat-val.accent { color: rgb(var(--accent)); }
.stat-val small { font-size: 11px; color: rgb(var(--text-muted)); margin-left: 3px; }

/* --- History: weekly chart --- */
.weekly-chart { height: 160px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.chart-bar { width: 100%; min-height: 3px; border-radius: 12px 12px 4px 4px; position: relative; background: rgb(var(--accent) / 0.25); transition: height .8s cubic-bezier(.4, 0, .2, 1); }
.chart-bar.is-today { background: rgb(var(--accent)); }
.chart-tip { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 11px; color: rgb(var(--text-dim)); opacity: 0; transition: opacity .2s; white-space: nowrap; }
.chart-col:hover .chart-tip { opacity: 1; }
.chart-label { font-size: 12px; margin-top: 8px; color: rgb(var(--text-muted)); }
.chart-label.is-today { color: rgb(var(--accent)); font-weight: 700; }

/* --- Library filter chips --- */
.chip { padding: 8px 18px; border-radius: 9999px; background: rgb(var(--border) / 0.08); color: rgb(var(--text-dim)); font-size: 13px; white-space: nowrap; border: 1px solid transparent; transition: background .15s, color .15s; }
.chip.is-active { background: rgb(var(--accent) / 0.15); color: rgb(var(--accent)); border-color: rgb(var(--accent) / 0.3); }

/* --- Bottom nav ---
   The bar must clear the iPhone home indicator. A fixed pb-6 looked right in a
   desktop browser but sat under the indicator on device, which in turn pushed
   the game's Start button off-screen. env() keeps both cases correct. */
.app-nav { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
/* Screens reserve exactly the nav's height (plus the same safe area) so nothing
   ends up hidden behind it. */
.pad-nav { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }

/* --- Bottom nav --- */
.nav-item { color: rgb(var(--text-muted)); transition: color .2s; }
.nav-item:hover, .nav-item.is-active { color: rgb(var(--accent)); }
.nav-pill { transition: background .2s; }
.nav-item.is-active .nav-pill { background: rgb(var(--accent) / 0.15); }

/* --- Theme picker popover --- */
.theme-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 190px; padding: 8px; border-radius: 20px; background: rgb(var(--surface-2)); border: 1px solid rgb(var(--border) / 0.12); box-shadow: 0 12px 40px rgb(0 0 0 / var(--shadow-a)); z-index: 60; }
.theme-menu-title { font-size: 12px; color: rgb(var(--text-muted)); padding: 4px 8px 8px; }
.theme-swatches { display: flex; flex-direction: column; gap: 2px; }
.theme-swatch { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 14px; color: rgb(var(--text-dim)); font-size: 15px; width: 100%; transition: background .15s, color .15s; }
.theme-swatch:hover { background: rgb(var(--border) / 0.07); }
.theme-swatch.is-active { background: rgb(var(--accent) / 0.13); color: rgb(var(--text)); }
.swatch-dot { width: 20px; height: 20px; border-radius: 9999px; flex-shrink: 0; }
.app-version { margin-top: 8px; padding: 7px 8px 2px; text-align: center; border-top: 1px solid rgb(var(--border) / 0.12); font-size: 11px; color: rgb(var(--text-muted)); }
/* Version under the app title — the at-a-glance "am I on the latest build?" check. */
.header-version { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em; color: rgb(var(--text-muted)); margin-top: 2px; align-self: flex-end; margin-bottom: 3px; }
/* Brand wordmark. Capped by height so the header bar keeps its rhythm, and by
   max-width so a narrow phone shrinks it rather than pushing the buttons off. */
.app-logo { height: 30px; width: auto; max-width: 100%; object-fit: contain; display: block; filter: var(--logo-filter); }

/* --- Language toggle (한 / EN) --- */
.lang-btn {
  min-width: 42px; padding: 7px 10px; border-radius: 12px; font-size: 13px; font-weight: 600;
  color: rgb(var(--accent)); background: rgb(var(--accent) / 0.12);
  border: 1px solid rgb(var(--accent) / 0.28); transition: background .15s, transform .1s;
}
.lang-btn:hover { background: rgb(var(--accent) / 0.2); }
.lang-btn:active { transform: scale(0.92); }

/* --- Tempo pill (current tempo mark, opens the sheet) --- */
.tempo-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px;
  border-radius: 9999px; background: rgb(var(--accent) / 0.12);
  border: 1px solid rgb(var(--accent) / 0.25); color: rgb(var(--bright));
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  transition: background .15s, transform .1s;
}
.tempo-pill:hover { background: rgb(var(--accent) / 0.2); }
.tempo-pill:active { transform: scale(0.96); }
.tempo-pill-icon { font-size: 19px; color: rgb(var(--accent)); }
.tempo-pill-caret { font-size: 19px; color: rgb(var(--text-muted)); }

/* --- Bottom sheet --- */
.sheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; background: rgb(0 0 0 / 0.45); backdrop-filter: blur(3px); }
.sheet-panel {
  width: 100%; max-width: 480px; max-height: 82vh; overflow-y: auto;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0; background: rgb(var(--surface-2));
  border: 1px solid rgb(var(--border) / 0.12); box-shadow: 0 -12px 40px rgb(0 0 0 / var(--shadow-a));
  animation: sheet-up .22s cubic-bezier(.2, 0, .2, 1);
}
@keyframes sheet-up { from { transform: translateY(14%); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sheet-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: rgb(var(--bright)); }

/* --- Tempo sheet contents --- */
.tempo-input-row { display: flex; gap: 10px; margin: 8px 0 22px; }
#tempo-input {
  flex: 1; min-width: 0; padding: 12px 16px; border-radius: 16px; text-align: center;
  background: rgb(var(--surface-1)); border: 2px solid rgb(var(--border) / 0.15);
  color: rgb(var(--text)); font-family: var(--font-display); font-size: 26px; font-weight: 700; outline: none;
}
#tempo-input:focus { border-color: rgb(var(--accent)); }
.tempo-apply { padding: 12px 24px; border-radius: 16px; font-weight: 700; background: rgb(var(--accent)); color: rgb(var(--on-accent)); transition: transform .1s; }
.tempo-apply:active { transform: scale(0.94); }
.tempo-marks-label { margin-bottom: 8px; }
.tempo-marks { display: flex; flex-direction: column; gap: 6px; }
.tempo-mark {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  padding: 13px 16px; border-radius: 16px; text-align: left;
  background: rgb(var(--border) / 0.06); border: 2px solid transparent;
  transition: background .15s, border-color .15s;
}
.tempo-mark:hover { background: rgb(var(--border) / 0.1); }
.tempo-mark.is-active { background: rgb(var(--accent) / 0.12); border-color: rgb(var(--accent) / 0.55); }
.mark-name { grid-column: 1; grid-row: 1; font-family: var(--font-display); font-size: 17px; font-weight: 600; color: rgb(var(--bright)); }
.mark-desc { grid-column: 1; grid-row: 2; font-size: 13px; color: rgb(var(--text-dim)); }
.mark-bpm { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 13px; color: rgb(var(--accent)); }

/* --- Plain-language help card, one per screen --- */
.help-card {
  display: flex; gap: 12px; align-items: flex-start; width: 100%;
  padding: 15px 17px; border-radius: 20px;
  /* The same white the character was cut out from, so Stella sits on the card
     seamlessly — and it matches every other card in the app. */
  background: rgb(var(--glass) / var(--glass-a));
  border: 1px solid rgb(var(--border) / 0.10);
}
.help-icon { color: rgb(var(--accent)); font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.help-card p { font-size: 14px; line-height: 1.75; color: rgb(var(--text-dim)); }
/* Stella explains each screen. Transparent PNG, so she sits straight on the card. */
/* Sized by height with the width left to follow: Stella's ears are almost half
   her height, so any square/cropped avatar lops them off. */
.help-character { width: auto; height: 66px; flex-shrink: 0; margin: -3px 0 -3px -2px; }
.help-card[hidden] { display: none; }
/* Close affordance — small and low-contrast so it never competes with the hint
   itself, but a full 32px tap target for a child's finger. */
.help-dismiss {
  flex-shrink: 0; width: 32px; height: 32px; margin: -6px -8px -6px 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9999px; color: rgb(var(--text-muted)); opacity: .55;
}
.help-dismiss:hover { opacity: 1; background: rgb(var(--border) / 0.08); }
.help-dismiss:active { transform: scale(0.9); }
.help-dismiss .material-symbols-outlined { font-size: 18px; }

/* --- Keyboard game --- */
.game-hud { display: flex; justify-content: space-around; gap: 12px; margin-bottom: 8px; }
.game-stat { display: flex; flex-direction: column; align-items: center; font-family: var(--font-display); font-size: 26px; font-weight: 700; color: rgb(var(--bright)); line-height: 1.1; }
.game-stat-label { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: rgb(var(--text-muted)); }

/* min-height must stay low: the song pill, HUD, keys and start button all
   compete for height, and on a 375x812 phone a taller floor pushed the start
   button under the bottom nav. flex:1 lets the field take whatever is left. */
.game-field {
  position: relative; flex: 1; min-height: 120px; overflow: hidden;
  border-radius: 22px; background: rgb(var(--glass) / var(--glass-a));
  border: 1px solid rgb(var(--border) / 0.10);
}
.game-notes { position: absolute; inset: 0; }
/* left/width are set per-note in JS from the lane count. */
.game-note {
  position: absolute; top: -46px; height: 42px;
  border-radius: 12px; background: rgb(var(--accent));
  box-shadow: 0 4px 0 rgb(var(--accent) / 0.4);
  will-change: transform;
}
.game-note.is-hit { background: rgb(var(--good)); opacity: 0; transition: opacity .2s ease; }
.game-note.is-missed { opacity: 0; transition: opacity .2s ease; }
.game-hitline { position: absolute; left: 8px; right: 8px; bottom: 14px; height: 4px; border-radius: 2px; background: rgb(var(--accent) / 0.35); }
.game-message {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px; font-size: 15px; line-height: 1.6;
  color: rgb(var(--text-dim)); pointer-events: none;
}

/* Column count follows however many keys JS renders — it went 5 → 6 when the
   songs needed 라, and must not be hardcoded again. */
.game-keys { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; margin-top: 10px; }
.game-key {
  height: 78px; padding-bottom: 12px; border-radius: 0 0 16px 16px;
  border: 1px solid rgb(var(--border) / 0.12); border-top: none;
  background: rgb(var(--surface-2)); box-shadow: 0 4px 0 rgb(var(--border) / 0.14);
  display: flex; align-items: flex-end; justify-content: center;
  font-family: var(--font-display); font-size: 18px; font-weight: 700; color: rgb(var(--text));
  transition: transform .06s, background .06s;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.game-key.is-down { background: rgb(var(--accent) / 0.22); transform: translateY(3px); box-shadow: none; }

.game-start {
  margin-top: 10px; padding: 13px; border-radius: 18px; font-size: 17px; font-weight: 700;
  background: rgb(var(--accent)); color: rgb(var(--on-accent));
  transition: transform .1s, opacity .2s;
}
.game-start:active { transform: scale(0.97); }
.game-start:disabled { opacity: .45; }

/* Song picker: pill above the field + a sheet listing every song. */
.song-pill {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px 18px; margin-bottom: 8px; border-radius: 9999px;
  background: rgb(var(--accent) / 0.12); border: 1px solid rgb(var(--accent) / 0.25);
  color: rgb(var(--bright)); font-family: var(--font-display); font-size: 17px; font-weight: 600;
  transition: background .15s, transform .1s;
}
.song-pill:hover { background: rgb(var(--accent) / 0.2); }
.song-pill:active { transform: scale(0.97); }
.song-pill-icon { font-size: 19px; color: rgb(var(--accent)); }
.song-pill-caret { font-size: 19px; color: rgb(var(--text-muted)); }

.song-list { display: flex; flex-direction: column; gap: 6px; }
.song-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 16px; text-align: left;
  background: rgb(var(--border) / 0.06); border: 2px solid transparent;
  transition: background .15s, border-color .15s;
}
.song-row:hover { background: rgb(var(--border) / 0.1); }
.song-row.is-active { background: rgb(var(--accent) / 0.12); border-color: rgb(var(--accent) / 0.55); }
.song-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: rgb(var(--bright)); }
.song-level { font-size: 13px; color: rgb(var(--text-muted)); }
.song-stars { font-size: 13px; letter-spacing: -1px; }

/* --- Intro clip --- */
.intro {
  position: fixed; inset: 0; z-index: 200; background: rgb(var(--bg));
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: opacity .5s ease;
}
.intro.is-done { opacity: 0; pointer-events: none; }
/* The opening was a 248 KB video of a character the app no longer uses. It is
   now drawn from the same brand art as the rest of the app, which keeps it on
   model, removes the download, and sidesteps mobile autoplay refusals. */
.intro-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px; }
.intro-hero {
  width: min(58vw, 260px); height: auto;
  animation: intro-pop .7s cubic-bezier(.2, 1.5, .45, 1) both;
}
.intro-word {
  width: min(64vw, 300px); height: auto; filter: var(--logo-filter);
  animation: intro-rise .6s cubic-bezier(.2, .9, .3, 1) .28s both;
}
@keyframes intro-pop {
  from { opacity: 0; transform: scale(.72) translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes intro-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
/* Respect a reduced-motion preference: show the same art, just without the move. */
@media (prefers-reduced-motion: reduce) {
  .intro-hero, .intro-word { animation-duration: .01ms; }
}
.intro-skip {
  position: absolute; right: 18px; bottom: calc(26px + env(safe-area-inset-bottom));
  padding: 11px 22px; border-radius: 9999px; font-size: 15px; font-weight: 700;
  color: #fff; background: rgb(0 0 0 / 0.38); backdrop-filter: blur(6px);
  transition: transform .1s;
}
.intro-skip:active { transform: scale(0.94); }

/* --- Save-preset sheet --- */
.preset-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 20px; }
.summary-chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 14px; background: rgb(var(--border) / 0.07); color: rgb(var(--bright)); font-size: 14px; }
.summary-chip .material-symbols-outlined { font-size: 17px; color: rgb(var(--accent)); }
#preset-name {
  width: 100%; padding: 13px 16px; margin: 8px 0 20px; border-radius: 16px;
  background: rgb(var(--surface-1)); border: 2px solid rgb(var(--border) / 0.15);
  color: rgb(var(--text)); font-size: 16px; outline: none; font-family: var(--font-body);
}
#preset-name:focus { border-color: rgb(var(--accent)); }
.preset-save-btn { width: 100%; padding: 15px; border-radius: 18px; font-size: 17px; font-weight: 700; background: rgb(var(--accent)); color: rgb(var(--on-accent)); transition: transform .1s; }
.preset-save-btn:active { transform: scale(0.97); }

/* Compact help card for the game screen, where vertical space is tight. */
.help-card-sm { padding: 10px 13px; }
.help-card-sm p { font-size: 12.5px; line-height: 1.6; }
.help-card-sm .help-character { height: 56px; margin: -2px 0 -2px -2px; }