/* 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);}
/* Jason, 2026-09-27: "Lets get rid of the back button, and just make a
   back arrow that we center in the ring selectors. Just a subtle back
   button" — replaces the old .hub-back "‹ Home" pill. Sits in the ring's
   own empty center (inside the same circle .sports-picker::before draws),
   deliberately muted so the colorful activity cards stay the focus. */
.ring-back-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;z-index:2;
  background:rgba(255,255,255,.7);border:none;color:rgba(67,59,83,.55);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 2px 8px rgba(0,0,0,.08);transition:transform .12s,opacity .12s;
}
.ring-back-btn svg{width:24px;height:24px;}
.ring-back-btn:active{transform:translate(-50%,-50%) scale(.9);}
body.dark-mode .ring-back-btn{background:rgba(40,40,64,.75);color:rgba(244,240,255,.7);}
#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;}
#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{color:#433b53!important;}
body.dark-mode #settingsOverlay .parent-note,body.dark-mode #settingsOverlay #offlineStatus{color:#dddcec!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:26%;height:26%;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);}
/* 5 groups now (Explore/Create/Learn/Play/Imagine) — evenly-spaced
   pentagon, same center/radius as the old 4-point diamond (point 1 is
   identical: top-center). Math: 32% radius from center, angles
   -90°+72°*i so it still starts at the top and goes clockwise. */
#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:80.4%;--ring-y:40.1%;}
#hubScreen.grouped-home .group-grid .cat-btn:nth-child(3){--ring-x:68.8%;--ring-y:75.9%;}
#hubScreen.grouped-home .group-grid .cat-btn:nth-child(4){--ring-x:31.2%;--ring-y:75.9%;}
#hubScreen.grouped-home .group-grid .cat-btn:nth-child(5){--ring-x:19.6%;--ring-y:40.1%;}
#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);}

/* An opened group's own activities (Jason, 2026-09-27: "All of the sub
   items in beginner mode view should also be in a ring view", then "not a
   circle... font sizes not the same... should be a 1:1 of the main ring's
   style setup") share this exact .group-grid/.cat-btn ring — same class,
   same rules above, nothing sub-ring-specific left to drift out of sync.
   catalog.js sets --ring-x/--ring-y per item in JS (percentage-space
   _sportsRingPositions) instead of the fixed :nth-child(1..5) rules the
   constant-5 top-level ring uses; inline custom properties simply win over
   those for whatever child count an opened group has. */
/* 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/bg_zoo_v1.webp');}
#stickerScene[data-scene=castle]{background-image:url('../Images/GameAssets/Stickers/bg_castle_v1.webp');}
#stickerScene[data-scene=beach]{background-image:url('../Images/GameAssets/Stickers/bg_beach_v1.webp');}
/* Jason, 2026-09-27: "Lets move the zoo, castle and beach selector to be
   in the same row as all done and settings, but still in the middle" —
   moved from its own row (top:70px) up to align with .abs-back/#gameCog
   (both top:~14-16px), and shrunk from text pills to icon-only circular
   buttons (Images/GameAssets/Stickers/{zoo,castle,beach}.svg) so 3 buttons
   fit the narrow gap between All Done and the settings cog on a phone. */
#stickerScenes{position:absolute;top:max(14px,env(safe-area-inset-top) + 8px);left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:10;}
#stickerScenes button{width:38px;height:38px;padding:3px;border:2px solid transparent;border-radius:50%;background:#fff9e9;-webkit-tap-highlight-color:transparent;}
#stickerScenes button img{width:100%;height:100%;object-fit:contain;display:block;}
#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;}}
#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{position:absolute;top:11px;right:68px;z-index:30;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:10px;border:2px solid #d4d4d4;border-radius:50%;background:#fff;color:#333;cursor:pointer;}
#rbPlay svg{width:28px;height:28px;pointer-events:none;}
#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;}}

/* SVG focus follows the rainbow band, rather than its giant bounding box. */
#rbsvg path[role="button"]:focus{outline:none;}
#rbsvg path[role="button"]:focus-visible{stroke:#333;stroke-width:3;stroke-dasharray:3 9;}