/*! © 2026 LogosVox. All rights reserved. Copying, modifying or redistributing this code is not permitted. https://games.logosvox.com/terms */
/*
 * LogosVox game shell (shell.js): the hub's tokens in light and dark, and the
 * bar, sheets and menus every game shares. Nothing here styles the game itself:
 * every rule is under .lv-shell* or sets a --lv-* token, so a game's own CSS is
 * untouched; the one page-wide rule is the scrollbar, the same everywhere.
 * Same token names and values as apps/portal/src/app/globals.css.
 * Static games link /<id>/kit/lv-shell.css; built apps import it.
 *
 * Theme: <html data-theme="light|dark"> pins a theme (Settings); without it the
 * system decides. <html data-motion="reduce"> turns animation off.
 */
:root {
  --lv-void: #ffffff;
  --lv-void-raised: #f9f9f9;
  --lv-void-overlay: #ffffff;
  --lv-ink: #0d0d0d;
  --lv-ink-muted: rgb(13 13 13 / 0.74);
  --lv-ink-subtle: rgb(13 13 13 / 0.62);
  --lv-edge: rgb(13 13 13 / 0.08);
  --lv-edge-strong: rgb(13 13 13 / 0.16);
  --lv-surface: rgb(13 13 13 / 0.03);
  --lv-surface-hover: rgb(13 13 13 / 0.055);
  --lv-surface-active: rgb(13 13 13 / 0.085);
  --lv-scrim: rgb(13 13 13 / 0.32);
  --lv-scrollbar: rgb(13 13 13 / 0.18);
  --lv-scrollbar-hover: rgb(13 13 13 / 0.32);
  --lv-positive: #059669;
  --lv-critical: #e11d48;
  --lv-violet: #8c14fc;
  --lv-cyan: #00e1ff;
  --lv-magenta: #ff2896;
  --lv-gold: #ffb432;
  --lv-cobalt: #143cff;
  --lv-radius-card: 1.25rem;
  --lv-radius: 0.75rem;
  --lv-shadow: 0 1px 3px rgb(13 13 13 / 0.05), 0 8px 24px -12px rgb(13 13 13 / 0.1);
  --lv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lv-fast: 120ms;
  --lv-base: 200ms;
  --lv-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lv-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lv-void: #141414;
    --lv-void-raised: #1b1b1b;
    --lv-void-overlay: #232323;
    --lv-ink: #f4f4f4;
    --lv-ink-muted: rgb(255 255 255 / 0.72);
    --lv-ink-subtle: rgb(255 255 255 / 0.58);
    --lv-edge: rgb(255 255 255 / 0.08);
    --lv-edge-strong: rgb(255 255 255 / 0.15);
    --lv-surface: rgb(255 255 255 / 0.04);
    --lv-surface-hover: rgb(255 255 255 / 0.07);
    --lv-surface-active: rgb(255 255 255 / 0.11);
    --lv-scrim: rgb(0 0 0 / 0.55);
    --lv-scrollbar: rgb(255 255 255 / 0.18);
    --lv-scrollbar-hover: rgb(255 255 255 / 0.32);
    --lv-positive: #34d399;
    --lv-critical: #fb7185;
    --lv-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --lv-void: #141414;
  --lv-void-raised: #1b1b1b;
  --lv-void-overlay: #232323;
  --lv-ink: #f4f4f4;
  --lv-ink-muted: rgb(255 255 255 / 0.72);
  --lv-ink-subtle: rgb(255 255 255 / 0.58);
  --lv-edge: rgb(255 255 255 / 0.08);
  --lv-edge-strong: rgb(255 255 255 / 0.15);
  --lv-surface: rgb(255 255 255 / 0.04);
  --lv-surface-hover: rgb(255 255 255 / 0.07);
  --lv-surface-active: rgb(255 255 255 / 0.11);
  --lv-scrim: rgb(0 0 0 / 0.55);
  --lv-scrollbar: rgb(255 255 255 / 0.18);
  --lv-scrollbar-hover: rgb(255 255 255 / 0.32);
  --lv-positive: #34d399;
  --lv-critical: #fb7185;
  --lv-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.5);
  color-scheme: dark;
}
:root[data-theme="light"] {
  color-scheme: light;
}

/*
 * Scrollbars, on the hub and in every game: a thin thumb in the ink, no track.
 * scrollbar-color is inherited, so this reaches every scroller (Chrome, Edge,
 * Firefox); Safari reads the ::-webkit-scrollbar rules instead.
 */
:root {
  scrollbar-width: thin;
  scrollbar-color: var(--lv-scrollbar) transparent;
}
:root ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: transparent;
}
:root ::-webkit-scrollbar-track,
:root ::-webkit-scrollbar-corner {
  background: transparent;
}
:root ::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--lv-scrollbar) padding-box;
}
:root ::-webkit-scrollbar-thumb:hover {
  background-color: var(--lv-scrollbar-hover);
}

/* ---------- the bar ---------- */

/*
 * The handwriting of the lockup ("games", "simulations", "learn"): Caveat
 * Bold, only the twelve letters of those words (6 KB), inline so it works in
 * every game, on the hub's origin or not. Copyright 2014 The Caveat Project
 * Authors (github.com/googlefonts/caveat), SIL Open Font License 1.1:
 * packages/shell/fonts/OFL.txt; the file itself is fonts/lv-scribble.woff2.
 */
@font-face {
  font-family: "LV Scribble";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("data:font/woff2;base64,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") format("woff2");
}

.lv-shell,
.lv-shell *,
.lv-shell-sheet,
.lv-shell-sheet * {
  box-sizing: border-box;
}
/*
 * Three columns: Back with the LogosVox lockup | the game's icon and name |
 * the game's tools and the shell's actions. The outer columns share what is
 * left equally, so the name sits in the middle of the bar; a side that needs
 * more than its half takes it (the name moves a little, never under a
 * button). No line under the bar: it is the page's own colour.
 */
.lv-shell {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
  align-items: center;
  gap: 2px 4px;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: calc(6px + env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left));
  background: var(--lv-void);
  color: var(--lv-ink);
  border: 0;
  box-shadow: none;
  font: 500 15px/1.3 var(--lv-font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
}
.lv-shell[hidden] {
  display: none;
}
/* Over a full-screen canvas: fixed and see-through, the game shows under it. */
.lv-shell[data-mode="overlay"] {
  position: fixed;
  left: 0;
  right: 0;
  background: color-mix(in srgb, var(--lv-void) 78%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.lv-shell-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  min-width: 44px;
  height: 44px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: var(--lv-radius);
  background: transparent;
  color: var(--lv-ink-muted);
  font: 500 14px/1 var(--lv-font);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--lv-fast) var(--lv-ease), color var(--lv-fast) var(--lv-ease), transform var(--lv-fast) var(--lv-ease);
}
.lv-shell-btn:hover {
  background: var(--lv-surface-hover);
  color: var(--lv-ink);
}
.lv-shell-btn:active {
  transform: scale(0.96);
  background: var(--lv-surface-active);
}
.lv-shell-btn:focus-visible,
.lv-shell-item:focus-visible,
.lv-shell-seg button:focus-visible,
.lv-shell-more-link:focus-visible {
  outline: 2px solid var(--lv-ink);
  outline-offset: 2px;
}
.lv-shell-btn svg {
  flex: none;
}
.lv-shell-start {
  display: flex;
  align-items: center;
  justify-self: start;
  min-width: 0;
}
/* How to play sits with the shell's actions; on a phone whose bar also holds
   the game's own tools, beside Back instead, so the two sides stay even. */
.lv-shell-start .lv-shell-help-start {
  display: none;
}
@media (max-width: 719.98px) {
  .lv-shell:has(.lv-shell-slot [data-lv-inline]) .lv-shell-start .lv-shell-help-start {
    display: inline-flex;
  }
  .lv-shell:has(.lv-shell-slot [data-lv-inline]) .lv-shell-actions [data-lv="help"] {
    display: none;
  }
}
.lv-shell-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 4px;
  min-width: 0;
}
.lv-shell-back {
  gap: 4px;
  padding: 0 10px 0 4px;
  color: var(--lv-ink);
}
/*
 * The lockup on Back, as the hub's (BrandLockup.tsx, globals.css .lv-lockup):
 * the mark, "LogosVox", and the word signed over its lower right in the
 * aurora, cut out of the letters by a halo in the bar's colour.
 */
.lv-shell-lockup {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 0.8em 0.3em 0;
  font: 650 16px/1 var(--lv-display);
  letter-spacing: -0.03em;
  color: var(--lv-ink);
  white-space: nowrap;
}
.lv-shell-lockup-mark {
  display: block;
  flex: none;
  width: 22px;
  height: 22px;
}
.lv-shell-lockup-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}
.lv-shell-lockup-name,
.lv-shell-scribble {
  display: none;
}
.lv-shell-scribble {
  position: absolute;
  right: 0;
  bottom: -0.1em;
  font: 700 1.12em/1 "LV Scribble", "Caveat", "Segoe Print", "Bradley Hand", cursive;
  letter-spacing: 0;
  transform: rotate(-7deg);
  transform-origin: 100% 100%;
  pointer-events: none;
}
/* The long word leans further out, so "LogosVox" stays readable under it. */
.lv-shell-lockup-simulations {
  padding-right: 2.1em;
}
.lv-shell-lockup-simulations .lv-shell-scribble {
  font-size: 1em;
}
.lv-shell-scribble-halo,
.lv-shell-scribble-ink {
  grid-area: 1 / 1;
  padding: 0 0.08em 0.1em;
}
.lv-shell-scribble-halo {
  color: var(--lv-void);
  -webkit-text-stroke: 0.2em var(--lv-void);
}
.lv-shell-scribble-ink {
  background: linear-gradient(100deg, var(--lv-violet), var(--lv-magenta) 55%, var(--lv-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* The middle: the game's icon and name, one line, shortened only if it must. */
.lv-shell-title {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.lv-shell-icon {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  object-fit: contain;
}
/* Card art (/covers) in place of an icon: its middle, as a small tile. */
.lv-shell-icon.is-cover {
  object-fit: cover;
  background: var(--lv-surface-active);
}
.lv-shell-name {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font: 600 17px/1.2 var(--lv-display);
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--lv-ink);
}
.lv-shell-slot {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
}
.lv-shell-slot:empty {
  display: none;
}
.lv-shell-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
}
.lv-shell-code {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
}
.lv-shell-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--lv-ink);
  color: var(--lv-void);
  font-size: 13px;
  font-weight: 650;
}
/* The profile button: the mascot (or LogosVox picture) and, on wider screens, the name. */
.lv-shell-face {
  flex: none;
  border-radius: 999px;
  background: var(--lv-surface-active);
  object-fit: cover;
}
.lv-shell-profile {
  padding: 0 7px;
  border-radius: 999px;
  color: var(--lv-ink);
}
.lv-shell-me-short {
  max-width: 9em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lv-shell-me {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lv-shell-me-text {
  flex: 1;
  min-width: 0;
}
.lv-shell-me-name {
  margin: 0;
  overflow: hidden;
  font: 600 17px/1.25 var(--lv-display);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lv-shell-profile-menu {
  gap: 16px;
}
.lv-shell-done {
  align-self: flex-start;
}
/*
 * Phones: Back is the arrow and the mark; buttons are icons; Leaderboard and
 * full screen move into the profile menu; a game's chips get a row of their
 * own under the bar (a game's tools marked data-lv-inline stay in it).
 */
.lv-shell-text,
.lv-shell-wide {
  display: none;
}
@media (max-width: 719.98px) {
  .lv-shell-end:not(:has(.lv-shell-slot [data-lv-inline])) {
    display: contents;
  }
  .lv-shell-end:not(:has(.lv-shell-slot [data-lv-inline])) .lv-shell-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  .lv-shell-name {
    font-size: 16px;
  }
  .lv-shell-icon {
    width: 24px;
    height: 24px;
  }
  .lv-shell-title {
    gap: 6px;
  }
}
@media (min-width: 720px) {
  .lv-shell {
    gap: 2px 8px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .lv-shell-lockup-name {
    display: inline;
  }
  .lv-shell-scribble {
    display: grid;
  }
  .lv-shell-wide {
    display: inline-flex;
  }
  .lv-shell-menu .lv-shell-phone-only {
    display: none;
  }
  /* A menu under its button (the profile), not a centred dialog. */
  .lv-shell-sheet.is-menu {
    display: block;
    padding: 0;
  }
  .lv-shell-sheet.is-menu .lv-shell-scrim {
    background: transparent;
  }
  .lv-shell-sheet.is-menu .lv-shell-panel {
    position: fixed;
    width: 360px;
    max-height: calc(100dvh - 80px);
    animation-name: lv-shell-rise;
  }
}
/* Labels beside the icons (Leaderboard, the player's name) where there is room. */
@media (min-width: 1024px) {
  .lv-shell-text {
    display: inline;
  }
}
@media (max-width: 719.98px) {
  .lv-shell-slot {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
    padding-bottom: 2px;
  }
  .lv-shell-end:has(.lv-shell-slot [data-lv-inline]) .lv-shell-slot {
    grid-column: auto;
    grid-row: auto;
    padding: 0;
    gap: 0;
  }
}

/* ---------- sheets: a bottom sheet on phones, a dialog on wider screens ---------- */

.lv-shell-sheet {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font: 400 15px/1.4 var(--lv-font);
  color: var(--lv-ink);
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.lv-shell-scrim {
  position: absolute;
  inset: 0;
  background: var(--lv-scrim);
  animation: lv-shell-fade var(--lv-base) var(--lv-ease);
}
.lv-shell-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  max-height: min(86dvh, 720px);
  border: 1px solid var(--lv-edge);
  border-bottom: 0;
  border-radius: var(--lv-radius-card) var(--lv-radius-card) 0 0;
  background: var(--lv-void-overlay);
  box-shadow: var(--lv-shadow);
  animation: lv-shell-up var(--lv-base) var(--lv-ease);
}
.lv-shell-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 8px 6px 20px;
}
.lv-shell-panel-head h2 {
  margin: 0;
  font: 600 19px/1.2 var(--lv-display);
  letter-spacing: -0.01em;
}
.lv-shell-panel-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 20px calc(20px + env(safe-area-inset-bottom));
}
.lv-shell-sheet.is-closing .lv-shell-panel,
.lv-shell-sheet.is-closing .lv-shell-scrim {
  opacity: 0;
  transition: opacity 150ms var(--lv-ease);
}
@media (min-width: 720px) {
  .lv-shell-sheet {
    align-items: center;
    padding: 24px;
  }
  .lv-shell-panel {
    border-bottom: 1px solid var(--lv-edge);
    border-radius: var(--lv-radius-card);
    animation-name: lv-shell-rise;
  }
  .lv-shell-panel-body {
    padding-bottom: 20px;
  }
}

/* The leaderboard. */
.lv-shell-seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--lv-edge);
  border-radius: var(--lv-radius);
  background: var(--lv-surface);
}
.lv-shell-seg[hidden] {
  display: none;
}
.lv-shell-seg button {
  flex: 1;
  min-height: 40px;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: var(--lv-ink-muted);
  font: 600 14px/1 var(--lv-font);
  cursor: pointer;
}
.lv-shell-seg button[aria-pressed="true"] {
  background: var(--lv-void);
  color: var(--lv-ink);
  box-shadow: 0 1px 2px rgb(13 13 13 / 0.12);
}
.lv-shell-best {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--lv-radius);
  background: var(--lv-surface);
  color: var(--lv-ink-muted);
}
.lv-shell-best[hidden] {
  display: none;
}
.lv-shell-best b {
  color: var(--lv-ink);
  font-variant-numeric: tabular-nums;
}
.lv-shell-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--lv-edge);
  border-radius: var(--lv-radius);
  overflow: hidden;
}
.lv-shell-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 14px;
  border-top: 1px solid var(--lv-edge);
}
.lv-shell-list li:first-child {
  border-top: 0;
}
.lv-shell-list li.is-you {
  background: var(--lv-surface-active);
}
.lv-shell-rank {
  width: 1.75em;
  flex: none;
  color: var(--lv-ink-subtle);
  font-variant-numeric: tabular-nums;
}
.lv-shell-who {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lv-shell-who small {
  margin-left: 8px;
  color: var(--lv-ink-subtle);
  font-size: 12px;
}
.lv-shell-score {
  flex: none;
  color: var(--lv-ink-muted);
  font-variant-numeric: tabular-nums;
}
.lv-shell-note {
  margin: 8px 0;
  color: var(--lv-ink-subtle);
}
/* A chevron row to another page: the full board on the hub. */
.lv-shell-more-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  margin-top: 4px;
  padding: 0 12px 0 14px;
  border: 1px solid var(--lv-edge);
  border-radius: var(--lv-radius);
  color: var(--lv-ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--lv-fast) var(--lv-ease);
}
.lv-shell-more-link svg {
  flex: none;
  color: var(--lv-ink-subtle);
  transition: transform var(--lv-fast) var(--lv-ease);
}
.lv-shell-more-link:hover {
  background: var(--lv-surface-hover);
}
.lv-shell-more-link:hover svg {
  transform: translateX(2px);
}

/* Menus and settings rows. */
.lv-shell-menu,
.lv-shell-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lv-shell-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: var(--lv-radius);
  background: transparent;
  color: var(--lv-ink);
  font: 500 15px/1.2 var(--lv-font);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.lv-shell-item:hover {
  background: var(--lv-surface-hover);
}
.lv-shell-item > span:not(.lv-shell-avatar) {
  flex: 1;
  min-width: 0;
}
.lv-shell-item small {
  color: var(--lv-ink-subtle);
  font-size: 12px;
}
.lv-shell-item[aria-pressed="true"],
.lv-shell-item[aria-checked="true"] {
  background: var(--lv-surface-active);
  font-weight: 650;
}


/* Settings (LVShell.renderSettings), in the in-game sheet and on the hub's /settings. */
.lv-set {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--lv-ink);
  font: 400 15px/1.4 var(--lv-font);
}
.lv-set fieldset {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.lv-set legend,
.lv-set-label {
  padding: 0;
  margin-bottom: 8px;
  font: 600 14px/1.2 var(--lv-font);
  color: var(--lv-ink);
}
.lv-set-hint {
  margin: 0;
  color: var(--lv-ink-subtle);
  font-size: 13px;
}
.lv-set-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lv-set input[type="text"] {
  flex: 1 1 12em;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--lv-edge-strong);
  border-radius: var(--lv-radius);
  background: var(--lv-void);
  color: var(--lv-ink);
  font: 500 16px/1 var(--lv-font);
}
.lv-set-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--lv-edge-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--lv-ink-muted);
  font: 600 14px/1 var(--lv-font);
  cursor: pointer;
}
.lv-set-chip:hover {
  background: var(--lv-surface-hover);
}
.lv-set-chip[aria-checked="true"],
.lv-set-chip[aria-pressed="true"] {
  border-color: var(--lv-ink);
  background: var(--lv-ink);
  color: var(--lv-void);
}
.lv-set-mascots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.lv-set-mascot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 44px;
  padding: 6px 2px 8px;
  border: 1px solid var(--lv-edge);
  border-radius: var(--lv-radius);
  background: var(--lv-surface);
  color: var(--lv-ink-muted);
  font: 500 12px/1.1 var(--lv-font);
  cursor: pointer;
}
.lv-set-mascot img {
  width: 100%;
  max-width: 56px;
  aspect-ratio: 1;
}
.lv-set-mascot span {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lv-set-mascot[aria-checked="true"] {
  border-color: var(--lv-ink);
  background: var(--lv-void);
  color: var(--lv-ink);
  box-shadow: 0 0 0 1px var(--lv-ink);
}
.lv-set-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  cursor: pointer;
}
.lv-set-switch input {
  width: 44px;
  height: 26px;
  margin: 0;
  flex: none;
  accent-color: var(--lv-ink);
}
.lv-set-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--lv-edge);
  border-radius: var(--lv-radius);
}
.lv-set-account a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--lv-radius);
  background: var(--lv-ink);
  color: var(--lv-void);
  font-weight: 600;
  text-decoration: none;
}
@media (max-width: 380px) {
  .lv-set-mascots {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- how to play: the goal, the steps, Keyboard and Phone ---------- */

.lv-shell-panel-body.lv-shell-help {
  gap: 14px;
}
.lv-shell-help-goal {
  margin: 0;
  font: 600 16px/1.35 var(--lv-display);
  color: var(--lv-ink);
}
.lv-shell-help-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding-left: 1.3em;
  color: var(--lv-ink-muted);
}
.lv-shell-help-steps li::marker {
  color: var(--lv-ink-subtle);
  font-weight: 600;
}
.lv-shell-help-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.lv-shell-help-col {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--lv-edge);
  border-radius: var(--lv-radius);
  background: var(--lv-surface);
}
.lv-shell-help-col h3 {
  margin: 0 0 8px;
  font: 600 12px/1.2 var(--lv-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lv-ink-subtle);
}
.lv-shell-help-col dl {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
/* The control and what it does on one line where they fit, else the action under it. */
.lv-shell-help-col dl div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}
/* The help is wider than the other dialogs: two columns of controls. */
@media (min-width: 720px) {
  .lv-shell-panel:has(.lv-shell-help) {
    max-width: 600px;
  }
}
.lv-shell-help-col dt,
.lv-shell-help-col dd {
  margin: 0;
}
.lv-shell-help-col dd {
  font-size: 14px;
  color: var(--lv-ink-muted);
}
.lv-shell-help-col kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--lv-edge-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--lv-void);
  color: var(--lv-ink);
  font: 600 13px/1.4 var(--lv-font);
}
.lv-shell-help-foot {
  margin: 0;
  font-size: 13px;
  color: var(--lv-ink-subtle);
}
.lv-shell-help-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--lv-radius);
  background: var(--lv-ink);
  color: var(--lv-void);
  font: 600 15px/1 var(--lv-font);
  cursor: pointer;
}
.lv-shell-help-ok:focus-visible {
  outline: 2px solid var(--lv-ink);
  outline-offset: 2px;
}
/* A phone: its own column first, and no "?" key to tell about. */
@media (hover: none) and (pointer: coarse) {
  .lv-shell-help-col[data-lv-help="touch"] {
    order: -1;
  }
  .lv-shell-help-foot {
    display: none;
  }
}
@media (min-width: 720px) {
  .lv-shell-help-ok {
    align-self: flex-end;
  }
}
@media (max-width: 379.98px) {
  .lv-shell-help-controls {
    grid-template-columns: minmax(0, 1fr);
  }
}

@keyframes lv-shell-fade {
  from {
    opacity: 0;
  }
}
@keyframes lv-shell-up {
  from {
    transform: translateY(24px);
    opacity: 0.4;
  }
}
@keyframes lv-shell-rise {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lv-shell *,
  .lv-shell-sheet * {
    animation: none !important;
    transition: none !important;
  }
}
:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before,
:root[data-motion="reduce"] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  scroll-behavior: auto !important;
}