/* RuneLatch shared accessibility and appearance layer.
   Dark remains the default. A saved user choice can switch every page to light. */

html {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;

  --bg: #f3eee5;
  --bg-2: #e9e1d4;
  --deep: #eee6da;
  --panel: #fffaf2;
  --panel2: #f1e8db;
  --panel-solid: #fffaf2;
  --panel-2: #f1e8db;
  --stone: #fffaf2;
  --stone-2: #eee5d8;

  --text: #211b14;
  --ink: #211b14;
  --muted: #655d52;

  --line: rgba(57, 45, 29, .22);
  --line-strong: rgba(135, 91, 24, .52);
  --edge: #8f8372;
  --edge-soft: rgba(57, 45, 29, .17);

  --amber: #9a6519;
  --amber-2: #70470f;
  --amber-bright: #70470f;
  --gold: #8b5a16;
  --gold2: #70470f;
  --gold-bright: #70470f;
  --teal: #08766f;
  --cyan: #08766f;
  --violet: #684cb0;
  --blue: #25657a;

  --danger: #a23542;
  --bad: #a23542;
  --red: #a74940;
  --success: #237448;
  --good: #237448;
  --green: #237448;

  --shadow: 0 20px 60px rgba(59, 43, 22, .17);
  --guide-ink: #211b14;
  --guide-muted: #655d52;
  --guide-line: #cbbda9;
  --guide-gold: #8b5a16;
  --guide-good: #237448;
}

.rl-theme-toggle {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 100000;
  min-width: 126px;
  border: 1px solid rgba(240, 184, 90, .48);
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(12, 17, 27, .96);
  color: #f6f2e8;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
  font: 800 13px/1.2 system-ui, sans-serif;
  letter-spacing: .01em;
  cursor: pointer;
  backdrop-filter: blur(14px);
}

.rl-theme-toggle:hover,
.rl-theme-toggle:focus-visible {
  border-color: #f0b85a;
  outline: 3px solid rgba(240, 184, 90, .18);
  outline-offset: 2px;
}

html[data-theme="light"] .rl-theme-toggle {
  background: rgba(255, 250, 242, .97);
  color: #211b14;
  border-color: rgba(112, 71, 15, .48);
  box-shadow: 0 12px 30px rgba(59, 43, 22, .2);
}

/* Clear, consistent stage-view choice on old and new puzzle runtimes. */
.rl-party-actions,
.rl-cloud-actions {
  gap: 8px !important;
}

.rl-party-actions button.rl-mode-choice,
.rl-cloud-actions button.rl-mode-choice {
  min-height: 40px;
  border: 2px solid rgba(255, 255, 255, .25) !important;
  border-radius: 10px !important;
  padding: 9px 13px !important;
  background: #171d27 !important;
  color: #f7f3ea !important;
  opacity: 1 !important;
  font: 800 12px/1.2 system-ui, sans-serif !important;
  letter-spacing: .015em;
  cursor: pointer !important;
  box-shadow: none !important;
}

.rl-party-actions button.rl-mode-choice:hover,
.rl-cloud-actions button.rl-mode-choice:hover,
.rl-party-actions button.rl-mode-choice:focus-visible,
.rl-cloud-actions button.rl-mode-choice:focus-visible {
  border-color: #f0c473 !important;
  outline: 3px solid rgba(240, 196, 115, .15);
  outline-offset: 1px;
}

.rl-party-actions button.rl-mode-choice.active,
.rl-cloud-actions button.rl-mode-choice.active,
.rl-party-actions button.rl-mode-choice[aria-pressed="true"],
.rl-cloud-actions button.rl-mode-choice[aria-pressed="true"] {
  border-color: #8be2d4 !important;
  background: #176d68 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 2px rgba(116, 216, 203, .16), 0 8px 20px rgba(0, 0, 0, .2) !important;
}

.rl-party-actions button.rl-mode-choice.active::before,
.rl-cloud-actions button.rl-mode-choice.active::before,
.rl-party-actions button.rl-mode-choice[aria-pressed="true"]::before,
.rl-cloud-actions button.rl-mode-choice[aria-pressed="true"]::before {
  content: "✓ ";
}

.rl-party-actions button.rl-mode-choice:disabled,
.rl-cloud-actions button.rl-mode-choice:disabled {
  opacity: 1 !important;
  cursor: default !important;
}

.rl-party-navigation {
  border-width: 2px !important;
}

.rl-party-navigation strong,
#runelatch-cloud-bar strong {
  color: #f7f3ea !important;
}

html[data-theme="light"] .rl-party-actions button.rl-mode-choice,
html[data-theme="light"] .rl-cloud-actions button.rl-mode-choice {
  background: #fffaf2 !important;
  color: #211b14 !important;
  border-color: rgba(57, 45, 29, .35) !important;
}

html[data-theme="light"] .rl-party-actions button.rl-mode-choice.active,
html[data-theme="light"] .rl-cloud-actions button.rl-mode-choice.active,
html[data-theme="light"] .rl-party-actions button.rl-mode-choice[aria-pressed="true"],
html[data-theme="light"] .rl-cloud-actions button.rl-mode-choice[aria-pressed="true"] {
  background: #0b7069 !important;
  color: #ffffff !important;
  border-color: #07534e !important;
}

/* Shared light palette for the main RuneLatch application and all puzzle pages. */
html[data-theme="light"] body {
  color: var(--text, var(--ink, #211b14)) !important;
  background:
    radial-gradient(circle at 15% 7%, rgba(154, 101, 25, .13), transparent 28rem),
    radial-gradient(circle at 86% 18%, rgba(8, 118, 111, .09), transparent 30rem),
    linear-gradient(180deg, #faf7f1 0%, #f1eadf 58%, #e8dfd2 100%) !important;
}

html[data-theme="light"] body::before,
html[data-theme="light"] body:before {
  opacity: .08 !important;
  mix-blend-mode: multiply !important;
}

html[data-theme="light"] :where(
  .nav,
  .topbar,
  .demo-banner,
  .panel,
  .feature-card,
  .puzzle-card,
  .demo-card,
  .auth-card,
  .dashboard-main,
  .sidebar,
  .control-panel,
  .session-stage,
  .admin-form,
  .admin-preview,
  .modal,
  .modal-card,
  .dm-guide,
  .guide-callout,
  .guide-box,
  .stage-frame,
  .stage-card,
  .witness,
  .eye-card,
  .lesson,
  .move-card,
  .seal-card,
  .prism-card,
  .court-panel,
  .board-panel,
  .logic-panel,
  .navigator,
  .ritual,
  .turn-card,
  .constellation,
  .selection-tray,
  .scale-wrap,
  .observatory,
  .star-map,
  .relic-card,
  .lantern,
  .morse-lantern,
  .perspective-card,
  .cipher-block,
  .cloud-sync,
  .cloud-reconnect,
  .rl-party-navigation,
  #runelatch-cloud-bar,
  .rl-feedback-card
) {
  background-color: #fffaf2 !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(239, 230, 216, .78)) !important;
  border-color: rgba(57, 45, 29, .22) !important;
  color: #211b14 !important;
  box-shadow: var(--shadow) !important;
}

html[data-theme="light"] :where(
  .nav,
  .topbar,
  .demo-banner,
  .cloud-sync,
  .rl-party-navigation,
  #runelatch-cloud-bar
) {
  backdrop-filter: blur(14px);
}

html[data-theme="light"] :where(
  .subtitle,
  .copy,
  .lead,
  .section-copy,
  .hero-copy,
  .brand-sub,
  .nav-link,
  .rl-party-status,
  .rl-cloud-status,
  .message,
  .testimony,
  .move-lore,
  .move-notation,
  .seal-sub,
  .relic-line,
  .modal-note,
  .cloud-sync span,
  .dm-guide p,
  .dm-guide li,
  .guide-table td,
  .footer,
  .text-button
) {
  color: #655d52 !important;
}

html[data-theme="light"] :where(
  h1, h2, h3, h4,
  .brand-name,
  .brand,
  .room-code,
  .cloud-room-code,
  .dm-guide strong,
  .guide-table th,
  .rl-party-navigation strong,
  #runelatch-cloud-bar strong
) {
  color: #211b14 !important;
  text-shadow: none !important;
}

html[data-theme="light"] :where(
  input,
  select,
  textarea,
  .input,
  .fake-input,
  .view-tab,
  .control,
  .mini,
  .queue,
  .secondary,
  .pill,
  .bearing-chip,
  .route-step,
  .slot,
  .prophecy
) {
  background: #fffdf8 !important;
  color: #211b14 !important;
  border-color: rgba(57, 45, 29, .25) !important;
}

html[data-theme="light"] :where(
  .section-alt,
  .player-row,
  .status-pill,
  .tag,
  .hint-item,
  .callout,
  .inscription,
  .cloud-hint,
  .guide-callout,
  .guide-box
) {
  background: rgba(139, 90, 22, .065) !important;
  border-color: rgba(57, 45, 29, .2) !important;
  color: #3e352a !important;
}

html[data-theme="light"] .nav {
  background: rgba(250, 247, 241, .88) !important;
}

html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link.active {
  background: rgba(57, 45, 29, .075) !important;
  color: #211b14 !important;
}

html[data-theme="light"] .btn:not(.btn-primary):not(.btn-danger),
html[data-theme="light"] .icon-btn {
  background: #fffaf2 !important;
  color: #211b14 !important;
  border-color: rgba(57, 45, 29, .24) !important;
}

html[data-theme="light"] .btn-danger,
html[data-theme="light"] .danger {
  background: #fae5e3 !important;
  color: #8e2d36 !important;
  border-color: rgba(162, 53, 66, .3) !important;
}

html[data-theme="light"] .modal-backdrop,
html[data-theme="light"] .rl-feedback-overlay {
  background: rgba(46, 38, 29, .48) !important;
}

html[data-theme="light"] .toast {
  background: #fffaf2 !important;
  color: #211b14 !important;
}

html[data-theme="light"] .sq.light {
  background: #eee3d2 !important;
}

html[data-theme="light"] .sq.dark {
  background: #b9a991 !important;
}

html[data-theme="light"] .lock-overlay {
  background: rgba(239, 230, 216, .88) !important;
}

html[data-theme="light"] .rl-feedback-field input,
html[data-theme="light"] .rl-feedback-field select,
html[data-theme="light"] .rl-feedback-field textarea {
  background: #fffdf8 !important;
  color: #211b14 !important;
  border-color: rgba(57, 45, 29, .25) !important;
}

html[data-theme="light"] .rl-feedback-actions button {
  background: #eee5d8 !important;
  color: #211b14 !important;
  border-color: rgba(57, 45, 29, .25) !important;
}

html[data-theme="light"] .rl-feedback-actions button[type="submit"] {
  background: #176d68 !important;
  color: #fff !important;
}

html[data-theme="light"] .rl-party-navigation,
html[data-theme="light"] #runelatch-cloud-bar {
  background: rgba(255, 250, 242, .97) !important;
}

html[data-theme="light"] .rl-party-navigation.staying {
  background: #fff5df !important;
  border-color: rgba(139, 90, 22, .42) !important;
}

@media (max-width: 720px) {
  .rl-theme-toggle {
    left: 9px;
    bottom: 9px;
    min-width: 112px;
    padding: 9px 12px;
  }

  .rl-party-actions button.rl-mode-choice,
  .rl-cloud-actions button.rl-mode-choice {
    flex: 1 1 170px;
  }
}

@media print {
  .rl-theme-toggle {
    display: none !important;
  }
}


/* Phase 0.5.0-beta regression: lower-glare light mode.
   The original cream palette was too bright on puzzle pages. */
html[data-theme="light"] {
  --bg: #c8d0d6;
  --bg-2: #bcc6cd;
  --deep: #c2cbd1;
  --panel: #e3e8eb;
  --panel2: #d7dee3;
  --panel-solid: #e3e8eb;
  --panel-2: #d7dee3;
  --stone: #e3e8eb;
  --stone-2: #d3dbe0;
  --text: #17212a;
  --ink: #17212a;
  --muted: #4c5964;
  --line: rgba(25, 42, 54, .25);
  --line-strong: rgba(57, 84, 104, .55);
  --shadow: 0 18px 50px rgba(30, 47, 60, .18);
}
html[data-theme="light"] body {
  color: #17212a !important;
  background:
    radial-gradient(circle at 15% 7%, rgba(79, 111, 132, .12), transparent 28rem),
    radial-gradient(circle at 86% 18%, rgba(42, 116, 111, .09), transparent 30rem),
    linear-gradient(180deg, #d8dfe4 0%, #cbd4da 58%, #bec8cf 100%) !important;
}
html[data-theme="light"] :where(
  .nav,.topbar,.demo-banner,.panel,.feature-card,.puzzle-card,.demo-card,.auth-card,
  .dashboard-main,.sidebar,.control-panel,.session-stage,.admin-form,.admin-preview,
  .modal,.modal-card,.dm-guide,.guide-callout,.guide-box,.stage-frame,.stage-card,
  .witness,.eye-card,.lesson,.move-card,.seal-card,.prism-card,.court-panel,.board-panel,
  .logic-panel,.navigator,.ritual,.turn-card,.constellation,.selection-tray,.scale-wrap,
  .observatory,.star-map,.relic-card,.lantern,.morse-lantern,.perspective-card,.cipher-block,
  .cloud-sync,.cloud-reconnect,.rl-party-navigation,#runelatch-cloud-bar,.rl-feedback-card
) {
  background-color: #e3e8eb !important;
  background-image: linear-gradient(145deg, rgba(255,255,255,.38), rgba(197,207,214,.34)) !important;
  border-color: rgba(25,42,54,.24) !important;
  color: #17212a !important;
}
html[data-theme="light"] :where(input,select,textarea,.input,.fake-input,.view-tab,.control,.mini,.queue,.secondary,.pill,.bearing-chip,.route-step,.slot,.prophecy) {
  background: #f0f3f5 !important;
  color: #17212a !important;
  border-color: rgba(25,42,54,.28) !important;
}
html[data-theme="light"] :where(.subtitle,.copy,.lead,.section-copy,.hero-copy,.brand-sub,.nav-link,.rl-party-status,.rl-cloud-status,.message,.testimony,.move-lore,.move-notation,.seal-sub,.relic-line,.modal-note,.cloud-sync span,.dm-guide p,.dm-guide li,.guide-table td,.footer,.text-button) {
  color: #4c5964 !important;
}
html[data-theme="light"] .rl-theme-toggle {
  background: #273640 !important;
  color: #f4f7f8 !important;
  border-color: rgba(113, 154, 180, .7) !important;
}
html[data-theme="light"] .rl-feedback-launcher,
html[data-theme="light"] .feedback-launcher {
  background: #273640 !important;
  color: #f4f7f8 !important;
  border-color: rgba(162, 78, 86, .65) !important;
}

/* Regression follow-up 2026-08-11: light shell + dark puzzle canvas.
   Puzzle mechanics were designed for dark surfaces; forcing every nested puzzle
   component to a pale background destroyed contrast. Light mode now keeps the
   surrounding page low-glare while preserving a readable dark play surface. */
html[data-theme="light"] body.runelatch-puzzle-page {
  --ink: #f3efe6;
  --text: #f3efe6;
  --muted: #b9c1c7;
  --bright: #f2d99a;
  --gold: #d8b76f;
  --gold2: #f2d99a;
  --amber: #d9a84f;
  --amber-2: #f0c473;
  --teal: #74d8cb;
  --cyan: #74d8cb;
  --violet: #aa96e8;
  --blue: #8eb4d8;
  --green: #9bcaa9;
  --good: #91b591;
  --success: #91b591;
  --bad: #d18c83;
  --danger: #d18c83;
  --red: #d18c83;
  --line: rgba(238, 242, 245, .18);
  --line-strong: rgba(216, 183, 111, .5);
  --panel: #14191f;
  --panel2: #1b222b;
  --panel-solid: #14191f;
  --panel-2: #1b222b;
  --deep: #080b0f;
  color: #17212a !important;
  background:
    radial-gradient(circle at 15% 8%, rgba(67, 93, 111, .11), transparent 28rem),
    radial-gradient(circle at 86% 18%, rgba(35, 106, 102, .07), transparent 30rem),
    linear-gradient(180deg, #cbd3d8 0%, #bbc5cb 58%, #adb8bf 100%) !important;
}

html[data-theme="light"] body.runelatch-puzzle-page .hero,
html[data-theme="light"] body.runelatch-puzzle-page .hero :where(h1,h2,h3,p,.subtitle) {
  color: #17212a !important;
  text-shadow: none !important;
}

html[data-theme="light"] body.runelatch-puzzle-page .hero .eyebrow {
  color: #8d5c16 !important;
}

html[data-theme="light"] body.runelatch-puzzle-page :where(
  .panel,
  .stage-frame,
  .stage-card,
  .witness,
  .eye-card,
  .lesson,
  .move-card,
  .seal-card,
  .prism-card,
  .court-panel,
  .board-panel,
  .ledger-panel,
  .logic-panel,
  .navigator,
  .ritual,
  .turn-card,
  .constellation,
  .selection-tray,
  .scale-wrap,
  .observatory,
  .star-map,
  .relic-card,
  .lantern,
  .morse-lantern,
  .perspective-card,
  .cipher-block,
  .conductor,
  .fragment,
  .singer,
  .scale,
  .sequence-tray,
  .word-chip,
  .voice-button,
  .final-seal,
  .protection,
  .prophecy,
  .slot
) {
  background-color: #12171d !important;
  background-image: linear-gradient(145deg, rgba(255,255,255,.035), rgba(5,8,12,.18)) !important;
  border-color: rgba(235, 239, 242, .18) !important;
  color: #f3efe6 !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .28) !important;
}

html[data-theme="light"] body.runelatch-puzzle-page :where(
  .panel,
  .stage-frame,
  .stage-card,
  .witness,
  .eye-card,
  .lesson,
  .move-card,
  .seal-card,
  .prism-card,
  .court-panel,
  .board-panel,
  .ledger-panel,
  .logic-panel,
  .navigator,
  .ritual,
  .turn-card,
  .constellation,
  .selection-tray,
  .scale-wrap,
  .observatory,
  .star-map,
  .relic-card,
  .lantern,
  .morse-lantern,
  .perspective-card,
  .cipher-block,
  .conductor,
  .fragment,
  .singer
) :where(h1,h2,h3,h4,strong) {
  color: #f3efe6 !important;
  text-shadow: none !important;
}

html[data-theme="light"] body.runelatch-puzzle-page :where(
  .panel,
  .stage-frame,
  .stage-card,
  .witness,
  .eye-card,
  .lesson,
  .move-card,
  .seal-card,
  .prism-card,
  .court-panel,
  .board-panel,
  .ledger-panel,
  .logic-panel,
  .navigator,
  .ritual,
  .turn-card,
  .constellation,
  .observatory,
  .relic-card,
  .perspective-card,
  .cipher-block,
  .conductor,
  .fragment,
  .singer
) :where(.subtitle,.copy,.lead,.section-copy,.hero-copy,.message,.testimony,.move-lore,.move-notation,.seal-sub,.relic-line,.modal-note,p,small) {
  color: #b9c1c7 !important;
}

html[data-theme="light"] body.runelatch-puzzle-page :where(
  input,select,textarea,.input,.field,.fake-input,.view-tab,.control,.mini,.queue,
  .secondary,.pill,.bearing-chip,.route-step
) {
  background: #0e141a !important;
  color: #f3efe6 !important;
  border-color: rgba(235,239,242,.22) !important;
}

html[data-theme="light"] body.runelatch-puzzle-page :where(input,textarea)::placeholder {
  color: #87929b !important;
  opacity: 1;
}

html[data-theme="light"] body.runelatch-puzzle-page .eyebrow,
html[data-theme="light"] body.runelatch-puzzle-page .order-badge,
html[data-theme="light"] body.runelatch-puzzle-page .access-badge {
  color: #e0b85f !important;
}

html[data-theme="light"] body.runelatch-puzzle-page .rl-party-navigation,
html[data-theme="light"] body.runelatch-puzzle-page #runelatch-cloud-bar,
html[data-theme="light"] body.runelatch-puzzle-page .cloud-sync {
  background: rgba(230, 235, 238, .97) !important;
  color: #17212a !important;
  border-color: rgba(25,42,54,.28) !important;
  box-shadow: 0 12px 30px rgba(30,47,60,.16) !important;
}

html[data-theme="light"] body.runelatch-puzzle-page .rl-party-navigation :where(strong,span),
html[data-theme="light"] body.runelatch-puzzle-page #runelatch-cloud-bar :where(strong,span),
html[data-theme="light"] body.runelatch-puzzle-page .cloud-sync :where(strong,span) {
  color: #24323d !important;
}

html[data-theme="light"] body.runelatch-puzzle-page .rl-party-actions button.rl-mode-choice,
html[data-theme="light"] body.runelatch-puzzle-page .rl-cloud-actions button.rl-mode-choice {
  background: #f4f6f7 !important;
  color: #17212a !important;
  border-color: #8d9aa4 !important;
}

html[data-theme="light"] body.runelatch-puzzle-page .rl-party-actions button.rl-mode-choice.active,
html[data-theme="light"] body.runelatch-puzzle-page .rl-cloud-actions button.rl-mode-choice.active,
html[data-theme="light"] body.runelatch-puzzle-page .rl-party-actions button.rl-mode-choice[aria-pressed="true"],
html[data-theme="light"] body.runelatch-puzzle-page .rl-cloud-actions button.rl-mode-choice[aria-pressed="true"] {
  background: #176d68 !important;
  color: #fff !important;
  border-color: #0f5753 !important;
}

/* Light mode design pass 2 — 2026-08-11
   The puzzle itself remains theatrical/dark. Light mode only lightens the page around it. */
html[data-theme="light"] body.runelatch-puzzle-page .topbar {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  color: #25221e !important;
}

html[data-theme="light"] body.runelatch-puzzle-page .topbar :where(.brand,strong,span) {
  color: #3d3933 !important;
  text-shadow: none !important;
}

html[data-theme="light"] body.runelatch-puzzle-page .topbar .pill,
html[data-theme="light"] body.runelatch-puzzle-page .topbar button {
  background: #151b22 !important;
  background-image: none !important;
  color: #f4efe6 !important;
  border-color: rgba(21,27,34,.76) !important;
  box-shadow: 0 7px 18px rgba(30,36,40,.14) !important;
}

/* Live-room and party controls stay dark, cohesive and readable. */
html[data-theme="light"] body.runelatch-puzzle-page :where(
  #runelatch-cloud-bar,
  .cloud-sync,
  .cloud-reconnect,
  .rl-party-navigation
) {
  background: #151b22 !important;
  background-image: linear-gradient(145deg, rgba(255,255,255,.025), rgba(0,0,0,.10)) !important;
  color: #f2eee6 !important;
  border-color: rgba(215,185,113,.30) !important;
  box-shadow: 0 13px 30px rgba(25,31,36,.18) !important;
}

html[data-theme="light"] body.runelatch-puzzle-page :where(
  #runelatch-cloud-bar,
  .cloud-sync,
  .cloud-reconnect,
  .rl-party-navigation
) :where(strong,span,code,.rl-party-status,.rl-cloud-status) {
  color: #d9dde0 !important;
}

html[data-theme="light"] body.runelatch-puzzle-page :where(
  #runelatch-cloud-bar,
  .cloud-sync,
  .cloud-reconnect,
  .rl-party-navigation
) strong {
  color: #f5f0e7 !important;
}

html[data-theme="light"] body.runelatch-puzzle-page #runelatch-cloud-bar code,
html[data-theme="light"] body.runelatch-puzzle-page .cloud-room-code {
  color: #f0c979 !important;
}

html[data-theme="light"] body.runelatch-puzzle-page :where(
  .rl-party-actions,
  .rl-cloud-actions
) :where(button,select),
html[data-theme="light"] body.runelatch-puzzle-page #runelatch-cloud-bar [data-rl-reconnect] {
  background: #202833 !important;
  background-image: none !important;
  color: #edf0f2 !important;
  border: 1px solid rgba(224,229,233,.20) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.runelatch-puzzle-page :where(
  .rl-party-actions,
  .rl-cloud-actions
) button.rl-mode-choice.active,
html[data-theme="light"] body.runelatch-puzzle-page :where(
  .rl-party-actions,
  .rl-cloud-actions
) button.rl-mode-choice[aria-pressed="true"] {
  background: #176d68 !important;
  color: #ffffff !important;
  border-color: #75d6c9 !important;
}

/* Hints, inscriptions and clue callouts must never inherit the light-mode brown-on-dark combination. */
html[data-theme="light"] body.runelatch-puzzle-page :where(
  .inscription,
  .cloud-hint,
  .rl-hint,
  .callout,
  .clue-panel,
  blockquote
) {
  background: rgba(10,14,19,.72) !important;
  background-image: none !important;
  color: #e9e3d9 !important;
  border-color: rgba(218,181,102,.48) !important;
  text-shadow: none !important;
}

html[data-theme="light"] body.runelatch-puzzle-page :where(
  .inscription,
  .cloud-hint,
  .rl-hint,
  .callout,
  .clue-panel,
  blockquote
) :where(p,span,div,li,em,strong,b) {
  color: inherit !important;
}

html[data-theme="light"] body.runelatch-puzzle-page .cloud-hint b,
html[data-theme="light"] body.runelatch-puzzle-page .rl-hint b {
  color: #f0c979 !important;
}

/* Puzzle cards/buttons should keep their original dark identity rather than pale control boxes. */
html[data-theme="light"] body.runelatch-puzzle-page :where(
  .view-tab,.control,.mini,.queue,.secondary,.bearing-chip,.route-step
) {
  background: #171e27 !important;
  background-image: none !important;
  color: #dfe4e7 !important;
  border-color: rgba(226,231,234,.18) !important;
}