:root {
  color-scheme: light;
  --bg: #f4f7ff;
  --panel: #ffffff;
  --text: #16213d;
  --muted: #5c6784;
  --border: #dbe3f2;
  --brand: #2452d4;
  --brand-strong: #1b3f9f;
  --ok-bg: #e8f8ee;
  --ok-text: #1f6e3c;
  --err-bg: #ffecef;
  --err-text: #9f2f3a;
  --positive-bg: #e8f8ee;
  --positive-text: #1f6e3c;
  --negative-bg: #ffecef;
  --negative-text: #9f2f3a;
  --paid-bg: #def4e8;
  --paid-text: #1f5f47;
  --tracker-tint: #f2f7ff;
  --tracker-border: #cfddfb;
  --tracker-shadow: 0 16px 38px rgba(27, 63, 159, 0.09);
}

* {
  box-sizing: border-box;
}

[x-cloak] {
  display: none !important;
}

body {
  margin: 0;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  background: radial-gradient(circle at top right, #e7efff 0, var(--bg) 42%);
  color: var(--text);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(7px);
}

.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.2px;
  flex: 0 0 auto;
}

.header-child-form {
  flex: 1 1 280px;
  max-width: 320px;
}

.header-child-select {
  min-height: 38px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.menu-button {
  display: none;
  border: none;
  background: #eaf0ff;
  color: var(--brand);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}

.nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.nav-link {
  border: none;
  background: transparent;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 8px;
}

.nav-link:hover,
.nav-link.active {
  color: var(--brand);
  background: #eaf0ff;
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  min-height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
}

.nav-meta {
  color: var(--muted);
  font-size: 0.86rem;
  white-space: nowrap;
}

.nav-button {
  cursor: pointer;
}

.nav-group {
  position: relative;
}

.nav-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 160px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(17, 32, 72, 0.12);
  padding: 6px;
  display: grid;
  gap: 4px;
}

.dropdown-link {
  color: var(--text);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
}

.dropdown-link:hover {
  background: #edf2ff;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px 28px;
  display: grid;
  gap: 16px;
}

.auth-shell {
  min-height: calc(100vh - 180px);
  display: grid;
  place-items: center;
}

.auth-card {
  width: min(460px, 100%);
}

.auth-card h1 {
  margin: 0 0 8px;
}

.auth-form {
  margin-top: 12px;
}

.dashboard-content {
  display: grid;
  gap: 16px;
}

.page-header h1 {
  margin: 0;
}

.page-header p {
  margin: 8px 0 0;
  color: var(--muted);
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

.card h2 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.08rem;
}

.muted {
  color: var(--muted);
}

.alerts {
  display: grid;
  gap: 8px;
}

.alert {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.95rem;
}

.alert.success {
  background: var(--ok-bg);
  color: var(--ok-text);
}

.alert.error {
  background: var(--err-bg);
  color: var(--err-text);
}

.dashboard-grid,
.config-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.top-focus-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

.top-focus-grid.has-actions {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
}

.actions-column {
  display: grid;
  gap: 16px;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.card-head h2 {
  margin: 0;
}

.tracker-spotlight {
  padding: 18px;
  border-color: var(--tracker-border);
  background: linear-gradient(180deg, #ffffff 0%, var(--tracker-tint) 100%);
  box-shadow: var(--tracker-shadow);
}

.tracker-spotlight > h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.tracker-spotlight > h2::after {
  content: "Live";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: #184f96;
  background: #dceaff;
  border: 1px solid #bdd6ff;
}

.week-form {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
}

.stacked-form {
  display: grid;
  gap: 8px;
}

.inline-role-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.inline-role-form .button {
  min-height: 40px;
  padding: 8px 10px;
}

label {
  font-size: 0.9rem;
  color: var(--muted);
}

input,
select,
button,
.button {
  font: inherit;
}

input,
select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

button,
.button {
  display: inline-block;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}

button:hover,
.button:hover {
  background: var(--brand-strong);
}

button:disabled,
.button:disabled {
  background: #b9c6ea;
  cursor: not-allowed;
}

.button.ghost {
  background: #edf2ff;
  color: var(--brand);
}

.menu-trigger {
  min-height: 38px;
  padding: 7px 12px;
}

.inline-menu {
  position: relative;
}

.menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(17, 32, 72, 0.12);
  padding: 6px;
  display: grid;
  gap: 4px;
  z-index: 12;
}

.menu-item-button {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  min-height: 38px;
}

.menu-item-button:hover {
  background: #edf2ff;
}

.hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.token-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eaf0ff;
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 700;
}

.token-pill.positive {
  background: var(--positive-bg);
  color: var(--positive-text);
}

.token-pill.negative {
  background: var(--negative-bg);
  color: var(--negative-text);
}

.token-pill.preview {
  background: #ffe6dc;
  color: #b65b63;
}

.token-pill.paid {
  background: var(--paid-bg);
  color: var(--paid-text);
}

.segmented-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.segment {
  background: #edf2ff;
  color: var(--brand);
  border: 1px solid #d5e1ff;
}

.segment.active {
  border-color: transparent;
}

.segment.active.positive {
  background: var(--positive-bg);
  color: var(--positive-text);
}

.segment.active.negative {
  background: var(--negative-bg);
  color: var(--negative-text);
}

.select-wrap {
  position: relative;
}

.select-wrap::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #7c89aa;
  border-bottom: 2px solid #7c89aa;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.rule-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.custom-token-control {
  display: grid;
  gap: 8px;
}

.amount-stepper {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  gap: 8px;
  align-items: center;
}

.step-btn {
  padding: 0;
  height: 42px;
  font-size: 1.2rem;
  line-height: 1;
}

.step-value {
  border: 1px solid var(--border);
  border-radius: 10px;
  min-height: 42px;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.circle-preview {
  display: grid;
  gap: 6px;
}

.token-circles {
  --token-size: 22px;
  --token-gap: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--token-gap);
  min-height: var(--token-size);
  justify-content: center;
  width: min(100%, calc(16 * var(--token-size) + 15 * var(--token-gap)));
  margin-inline: auto;
  border: 1px dashed #c8d8fb;
  border-radius: 14px;
  background: linear-gradient(180deg, #f6f9ff 0%, #f0f6ff 100%);
  padding: 12px;
}

.token-circle {
  width: var(--token-size);
  height: var(--token-size);
  border-radius: 999px;
  background: #d6e2ff;
  border: 1px solid #a6beff;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08);
}



.token-circle.positive {
  background: #c8efda;
  border-color: #7dc8a0;
}

.token-circle.negative {
  background: #ffd9de;
  border-color: #ef9eaa;
}

.token-circle.preview {
  background: #ffd8cb;
  border-color: #efb1a0;
}

.token-circle.paid {
  background: #d8f1e4;
  border-color: #93cdb3;
}

.token-circle.preview.positive {
  background: #ddf5e7;
  border-color: #addfc3;
}

.token-circle.preview.negative {
  background: #ffe3e6;
  border-color: #f6b9c0;
}

.money-sub {
  color: var(--muted);
  font-size: 0.83rem;
}

.value-stack {
  display: grid;
  gap: 2px;
}

.balance-grid {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  justify-content: center;
}

.balance-card {
  border: 1px solid #d3def7;
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 10px 24px rgba(26, 47, 99, 0.06);
  flex: 0 0 min(340px, calc(100vw - 44px));
  scroll-snap-align: start;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.balance-card.selected {
  border-color: #7ea7ff;
  box-shadow: 0 14px 28px rgba(36, 82, 212, 0.2);
  transform: translateY(-1px);
}

.balance-card h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}

.balance-card.spotlight h3 {
  font-size: 1.08rem;
}

.balance-meta {
  margin: 0 0 9px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.balance-card .hint {
  line-height: 1.35;
}

.balance-card .hint + .hint {
  margin-top: 3px;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.activity-stack {
  display: grid;
  gap: 16px;
}

.overview-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 14px;
}

.overview-stat {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fbfcff;
  padding: 10px 12px;
}

.overview-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.overview-value {
  margin: 6px 0 2px;
  font-size: 1.08rem;
  font-weight: 700;
}

.overview-value.positive {
  color: var(--positive-text);
}

.overview-subhead {
  margin: 0 0 10px;
  font-size: 0.96rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

th,
td {
  text-align: left;
  border-bottom: 1px solid var(--border);
  padding: 10px 8px;
  white-space: nowrap;
}

th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.9rem;
}

.log-table td:nth-child(5),
.log-table td:nth-child(6) {
  font-variant-numeric: tabular-nums;
}

.activity-table td:nth-child(4),
.payouts-table td:nth-child(3) {
  white-space: normal;
  min-width: 180px;
}

.activity-table td:nth-child(1),
.activity-table td:nth-child(5),
.activity-table td:nth-child(6),
.payouts-table td:nth-child(1),
.payouts-table td:nth-child(4),
.payouts-table td:nth-child(5) {
  white-space: nowrap;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 30, 64, 0.48);
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 40;
}

.modal-card {
  width: min(520px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.modal-head h2 {
  margin: 0;
}

.close-btn {
  min-height: 38px;
  padding: 7px 11px;
}

@media (max-width: 1100px) {
  .topbar-inner {
    padding: 10px 14px;
    flex-wrap: wrap;
  }

  .brand {
    font-size: 0.98rem;
  }

  .menu-button {
    display: inline-flex;
    order: 2;
    margin-left: auto;
  }

  .nav {
    order: 4;
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 6px;
    gap: 4px;
    margin-left: 0;
  }

  .nav.show {
    display: flex;
  }

  .nav-dropdown {
    position: static;
    box-shadow: none;
    width: 100%;
    margin-top: 6px;
  }

  .nav-meta {
    padding: 6px 10px;
    white-space: normal;
  }

  .menu-dropdown {
    right: auto;
    left: 0;
  }

  .container {
    padding: 14px;
  }

  .header-child-form {
    order: 3;
    width: 100%;
    max-width: none;
  }

  .header-child-select {
    min-height: 40px;
  }

  .top-focus-grid {
    grid-template-columns: 1fr;
  }

  .top-focus-grid.has-actions,
  .top-focus-grid.no-actions {
    grid-template-columns: 1fr;
  }

  .tracker-spotlight {
    padding: 14px;
  }

  .balance-card {
    padding: 12px;
  }

  .balance-card h3 {
    font-size: 0.98rem;
  }

  .balance-meta {
    margin-bottom: 10px;
  }

  .token-circles.large {
    --token-size: 24px;
    --token-gap: 10px;
  }

  .token-circles {
    width: min(100%, calc(16 * var(--token-size) + 15 * var(--token-gap)));
  }

  .balance-grid {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
    padding: 0;
    justify-content: stretch;
    gap: 10px;
  }

  .balance-card {
    width: 100%;
    flex: initial;
  }

  .week-form .button,
  .week-form button {
    width: 100%;
    text-align: center;
  }

  .week-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "prev next"
      "date date"
      "go go";
    gap: 8px;
    overflow: visible;
  }

  .week-prev {
    grid-area: prev;
  }

  .week-next {
    grid-area: next;
  }

  .week-date {
    grid-area: date;
  }

  .week-go {
    grid-area: go;
  }

  .modal-card {
    width: min(540px, 100%);
  }
}

@media (max-width: 560px) {
  .container {
    padding: 12px;
    gap: 12px;
  }

  .dashboard-content {
    gap: 12px;
  }

  .card {
    padding: 13px;
  }

  .auth-shell {
    min-height: auto;
  }

  .page-header p {
    font-size: 0.92rem;
  }

  .week-form {
    gap: 6px;
  }

  .week-form input[type="date"] {
    min-width: 0;
  }

  .amount-stepper {
    grid-template-columns: 44px 1fr 44px;
  }

  .step-btn {
    height: 44px;
  }

  .token-circles.large {
    --token-size: 22px;
    --token-gap: 9px;
  }

  .balance-grid {
    gap: 8px;
  }

  .balance-card {
    padding: 11px;
  }

  .activity-table td:nth-child(4),
  .payouts-table td:nth-child(3) {
    min-width: 220px;
  }

  .modal-backdrop {
    padding: 0;
    place-items: end stretch;
  }

  .modal-card {
    width: 100%;
    max-height: 88vh;
    border-radius: 16px 16px 0 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .card-head,
  .modal-head {
    align-items: flex-start;
  }

  .menu-trigger,
  .close-btn {
    min-height: 36px;
    padding: 6px 10px;
  }
}

@media (max-width: 700px) {
  .responsive-table {
    min-width: 0;
  }

  .responsive-table thead {
    display: none;
  }

  .responsive-table,
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table td {
    display: block;
    width: 100%;
  }

  .responsive-table tr {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 10px;
    background: #fff;
  }

  .responsive-table tr:last-child {
    margin-bottom: 6px;
  }

  .responsive-table td {
    border-bottom: none;
    padding: 6px 0;
    white-space: normal;
    display: grid;
    grid-template-columns: minmax(110px, 0.95fr) 1.4fr;
    gap: 10px;
    align-items: start;
    text-align: right;
  }

  .responsive-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
  }

  .responsive-table td[data-label="Type"] .token-pill {
    justify-self: end;
  }

  .inline-role-form {
    grid-template-columns: 1fr;
  }

  .inline-role-form .button {
    width: 100%;
  }

  .table-wrap {
    overflow: visible;
    margin-bottom: 6px;
  }
}

/* Shared layout and accessibility */
body { line-height: 1.5; }
a { color: var(--brand); }
:focus-visible { outline: 3px solid #df9b28; outline-offset: 4px; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px; background: white; }
.skip-link:focus { top: 12px; }
.container { gap: 24px; padding-top: 32px; padding-bottom: max(40px, env(safe-area-inset-bottom)); }
.container > *, .config-grid > *, .top-focus-grid > *, .dashboard-content > * { min-width: 0; }
.card { border-radius: 18px; padding: 24px; box-shadow: 0 3px 14px #16213d04; }
.card h2 { font-size: 1.15rem; letter-spacing: -.025em; }
.page-header h1 { font-size: clamp(1.8rem, 4vw, 2.55rem); letter-spacing: -.045em; line-height: 1.15; }
.page-header .eyebrow, .eyebrow { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 6px; }
.dashboard-heading, .balance-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.unit-badge { flex-shrink: 0; font-size: .82rem; font-weight: 600; padding: 8px 12px; border-radius: 30px; border: 1px solid var(--border); background: white; }
.dashboard-content, .activity-stack { gap: 24px; }
.account-card { width: min(100%, 560px); }
.stacked-form { gap: 10px; }
.stacked-form > label:not(:first-child) { margin-top: 6px; }
.stacked-form > button[type="submit"] { margin-top: 12px; }
input, select { min-width: 0; color: var(--text); }
input:focus, select:focus { border-color: var(--brand); }
button, .button { font-weight: 600; }
.nav-link { font-size: .88rem; white-space: nowrap; display: inline-flex; align-items: center; }
button.nav-link { background: transparent; color: var(--muted); }
button.nav-link:hover { color: var(--brand); background: #eaf0ff; }
.empty-state { text-align: center; padding: 40px 20px; }
.empty-state p { color: var(--muted); max-width: 420px; margin: 12px auto 20px; }

/* The reporting period stays compact, including on narrow screens. */
.week-picker { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 24px; }
.week-caption { display: grid; }
.week-caption .eyebrow { margin: 0; }
.week-form { display: grid; grid-template-columns: 44px minmax(130px, 180px) 48px 44px; grid-template-areas: none; gap: 6px; overflow: visible; }
.week-form > * { grid-area: auto; }
.week-form .button { display: grid; place-items: center; padding: 0; font-size: 1.3rem; }
.week-form button { padding-inline: 6px; }
.week-form input { min-width: 0; }
.overview-stat { padding: 16px; border-radius: 12px; }
.overview-value { font-size: clamp(1.25rem, 2vw, 1.7rem); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.overview-stat:first-child { background: #edf6f1; border-color: #c7e1d2; }
.overview-subhead { margin-top: 24px; }

/* Token cards wrap so every child remains reachable with a keyboard or touch. */
.balance-grid { display: flex; flex-wrap: wrap; overflow: visible; justify-content: center; gap: 16px; }
.balance-card { position: relative; flex: 1 1 300px; max-width: 520px; cursor: default; padding: 20px; box-shadow: none; }
.balance-card.selected { width: 100%; max-width: none; border-color: #c0d2f4; box-shadow: none; transform: none; }
.balance-card:has(.child-link):hover { border-color: var(--brand); box-shadow: 0 8px 20px #2452d410; }
.balance-card:has(.child-link:focus-visible) { outline: 3px solid #df9b28; outline-offset: 3px; }
.balance-card-heading h3 { margin: 0 0 12px; }
.child-link { text-decoration: none; color: var(--text); }
.child-link::after { content: ''; position: absolute; inset: 0; border-radius: 14px; }
.balance-number { margin: 0; font-size: 2.6rem; line-height: 1.2; letter-spacing: -.05em; font-weight: 700; font-variant-numeric: tabular-nums; }
.balance-number > span { font-size: .95rem; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.balance-meta { margin: 4px 0 18px; }
.balance-breakdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); margin: 20px 0 14px; text-align: center; }
.balance-breakdown dt { color: var(--muted); font-size: .72rem; }
.balance-breakdown dd { margin: 4px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.token-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 20px; font-size: .75rem; color: var(--muted); }
.token-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.legend-dot.available { background: #c4d6ff; }
.legend-dot.negative { background: #ed8c9c; }
.legend-dot.positive { background: #72b998; }
.legend-dot.paid { background: #4b698a; }
.token-circles.large { --cols: 8; --token-gap: 7px; width: 100%; max-width: 328px; padding: 14px; margin-block: 16px 10px; gap: var(--token-gap); }
.token-circles.large .token-circle { width: calc((100% - (var(--cols) - 1) * var(--token-gap)) / var(--cols)); height: auto; aspect-ratio: 1; flex-shrink: 0; display: grid; place-items: center; font-size: .72rem; font-weight: 700; }
.token-circle.negative::after { content: '−'; color: #9f2f3a; }
.token-circle.positive::after { content: '+'; color: #276245; }
.token-circle.paid { background: #4b698a; border-color: #3c5672; }
.token-circle.paid::after { content: '✓'; color: white; }
.token-circle.preview.negative { background: #ffe5e9; border: 2px dashed #da97a2; }
.token-circle.preview.negative::after { content: '−'; color: #9f2f3a; }
.token-circle.preview.positive { background: #fff0d9; border: 2px dashed #daa760; }
.token-circle.preview.positive::after { color: #916721; }
.token-pill.paid { background: #e0e8f1; color: #365475; }
.preview-summary { padding: 10px 12px; border-radius: 10px; background: #fff1e8; font-size: .85rem; }
.preview-summary .hint { display: block; margin-top: 4px; }
.action-description { margin-bottom: 16px; }
.step-value { text-align: center; font-size: 1.2rem; }

/* Native dialogs stay above the sticky header and contain keyboard focus. */
.modal-dialog { border: 0; padding: 0; border-radius: 18px; background: transparent; color: var(--text); width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.modal-dialog::backdrop { background: #16213d80; backdrop-filter: blur(3px); }
.modal-dialog .modal-card { width: 100%; max-height: none; margin: 0; }
body:has(dialog[open]) { overflow: hidden; }

th { font-size: .72rem; text-transform: uppercase; letter-spacing: .035em; }
th, td { padding: 14px 10px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f8faff; }
td { overflow-wrap: anywhere; }
@media (min-width: 1101px) {
  .top-focus-grid.has-actions { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); }
  .has-actions .token-circles.large { --cols: 16; max-width: none; }
  .header-child-form { max-width: 220px; }
}
@media (max-width: 1100px) {
  .topbar-inner { gap: 8px; }
  .nav { padding-block: 8px; }
  .nav > a, .nav-group, .nav > form { width: 100%; }
  .nav-link { min-height: 44px; }
  .config-grid { grid-template-columns: minmax(0, 1fr); }
  .top-focus-grid.has-actions { grid-template-columns: minmax(0, 1fr); }
  .header-child-form { flex-basis: 100%; }
  .balance-card { flex-basis: 300px; }
}
@media (max-width: 700px) {
  .container { padding: 20px 12px 32px; gap: 18px; }
  .card { padding: 18px; border-radius: 14px; }
  .dashboard-heading { align-items: flex-start; }
  .dashboard-heading .unit-badge { display: none; }
  .week-picker { gap: 12px; }
  .week-form { width: 100%; grid-template-columns: 44px minmax(0, 1fr) 44px 44px; }
  .overview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-stat { padding: 12px; }
  .overview-label { min-height: 2.8em; }
  .overview-value { font-size: 1.2rem; }
  .balance-card { max-width: none; padding: 16px; }
  .dashboard-content, .activity-stack, .top-focus-grid { gap: 18px; }
  .responsive-table td { grid-template-columns: minmax(80px, .8fr) minmax(0, 1.4fr); min-width: 0 !important; white-space: normal !important; }
  .responsive-table td > * { min-width: 0; max-width: 100%; }
  .responsive-table td .token-pill, .responsive-table td .button { justify-self: end; }
  .table-wrap { overflow-x: auto; }
  .modal-dialog { width: 100%; max-width: 100%; max-height: 90dvh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .modal-dialog .modal-card { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  input, select { font-size: 16px; }
  .action-description { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Warm, tactile tokens and calm household controls. */
:root { --bg:#f7f6f2; --brand:#5143a5; --brand-strong:#3b2f82; --tracker-tint:#faf8ff; --tracker-border:#e1dcee; }
body { background:radial-gradient(ellipse at top right,#ece8fc 0,transparent 50%),var(--bg); }
.card { border-radius:22px; }
.brand { letter-spacing:-.6px; }
.dashboard-heading h1 { letter-spacing:-1.2px; }
.household-report { margin-bottom:20px; }
.household-report summary { cursor:pointer; font-weight:700; padding:4px; }
.household-report summary .hint { margin-left:12px; font-weight:400; }
.household-report[open] summary { margin-bottom:22px; }
.balance-card { border-radius:20px; background:linear-gradient(145deg,#fff,#faf8ff); }
.child-link { font-size:1.5rem; }
.balance-number { letter-spacing:-1.5px; }
.welcome-coins { display:flex; justify-content:center; gap:10px; margin:12px 0 32px; }
.welcome-coins span { display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:#ffdc75; color:#805400; border:3px solid #f2b83d; box-shadow:0 4px 0 #dda525; font-size:28px; }
.welcome-coins span:nth-child(2) { transform:translateY(-12px); }
.sso-button { width:100%; display:flex; justify-content:space-between; margin-top:28px; padding:16px 20px; }
.child-experience { background:radial-gradient(ellipse at 90% 0%,#ebe7fd,transparent 48%),#faf8f3; }
.kid-space { max-width:1000px; margin:auto; padding:16px 0 40px; }
.kid-greeting { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; gap:16px; }
.kid-greeting h1 { font-size:clamp(2rem,5vw,3.1rem); letter-spacing:-1.8px; margin:4px 0 8px; }
.kid-greeting h1 span { color:#a77711; }
.kid-greeting p { color:var(--muted); }
.kid-stamp { font-size:.68rem; letter-spacing:2px; font-weight:800; padding:13px 18px; border:1px solid #d6cdeb; border-radius:30px; color:#655091; background:#f2eefd; white-space:nowrap; }
.kid-hero { position:relative; overflow:hidden; background:#e9e3fb; border:1px solid #d9cff4; border-radius:30px; padding:40px; display:grid; grid-template-columns:1.35fr 1fr; gap:24px; }
.kid-hero h2 { color:#3b2867; font-weight:600; font-size:1.5rem; margin:4px 0; }
.kid-total { display:block; font-size:clamp(4rem,10vw,6.5rem); line-height:1.05; font-weight:800; letter-spacing:-5px; }
.kid-money { font-size:1.4rem; font-weight:650; color:#4f3878; margin:18px 0 12px; }
.kid-balance > p:not(.eyebrow):not(.kid-money) { color:#5e4e79; max-width:280px; line-height:1.6; }
.kid-asof { font-size:.8rem; color:#63517b; }
.coin-universe { position:relative; align-self:center; height:245px; }
.hero-coin { position:absolute; width:190px; height:190px; border-radius:50%; top:20px; left:20px; background:linear-gradient(135deg,#ffe797,#fac44c); border:9px solid #f8cb61; box-shadow:inset 0 0 0 3px #fff0b6,0 10px 0 #d7a243,0 24px 30px #6c508326; transform:rotate(-12deg); display:grid; place-items:center; }
.hero-coin span { font-size:100px; color:#aa7118; text-shadow:0 2px #fff0b6; }
.mini-coin { position:absolute; bottom:6px; right:12px; width:74px; height:74px; display:grid; place-items:center; font-size:34px; background:#ffdf7c; color:#a36b12; border:5px solid #f1bf50; border-radius:50%; box-shadow:0 6px 0 #d7a243; transform:rotate(15deg); }
.spark { position:absolute; color:#8973bd; font-size:32px; }
.spark-one { right:15px; top:0; }.spark-two { left:0; bottom:0; }.spark-three { right:0; top:90px; font-size:18px; }
.kid-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0 28px; }
.kid-info { display:flex; align-items:center; gap:14px; border:1px solid #e5e3db; padding:20px; border-radius:20px; background:#fffdf8; }
.kid-info h2 { font-size:1rem; margin:0 0 6px; }.kid-info p { font-size:.85rem; color:var(--muted); margin:0; line-height:1.5; }
.kid-icon,.moment-icon { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border-radius:14px; font-size:24px; font-weight:800; }
.mint { background:#ddf3e8; color:#25664e; }.peach { background:#ffedcc; color:#875416; }.rose { background:#ffe5e3; color:#943e45; }.lilac { background:#eae4fc; color:#654f92; }.gold { background:#fff0bb; color:#835c17; }
.kid-collection,.kid-story { padding:28px; margin-bottom:24px; }
.kid-collection h2,.kid-story h2 { font-size:1.35rem; margin:4px 0; letter-spacing:-.4px; }
.collection-badge { font-size:.8rem; font-weight:700; color:#635087; background:#f0ebfa; border-radius:20px; padding:8px 12px; }
.kid-coins { display:flex; flex-wrap:wrap; gap:10px; padding:26px 0; }
.kid-coin { display:grid; place-items:center; height:38px; width:38px; border:2px solid #e9b545; border-radius:50%; background:#ffdf7b; color:#825811; font-size:23px; box-shadow:0 3px 0 #ddb454; }
.kid-coin.positive { background:#dcf2df; color:#366448; border-color:#8bb997; box-shadow:0 3px 0 #8bb997; }
.kid-coin.negative { background:#ffe9e6; color:#994e54; border-color:#ddb0af; box-shadow:0 3px 0 #ddb0af; }
.kid-coin.paid { background:#e9e4fc; color:#655092; border-color:#beb1dd; box-shadow:0 3px 0 #beb1dd; }
.coin-table { position:relative; padding:28px 8px 18px; border-radius:18px; background:radial-gradient(ellipse at top,#fffaf0,#f6f0e5); box-shadow:inset 0 1px 5px #8c6b1810; }
.kid-coin-slot { position:relative; display:block; flex:0 0 44px; width:44px; height:44px; }
.coin-table .kid-coin { position:absolute; inset:0; width:44px; height:44px; padding:0; margin:0; min-height:0; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; transition:none; font-family:inherit; line-height:1; }
.coin-table .kid-coin:hover { background:#ffe794; }
.coin-table .kid-coin.positive:hover { background:#dcf2df; }
.coin-table .kid-coin.negative:hover { background:#ffe9e6; }
.coin-table .kid-coin.paid:hover { background:#e9e4fc; }
.coin-table .kid-coin.is-moving { z-index:100; will-change:transform; }
.coin-table .kid-coin.is-held { z-index:101; cursor:grabbing; }
.coin-table .kid-coin:focus-visible { outline:3px solid #5143a5; outline-offset:4px; z-index:102; }
.kid-legend { display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; padding-top:20px; border-top:1px solid #ede9e3; }
.kid-legend>div { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.85rem; }
.kid-legend dt { display:flex; align-items:center; gap:8px; }.kid-legend dd { font-weight:750; margin:0; }
.legend-symbol { display:inline-grid; place-items:center; border-radius:50%; width:24px; height:24px; font-weight:700; }
.moment { display:flex; align-items:center; gap:14px; padding:18px 0; border-bottom:1px solid #efece6; }.moment:last-child { border:0; }
.moment h3 { margin:0 0 5px; font-size:.95rem; }.moment p { margin:0; font-size:.8rem; color:var(--muted); }.moment strong { margin-left:auto; font-size:.9rem; white-space:nowrap; }
.kid-empty { text-align:center; padding:34px 20px; }.kid-empty>span { font-size:40px; color:#8972b0; }.kid-empty p { color:var(--muted); line-height:1.65; max-width:420px; margin:12px auto; }
.kid-history { padding:8px; color:var(--muted); }.kid-history summary { cursor:pointer; }.kid-history form { margin-top:20px; flex-wrap:wrap; }
@media(max-width:640px) { .kid-space { padding-top:0; }.kid-stamp { display:none; }.kid-hero { padding:26px 22px; grid-template-columns:1.3fr 1fr; gap:0; }.coin-universe { height:180px; }.hero-coin { width:110px; height:110px; border-width:6px; left:4px; top:30px; }.hero-coin span { font-size:60px; }.mini-coin { width:44px; height:44px; font-size:22px; right:0; bottom:10px; }.spark { font-size:20px; }.kid-info-grid { grid-template-columns:1fr; gap:12px; }.kid-collection,.kid-story { padding:20px; }.kid-collection .card-head { align-items:start; }.kid-legend { grid-template-columns:1fr; }.kid-coins { gap:8px; }.kid-coin { width:33px; height:33px; font-size:19px; }.kid-money { font-size:1.15rem; }.kid-balance>p:not(.eyebrow):not(.kid-money) { font-size:.85rem; }.moment { gap:10px; }.moment-icon { width:34px; height:34px; }.household-report summary .hint { display:block; margin:8px 0; } }
@media(prefers-reduced-motion:no-preference) { .hero-coin { animation:coin-float 5s ease-in-out infinite; } @keyframes coin-float { 50% { transform:translateY(-7px) rotate(-8deg); } } }
@media(max-width:640px) { .dashboard-heading { flex-direction:column; align-items:flex-start; }.dashboard-heading>.button { padding:10px 14px; }.kid-preview-note { font-size:.85rem; line-height:1.6; } }

/* Picture-first reward shop. Selected coins are purple; waiting wishes stay reserved. */
.kid-shop-link { display:flex; align-items:center; gap:18px; padding:22px 26px; margin-top:22px; border-radius:24px; background:#fff0cf; border:1px solid #edd39d; color:#68441b; text-decoration:none; }
.kid-shop-link>span { font-size:36px; }.kid-shop-link>span:last-child { margin-left:auto; }.kid-shop-link strong { display:block; font-size:1.25rem; }.kid-shop-link div span { display:block; font-size:.88rem; margin-top:5px; }
.reward-shop { max-width:1100px; margin:auto; padding-bottom:145px; }.shop-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:24px; }.shop-heading h1 { font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:-1.2px; margin:5px 0 12px; }.shop-heading p { color:var(--muted); }
.reward-toolbar { display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin:12px 0 24px; }
.shop-wallet { position:sticky; top:76px; z-index:25; background:#fffdf8f5; border:1px solid #e7d8b8; border-radius:22px; padding:16px 20px; margin-bottom:28px; box-shadow:0 8px 24px #59431a10; backdrop-filter:blur(14px); }
.wallet-heading,.wallet-heading>div { display:flex; gap:12px; align-items:center; }.wallet-heading { flex-wrap:wrap; }.wallet-heading strong { font-size:1.8rem; color:#785313; }.wallet-heading>div>span:last-child { font-size:.85rem; color:#755f40; }.wallet-heading>.speak-button { margin-left:auto; }.wallet-held { color:#6b548f; font-size:.8rem; }
.wallet-coin { display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#ffdc78; border:2px solid #e7b753; color:#89580c; font-size:22px; }.shop-coins { display:flex; gap:7px; flex-wrap:wrap; max-height:104px; overflow-y:auto; padding:10px 3px; margin-top:5px; }
.shop-token { flex:0 0 38px; width:38px; height:38px; min-height:0; padding:0; display:grid; place-items:center; border-radius:50%; border:2px solid #e9b545; color:#825811; background:#ffdf7b; box-shadow:0 3px 0 #ddb454; font-size:22px; touch-action:none; cursor:grab; user-select:none; }.shop-token:hover { background:#ffe7a0; }.shop-token.is-selected { background:#ddd2ff; border-color:#997acc; color:#563686; box-shadow:0 3px 0 #997acc; }
.speak-button { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#f3effb; border:1px solid #e0d8ef; font-size:21px; padding:0; color:#382259; flex-shrink:0; }.speak-button:hover { background:#e5dcf5; }
.shop-selection { display:flex; gap:10px; align-items:center; padding-top:8px; color:#63488b; }.selection-picture { font-size:25px; }.selection-text { font-size:.8rem; }.selection-meter { flex:1; height:9px; background:linear-gradient(to right,#9870c3 var(--progress,0%),#ebe4f2 var(--progress,0%)); border-radius:10px; }.clear-selection { width:38px; height:38px; min-height:0; padding:0; border-radius:50%; background:#f0eafa; color:#694b95; font-size:24px; }
.reward-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }.prize-card { position:relative; background:#fffaf2; border:2px solid #e9e2d8; border-radius:25px; overflow:hidden; box-shadow:0 4px 14px #31234d05; transition:border-color .18s,box-shadow .18s; }.prize-card.is-selected { border-color:#8361b8; box-shadow:0 0 0 3px #d7c6f0; }.prize-card.is-drop-target { border-color:#40a680; box-shadow:0 0 0 5px #a9e1c5; }
.prize-choice { position:relative; display:flex; align-items:center; flex-direction:column; width:100%; padding:10px 16px 18px; border:0; border-radius:22px; background:transparent; color:var(--text); text-align:center; }.prize-choice:hover { background:#fff4df; }.prize-choice img { width:100%; height:auto; aspect-ratio:1; object-fit:contain; border-radius:18px; user-select:none; }.prize-name { font-size:1rem; font-weight:750; margin-top:4px; }.prize-price { display:flex; align-items:center; justify-content:center; gap:8px; font-size:1.7rem; font-weight:800; color:#785212; padding:10px 0; }.prize-price>span { color:#b87d15; }.prize-price small { font-size:.85rem; font-weight:500; color:#6d6559; margin-left:5px; }.price-dots { display:flex; justify-content:center; flex-wrap:wrap; gap:4px; max-width:230px; }.price-dots i { width:11px; height:11px; border-radius:50%; background:#eadbb8; border:1px solid #d5bf91; }.price-dots i.filled { background:#aa83d6; border-color:#8460ae; }.prize-speak { position:absolute; top:12px; right:12px; }.prize-check { position:absolute; left:14px; top:14px; display:none; place-items:center; width:35px; height:35px; border-radius:50%; background:#7751a6; color:white; font-size:24px; }.is-selected .prize-check { display:grid; }.need-more { font-size:.8rem; color:#665963; margin-top:12px; }
.wish-send-bar { position:fixed; bottom:12px; left:50%; transform:translateX(-50%); width:min(1100px,calc(100% - 24px)); box-sizing:border-box; display:flex; align-items:center; gap:20px; justify-content:space-between; margin:0; padding:18px 22px; background:#f4effbef; border:1px solid #d7caec; border-radius:24px; z-index:26; box-shadow:0 8px 30px #4a326225; backdrop-filter:blur(12px); }.wish-send-bar>div>span { font-size:27px; }.wish-send-bar p { margin:5px 0 0; font-size:.85rem; color:#5d4774; }.wish-confirm { background:#31755a; color:white; font-size:27px; display:flex; gap:14px; align-items:center; padding:15px 23px; border-radius:18px; border:0; }.wish-confirm span { font-size:1.05rem; }.wish-confirm:disabled { opacity:.45; }.wish-confirm:hover:not(:disabled) { background:#225b43; }
.wish-history-grid { display:grid; gap:14px; }.wish-status-card { display:flex; align-items:center; gap:18px; border:1px solid #e3dced; border-radius:20px; padding:12px; background:#faf8fd; }.wish-status-card>img { border-radius:14px; object-fit:contain; width:85px; height:85px; }.wish-status-card .speak-button { margin-left:auto; }.wish-status-card p { font-size:.85rem; color:#645a71; }.wish-state-icon { font-size:24px; margin-right:8px; }.wish-status-card.fulfilled { background:#edf8f1; }.wish-status-card.released { background:#f6f3ef; }
.wish-dialog { max-width:430px; width:calc(100% - 24px); border:1px solid #ddd2ea; border-radius:30px; padding:26px; text-align:center; color:var(--text); background:#fffdf8; }.wish-dialog::backdrop { background:#271b4580; backdrop-filter:blur(5px); }.confirm-prize { border-radius:24px; width:190px; height:190px; object-fit:contain; }.confirm-token-price { font-size:2rem; font-weight:800; color:#70499e; margin:15px 0; }.confirm-explanation { font-size:.9rem; line-height:1.6; color:var(--muted); }.wish-dialog-actions { display:flex; gap:16px; margin-top:22px; }.wish-cancel { flex:1; background:#f7e9e5; color:#884b47; font-size:30px; border-radius:18px; padding:14px; }.wish-submit { flex:2; background:#2c7857; font-size:30px; color:white; border-radius:18px; }.shop-drag-coin { position:fixed; z-index:10000; pointer-events:none; width:44px; height:44px; min-height:0; border-radius:50%; padding:0; background:#ffdd75; color:#865709; border:3px solid #e4b046; font-size:25px; box-shadow:0 14px 12px #5c451c40; transform:rotate(-12deg); }
.reward-children { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; }.reward-children a { text-decoration:none; }.reward-children a>span { font-size:44px; }.reward-settings-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }.reward-settings-grid img { object-fit:contain; border-radius:20px; margin:auto; }.reward-settings-grid input[type=checkbox] { width:auto; }
.review-wish { margin:20px 0; }.review-wish-head { display:flex; align-items:center; gap:20px; }.review-wish-head img { border-radius:18px; object-fit:contain; }.review-form { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0; }.review-form label { display:grid; gap:8px; }.review-form label:nth-of-type(3),.review-actions,.review-form>.hint { grid-column:1/-1; }.review-actions { display:flex; flex-wrap:wrap; gap:12px; }.review-wish details { margin-top:18px; }.review-wish li { margin:10px 0; font-size:.85rem; }
@media(max-width:700px) { .reward-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.shop-heading { align-items:flex-start; }.shop-heading>.button { font-size:.8rem; padding:9px; }.shop-heading>.button span { display:none; }.shop-wallet { top:68px; padding:12px; margin-bottom:18px; }.wallet-heading { gap:7px; }.wallet-heading>div { gap:7px; }.wallet-heading strong { font-size:1.5rem; }.wallet-held { order:3; width:100%; }.shop-coins { max-height:96px; gap:6px; }.shop-token { width:36px; height:36px; flex-basis:36px; }.prize-choice { padding:6px 8px 15px; }.prize-name { font-size:.86rem; }.prize-price { font-size:1.4rem; gap:5px; }.prize-price small { font-size:.75rem; }.prize-speak { width:38px; height:38px; right:7px; top:7px; font-size:18px; }.price-dots { gap:3px; }.price-dots i { width:8px; height:8px; }.prize-check { top:9px; left:9px; width:27px; height:27px; font-size:20px; }.wish-send-bar { padding:12px; gap:10px; bottom:7px; }.wish-send-bar>div>span { font-size:21px; }.wish-confirm { padding:14px 20px; }.wish-confirm span { display:none; }.wish-status-card { gap:10px; padding:10px; }.wish-status-card>img { width:60px; height:60px; }.wish-status-card strong { font-size:.85rem; }.wish-state-icon { font-size:18px; }.review-form { grid-template-columns:1fr; }.review-wish-head { gap:12px; }.review-wish-head img { width:70px; height:70px; }.review-wish h2 { font-size:1.15rem; }.kid-shop-link { padding:18px; }.kid-shop-link strong { font-size:1.05rem; } }
.kid-coin.reserved,.coin-table .kid-coin.reserved:hover,.token-circle.reserved,.legend-dot.reserved { background:#dacbf4; color:#68438e; border-color:#ae8bd4; box-shadow:0 3px 0 #ae8bd4; }

/* Alligator club: quiet pond colors, small discoveries, no balance changes. */
.pond-announcement { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.pond-club { margin:20px 0 8px; padding:20px 22px; background:linear-gradient(120deg,#edf4e9,#f3f8f3 65%,#eef5f3); border:1px solid #d8e5d5; border-radius:22px; color:#345548; }
.pond-club-heading { display:flex; align-items:center; gap:12px; }.pond-club-heading h3 { margin:3px 0 0; font-size:1.25rem; letter-spacing:-.4px; }.pond-club .eyebrow { color:#657d6a; font-size:.65rem; margin:0; }.pond-emblem { display:grid; place-items:center; width:48px; height:48px; font-size:28px; background:#fff9; border:1px solid #d7e5d0; border-radius:16px; }.pond-sound { margin-left:auto; width:40px; height:40px; padding:0; border:1px solid #d5e1d3; border-radius:50%; background:#fff9; }
.pond-progress { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-top:18px; }.pond-progress>span:first-child { font-size:24px; letter-spacing:5px; }.pond-count { font-size:.8rem; font-weight:650; }.pond-track { margin:10px 0; height:6px; background:#dce6d6; border-radius:8px; overflow:hidden; }.pond-track i { display:block; height:100%; width:0; border-radius:8px; background:linear-gradient(90deg,#92b566,#478b75); transition:width .65s ease; }.pond-caption { color:#647766; font-size:.78rem; line-height:1.6; margin:10px 0; }
.pond-badges { margin-top:14px; border-top:1px solid #d5e2d1; padding-top:12px; }.pond-badges summary { cursor:pointer; font-size:.85rem; font-weight:650; }.pond-badge-count { float:right; font-size:.75rem; color:#6d816e; }.pond-badge-list { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; padding-top:16px; }.pond-badge { display:flex; align-items:center; flex-direction:column; text-align:center; gap:7px; color:#71816f; padding:12px 5px; border:1px dashed #cbd8c5; border-radius:15px; }.pond-badge>span { display:grid; place-items:center; width:43px; height:43px; background:#dce5d8; border-radius:50%; font-size:23px; filter:grayscale(1); opacity:.5; }.pond-badge strong { font-size:.72rem; }.pond-badge small { font-size:.64rem; line-height:1.4; }.pond-badge.earned { background:#fff9; border:1px solid #d7d5af; color:#4c603e; }.pond-badge.earned>span { background:linear-gradient(140deg,#fff1b7,#e4cf8c); box-shadow:0 3px 0 #c8b87c; filter:none; opacity:1; }
.pond-effects { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:160; }.pond-gator { position:absolute; width:0; height:0; pointer-events:none; }.pond-gator-body { width:280px; height:187px; transform-origin:82% 78%; position:absolute; filter:drop-shadow(0 8px 6px #243e2925); }.pond-gator-body img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }.pond-mouth-closed { opacity:0; }.pond-gator.has-eaten .pond-mouth-closed { opacity:1; }.pond-gator.has-eaten img:first-child { opacity:0; }.pond-ripple { position:absolute; width:150px; height:65px; border:2px solid #90c2b080; background:radial-gradient(ellipse,#b6dac644,transparent 70%); border-radius:50%; box-shadow:0 0 0 12px #abd2bf20; }
.pond-toast { position:fixed; z-index:180; bottom:24px; left:50%; transform:translate(-50%,15px); opacity:0; pointer-events:none; max-width:calc(100vw - 40px); width:max-content; box-sizing:border-box; border:1px solid #cbd7b6; border-radius:40px; padding:15px 24px; color:#3c563c; background:#fffff4f5; box-shadow:0 10px 40px #304e3820; font-size:.9rem; transition:opacity .3s,transform .3s; }.pond-toast.is-visible { opacity:1; transform:translate(-50%,0); }
.coin-table .kid-coin[data-pond-state="egg"],.coin-table .kid-coin[data-pond-state="baby"] { background:transparent; border-color:transparent; box-shadow:none; overflow:visible; }
.pond-egg { display:block; width:30px; height:39px; border-radius:52% 48% 45% 45% / 63% 63% 37% 37%; border:1px solid #b6b486; background:radial-gradient(ellipse at 32% 27%,#fffdf0 0 13%,transparent 14%),radial-gradient(ellipse at 65% 40%,#a6b78d 0 8%,transparent 9%),radial-gradient(ellipse at 27% 65%,#bbc79c 0 9%,transparent 10%),radial-gradient(ellipse at 62% 78%,#b4bd8c 0 6%,transparent 7%),linear-gradient(120deg,#fffbea,#e5e3bb); box-shadow:inset -4px -4px 5px #aab48538,0 4px 3px #445c3920; transform-origin:50% 90%; }
.pond-baby { display:block; flex:none; width:56px; height:56px; background-size:300% 300%; background-repeat:no-repeat; filter:drop-shadow(0 3px 2px #36543820); transform-origin:center; }
.coin-table .kid-coin[data-pond-state="color"] { background:color-mix(in srgb,var(--pond-tone),white 22%); border-color:var(--pond-tone); color:color-mix(in srgb,var(--pond-tone),#182c24 55%); box-shadow:0 3px 0 color-mix(in srgb,var(--pond-tone),#182c24 20%),inset 0 1px 2px #fff8; }
@media(max-width:640px) { .pond-club { padding:16px; }.pond-badge-list { grid-template-columns:repeat(3,minmax(0,1fr)); }.pond-gator-body { width:210px; height:140px; }.pond-count { font-size:.74rem; }.pond-toast { font-size:.8rem; padding:12px 18px; } }
@media(prefers-reduced-motion:reduce) { .pond-track i,.pond-toast { transition:none; } }
.pond-snack { position:absolute; display:grid; place-items:center; width:44px; height:44px; box-sizing:border-box; border:2px solid #e9b545; border-radius:50%; background:#ffdf7b; color:#825811; font-size:23px; box-shadow:0 3px 0 #ddb454; }
.kid-arcade-link { display:flex; align-items:center; gap:16px; margin:18px 0; padding:18px 22px; border:1px solid #dcd3ed; border-radius:20px; background:linear-gradient(120deg,#f5eefb,#edf6fa); color:#51416c; text-decoration:none; }.kid-arcade-link>span { font-size:28px; }.kid-arcade-link>span:last-child { margin-left:auto; }.kid-arcade-link strong,.kid-arcade-link div>span { display:block; }.kid-arcade-link div>span { font-size:.8rem; margin-top:5px; color:#776887; }
.little-arcade { max-width:1050px; margin:auto; padding:16px 0 50px; }.little-arcade [hidden] { display:none!important; }.arcade-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:30px; }.arcade-heading h1 { letter-spacing:-1.3px; font-size:clamp(1.8rem,4vw,2.8rem); margin:8px 0; }.arcade-heading p { color:#81738c; }.star-machine { overflow:hidden; border:7px solid #d8cbe4; border-radius:32px; background:#f7f1fc; box-shadow:0 8px 0 #baabcb,0 20px 60px #39225813; }.machine-top { display:flex; justify-content:space-between; align-items:center; padding:16px 24px; color:#675675; font-size:.82rem; font-weight:750; letter-spacing:2px; }.star-score { background:white; border-radius:30px; padding:7px 16px; letter-spacing:0; }.star-field { position:relative; height:380px; overflow:hidden; background:radial-gradient(ellipse at 50% 10%,#444565,#242d46 65%,#253e4c); isolation:isolate; }.star-field:before { content:'✦         ·                     ✧            ·       ✦'; position:absolute; inset:35px 25px; color:#eee5c8a0; line-height:90px; letter-spacing:15px; font-size:25px; pointer-events:none; }.arcade-moon { position:absolute; right:10%; top:10%; font-size:90px; color:#eee6b3; transform:rotate(-20deg); opacity:.65; }.arcade-orbit { position:absolute; inset:50px 80px; border:1px dashed #ccc8e225; border-radius:50%; transform:rotate(-18deg); }.arcade-hills { position:absolute; width:140%; height:150px; left:-20%; bottom:-110px; border-radius:50%; background:#78a7a1; box-shadow:150px -18px 0 #577e86,-160px -35px 0 #466f7c; z-index:-1; }.arcade-welcome,.arcade-victory { position:absolute; inset:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fffaec; }.arcade-welcome>span { font-size:75px; color:#efd997; }.arcade-welcome h2 { font-size:clamp(1.3rem,3vw,1.8rem); margin:0 0 5px; }.arcade-welcome p { color:#d0cada; }.catch-star { position:absolute; width:94px; height:94px; min-height:0; border:0; border-radius:50%; background:radial-gradient(circle,#fce7a31c,transparent 70%); color:#ffe39a; font-size:76px; line-height:1; padding:0; transform:translate(-50%,-50%); filter:drop-shadow(0 5px 0 #bd9765) drop-shadow(0 0 18px #ffe0945c); animation:star-bob 2.8s ease-in-out infinite; cursor:pointer; touch-action:manipulation; }.catch-star:hover { color:#fff3c9; background:#ffffff0b; }.catch-star:focus-visible { outline:2px solid #fff1b9; outline-offset:7px; }.catch-star:disabled { opacity:.65; }.machine-bottom { display:flex; align-items:center; gap:20px; justify-content:space-between; padding:16px 24px; }.machine-bottom p { max-width:640px; font-size:.84rem; line-height:1.6; color:#695971; margin:0; }.machine-bottom>span { white-space:nowrap; font-size:24px; }
.arcade-victory>span { font-size:62px; }.arcade-victory h2 { margin:7px 0; }.arcade-victory p { margin:6px 0 16px; }.arcade-victory .button { background:#f4dfab; color:#483c29; border:0; }.arcade-again { margin-top:12px; background:none; border:0; color:#e0dceb; font-size:.8rem; text-decoration:underline; }.arcade-wallet { padding:32px 0; display:flex; align-items:center; gap:25px; justify-content:space-between; }.arcade-wallet h2 { font-size:1.15rem; margin:0; }.arcade-wallet p { font-size:.8rem; color:#827789; }.arcade-tokens { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; max-width:650px; }.arcade-token { --token-color:#e5c66a; width:48px; height:48px; min-height:0; border:2px solid color-mix(in srgb,var(--token-color),black 8%); background:color-mix(in srgb,var(--token-color),white 20%); color:color-mix(in srgb,var(--token-color),black 45%); box-shadow:0 4px 0 color-mix(in srgb,var(--token-color),black 15%); border-radius:50%; padding:0; font-size:25px; }.arcade-token:hover { transform:translateY(-3px); background:var(--token-color); }.arcade-token:disabled { opacity:.45; transform:none; }.color-green{--token-color:#83b658}.color-blue{--token-color:#6dabd9}.color-gray{--token-color:#969b91}.color-cream{--token-color:#e4d5ae}.color-orange{--token-color:#edaa51}.color-purple{--token-color:#ad83cf}.color-teal{--token-color:#62b8af}.color-yellow{--token-color:#e7c44b}.color-pink{--token-color:#e897b9}
.arcade-pages { border-top:1px solid #e4ddeb; padding-top:26px; }.coloring-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }.coloring-card { text-align:center; padding:26px 16px; border:1px dashed #d4cbdc; border-radius:22px; background:#f5f1f8; }.coloring-icon { font-size:50px; display:block; filter:grayscale(1); opacity:.4; }.coloring-card h3 { font-size:1rem; }.coloring-card p { font-size:.75rem; color:#8e8198; }.coloring-card.is-won { background:#fffcf3; border:1px solid #e8dbba; box-shadow:0 5px 15px #6b4b1310; }.is-won .coloring-icon { filter:none; opacity:1; }.coloring-open { color:#68507d; font-size:.85rem; font-weight:650; }.star-field.caught:after { content:'✦'; position:absolute; left:50%; top:45%; color:#fff4bc; font-size:100px; pointer-events:none; animation:star-burst .45s ease-out forwards; }
@keyframes star-bob { 50% { transform:translate(-50%,-58%) rotate(6deg); } } @keyframes star-burst { from { transform:translate(-50%,-50%) scale(.4); opacity:.7; } to { transform:translate(-50%,-50%) scale(2); opacity:0; } }
@media(max-width:640px) { .arcade-heading { align-items:flex-start; }.arcade-heading .button { font-size:.75rem; white-space:nowrap; padding:10px; }.star-machine { border-width:5px; border-radius:25px; }.machine-top,.machine-bottom { padding:14px; }.machine-bottom>span { display:none; }.star-field { height:330px; }.arcade-wallet { flex-direction:column; align-items:flex-start; gap:10px; }.arcade-tokens { justify-content:flex-start; }.coloring-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.coloring-card { padding:18px 8px; }.coloring-card h3 { font-size:.85rem; }.kid-arcade-link { padding:16px; gap:10px; }.kid-arcade-link strong { font-size:.9rem; } }
@media(prefers-reduced-motion:reduce) { .catch-star,.star-field.caught:after { animation:none; }.star-field.caught:after { display:none; } }
.shop-token.has-color:not(.is-selected) { background:color-mix(in srgb,var(--token-color),white 20%); border-color:color-mix(in srgb,var(--token-color),black 8%); color:color-mix(in srgb,var(--token-color),black 45%); box-shadow:0 3px 0 color-mix(in srgb,var(--token-color),black 15%); }

/* Parent game library and the earned story/coloring reader. */
.earned-reward [hidden], .little-arcade [hidden] { display:none !important; }
.game-admin { max-width:1080px; margin:auto; padding-bottom:50px; }.game-admin-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:25px 0; }.game-admin-heading h1,.earned-heading h1 { font-size:clamp(2rem,4vw,3rem); margin:8px 0 14px; letter-spacing:-1.2px; }.game-admin-heading p { color:var(--muted); max-width:720px; line-height:1.6; }.game-library-symbol { font-size:66px; }.game-admin-intro { padding:20px 24px; background:#f0ebf8; color:#59466c; border:1px solid #ddd1ec; border-radius:18px; line-height:1.7; margin-bottom:25px; }.game-upload-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }.game-upload-grid .card { margin:0; }.game-form { display:grid; gap:16px; }.game-form label { display:grid; gap:7px; font-size:.9rem; font-weight:650; }.game-form input,.game-form textarea { box-sizing:border-box; max-width:100%; }.game-form textarea { width:100%; resize:vertical; line-height:1.6; padding:12px; border:1px solid #d8d0de; border-radius:10px; font-family:inherit; }.game-form .game-check { display:flex; align-items:center; gap:10px; font-weight:500; }.game-check input { width:auto; }.game-form button { justify-self:start; }.game-form .hint { margin:0; }.game-library { margin:35px 0; }.game-story-list { display:grid; gap:16px; }.game-story-card { display:flex; align-items:center; gap:20px; padding:22px; background:#fffdf8; border:1px solid #e3d9e9; border-radius:20px; color:var(--text); text-decoration:none; }.game-story-card>span { font-size:38px; }.game-story-card>div { flex:1; }.game-story-card h3 { margin:0 0 8px; }.game-story-card p { color:var(--muted); font-size:.9rem; }.game-status { display:inline-block; padding:5px 10px; background:#ebe5f0; color:#76657e; border-radius:12px; font-size:.75rem; }.game-status.published { background:#e2f0e8; color:#36634b; }.game-page-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.game-page-card { min-width:0; }.game-page-card img { width:100%; height:210px; object-fit:contain; background:white; border-radius:12px; margin-bottom:18px; }.game-page-card details input { margin-top:12px; }.back-link { display:inline-block; margin:12px 0; color:#71558e; text-decoration:none; }.chapter-admin-card { margin-bottom:18px; }.chapter-admin-head { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }.chapter-admin-head>div { flex:1; }.chapter-admin-head h3 { margin:0 0 6px; }.chapter-number { background:#eee6f4; color:#77558e; border-radius:50%; width:42px; height:42px; display:grid; place-items:center; font-weight:700; }.chapter-admin-head form { display:flex; gap:5px; }.chapter-admin-head form button { padding:8px 12px; }.chapter-admin-card details { margin-top:20px; }.chapter-admin-card details[open] summary { margin-bottom:18px; }.arcade-prize-picker { padding:24px 0 0; }.arcade-prize-picker select { width:100%; margin-top:12px; padding:14px; border-radius:14px; }.prize-subtitle { margin:10px 0 5px; }.earned-reward { max-width:1100px; margin:auto; padding-bottom:50px; }.earned-heading { text-align:center; margin:30px 0; }.narrator-bar { display:flex; align-items:center; flex-wrap:wrap; gap:18px; background:#eaf2ed; border:1px solid #d1e2d7; border-radius:22px; padding:22px; margin:25px auto; max-width:850px; }.narrator-icon { font-size:38px; }.narrator-bar>div { flex:1; min-width:160px; }.narrator-bar p { font-size:.85rem; color:#506959; margin-bottom:0; }.narrator-bar audio { width:100%; }.chapter-reader { max-width:750px; margin:35px auto; background:#fffdf6; padding:clamp(24px,5vw,60px); border:1px solid #e9e0cc; border-radius:25px; box-shadow:0 12px 35px #6b56280b; }.chapter-reader p { font-family:Georgia,serif; font-size:clamp(1.15rem,2.3vw,1.4rem); line-height:1.95; white-space:pre-line; overflow-wrap:anywhere; color:#463e38; margin:0 0 1.4em; }.chapter-reader p:last-child { margin-bottom:0; }.reader-end { text-align:center; color:#8b739b; }.reader-end>span { font-size:35px; }.coloring-studio { background:#f4f0e7; border:1px solid #e3dac8; padding:20px; border-radius:24px; }.coloring-tools { display:flex; align-items:center; flex-wrap:wrap; gap:14px; }.coloring-tools label { display:grid; gap:6px; font-size:.8rem; }.coloring-tools input[type=color] { width:62px; height:38px; padding:3px; }.coloring-tools input[type=range] { width:100px; }.coloring-tools button[aria-pressed=true] { background:#315f4c; color:white; }.coloring-studio canvas { display:block; width:100%; height:auto; background:white; border-radius:8px; touch-action:none; cursor:crosshair; }.coloring-studio canvas:focus-visible { outline:3px solid #9d7ec0; outline-offset:4px; }
@media(max-width:760px) { .game-upload-grid { grid-template-columns:1fr; }.game-page-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.game-library-symbol { display:none; }.game-admin-heading { padding:12px 0; }.chapter-admin-head .button { padding:10px; }.narrator-bar { padding:16px; gap:12px; }.coloring-studio { padding:12px; }.coloring-tools button { padding:10px 12px; } }
@media(max-width:480px) { .game-page-grid { grid-template-columns:1fr; }.chapter-admin-head { gap:10px; }.narrator-bar>button { flex:1 1 100%; }.game-story-card { padding:16px; } }

/* Three little games, one shared reward and personal-record shelf. */
.game-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0 0 25px; }.game-choice { display:flex; flex-direction:column; align-items:flex-start; gap:7px; text-align:left; padding:22px; background:#faf7fd; color:#493b60; border:2px solid #e2d9ed; border-radius:22px; box-shadow:0 4px 12px #33213e05; }.game-choice>span { font-size:32px; }.game-choice strong { font-size:1.08rem; }.game-choice small { font-size:.8rem; font-weight:400; line-height:1.5; }.game-choice em { font-style:normal; font-size:.75rem; color:#7f668f; margin-top:5px; }.game-choice[aria-pressed=true] { background:#f1e9fb; border-color:#9f83c0; box-shadow:0 0 0 3px #b9a5ce20; }.game-choice:disabled { opacity:.7; cursor:default; }.game-choice[aria-pressed=true]:disabled { opacity:1; }.game-instruments { display:flex; gap:12px; align-items:center; }.game-clock { font-variant-numeric:tabular-nums; font-size:.9rem; color:#766087; letter-spacing:0; }.game-instruments .star-score { min-width:58px; text-align:center; }.won-score { font-size:1.25rem; color:#fae3a5; font-variant-numeric:tabular-nums; }.game-memory { background:linear-gradient(150deg,#345d59,#25443f); }.game-memory .arcade-hills,.game-breakout .arcade-hills,.game-memory .arcade-orbit,.game-breakout .arcade-orbit,.game-memory .arcade-moon,.game-breakout .arcade-moon { display:none; }.memory-board { position:relative; z-index:3; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; width:min(520px,calc(100% - 40px)); height:calc(100% - 40px); max-height:345px; margin:20px auto; }.memory-card { display:grid; place-items:center; min-height:65px; border-radius:16px; border:1px solid #ffffff35; background:linear-gradient(145deg,#668a77,#476a5d); color:#e0edc6; font-size:32px; box-shadow:0 4px 0 #183e35; transition:transform .16s,background .16s; padding:8px; }.memory-card:hover:not(:disabled) { transform:translateY(-3px); background:#7b9983; }.memory-card.is-revealed { background:#fff9e7; box-shadow:0 3px 0 #ddcc9e; transform:rotateY(0); }.memory-card.is-matched { background:#d8ead5; box-shadow:none; border-color:#bedab7; opacity:.85; }.memory-card:disabled { cursor:default; }.game-breakout { height:auto; min-height:400px; background:#29344f; }.game-breakout:has(.rally-board:not([hidden])) { min-height:0; }.rally-board { position:relative; z-index:3; width:100%; }.rally-board canvas { display:block; width:min(100%,720px); margin:0 auto; height:auto; touch-action:none; outline-offset:-4px; }.rally-board canvas:focus-visible { outline:2px solid #b8d9d0; }.rally-controls { display:flex; align-items:center; justify-content:center; gap:12px; padding:12px; background:#202b43; }.rally-controls button { padding:9px 15px; border-radius:12px; font-size:.85rem; background:#edf1dc; color:#304637; }.rally-controls>span { color:#f8e4b0; font-size:.8rem; font-variant-numeric:tabular-nums; }.practice-actions { padding:0 0 24px; }.practice-actions button { margin:0 10px 8px 0; }.arcade-records { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:35px; padding:28px; border:1px solid #e1d8ea; border-radius:22px; background:#f8f4fc; margin:0 0 32px; }.arcade-records h2 { font-size:1.25rem; margin:8px 0; }.arcade-records p { font-size:.85rem; color:#81728f; line-height:1.6; }.arcade-records ol { list-style:none; padding:0; margin:0; }.arcade-records li { display:flex; align-items:center; gap:15px; padding:12px 0; border-bottom:1px solid #e8deee; }.arcade-records li:last-child { border:0; }.arcade-records li>span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#e9ddf4; color:#85639d; font-size:.8rem; }.arcade-records strong { font-variant-numeric:tabular-nums; color:#5c4376; font-size:1.15rem; }.arcade-records small { margin-left:auto; color:#93819f; }.arcade-records .record-empty { font-size:.85rem; color:#9681a5; padding:20px 0; }
@media(max-width:640px) { .game-picker { gap:8px; }.game-choice { padding:13px 10px; border-radius:16px; gap:5px; }.game-choice strong { font-size:.85rem; }.game-choice small { font-size:.7rem; }.game-choice em { font-size:.65rem; }.game-choice>span { font-size:27px; }.game-instruments { gap:8px; }.game-clock { font-size:.75rem; }.machine-top .game-title { font-size:.75rem; }.memory-board { gap:8px; width:calc(100% - 24px); height:calc(100% - 24px); margin:12px auto; }.memory-card { border-radius:12px; font-size:27px; }.rally-controls { gap:8px; flex-wrap:wrap; }.rally-controls>span { flex-basis:100%; text-align:center; }.arcade-records { grid-template-columns:1fr; gap:12px; padding:22px; }.practice-actions button { width:100%; }.game-breakout { min-height:330px; } }
@media(prefers-reduced-motion:reduce) { .memory-card { transition:none; } }