/* Raffst du? – Monster-Mystik V10.
 * Gemeinsamer Gestaltungsrahmen für die 5 bestehenden Minispiele.
 * Nur Außenlayout, Navigation und Rahmen; kein Eingriff in Notenschrift,
 * interaktive Spielflächen, Zeitmessung, JavaScript oder fachliche Logik.
 */
body.rd-monster-stage{
  --rd-night:#091d4a;
  --rd-mid:#223e92;
  --rd-purple:#723cbd;
  --rd-gold:#ffda65;
  background:
    radial-gradient(ellipse 40% 25% at 95% 6%,rgba(145,73,235,.54),transparent 100%),
    radial-gradient(ellipse 44% 30% at 6% 36%,rgba(36,148,246,.3),transparent 100%),
    radial-gradient(ellipse 40% 22% at 87% 90%,rgba(147,65,231,.32),transparent 100%),
    linear-gradient(145deg,#091d4a 4%,#153576 48%,#38207b 100%) !important;
  background-attachment:fixed !important;
  min-height:100dvh;
}
/* The common game shell occupies all available width, without changing play-grid logic. */
body.rd-monster-stage :is(.nb-shell,.ft-shell,.nd-shell,.nm-shell,.nr-shell){
  min-height:100dvh;
}
/* Same visual stage for all five games; dimensions of note systems remain untouched. */
body.rd-monster-stage :is(.nb-main,.ft-main,.nd-main,.nm-main,.nr-main){
  position:relative;
  isolation:isolate;
  border:2px solid rgba(255,209,103,.74);
  border-radius:27px;
  background:
    radial-gradient(circle at 7% 4%,rgba(79,186,255,.16),transparent 29%),
    radial-gradient(circle at 94% 7%,rgba(176,102,255,.20),transparent 32%),
    linear-gradient(125deg,rgba(21,43,108,.97),rgba(51,31,111,.97));
  box-shadow:0 0 0 5px rgba(183,124,255,.12),0 16px 38px rgba(0,8,37,.35),inset 0 1px 0 rgba(255,255,255,.21);
  padding:clamp(12px,2vw,23px) !important;
  margin-top:clamp(15px,3vw,27px) !important;
  margin-bottom:26px !important;
}
body.rd-monster-stage :is(.nb-main,.ft-main,.nd-main,.nm-main,.nr-main)::before{
  content:"✦  MONSTER-MIKES MUSIKWELT  ✦";
  display:block;
  margin:0 0 14px;
  padding:9px 15px;
  width:max-content;
  max-width:100%;
  color:#fff1b9;
  border-radius:999px;
  background:linear-gradient(115deg,rgba(64,112,217,.7),rgba(112,54,167,.56));
  border:1px solid rgba(255,210,120,.52);
  box-shadow:0 3px 12px rgba(0,0,0,.14);
  font:800 clamp(10px,1.5vw,12px)/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.11em;
}
body.rd-monster-stage :is(.nb-main,.ft-main,.nd-main,.nm-main,.nr-main)::after{
  content:"";
  display:block;
  height:6px;
  margin:16px 20px 0;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#54dbff 22%,#fbd46e 51%,#c47afe 78%,transparent);
  opacity:.67;
  pointer-events:none;
}
/* Shared dark navigation strip. Back links stay accessible. */
body.rd-monster-stage :is(.nb-head,.ft-head,.nd-head,.nm-head,.nr-head){
  position:relative;
  z-index:3;
  background:linear-gradient(100deg,rgba(13,37,96,.98),rgba(53,35,121,.98)) !important;
  border-bottom:1px solid rgba(255,212,102,.55) !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(2,6,34,.21);
}
body.rd-monster-stage :is(.nb-head,.ft-head,.nd-head,.nm-head,.nr-head) strong{color:#fff3cf !important}
body.rd-monster-stage :is(.nb-head,.ft-head,.nd-head,.nm-head,.nr-head) :is(a,span,small){color:#f3f0ff !important}
body.rd-monster-stage :is(.nb-head,.ft-head,.nd-head,.nm-head,.nr-head) a:hover{color:#ffdc68 !important}
/* Bright inner surfaces remain white. All original task layouts are preserved. */
body.rd-monster-stage :is(.nb-card,.ft-card,.nd-panel,.nm-play,.nr-card){
  border:1px solid rgba(220,226,247,.98) !important;
  border-top:4px solid #e4b45c !important;
  border-radius:19px !important;
  background:#fff !important;
  box-shadow:0 9px 24px rgba(3,10,48,.24) !important;
  color:#20354a;
}
/* Intro headings / challenge headings are recognizable and consistent. */
body.rd-monster-stage :is(.nb-card,.ft-card,.nd-panel,.nm-top,.nr-title) h1{color:#123666}
body.rd-monster-stage :is(.nb-eyebrow,.ft-overline,.nd-eyebrow,.nm-eyebrow,.nr-kicker){color:#7650ad !important;letter-spacing:.095em}
/* Top sections on games where the title sits outside the white play card. */
body.rd-monster-stage :is(.nm-top,.nr-title){
  border-radius:15px;
  padding:12px 14px;
  margin-bottom:12px;
  background:rgba(255,255,255,.97);
  box-shadow:0 7px 15px rgba(5,13,53,.14);
}
/* Other games place results, information and activities in distinct blocks. */
body.rd-monster-stage :is(.nb-primary,.ft-primary,.nd-primary,.nm-btn:not(.nm-ghost),.nr-controls button:not(.nr-secondary)){
  background:linear-gradient(115deg,#176cbd,#5743bc) !important;
  border-color:#4e53bf !important;
  color:#fff !important;
  box-shadow:0 3px 10px rgba(21,46,131,.17);
}
body.rd-monster-stage :is(.nb-primary,.ft-primary,.nd-primary,.nm-btn:not(.nm-ghost),.nr-controls button:not(.nr-secondary)):hover:not(:disabled){
  filter:brightness(1.11);
}
/* Leave the paper-white notes, SVGs, staff, notes, pause originals and input options alone. */
body.rd-monster-stage :is(button,select,a):focus-visible{outline:3px solid #ffce55 !important;outline-offset:2px}
/* Avoid fixed backgrounds on small devices and preserve horizontal note scrolling. */
@media(max-width:600px){
 body.rd-monster-stage{background-attachment:scroll !important}
 body.rd-monster-stage :is(.nb-main,.ft-main,.nd-main,.nm-main,.nr-main){
   border-radius:16px;
   border-width:1px;
   padding:9px !important;
   margin-top:9px !important;
   margin-bottom:14px !important;
 }
 body.rd-monster-stage :is(.nb-main,.ft-main,.nd-main,.nm-main,.nr-main)::before{
   font-size:9px;
   letter-spacing:.04em;
   padding:7px 10px;
   margin-bottom:9px;
 }
 body.rd-monster-stage :is(.nb-card,.ft-card,.nd-panel,.nm-play,.nr-card){border-radius:13px !important}
 body.rd-monster-stage :is(.nm-top,.nr-title){padding:9px 10px}
}
@media(prefers-reduced-motion:reduce){body.rd-monster-stage *{scroll-behavior:auto !important}}


/* V56 - Spielfeld-Erneuerung nach dem Noten-Blitz-Leitbild.
   Absichtlich nur Spiel 2 bis 5, niemals Noten-Blitz oder Notengrafiken. */
body.rd-monster-stage:is(.rd-fuelle-den-takt,.rd-noten-detektiv,.rd-notenmonster,.rd-noten-raetsel){
  --stage-gold:#ffd46e;--stage-purple:#5221a0;--stage-blue:#122667;
  background:radial-gradient(circle at 50% -15%,#5833aa 0,#1b1762 46%,#0c194f 100%)!important;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}
body.rd-monster-stage:is(.rd-fuelle-den-takt,.rd-noten-detektiv,.rd-notenmonster,.rd-noten-raetsel)
:is(.ft-main,.nd-main,.nm-main,.nr-main){
  max-width:100%;border:2px solid #ffc95e!important;border-radius:26px!important;
  background:radial-gradient(circle at 50% -25%,#a455cf55,transparent 65%),linear-gradient(155deg,#191b68 0%,#411d84 100%)!important;
  box-shadow:inset 0 0 0 3px #ffdf9933,0 0 19px #f5ba4459,0 20px 40px #080d376e!important;
}
body.rd-monster-stage:is(.rd-fuelle-den-takt,.rd-noten-detektiv,.rd-notenmonster,.rd-noten-raetsel)
:is(.ft-card,.nd-panel,.nm-play,.nr-card){
  border:2px solid #ffe28a!important;border-radius:24px!important;
  background:linear-gradient(145deg,#fffdfd 0%,#f3eaff 65%,#dee9ff 100%)!important;
  box-shadow:inset 0 0 0 2px #ffffffb0,0 7px 25px #0f165252!important;
}
body.rd-monster-stage:is(.rd-fuelle-den-takt,.rd-noten-detektiv,.rd-notenmonster,.rd-noten-raetsel)
:is(.ft-main,.nd-main,.nm-main,.nr-main)::before{
  content:'✦ MONSTER-MIKES MUSIKWELT ✦';
  background:linear-gradient(100deg,#27156a,#7524b8 55%,#20185d)!important;
  color:#fff2b2!important;border:2px solid #ffdc72!important;border-radius:99px!important;
  box-shadow:0 0 0 3px #ac52e75a,0 0 19px #e44bff88,inset 0 0 10px #fff8ad2a;
  margin:0 auto 12px!important;font-weight:900!important;
}
body.rd-monster-stage:is(.rd-fuelle-den-takt,.rd-noten-detektiv,.rd-notenmonster,.rd-noten-raetsel)
:is(.ft-card,.nd-panel,.nm-top,.nr-title) h1{
  font-size:clamp(22px,3vw,32px);font-weight:900;color:#21165b!important;
  letter-spacing:-.025em;text-shadow:0 1px 0 #fff;
}
body.rd-monster-stage:is(.rd-fuelle-den-takt,.rd-noten-detektiv,.rd-notenmonster,.rd-noten-raetsel)
:is(.ft-primary,.nd-primary,.nm-btn:not(.nm-ghost),.nr-controls button:not(.nr-secondary)){
  background:linear-gradient(105deg,#ffeb9b 0%,#ffca52 45%,#f2a832 100%)!important;
  color:#351459!important;border:2px solid #ffda6c!important;border-radius:18px!important;
  font-weight:900!important;text-shadow:0 1px 0 #fff9;
  box-shadow:0 3px 0 #ac6427,0 0 15px #edb04e88!important;
  min-height:42px;transition:transform .14s,filter .14s;
}
body.rd-monster-stage:is(.rd-fuelle-den-takt,.rd-noten-detektiv,.rd-notenmonster,.rd-noten-raetsel)
:is(.ft-primary,.nd-primary,.nm-btn:not(.nm-ghost),.nr-controls button:not(.nr-secondary)):active{transform:translateY(2px)!important;box-shadow:0 1px 0 #ac6427!important}
body.rd-monster-stage:is(.rd-fuelle-den-takt,.rd-noten-detektiv,.rd-notenmonster,.rd-noten-raetsel)
:is(.ft-form select,.nd-fields select,.nm-level select){
  background:#fff!important;color:#2b1853!important;border:2px solid #aa93db!important;
  border-radius:13px!important;min-height:42px;font-weight:700;
}
body.rd-fuelle-den-takt :is(.ft-sheet,.ft-slots,.ft-palette-block){border-radius:15px!important;border-color:#d6b8ed!important;background:#fff!important}
body.rd-fuelle-den-takt :is(.ft-track,.ft-slots){box-shadow:inset 0 1px 4px #21216522}
body.rd-fuelle-den-takt .ft-track>div{background:linear-gradient(90deg,#8a3ae9,#ffbc43)!important}
body.rd-noten-detektiv .nd-options .nd-choice{border:2px solid #dcb771!important;border-radius:17px!important;background:linear-gradient(110deg,#fffefa,#eee4ff)!important;box-shadow:0 3px 0 #b58e8655!important}
body.rd-noten-detektiv .nd-meter>div{background:linear-gradient(90deg,#693bd4,#ffce61)!important}
body.rd-notenmonster .nm-play{overflow:hidden}
body.rd-notenmonster .nm-puzzle,body.rd-notenmonster .nm-theory{border:1px solid #d6b7ee!important;background:#faf5ff!important;border-radius:16px!important}
body.rd-notenmonster .nm-token.is-found{background:#d7ffe6!important;border-color:#18824b!important;border-radius:5px}
body.rd-noten-raetsel .nr-title{border:2px solid #ffd983!important;background:linear-gradient(105deg,#fffdf9,#efe2ff)!important}
body.rd-noten-raetsel .nr-keys button{border:2px solid #e1b96d!important;border-radius:16px!important;background:linear-gradient(#fff7d8,#ffe4ac)!important;color:#301650!important;font-weight:900!important;box-shadow:0 2px 0 #b8833e55}
body.rd-noten-raetsel .nr-meter>div{background:linear-gradient(90deg,#6d33c4,#ffcc54)!important}
/* Portrait first, compact real play areas.  Secondary explanations are moved out of visual priority. */
@media (max-width:700px) and (orientation:portrait){
 body.rd-monster-stage:is(.rd-fuelle-den-takt,.rd-noten-detektiv,.rd-notenmonster,.rd-noten-raetsel) :is(.ft-shell,.nd-shell,.nm-shell,.nr-shell){padding:3px 5px 7px!important;min-height:0!important}
 body.rd-monster-stage:is(.rd-fuelle-den-takt,.rd-noten-detektiv,.rd-notenmonster,.rd-noten-raetsel) :is(.ft-head,.nd-head,.nm-head,.nr-head){min-height:34px!important;height:auto!important;padding:6px 8px!important;border-radius:10px!important;position:relative!important}
 body.rd-monster-stage:is(.rd-fuelle-den-takt,.rd-noten-detektiv,.rd-notenmonster,.rd-noten-raetsel) :is(.ft-main,.nd-main,.nm-main,.nr-main){margin:4px 0 0!important;padding:6px!important;border-radius:15px!important}
 body.rd-monster-stage:is(.rd-fuelle-den-takt,.rd-noten-detektiv,.rd-notenmonster,.rd-noten-raetsel) :is(.ft-main,.nd-main,.nm-main,.nr-main)::before{font-size:9px!important;padding:4px 10px!important;margin:0 auto 6px!important;letter-spacing:.02em!important}
 body.rd-monster-stage:is(.rd-fuelle-den-takt,.rd-noten-detektiv,.rd-notenmonster,.rd-noten-raetsel) :is(.ft-main,.nd-main,.nm-main,.nr-main)::after{display:none!important}
 body.rd-monster-stage:is(.rd-fuelle-den-takt,.rd-noten-detektiv,.rd-notenmonster,.rd-noten-raetsel) :is(.ft-card,.nd-panel,.nm-play,.nr-card){padding:9px!important;margin-top:3px!important;border-radius:14px!important}
 body.rd-monster-stage:is(.rd-fuelle-den-takt,.rd-noten-detektiv,.rd-notenmonster,.rd-noten-raetsel) :is(.ft-footer,.nd-footer,.nm-foot,.nr-foot){display:none!important}
 body.rd-monster-stage:is(.rd-fuelle-den-takt,.rd-noten-detektiv,.rd-notenmonster,.rd-noten-raetsel) :is(.ft-card,.nd-panel,.nm-top,.nr-title) h1{font-size:20px!important;line-height:1.1!important;margin:2px 0 5px!important}
 /* Fülle den Takt: all note controls kept, compressed without shrinking originals beyond readability */
 body.rd-fuelle-den-takt #ft-play .ft-tip,body.rd-fuelle-den-takt #ft-play>.ft-subnote{display:none!important}
 body.rd-fuelle-den-takt #ft-play .ft-sheet{margin:3px 0!important}
 body.rd-fuelle-den-takt #ft-play .ft-sheet svg{max-height:min(17svh,125px)!important}
 body.rd-fuelle-den-takt #ft-play .ft-slots{min-height:47px!important;max-height:51px!important;padding:3px!important}
 body.rd-fuelle-den-takt #ft-play .ft-slot{height:44px!important;width:47px!important;flex-basis:47px!important}
 body.rd-fuelle-den-takt #ft-play .ft-slot svg{height:38px!important;width:38px!important}
 body.rd-fuelle-den-takt #ft-play .ft-palette-block{margin:4px 0!important}
 body.rd-fuelle-den-takt #ft-play .ft-palette{max-height:23svh;overflow-y:auto;overscroll-behavior:contain}
 body.rd-fuelle-den-takt #ft-play .ft-actions{margin:4px 0!important}
 body.rd-fuelle-den-takt #ft-play .ft-tools{margin:3px 0!important}
 body.rd-fuelle-den-takt #ft-play :is(.ft-primary,.ft-secondary,.ft-tools button){min-height:35px!important;padding:5px 8px!important;font-size:12px!important}
 /* Detektiv: four options visible in a tight, touch-friendly two-column layout */
 body.rd-noten-detektiv #nd-play .nd-question{font-size:clamp(17px,4.7vw,22px)!important;margin:6px 0 3px!important}
 body.rd-noten-detektiv #nd-play .nd-instruction{margin:2px 0 5px!important;font-size:11px!important}
 body.rd-noten-detektiv #nd-play .nd-options{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
 body.rd-noten-detektiv #nd-play .nd-choice{min-height:75px!important;padding:7px!important;font-size:12px!important}
 body.rd-noten-detektiv #nd-play .nd-symbol{max-height:49px!important}
 body.rd-noten-detektiv #nd-play .nd-feedback{margin:5px 0!important;padding:7px!important}
 body.rd-noten-detektiv #nd-play #nd-quit{padding:6px 10px!important;font-size:11px!important}
 /* Notenmonster: existing portrait blocker is removed; piano becomes playable portrait */
 body.rd-notenmonster{overflow:auto!important}
 body.rd-notenmonster .nm-shell{visibility:visible!important;pointer-events:auto!important}
 body.rd-notenmonster .nm-rotate{display:none!important}
 body.rd-notenmonster .nm-top{display:flex!important;flex-direction:row!important;align-items:center!important;gap:5px!important;padding:5px!important;margin-bottom:3px!important}
 body.rd-notenmonster .nm-top p,body.rd-notenmonster .nm-eyebrow{display:none!important}
 body.rd-notenmonster .nm-top h1{font-size:17px!important}
 body.rd-notenmonster .nm-level{min-width:0!important;max-width:170px!important;font-size:11px!important}
 body.rd-notenmonster .nm-level select{min-height:32px!important;padding:3px!important;font-size:11px!important}
 body.rd-notenmonster .nm-puzzle-row{grid-template-columns:minmax(0,1fr) 84px!important;gap:4px!important}
 body.rd-notenmonster .nm-puzzle,body.rd-notenmonster .nm-monster-area{padding:4px!important}
 body.rd-notenmonster .nm-word{min-height:45px!important;padding:3px 0!important;gap:3px!important}
 body.rd-notenmonster .nm-token{height:29px!important;min-width:16px!important}
 body.rd-notenmonster .nm-token-letter{font-size:13px!important}
 body.rd-notenmonster .nm-token[data-length="3"]{min-width:40px!important}
 body.rd-notenmonster .nm-token[data-length="2"]{min-width:27px!important}
 body.rd-notenmonster .nm-monster-image-wrap{width:78px!important;height:77px!important}
 body.rd-notenmonster .nm-notice{margin:2px 0!important;min-height:14px!important;font-size:11px!important}
 body.rd-notenmonster .nm-actions{gap:5px!important}
 body.rd-notenmonster .nm-btn{padding:4px 8px!important;min-height:31px!important;font-size:11px!important}
 body.rd-notenmonster .nm-theory{margin-top:5px!important;padding:6px!important}
 body.rd-notenmonster .nm-note,body.rd-notenmonster .nm-keyhelp{display:none!important}
 body.rd-notenmonster .nm-staff{height:70px!important}
 body.rd-notenmonster .nm-staff img{max-height:67px!important}
 body.rd-notenmonster .nm-whites{height:84px!important}
 /* Rätsel: notation and keyboard priority; auxiliary buttons wrap below */
 body.rd-noten-raetsel .nr-title{padding:7px!important;margin:0 0 5px!important}
 body.rd-noten-raetsel .nr-title p:not(.nr-kicker){display:none!important}
 body.rd-noten-raetsel .nr-sheet-scroll{margin:4px 0!important}
 body.rd-noten-raetsel .nr-sheet{max-height:29svh;overflow-y:auto}
 body.rd-noten-raetsel .nr-keys{gap:5px!important;margin:4px 0!important}
 body.rd-noten-raetsel .nr-keys button{min-height:40px!important;padding:5px!important}
 body.rd-noten-raetsel .nr-controls{margin-top:5px!important;gap:5px!important}
 body.rd-noten-raetsel .nr-controls button{padding:6px 8px!important;min-height:37px!important;font-size:11px!important}
}
@media (max-width:390px) and (orientation:portrait){
 body.rd-noten-detektiv #nd-play .nd-choice{min-height:68px!important}
 body.rd-notenmonster .nm-puzzle-row{grid-template-columns:minmax(0,1fr) 71px!important}
 body.rd-notenmonster .nm-monster-image-wrap{width:67px!important;height:73px!important}
}
@media(prefers-reduced-motion:reduce){
 body.rd-monster-stage:is(.rd-fuelle-den-takt,.rd-noten-detektiv,.rd-notenmonster,.rd-noten-raetsel) button{transition:none!important}
}