/* hub.css — premium subject-hub overrides, shared D1–D6.
   Loaded AFTER the inline <style>, so these win ties.
   Locked-card + reduced-motion rules below are deliberately MORE specific
   than the pairs here, so lock behaviour never changes. */
body {
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><circle cx="20" cy="30" r="4" fill="%233d7bff" fill-opacity=".07"/><circle cx="90" cy="70" r="5" fill="%238b5cf6" fill-opacity=".07"/><circle cx="55" cy="100" r="3" fill="%23ffd23f" fill-opacity=".12"/></svg>'),
    linear-gradient(180deg, #dfeaff 0%, #f1e9ff 55%, #fff6d9 100%) !important;
}
/* hero: tri-color top bar + gradient title */
/* NOTE: _core/css/style.css .hero{height:132px} is the game-screen avatar slot —
   hub banners must release it, else titles clip (pre-existing on all 6 hubs). */
.hero { height: auto !important; box-shadow: 0 6px 0 rgba(35, 50, 74, .12), 0 18px 40px rgba(109, 63, 224, .12) !important; }
.hero::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; z-index: 1;
  background: linear-gradient(90deg, #3d7bff, #6d3fe0, #ffd23f);
}
.hero h1 { color: #5b2fd6 !important; }
.hero .sub { max-width: 640px; margin-left: auto; margin-right: auto; }
/* cards: lift + brand border on hover */
a.card {
  border: 2px solid #e6ebff !important;
  box-shadow: 0 4px 0 rgba(35, 50, 74, .10), 0 12px 26px rgba(35, 50, 74, .08) !important;
}
a.card:hover { transform: translateY(-3px) !important; border-color: #6d3fe0 !important; }
a.card:active { transform: translateY(2px) !important; }
/* pastel icon tiles, rotating per row position */
.grid .ico { border: 2px solid #b9c6ff; }
.grid a.card:nth-child(3n+2) .ico { background: linear-gradient(135deg, #fff3cf, #ffe9b8) !important; border-color: #ffd67e !important; }
.grid a.card:nth-child(3n+3) .ico { background: linear-gradient(135deg, #efe4ff, #e3d4ff) !important; border-color: #cbb4ff !important; }
.grid a.card:nth-child(3n+1) .ico { background: linear-gradient(135deg, #dbe7ff, #e3f7ef) !important; border-color: #b9c6ff !important; }
/* badges: solid premium pill (locked rule stays more specific) */
.badge {
  background: linear-gradient(#2b6fe6, #2b57d6) !important; color: #fff !important;
  border: 0 !important; padding: 7px 14px !important;
  box-shadow: 0 3px 0 rgba(30, 70, 176, .55) !important;
}
/* exam card: same white sticker as subjects, elevated — gold frame, brand title, blue CTA */
a.card.examcard {
  grid-column: 1 / -1;
  border: 3px solid #ffd23f !important;
  padding: 20px !important;
}
a.card.examcard:hover { border-color: #e0a800 !important; }
a.card.examcard h2 { color: #5b2fd6 !important; font-size: 1.2rem !important; }
a.card.examcard .ico {
  background: linear-gradient(135deg, #fff3cf, #ffe9b8) !important;
  border-color: #ffd67e !important;
  width: 64px !important; height: 64px !important; font-size: 2.1rem !important;
}
a.card.examcard .badge {
  background: linear-gradient(#2b6fe6, #2b57d6) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 4px 0 #1e46b3 !important;
  font-size: .95rem !important;
  padding: 11px 22px !important;
}
a.card.examcard:active .badge { transform: translateY(3px); box-shadow: 0 1px 0 #1e46b3 !important; }
/* KAFA heading + footer as soft cards */
.cat {
  background: #fff; border-radius: 20px; padding: 14px 18px;
  box-shadow: 0 4px 0 rgba(35, 50, 74, .10), 0 12px 26px rgba(35, 50, 74, .08);
}
footer {
  background: #fff; border-radius: 20px; padding: 14px 18px;
  box-shadow: 0 4px 0 rgba(35, 50, 74, .10), 0 12px 26px rgba(35, 50, 74, .08);
}
/* floating music toggle (injected by hubmusic.js) */
#hubmus {
  position: fixed; right: 14px; bottom: 14px; z-index: 60;
  width: 52px; height: 52px; border-radius: 50%;
  border: 3px solid #fff; background: linear-gradient(135deg, #2b6fe6, #6d3fe0);
  color: #fff; font-size: 1.4rem; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 4px 0 rgba(30, 70, 176, .55), 0 10px 22px rgba(35, 50, 74, .25);
}
#hubmus:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(30, 70, 176, .55); }
#hubmus.off { filter: grayscale(.7); opacity: .75; }
@media (max-width: 560px) {
  #hubmus { width: 48px; height: 48px; right: 10px; bottom: 10px; }
}