/* Child UI layer (loaded last): one icon language, calmer header, readable sizes and a bigger pet. */
:root{--ui-ink:#183f35;--ui-cream:#fffdf6;--ui-glass:#103a30e6;--ui-line:#ffffff59;--display-font:"Varela Round",Nunito,system-ui,sans-serif}
.ui-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ui-icon{display:block;width:1em;height:1em;flex:none;overflow:visible}

/* Rounded display face for short child-facing headings only. */
.brand,.room-heading strong,.pet-onboarding h1,.pet-onboarding h2,.play-discovery-entry strong,.game-discovery h2,.wardrobe-tray header strong,.room-nav button strong{font-family:var(--display-font);font-weight:400;letter-spacing:0}
.brand{font-weight:400}

/* Header: home + sound stay visible, grown-up controls sit behind one lock button. */
.app-shell>.topbar{position:relative;z-index:40;gap:10px;flex-wrap:nowrap}
.topbar .top-actions{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;min-width:0;max-width:none;margin-inline-end:56px}
.grown-up-menu{position:relative}
.grown-up-toggle{list-style:none;display:flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--ui-line);border-radius:22px;background:#ffffff14;color:#fff;font-size:14px;font-weight:700;cursor:pointer;user-select:none}
.grown-up-toggle::-webkit-details-marker{display:none}
.grown-up-toggle .ui-icon{width:22px;height:22px}
.grown-up-toggle:hover,.grown-up-menu[open]>.grown-up-toggle{background:#ffffff26}
.grown-up-panel{position:absolute;z-index:60;top:calc(100% + 8px);inset-inline-end:0;width:min(300px,calc(100vw - 24px));display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:14px;border:1px solid #d9e2d8;border-radius:18px;background:var(--ui-cream);color:var(--ui-ink);box-shadow:0 18px 45px #06181366}
.topbar .grown-up-panel #connect-parents-button{display:block;width:100%;max-width:none!important;min-height:44px;margin:0;padding:10px 14px!important;border:1px solid #c9d6cc;border-radius:12px;background:#f1f6f0;color:var(--ui-ink);font-size:15px!important;font-weight:700}
.topbar .grown-up-panel .saved{display:block!important;max-width:none;color:#4f6159;font-size:13px;line-height:1.45}
.topbar .grown-up-panel #settings-button{color:var(--ui-ink);border-color:#c9d6cc;background:#fff}
/* Sound: one icon toggle in the header (the text stays as its accessible name). */
.topbar .accessibility-tools{display:flex;flex-wrap:nowrap;width:auto;gap:8px}
.topbar .top-actions .accessibility-tools a{display:none}
.topbar .top-actions .accessibility-tools button{position:relative;width:44px;max-width:none!important;height:44px;min-height:44px;padding:0!important;border:1px solid var(--ui-line);border-radius:50%;background:#ffffff14;color:#fff;font-size:0!important;line-height:0;overflow:hidden}
.topbar .top-actions .accessibility-tools button::before{content:"";position:absolute;inset:9px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.8 9.4h3.6L12 5.4v13.2l-4.6-4H3.8Z' fill='%23f6d27a'/%3E%3Cpath d='M15.4 9a4.2 4.2 0 0 1 0 6M18 6.4a8 8 0 0 1 0 11.2'/%3E%3C/svg%3E") center/contain no-repeat}
.topbar .top-actions .accessibility-tools button[aria-pressed=true]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.8 9.4h3.6L12 5.4v13.2l-4.6-4H3.8Z' fill='%23f6d27a'/%3E%3Cpath d='m15.6 9.6 4.8 4.8m0-4.8-4.8 4.8'/%3E%3C/svg%3E")}
.topbar .top-actions .accessibility-tools button[aria-pressed=true]{background:#ffffff30}
/* Demo-only "change friend" button (injected by app.js) stays compact. */
.topbar .top-actions>button:not([id]){min-height:44px;max-width:84px!important;padding:4px 10px!important;font-size:12px!important;line-height:1.15;white-space:normal}

/* Accessibility launcher joins the header row instead of covering the room navigation. */
body:has(>.app-shell):not(.onboarding-active) #pipalo-accessibility-launcher{top:7px;bottom:auto;inset-inline-start:auto;inset-inline-end:24px;width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border:1px solid var(--ui-line);border-radius:50%;background:#1b4c3f;font-size:0;box-shadow:none}
body:has(>.app-shell) #pipalo-accessibility-launcher svg{width:24px;height:24px}
/* Games are full screen and the close button owns the top-left corner: the launcher moves to the top-right one,
   and the game headers leave room for it. */
body:has(#arithmetic-panel:not([hidden])) #pipalo-accessibility-launcher{top:max(14px,env(safe-area-inset-top));inset-inline:auto;left:auto;right:12px;border:2px solid #ffffffa6;background:#174d3e}
#arithmetic-panel.classic-open .adventure-heading,#arithmetic-panel.classic-open.arithmetic-open .question-top{padding-right:64px!important}
/* One sound control per game: the header speaker repeats the instruction; muting lives in the header and accessibility menu. */
#arithmetic-panel .game-sound-toggle{display:none!important}
/* "Untimed button controls" is a grown-up/assistive option: kept for keyboard and screen readers, out of the child's way. */
.arcade-top .arcade-mode:not([aria-pressed=true]):not(:focus-visible){position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Needs: icon + thick meter; the numbers stay available to assistive tech only. */
.needs-panel{gap:8px;padding:8px}
.need-meter{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:4px 8px;padding:7px 10px;border-radius:13px}
.need-meter>.need-icon{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:#205843;font-size:26px;box-shadow:inset 0 0 0 2px #e6eadf}
.need-meter>.need-icon svg{width:26px;height:26px;fill:initial;stroke:initial;stroke-width:initial}
.need-meter>strong{font-size:13px;line-height:1.2}
.need-meter>.need-value{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.need-track{grid-column:2;height:9px;border-radius:9px;background:#d4dccf;box-shadow:inset 0 1px 2px #0002}
.need-meter[data-tone="orange"] .need-icon{box-shadow:inset 0 0 0 2px #e48632;animation:need-call 1.6s ease-in-out infinite}
@keyframes need-call{50%{transform:scale(1.08)}}

/* Room navigation: illustrated icons, readable labels. */
.room-nav button{gap:8px}
.room-nav button .nav-icon{font-size:28px;line-height:0}
.room-nav button .nav-icon svg{width:28px;height:28px}
.room-nav button strong{font-size:15px}
.room-nav button.active .nav-icon{color:#19483b}

/* Text that sits on the scene stays at 12px or more. */
.room-heading span{font-size:12px}.growth-label{font-size:13px}.growth p{font-size:12px}
.care-dock header span{font-size:12px}.care-actions button strong{font-size:13px}.care-dock>p{font-size:13px}
.egg-fragments span{font-size:12px!important;color:#245346}

/* Pet loading: the poster occupies the same egg-sized spot the model will, instead of a large round portrait. */
.dragon-model .model-fallback{position:absolute;inset:auto 0 9% 0;width:auto;height:38%;max-height:none;margin:auto;aspect-ratio:.7;object-fit:cover;object-position:-999px -999px;border-radius:50% 50% 46% 46%/60% 60% 40% 40%;background:radial-gradient(circle at 36% 28%,#fffefa 0 12%,#f5ebcc 46%,#dccb93 100%);box-shadow:inset -10px -14px 22px #b9a06655,0 14px 18px #142c2533;animation:poster-breathe 2.2s ease-in-out infinite}
@keyframes poster-breathe{50%{transform:translateY(-4px)}}

/* Pet as the hero: taller stage, less chrome around it. */
/* model-viewer frames portrait canvases by their width; a square canvas (clipped by the room when wider) keeps the pet large on phones and tablets. */
.play-layout:not(.game-open) .dragon-panel .dragon-model{flex:none;width:auto;max-width:none;height:100%;aspect-ratio:1;margin-inline:0;transform:none!important}
@media(min-width:701px){
  .play-layout:not(.game-open) .dragon-panel .dragon-world{inset:72px 0 96px!important}
  .dragon-panel[data-room="home"] .growth{left:auto;right:auto;inset-inline-end:24px;bottom:84px;width:290px;transform:none}
  .dragon-panel[data-room="home"] .play-discovery-entry{left:auto;inset-inline-start:24px;bottom:84px;transform:none;width:max-content;max-width:42%}
  .needs-panel{width:min(660px,calc(100% - 48px))}
}
@media(max-width:700px){
  .app-shell>.topbar{padding-inline:4px;gap:6px}
  .topbar .brand{font-size:21px!important}
  .topbar .top-actions{gap:6px;margin-inline-end:50px}
  .topbar .top-actions button{min-height:44px}
  .grown-up-toggle{padding:0;width:44px}
  .grown-up-toggle .grown-up-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body:has(>.app-shell):not(.onboarding-active) #pipalo-accessibility-launcher{top:10px;inset-inline-end:11px}
  /* Needs: one calm row of four pictures with meters. */
  .needs-panel{top:48px;width:calc(100% - 16px);grid-template-columns:repeat(4,1fr);gap:5px;padding:5px;border-radius:15px}
  .need-meter{grid-template-columns:1fr;justify-items:center;gap:5px;padding:6px 6px 7px}
  .need-meter>.need-icon{grid-row:auto;width:32px;height:32px}
  .need-meter>.need-icon svg{width:24px;height:24px}
  .need-meter>strong{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .need-track{grid-column:1;width:100%;height:8px}
  .room-heading{top:108px}
  .room-nav button{gap:2px}.room-nav button .nav-icon svg{width:26px;height:26px}.room-nav button strong{font-size:12px}
  .care-actions{grid-template-columns:repeat(4,1fr)!important}.care-actions button strong{font-size:12px;line-height:1.15;text-align:center}
  .care-dock header strong{font-size:14px}.care-dock>p{font-size:12px}
  .play-layout:not(.game-open) .dragon-panel .dragon-world{inset:112px 0 150px!important;margin-left:0!important}

  .dragon-panel[data-room="home"] .growth{bottom:72px}
  .dragon-panel[data-room="home"] .play-discovery-entry{bottom:136px;min-height:52px;width:min(270px,82%);padding:4px 14px 4px 10px;border-bottom-width:4px}
  .play-discovery-entry>span:first-child{width:46px;height:42px}.play-discovery-entry strong{font-size:17px}.play-discovery-entry small{font-size:12px}
  .growth{padding:6px 10px 5px}.growth-label{font-size:12px}
}
/* Phone bedroom: dress-up categories become one swipeable row so the pet stays visible above them. */
@media(max-width:700px){
  .dragon-panel[data-room="bedroom"] .wardrobe-cabinet.wardrobe-discovery{bottom:146px!important}
  .wardrobe-discovery .wardrobe-tray header{margin-bottom:5px}
  .wardrobe-discovery .wardrobe-categories{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;gap:6px;padding:2px 2px 4px}
  .wardrobe-discovery .wardrobe-categories button{flex:0 0 82px;min-height:66px;scroll-snap-align:start}
  .wardrobe-discovery .wardrobe-categories{scrollbar-width:thin}
  .dragon-panel[data-room="bedroom"] .care-dock{padding:6px}
  .dragon-panel[data-room="bedroom"] .care-dock>p{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
  .play-layout:not(.game-open) .dragon-panel[data-room="bedroom"] .dragon-world{inset:112px 0 272px!important}
  .play-layout:not(.game-open) .dragon-panel[data-room="playroom"] .dragon-world{inset:118px 0 54%!important}
}
@media(prefers-reduced-motion:reduce){.need-meter[data-tone="orange"] .need-icon,.dragon-model .model-fallback{animation:none}}
html.pipalo-reduced-decoration .need-meter .need-icon,html.pipalo-reduced-decoration .model-fallback{animation:none!important}
/* The phone playroom rug is intentionally wider than the panel; clip it so focus/scrollIntoView can never shift the room sideways. */
.dragon-panel{overflow:clip}
/* Narrow phones: the grown-up panel was anchored to the lock button and spilled off the left edge. */
@media (max-width:420px){.grown-up-panel{position:fixed;top:68px;inset-inline:12px;width:auto}}