/* Rate Lock: complete colour pairs and visible edges in both themes. */
.rr {
  --rr-control-face: #15283e;
  --rr-control-hover: #253e5b;
  --rr-control-edge: #7d94af;
  --rr-control-ink: #f0f5ff;
  --rr-control-accent: #b3d2ff;
  --rr-control-selected: #adcfff;
  --rr-control-selected-ink: #112340;
  --rr-control-disabled: #23354c;
  --rr-control-disabled-ink: #c0ccde;
  --rr-gold-edge: #e4c478;
}
:root:not([data-theme="dark"]) .rr {
  --rr-control-face: #fff;
  --rr-control-hover: #e7effb;
  --rr-control-edge: #6d829b;
  --rr-control-ink: #14243a;
  --rr-control-accent: #184f97;
  --rr-control-selected: #174f99;
  --rr-control-selected-ink: #fff;
  --rr-control-disabled: #e8edf3;
  --rr-control-disabled-ink: #465971;
  --rr-gold-edge: #76541f;
}
/* Gold is reserved for the main play and replay actions. */
body .rr :is(.rr-play,.rr-lock,.rr-btn.primary) {
  color: #14243a;
  background: linear-gradient(180deg,#f5dfa9,#dfbd75);
  border: 2px solid var(--rr-gold-edge);
  box-shadow: 0 4px 0 #76541f30, inset 0 1px #fff8;
  font-weight: 800;
  text-shadow: none;
  min-height: 52px;
  border-radius: 12px;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
body .rr :is(.rr-play,.rr-lock,.rr-btn.primary):hover:not(:disabled) {
  background: linear-gradient(180deg,#ffe9b5,#ebcc89);
  box-shadow: 0 4px 0 #76541f45, 0 0 0 2px #dfbd7533;
  transform: none;
}
body .rr :is(.rr-play,.rr-lock,.rr-btn.primary):active:not(:disabled) {
  background: #dfbd75;
  box-shadow: inset 0 2px 3px #76541f30;
  transform: translateY(1px);
}
/* Secondary controls remain unmistakably clickable on pale reading surfaces. */
body .rr :is(.rr-pause,.rr-focus,.rr-mute,.rr-topscore,.rr-btn.ghost,.rr-chip,.rr-sbtn:not(.main)) {
  color: var(--rr-control-ink);
  background: var(--rr-control-face);
  border: 2px solid var(--rr-control-edge);
  box-shadow: 0 2px 0 #14243a0c;
  font-weight: 700;
  min-height: 44px;
  line-height: 1.4;
}
body .rr :is(.rr-pause,.rr-focus,.rr-topscore,.rr-btn.ghost,.rr-chip) { border-radius: 10px; }
body .rr :is(.rr-mute,.rr-sbtn:not(.main)) { min-width: 44px; height: 44px; }
body .rr :is(.rr-mute,.rr-sbtn) svg { width: 20px; height: 20px; }
body .rr .rr-topscore { padding: 12px 15px; font-size: .9rem; }
body .rr .rr-chip { padding: 9px 12px; font-size: .875rem; }
body .rr :is(.rr-pause,.rr-focus,.rr-mute,.rr-topscore,.rr-btn.ghost,.rr-chip,.rr-sbtn:not(.main)):hover:not(:disabled) {
  color: var(--rr-control-accent);
  background: var(--rr-control-hover);
  border-color: var(--rr-control-accent);
  transform: none;
}
/* The selection has a filled face as well as its existing ARIA state. */
body .rr :is(.rr-chip[aria-checked="true"],.rr-focus[aria-pressed="true"],.rr-topscore[aria-expanded="true"]),
body .rr :is(.rr-chip[aria-checked="true"],.rr-focus[aria-pressed="true"],.rr-topscore[aria-expanded="true"]):hover:not(:disabled),
body .rr[data-state="paused"] .rr-pause:hover:not(:disabled),
body .rr[data-state="paused"] .rr-pause {
  color: var(--rr-control-selected-ink);
  background: var(--rr-control-selected);
  border-color: var(--rr-control-selected);
  box-shadow: none;
}
body .rr .rr-chip[aria-checked="true"]::before { content: "✓" / ""; margin-right: 6px; }
/* Mortgage/contact actions use a stable blue with white labels, including hover. */
body .rr :is(.rr-btn.blue,.rr-sbtn.main) {
  color: #fff;
  background: #174f99;
  border: 2px solid #174f99;
  font-weight: 700;
  min-height: 46px;
}
body .rr :is(.rr-btn.blue,.rr-sbtn.main):hover { color: #fff; background: #103b78; border-color: #103b78; }
/* Paused buttons remain readable while the dashed edge signals inactivity. */
body .rr :is(.rr-lock,.rr-btn):disabled {
  color: var(--rr-control-disabled-ink);
  background: var(--rr-control-disabled);
  border: 2px dashed var(--rr-control-edge);
  opacity: 1;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
body .rr :is(button,a,input):focus-visible {
  outline: 3px solid var(--rr-control-accent);
  outline-offset: 4px;
  box-shadow: 0 0 0 2px var(--rr-surface);
}
/* Keep game-entry buttons and the interactive teaser equally clear. */
body .game-promotion .gp-primary,
body .rate-lock-promo .btn-primary {
  color: #14243a!important;
  background: linear-gradient(180deg,#f5dfa9,#dfbd75);
  border: 2px solid #76541f;
  font-weight: 800;
  box-shadow: 0 3px 0 #76541f30;
  text-shadow: none;
}
[data-theme="dark"] body .game-promotion .gp-primary,
[data-theme="dark"] body .rate-lock-promo .btn-primary { border-color: #e4c478; }
body .game-promotion .gp-primary:hover,
body .rate-lock-promo-link:hover .btn-primary { background: #f5dfa9; color: #14243a!important; transform: none; }
body .game-promotion .gp-secondary { border: 2px solid var(--gp-ink); background: var(--gp-panel); color: var(--gp-ink); }
body .game-promotion .gp-level-list button { border-color: var(--gp-silver); min-height: 48px; font-size: .875rem; }
body .game-promotion .gp-level-list button[aria-pressed="true"] {
  color: #fff;
  background: #174f99;
  border-color: #174f99;
  box-shadow: inset 4px 0 #edce8a;
}
body .game-promotion .gp-level-list button[aria-pressed="true"] :is(span,b) { color: #fff; }
body :is(.gp-button,.rate-lock-promo-link,.gp-level-list button):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
  box-shadow: 0 0 0 2px var(--surface);
}
@media(prefers-reduced-motion:reduce) {
  body .rr :is(.rr-play,.rr-lock,.rr-btn) { transition: none; transform: none!important; }
}