/* Shared non-game controls: web, iPad and the iPhone entry point. Game-specific
   paper cards / timers / voting colors remain owned by their game themes. */
:root { --mj-shell-button: #fff4e3; --mj-shell-button-ink: #133441; }
html:not(.mobile-shell) #main-menu :is(.btn-mm-store, .btn-mm-settings, .btn-mm-questions, .btn-mm-signin, .btn-mm-mute) {
  background: var(--mj-shell-button); color: var(--mj-shell-button-ink);
  text-shadow: none; -webkit-text-stroke: 0; outline: 0;
  border: 1px solid #fff9ef; box-shadow: 0 3px 0 #d8cdbb, 0 10px 24px #00111c26;
}
html:not(.mobile-shell):not([data-appearance="light"]) :is(#settings-overlay, #cqhub-overlay, #history-overlay, #admin-overlay) {
  background: linear-gradient(#03233365, #03233365), url('/assets/home-bg-layer.webp') center / cover no-repeat #032333;
}
html:not(.mobile-shell) #settings-overlay .timer-pill:not(.selected) {
  background: var(--mj-shell-button); color: var(--mj-shell-button-ink); border-color: #fff9ef;
}
html:not(.mobile-shell) #settings-overlay .timer-pill:not(.selected) .tp-sub { color: #60737a; }
html:not(.mobile-shell) #main-menu .btn-mm-play {
  color: #133441; text-shadow: none; -webkit-text-stroke: 0; outline: 0;
  border: 1px solid #ffbf3d; box-shadow: 0 4px 0 #a36700, 0 12px 28px #00111c26;
}
html:not(.mobile-shell) :is(#settings-overlay, #cqhub-overlay, #history-overlay, #admin-overlay) .settings-topbar .btn-back {
  width: auto; min-width: 96px; height: 48px; min-height: 48px;
  padding: 0 20px; margin: 0; border: 0; border-radius: 16px;
  background: var(--mj-shell-button); color: var(--mj-shell-button-ink);
  font-size: 16px; line-height: 1.5; text-shadow: none; filter: none;
  box-shadow: 0 3px 0 #d8cdbb; overflow: visible;
}
html:not(.mobile-shell) #settings-overlay :is(.btn-fullscreen, .btn-account-history, .btn-mode-switch) {
  background: var(--mj-shell-button); color: var(--mj-shell-button-ink);
  text-shadow: none; border-color: #fff9ef;
}
html:not(.mobile-shell) #cqhub-overlay .cqhub-card-cta {
  background: var(--mj-shell-button); color: var(--mj-shell-button-ink); border-color: #fff9ef;
}
html .native-mode-option {
  background: #142c3d; color: #fff2db;
  border: 1px solid #ffffff16; border-radius: 20px;
  box-shadow: 0 5px 18px #00111c20;
}
html .native-mode-option:hover { background: #193548; border-color: var(--mode-accent); }
html .native-mode-option .native-mode-option-title { color: var(--mode-accent); }
html .native-mode-option .native-mode-option-sub { color: #acbdc6; }
html .native-mode-option .native-mode-option-icon { color: var(--mode-accent); background: var(--mode-icon-bg); }
html .native-mode-option .native-mode-option-arrow { color: var(--mode-accent); }
/* Preparation panels use the same warm paper as the home buttons on every
   screen size. Scope the ink with its surface, never with the whole overlay. */
html:not(.mobile-shell) #settings-overlay :is(.toggle-row, .vol-row, .how-to-card),
html:not(.mobile-shell) #cqhub-overlay :is(.cqhub-card, .cqhub-composer, .cqhub-row, .cqhub-locked, .cqhub-share-row) {
  background: var(--mj-shell-button); color: var(--mj-shell-button-ink);
  border-color: #fff9ef; box-shadow: 0 6px 20px #00111c20;
}
html:not(.mobile-shell) #settings-overlay :is(.toggle-label, .vol-label, .htc-name),
html:not(.mobile-shell) #cqhub-overlay :is(.cqhub-card-name, .cqhub-row-text, .cqhub-share-label, .cqhub-percent-label, .cqhub-percent-suffix) {
  color: var(--mj-shell-button-ink); text-shadow: none;
}
html:not(.mobile-shell) #settings-overlay :is(.vol-pct, .how-to-card p),
html:not(.mobile-shell) #cqhub-overlay :is(.cqhub-card-desc, .cqhub-card-count, .cqhub-share-hint, .cqhub-bulk-hint, .cqhub-locked-text) { color: #576d75; }
html:not(.mobile-shell) #cqhub-overlay :is(textarea, .cqhub-row-text-edit, .cqhub-percent-row input[type="number"], .cqhub-comp-tab) {
  background: #fffaf2; color: #133441; border-color: #13344130;
}
html:not(.mobile-shell) #cqhub-overlay .cqhub-comp-tab.is-on { background: #f3a400; color: #133441; border-color: #f3a400; }
html:not(.mobile-shell) #cqhub-overlay .cqhub-card-cta { border-color: #13344130; box-shadow: none; }
html #settings-overlay .vol-row.muted { opacity: 1; }
html #settings-overlay .vol-row.muted .vol-slider { opacity: .45; }
html #settings-overlay input[type="range"] { background: #13344118; }
html #settings-overlay .toggle-track:not(.on) { background: #13344135; border-color: #13344125; }
html #settings-overlay .btn-account-history .bah-arrow { color: #576d75; }
html:not(.mobile-shell) #settings-overlay .timer-pill.selected { color: #133441; box-shadow: none; }
html:not(.mobile-shell) #settings-overlay .timer-pill.selected .tp-sub { color: #133441; }
/* Dark Settings should feel like part of the room, with compact controls
   and restrained contrast rather than a stack of bright white cards. */
html:not([data-appearance="light"]):not(.mobile-shell) #settings-overlay :is(.toggle-row, .vol-row, .how-to-card, .timer-pill:not(.selected), .btn-fullscreen, .btn-account-history, .btn-mode-switch) {
  background: #103243; color: #eee9de; border: 1px solid #b8d8e21c; box-shadow: none;
}
html:not([data-appearance="light"]):not(.mobile-shell) #settings-overlay :is(.toggle-label, .vol-label, .htc-name) { color: #eee9de; }
html:not([data-appearance="light"]):not(.mobile-shell) #settings-overlay :is(.vol-pct, .how-to-card p, .tp-sub) { color: #a8bbc2; }
@media (prefers-reduced-motion: reduce) {
  html :is(.native-mode-option, #main-menu button) { transition: none; }
}

/* Reference navigation: rounded ocean-blue controls with clear white ink. */
html :is(#back-btn, #gear-btn, #room-code-btn, #fullscreen-btn),
html #main-menu :is(.btn-mm-store, .btn-mm-settings, .btn-mm-questions, .btn-mm-signin, .btn-mm-mute),
html :is(#settings-overlay, #cqhub-overlay, #history-overlay, #admin-overlay) .settings-topbar .btn-back {
  background: #204f6b; color: #fff; border: 1px solid #527d96;
  border-radius: 20px; text-shadow: 0 2px 1px #102e41; -webkit-text-stroke: 0;
  box-shadow: 0 3px 0 #103044, 0 8px 18px #00111c20;
}
html :is(#back-btn, #gear-btn, #room-code-btn, #fullscreen-btn) { min-height: 48px; min-width: 48px; }
html #fullscreen-btn { width: 48px; height: 48px; padding: 10px; border-radius: 16px; }
html[data-appearance="light"] :is(#settings-overlay, #cqhub-overlay, #history-overlay, #admin-overlay) { background-color: #eaf5ff; }
html[data-appearance="light"] .native-mode-option { background: #f3f9ff; border-color: #a6c5dc; color: #17394e; }
html[data-appearance="light"] .native-mode-option .native-mode-option-sub { color: #496477; }
html[data-appearance="light"] .native-mode-option .native-mode-option-title { color: #17394e; }

html:not(.mobile-shell) #main-menu :is(.btn-mm-store, .btn-mm-settings, .btn-mm-questions, .btn-mm-signin, .btn-mm-mute),
html:not(.mobile-shell) :is(#settings-overlay, #cqhub-overlay, #history-overlay, #admin-overlay) .settings-topbar .btn-back {
  background: #204f6b; color: #fff; border: 1px solid #527d96;
  border-radius: 20px; text-shadow: 0 2px 1px #102e41; -webkit-text-stroke: 0;
  box-shadow: 0 3px 0 #103044, 0 8px 18px #00111c20;
}
html[data-appearance="light"] { --mj-shell-button: #f3f9ff; --mj-shell-button-ink: #17394e; }
/* Home keeps the white secondary actions approved against the blue artwork. */
html:not(.mobile-shell) #main-menu :is(.btn-mm-store, .btn-mm-settings, .btn-mm-questions, .btn-mm-signin, .btn-mm-mute, .btn-mm-join) {
  background: #f3f9ff; color: #204f6b; border-color: #d9e9f5;
  text-shadow: none; box-shadow: 0 3px 0 #afc5d5, 0 8px 18px #00111c20;
}