/*
 * The shared pieces of every game page (ui.js binds them): icons, buttons,
 * the brand bar, the price strip, the link readout, the stage stepper and
 * result pill, the stake controls, the game menu, the first-run card, toasts,
 * the terminal notice, the demo notch and the win-confetti layer.
 * wisdom-games' web/ui values, written out. Phones are below 640px.
 */

/* ---- icons: an SVG from /core/icons as a mask, painted in currentColor ---- */
.icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  background: currentColor;
  mask: var(--icon-url) center / contain no-repeat;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
}
.icon-chevron { --icon-url: url(icons/chevron.svg); }
.icon-dots { --icon-url: url(icons/dots.svg); }
.icon-flag { --icon-url: url(icons/flag.svg); }
.icon-home { --icon-url: url(icons/home.svg); }
.icon-lock { --icon-url: url(icons/lock.svg); }
.icon-minus { --icon-url: url(icons/minus.svg); }
.icon-music { --icon-url: url(icons/music.svg); }
.icon-plus { --icon-url: url(icons/plus.svg); }
.icon-shield { --icon-url: url(icons/shield.svg); }
.icon-speaker-on { --icon-url: url(icons/speaker-on.svg); }
.icon-speaker-off { --icon-url: url(icons/speaker-off.svg); }
.icon-target { --icon-url: url(icons/target.svg); }
.icon-x { --icon-url: url(icons/x.svg); }
.icon-zap { --icon-url: url(icons/zap.svg); }

/* ---- buttons: shadcn's Button, secondary variant ---- */
.btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-weight: 700;
  background: var(--secondary);
  color: var(--secondary-foreground);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  cursor: pointer;
  outline: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:hover {
  background: var(--accent);
}
.btn:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
.btn .icon {
  width: 16px;
  height: 16px;
}

/* ---- demo notch, above the header (layout.css reserves its height) ---- */
.fun-mode-notch {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: var(--fun-mode-height);
  padding-top: env(safe-area-inset-top, 0px);
  border-radius: 0 0 20px 20px;
  background: var(--attention);
  color: var(--attention-foreground);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

/* ---- the brand bar ---- */
.topbar {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
}
.topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar__name {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--accent-color);
}
.topbar__right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar__balance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}
/* The label also names what is on its way ("+3.00 processing"), in its own
   place: the header's height never depends on it. */
.topbar__balance-label {
  white-space: nowrap;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--icon);
}
.topbar__balance-value {
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: var(--foreground);
  white-space: nowrap;
}
/* the wallet has not answered: a pulsing bar in the number's own line */
.topbar__balance-value:empty::before {
  content: "";
  display: inline-block;
  height: 0.8em;
  width: 6ch;
  border-radius: 9999px;
  background: var(--secondary-hover);
  animation: kit-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@media (max-width: 639.98px) {
  .topbar__balance-value {
    font-size: 16px;
    line-height: 24px;
  }
}

/* ---- the price strip ---- */
.price-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 12px;
}
.price-header__asset {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* BTC brand orange on purpose: asset identity, not the UI palette */
.asset-badge {
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-image: linear-gradient(to bottom right, #f7931a, #ffb84d);
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 3px 10px rgba(247, 147, 26, 0.35);
}
.price-header__name {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--foreground);
}
.price-header__price {
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  font-weight: 500;
  color: var(--muted-foreground);
}
@media (max-width: 639.98px) {
  .price-header {
    gap: 8px;
    margin: 12px 0 8px;
  }
  .price-header__asset {
    gap: 8px;
  }
  .asset-badge {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  .price-header__name {
    font-size: 13px;
  }
  .price-header__price {
    font-size: 16px;
  }
}

/* ---- the link readout: absent while healthy, a tinted pill when not ---- */
.link-status {
  position: relative;
  display: inline-flex;
}
.link-pill {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 6px;
  border-radius: 9999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  outline: none;
}
.link-pill.is-attention {
  background: color-mix(in oklab, var(--attention) 15%, transparent);
  color: var(--attention);
}
.link-pill.is-destructive {
  background: color-mix(in oklab, var(--destructive) 15%, transparent);
  color: var(--destructive);
}
/* three bars, lit from the shortest up; unlit ones stay a faint --icon */
.link-bars rect {
  fill: var(--icon);
  fill-opacity: 0.28;
}
.link-bars[data-lit="1"] rect:nth-child(-n + 1),
.link-bars[data-lit="2"] rect:nth-child(-n + 2) {
  fill: currentColor;
  fill-opacity: 1;
}
.link-tip {
  position: absolute;
  top: 100%;
  z-index: 50;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--secondary);
  padding: 12px;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.link-tip__caret {
  position: absolute;
  top: -4px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  background: var(--secondary);
}
.link-tip__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--secondary-foreground);
}
.link-tip__body {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted-foreground);
}
.link-tip__grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.link-tip__grid > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.link-tip__grid span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.link-tip__grid b {
  flex-shrink: 0;
  font-weight: 400;
  color: var(--secondary-foreground);
}
.link-tip__grid b.is-soft {
  color: var(--muted-foreground);
}
.link-tip__cadence {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* ---- the stage stepper: a track, one live segment carrying the timer ---- */
.stages {
  position: relative;
  margin-bottom: 12px;
  display: flex;
  height: 48px;
  width: 100%;
  align-items: center;
  border-radius: var(--radius-xl);
  background: var(--card);
  padding: 4px;
}
.stages__track {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  gap: 1px;
}
/* one soft entrance for the result; dismissal is immediate */
.stages__track.is-covered,
.stages__result.is-on {
  transition: opacity 1000ms cubic-bezier(0.45, 0.05, 0.25, 1);
}
.stages__track.is-covered {
  opacity: 0;
}
.stage {
  position: relative;
  display: flex;
  height: 40px;
  min-width: 0;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  border-radius: calc(var(--radius-xl) - 0.25rem);
  padding: 0 8px;
  font-size: 16px;
  line-height: 24px;
  color: var(--foreground);
  opacity: 0.5;
}
.stage.is-active {
  background: #141416;
  opacity: 1;
}
.stage-timer {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.stage-timer > span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: var(--secondary-hover);
}
.stage__label {
  position: relative;
  z-index: 10;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stage__time {
  position: relative;
  z-index: 10;
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stage__time:empty {
  display: none;
}
/* the betting clock's last seconds */
.stage.is-active.is-urgent .stage__time {
  animation: stage-urgent 0.7s ease-in-out infinite;
}
@keyframes stage-urgent {
  50% { opacity: 0.5; }
}
/* a tap after bets closed: lift the dim tab, flash the label white, shake */
.stage.is-nudged {
  overflow: visible;
  animation: stage-nudge-in 0.42s ease-in-out;
}
.stage.is-nudged .stage__label {
  animation: stage-nudge 0.42s ease-in-out;
}
@keyframes stage-nudge-in {
  0%, 100% { opacity: 0.5; }
  12%, 88% { opacity: 1; }
}
@keyframes stage-nudge {
  0%, 100% { transform: translateX(0); color: inherit; }
  16% { transform: translateX(-6px); color: #fff; }
  32% { transform: translateX(6px); color: #fff; }
  48% { transform: translateX(-4px); color: #fff; }
  64% { transform: translateX(4px); color: #fff; }
  80% { transform: translateX(-2px); color: #fff; }
}
@keyframes stage-nudge-flash {
  0%, 100% { color: inherit; }
  20%, 80% { color: #fff; }
}
.stages__result {
  position: absolute;
  inset: 4px;
  display: flex;
  pointer-events: none;
  opacity: 0;
}
.stages__result.is-on {
  pointer-events: auto;
  opacity: 1;
}
.result-pill {
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  white-space: nowrap;
  border-radius: calc(var(--radius-xl) - 0.25rem);
  padding: 0 8px;
  font-size: 16px;
}
.result-pill.is-win {
  background: rgba(214, 255, 77, 0.14);
}
.result-pill.is-loss,
.result-pill.is-missed {
  background: rgba(242, 79, 232, 0.14);
}
/* a zero-return notice: the destructive surface's text colour */
.result-pill.is-missed .result-pill__text {
  color: var(--destructive-foreground);
}
.result-pill.is-flat {
  background: color-mix(in oklab, #fff 6%, transparent);
}
/* a payment the wallet has not answered (ui.js paymentFace): no amount, a
   slow pulse until the final face replaces it */
.result-pill.is-pending {
  background: color-mix(in oklab, var(--attention) 14%, transparent);
}
.result-pill.is-pending .result-pill__text {
  color: var(--attention);
  animation: kit-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.result-pill.is-voided {
  background: color-mix(in oklab, #fff 6%, transparent);
}
.result-pill.is-voided .result-pill__text {
  color: var(--muted-foreground);
}
.result-pill__text {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--foreground);
}
.result-pill__tag {
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--success);
}
.result-pill__mult {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--success);
  font-variant-numeric: tabular-nums;
}
.result-pill__amount {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: color-mix(in oklab, var(--foreground) 90%, transparent);
  font-variant-numeric: tabular-nums;
}
.result-pill__text:empty,
.result-pill__tag:empty,
.result-pill__mult:empty,
.result-pill__amount:empty {
  display: none;
}
@media (max-width: 639.98px) {
  .stage {
    gap: 4px;
    padding: 0 4px;
    font-size: 13px;
  }
  .result-pill {
    gap: 8px;
    font-size: 13px;
  }
}

/* ---- the money buttons docked beside the plot (Pulse, Dash): a bet in
   the side's colour, or the cashout with its amount; success surfaces carry
   dark text, destructive ones white ---- */
.action {
  position: relative;
  display: flex;
  min-width: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 16px;
  font-family: var(--font-sans);
  transition-property: transform, box-shadow, filter;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.action:enabled:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}
.action:enabled:active {
  transform: scale(0.98);
}
.action:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.action--up {
  background: linear-gradient(to bottom right, var(--success), var(--success-deep));
  color: var(--success-foreground);
  box-shadow: 0 8px 24px rgba(214, 255, 77, 0.34);
}
.action--up:enabled:hover {
  box-shadow: 0 12px 32px rgba(214, 255, 77, 0.5);
}
.action--down {
  background: linear-gradient(to bottom right, var(--destructive), var(--destructive-deep));
  color: var(--destructive-foreground);
  box-shadow: 0 8px 24px rgba(242, 79, 232, 0.34);
}
.action--down:enabled:hover {
  box-shadow: 0 12px 32px rgba(242, 79, 232, 0.5);
}
.action--bet {
  gap: 5px;
  padding: 16px 12px;
}
.action--cashout {
  gap: 6px;
  padding: 14px 12px;
}
.cashout__row {
  display: flex;
  height: 36px;
  width: 100%;
  min-width: 0;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.cashout__big {
  display: block;
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
}
.cashout__amount {
  font-variant-numeric: tabular-nums;
}
.cashout__note {
  flex-shrink: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  opacity: 0.9;
}
@media (max-width: 639.98px) {
  .action--bet {
    gap: 3px;
    padding: 12px 8px;
  }
  .cashout__row {
    height: 21px;
  }
  .cashout__big {
    font-size: 21px;
  }
  .cashout__note {
    font-size: 11px;
  }
}

/* ---- the stake controls: −/amount/+ over the quick chips ---- */
.stake-rack {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stake-stepper {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.stake-step {
  min-width: 56px;
  flex: 1 1 0%;
  border-radius: var(--radius-xl);
  padding: 8px 12px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 800;
  color: var(--primary-hover);
}
.stake-step:hover {
  color: var(--primary);
}
.stake-step:active {
  scale: 0.93;
}
.stake-field {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-xl);
  background: var(--secondary);
  padding: 10px 8px;
}
.stake-field input {
  width: 100%;
  min-width: 0;
  flex: 1 1 0%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: var(--foreground);
  outline: none;
}
.stake-field__currency {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--foreground);
}
.stake-chips {
  display: grid;
  grid-template-columns: repeat(var(--chips, 4), minmax(0, 1fr));
  gap: 6px;
}
.stake-chip {
  min-height: 42px;
  border-radius: var(--radius-xl);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--muted-foreground);
}
.stake-chip:hover {
  color: var(--primary-hover);
}
.stake-chip:active {
  scale: 0.95;
}
@media (max-width: 639.98px) {
  .stake-stepper {
    gap: 4px;
  }
  /* fixed 44px −/+ tap targets; the freed width goes to the amount */
  .stake-step {
    min-width: 0;
    width: 44px;
    flex: none;
    font-size: 18px;
    line-height: 28px;
  }
  .stake-field {
    padding: 6px 8px;
  }
  .stake-field input {
    font-size: 16px;
    line-height: 24px;
  }
  .stake-field__currency {
    font-size: 13px;
  }
  .stake-chips {
    gap: 5px;
  }
  .stake-chip {
    min-height: 32px;
    font-size: 13px;
  }
}

/* ---- the game menu: a ⋯ that opens a bottom sheet ---- */
.menu-trigger {
  display: flex;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-size: 18px;
  color: var(--icon);
  transition: color 150ms, background-color 150ms;
}
.menu-trigger:hover {
  background: var(--secondary);
  color: var(--foreground);
}
.menu-trigger:active {
  scale: 0.93;
}
.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.menu__sheet {
  position: relative;
  display: flex;
  max-height: 86dvh;
  width: 100%;
  max-width: 600px;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: #17181d;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
  transition: transform 0.18s ease-out;
}
.menu__sheet.is-dragging {
  transition: none;
}
.menu__handle {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
}
.menu__handle::before {
  content: "";
  height: 4px;
  width: 36px;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.22);
}
.menu__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 20px 12px;
}
.menu__back {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-color);
}
.menu__back .icon {
  font-size: 18px;
  rotate: 180deg;
}
.menu__title {
  flex: 1 1 0%;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: #fff;
}
.menu__close {
  display: flex;
  width: 28px;
  height: 28px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.08);
  color: var(--icon);
  transition: color 150ms, background-color 150ms;
}
.menu__close:hover {
  background: rgb(255 255 255 / 0.16);
  color: #fff;
}
.menu__body {
  min-height: 0;
  flex: 1 1 0%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}
.menu__rows {
  border-top: 1px solid rgb(255 255 255 / 0.08);
}
.menu-row {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  padding: 16px 20px;
  text-align: left;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  transition: background-color 150ms;
}
.menu-row:hover {
  background: rgb(255 255 255 / 0.05);
}
.menu-row:active {
  background: rgb(255 255 255 / 0.08);
}
div.menu-row {
  cursor: auto;
}
div.menu-row:hover,
div.menu-row:active {
  background: transparent;
}
/* the glyph at its size, centred in a 24px slot (a mask fills its box) */
.menu-row > .icon:first-child {
  font-size: 17px;
  margin: 0 calc((24px - 1em) / 2);
  color: var(--accent-color);
}
.menu-row > .icon-music:first-child,
.menu-row > [data-speaker] {
  font-size: 19px;
}
.menu-row__label {
  flex: 1 1 0%;
}
.menu-row > .icon-chevron {
  font-size: 18px;
  color: var(--icon);
}
.menu-switch {
  position: relative;
  height: 28px;
  width: 48px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.16);
  transition: background-color 150ms;
}
.menu-switch[aria-checked="true"] {
  background: var(--accent-color);
}
.menu-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 150ms;
}
.menu-switch[aria-checked="true"]::after {
  transform: translateX(20px);
}
/* the language picker: a native select, sized like wisdom-games' EN/RU trigger */
.menu-lang {
  height: 28px;
  width: 74px;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 6px;
  background: rgb(255 255 255 / 0.08);
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  color-scheme: dark;
}
.menu-howto {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 20px 12px;
  counter-reset: step;
}
.menu-howto > li {
  counter-increment: step;
  display: flex;
  flex-direction: column;
}
.menu-howto p {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 2px;
  font-size: 15px;
  line-height: 1.625;
  color: #fff;
}
.menu-howto p::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
  padding-top: 2px;
  color: var(--accent-color);
}
.menu-rules {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 20px 8px;
  counter-reset: step;
}
.menu-rules > li {
  counter-increment: step;
  display: flex;
  gap: 12px;
  font-size: 15px;
  line-height: 1.625;
  color: #d7dae3;
}
.menu-rules > li::before {
  content: counter(step, decimal-leading-zero);
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-color);
}
.menu__panel {
  padding: 4px 20px 8px;
}
.menu-limits {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  font-size: 15px;
}
.menu-limits dt,
.menu-limits dd {
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  padding: 12px 0;
}
.menu-limits dt {
  color: #d7dae3;
}
.menu-limits dd {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-color);
}

/* ---- the first-run card over a softened game ---- */
.shell.is-intro .stages,
.shell.is-intro .shell-board,
.shell.is-intro .shell-controls {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  filter: blur(6px) brightness(0.7) saturate(0.75);
}
/* over the board and the controls, whichever way the layout puts them; the
   card is centred out of flow so it never sizes the grid rows */
.ftue {
  grid-row: 2 / -1;
  grid-column: 1 / -1;
  position: relative;
  z-index: 30;
  min-height: 0;
}
.ftue__card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 24px);
  max-width: 540px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--card);
  padding: 20px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.25), 0 24px 64px rgba(0, 0, 0, 0.55);
}
.ftue__card::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0 0 auto;
  height: 96px;
  background-image: linear-gradient(to bottom, rgb(255 255 255 / 0.12), transparent);
}
.ftue__title {
  position: relative;
  margin-bottom: 16px;
  text-align: center;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--heading);
}
.ftue__steps {
  position: relative;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ftue__steps > li {
  min-width: 0;
  text-align: center;
}
.ftue__steps p {
  font-size: 13px;
  line-height: 1.375;
  color: var(--foreground);
}
.ftue__cta {
  position: relative;
  height: 48px;
  width: 100%;
  border-radius: var(--radius-xl);
  font-size: 16px;
  font-weight: 800;
  background: #fff;
  color: #000;
}
.ftue__cta:hover {
  background: rgb(255 255 255 / 0.9);
}
@media (max-width: 639.98px) {
  .ftue__card {
    width: calc(100% - 16px);
    padding: 16px 12px;
  }
  .ftue__title {
    margin-bottom: 12px;
    font-size: 18px;
  }
  .ftue__steps {
    margin-bottom: 16px;
    gap: 8px;
  }
  .ftue__steps p {
    font-size: 11px;
  }
}

/* ---- toasts: sonner's dark card ---- */
/* A page without a header (none of the games) shows a notice as a toast. */
.toaster {
  position: fixed;
  z-index: 100;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  width: 356px;
  flex-direction: column;
  gap: 14px;
}

/* ---- the notice row: the header's last row, one line, always reserved ----
   Its height never changes, with a notice or without: the board and the
   controls under the header do not move when one comes or goes. */
.notice-row {
  display: block;
  width: 100%;
  height: 24px;
  margin-top: 4px;
  border: 0;
  border-radius: 8px;
  background: none;
  padding: 0 12px;
  color: var(--foreground);
  font: inherit;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
}
.notice-row:disabled { visibility: hidden; }
.notice-row > span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.notice-row.is-standing { background: var(--popover); }
/* the panel a tap on the row opens: every notice in full */
.notices { text-align: left; font-size: 13px; font-weight: 500; }
.notices ul { margin: 0 0 16px; padding: 0; list-style: none; max-height: 60vh; overflow-y: auto; }
.notices li + li { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.notices p { margin: 0; overflow-wrap: anywhere; }
.toast {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--popover);
  color: var(--popover-foreground);
  padding: 16px;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  animation: toast-in 400ms ease;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-100%); }
}
@media (max-width: 639.98px) {
  .toaster {
    top: 16px;
    width: calc(100% - 32px);
  }
}

/* ---- terminal notice: the credential is dead, relaunch from the lobby ---- */
.terminal {
  margin: auto;
  width: calc(100% - 32px);
  max-width: 448px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 24px;
  background: var(--card);
  color: var(--heading);
  padding: 28px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
}
.terminal::backdrop {
  background: rgb(0 0 0 / 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.terminal p::first-letter {
  text-transform: uppercase;
}
.terminal .btn {
  margin-top: 16px;
}

/* ---- the win burst over the board ---- */
.win-confetti {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 4;
}

@media (prefers-reduced-motion: reduce) {
  .shell.is-intro .stages,
  .shell.is-intro .shell-board,
  .shell.is-intro .shell-controls {
    filter: brightness(0.9);
  }
  .stage.is-active.is-urgent .stage__time { animation: none; }
  .stage.is-nudged .stage__label { animation: stage-nudge-flash 0.42s ease-in-out; }
  .toast { animation: none; }
  .result-pill.is-pending .result-pill__text { animation: none; }
}