/* Bright Quest visual refresh: white canvas, colourful academy graphics, parent cockpit polish. */
:root {
  --bq-navy: #161d68;
  --bq-blue: #1288f6;
  --bq-sky: #36c5ff;
  --bq-green: #1fbd68;
  --bq-lime: #9eea42;
  --bq-yellow: #ffd53d;
  --bq-orange: #ff8617;
  --bq-pink: #f6478f;
  --bq-purple: #7554dc;
  --bq-border: #cfe8ff;
  --bq-shadow: 0 16px 34px rgba(20, 64, 150, 0.12);
}

html,
body {
  background: #ffffff !important;
}

body {
  color: var(--bq-navy);
}

.ambient {
  opacity: 0.28;
  filter: saturate(1.4);
}

.app {
  width: min(1440px, 100%) !important;
  padding: clamp(14px, 2vw, 28px) !important;
}

.screen {
  position: relative;
}

.app-header {
  margin-bottom: 16px;
  border: 2px solid #e0efff !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(22, 29, 104, 0.08) !important;
}

.app-header h2,
.hero-panel h1,
.academy-copy h3,
.international-arena h3 {
  color: var(--bq-navy);
  letter-spacing: 0 !important;
}

#welcomeName,
.hero-panel h1 {
  font-weight: 1000;
  text-shadow: 0 3px 0 rgba(18, 136, 246, 0.08);
}

.eyebrow {
  color: var(--bq-blue) !important;
  letter-spacing: 0.04em !important;
}

.button {
  min-height: 42px;
  border-radius: 15px !important;
  font-weight: 1000;
  box-shadow: 0 6px 0 rgba(22, 29, 104, 0.08), 0 12px 22px rgba(22, 29, 104, 0.1) !important;
}

.button-primary {
  border: 0 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #1594ff 0%, #006ff3 48%, #7554dc 100%) !important;
}

.button-soft {
  color: var(--bq-navy) !important;
  background: #fff !important;
  border: 2px solid #e1edff !important;
}

.role-panel,
#profileScreen .hero-panel {
  position: relative;
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  overflow: hidden;
  max-width: 1040px;
  margin-inline: auto;
  border: 2px solid #dbecff !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 213, 61, 0.24), transparent 24%),
    radial-gradient(circle at 12% 88%, rgba(54, 197, 255, 0.18), transparent 28%),
    #fff !important;
  box-shadow: var(--bq-shadow) !important;
}

.role-panel > :not(.bright-mascot-card),
#profileScreen .hero-panel > :not(.bright-mascot-card) {
  grid-column: 2;
}

.bright-mascot-card {
  grid-column: 1;
  grid-row: 1 / span 8;
  position: relative;
  width: 132px;
  aspect-ratio: 1;
  border-radius: 28px;
  background: linear-gradient(145deg, #10176d, #2932a0);
  box-shadow: 0 14px 28px rgba(22, 29, 104, 0.22);
}

.mascot-star {
  position: absolute;
  inset: 25px;
  clip-path: polygon(50% 0, 62% 34%, 98% 34%, 68% 54%, 80% 90%, 50% 68%, 20% 90%, 32% 54%, 2% 34%, 38% 34%);
  background: linear-gradient(135deg, #fff173, #ffc21d 70%, #ff8a00);
  filter: drop-shadow(0 7px 0 rgba(255, 146, 30, 0.35));
  animation: bq-wiggle 3.4s ease-in-out infinite;
}

.mascot-star::before,
.mascot-star::after {
  content: '';
  position: absolute;
  background: var(--bq-navy);
}

.mascot-star::before {
  width: 22px;
  height: 7px;
  left: 50%;
  top: 48%;
  border-radius: 999px;
  transform: translateX(-50%);
  box-shadow: -15px -13px 0 -2px var(--bq-navy), 15px -13px 0 -2px var(--bq-navy);
}

.mascot-spark {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
}

.mascot-spark.one { left: 18px; top: 24px; box-shadow: 42px -8px 0 #36c5ff, 76px 14px 0 #f6478f; }
.mascot-spark.two { right: 20px; bottom: 22px; box-shadow: -50px 12px 0 #ffd53d, -82px -20px 0 #9eea42; }

.role-card {
  border-radius: 22px !important;
  border: 2px solid #dbeaff !important;
  background: #fff !important;
  box-shadow: 0 12px 26px rgba(22, 29, 104, 0.08) !important;
}

.role-card::before {
  content: 'Kid';
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 18px;
  color: #fff;
  font-weight: 1000;
  background: linear-gradient(135deg, var(--bq-orange), var(--bq-pink));
}

.role-card.parent::before {
  content: 'QA';
  background: linear-gradient(135deg, var(--bq-blue), var(--bq-purple));
}

.star-bank,
.timer {
  border: 2px solid #ffe481 !important;
  border-radius: 16px !important;
  background: #fff9d6 !important;
}

.kid-action span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  font-size: 0.82rem !important;
  font-weight: 1000;
}

.grammar-action span { background: linear-gradient(135deg, #1fbd68, #36c5ff) !important; }
.games-action span { background: linear-gradient(135deg, #ff8617, #f6478f) !important; }

.academy-hero {
  grid-template-columns: minmax(0, 0.86fr) minmax(360px, 1.14fr) !important;
  gap: 20px !important;
  padding: 0 !important;
  overflow: hidden;
  border: 2px solid #bfe2ff !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 18px 40px rgba(18, 136, 246, 0.14) !important;
}

.academy-copy {
  padding: clamp(18px, 2.4vw, 30px);
}

.academy-copy .eyebrow,
.international-arena > .arena-hero-card .eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  color: #fff !important;
  background: linear-gradient(135deg, var(--bq-purple), #5633c7);
}

.academy-copy h3 {
  max-width: 10ch;
  margin-top: 14px;
  font-size: clamp(2.8rem, 6vw, 6.4rem) !important;
  line-height: 0.88 !important;
}

.academy-copy p:not(.eyebrow) {
  max-width: 36ch;
  color: #34446c !important;
  font-size: 1.06rem;
}

.academy-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.academy-zone {
  position: relative;
  min-height: 178px !important;
  overflow: hidden;
  border-radius: 22px !important;
  border: 0 !important;
  padding: 108px 14px 14px !important;
  color: #fff !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 -44px 60px rgba(20, 28, 80, 0.18), 0 12px 0 rgba(22, 29, 104, 0.08), 0 20px 30px rgba(22, 29, 104, 0.13) !important;
}

.academy-zone.maths { background: linear-gradient(160deg, #7566ff, #3f2da6) !important; }
.academy-zone.english { background: linear-gradient(160deg, #25bf67, #0a8843) !important; }
.academy-zone.reasoning { background: linear-gradient(160deg, #18c8d8, #06718d) !important; }
.academy-zone.world { background: linear-gradient(160deg, #1666f2, #1521a2) !important; }
.academy-zone.arcade { background: linear-gradient(160deg, #f45f8c, #c01f62) !important; }

.academy-zone-icon {
  position: absolute;
  left: 15px;
  bottom: 15px;
  z-index: 4;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  color: var(--bq-navy) !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(20, 20, 80, 0.18);
}

.academy-zone strong,
.academy-zone small {
  position: relative;
  z-index: 5;
  padding-left: 58px;
  color: #fff !important;
}

.academy-zone strong { font-size: 1.08rem !important; }
.academy-zone small { opacity: 0.88; }

.academy-card-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.academy-card-scene::before,
.academy-card-scene::after {
  content: '';
  position: absolute;
}

.scene-maths::before {
  left: 18px;
  top: 30px;
  width: 102px;
  height: 82px;
  clip-path: polygon(0 100%, 32% 36%, 48% 62%, 66% 18%, 100% 100%);
  background: linear-gradient(135deg, #312a91, #9d8dff);
  box-shadow: 92px 16px 0 -16px rgba(255,255,255,0.18);
}

.scene-maths::after {
  right: 18px;
  top: 30px;
  width: 92px;
  height: 92px;
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 5px rgba(63,45,166,0.18);
}

.scene-english::before {
  left: 34px;
  top: 34px;
  width: 142px;
  height: 86px;
  border-radius: 16px 16px 24px 24px;
  background: linear-gradient(90deg, #fff 0 48%, #fff7e6 52% 100%);
  box-shadow: 0 12px 0 rgba(0,0,0,0.08), inset 0 0 0 4px rgba(10,136,67,0.14);
}

.scene-english::after {
  right: 30px;
  top: 44px;
  content: 'ABC';
  color: #ff6c28;
  font-size: 2rem;
  font-weight: 1000;
}

.scene-reasoning::before {
  left: 52px;
  top: 24px;
  width: 112px;
  height: 114px;
  clip-path: polygon(38% 0, 62% 0, 62% 34%, 92% 100%, 8% 100%, 38% 34%);
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(169,243,255,0.95));
  box-shadow: inset 0 -28px 0 rgba(12,163,188,0.34);
}

.scene-reasoning::after {
  right: 24px;
  top: 36px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  box-shadow: -42px 54px 0 rgba(255,255,255,0.18), 26px 78px 0 rgba(255,255,255,0.14);
}

.scene-world::before {
  left: 40px;
  top: 28px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 38%, #9eea42 0 16%, transparent 17%),
    radial-gradient(circle at 62% 66%, #9eea42 0 18%, transparent 19%),
    radial-gradient(circle at 66% 28%, #46d67d 0 12%, transparent 13%),
    linear-gradient(135deg, #36c5ff, #0b6eea);
  box-shadow: 0 10px 0 rgba(0,0,0,0.08);
}

.scene-world::after {
  right: 26px;
  top: 42px;
  width: 78px;
  height: 54px;
  border-radius: 10px;
  background: linear-gradient(#fff 0 16%, #e82938 16% 30%, #fff 30% 44%, #e82938 44% 58%, #fff 58% 72%, #e82938 72% 86%, #fff 86%);
  box-shadow: -42px 20px 0 -10px #fff, -42px 20px 0 -7px #dc1e35;
}

.scene-arcade::before {
  left: 34px;
  top: 44px;
  width: 154px;
  height: 74px;
  border-radius: 36px 36px 28px 28px;
  background: #202069;
  box-shadow: inset 0 -14px 0 rgba(0,0,0,0.18), 0 13px 0 rgba(0,0,0,0.08);
}

.scene-arcade::after {
  left: 58px;
  top: 62px;
  width: 21px;
  height: 21px;
  border-radius: 5px;
  background: #ffd53d;
  box-shadow: 58px -8px 0 #ff5d7c, 84px 14px 0 #36c5ff, 104px -4px 0 #9eea42;
}

.academy-map-art {
  min-height: 640px !important;
  border-radius: 0 !important;
  border: 0 !important;
  background:
    radial-gradient(circle at 40% 20%, rgba(255,255,255,0.86) 0 6%, transparent 7%),
    radial-gradient(circle at 72% 70%, rgba(255,255,255,0.55) 0 5%, transparent 6%),
    linear-gradient(180deg, #59c9ff 0 30%, #7edcff 30% 43%, #2abf79 43% 100%) !important;
  isolation: isolate;
}

.academy-map-art::before {
  content: '';
  position: absolute;
  inset: 70px 46px 52px;
  border-radius: 44% 56% 48% 52%;
  background:
    radial-gradient(circle at 24% 36%, #e8f4a8 0 9%, transparent 10%),
    radial-gradient(circle at 70% 22%, #fbf0a5 0 10%, transparent 11%),
    radial-gradient(circle at 70% 68%, #c6ed92 0 14%, transparent 15%),
    linear-gradient(145deg, #74d676 0 28%, #4fc46c 28% 52%, #f3d36b 52% 58%, #3dbb69 58% 100%);
  border: 10px solid rgba(255,255,255,0.8);
  box-shadow: 0 18px 0 rgba(14, 72, 148, 0.13), 0 0 0 34px rgba(18,136,246,0.16);
}

.academy-map-art::after {
  content: '';
  position: absolute;
  left: 80px;
  right: 70px;
  top: 158px;
  height: 340px;
  border: 10px dotted rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.9) transparent transparent transparent;
  border-radius: 50%;
  transform: rotate(-16deg);
  z-index: 2;
}

.map-sun {
  width: 78px !important;
  height: 78px !important;
  right: 34px !important;
  top: 28px !important;
  background: var(--bq-yellow) !important;
}

.map-pin {
  z-index: 3;
  width: 84px !important;
  height: 84px !important;
  border-radius: 24px !important;
  border: 6px solid #fff;
  color: #fff !important;
  font-size: 1.4rem !important;
}

.pin-one { left: 18% !important; top: 24% !important; background: linear-gradient(135deg, #7566ff, #3f2da6) !important; }
.pin-two { right: 24% !important; top: 28% !important; background: linear-gradient(135deg, #1fbd68, #0b8d49) !important; }
.pin-three { right: 18% !important; bottom: 25% !important; background: linear-gradient(135deg, #0aa6c6, #065a86) !important; }
.pin-four { left: 24% !important; bottom: 17% !important; background: linear-gradient(135deg, #f6478f, #5b35d5) !important; }

.map-path { display: none !important; }

.dashboard-grid,
.insight-grid {
  gap: 18px !important;
}

.mission-control,
.coach-panel,
.trend-panel,
.training-panel,
.parent-recommendation,
.parent-card,
.arena-hero-card,
.international-card {
  border: 2px solid #d8ecff !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: var(--bq-shadow) !important;
}

.level-node {
  border-radius: 18px !important;
  border: 2px solid #e0eeff !important;
  background: linear-gradient(135deg, #fff, #f4fbff) !important;
}

.level-node::before {
  color: #fff !important;
  background: linear-gradient(135deg, var(--bq-blue), var(--bq-purple)) !important;
}

.international-arena {
  border: 2px solid #bfe2ff;
  border-radius: 22px;
  padding: clamp(14px, 2vw, 24px);
  background: #fff;
  box-shadow: var(--bq-shadow);
}

.arena-hero-card {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  padding-right: min(330px, 32vw) !important;
  background:
    radial-gradient(circle at 85% 42%, rgba(255, 213, 61, 0.24), transparent 24%),
    #fff !important;
}

.arena-hero-card::before {
  content: '';
  position: absolute;
  right: 74px;
  top: 30px;
  width: 120px;
  height: 92px;
  border-radius: 22px 22px 50px 50px;
  background: linear-gradient(135deg, #ffd75c, #ff9d18);
  box-shadow: inset 0 -16px 0 rgba(151, 84, 0, 0.13), 0 16px 0 rgba(255, 174, 26, 0.22);
}

.arena-hero-card::after {
  content: '';
  position: absolute;
  right: 36px;
  top: 58px;
  width: 210px;
  height: 118px;
  background:
    radial-gradient(circle at 80% 18%, var(--bq-pink) 0 4px, transparent 5px),
    radial-gradient(circle at 10% 34%, var(--bq-purple) 0 4px, transparent 5px),
    radial-gradient(circle at 58% 88%, var(--bq-blue) 0 5px, transparent 6px);
}

.international-list {
  grid-template-columns: repeat(3, minmax(240px, 1fr)) !important;
  gap: 16px !important;
}

.international-card {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  padding-top: 216px !important;
}

.international-card-art {
  position: absolute;
  inset: 0 0 auto;
  height: 200px;
  overflow: hidden;
  border-radius: 17px 17px 0 0;
  background: linear-gradient(180deg, #49bdff 0%, #bdecff 68%, #eaf7ff 69% 100%);
}

.international-card-art .flag,
.international-card-art .skyline,
.international-card-art .trophy {
  position: absolute;
  display: block;
}

.international-card-art .skyline {
  left: 0;
  right: 0;
  bottom: 0;
  height: 76px;
  background:
    linear-gradient(to top, rgba(24,104,190,0.28), rgba(24,104,190,0.28)) left bottom / 34px 54px no-repeat,
    linear-gradient(to top, rgba(24,104,190,0.32), rgba(24,104,190,0.32)) 42px bottom / 50px 78px no-repeat,
    linear-gradient(to top, rgba(24,104,190,0.2), rgba(24,104,190,0.2)) 108px bottom / 42px 62px no-repeat,
    linear-gradient(to top, rgba(24,104,190,0.3), rgba(24,104,190,0.3)) 168px bottom / 58px 90px no-repeat,
    linear-gradient(to top, #56c875, #56c875) 0 bottom / 100% 24px no-repeat;
}

.international-card-art .flag {
  left: 34px;
  top: 62px;
  width: 96px;
  height: 58px;
  border-radius: 8px;
  background: linear-gradient(#fff 0 18%, #e43b48 18% 34%, #fff 34% 50%, #e43b48 50% 66%, #fff 66% 82%, #e43b48 82%);
  box-shadow: 0 8px 0 rgba(0,0,0,0.08);
}

.art-1 .flag {
  background:
    linear-gradient(36deg, transparent 43%, #fff 43% 49%, #d91d3a 49% 55%, #fff 55% 61%, transparent 61%),
    linear-gradient(-36deg, transparent 43%, #fff 43% 49%, #d91d3a 49% 55%, #fff 55% 61%, transparent 61%),
    linear-gradient(90deg, transparent 42%, #fff 42% 58%, transparent 58%),
    linear-gradient(0deg, transparent 40%, #fff 40% 60%, transparent 60%),
    #244ca2;
}

.art-1 .trophy {
  right: 42px;
  bottom: 26px;
  width: 40px;
  height: 100px;
  border-radius: 8px 8px 0 0;
  background: #d7b37b;
  box-shadow: 0 0 0 6px #fff, 0 14px 0 rgba(0,0,0,0.08);
}

.art-2 .trophy {
  right: 42px;
  bottom: 24px;
  width: 48px;
  height: 112px;
  border-radius: 48% 48% 12px 12px;
  background: #57c58a;
  box-shadow: -18px 42px 0 -12px #57c58a, 0 0 0 6px #fff;
}

.art-3 {
  background: linear-gradient(180deg, #9f74ff 0%, #c6b0ff 62%, #efe8ff 63% 100%);
}

.art-3 .flag { display: none; }
.art-3 .skyline { background: linear-gradient(to top, rgba(94,61,191,0.35), rgba(94,61,191,0.35)) left bottom / 100% 54px no-repeat; }
.art-3 .trophy {
  left: 50%;
  top: 38px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%, #ffd53d 0 34%, #ff9f1c 35% 58%, transparent 59%), linear-gradient(135deg, #e23a75, #7554dc);
  box-shadow: 0 12px 0 rgba(0,0,0,0.08);
}

.international-meta span {
  border-radius: 999px !important;
  border: 0 !important;
  background: #eef6ff !important;
  color: var(--bq-navy) !important;
}

.international-footer {
  align-items: center !important;
}

.parent-bright-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  padding: 18px 22px;
  border: 2px solid #d8ecff;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff, #f3fbff);
  box-shadow: var(--bq-shadow);
}

.parent-bright-banner h3 {
  margin: 0;
  color: var(--bq-navy);
}

.parent-banner-orbit {
  position: relative;
  width: 150px;
  height: 92px;
}

.parent-banner-orbit::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 14px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: conic-gradient(var(--bq-green) 0 72%, #e8f1ff 72%);
}

.parent-banner-orbit span {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 12px;
  background: var(--bq-yellow);
  box-shadow: 0 8px 16px rgba(22,29,104,0.14);
}

.parent-banner-orbit span:nth-child(1) { right: 38px; top: 8px; background: var(--bq-blue); }
.parent-banner-orbit span:nth-child(2) { right: 16px; top: 42px; background: var(--bq-pink); }
.parent-banner-orbit span:nth-child(3) { right: 66px; bottom: 0; background: var(--bq-green); }

#parentScreen .parent-grid:first-of-type {
  grid-template-columns: minmax(260px, 0.34fr) minmax(0, 1fr) !important;
}

.parent-overview {
  grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
}

.parent-visual-stat,
.parent-chart-card,
.parent-focus-card,
.parent-layer-card,
.parent-attempt-card {
  border-radius: 18px !important;
  border: 2px solid #e2efff !important;
  background: #fff !important;
  box-shadow: 0 10px 22px rgba(22, 29, 104, 0.08) !important;
}

.parent-visual-stat {
  position: relative;
  overflow: hidden;
  min-height: 134px;
}

.parent-visual-stat::after {
  content: '';
  position: absolute;
  right: -18px;
  bottom: -22px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bq-blue), transparent 74%);
}

.parent-visual-stat:nth-child(2)::after { background: color-mix(in srgb, var(--bq-green), transparent 72%); }
.parent-visual-stat:nth-child(3)::after { background: color-mix(in srgb, var(--bq-yellow), transparent 66%); }
.parent-visual-stat:nth-child(4)::after { background: color-mix(in srgb, var(--bq-pink), transparent 72%); }

.parent-visual-stat strong {
  color: var(--bq-navy) !important;
}

.parent-chart-card {
  grid-column: span 2;
}

.parent-chart-card.compact {
  grid-column: span 1;
}

.parent-trend-line {
  stroke: var(--bq-green) !important;
  stroke-width: 7 !important;
}

.parent-trend-dot {
  fill: var(--bq-blue) !important;
  stroke: #fff !important;
  stroke-width: 4 !important;
}

.parent-axis { stroke: #d9e9ff !important; }

.parent-focus-bar i {
  background: linear-gradient(90deg, var(--bq-orange), var(--bq-pink)) !important;
}

.parent-panel-body.hidden {
  display: none !important;
}

#internationalGameScreen .app-header,
.international-game-shell {
  border: 2px solid #bfe2ff !important;
  background: #fff !important;
}

#internationalGameCanvas {
  border-radius: 22px !important;
  box-shadow: 0 20px 42px rgba(22,29,104,0.16) !important;
}

@keyframes bq-wiggle {
  0%, 100% { transform: rotate(-5deg) scale(1); }
  50% { transform: rotate(5deg) scale(1.05); }
}

@media (max-width: 980px) {
  .academy-hero,
  .role-panel,
  #profileScreen .hero-panel {
    grid-template-columns: 1fr !important;
  }

  .role-panel > :not(.bright-mascot-card),
  #profileScreen .hero-panel > :not(.bright-mascot-card) {
    grid-column: 1;
  }

  .bright-mascot-card {
    grid-column: 1;
    grid-row: auto;
    width: 104px;
  }

  .academy-map-art { min-height: 430px !important; }
  .academy-actions { grid-template-columns: 1fr !important; }
  .international-list { grid-template-columns: 1fr !important; }
  .parent-overview { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .parent-chart-card,
  .parent-chart-card.compact { grid-column: span 1; }
}

@media (max-width: 640px) {
  .app { padding: 12px !important; }
  .academy-copy h3 { font-size: 3.4rem !important; }
  .academy-map-art { min-height: 340px !important; }
  .parent-bright-banner { grid-template-columns: 1fr; }
  .parent-overview { grid-template-columns: 1fr !important; }
  .arena-hero-card { padding-right: 20px !important; padding-bottom: 168px !important; }
  .arena-hero-card::before { right: 50%; top: auto; bottom: 44px; transform: translateX(50%); }
  .arena-hero-card::after { right: 50%; top: auto; bottom: 16px; transform: translateX(50%); }
}

/* QA fixes after screenshot review. */
#dashboardScreen {
  padding-top: 48px;
}

#dashboardScreen > .switch-corner {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  min-height: 34px !important;
  padding: 7px 13px !important;
  border-radius: 13px !important;
  font-size: 0.78rem !important;
  box-shadow: 0 6px 0 rgba(22, 29, 104, 0.08), 0 12px 20px rgba(22, 29, 104, 0.1) !important;
}

#dashboardScreen .app-header .header-actions {
  padding-right: 0;
}

#parentScreen .parent-grid {
  align-items: start !important;
}

#parentScreen .parent-grid:first-of-type .parent-card:first-child {
  align-self: start !important;
}

.parent-profile-list {
  min-height: 0 !important;
}

/* QA typography refinement: keep hero playful without copy collision. */
.academy-copy h3 {
  max-width: 11ch !important;
  margin-bottom: 22px !important;
  font-size: clamp(2.6rem, 5vw, 5.35rem) !important;
  line-height: 0.94 !important;
}

.academy-copy p:not(.eyebrow) {
  margin-top: 0 !important;
  font-size: 1rem !important;
}

/* Merged clickable academy map + dashboard International section. */
.academy-hero.academy-map-merged {
  display: block !important;
  padding: clamp(16px, 2vw, 22px) !important;
  border-color: #bde4ff !important;
}

.academy-map-merged .academy-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  padding: 0 0 16px !important;
}

.academy-map-merged .academy-copy h3 {
  max-width: none !important;
  margin: 8px 0 8px !important;
  font-size: clamp(2.1rem, 4vw, 4.4rem) !important;
  line-height: 0.96 !important;
}

.academy-map-merged .academy-copy p:not(.eyebrow) {
  max-width: 58ch !important;
}

.academy-map-merged .academy-actions {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.academy-map-merged .academy-map-art {
  min-height: min(720px, 68vh) !important;
  border-radius: 20px !important;
  border: 2px solid #9ed8ff !important;
}

.academy-map-merged .academy-map-art::before {
  inset: 54px 46px 44px !important;
}

.academy-map-controls {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.map-control {
  position: absolute;
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas: "icon title" "icon sub";
  align-items: center;
  min-width: 210px;
  max-width: 250px;
  padding: 10px 14px 10px 10px;
  border: 4px solid #fff;
  border-radius: 20px;
  color: #fff;
  text-align: left;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 12px 0 rgba(22, 29, 104, 0.1), 0 22px 36px rgba(22, 29, 104, 0.18);
  transition: transform 160ms ease, filter 160ms ease;
}

.map-control:hover,
.map-control:focus-visible {
  transform: translateY(-5px) scale(1.02);
  filter: saturate(1.18);
  outline: 4px solid rgba(255, 213, 61, 0.42);
}

.map-control span {
  grid-area: icon;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 15px;
  color: var(--bq-navy);
  background: #fff;
  font-weight: 1000;
  box-shadow: 0 8px 14px rgba(22, 29, 104, 0.12);
}

.map-control strong {
  grid-area: title;
  font-size: 1rem;
  line-height: 1.05;
  text-shadow: 0 2px 0 rgba(0,0,0,0.16);
}

.map-control small {
  grid-area: sub;
  color: rgba(255,255,255,0.9);
  font-size: 0.78rem;
  font-weight: 1000;
}

.map-maths { left: 12%; top: 22%; background: linear-gradient(135deg, #6d5cff, #3e2da6); }
.map-english { right: 13%; top: 24%; background: linear-gradient(135deg, #22bd67, #0a8745); }
.map-reasoning { right: 17%; bottom: 28%; background: linear-gradient(135deg, #10a8cf, #076a8c); }
.map-world { left: 13%; bottom: 16%; background: linear-gradient(135deg, #1666f2, #1e2aad); }
.map-arcade { right: 13%; bottom: 10%; background: linear-gradient(135deg, #f6478f, #743fd0); }

.academy-map-merged .map-pin {
  opacity: 0.25 !important;
  transform: scale(0.74) !important;
}

.dashboard-world-section {
  margin: 18px 0;
  padding: clamp(16px, 2.3vw, 24px);
  border: 2px solid #bfe2ff;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--bq-shadow);
}

.world-section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}

.world-section-head h3 {
  margin: 4px 0 6px;
  color: var(--bq-navy);
  font-size: clamp(1.8rem, 3vw, 3.2rem);
  line-height: 1;
}

.world-section-head p:not(.eyebrow) {
  margin: 0;
  color: #4b5c7c;
  font-weight: 850;
}

.world-test-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.world-test-card {
  position: relative;
  overflow: hidden;
  min-height: 390px;
  padding: 176px 18px 18px;
  border: 2px solid #d8ecff;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(22, 29, 104, 0.08);
}

.world-card-art {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 160px;
  background: linear-gradient(180deg, #4fc3ff, #c4f0ff 68%, #eaf8ff 69%);
}

.world-card-art::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 48px;
  background: linear-gradient(90deg, rgba(22,100,200,0.25) 0 12%, transparent 12% 18%, rgba(22,100,200,0.2) 18% 30%, transparent 30% 40%, rgba(22,100,200,0.28) 40% 58%, transparent 58%), #55c775;
}

.world-flag,
.world-prize {
  position: absolute;
  display: block;
}

.world-flag {
  left: 28px;
  top: 48px;
  width: 82px;
  height: 48px;
  border-radius: 8px;
  background: linear-gradient(#fff 0 18%, #e43b48 18% 34%, #fff 34% 50%, #e43b48 50% 66%, #fff 66% 82%, #e43b48 82%);
  box-shadow: 0 8px 0 rgba(22, 29, 104, 0.09);
}

.world-card-1 .world-flag {
  background:
    linear-gradient(36deg, transparent 43%, #fff 43% 49%, #d91d3a 49% 55%, #fff 55% 61%, transparent 61%),
    linear-gradient(-36deg, transparent 43%, #fff 43% 49%, #d91d3a 49% 55%, #fff 55% 61%, transparent 61%),
    linear-gradient(90deg, transparent 42%, #fff 42% 58%, transparent 58%),
    linear-gradient(0deg, transparent 40%, #fff 40% 60%, transparent 60%),
    #244ca2;
}

.world-prize {
  right: 32px;
  top: 42px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #ffe67a 0 34%, #ffad24 35% 60%, transparent 61%), linear-gradient(135deg, #7554dc, #f6478f);
  box-shadow: 0 10px 0 rgba(22, 29, 104, 0.09);
}

.world-card-2 .world-prize {
  border-radius: 42% 42% 12px 12px;
  background: linear-gradient(135deg, #49d082, #1a9a56);
}

.world-card-3 .world-card-art {
  background: linear-gradient(180deg, #9e73ff, #d4c5ff 68%, #f2edff 69%);
}

.world-test-card h4 {
  margin: 8px 0;
  color: var(--bq-navy);
  font-size: 1.5rem;
}

.world-test-card p:not(.eyebrow) {
  color: #4b5c7c;
  font-weight: 850;
  min-height: 44px;
}

.world-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}

.world-card-meta span,
.question-loaded-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--bq-navy);
  background: #eef6ff;
  font-size: 0.78rem;
  font-weight: 1000;
}

.question-loaded-badge {
  margin: 12px 0;
  background: #fff6c7;
}

.world-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.world-card-actions .button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 980px) {
  .academy-map-merged .academy-copy,
  .world-section-head {
    grid-template-columns: 1fr;
  }

  .academy-map-merged .academy-map-art {
    min-height: 620px !important;
  }

  .map-control {
    min-width: 180px;
  }

  .map-maths { left: 6%; top: 16%; }
  .map-english { right: 6%; top: 18%; }
  .map-reasoning { right: 7%; bottom: 30%; }
  .map-world { left: 7%; bottom: 22%; }
  .map-arcade { right: 8%; bottom: 8%; }

  .world-test-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .academy-map-merged .academy-map-art {
    min-height: 760px !important;
  }

  .map-control {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: min(280px, calc(100% - 32px));
  }

  .map-control:hover,
  .map-control:focus-visible {
    transform: translateX(-50%) translateY(-5px) scale(1.02);
  }

  .map-maths { top: 10%; }
  .map-english { top: 26%; }
  .map-reasoning { top: 42%; bottom: auto; }
  .map-world { top: 58%; bottom: auto; }
  .map-arcade { top: 74%; bottom: auto; }

  .world-card-actions {
    grid-template-columns: 1fr;
  }
}

/* Reference-faithful dashboard: three-panel Bright Quest adventure layout. */
#dashboardScreen > .app-header,
#dashboardScreen > .academy-hero,
#dashboardInternationalSection,
#dashboardScreen > .dashboard-grid,
#dashboardScreen > .insight-grid {
  display: none !important;
}

#dashboardScreen {
  padding-top: 0 !important;
}

#dashboardScreen > .switch-corner {
  top: 12px !important;
  right: 18px !important;
}

.reference-dashboard {
  color: var(--bq-navy);
  background: #fff;
}

.reference-topbar {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(360px, 1.1fr) minmax(360px, 1fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
}

.reference-brand-left {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  align-items: center;
}

.reference-star-logo {
  position: relative;
  width: 92px;
  aspect-ratio: 1;
  border-radius: 23px;
  background: linear-gradient(145deg, #10176d, #2731a1);
  box-shadow: 0 12px 24px rgba(22,29,104,0.16);
}

.reference-star-logo span {
  position: absolute;
  inset: 17px;
  clip-path: polygon(50% 0, 62% 34%, 98% 34%, 68% 54%, 80% 90%, 50% 68%, 20% 90%, 32% 54%, 2% 34%, 38% 34%);
  background: linear-gradient(135deg, #fff37a, #ffc21f 70%, #ff8a19);
  filter: drop-shadow(0 6px 0 rgba(255,135,0,0.28));
}

.reference-star-logo span::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 49%;
  width: 24px;
  height: 7px;
  border-radius: 999px;
  background: var(--bq-navy);
  transform: translateX(-50%);
  box-shadow: -17px -13px 0 -2px var(--bq-navy), 17px -13px 0 -2px var(--bq-navy);
}

.reference-brand-left h3 {
  margin: 0 0 5px;
  font-size: 1.35rem;
}

.reference-brand-left p {
  margin: 0;
  color: #445474;
  font-weight: 800;
  line-height: 1.35;
}

.reference-title {
  text-align: center;
  font-size: clamp(3rem, 5.4vw, 5.7rem);
  line-height: 0.86;
  font-weight: 1000;
  letter-spacing: 0 !important;
}

.reference-title .b {
  color: #172079;
  text-shadow: 0 4px 0 rgba(23,32,121,0.12);
}

.reference-title .q {
  background: linear-gradient(90deg, #ff781c, #20b866 36%, #24a9f4 62%, #8559e7 78%, #f6478f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.reference-title small {
  display: block;
  margin-top: 10px;
  color: #20285b;
  font-size: 1.22rem;
  line-height: 1;
  font-weight: 950;
}

.reference-quick-actions {
  display: grid;
  grid-template-columns: repeat(6, minmax(56px, 1fr));
  gap: 12px;
}

.quick-action-ref {
  display: grid;
  gap: 8px;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--bq-navy);
  font-weight: 1000;
}

.quick-action-ref span {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 2px solid #e3eeff;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(22,29,104,0.1);
}

.quick-action-ref span::before {
  content: '';
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--bq-yellow), var(--bq-orange));
  clip-path: polygon(50% 0, 62% 34%, 98% 34%, 68% 54%, 80% 90%, 50% 68%, 20% 90%, 32% 54%, 2% 34%, 38% 34%);
}

.quick-action-ref.bolt span::before { clip-path: polygon(56% 0, 16% 53%, 45% 53%, 34% 100%, 84% 40%, 55% 40%); background: linear-gradient(135deg, #3864ff, #7d5cff); }
.quick-action-ref.shield span::before { clip-path: polygon(50% 0, 88% 16%, 82% 62%, 50% 100%, 18% 62%, 12% 16%); background: linear-gradient(135deg, #6554e8, #3344c8); }
.quick-action-ref.gift span::before { clip-path: inset(14% 8% 10% 8% round 6px); background: linear-gradient(135deg, #7d5cff, #5e43dc); }
.quick-action-ref.grammar span::before { clip-path: polygon(14% 14%, 86% 14%, 86% 32%, 36% 32%, 36% 45%, 78% 45%, 78% 62%, 36% 62%, 36% 80%, 88% 80%, 88% 96%, 14% 96%); background: linear-gradient(135deg, #1fbd68, #36c5ff); }
.quick-action-ref.chalk span::before { clip-path: polygon(8% 18%, 92% 18%, 92% 72%, 54% 72%, 50% 86%, 46% 72%, 8% 72%); background: linear-gradient(135deg, #163d35, #78e4eb); }
.quick-action-ref.chart span::before { clip-path: polygon(8% 82%, 8% 64%, 34% 64%, 34% 42%, 58% 42%, 58% 24%, 90% 24%, 90% 42%, 66% 42%, 66% 60%, 42% 60%, 42% 82%); background: linear-gradient(135deg, #2e68ff, #7656ec); }

.quick-action-ref small {
  font-size: 0.72rem;
}

.reference-layout {
  display: grid;
  grid-template-columns: 1.04fr 1.13fr 1.14fr;
  gap: 12px;
  align-items: start;
}

.reference-panel {
  overflow: hidden;
  border: 2px solid #bee4ff;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(22,29,104,0.08);
}

.reference-panel-title {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 10px 18px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 1000;
}

.reference-panel-title span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: inherit;
}

.reference-panel-title.green { background: linear-gradient(90deg, #1cae64, #0b9250); color: #109255; }
.reference-panel-title.purple { background: linear-gradient(90deg, #6b50db, #5937bf); color: #633fd0; }
.reference-panel-title.blue { background: linear-gradient(90deg, #1a9cef, #0877d2); color: #1086df; }
.reference-panel-title strong { color: #fff; font-size: 1.12rem; }
.reference-panel-title em { color: rgba(255,255,255,0.9); font-style: normal; font-size: 0.78rem; }

.adventure-island {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  margin: 8px;
  border-radius: 7px;
  border: 2px solid #9bdcff;
  background:
    radial-gradient(circle at 12% 28%, #fff 0 28px, transparent 29px),
    radial-gradient(circle at 17% 33%, rgba(255,255,255,0.62) 0 38px, transparent 39px),
    linear-gradient(180deg, #59caff 0 28%, #76d8ff 28% 48%, #24b978 48% 100%);
}

.adventure-island::before {
  content: '';
  position: absolute;
  left: 34px;
  right: 38px;
  top: 92px;
  bottom: 74px;
  border-radius: 48% 52% 45% 55%;
  background:
    radial-gradient(circle at 22% 25%, #e8f5a6 0 10%, transparent 11%),
    radial-gradient(circle at 63% 18%, #dbf1a4 0 11%, transparent 12%),
    radial-gradient(circle at 74% 50%, #bde980 0 12%, transparent 13%),
    radial-gradient(circle at 28% 68%, #f5dd7d 0 11%, transparent 12%),
    linear-gradient(135deg, #49c86a 0 34%, #75d66f 34% 46%, #f1d15e 46% 52%, #43bd69 52% 100%);
  border: 10px solid rgba(255,255,255,0.86);
  box-shadow: 0 0 0 34px rgba(3,128,202,0.15), 0 18px 0 rgba(20,80,130,0.12);
}

.adventure-island::after {
  content: '';
  position: absolute;
  left: 84px;
  right: 88px;
  top: 210px;
  height: 310px;
  border-top: 11px dotted rgba(255,255,255,0.86);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.student-badge,
.map-pill,
.side-quests,
.island-label,
.island-progress {
  position: absolute;
  z-index: 4;
}

.student-badge {
  left: 14px;
  top: 14px;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 8px;
  align-items: center;
  width: 210px;
  padding: 9px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 20px rgba(22,29,104,0.12);
}

.student-face {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 40%, #1c245f 0 5px, transparent 6px), radial-gradient(circle at 64% 40%, #1c245f 0 5px, transparent 6px), radial-gradient(circle at 50% 62%, #a84e2a 0 9px, transparent 10px), #f6b06d;
  box-shadow: inset 0 10px 0 #5b341c;
}

.student-badge strong,
.student-badge small { display: block; }
.student-badge small { color: #6b7899; font-weight: 900; }
.student-badge i,
.resume-quest-ref i { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: #e7ebff; }
.student-badge b,
.resume-quest-ref b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7d5cff, #37d47e); }

.map-pill {
  top: 30px;
  min-width: 104px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #fff;
  color: var(--bq-navy);
  font-weight: 1000;
  box-shadow: 0 10px 20px rgba(22,29,104,0.1);
}
.star-pill { left: 238px; }
.streak-pill { left: 358px; }

.island-label {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-areas: "icon title" "icon sub";
  align-items: center;
  min-width: 190px;
  padding: 9px 13px 9px 9px;
  border: 4px solid #fff;
  border-radius: 17px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 11px 0 rgba(22,29,104,0.12), 0 20px 28px rgba(22,29,104,0.2);
  transition: transform 150ms ease;
}

.island-label:hover,
.island-label:focus-visible { transform: translateY(-5px) scale(1.02); outline: 4px solid rgba(255,213,61,0.5); }
.island-label span { grid-area: icon; display: grid; width: 47px; height: 47px; place-items: center; border-radius: 13px; color: var(--bq-navy); background: #fff; font-weight: 1000; }
.island-label strong { grid-area: title; font-size: 0.95rem; line-height: 1.05; text-shadow: 0 2px 0 rgba(0,0,0,0.17); }
.island-label small { grid-area: sub; color: rgba(255,255,255,0.92); font-weight: 1000; }

.label-maths { left: 116px; top: 220px; background: linear-gradient(135deg, #6652e2, #32218f); }
.label-english { right: 76px; top: 205px; background: linear-gradient(135deg, #25bf67, #0b8e49); }
.label-grammar { left: 82px; top: 430px; background: linear-gradient(135deg, #7657e7, #5630bf); }
.label-reason { right: 72px; top: 430px; background: linear-gradient(135deg, #16abd0, #076c91); }
.label-world { left: 90px; bottom: 92px; background: linear-gradient(135deg, #1c7bf2, #1720a0); }
.label-arcade { right: 86px; bottom: 90px; background: linear-gradient(135deg, #302584, #1a185e); }
.island-progress { right: 10px; bottom: 18px; border: 4px solid #fff; border-radius: 16px; padding: 10px 16px; color: #fff; background: linear-gradient(135deg, #20b866, #0d8750); font-weight: 1000; box-shadow: 0 12px 22px rgba(22,29,104,0.14); }

.side-quests { right: 12px; top: 90px; display: grid; gap: 12px; }
.side-quests span { display: grid; width: 70px; height: 62px; place-items: center; border-radius: 12px; background: #fff; color: var(--bq-navy); font-size: 0.72rem; font-weight: 1000; box-shadow: 0 10px 18px rgba(22,29,104,0.11); }

.achievement-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 10px;
}
.achievement { display: grid; gap: 4px; place-items: center; min-height: 96px; border: 1px solid #e3eeff; border-radius: 12px; background: #fff; text-align: center; }
.achievement span { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, #ffd53d, #ff8617); }
.achievement strong { font-size: 0.75rem; }
.achievement small { color: #60708f; font-size: 0.68rem; font-weight: 850; }

.academy-panel-ref { padding-bottom: 10px; }
.academy-player-strip { display: grid; grid-template-columns: 54px 1fr repeat(3, minmax(82px, auto)); gap: 14px; align-items: center; margin: 8px; padding: 12px; border-radius: 8px; color: #fff; background: linear-gradient(90deg, #151974, #232189); }
.academy-player-strip strong,
.academy-player-strip small { display: block; }
.academy-player-strip b { color: #ffd53d; font-size: 1.2rem; }
.academy-player-strip small { color: rgba(255,255,255,0.82); font-weight: 850; }

.academy-card-grid-ref { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 10px; }
.academy-tile-ref { position: relative; min-height: 188px; overflow: hidden; border: 0; border-radius: 10px; padding: 16px; color: #fff; text-align: left; box-shadow: 0 12px 0 rgba(22,29,104,0.08), 0 18px 28px rgba(22,29,104,0.13); cursor: pointer; }
.academy-tile-ref span { position: absolute; right: 18px; top: 54px; display: grid; min-width: 70px; height: 64px; place-items: center; border-radius: 14px; color: #fff; font-weight: 1000; font-size: 1.5rem; background: rgba(255,255,255,0.24); border: 4px solid rgba(255,255,255,0.78); }
.academy-tile-ref strong { display: block; font-size: 1.06rem; }
.academy-tile-ref small { display: block; margin-top: 6px; color: rgba(255,255,255,0.88); font-weight: 850; }
.academy-tile-ref i { position: absolute; left: 16px; right: 16px; bottom: 14px; height: 24px; border-radius: 999px; background: rgba(255,255,255,0.9); color: var(--bq-navy); font-style: normal; font-size: 0.78rem; font-weight: 1000; padding: 4px 10px; }
.academy-tile-ref.maths { background: linear-gradient(150deg, #7665ff, #34228d); }
.academy-tile-ref.english { background: linear-gradient(150deg, #29bf65, #0c8747); }
.academy-tile-ref.grammar { background: linear-gradient(150deg, #ffc640, #f08b14); }
.academy-tile-ref.reason { background: linear-gradient(150deg, #18b6d2, #086b91); }
.academy-tile-ref.world { background: linear-gradient(150deg, #1b6ff2, #171f9f); }
.academy-tile-ref.arcade { background: linear-gradient(150deg, #f5538a, #bd205e); }

.resume-quest-ref { display: grid; grid-template-columns: 62px 1fr auto; gap: 14px; align-items: center; margin: 8px 10px; padding: 12px 16px; border-radius: 12px; color: #fff; background: linear-gradient(90deg, #5140d2, #2b2fbd); }
.bot-face { width: 54px; height: 54px; border-radius: 18px; background: radial-gradient(circle at 38% 44%, #fff 0 5px, transparent 6px), radial-gradient(circle at 62% 44%, #fff 0 5px, transparent 6px), #1c9df5; box-shadow: inset 0 -10px 0 rgba(0,0,0,0.16); }
.resume-quest-ref small { display: block; color: rgba(255,255,255,0.82); font-weight: 850; }

.progress-dials-ref { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 10px; }
.dial-card { display: grid; place-items: center; min-height: 120px; border: 1px solid #e3eeff; border-radius: 12px; background: #fff; text-align: center; }
.dial-card span { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 50%; background: conic-gradient(#22bd67 0 var(--pct), #e8f1ff var(--pct)); color: var(--bq-navy); font-weight: 1000; }
.dial-card strong { font-size: 0.78rem; }
.dial-card small { color: #60708f; font-size: 0.7rem; font-weight: 850; }
.dial-card.tests strong { font-size: 2.4rem; }

.world-panel-ref { padding-bottom: 10px; }
.world-hero-ref { position: relative; display: grid; grid-template-columns: 1fr 130px; align-items: center; min-height: 134px; margin: 8px; padding: 18px 22px; border: 2px solid #d8ecff; border-radius: 12px; background: #fff; }
.world-hero-ref h3 { margin: 0 0 8px; font-size: 2rem; color: var(--bq-navy); }
.world-hero-ref p { margin: 0; color: #60708f; font-weight: 850; }
.big-trophy { width: 112px; height: 92px; border-radius: 20px 20px 44px 44px; background: linear-gradient(135deg, #ffd53d, #ff9e18); box-shadow: inset 0 -15px 0 rgba(168,96,0,0.12); }

.international-cards-ref { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 10px; }
.intl-card-ref { overflow: hidden; border: 1px solid #d8ecff; border-radius: 12px; background: #fff; box-shadow: 0 10px 20px rgba(22,29,104,0.08); }
.intl-art-ref { position: relative; height: 150px; background: linear-gradient(180deg, #4fc3ff, #c6efff 70%, #eaf8ff 71%); }
.intl-art-ref::after { content: ''; position: absolute; inset: auto 0 0; height: 44px; background: linear-gradient(90deg, rgba(22,100,200,0.24) 0 18%, transparent 18% 28%, rgba(22,100,200,0.22) 28% 48%, transparent 48%), #57c875; }
.intl-art-ref span { position: absolute; left: 28px; top: 54px; width: 82px; height: 48px; border-radius: 8px; background: linear-gradient(#fff 0 18%, #e43b48 18% 34%, #fff 34% 50%, #e43b48 50% 66%, #fff 66% 82%, #e43b48 82%); box-shadow: 0 8px 0 rgba(22,29,104,0.1); }
.intl-1 .intl-art-ref span { background: linear-gradient(36deg, transparent 43%, #fff 43% 49%, #d91d3a 49% 55%, #fff 55% 61%, transparent 61%), linear-gradient(-36deg, transparent 43%, #fff 43% 49%, #d91d3a 49% 55%, #fff 55% 61%, transparent 61%), linear-gradient(90deg, transparent 42%, #fff 42% 58%, transparent 58%), linear-gradient(0deg, transparent 40%, #fff 40% 60%, transparent 60%), #244ca2; }
.intl-3 .intl-art-ref { background: linear-gradient(180deg, #9e73ff, #d1c2ff 70%, #f2edff 71%); }
.intl-3 .intl-art-ref span { left: 50%; transform: translateX(-50%); width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle, #ffe16a 0 34%, #ff9e18 35% 62%, transparent 63%), linear-gradient(135deg, #f5538a, #7554dc); }
.intl-card-ref h4 { margin: 14px 16px 10px; font-size: 1.08rem; color: var(--bq-navy); }
.intl-tags, .intl-skills { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.intl-tags span, .intl-skills span { padding: 5px 8px; border-radius: 999px; background: #eef6ff; color: var(--bq-navy); font-size: 0.68rem; font-weight: 1000; }
.intl-skills span:nth-child(3) { background: #ffe8ea; color: #e43b48; }
.intl-skills span:nth-child(4) { background: #fff1ce; color: #d97800; }
.intl-bottom { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; padding: 4px 16px 16px; }
.intl-bottom small { color: #60708f; font-weight: 850; }
.intl-bottom b { color: var(--bq-navy); font-size: 1.1rem; }

.reward-games-ref { display: grid; grid-template-columns: 1fr repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 10px 10px; padding: 12px; border: 2px solid #d8ecff; border-radius: 12px; background: #f7fbff; }
.games-head-ref strong, .games-head-ref span { display: block; }
.games-head-ref span { color: #60708f; font-size: 0.78rem; font-weight: 850; }
.game-card-ref { display: grid; grid-template-columns: 48px 1fr; gap: 8px; align-items: center; min-height: 76px; border: 0; border-radius: 12px; color: #fff; text-align: left; padding: 10px; background: linear-gradient(135deg, #1666f2, #7554dc); box-shadow: 0 8px 16px rgba(22,29,104,0.12); }
.game-card-ref[disabled] { opacity: 0.58; cursor: not-allowed; }
.game-card-ref span { width: 42px; height: 42px; border-radius: 14px; background: #fff; }
.game-card-ref strong, .game-card-ref small { display: block; }
.game-card-ref small { color: rgba(255,255,255,0.84); font-weight: 850; }
.game-2 { background: linear-gradient(135deg, #f6478f, #18a8f2); }
.game-3 { background: linear-gradient(135deg, #302584, #16abd0); }

.arena-stats-ref { display: grid; grid-template-columns: 100px repeat(4, 1fr); gap: 12px; align-items: center; margin: 10px; padding: 14px; border: 2px solid #d8ecff; border-radius: 12px; background: #eef8ff; }
.mini-globe { width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(circle at 35% 34%, #9eea42 0 16%, transparent 17%), radial-gradient(circle at 62% 64%, #9eea42 0 18%, transparent 19%), linear-gradient(135deg, #36c5ff, #126cf2); }
.arena-stats-ref b { display: block; color: #45608c; font-size: 0.72rem; }
.arena-stats-ref i { display: block; height: 5px; border-radius: 999px; background: linear-gradient(90deg, #1a9cef, #7554dc); }
.parent-preview-ref { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; margin: 10px; padding: 14px 16px; border: 2px solid #e0c9ff; border-radius: 12px; background: #fff8ff; }
.parent-preview-ref strong, .parent-preview-ref small { display: block; }
.parent-preview-ref small { color: #60708f; font-weight: 850; }

@media (max-width: 1250px) {
  .reference-topbar,
  .reference-layout { grid-template-columns: 1fr; }
  .reference-title { order: -1; }
  .adventure-island { min-height: 680px; }
}

@media (max-width: 760px) {
  .reference-brand-left,
  .academy-player-strip,
  .resume-quest-ref,
  .world-hero-ref,
  .reward-games-ref,
  .arena-stats-ref,
  .parent-preview-ref { grid-template-columns: 1fr; }
  .reference-quick-actions,
  .academy-card-grid-ref,
  .international-cards-ref,
  .progress-dials-ref,
  .achievement-strip { grid-template-columns: repeat(2, 1fr); }
  .adventure-island { min-height: 840px; }
  .island-label { left: 50% !important; right: auto !important; transform: translateX(-50%); }
  .island-label:hover, .island-label:focus-visible { transform: translateX(-50%) translateY(-5px) scale(1.02); }
  .label-maths { top: 130px; }
  .label-english { top: 245px; }
  .label-grammar { top: 360px; }
  .label-reason { top: 475px; }
  .label-world { bottom: 145px; }
  .label-arcade { bottom: 34px; }
  .student-badge, .map-pill, .side-quests, .island-progress { display: none; }
}

/* Reference QA refinement: keep title single-line and reduce map/tile crowding. */
.reference-topbar {
  grid-template-columns: minmax(300px, 0.85fr) minmax(520px, 1.1fr) minmax(420px, 0.95fr) !important;
}

.reference-title {
  white-space: nowrap;
  font-size: clamp(3rem, 4.6vw, 5rem) !important;
}

.reference-title small {
  white-space: normal;
  font-size: 1.08rem !important;
}

.reference-brand-left {
  grid-template-columns: 80px 1fr !important;
}

.reference-star-logo {
  width: 78px !important;
  border-radius: 20px !important;
}

.reference-quick-actions {
  gap: 8px !important;
}

.quick-action-ref span {
  width: 48px !important;
  height: 48px !important;
}

.adventure-island {
  min-height: 780px !important;
}

.island-label {
  min-width: 158px !important;
  max-width: 178px !important;
  grid-template-columns: 46px 1fr !important;
  padding: 8px 10px 8px 8px !important;
}

.island-label span {
  width: 39px !important;
  height: 39px !important;
  font-size: 0.82rem !important;
}

.island-label strong {
  font-size: 0.8rem !important;
}

.island-label small {
  font-size: 0.68rem !important;
}

.label-maths { left: 74px !important; top: 176px !important; z-index: 7 !important; }
.label-english { right: 42px !important; top: 214px !important; z-index: 8 !important; }
.label-grammar { left: 58px !important; top: 420px !important; z-index: 8 !important; }
.label-reason { right: 42px !important; top: 455px !important; z-index: 8 !important; }
.label-world { left: 64px !important; bottom: 96px !important; z-index: 8 !important; }
.label-arcade { right: 52px !important; bottom: 88px !important; z-index: 8 !important; }

.map-pill {
  min-width: 88px !important;
  padding: 10px 12px !important;
  font-size: 0.78rem !important;
}

.star-pill { left: 230px !important; }
.streak-pill { left: 332px !important; }

.academy-card-grid-ref {
  gap: 10px !important;
}

.academy-tile-ref {
  min-height: 178px !important;
  padding: 14px !important;
}

.academy-tile-ref::before {
  content: '';
  position: absolute;
  inset: auto -20px -34px auto;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
}

.academy-tile-ref strong,
.academy-tile-ref small,
.academy-tile-ref i {
  position: relative;
  z-index: 2;
}

.academy-tile-ref span {
  right: 12px !important;
  top: 58px !important;
  min-width: 58px !important;
  height: 54px !important;
  font-size: 1.08rem !important;
  opacity: 0.72;
}

.academy-tile-ref strong {
  max-width: 8.5ch;
  font-size: 0.92rem !important;
}

.academy-tile-ref small {
  max-width: 11ch;
  font-size: 0.72rem !important;
}

.world-hero-ref {
  min-height: 126px !important;
}

.world-hero-ref h3 {
  font-size: 1.82rem !important;
}

.intl-card-ref h4 {
  min-height: 42px;
}

.intl-tags span,
.intl-skills span {
  font-size: 0.62rem !important;
}

@media (max-width: 1450px) {
  .reference-topbar {
    grid-template-columns: 1fr !important;
  }

  .reference-title {
    order: -1;
    white-space: normal;
  }
}

/* Middle-column QA refinement: compact Training Academy tiles like the reference. */
.academy-card-grid-ref {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 10px !important;
}

.academy-tile-ref {
  min-height: 154px !important;
  padding: 14px 14px 12px !important;
  border-radius: 10px !important;
}

.academy-tile-ref span {
  top: 54px !important;
  right: 12px !important;
  min-width: 52px !important;
  width: 52px !important;
  height: 48px !important;
  border-width: 3px !important;
  border-radius: 12px !important;
  font-size: 0.96rem !important;
}

.academy-tile-ref strong {
  max-width: 8ch !important;
  font-size: 0.88rem !important;
  line-height: 1.06 !important;
}

.academy-tile-ref small {
  max-width: 10ch !important;
  margin-top: 5px !important;
  font-size: 0.68rem !important;
  line-height: 1.12 !important;
}

.academy-tile-ref i {
  left: 12px !important;
  right: 12px !important;
  bottom: 10px !important;
  height: 22px !important;
  padding: 4px 9px !important;
  font-size: 0.68rem !important;
}

.academy-player-strip {
  margin: 8px 10px !important;
  padding: 10px 12px !important;
}

.resume-quest-ref {
  margin: 8px 10px !important;
  padding: 10px 14px !important;
}

.progress-dials-ref {
  padding: 8px 10px 10px !important;
  gap: 10px !important;
}

.dial-card {
  min-height: 104px !important;
}

.dial-card span {
  width: 54px !important;
  height: 54px !important;
  font-size: 0.86rem !important;
}

/* Middle-column icon refinement: smaller marks, no text overlap. */
.academy-tile-ref {
  display: grid !important;
  align-content: start !important;
  gap: 5px !important;
  padding-right: 66px !important;
}

.academy-tile-ref span {
  top: 48px !important;
  right: 12px !important;
  min-width: 42px !important;
  width: 42px !important;
  height: 42px !important;
  border-width: 3px !important;
  border-radius: 11px !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
  opacity: 0.82 !important;
}

.academy-tile-ref.maths span,
.academy-tile-ref.reason span,
.academy-tile-ref.world span,
.academy-tile-ref.arcade span {
  font-size: 0.8rem !important;
}

.academy-tile-ref.english span,
.academy-tile-ref.grammar span {
  font-size: 0.68rem !important;
}

.academy-tile-ref strong,
.academy-tile-ref small {
  max-width: 100% !important;
}

.academy-tile-ref i {
  right: 12px !important;
}

.island-label span {
  font-size: 0.72rem !important;
}

.label-maths span {
  font-size: 0.7rem !important;
}

/* Back-to-reference adventure map: real island cluster instead of a flat oval. */
.adventure-island {
  background:
    radial-gradient(circle at 12% 24%, rgba(255,255,255,0.9) 0 24px, transparent 25px),
    radial-gradient(circle at 22% 18%, rgba(255,255,255,0.55) 0 34px, transparent 35px),
    linear-gradient(180deg, #58c9ff 0 40%, #38bffa 40% 62%, #11aedd 62% 100%) !important;
}

.adventure-island::before,
.adventure-island::after {
  display: none !important;
}

.archipelago-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.sea-ring {
  position: absolute;
  left: 38px;
  right: 40px;
  top: 86px;
  bottom: 74px;
  border-radius: 44% 56% 48% 52%;
  background: rgba(0, 126, 179, 0.22);
  box-shadow: inset 0 0 0 20px rgba(255,255,255,0.16);
}

.landmass {
  position: absolute;
  border: 9px solid rgba(255,255,255,0.92);
  box-shadow:
    0 16px 0 rgba(22, 80, 126, 0.14),
    0 0 0 9px rgba(37, 180, 214, 0.28),
    inset 0 -24px 0 rgba(21, 139, 68, 0.1);
}

.landmass::before,
.landmass::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(198, 239, 132, 0.85);
  box-shadow: 0 0 10px rgba(58, 136, 49, 0.18);
}

.land-north {
  left: 152px;
  top: 104px;
  width: 258px;
  height: 204px;
  border-radius: 58% 42% 47% 53% / 44% 57% 43% 56%;
  background:
    radial-gradient(circle at 72% 28%, #7ce073 0 22%, transparent 23%),
    radial-gradient(circle at 28% 66%, #b8ef76 0 18%, transparent 19%),
    linear-gradient(135deg, #72d96f 0 43%, #4fc56d 44% 68%, #32b45c 69% 100%);
}

.land-north::before { left: 36px; top: 58px; width: 76px; height: 76px; }
.land-north::after { right: 34px; top: 38px; width: 64px; height: 64px; }

.land-west {
  left: 70px;
  top: 286px;
  width: 250px;
  height: 250px;
  border-radius: 43% 57% 52% 48% / 57% 42% 58% 43%;
  background:
    radial-gradient(circle at 30% 38%, #c7f083 0 18%, transparent 19%),
    radial-gradient(circle at 66% 72%, #91e66c 0 20%, transparent 21%),
    linear-gradient(135deg, #7ade72 0 34%, #f3d86d 35% 45%, #4cc86b 46% 100%);
}

.land-west::before { left: 34px; top: 48px; width: 86px; height: 86px; }
.land-west::after { right: 44px; bottom: 34px; width: 70px; height: 70px; }

.land-east {
  right: 48px;
  top: 292px;
  width: 226px;
  height: 242px;
  border-radius: 61% 39% 48% 52% / 42% 58% 43% 57%;
  background:
    radial-gradient(circle at 34% 30%, #80de6d 0 18%, transparent 19%),
    radial-gradient(circle at 70% 70%, #bdeb82 0 22%, transparent 23%),
    linear-gradient(140deg, #4fd06e 0 48%, #f0d15e 49% 59%, #39b966 60% 100%);
}

.land-east::before { left: 54px; top: 46px; width: 74px; height: 74px; }
.land-east::after { right: 26px; bottom: 34px; width: 84px; height: 84px; }

.land-south {
  left: 155px;
  bottom: 78px;
  width: 278px;
  height: 202px;
  border-radius: 48% 52% 40% 60% / 55% 42% 58% 45%;
  background:
    radial-gradient(circle at 30% 42%, #b7ec79 0 20%, transparent 21%),
    radial-gradient(circle at 70% 48%, #86df66 0 19%, transparent 20%),
    linear-gradient(135deg, #51cd6b 0 36%, #f1d15f 37% 49%, #37b861 50% 100%);
}

.land-south::before { left: 46px; top: 38px; width: 82px; height: 82px; }
.land-south::after { right: 42px; top: 54px; width: 70px; height: 70px; }

.land-tiny-one {
  left: 74px;
  top: 180px;
  width: 72px;
  height: 56px;
  border-width: 6px;
  border-radius: 56% 44% 46% 54%;
  background: linear-gradient(135deg, #70d66e, #3dbb66);
}

.land-tiny-two {
  right: 72px;
  bottom: 226px;
  width: 84px;
  height: 66px;
  border-width: 6px;
  border-radius: 44% 56% 54% 46%;
  background: linear-gradient(135deg, #7bdd73, #43be69);
}

.coast-reef {
  position: absolute;
  z-index: 1;
  border: 4px solid rgba(255,255,255,0.55);
  border-radius: 50%;
  pointer-events: none;
}

.reef-one {
  left: 124px;
  top: 92px;
  width: 330px;
  height: 260px;
  transform: rotate(-9deg);
}

.reef-two {
  left: 44px;
  top: 258px;
  width: 330px;
  height: 300px;
  transform: rotate(18deg);
}

.reef-three {
  left: 120px;
  bottom: 48px;
  width: 330px;
  height: 238px;
  transform: rotate(7deg);
}

.map-road {
  position: absolute;
  z-index: 2;
  border: 7px dotted rgba(255,255,255,0.86);
  border-color: rgba(255,255,255,0.86) transparent transparent transparent;
}

.road-main {
  left: 108px;
  top: 240px;
  width: 340px;
  height: 380px;
  border-radius: 50%;
  transform: rotate(-23deg);
}

.road-loop {
  left: 178px;
  top: 158px;
  width: 230px;
  height: 190px;
  border-radius: 50%;
  transform: rotate(18deg);
}

.road-south {
  left: 164px;
  bottom: 150px;
  width: 258px;
  height: 210px;
  border-radius: 50%;
  transform: rotate(12deg);
}

.map-bridge {
  position: absolute;
  z-index: 3;
  width: 80px;
  height: 16px;
  border-radius: 8px;
  background: repeating-linear-gradient(90deg, #ba7a38 0 10px, #f0c46f 10px 18px);
  border: 3px solid #fff3c8;
  box-shadow: 0 6px 0 rgba(64, 60, 90, 0.12);
}

.bridge-one { left: 275px; top: 294px; transform: rotate(-22deg); }
.bridge-two { left: 296px; bottom: 264px; transform: rotate(18deg); }
.bridge-three { left: 236px; bottom: 188px; transform: rotate(-8deg); }

.map-prop,
.map-boat {
  position: absolute;
  z-index: 3;
}

.mountain-prop {
  left: 130px;
  top: 142px;
  width: 114px;
  height: 104px;
  clip-path: polygon(0 100%, 34% 20%, 48% 54%, 66% 0, 100% 100%);
  background: linear-gradient(135deg, #5650c8, #d6ecff);
  filter: drop-shadow(0 10px 0 rgba(30, 50, 120, 0.12));
}

.forest-prop {
  right: 126px;
  top: 154px;
  width: 84px;
  height: 96px;
  background: radial-gradient(circle at 50% 22%, #2aa95d 0 20px, transparent 21px), radial-gradient(circle at 28% 48%, #35be6e 0 22px, transparent 23px), radial-gradient(circle at 70% 50%, #269d57 0 24px, transparent 25px), linear-gradient(#8b5e34, #8b5e34) 48% 62% / 14px 38px no-repeat;
}

.castle-prop {
  right: 70px;
  bottom: 120px;
  width: 98px;
  height: 82px;
  background: linear-gradient(#d9e4ff, #aab9df);
  clip-path: polygon(0 100%, 0 32%, 12% 32%, 12% 12%, 25% 12%, 25% 32%, 42% 32%, 42% 10%, 58% 10%, 58% 32%, 75% 32%, 75% 12%, 88% 12%, 88% 32%, 100% 32%, 100% 100%);
  box-shadow: inset 0 -12px 0 rgba(86, 92, 150, 0.18);
}

.lab-prop {
  right: 116px;
  top: 390px;
  width: 58px;
  height: 96px;
  clip-path: polygon(36% 0, 64% 0, 64% 34%, 92% 100%, 8% 100%, 36% 34%);
  background: linear-gradient(135deg, #d9fcff, #53cee6);
  box-shadow: inset 0 -22px 0 rgba(8, 134, 160, 0.2);
}

.arena-prop {
  left: 128px;
  bottom: 106px;
  width: 124px;
  height: 74px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #1d6df2 0 34%, #fff 35% 43%, #e45a4a 44% 56%, #fff 57% 65%, #26b56b 66% 100%);
  box-shadow: 0 10px 0 rgba(20, 50, 120, 0.1);
}

.tower-prop {
  right: 70px;
  top: 196px;
  width: 54px;
  height: 74px;
  background: linear-gradient(#f7e0a6, #c99552);
  clip-path: polygon(20% 100%, 20% 28%, 36% 28%, 36% 0, 64% 0, 64% 28%, 80% 28%, 80% 100%);
  box-shadow: inset 0 -12px 0 rgba(114, 70, 26, 0.12);
}

.tree-cluster {
  position: absolute;
  z-index: 4;
  width: 86px;
  height: 64px;
  background:
    radial-gradient(circle at 18% 48%, #208e4e 0 14px, transparent 15px),
    radial-gradient(circle at 42% 28%, #2ebd63 0 18px, transparent 19px),
    radial-gradient(circle at 68% 48%, #17894a 0 15px, transparent 16px),
    linear-gradient(#8b5e34, #8b5e34) 50% 54% / 10px 28px no-repeat;
}

.trees-one { left: 260px; top: 150px; }
.trees-two { left: 134px; top: 346px; }
.trees-three { right: 126px; bottom: 134px; }

.map-boat {
  width: 34px;
  height: 22px;
  clip-path: polygon(0 45%, 100% 45%, 75% 100%, 20% 100%);
  background: #d84d37;
  box-shadow: 0 7px 0 rgba(10, 70, 120, 0.1);
}

.map-boat::before {
  content: '';
  position: absolute;
  left: 14px;
  top: -22px;
  width: 18px;
  height: 24px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: #fff;
}

.boat-one { left: 62px; top: 184px; transform: rotate(-18deg); }
.boat-two { right: 44px; bottom: 248px; transform: rotate(16deg); }

/* Make the academy tile glyphs truly small, like icons rather than big boxes. */
.academy-tile-ref {
  min-height: 142px !important;
  padding: 12px 12px 10px !important;
  padding-right: 52px !important;
}

.academy-tile-ref span {
  top: 46px !important;
  right: 10px !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  border-width: 2px !important;
  font-size: 0.58rem !important;
}

.academy-tile-ref.maths span,
.academy-tile-ref.reason span,
.academy-tile-ref.world span,
.academy-tile-ref.arcade span {
  font-size: 0.6rem !important;
}

.academy-tile-ref strong {
  font-size: 0.82rem !important;
}

.academy-tile-ref small {
  font-size: 0.62rem !important;
}

.academy-tile-ref i {
  height: 20px !important;
  bottom: 9px !important;
  font-size: 0.62rem !important;
}

@media (max-width: 760px) {
  .archipelago-art { transform: scale(0.92); transform-origin: center; }
}

/* Parent cockpit redesign: decision first, details on demand. */
#parentScreen.parent-cockpit-redesign {
  max-width: 1320px;
  margin-inline: auto;
}

#parentScreen.parent-cockpit-redesign .parent-corner-actions,
#parentScreen.parent-cockpit-redesign #parentRefreshButton,
#parentScreen.parent-cockpit-redesign .parent-bright-banner {
  display: none !important;
}

#parentScreen.parent-cockpit-redesign .app-header {
  position: relative !important;
  z-index: 100 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 18px 22px !important;
}

.cockpit-title-block h2 {
  margin: 0 !important;
  font-size: clamp(2.2rem, 4.5vw, 4.8rem) !important;
  line-height: 0.95 !important;
}

.cockpit-header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.parent-child-picker {
  display: grid;
  gap: 4px;
  color: #60708f;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.parent-child-picker select {
  min-width: 150px;
  min-height: 44px;
  border: 2px solid #dcecff;
  border-radius: 14px;
  background: #fff;
  color: var(--bq-navy);
  font-weight: 1000;
  padding: 0 36px 0 12px;
}

.parent-options-wrap {
  position: relative;
}

.parent-options-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 5000;
  display: grid;
  min-width: 210px;
  padding: 8px;
  border: 2px solid #dcecff;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(22, 29, 104, 0.18);
}

.parent-options-menu button {
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--bq-navy);
  font-weight: 950;
  text-align: left;
  padding: 11px 12px;
}

.parent-options-menu button:hover,
.parent-options-menu button:focus-visible {
  background: #eef7ff;
}

#parentScreen.parent-cockpit-redesign .parent-recommendation,
#parentScreen.parent-cockpit-redesign .parent-card {
  position: relative;
  z-index: 1;
  border: 2px solid #d8ecff !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 12px 28px rgba(22, 29, 104, 0.08) !important;
}

.cockpit-recommendation {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 110px;
  gap: 18px;
  align-items: center;
  overflow: hidden;
}

.cockpit-recommendation .recommendation-evidence-panel {
  grid-column: 1 / -1;
  margin-top: 2px;
  padding-top: 14px;
  border-top: 2px solid #e5f1ff;
}

.cockpit-recommendation h3 {
  margin: 4px 0 8px;
  color: var(--bq-navy);
  font-size: clamp(1.75rem, 3vw, 2.8rem);
  line-height: 1;
}

.cockpit-recommendation p {
  max-width: 70ch;
  margin: 0;
  color: #54637f;
  font-weight: 850;
}

.recommendation-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 10px;
}

.recommendation-orbit {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: conic-gradient(var(--bq-green) 0 74%, #edf5ff 74%);
}

.recommendation-orbit::before,
.recommendation-orbit::after {
  content: '';
  position: absolute;
  border-radius: 14px;
  background: var(--bq-blue);
  box-shadow: 0 9px 18px rgba(22, 29, 104, 0.14);
}

.recommendation-orbit::before {
  right: -10px;
  top: 10px;
  width: 32px;
  height: 32px;
}

.recommendation-orbit::after {
  right: -22px;
  bottom: 14px;
  width: 34px;
  height: 34px;
  background: var(--bq-pink);
}

#parentScreen.parent-cockpit-redesign .parent-grid:not(.wide) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

#parentScreen.parent-cockpit-redesign .parent-grid:not(.wide) .parent-card:first-child {
  margin-bottom: 18px;
}

#parentScreen.parent-cockpit-redesign .parent-grid:not(.wide) .parent-card {
  width: 100%;
}

#parentScreen.parent-cockpit-redesign .parent-grid.wide {
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.8fr) !important;
}

.parent-overview {
  gap: 14px !important;
}

.cockpit-snapshot-card {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  padding: 16px;
  border: 2px solid #e3efff;
  border-radius: 16px;
  background: #fff;
}

.cockpit-snapshot-card::after {
  content: '';
  position: absolute;
  right: -22px;
  bottom: -26px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: rgba(18, 136, 246, 0.22);
}

.cockpit-snapshot-card:nth-child(2)::after { background: rgba(31, 189, 104, 0.24); }
.cockpit-snapshot-card:nth-child(3)::after { background: rgba(255, 213, 61, 0.34); }
.cockpit-snapshot-card:nth-child(4)::after { background: rgba(246, 71, 143, 0.24); }

.cockpit-snapshot-card span,
.cockpit-snapshot-card small {
  position: relative;
  z-index: 1;
  display: block;
  color: #60708f;
  font-weight: 900;
}

.cockpit-snapshot-card strong {
  position: relative;
  z-index: 1;
  display: block;
  margin: 8px 0 2px;
  color: var(--bq-navy);
  font-size: 2.4rem;
  line-height: 1;
}

.cockpit-chart-card {
  grid-column: 1 / -1;
  padding: 18px;
  border: 2px solid #e3efff;
  border-radius: 18px;
  background: #fff;
}

.cockpit-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.cockpit-card-head h3 {
  margin: 2px 0 0;
  color: var(--bq-navy);
}

.chart-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chart-tabs span {
  padding: 6px 9px;
  border-radius: 999px;
  background: #eef7ff;
  color: #46618c;
  font-size: 0.72rem;
  font-weight: 950;
}

.cockpit-trend-svg {
  display: block;
  width: 100%;
  min-height: 180px;
}

.writing-signal-panel {
  padding: 18px;
  border: 2px solid #d8ecff;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff, #f9fcff);
}

.writing-signal-grid {
  display: grid;
  grid-template-columns: 116px minmax(260px, 1fr) minmax(280px, 0.92fr);
  gap: 16px;
  align-items: center;
}

.writing-score-ring {
  display: grid;
  width: 104px;
  height: 104px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--bq-green) 0 var(--writing-score), #e9f3ff var(--writing-score));
  color: var(--bq-navy);
}

.writing-score-ring strong {
  font-size: 2.2rem;
  line-height: 0.9;
}

.writing-score-ring span {
  margin-top: -18px;
  font-weight: 1000;
}

.writing-bars {
  display: grid;
  gap: 10px;
}

.rubric-bar {
  display: grid;
  grid-template-columns: 96px 1fr 42px;
  gap: 10px;
  align-items: center;
  font-weight: 950;
}

.rubric-bar i {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bq-blue) 0 var(--bar), #e8f1ff var(--bar));
}

.writing-preview-card {
  display: grid;
  gap: 8px;
  min-height: 126px;
  border: 0;
  border-radius: 16px;
  background: #fff8ed;
  color: var(--bq-navy);
  text-align: left;
  padding: 16px;
}

.writing-preview-card span {
  display: -webkit-box;
  overflow: hidden;
  color: #54637f;
  font-weight: 850;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.writing-mini-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.writing-mini-list button {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid #e3efff;
  border-radius: 999px;
  background: #fff;
  color: var(--bq-navy);
  font-weight: 950;
  padding: 8px 11px;
}

.focus-area-list,
.records-request-list {
  display: grid;
  gap: 12px;
}

.focus-area-row,
.record-request-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 2px solid #e3efff;
  border-radius: 16px;
  background: #fff;
}

.record-request-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.focus-area-row h4,
.record-request-row h4 {
  margin: 0 0 4px;
  color: var(--bq-navy);
}

.focus-area-row p,
.record-request-row p {
  margin: 0;
  color: #60708f;
  font-weight: 850;
}

.severity-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bq-green);
}

.severity-dot.level-2 { background: var(--bq-yellow); }
.severity-dot.level-3 { background: var(--bq-pink); }

.cockpit-panel-body {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding-top: 8px;
}

.evidence-line,
.attempt-record-line {
  padding: 12px;
  border-radius: 13px;
  background: #f7fbff;
}

.attempt-record-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.evidence-line.missed {
  background: #fff5f7;
}

.evidence-line p,
.attempt-record-line p {
  margin: 5px 0 0;
  color: #54637f;
  font-weight: 800;
}

.training-record-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.training-record-grid span {
  padding: 8px 10px;
  border-radius: 999px;
  background: #eef7ff;
  color: #536686;
  font-weight: 900;
}

.training-record-grid .done {
  background: #e9fbf1;
  color: #168553;
}

.writing-drawer-shell.hidden {
  display: none !important;
}

.writing-drawer-shell {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.writing-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 18, 64, 0.38);
}

.writing-drawer-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(760px, 94vw);
  overflow: auto;
  padding: 28px;
  background: #fff;
  box-shadow: -24px 0 48px rgba(22, 29, 104, 0.24);
}

.writing-drawer-close {
  float: right;
}

.writing-drawer-panel h2 {
  clear: both;
  color: var(--bq-navy);
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.drawer-score-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 18px 0;
}

.drawer-score-grid div {
  display: grid;
  min-height: 86px;
  place-items: center;
  border: 2px solid #e3efff;
  border-radius: 16px;
  background: #f9fcff;
}

.drawer-score-grid strong {
  color: var(--bq-navy);
  font-size: 1.6rem;
}

.drawer-writing-block {
  margin-top: 16px;
  padding: 18px;
  border: 2px solid #e3efff;
  border-radius: 18px;
  background: #fff;
}

.drawer-writing-block h3 {
  margin-top: 0;
  color: var(--bq-navy);
}

.drawer-writing-block p {
  white-space: pre-wrap;
  color: #34446c;
  font-size: 1.05rem;
  line-height: 1.65;
}

.drawer-writing-block.full-answer {
  background: #fffaf0;
}

/* Kid dashboard refinements for current QA tranche. */
.parent-preview-ref {
  display: none !important;
}

.core-tests-ref {
  display: grid;
  grid-template-columns: 1fr repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 10px;
  padding: 10px;
  border: 2px solid #d8ecff;
  border-radius: 12px;
  background: #f8fcff;
}

.core-test-chip-ref {
  display: grid;
  gap: 5px;
  min-height: 76px;
  border: 1px solid #dcecff;
  border-radius: 12px;
  background: #fff;
  color: var(--bq-navy);
  text-align: left;
  padding: 9px;
}

.core-test-chip-ref span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--bq-blue), var(--bq-purple));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 1000;
}

.core-test-chip-ref strong {
  font-size: 0.68rem;
  line-height: 1.1;
}

.core-test-chip-ref small {
  color: #60708f;
  font-size: 0.62rem;
  font-weight: 900;
}

.world-panel-ref .reward-games-ref {
  grid-template-columns: 1fr !important;
}

.world-panel-ref .games-head-ref {
  display: grid;
  grid-template-columns: 1fr;
}

.world-panel-ref .game-card-ref {
  grid-template-columns: 52px minmax(0, 1fr) !important;
  min-height: 70px !important;
  padding: 10px 12px !important;
}

.world-panel-ref .game-card-ref strong {
  font-size: 0.95rem !important;
  line-height: 1.08 !important;
}

.world-panel-ref .game-card-ref small {
  font-size: 0.74rem !important;
}

.intl-2 .intl-art-ref span {
  background:
    linear-gradient(#244ca2 0 54%, transparent 54%) 0 0 / 40% 54% no-repeat,
    radial-gradient(circle at 8px 8px, #fff 0 1.4px, transparent 1.6px) 4px 4px / 11px 11px no-repeat,
    linear-gradient(#b22234 0 14%, #fff 14% 28%, #b22234 28% 42%, #fff 42% 56%, #b22234 56% 70%, #fff 70% 84%, #b22234 84% 100%) !important;
}

.switch-corner {
  right: 10px !important;
  top: 3px !important;
  z-index: 20 !important;
  min-height: 28px !important;
  padding: 4px 9px !important;
  border-radius: 10px !important;
  font-size: 0.68rem !important;
}

.reference-topbar {
  padding-right: 118px !important;
}

.reference-quick-actions {
  margin-right: 34px !important;
  padding-right: 0 !important;
}

@media (max-width: 1100px) {
  #parentScreen.parent-cockpit-redesign .parent-grid.wide,
  .writing-signal-grid,
  .core-tests-ref {
    grid-template-columns: 1fr !important;
  }

  .cockpit-recommendation {
    grid-template-columns: 1fr;
  }

  .recommendation-orbit {
    display: none;
  }
}

@media (max-width: 760px) {
  #parentScreen.parent-cockpit-redesign .app-header,
  .cockpit-header-controls,
  .cockpit-card-head,
  .focus-area-row,
  .record-request-row {
    grid-template-columns: 1fr !important;
  }

  .cockpit-header-controls,
  .cockpit-card-head {
    display: grid;
  }

  .drawer-score-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Final visual QA pass: serrated islands and separated academy score/icon lanes. */
.land-north {
  clip-path: polygon(8% 44%, 14% 24%, 28% 16%, 40% 6%, 54% 12%, 68% 7%, 82% 17%, 94% 33%, 90% 52%, 98% 68%, 82% 85%, 62% 92%, 48% 84%, 28% 90%, 12% 76%, 2% 60%);
}

.land-west {
  clip-path: polygon(5% 28%, 18% 12%, 34% 8%, 48% 16%, 64% 9%, 82% 20%, 94% 38%, 88% 55%, 97% 72%, 78% 90%, 58% 85%, 44% 98%, 25% 88%, 10% 76%, 15% 58%, 0 44%);
}

.land-east {
  clip-path: polygon(12% 20%, 30% 8%, 46% 14%, 62% 5%, 82% 18%, 95% 36%, 88% 52%, 98% 70%, 82% 90%, 62% 84%, 46% 96%, 28% 86%, 10% 78%, 16% 58%, 2% 42%);
}

.land-south {
  clip-path: polygon(8% 36%, 22% 18%, 38% 12%, 54% 18%, 72% 10%, 90% 26%, 96% 44%, 88% 60%, 98% 78%, 78% 92%, 58% 86%, 42% 98%, 24% 88%, 10% 76%, 2% 56%);
}

.land-tiny-one,
.land-tiny-two {
  clip-path: polygon(10% 45%, 24% 18%, 48% 8%, 70% 16%, 94% 42%, 82% 72%, 55% 92%, 26% 82%);
}

.landmass {
  border-radius: 0 !important;
  filter: drop-shadow(0 14px 0 rgba(22, 80, 126, 0.14));
}

.landmass::before,
.landmass::after {
  opacity: 0.82;
}

.academy-tile-ref {
  padding: 16px 72px 56px 16px !important;
  min-height: 162px !important;
}

.academy-tile-ref span {
  top: auto !important;
  right: 16px !important;
  bottom: 48px !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  z-index: 4 !important;
}

.academy-tile-ref i {
  position: absolute !important;
  left: 16px !important;
  right: 94px !important;
  bottom: 19px !important;
  display: inline-grid !important;
  width: auto !important;
  min-width: 64px !important;
  max-width: calc(100% - 116px) !important;
  height: 26px !important;
  place-items: center !important;
  padding: 4px 10px !important;
  z-index: 3 !important;
  white-space: nowrap !important;
}

.academy-tile-ref strong {
  max-width: 12ch !important;
}

.academy-tile-ref small {
  max-width: 13ch !important;
}