/* V76.5: one illustrated surface, consistent desktop copy, contained quiz headers. */
.home-page main#app:has(#home-view.active) {max-width:none!important;width:100%!important;height:auto!important;min-height:calc(100dvh - 120px)!important;overflow:visible!important;display:block!important;padding:10px clamp(10px,1.3vw,24px) 38px!important}
.home-page #home-view {width:100%!important;max-width:none!important;height:auto!important;overflow:visible!important;margin:0!important}
.home-page #home-view .feature-grid {max-width:none!important;width:100%!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:none!important;grid-auto-rows:auto!important;gap:12px!important;padding:0!important;background:none!important}
.home-page #home-view .feature-box {
  position:relative!important;isolation:isolate!important;
  grid-template-columns:minmax(0,49%) minmax(0,51%)!important;
  grid-template-rows:auto auto!important;
  align-content:center!important;
  gap:5px 0!important;
  height:clamp(240px,22vw,370px)!important;min-height:0!important;
  padding:clamp(18px,2vw,32px)!important;
  border:0!important;border-radius:28px!important;
  overflow:hidden!important;box-shadow:0 8px 22px rgba(30,44,54,.10)!important;
  background-color:var(--approved-bg)!important;
  background-image:var(--approved-scene)!important;
  background-size:cover!important;background-position:left center!important;
}
.home-page #home-view .feature-box::before {display:none!important}
.home-page #home-view .feature-box::after {
  content:"";display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent 35%,var(--approved-glaze) 60%,var(--approved-glaze) 100%);
}
.home-page #home-view .feature-box > img,
.home-page #home-view .feature-box > .ask-pho-art {
  display:none!important;
}
.home-page #home-view .feature-box > .ask-pho-art {overflow:hidden!important}
.home-page #home-view .feature-box > .ask-pho-art img {
  display:block!important;width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center center!important;
  border:0!important;border-radius:0!important;background:none!important;
}
.home-page #home-view .feature-box > div:not(.ask-pho-art) {
  grid-column:2!important;grid-row:1!important;z-index:2;
  align-self:start!important;justify-content:flex-start!important;
  align-items:flex-start!important;gap:7px!important;
  padding:0!important;overflow:visible!important;
}
.home-page #home-view .feature-box h2,
.home-page #home-view .feature-box .fun-title {
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif!important;
  font-size:clamp(2.25rem,3.8vw,4.4rem)!important;
  font-weight:950!important;line-height:1.04!important;
  letter-spacing:-.06em!important;white-space:normal!important;
  color:var(--approved-title)!important;
  text-shadow:none!important;
}
.home-page #home-view .feature-box .title-accent {color:var(--approved-accent)!important}
.home-page #home-view .feature-box .tagline {
  display:block!important;opacity:1!important;
  font-size:clamp(1.08rem,1.7vw,1.7rem)!important;
  line-height:1.2!important;font-weight:850!important;
  color:var(--approved-title)!important;
  margin:0!important;
}
.home-page #home-view .feature-box .box-description {
  max-width:48ch!important;
  font-size:clamp(.98rem,1.28vw,1.28rem)!important;
  line-height:1.42!important;font-weight:520!important;
  color:var(--approved-copy)!important;
  margin:1px 0 0!important;
  -webkit-line-clamp:unset!important;overflow:visible!important;
}
.home-page #home-view .feature-box > .box-button {
  grid-column:2!important;grid-row:2!important;z-index:2;
  justify-self:start!important;align-self:start!important;
  margin:4px 0 0!important;
  width:max-content!important;min-width:0!important;max-width:100%!important;
  min-height:48px!important;padding:11px clamp(22px,2.4vw,46px)!important;
  font-size:clamp(.98rem,1.35vw,1.3rem)!important;
  border-radius:999px!important;
  background:var(--approved-button)!important;color:var(--approved-button-ink)!important;
  box-shadow:0 5px 0 rgba(24,48,48,.13),0 9px 20px rgba(10,32,53,.12)!important;
}
.home-page #home-view .feature-box > .box-button:hover {transform:translateY(-2px)!important}
.home-page #home-view .ask-pho-box {--approved-scene:url('../brand/v76/hoi-scene.webp');--approved-bg:#e9f9ec;--approved-glaze:rgba(229,250,234,.94);--approved-title:#183c31;--approved-copy:#224839;--approved-accent:#16864a;--approved-button:#3adb58;--approved-button-ink:#063c27}
.home-page #home-view .ask-pho-box {
  background-image:var(--approved-scene)!important;
}
/* Open sky and aqua halo, with the same title styling as other cards. */
.home-page #home-view .ask-pho-box :is(.box-kicker,h2,.tagline,.box-description) {background:none!important;padding:0!important}
.home-page #home-view .ask-pho-box h2 {color:#06432a!important;-webkit-text-stroke:0;text-shadow:none!important}
.home-page #home-view .ask-pho-box .title-accent {color:#087f42!important}
.home-page #home-view .ask-pho-box :is(.box-kicker,.tagline,.box-description) {
  color:#073d2d!important;
  text-shadow:0 1px 1px #f2fff8,0 0 7px rgba(237,255,248,.95)!important;
}
.home-page #home-view .ask-pho-box > .box-button {
  background:linear-gradient(130deg,#a0fa5e,#23ec54)!important;color:#093b1f!important;
  box-shadow:0 4px 0 #0c9e46,0 9px 20px rgba(2,72,70,.32)!important;
}
.home-page #home-view .learn-box {--approved-scene:url('../brand/v76/learn-scene.webp');--approved-bg:#ffefb4;--approved-glaze:rgba(255,239,183,.22);--approved-title:#593316;--approved-copy:#493822;--approved-accent:#1457e5;--approved-button:#1056ec;--approved-button-ink:#fff}
.home-page #home-view .fly-box {--approved-scene:url('../brand/v76/fly-scene.webp');--approved-bg:#8edbff;--approved-glaze:rgba(193,238,255,.2);--approved-title:#143775;--approved-copy:#143d65;--approved-accent:#1264f2;--approved-button:#ff791c;--approved-button-ink:#fff}
.home-page #home-view .run-box {--approved-scene:url('../brand/v76/run-scene.webp');--approved-bg:#ffaba8;--approved-glaze:rgba(255,168,164,.16);--approved-title:#822029;--approved-copy:#71303b;--approved-accent:#de1f2e;--approved-button:#ffda27;--approved-button-ink:#542d0d}
.home-page #home-view .racing-box {--approved-scene:url('../brand/v76/racing-scene.webp');--approved-bg:#bd9cf4;--approved-glaze:rgba(224,204,255,.16);--approved-title:#492277;--approved-copy:#372451;--approved-accent:#ca22d6;--approved-button:#80ed9a;--approved-button-ink:#123d28}
.home-page #home-view .game-box {--approved-scene:url('../brand/v76/restaurant-scene.webp');--approved-bg:#d7f59d;--approved-glaze:rgba(224,248,175,.25);--approved-title:#3b2b16;--approved-copy:#3f3927;--approved-accent:#168b3b;--approved-button:#ff810b;--approved-button-ink:#fff}
.home-page #home-view .fun-box {--approved-scene:url('../brand/v76/fun-scene.webp');--approved-bg:#ffdb95;--approved-glaze:rgba(255,225,161,.23);--approved-title:#692c1e;--approved-copy:#713d29;--approved-accent:#ff681f;--approved-button:#088951;--approved-button-ink:#fff}
.home-page #home-view .discover-box {--approved-scene:url('../brand/v76/vietnam-scene.webp');--approved-bg:#9ce9f5;--approved-glaze:rgba(164,238,247,.22);--approved-title:#13397d;--approved-copy:#21436c;--approved-accent:#175cda;--approved-button:#075bf1;--approved-button-ink:#fff}
@media(min-width:1024px){
  .home-page #home-view .feature-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:none!important;
    grid-auto-rows:auto!important;
    gap:14px!important;
  }
  .home-page #home-view .feature-box {
    grid-template-columns:minmax(0,56%) minmax(0,44%)!important;
    height:clamp(250px,18vw,270px)!important;
    padding:clamp(14px,1.2vw,20px)!important;
    border-radius:22px!important;
  }
  .home-page #home-view .feature-box::after {
    background:linear-gradient(90deg,transparent 32%,var(--approved-glaze) 47%,var(--approved-bg) 57%);
  }
  .home-page #home-view .feature-box > img,
  .home-page #home-view .feature-box > .ask-pho-art,
  .home-page #home-view .feature-box > .ask-pho-art img {object-position:left center!important}
  .home-page #home-view .feature-box > div:not(.ask-pho-art) {gap:3px!important;align-self:start!important;justify-content:flex-start!important}
  .home-page #home-view .feature-box h2,
  .home-page #home-view .feature-box .fun-title {
    font-size:clamp(1.45rem,1.8vw,2rem)!important;
    line-height:1.08!important;
  }
  .home-page #home-view .feature-box .tagline {
    font-size:clamp(.81rem,.93vw,1rem)!important;
    line-height:1.22!important;
  }
  .home-page #home-view .feature-box .box-description {
    font-size:clamp(.76rem,.82vw,.91rem)!important;
    line-height:1.36!important;
  }
  .home-page #home-view .feature-box > .box-button {
    min-height:42px!important;
    padding:8px 18px!important;
    margin:3px 0 0!important;
    font-size:clamp(.8rem,.9vw,.92rem)!important;
  }
}
@media(min-width:1024px) and (max-width:1279px){
  .home-page #home-view .feature-box {height:300px!important}
}
@media(min-width:1500px){
  .home-page #home-view .feature-box {grid-template-columns:minmax(0,59%) minmax(0,41%)!important}
  .home-page #home-view .feature-box::after {
    background:linear-gradient(90deg,transparent 35%,var(--approved-glaze) 51%,var(--approved-bg) 60%);
  }
}
@media(max-width:700px){
  .home-page main#app:has(#home-view.active) {padding:8px 10px 22px!important}
  .home-page #home-view .feature-grid {gap:10px!important}
  .home-page #home-view .feature-box {
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:clamp(166px,50vw,240px) auto auto!important;
    align-content:start!important;
    gap:0!important;height:auto!important;min-height:0!important;
    padding:0 0 18px!important;border-radius:20px!important;
    background-image:none!important;background-color:var(--approved-bg)!important;text-align:center!important;
  }
  .home-page #home-view .feature-box::before {
    display:none!important;
  }
  .home-page #home-view .feature-box::after {display:none!important}
  .home-page #home-view .feature-box > img,
  .home-page #home-view .feature-box > .ask-pho-art {
    display:block!important;position:relative!important;inset:auto!important;z-index:1!important;
    grid-column:1!important;grid-row:1!important;
    width:100%!important;height:clamp(166px,50vw,240px)!important;
    max-width:none!important;max-height:none!important;
    align-self:stretch!important;justify-self:stretch!important;
    object-fit:cover!important;object-position:18% center!important;
    border:0!important;border-radius:0!important;box-shadow:none!important;
    background:none!important;overflow:hidden!important;
  }
  .home-page #home-view .feature-box > .ask-pho-art img {
    display:block!important;width:100%!important;height:100%!important;
    max-width:none!important;max-height:none!important;
    object-fit:cover!important;object-position:18% center!important;
    border:0!important;border-radius:0!important;box-shadow:none!important;
    background:none!important;
  }
  .home-page #home-view .feature-box > div:not(.ask-pho-art) {
    grid-column:1!important;grid-row:2!important;
    align-self:start!important;align-items:center!important;justify-content:flex-start!important;
    text-align:center!important;padding:12px 18px 0!important;gap:5px!important;
  }
  .home-page #home-view .feature-box h2,
  .home-page #home-view .feature-box .fun-title {font-size:clamp(1.55rem,6vw,2.1rem)!important;line-height:1.08!important;text-align:center!important}
  .home-page #home-view .feature-box .tagline {display:block!important;font-size:clamp(.86rem,3.4vw,1.05rem)!important;line-height:1.25!important;text-align:center!important}
  .home-page #home-view .feature-box .box-description {font-size:clamp(.82rem,3.35vw,.96rem)!important;line-height:1.4!important;max-width:42ch!important;text-align:center!important;margin:0 auto!important}
  .home-page #home-view .feature-box > .box-button {
    grid-column:1!important;grid-row:3!important;justify-self:center!important;align-self:start!important;
    width:max-content!important;max-width:calc(100% - 30px)!important;
    min-height:44px!important;margin:11px 0 0!important;
    padding:10px 22px!important;font-size:.88rem!important;
  }
}
@media(max-width:360px){
  .home-page #home-view .feature-box {grid-template-columns:minmax(0,1fr)!important;height:auto!important;padding:0 0 16px!important}
  .home-page #home-view .feature-box h2,
  .home-page #home-view .feature-box .fun-title {font-size:1.5rem!important}
  .home-page #home-view .feature-box .box-description {font-size:.82rem!important;line-height:1.38!important}
}
.home-page #home-view .ask-pho-box::after {
  content:""!important;display:block!important;
  inset:5% 2% 10% auto!important;width:51%!important;height:85%!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse at center,rgba(220,255,246,.96) 0%,rgba(132,240,236,.76) 34%,rgba(76,196,239,.3) 58%,transparent 78%)!important;
  filter:blur(5px);pointer-events:none;
}
@media(max-width:700px){
  .home-page #home-view .ask-pho-box::after {display:none!important}
  .home-page #home-view .ask-pho-box h2 {-webkit-text-stroke:0;text-shadow:none!important}
  .home-page #home-view .ask-pho-box :is(.box-kicker,.tagline,.box-description) {text-shadow:none!important}
}

/* The two quiz destinations are pages, not oversized homepage banners. */
body main#app:has(:is(#fun-view,#knowledge-view).active) {
  max-width:none!important;width:100%!important;margin-inline:auto!important;
  padding:20px clamp(12px,3vw,28px) 50px!important;
}
body :is(#fun-view,#knowledge-view) {
  max-width:none!important;width:100%!important;margin-inline:auto!important;
  padding:clamp(14px,2.5vw,26px)!important;
  border-radius:24px!important;
}
body :is(#fun-view,#knowledge-view) .view-head {
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr) 120px auto!important;
  align-items:center!important;gap:16px!important;
  max-width:1180px!important;min-height:150px!important;
  margin-inline:auto!important;padding:18px 22px!important;
  overflow:hidden!important;
}
body :is(#fun-view,#knowledge-view) .view-head .back {
  grid-column:1!important;grid-row:1!important;
}
body :is(#fun-view,#knowledge-view) .view-head > div {
  grid-column:2!important;grid-row:1!important;min-width:0!important;
}
body :is(#fun-view,#knowledge-view) .view-head h1 {
  font-size:clamp(1.7rem,3vw,2.6rem)!important;line-height:1.1!important;
  overflow-wrap:normal!important;
}
body :is(#fun-view,#knowledge-view) .view-head .activity-art {
  grid-column:3!important;grid-row:1!important;
  display:block!important;position:static!important;
  width:120px!important;height:120px!important;max-width:120px!important;max-height:120px!important;
  object-fit:contain!important;flex:none!important;margin:0!important;transform:none!important;
}
body :is(#fun-view,#knowledge-view) .view-head .category-pill {
  grid-column:4!important;grid-row:1!important;
  margin:0!important;justify-self:end!important;
}
body :is(#fun-view,#knowledge-view) :is(.question-card,.knowledge-card) {
  width:100%!important;max-width:1180px!important;
}
@media(min-width:900px){
  body main#app:has(:is(#fun-view,#knowledge-view).active),
  body:not(.playing-game) main#app:has(#game-view.active:not(.game-running)) {
    max-width:none!important;width:100%!important;min-height:calc(100dvh - 78px)!important;
    padding:16px clamp(18px,2.4vw,42px) 28px!important;
  }
  body :is(#fun-view,#knowledge-view).active,
  body:not(.playing-game) #game-view.active:not(.game-running) {
    max-width:none!important;width:100%!important;min-height:calc(100dvh - 122px)!important;
    margin:0!important;
  }
  body:not(.playing-game) #game-view.active .game-menu {
    width:100%!important;min-height:calc(100dvh - 122px)!important;
  }
}
@media(max-width:700px){
  body main#app:has(:is(#fun-view,#knowledge-view).active) {padding:8px 10px 30px!important}
  body :is(#fun-view,#knowledge-view) {padding:12px!important;border-radius:18px!important}
  body :is(#fun-view,#knowledge-view) .view-head {
    display:grid!important;grid-template-columns:44px minmax(0,1fr) 64px!important;
    align-items:center!important;gap:7px!important;padding:12px!important;min-height:0!important;
  }
  body :is(#fun-view,#knowledge-view) .view-head .back {grid-column:1!important;grid-row:1!important;width:44px;height:44px}
  body :is(#fun-view,#knowledge-view) .view-head > div {grid-column:2!important;grid-row:1!important;min-width:0}
  body :is(#fun-view,#knowledge-view) .view-head h1 {font-size:clamp(1.4rem,6vw,2rem)!important;overflow-wrap:anywhere}
  body :is(#fun-view,#knowledge-view) .view-head .activity-art {grid-column:3!important;grid-row:1!important;width:64px!important;height:64px!important;max-width:64px!important;max-height:64px!important;margin:0!important}
  body :is(#fun-view,#knowledge-view) .view-head .category-pill {grid-column:2/4!important;grid-row:2!important;justify-self:start!important;margin:0!important}
  body :is(#fun-view,#knowledge-view) .question-card {min-height:0!important;padding:22px 16px!important}
}