/* Discovery navigation, shared controls, and accessible parent surfaces. */
:root{--panel-bg:#fff;--panel-text:#433b53;--focus-ring:#166cc0;}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:4px solid var(--focus-ring);outline-offset:4px;}
#hubNav{display:flex;align-items:center;justify-content:center;position:relative;width:100%;min-height:8px;flex-shrink:0;}
#hubNav h1{font-size:clamp(1.2rem,4vw,1.6rem);margin:6px;color:var(--text);}
.hub-back{position:absolute;left:0;background:var(--panel-bg);color:var(--panel-text);border:0;border-radius:24px;min-height:44px;padding:6px 14px;font:700 1rem 'Baloo 2',sans-serif;}
#hubScreen.grouped-home{max-width:900px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom));}
#hubScreen.grouped-home .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:14px;padding:12px 0;}
#hubScreen .cat-btn{flex-direction:column;gap:4px;}
#hubScreen .cat-icon-wrap{flex:1;min-height:0;}
#hubScreen .activity-name{font:800 clamp(.85rem,2.5vw,1.15rem) 'Baloo 2',sans-serif;color:var(--text);line-height:1.15;text-align:center;flex-shrink:0;}
#hubStickers{flex-shrink:0;border:0;border-radius:30px;padding:8px 18px;min-height:44px;background:var(--panel-bg);color:var(--panel-text);font:800 1rem 'Baloo 2',sans-serif;}
@media(max-width:540px){
  #hubScreen.grouped-home .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
}
@media(max-height:450px){
  #hubScreen.grouped-home .cat-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
  #hubScreen>div:first-child img{max-height:40px;width:auto!important;}
}
.hold-hint{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:10000;border-radius:24px;background:#263044;color:white;padding:12px 20px;font:700 1rem 'Baloo 2',sans-serif;pointer-events:none;}
.parent-note{font-size:.85rem;line-height:1.5;color:#505060;margin:8px 0;}
.parent-links{padding-left:18px;text-align:left;}
.parent-links a{color:#17639c;text-decoration:underline;}
#sw-update-banner{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);max-width:90vw;z-index:9999;background:#263044;color:white;border:0;border-radius:28px;padding:14px 24px;font:700 .9rem 'Baloo 2',sans-serif;}
#offlineStatus{font-size:.85rem;line-height:1.4;color:#505060;}
.ph-flip-wrap{border:0;padding:0;background:transparent;cursor:pointer;font-family:inherit;}
.ph-flip-wrap:focus-visible{outline:4px solid #126cb4;outline-offset:3px;border-radius:18px;}
.ph-card-phoneme{display:none;} /* Word exploration never displays invented phoneme spellings. */
#phonicsScreen .ph-language-note{position:absolute;top:70px;left:0;right:0;text-align:center;font-size:.8rem;pointer-events:none;}
.gcog-sw[aria-checked=true]::after{content:'';}
@media(prefers-reduced-motion:reduce){.hold-hint{transition:none;}}
.discovery-settings{grid-column:1/-1;width:100%;}
.teaching-copy{text-align:left;font-size:.88rem;color:#505060;line-height:1.65;}
.resource-link{background:none;border:0;color:#17639c;text-decoration:underline;text-align:left;padding:8px 0;font:inherit;cursor:pointer;min-height:44px;}
body.calm .cloud,body.calm .dc,body.calm .cat-btn-pulse .cat-icon-wrap{animation:none!important;}

.settings-close{min-width:44px;min-height:44px;}
#hubScreen.grouped-home .group-grid .cat-btn{background:rgba(255,255,255,.78)!important;}
#hubScreen.grouped-home .group-grid .activity-name{color:#433b53!important;font-size:clamp(1.1rem,3.5vw,1.35rem);}
body.dark-mode #hubScreen.grouped-home .group-grid .cat-btn{background:rgba(40,40,64,.95)!important;}
body.dark-mode #hubScreen.grouped-home .group-grid .activity-name{color:#f4f0ff!important;}
body.dark-mode #hubStickers,body.dark-mode #hubNav .hub-back{color:#433b53!important;}
body.dark-mode #settingsOverlay .parent-note,body.dark-mode #settingsOverlay #offlineStatus{color:#dddcec!important;}
body.dark-mode #infoModal .resource-link{color:#9bceff!important;}
#gameCogPanel .dialog-close{float:right;min-width:44px;min-height:44px;background:transparent;border:0;color:#433b53;font-size:1.3rem;cursor:pointer;}
#hubScreen:not(.grouped-home) .activity-name{display:none;} /* Preserve familiar original density. */

/* Five fixed destinations around a ring: tap directly; no dragging required. */
#hubScreen.grouped-home{height:100dvh;min-height:0;overflow:hidden;}
#hubScreen.grouped-home .group-grid{
  display:block;position:relative;container-type:inline-size;
  width:min(100%,calc(100dvh - 150px),680px);aspect-ratio:1;
  flex:0 0 auto;margin:auto 0;padding:0;
}
body.timer-active #hubScreen.grouped-home .group-grid{width:min(100%,calc(100dvh - 200px),680px);}
#hubScreen.grouped-home .group-grid::before{
  content:'';position:absolute;inset:18%;border:3px solid rgba(140,147,182,.3);
  border-radius:50%;pointer-events:none;
}
#hubScreen.grouped-home .group-grid .cat-btn,
#hubScreen.grouped-home .group-grid .cat-btn:last-child{
  position:absolute;left:var(--ring-x);top:var(--ring-y);
  width:30%;height:30%;border-radius:50%;padding:clamp(6px,2cqw,14px);
  transform:translate(-50%,-50%);border:3px solid var(--group-color)!important;
  gap:2px;isolation:isolate;
}
#hubScreen.grouped-home .group-grid .cat-btn:active{transform:translate(-50%,-50%) scale(.93);}
#hubScreen.grouped-home .group-grid .cat-btn:nth-child(1){--ring-x:50%;--ring-y:18%;}
#hubScreen.grouped-home .group-grid .cat-btn:nth-child(2){--ring-x:82%;--ring-y:50%;}
#hubScreen.grouped-home .group-grid .cat-btn:nth-child(3){--ring-x:50%;--ring-y:82%;}
#hubScreen.grouped-home .group-grid .cat-btn:nth-child(4){--ring-x:18%;--ring-y:50%;}
#hubScreen.grouped-home .group-grid .cat-icon-wrap{width:86%;height:0;}
#hubScreen.grouped-home .group-grid .activity-name{font-size:clamp(.8rem,4cqw,1.4rem);}
/* Shared circular pickers: fixed centers and consistent circular hit areas. */
.sports-picker::before{content:'';position:absolute;inset:15%;border:3px solid rgba(146,157,199,.35);border-radius:50%;pointer-events:none;}
.sports-picker .sports-card{box-sizing:border-box;aspect-ratio:1;flex:none;border:3px solid #b3c5ee;translate:-50% -50%;transform:none!important;transition:filter .15s;}
.sports-picker .sports-card:active{filter:brightness(1.12);}
.sports-picker .sports-card:nth-child(2){border-color:#eeaacb;}.sports-picker .sports-card:nth-child(3){border-color:#efcb83;}.sports-picker .sports-card:nth-child(4){border-color:#a5d7b9;}.sports-picker .sports-card:nth-child(5){border-color:#b5a5db;}
body.dark-mode .sports-picker .sports-card{background:#30324d;color:#fff;}
body.dark-mode .sports-picker .sports-card span{color:#fff!important;}
.bal-count-pop{position:fixed;transform:translate(-50%,-50%);font:900 3.2rem 'Baloo 2',sans-serif;color:white;text-shadow:0 3px 0 #735391,0 0 8px #735391;z-index:240;pointer-events:none;}
#stickersScreen{position:fixed;inset:0;padding:0!important;overflow:hidden;display:none;}
#stickerScene{position:absolute;inset:0 0 33.333%;background-position:center;background-size:cover;overflow:hidden;touch-action:none;}
#stickerScene[data-scene=zoo]{background-image:url('../Images/GameAssets/Stickers/zoo.svg');}
#stickerScene[data-scene=castle]{background-image:url('../Images/GameAssets/Stickers/castle.svg');}
#stickerScene[data-scene=beach]{background-image:url('../Images/GameAssets/Stickers/beach.svg');}
#stickerScenes{position:absolute;top:70px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:10;}
#stickerScenes button{min-height:44px;border:2px solid transparent;border-radius:22px;background:#fff9e9;color:#433b53;padding:5px 12px;font:800 .9rem 'Baloo 2';}
#stickerScenes button[aria-pressed=true]{border-color:#7c65b4;background:#eee4ff;}
#stickersScreen .sticker-header{display:none;}
#stickerGrid{position:absolute;bottom:0;left:0;right:0;width:100%!important;height:33.333%;aspect-ratio:auto;padding:12px;box-sizing:border-box;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:80px;gap:8px;overflow-y:auto;background:#fff0d5;border-top:5px solid #dab878;}
#stickerGrid .sticker-slot{border:0;aspect-ratio:auto;padding:5px;min-width:0;touch-action:none;}
#stickerGrid .sticker-slot:disabled img{filter:brightness(0);opacity:.16;}
#stickerGrid .sticker-img{width:100%;height:100%;object-fit:contain;}
.sticker-placed{position:absolute;transform:translate(-50%,-50%);width:clamp(55px,15vw,100px);height:clamp(55px,15vw,100px);padding:0;border:0;background:transparent;touch-action:none;}
.sticker-placed img{width:100%;height:100%;object-fit:contain;pointer-events:none;}
.sticker-drag-preview{position:fixed;width:85px;height:85px;object-fit:contain;transform:translate(-50%,-50%);z-index:10000;pointer-events:none;}
@media(orientation:landscape){#stickerGrid{grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:72px;}#stickerScenes{top:12px;}}
#rbPlayControls{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:20;display:flex;flex-direction:column;align-items:center;gap:10px;}
#rbPlay{border:3px solid #fff;border-radius:30px;min-width:100px;min-height:48px;background:#7250a5;color:#fff;font:800 1.2rem 'Baloo 2';}
#rbSequence{display:flex;gap:7px;padding:6px;border-radius:20px;background:#ffffffc9;}
#rbSequence:empty{display:none;}#rbSequence span{width:23px;height:23px;border-radius:50%;border:3px solid transparent;}#rbSequence span.done{border-color:white;box-shadow:0 0 0 2px #4a7650;}
/* Keep the whole book reachable; short screens use two horizontally scrollable rows. */
#stickerGrid{grid-template-rows:repeat(4,minmax(0,1fr));grid-auto-rows:auto;}
@media(max-height:650px){#stickerGrid{grid-template-columns:repeat(8,minmax(64px,1fr));grid-template-rows:repeat(2,minmax(44px,1fr));overflow-x:auto;overflow-y:hidden;touch-action:pan-x;}#stickerGrid .sticker-slot{touch-action:pan-x;}}