/* V9 — desktop artwork is a single, exact-aspect interactive canvas; no duplicate labels. */
html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}body{overscroll-behavior:none}
.home-v9{position:relative;display:grid!important;place-items:center;overflow:hidden;background:#123c4c;isolation:isolate;width:100vw;height:100dvh;min-height:0;padding:0!important}
.home-v9:before,.home-v9:after{display:none!important}
.desktop-art{position:relative;aspect-ratio:1648/928;width:min(100vw,177.586dvh);max-height:100dvh;background:url('../assets/home-art.png') center/100% 100% no-repeat;box-shadow:0 0 60px #031e2b77;flex:none}
.hotspot{position:absolute;z-index:2;display:block;background:transparent;border:0;border-radius:15%;cursor:pointer;color:transparent;padding:0;touch-action:manipulation}
.hotspot:hover{background:#fff2;box-shadow:inset 0 0 0 3px #ffffff9c}
.hotspot:focus-visible{outline:5px solid #ffef56;outline-offset:2px;background:#fff3}
.hs-count{left:30.5%;top:32%;width:16%;height:21%}.hs-shapes{left:47.7%;top:32%;width:16.4%;height:21%}.hs-letters{left:65%;top:32%;width:16.2%;height:21%}
.hs-memory{left:36.5%;top:53.8%;width:18%;height:22%}.hs-patterns{left:55.5%;top:53.8%;width:18.5%;height:22%}
.hs-play{left:35.5%;top:79.3%;width:28%;height:17%;border-radius:30%}.hs-garden{left:1.5%;top:88%;width:16%;height:10%}.hs-achievements{right:1.3%;top:88%;width:16%;height:10%}
.hs-sound{right:13.1%;top:1.4%;width:5.7%;height:10%}.hs-settings{right:7.3%;top:1.4%;width:5.7%;height:10%}.hs-fullscreen{right:1.5%;top:1.4%;width:5.7%;height:10%}
.live-stars{position:absolute;left:11.2%;top:4.3%;font-size:clamp(9px,1.15vw,19px);font-weight:900;color:#31113f;pointer-events:none;z-index:2}
.mobile-menu{display:none}
/* Portrait: real, individually clickable buttons, not a shrunken landscape image. */
@media (max-aspect-ratio: 4/5){
 .home-v9{background:#226c67 url('../assets/home-art.png') center/cover no-repeat}
 .home-v9:after{display:block!important;content:'';position:absolute;inset:0;background:linear-gradient(180deg,#173f52a8,#244c4dd9 40%,#1b453cd9);backdrop-filter:blur(5px);z-index:0}
 .desktop-art{display:none}.mobile-menu{display:flex;z-index:1;position:relative;width:min(100%,520px);height:100%;height:100dvh;box-sizing:border-box;padding:max(10px,env(safe-area-inset-top)) 14px max(10px,env(safe-area-inset-bottom));flex-direction:column;align-items:center;gap:clamp(6px,1.2dvh,13px);justify-content:space-between;overflow:hidden}
 .mobile-top{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px}.mobile-stars{border-radius:40px;background:#fff8e9;padding:9px 12px;font-weight:900;color:#533265;font-size:clamp(12px,3.3vw,17px)}.mobile-stars span{color:#7e43ba}.mobile-tools{display:flex;gap:6px}.mobile-tools button{border:2px solid #fff;border-radius:50%;width:42px;height:42px;background:linear-gradient(#78d5ff,#317bd6);font-size:21px;color:white}
 .mobile-title{text-align:center;color:white;text-shadow:0 3px 3px #271634}.mobile-title span{font-size:clamp(11px,2.8vw,15px);font-weight:900;background:#fff2;padding:6px 10px;border-radius:20px}.mobile-title h1{font-size:clamp(30px,9vw,52px);line-height:1.05;margin:12px 0 0;font-weight:1000;letter-spacing:-1.5px}.mobile-title em{font-style:normal;color:#ffce42;text-shadow:0 3px #9b397e,0 6px 10px #0007}
 .mobile-activities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:clamp(7px,1.1dvh,12px);width:100%;min-height:0;flex:1;max-height:490px}.mobile-activities button{border:3px solid #fff9e9;border-radius:clamp(16px,4vw,25px);background:linear-gradient(145deg,#fff8e7,#ffe2a7);box-shadow:0 5px 0 #bc853d,0 8px 10px #0004;color:#452345;font-weight:1000;font-size:clamp(13px,3.6vw,19px);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;min-height:0;padding:4px;line-height:1.1;text-align:center}.mobile-activities button:nth-child(2){background:linear-gradient(#f9e8ff,#d3a9f6);box-shadow:0 5px 0 #9d68c8}.mobile-activities button:nth-child(3){background:linear-gradient(#e6faff,#8bd9ff);box-shadow:0 5px 0 #409cc6}.mobile-activities button:nth-child(4){background:linear-gradient(#edffd8,#b8ee76);box-shadow:0 5px 0 #77a841}.mobile-activities button:nth-child(5){background:linear-gradient(#ffe7f5,#ffb0d9);box-shadow:0 5px 0 #d27ca5;grid-column:1/-1}.mobile-activities button span{font-size:clamp(22px,5.2dvh,42px)}
 .mobile-play{width:min(100%,350px);border-radius:60px;border:4px solid #fff4bc;background:linear-gradient(#d76dff,#9b22e7 62%,#7b1ac4);box-shadow:0 6px 0 #58138d,0 8px 16px #0006;color:white;font-weight:1000;font-size:clamp(21px,5vw,29px);padding:clamp(8px,1.5dvh,15px)}
 .mobile-extras{display:flex;gap:5px;width:100%;justify-content:center}.mobile-extras button{border:2px solid white;border-radius:22px;background:#fff9ee;color:#533265;font-size:clamp(10px,2.5vw,14px);font-weight:900;padding:8px 6px;flex:1}
}
@media(max-height:620px) and (max-aspect-ratio:4/5){.mobile-title h1{font-size:clamp(25px,7vw,37px);margin-top:5px}.mobile-activities button span{font-size:21px}.mobile-activities button{font-size:12px}.mobile-menu{gap:5px}.mobile-top button{width:33px;height:33px}.mobile-stars{padding:5px 9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* MVP 10: neutralize legacy home button styles that painted over the artwork. */
.home-v9 .desktop-art > button.hotspot,
.home-v9 .desktop-art > button.hotspot:hover,
.home-v9 .desktop-art > button.hotspot:active {
  position:absolute !important;
  display:block !important;
  opacity:1 !important;
  margin:0 !important;
  padding:0 !important;
  min-height:0 !important;
  max-width:none !important;
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  transform:none !important;
  appearance:none !important;
}
.home-v9 .desktop-art > #play.hs-play {left:35.5% !important;top:79.3% !important;width:28% !important;height:17% !important;border-radius:30% !important;}
.home-v9 .desktop-art > button.hotspot:hover {filter:brightness(1.08);}
.home-v9 .desktop-art > button.hotspot:focus-visible {outline:4px solid #ffe94e !important;outline-offset:-4px;}
/* Cover the baked-in counter and draw a single dynamic counter. */
.home-v9 .desktop-art .live-stars {
  left:1.85%;top:2.8%;width:17%;height:6.4%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;border-radius:999px;
  background:#fffaf0;box-shadow:0 4px 0 #a47740;
  font-size:clamp(11px,1.15vw,19px);white-space:nowrap;
  color:#3b2052;
}
.home-v9 .desktop-art .live-stars::before {content:'⭐ Maya';margin-right:.55em;}
@media (max-aspect-ratio:4/5){.home-v9 .desktop-art .live-stars{display:none}}

/* MVP 11: a home deve desaparecer ao abrir qualquer atividade.
   A regra .home-v9 com display:grid!important impedia .hidden de atuar. */
.home-v9.hidden { display: none !important; }