/* TappyTap paper-storybook tokens. Keep ring geometry and self-hosted Baloo 2. */
:root{--paper:#fff8eb;--paper-ink:#234e52;--paper-coral:#f27c67;--paper-gold:#f6c85f;--paper-aqua:#69beb4;}
/* Scenery belongs to the viewport, not the width-constrained content panel. */
body.hub-bg,body.land-bg,body.time-bg{background:var(--paper) url('../Images/Storybook/home.webp') center bottom/cover no-repeat fixed!important;}
#landScreen,#hubScreen,#timeScreen{background:transparent!important;color:var(--paper-ink);}
body.hub-bg>.cloud,body.land-bg>.cloud,body.time-bg>.cloud{display:none;}
@media(min-aspect-ratio:1/1){
  body.hub-bg,body.land-bg,body.time-bg{background-image:url('../Images/Storybook/home-wide.webp')!important;}
}
#landScreen .cloud,#hubScreen .cloud,#timeScreen .cloud{display:none;}
img[src*='Storybook/wordmark']{filter:none!important;object-fit:contain;}
#hubScreen img[src*='Storybook/wordmark']{width:clamp(140px,35vw,180px)!important;}
.land-logo img{max-width:90vw;}
.land-logo{animation:none;}
.land-sub{color:var(--paper-ink);}
.land-start{background:var(--paper-ink);color:var(--paper);box-shadow:0 4px 0 #163b3e;border:0;}
#hubScreen.grouped-home .group-grid .cat-btn{background:rgba(255,248,235,.96)!important;box-shadow:0 4px 0 rgba(35,78,82,.12);}
#hubScreen.grouped-home .group-grid .activity-name{color:var(--paper-ink)!important;}
#hubScreen .cat-icon-img{filter:none!important;}
#hubScreen.grouped-home .group-grid::before{border-color:rgba(105,190,180,.3);}
#hubScreen .ring-back-btn{width:60px;height:60px;color:var(--paper-ink);background:var(--paper);}
body.dark-mode #hubScreen.grouped-home .group-grid .cat-btn{background:#234e52!important;}
body.dark-mode #hubScreen.grouped-home .group-grid .activity-name{color:var(--paper)!important;}
#fishScreen{background:#e4f4ef url('../Images/Storybook/ocean.webp') center bottom/cover no-repeat!important;}
#fishScreen .ft-fish{filter:none!important;touch-action:manipulation;}
#fishScreen .ft-fish:focus-visible{outline:3px solid var(--paper-ink);outline-offset:2px;border-radius:30%;}
#fishScreen .ft-still>div{animation:none!important;}
#fishScreen.fish-magic::before,#fishScreen.fish-magic::after{display:none;}
#fishScreen.fish-magic .ft-fish{filter:none!important;}
#fishScreen.fish-magic #fishContainer{filter:none;}
#fishScreen.fish-magic #fishContainer>.ft-fish{animation:none;}
@keyframes ftPaperTap{0%,100%{transform:scale(1);}45%{transform:scale(1.12,.94);}75%{transform:scale(.98,1.04);}}
body.calm #fishScreen .fish-magic-sparkle,body.calm #fishScreen .ft-bubble{display:none;}
@media(prefers-reduced-motion:reduce){
  #hubScreen *,#landScreen *,#timeScreen *,#fishScreen *{animation:none!important;transition:none!important;}
  #fishScreen .fish-magic-sparkle,#fishScreen .ft-bubble{display:none;}
}

/* Shared paper surfaces: preserve game geometry and semantic learning colors. */
:root{--text:var(--paper-ink);--panel-bg:var(--paper);--panel-text:var(--paper-ink);--focus-ring:#234e52;}
body{background:#fff8eb;}
body.match-bg{background:var(--paper) url('../Images/Storybook/studio.webp') center/cover no-repeat fixed!important;}
body:has(#letterMatchScreen[style*='flex']){background:var(--paper) url('../Images/Storybook/studio.webp') center/cover no-repeat fixed!important;}
#letterMatchScreen{background:transparent!important;}
#animalsZoneScreen,#drumsZoneScreen,#tracingScreen,#paintScreen{background:var(--paper) url('../Images/Storybook/studio.webp') center/cover no-repeat!important;}
#balloonScreen{background:#e4f4ef url('../Images/Storybook/garden.webp') center bottom/cover no-repeat!important;}
#sheepScreen,#sleepyScreen{background:#234e52 url('../Images/Storybook/night.webp') center bottom/cover no-repeat!important;}
#slpHouse{background:transparent;}
#sheepMeadow{background:transparent;}
#washUpScreen{background:var(--paper) url('../Images/Storybook/studio.webp') center/cover no-repeat!important;}
#tapScreen,#fireworksScreen{background:#234e52 url('../Images/Storybook/space.webp') center/cover no-repeat!important;}
.hbtn,.hbtn-dark{background:var(--paper)!important;color:var(--paper-ink)!important;border:2px solid #69beb4!important;box-shadow:0 3px 0 rgba(35,78,82,.12);text-shadow:none;}
.hbtn .hf,.hbtn-dark .hf{background:#69beb4;opacity:.35;}
.ui-icon-img,body.dark-mode .ui-icon-img{filter:none;}
#settingsCog,#infoBtn,#gameCog,#pianoCog,#rbCog{background:var(--paper);border-radius:50%;box-shadow:0 3px 0 rgba(35,78,82,.12);padding:5px;}
.settings-card,.pin-card,#gameCogPanel,#pianoSettingsPanel{background:var(--paper)!important;color:var(--paper-ink);border:2px solid #d9e6d7;box-shadow:0 8px 28px rgba(35,78,82,.16);}
.time-lang-btn,.time-age-btn,.time-btn,.time-stim-chip,.pset-btn,.pset-song,.pset-oct{background:#fffdf6;color:var(--paper-ink);border-color:#d9e6d7;box-shadow:none;}
.time-lang-btn.active,.time-age-btn.active,.time-btn-selected,.time-stim-chip.active,.pset-btn.active,.pset-song.active,.pset-oct.active{background:#e4f4ef!important;border-color:#69beb4!important;color:var(--paper-ink)!important;}
.land-title,.gtitle,.match-prompt-text,.time-title{text-shadow:none;color:var(--paper-ink);}
.land-badge{background:var(--paper);border-color:#d9e6d7;color:var(--paper-ink);box-shadow:none;}
.sports-card,.pit-card,.cbtn,.lm-tile{background:var(--paper);border:2px solid #d9e6d7;box-shadow:0 4px 0 rgba(35,78,82,.12);backdrop-filter:none;}
.sports-card span{color:var(--paper-ink);}
.lm-tile.selected{background:#e4f4ef;border-color:#69beb4;box-shadow:0 4px 0 rgba(35,78,82,.12);}
.cbtn.correct{background:#e4f4ef;border-color:#69beb4;filter:none;}
.spad{background:var(--paper)!important;border:2px solid #d9e6d7;box-shadow:0 4px 0 rgba(35,78,82,.12);color:var(--paper-ink);}
.spad::before{display:none;}
.spad .spad-lbl{color:var(--paper-ink);text-shadow:none;font-size:clamp(.55rem,2vw,.75rem);}
.ph-card-img,.pdisp{filter:none;}
.ph-flip-front,.ph-flip-back{background:var(--paper)!important;border:2px solid #d9e6d7;box-shadow:0 4px 0 rgba(35,78,82,.12);backdrop-filter:none;}
.ph-flip-front::before{display:none;}
.ph-card-word,.ph-card-word-big{color:var(--paper-ink);text-shadow:none;}
#balPromptText,#traceWord{background:var(--paper);color:var(--paper-ink);text-shadow:none;border:2px solid #d9e6d7;}
#fishMagicBtn,#dinoMagicBtn,#pitShapeBtn,#traceNextBtn{background:var(--paper);border-color:#69beb4;box-shadow:0 3px 0 rgba(35,78,82,.14);}
.pw-white{background:var(--paper);box-shadow:0 5px 0 #d7cbb6;border-color:#d7cbb6;}
.pw-black{background:#234e52;box-shadow:0 5px 0 #163b3e;}
#hubScreen:not(.grouped-home) .cat-btn{background:rgba(255,248,235,.9)!important;border:2px solid #d9e6d7!important;border-radius:28px;padding:8px;}
body.dark-mode .settings-card,body.dark-mode .pin-card,body.dark-mode #gameCogPanel{background:#234e52!important;color:var(--paper);border-color:#527577;}
body.dark-mode .cbtn,body.dark-mode .lm-tile,body.dark-mode .sports-card{background:#234e52;color:var(--paper);border-color:#527577;}
body.dark-mode .sports-card span{color:var(--paper);}
#sportsScreen{background:var(--paper) url('../Images/Storybook/sports.webp') center bottom/cover no-repeat;}
#bktJumbotron,#scrJumbotron,#hkyJumbotron,#ftbJumbotron,#bsbJumbotron,#bsbOutcomeText{background:var(--paper);border:2px solid #69beb4;box-shadow:0 4px 0 rgba(35,78,82,.18);color:var(--paper-ink);text-shadow:none;}
#bktJumbotron::after,#scrJumbotron::after,#hkyJumbotron::after,#ftbJumbotron::after{display:none;}
.bkt-jmb-brand,.scr-jmb-brand,.hky-jmb-brand,.ftb-jmb-brand,.bsb-jmb-label{color:var(--paper-ink);text-shadow:none;opacity:1;}
.jmb-pip{border-color:#69beb4;background:#e4f4ef;box-shadow:none;}
.jmb-pip.filled{background:var(--paper-coral);border-color:var(--paper-coral);box-shadow:none;}
#spcSkyBg{background:#234e52 url('../Images/Storybook/space.webp') center/cover no-repeat;}
#tapScreen>canvas:first-child{opacity:.35;}
#rbSun{filter:none!important;}
#scrStadium{display:none;}
.bedtime-step img{width:100%;height:100%;object-fit:contain;}
@media(min-aspect-ratio:1/1){
  #fishScreen{background-image:url('../Images/Storybook/ocean-wide.webp')!important;}
}

/* Audit: a shuffled full-width room must not leave holes in the house. */
#slpRooms{grid-auto-flow:row dense;padding-top:max(160px,env(safe-area-inset-top) + 160px);}
.slp-room{min-height:0;min-width:0;}
/* Square sprite exports need square display boxes, including bell/xylo. */
#instrumentsZoneRow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:780px;padding:0 16px max(20px,env(safe-area-inset-bottom));}
.inst-btn{width:100%;min-width:60px;height:clamp(80px,15vh,140px);align-items:center;}
.inst-btn>img:not(.xylo-mallet){width:100%;height:100%;object-fit:contain;filter:none;}
.inst-btn:last-child{grid-column:2;}
#wheelLabel{color:var(--paper-ink);text-shadow:none;}
#fidgetScreen.calm-bg #wheelLabel{color:var(--paper);}
.fidget-hint{color:var(--paper-ink);}
#wheelSpinBtn{background:var(--paper-ink);box-shadow:0 4px 0 #163b3e;min-height:60px;}
@media(max-height:500px) and (min-aspect-ratio:1/1){
  #slpRooms{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:1fr;padding-top:100px;}
  .slp-room-wide{grid-column:auto;}
  #instrumentsZoneRow{grid-template-columns:repeat(7,minmax(0,1fr));max-width:1100px;gap:6px;padding-inline:12px;}
  .inst-btn{height:clamp(80px,34vh,150px);}
  .inst-btn:last-child{grid-column:auto;}
  /* Keep result space and the repeat-spin target stable on short screens. */
  #fidgetScreen{display:none;box-sizing:border-box;padding:64px 8vw 16px;grid-template-columns:1fr 1fr;grid-template-rows:1fr 60px 28px;column-gap:24px;justify-items:center;align-items:center;}
  #fidgetScreen[style*='flex']{display:grid!important;}
  .wheel-wrap{grid-column:1;grid-row:1/4;margin:0;min-height:0;}
  #fidgetCanvas{width:min(38vw,calc(100dvh - 100px));height:min(38vw,calc(100dvh - 100px));}
  #wheelLabel{grid-column:2;grid-row:1;min-height:0;margin:0;font-size:1.5rem;}
  #wheelSpinBtn{grid-column:2;grid-row:2;margin:0;}
  #wheelHint{grid-column:2;grid-row:3;margin:0;}
}
/* The drum illustration has empty upper/lower margins. On short screens,
   crop those margins, keeping the kit and its registered hit regions large. */
@media(min-height:360px) and (max-height:500px) and (min-aspect-ratio:1/1){
  #drumsZoneStage{position:absolute;left:50%;transform:translateX(-50%);width:min(90vw,calc((100dvh - 90px)*1.2));top:calc(75px - (100dvh - 90px)*.468);}
}

/* Sticker-book sprint: reachable scene controls and paper surfaces. */
#stickerScenes{top:max(72px,env(safe-area-inset-top) + 64px);gap:8px;padding:5px;border-radius:40px;background:rgba(255,248,235,.94);}
#stickerScenes button{width:60px;height:60px;padding:8px;border:2px solid #d9e6d7;background:var(--paper);}
#stickerScenes button[aria-pressed=true]{border-color:var(--paper-ink);background:#e4f4ef;box-shadow:0 2px 0 rgba(35,78,82,.15);}
#stickerGrid{background:var(--paper);border-top-color:#69beb4;grid-template-rows:repeat(4,minmax(60px,1fr));}
#stickerGrid .sticker-slot{min-height:60px;}
@media(min-width:600px){#stickerScenes{top:max(8px,env(safe-area-inset-top));}}
@media(max-height:650px){
  #stickerGrid{grid-template-columns:repeat(16,minmax(76px,1fr));grid-template-rows:minmax(60px,1fr);overflow-x:auto;overflow-y:hidden;}
}
#stickersScreen .first-hint{top:max(152px,env(safe-area-inset-top) + 144px);}
@media(min-width:600px){#stickersScreen .first-hint{top:max(88px,env(safe-area-inset-top) + 80px);}}