/* === MAGISCHE WELT MODERN FACH VISUAL LAYER === */
html,body{min-height:100%;overflow-x:hidden!important;background:transparent!important}body{min-height:100svh;position:relative;color:#fff}.bg{filter:saturate(1.03) brightness(.96)}body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,12,24,.34),rgba(7,18,30,.08) 42%,rgba(5,10,18,.46)),radial-gradient(circle at 50% 42%,transparent 0 26%,rgba(4,8,18,.22) 88%)}.panel_wrap{position:relative!important;z-index:5!important;background:linear-gradient(145deg,rgba(20, 86, 112, 0.42),rgba(10, 26, 50, 0.34))!important;border:1px solid rgba(255,226,180,.30)!important;border-radius:28px!important;box-shadow:0 28px 66px rgba(0,0,0,.34),inset 0 0 34px rgba(255,255,255,.045)!important;backdrop-filter:blur(10px) saturate(1.06)!important;-webkit-backdrop-filter:blur(10px) saturate(1.06)!important}.panel_head{color:#ffe8b8!important;text-shadow:0 3px 16px rgba(0,0,0,.45)!important}.cards{gap:clamp(12px,1.6vw,20px)!important}.card{border-radius:24px!important;border:1px solid rgba(255,226,180,.28)!important;background:linear-gradient(155deg,rgba(20, 86, 112, 0.42),rgba(25,28,48,.32))!important;box-shadow:0 16px 34px rgba(0,0,0,.25),inset 0 0 20px rgba(255,255,255,.05)!important;backdrop-filter:blur(8px) saturate(1.08)!important;-webkit-backdrop-filter:blur(8px) saturate(1.08)!important;color:#fff!important;transition:transform .18s ease,border-color .18s ease,background .18s ease!important}.card:hover,.card:focus-visible{transform:translateY(-6px)!important;border-color:rgba(255,238,194,.74)!important;background:linear-gradient(155deg,rgba(255, 214, 148, 0.34),rgba(44,34,48,.45))!important}.card_icon{background:transparent!important;border-color:transparent!important;box-shadow:none!important}.card_icon img{filter:drop-shadow(0 10px 15px rgba(0,0,0,.32))}.card_title{font-family:Georgia,serif!important;color:#ffe9b8!important;text-shadow:0 3px 14px rgba(0,0,0,.42)!important}.card_sub{color:rgba(255,255,255,.74)!important}.score_panel{background:rgba(5,27,42,.42)!important;border:1px solid rgba(255,226,180,.25)!important;border-radius:18px!important;box-shadow:0 14px 30px rgba(0,0,0,.26)!important;backdrop-filter:blur(8px) saturate(1.05)!important}.yt_bubble_card{background:rgba(45,31,38,.62)!important;border-color:rgba(255,226,180,.30)!important;backdrop-filter:blur(10px)!important}@media(max-width:700px){.panel_wrap{width:min(100% - 18px, 760px)!important;padding:12px!important;border-radius:22px!important}.cards{grid-template-columns:1fr!important}.card{min-height:118px!important}}

/* === MW FINAL GLOBAL GLASSMORPHISM PASS === */
.panel_wrap,
.stage {
  background: linear-gradient(145deg, rgba(28, 38, 58, 0.38), rgba(18, 22, 38, 0.26)) !important;
  border-color: rgba(255, 232, 190, 0.30) !important;
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.28), inset 0 0 34px rgba(255, 255, 255, 0.045) !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
}

.card,
.subject-card {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.145), rgba(20, 26, 44, 0.265)) !important;
  border-color: rgba(255, 232, 190, 0.28) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.23), inset 0 0 22px rgba(255, 255, 255, 0.045) !important;
  backdrop-filter: blur(8px) saturate(1.10) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.10) !important;
}

.card:hover,
.card:focus-visible,
.subject-card:hover,
.subject-card:focus-visible {
  background: linear-gradient(155deg, rgba(255, 238, 194, 0.24), rgba(36, 44, 70, 0.36)) !important;
  border-color: rgba(255, 238, 194, 0.72) !important;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.28), 0 0 24px rgba(255, 226, 170, 0.16) !important;
}

.card_icon,
.subject-icon {
  background: rgba(10, 14, 24, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.045), 0 10px 22px rgba(0, 0, 0, 0.16) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

.card_icon img,
.subject-icon img {
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.35));
}

.card_title,
.subject-copy strong {
  color: #ffe9b8 !important;
  text-shadow: 0 3px 14px rgba(0,0,0,0.42) !important;
}

.card_sub,
.subject-copy small {
  color: rgba(255,255,255,0.76) !important;
}

/* Keep the floating title/header area clean: no card behind it. */
.welcome-copy,
.hero {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* === MW FACH REFERENCE BOTTOM CONTROLS === */
.floor-bottom {
  position: fixed !important;
  left: 50% !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  z-index: 2200 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.floor-bottom .ui-narration {
  position: static !important;
  transform: none !important;
  min-height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 5px 16px 5px 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(4, 27, 40, 0.84) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  cursor: pointer !important;
  font-weight: 900 !important;
}

.floor-bottom .ui-narration:hover,
.floor-bottom .ui-narration:focus-visible {
  transform: translateY(-2px) !important;
  outline: 3px solid rgba(255, 226, 143, 0.55) !important;
}

.floor-bottom .ui-narration-char {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
}

.floor-bottom .ui-narration-text {
  color: #fff !important;
  font-weight: 900 !important;
}

@media (max-width: 620px) {
  .floor-bottom {
    bottom: max(7px, env(safe-area-inset-bottom)) !important;
  }

  .floor-bottom .ui-narration {
    min-height: 47px !important;
    padding-right: 12px !important;
  }

  .floor-bottom .ui-narration-char {
    width: 37px !important;
    height: 37px !important;
  }

  .floor-bottom .ui-narration-text {
    font-size: 0.78rem !important;
  }
}