/* Scoped to opted-in app documents; game colors and simulated login are exceptions. */
html[data-theme] {
  --background-dark: var(--md-sys-color-background); --background-darker: var(--md-sys-color-surface-container-low);
  --card-background: var(--md-sys-color-surface-container); --accent-blue: var(--md-sys-color-primary); --accent-green: var(--md-sys-color-primary);
  --bg: var(--md-sys-color-background); --bg-dark: var(--md-sys-color-background);
  --bg-primary: var(--md-sys-color-background); --bg-secondary: var(--md-sys-color-surface-container-low);
  --bg-tertiary: var(--md-sys-color-surface-container-high); --bg-card: var(--md-sys-color-surface-container);
  --card-bg: var(--md-sys-color-surface-container); --dark: var(--md-sys-color-surface-container);
  --text: var(--md-sys-color-on-surface); --text-main: var(--md-sys-color-on-surface);
  --text-primary: var(--md-sys-color-on-surface); --text-secondary: var(--md-sys-color-on-surface-variant);
  --text-muted: var(--tone-text-muted); --border-color: var(--md-sys-color-outline-variant);
  --border: var(--md-sys-color-outline-variant); --primary-color: var(--md-sys-color-primary);
  --primary: var(--md-sys-color-primary); --primary-hover: var(--md-sys-color-primary-container);
  --key-bg: var(--md-sys-color-surface-container-high); --key-highlight: var(--md-sys-color-primary-container);
  --shadow: var(--md-elev-1); --shadow-hover: var(--md-elev-2);
}
body[data-mrx-app] { margin: 0 !important; padding: 0 !important; display: block !important; min-height: 100dvh !important; height: auto !important; overflow: auto !important; background: var(--md-sys-color-background) !important; color: var(--md-sys-color-on-surface) !important; font-family: 'DM Sans',sans-serif !important; line-height: 1.6; }
body[data-mrx-app]::before { display: none; }
body[data-mrx-app]:not([data-mrx-preserve]) :is(p,span,label,div,li,a,button,input,textarea,select) { font-family: 'DM Sans',sans-serif; }
body[data-mrx-app]:not([data-mrx-preserve]) :is(h1,h2,h3,h4) { font-family: 'Outfit',sans-serif !important; letter-spacing: -.02em; color: var(--md-sys-color-on-surface); overflow-wrap: anywhere; }
body[data-mrx-app] > .container { width: min(1200px,calc(100% - 32px)) !important; max-width: 1200px; margin: 32px auto !important; }
body[data-mrx-app] #root { min-width: 0; }
body[data-mrx-app]:not([data-mrx-preserve]) :is(input:not([type="range"]):not([type="color"]):not([type="checkbox"]):not([type="radio"]),textarea,select) { color: var(--md-sys-color-on-surface) !important; background: var(--md-sys-color-surface-container-low) !important; border-color: var(--md-sys-color-outline) !important; border-radius: 12px; font-size: 16px; max-width: 100%; }
body[data-mrx-app]:not([data-mrx-preserve]) :is(input,textarea)::placeholder { color: var(--tone-text-muted) !important; opacity: 1; }
body[data-mrx-app] :focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 3px; }
body[data-mrx-app]:not([data-mrx-preserve]) button:not(.mrx-theme-toggle):not(.MuiIconButton-root):not([data-mrx-game-color]) { font-family: 'DM Sans',sans-serif !important; border-radius: 999px; min-height: 44px; cursor: pointer; }
body[data-mrx-app]:not([data-mrx-preserve]) :is(.btn-primary,.btn-start,.btn-calculate,.generate-btn,.start-button,.draw-button,.analyze-button,.submit-button,.upload-btn,.capture-btn,.button-primary) { background: var(--md-sys-color-primary) !important; color: var(--md-sys-color-on-primary) !important; background-image: none !important; }
body[data-mrx-app] button:disabled { cursor: not-allowed !important; }
body[data-mrx-app]:not([data-mrx-preserve]) :is(.card,.panel,.question-container,.question-card,.player-setup-container,.instructions-content,.active-cards-section,.poker-container,.shape-card,.calculator-section,.input-section,.preview-section,.info-card,.info-cards > div,.solution-section,.explanation-box,.research-section,.word-item,.summary-card,.stats-container,.control-panel,.story-card,.stat) { background: var(--md-sys-color-surface-container) !important; color: var(--md-sys-color-on-surface) !important; border-color: var(--md-sys-color-outline-variant) !important; border-radius: 28px; box-shadow: var(--md-elev-1); }
body[data-mrx-app]:not([data-mrx-preserve]) :is(.question,.question-text,.answer-text,.option,.answer-option,.shape-name,.shape-description,.description,.form-group label,.result-label,.word-german,.stat-label,.instructions-text) { color: var(--md-sys-color-on-surface-variant); }
/* Tailwind scaffold utilities. Deliberately do not target board pieces or status hues. */
body[data-mrx-app]:not([data-mrx-preserve]) :is(.bg-gray-900,.bg-slate-900,.bg-primary,.bg-background-dark,.bg-background-darker,.min-h-screen) { background: var(--md-sys-color-background) !important; color: var(--md-sys-color-on-surface) !important; }
body[data-mrx-app]:not([data-mrx-preserve]) :is(.bg-gray-800,.bg-slate-800,.bg-white,.bg-gray-100,.bg-gray-50) { background-color: var(--md-sys-color-surface-container) !important; color: var(--md-sys-color-on-surface) !important; }
body[data-mrx-app]:not([data-mrx-preserve]) :is(.bg-gray-700,.bg-slate-700,.bg-gray-200,.bg-gray-600) { background-color: var(--md-sys-color-surface-container-high) !important; }
body[data-mrx-app]:not([data-mrx-preserve]) :is(.text-white,.text-gray-800,.text-gray-900,.text-gray-100) { color: var(--md-sys-color-on-surface) !important; }
body[data-mrx-app]:not([data-mrx-preserve]) :is(.text-gray-300,.text-gray-400,.text-gray-500,.text-gray-600,.text-gray-700) { color: var(--md-sys-color-on-surface-variant) !important; }
body[data-mrx-app]:not([data-mrx-preserve]) :is(button.bg-blue-600,button.bg-blue-500,a.bg-blue-600) { background: var(--md-sys-color-primary) !important; color: var(--md-sys-color-on-primary) !important; }
body[data-mrx-app]:not([data-mrx-preserve]) :is(.rounded-lg,.rounded-xl,.rounded-3xl) { border-radius: 28px; }
body[data-mrx-app]:not([data-mrx-preserve]) :is(.border-gray-600,.border-gray-700) { border-color: var(--md-sys-color-outline-variant) !important; }
/* Quiz selection and feedback retain semantic correct/incorrect coloring. */
body[data-mrx-app] .option:not(.correct):not(.incorrect),body[data-mrx-app] .answer-option:not(.correct) { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); border-color: var(--md-sys-color-outline-variant); }
body[data-mrx-app="typing-tutor"] { --accent: var(--md-sys-color-primary); --light: var(--md-sys-color-on-surface); }
body[data-mrx-app="typing-tutor"] .container { max-width: 1000px !important; }
body[data-mrx-app="typing-tutor"] .key { font-family: ui-monospace,monospace; }
body[data-mrx-app="pixel-monitor"] .container { max-width: 850px; background: var(--md-sys-color-surface-container); border-radius: 28px; }
body[data-mrx-app="pong"] #root { display: grid; place-items: center; min-height: calc(100dvh - 72px); padding: 24px 16px; }
body[data-mrx-app="pong"] .app-container { max-width: 100%; }
body[data-mrx-app="pong"] :is(.start-screen,.stats-screen,.player-profile,.online-connection-screen,.game-over-screen) { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); border-radius: 28px; }
body[data-mrx-app="pong"] .start-screen .button { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
body[data-mrx-app="hexpulse"] :is(.home-screen,.game-screen,.online-game-screen,.how-to-play) { background: var(--md-sys-color-background); }
body[data-mrx-app="azul"] #root { min-height: calc(100dvh - 72px); }
body[data-mrx-app="entlines"] { display: block !important; }
body[data-mrx-app="entlines"] #gameContainer { margin: 24px auto; }
body[data-mrx-app="entlines"] #splashScreen { top: 72px; height: calc(100dvh - 72px); }
body[data-mrx-app="mcfly"] :is(.landing-bg,.landing-page,.solution-page) { background: var(--md-sys-color-background) !important; }
body[data-mrx-app="mcfly"] :is(.headline,.subheadline,.solution-title,.logo-text) { color: var(--md-sys-color-on-surface) !important; }
body[data-mrx-app="mcfly"] .highlight { color: var(--md-sys-color-primary) !important; }
body[data-mrx-app="black-stories"] .app-container { background: var(--md-sys-color-background) !important; }
body[data-mrx-app="black-stories"] :is(.werewolf-silhouette,.shadow-figure,.blood-drop,.blood-splatter,.blood-mist,.blood-drip,.blood-streak,.blood-trail,.blood-puddle,.lightning-flash) { display: none; }
body[data-mrx-app="5-sekunden"] .MuiPaper-root { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); border-radius: 28px; }
body[data-mrx-app="5-sekunden"] .MuiTypography-root { font-family: 'DM Sans',sans-serif; }
body[data-mrx-app="5-sekunden"] .MuiTypography-h3,body[data-mrx-app="5-sekunden"] .MuiTypography-h4 { font-family: 'Outfit',sans-serif; }
body[data-mrx-app="ticket-generator"] :is(.ticket,.receipt) { color-scheme: light; }
body[data-mrx-app] .mrx-old-decoration { display: none !important; }
@media (max-width: 600px) {
  body[data-mrx-app] > .container { margin-block: 20px !important; padding: 16px; }
  body[data-mrx-app="pixel-monitor"] .control-panel { grid-template-columns: 1fr; }
  body[data-mrx-app="typing-tutor"] .game-stats { flex-wrap: wrap; gap: 8px; }
  body[data-mrx-app="typing-tutor"] .stat { min-width: 90px; font-size: 14px; }
  body[data-mrx-app="pong"] .app-container { width: 100%; }
}

body[data-mrx-app^="bsi-"] { --primary-color: var(--md-sys-color-surface-container); --secondary-color: var(--md-sys-color-surface-container-high); --accent-color: var(--md-sys-color-primary); --text-color: var(--md-sys-color-on-surface); --light-text: var(--md-sys-color-on-surface-variant); }
body[data-mrx-app] *,body[data-mrx-app] *::before,body[data-mrx-app] *::after { box-sizing: border-box; }
body[data-mrx-app] :is(.form-group,.input-group,.answer-text,.question-text,.option > span,.grid > .card) { min-width: 0; overflow-wrap: anywhere; }
body[data-mrx-app] :is(.answer-text,.question-text,.option > span) { flex-shrink: 1; }
body[data-mrx-app="pong"] .app-container { width: min(800px,100%); }
body[data-mrx-app="pong"] .game-container { width: 100%; height: auto; aspect-ratio: 8 / 5; }
body[data-mrx-app="pong"] .game-container canvas { width: 100%; height: auto; }
body[data-mrx-app="pong"] :is(.controls-info,.start-screen p) { padding-inline: 16px; }
body[data-mrx-app="ticket-generator"] .preview-container { width: 100%; overflow-x: auto; }
body[data-mrx-app="ticket-generator"] :is(.ticket,.receipt) { flex-shrink: 0; }
body[data-mrx-app="ticket-generator"] :is(.ticket,.receipt) :is(h1,h2,h3,p,span,div) { color: #fff !important; font-family: Arial,sans-serif !important; }
body[data-mrx-app="browser-key-logger"] .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
body[data-mrx-app="steuerschleuder"] .tabs { flex-wrap: wrap; }
body[data-mrx-app="steuerschleuder"] .tab { min-width: 0; flex: 1; padding-inline: 12px; }
body[data-mrx-app="hexpulse"] :is(.home-screen h1,.game-subtitle,.difficulty-header,.how-to-play h1,.how-to-play p) { color: var(--md-sys-color-on-surface) !important; }
body[data-mrx-app="hexpulse"] .menu-button { background: var(--md-sys-color-primary) !important; color: var(--md-sys-color-on-primary) !important; }
body[data-mrx-app="azul"] .game-screen { background: var(--md-sys-color-background) !important; }
body[data-mrx-app="azul"] :is(.welcome-screen,.welcome-content,.game-menu,.menu-panel) { background: var(--md-sys-color-surface-container) !important; color: var(--md-sys-color-on-surface) !important; }
body[data-mrx-app="androyd"] .connection-status { top: 84px; }
@media (max-width: 600px) {
  body[data-mrx-app="pixel-monitor"] .container > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  body[data-mrx-app="pixel-monitor"] :is(.input-group,.control-panel,.button-group) { min-width: 0; }
  body[data-mrx-app="pixel-monitor"] .button-group { flex-wrap: wrap; }
  body[data-mrx-app^="bsi-"] .search-container { flex-wrap: wrap; gap: 12px; }
  body[data-mrx-app^="bsi-"] .search-container > * { width: 100%; min-width: 0; }
  body[data-mrx-app="bsi-isb-iso"] :is(.search-box,.stats) { width: 100%; }
  body[data-mrx-app="bsi-isb-iso"] .question-header { flex-wrap: wrap; }
  body[data-mrx-app="browser-key-logger"] .grid { grid-template-columns: minmax(0,1fr); }
  body[data-mrx-app="browser-key-logger"] .code-block { overflow-x: auto; }
  body[data-mrx-app="steuerschleuder"] .container > * { min-width: 0; }
  body[data-mrx-app="steuerschleuder"] .result-row { flex-wrap: wrap; gap: 8px; }
  body[data-mrx-app="ticket-generator"] .form-grid { grid-template-columns: minmax(0,1fr); }
  body[data-mrx-app="ticket-generator"] .form-group > div[style*="display: flex"] { flex-wrap: wrap; }
}

body[data-mrx-app="ai-sec"] > header:not(.mrx-site-header) { top: 72px; z-index: 900; }
body[data-mrx-app="ai-sec"] .nav-drawer { top: 72px; height: calc(100dvh - 72px); z-index: 950; }
body[data-mrx-app="ai-sec"] .nav-overlay { top: 72px; }
body[data-mrx-app="ai-sec"] .nav-drawer-toggle { z-index: 960; }

body[data-mrx-app="mastermind"] :is(button.bg-green-600,button.bg-purple-600) { background: var(--md-sys-color-primary) !important; color: var(--md-sys-color-on-primary) !important; }
body[data-mrx-app="black-stories"] :is(.app-title,.title,.story-title,h1,h2) { text-shadow: none !important; }
body[data-mrx-app="black-stories"] :is(.solution-button,.hint-button,.reset-button,.shuffle-button) { border-color: var(--md-sys-color-outline-variant) !important; box-shadow: none !important; }
body[data-mrx-app="azul"] :is(.dialog button,.modal button,.player-count-button,.menu-button) { background: var(--md-sys-color-primary) !important; color: var(--md-sys-color-on-primary) !important; box-shadow: none !important; }

body[data-mrx-app="black-stories"] :is(.btn-primary,.btn-secondary) { border-color: var(--md-sys-color-outline-variant) !important; box-shadow: none !important; }
body[data-mrx-app="black-stories"] :is(.dark-fog,.lightning-svg) { display: none; }
body[data-mrx-app="azul"] :is(.dialog-content,.start-dialog) { border-radius: 28px; }

body[data-mrx-app="mcfly"] input.number-input { background: transparent !important; color: #000 !important; border: 0 !important; border-radius: 0; font-family: Arial,sans-serif !important; }
body[data-mrx-app="azul"] .dialog-overlay { top: 72px; z-index: 990; }
body[data-mrx-app="azul"] .dialog { border-radius: 28px; }

/* MUI gives text inputs a content height plus padding; keep that box model. */
body[data-mrx-app="5-sekunden"] .MuiInputBase-input { box-sizing: content-box !important; background: transparent !important; border-radius: 0; }
body[data-mrx-app="5-sekunden"] .MuiOutlinedInput-root { background: var(--md-sys-color-surface-container-low); border-radius: 16px; }
body[data-mrx-app="azul"] .player-count-button span { color: inherit !important; }

/* A control's label must use the matching foreground, including nested utilities. */
body[data-mrx-app]:not([data-mrx-preserve]) :is(button,a.btn,a.button) :is(span,div,strong,b,small) { color: inherit !important; }
body[data-mrx-app]:not([data-mrx-preserve]) :is(.btn,.cta-button,.reset-all-button,.toggle-button,.capture-btn,.upload-btn,.start-button,.submit-button,button.bg-accent-blue,button.bg-green-600,button.bg-purple-600) {
  background: var(--md-sys-color-primary) !important; color: var(--md-sys-color-on-primary) !important;
  background-image: none !important; border-color: transparent !important; text-shadow: none !important;
}
body[data-mrx-app]:not([data-mrx-preserve]) :is(.btn.danger,button.danger,.btn-danger) {
  background: var(--md-sys-color-error) !important; color: var(--md-sys-color-on-error) !important;
}
body[data-mrx-app="mediapipe"] .tab { background: var(--md-sys-color-surface-container-high) !important; color: var(--md-sys-color-on-surface) !important; }
body[data-mrx-app="mediapipe"] .tab.active,
body[data-mrx-app="kognitiver-trainer"] .nav-btn.active { background: var(--md-sys-color-primary) !important; color: var(--md-sys-color-on-primary) !important; }
body[data-mrx-app="pixel-monitor"] .button-group button { background: var(--md-sys-color-primary) !important; color: var(--md-sys-color-on-primary) !important; }
body[data-mrx-app="5-sekunden"] .MuiButton-outlined { background: transparent !important; color: var(--md-sys-color-primary) !important; border-color: var(--md-sys-color-primary) !important; }
body[data-mrx-app="entlines"] #musicBtn { background: var(--md-sys-color-surface-container-high) !important; color: var(--md-sys-color-on-surface) !important; }
body[data-mrx-app="poker-advisor"] .suit-button.red { color: var(--md-sys-color-error) !important; }
body[data-mrx-app="poker-advisor"] .suit-button.red.selected { color: var(--md-sys-color-on-primary) !important; }
body[data-mrx-app="ticket-generator"] .input-section button { background: var(--md-sys-color-primary) !important; color: var(--md-sys-color-on-primary) !important; }
/* Blue success/selection accents remain distinguishable by text, icons and outlines. */
body[data-mrx-app] { --success-color: var(--md-sys-color-primary); --accent-green: var(--md-sys-color-primary); }
body[data-mrx-app]:not([data-mrx-preserve]) :is(.alert-success,.badge-numeric,.feedback.correct,.answer-option.correct,.option.correct) {
  color: var(--md-sys-color-on-primary-container) !important; background: var(--md-sys-color-primary-container) !important;
  border-color: var(--md-sys-color-primary) !important;
}
body[data-mrx-app="mcfly"] .card-link { color: var(--md-sys-color-primary) !important; border-color: var(--md-sys-color-primary) !important; }
body[data-mrx-app="zipzap"] .text-green-400 { color: var(--md-sys-color-primary) !important; }
body[data-mrx-app="typing-tutor"] :is(.finger-4,.finger-6) { background: var(--md-sys-color-primary-container) !important; color: var(--md-sys-color-on-primary-container) !important; }
body[data-mrx-app="weather"] :is([stroke="#10b981" i],[stroke="#059669" i]) { stroke: var(--md-sys-color-primary) !important; }
body[data-mrx-app="weather"] :is([fill="#10b981" i],[fill="#059669" i]) { fill: var(--md-sys-color-primary) !important; }
body[data-mrx-app="ai-sec"] :is(.terminal,.terminal .command,.terminal-output,.terminal-input) { color: var(--md-sys-color-primary) !important; }
body[data-mrx-app="geo-calc"] .dimension-btn { background: var(--md-sys-color-surface-container-high) !important; color: var(--md-sys-color-on-surface) !important; }
body[data-mrx-app="geo-calc"] .dimension-btn.active { background: var(--md-sys-color-primary) !important; color: var(--md-sys-color-on-primary) !important; }
body[data-mrx-app="5-sekunden"] .MuiButton-contained { background: var(--md-sys-color-primary) !important; color: var(--md-sys-color-on-primary) !important; }
body[data-mrx-app="azul"] .header-button { background: var(--md-sys-color-surface-container-high) !important; color: var(--md-sys-color-on-surface) !important; }
body[data-mrx-app="brain-buster"] button.text-accent-blue { color: var(--md-sys-color-primary) !important; border-color: var(--md-sys-color-primary) !important; }
body[data-mrx-app="mediapipe"] button:not(.tab):not(.mrx-theme-toggle) { background: var(--md-sys-color-primary) !important; color: var(--md-sys-color-on-primary) !important; }
body[data-mrx-app="mcfly"] .back-button { background: var(--md-sys-color-surface-container-high) !important; color: var(--md-sys-color-on-surface) !important; }
/* Disabled controls keep readable labels; borders and semantics signal their state. */
body[data-mrx-app]:not([data-mrx-preserve]) button:disabled:not([data-mrx-game-color]) {
  opacity: 1 !important; background: var(--md-sys-color-surface-container-high) !important;
  color: var(--md-sys-color-on-surface-variant) !important; border: 1px dashed var(--md-sys-color-outline) !important;
}
body[data-mrx-app="brain-buster"] button.text-accent-blue { background: var(--md-sys-color-primary-container) !important; color: var(--md-sys-color-on-primary-container) !important; }
body[data-mrx-app="brain-buster"] .backdrop-blur-sm.p-6 { background: var(--md-sys-color-surface-container) !important; color: var(--md-sys-color-on-surface) !important; border-color: var(--md-sys-color-outline-variant) !important; }
body[data-mrx-app="brain-buster"] :is(button.bg-accent-green,button.bg-green-500) { background: var(--md-sys-color-primary) !important; color: var(--md-sys-color-on-primary) !important; }
body[data-mrx-app="brain-buster"] button.bg-accent-red { background: var(--md-sys-color-error) !important; color: var(--md-sys-color-on-error) !important; }
body[data-mrx-app="kognitiver-trainer"] .nav-btn:hover { background: var(--md-sys-color-primary) !important; color: var(--md-sys-color-on-primary) !important; }
body[data-mrx-app="kognitiver-trainer"] button.theme-toggle { display: none !important; }
body[data-mrx-app="klatsch-batsch"] .instructions-button { background: var(--md-sys-color-surface-container-high) !important; color: var(--md-sys-color-on-surface) !important; }
body[data-mrx-app="poker-advisor"] .reset-button { background: var(--md-sys-color-surface-container-high) !important; color: var(--md-sys-color-on-surface) !important; }
/* Wide comparison tables remain usable without pushing the footer off-screen. */
body[data-mrx-app="ai-sec"] :is(table,pre) { display: block; max-width: 100%; overflow-x: auto; }
body[data-mrx-app="ai-sec"] :is(p,li,td,th,code) { overflow-wrap: anywhere; }