/* Starlinia controls and buttons: bright, solid colors with white pictures and a white edge (like a picture book).
   Look only — every button keeps its old job. */
.toolbar,#ui-layer.ui-bottom .toolbar{border:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;gap:.25rem;padding:0}
.treasure{position:relative;width:3.8rem;height:3.8rem;min-width:48px;min-height:48px;padding:0;border:0;border-radius:50%;background:transparent!important;cursor:pointer;display:grid;place-items:center;overflow:visible;-webkit-tap-highlight-color:transparent;
  transition:transform .22s cubic-bezier(.3,1.6,.5,1),filter .2s ease,opacity .2s ease}
.treasure .tr-art,.theme-play .tr-art{width:100%;height:100%;display:block;overflow:visible;pointer-events:none;fill:none;stroke:none}
@media (hover:hover){.treasure:hover{transform:translateY(-3px) scale(1.08) rotate(-4deg);filter:brightness(1.06) drop-shadow(0 4px 8px rgba(40,20,90,.25))}
  .treasure:hover .tr-tip{opacity:1;transform:translate(-50%,0)}}
.treasure:active{transform:scale(.92)}
.treasure.tr-pop{animation:tr-pop .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes tr-pop{0%{transform:scale(.88)}55%{transform:scale(1.14) rotate(6deg)}100%{transform:scale(1)}}
.treasure:focus-visible{outline:none;filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #3cb8ff)}
.treasure:focus-visible .tr-tip{opacity:1;transform:translate(-50%,0)}
/* off = faded and grey, with a white line across */
.treasure.tr-off{filter:saturate(.25) brightness(1.04);opacity:.85}
/* the music star glows softly while music plays */
.treasure.tr-music:not(.tr-off){animation:tr-glow 2.4s ease-in-out infinite}
@keyframes tr-glow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}50%{filter:drop-shadow(0 0 7px rgba(255,255,255,.95)) drop-shadow(0 0 12px rgba(190,140,255,.8))}}
/* the name of each control: on hover / keyboard focus, and for a moment after a tap on touch screens */
.tr-tip{position:absolute;left:50%;top:calc(100% + 2px);transform:translate(-50%,-4px);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .18s ease,transform .18s ease;z-index:2;
  font:800 12.5px/1 Poppins,system-ui,sans-serif;color:#3b2470;padding:6px 10px;border-radius:999px;background:#fff;box-shadow:0 3px 8px rgba(40,20,90,.25)}
.treasure.tr-showtip .tr-tip{opacity:1;transform:translate(-50%,0)}
#ui-layer.ui-bottom .tr-tip,.theme-ctl .tr-tip{top:auto;bottom:calc(100% + 2px)}
/* tap sparkles */
.tr-spark{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;pointer-events:none;z-index:3;background:#fff;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 2px #ffe27a);animation:tr-spark .7s ease-out forwards}
.tr-spark:nth-child(3n){background:#ffe27a}.tr-spark:nth-child(3n+1){background:#ffb3e0}
@keyframes tr-spark{0%{transform:translate(0,0) scale(.4) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1.1) rotate(90deg);opacity:0}}
/* entrance: music star + replay star, bottom-left; purple and green, so they never look like the gold doorknob */
.theme-ctl{gap:8px}
.theme-btn.treasure{width:64px;height:64px;border:0!important;box-shadow:none!important;background:transparent!important}
.theme-btn.treasure.off{opacity:1}
.theme-play{border:3px solid #fff!important;background:#8b45f0!important;color:#fff!important;box-shadow:0 4px 12px rgba(60,20,120,.3)!important;height:52px!important;padding:0 18px 0 6px!important;font-weight:800!important}
.theme-play .tr-art{width:42px;height:42px}
html.calm .treasure{animation:none!important}
@media (max-width:600px),(max-height:500px){.treasure{width:3.3rem;height:3.3rem}.theme-btn.treasure{width:56px;height:56px}}

/* ---- buttons that take you somewhere: one bright color per place, white edge, a white star with a small picture ---- */
.nav-jewel,.nav-jewel.alt,.bk-btn.nav-jewel,.tw-btn.alt.nav-jewel,.ga-btn.alt.nav-jewel{
  --nav:#ff8a1e;--navd:#e06a00;position:relative;display:inline-flex!important;align-items:center;gap:8px;min-height:50px!important;padding:5px 20px 5px 5px!important;border-radius:999px!important;cursor:pointer;
  border:3px solid #fff!important;background:var(--nav)!important;color:#fff!important;font:800 16px/1.1 Poppins,system-ui,sans-serif!important;letter-spacing:.01em;text-shadow:0 1px 0 rgba(0,0,0,.18)!important;white-space:nowrap;
  box-shadow:inset 0 -4px 0 var(--navd),0 4px 10px rgba(40,20,90,.25)!important;transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s ease,filter .2s ease;-webkit-tap-highlight-color:transparent}
.nav-jewel::before{content:"";flex:0 0 auto;width:38px;height:38px;background:var(--nav-ico) center/100% 100% no-repeat;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.nav-jewel[data-nav="door"]{--nav:#8b45f0;--navd:#6a26cc;--nav-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpolygon%20points%3D%2232.0%2C9.0%2040.2%2C23.2%2056.3%2C26.6%2045.3%2C38.8%2047.0%2C55.1%2032.0%2C48.5%2017.0%2C55.1%2018.7%2C38.8%207.7%2C26.6%2023.8%2C23.2%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%20stroke-width%3D%2210%22%20stroke-linejoin%3D%22round%22/%3E%3Cg%20transform%3D%22translate%2820%2022%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M3%2023V6.5A4.5%204.5%200%200%201%207.5%202h9A4.5%204.5%200%200%201%2021%206.5V23%22%20fill%3D%22none%22%20stroke%3D%22%236a26cc%22%20stroke-width%3D%224.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2214%22%20r%3D%222%22%20fill%3D%22%236a26cc%22/%3E%3C/g%3E%3C/svg%3E")}
.nav-jewel[data-nav="map"]{--nav:#2a9ff0;--navd:#1679c8;--nav-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpolygon%20points%3D%2232.0%2C9.0%2040.2%2C23.2%2056.3%2C26.6%2045.3%2C38.8%2047.0%2C55.1%2032.0%2C48.5%2017.0%2C55.1%2018.7%2C38.8%207.7%2C26.6%2023.8%2C23.2%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%20stroke-width%3D%2210%22%20stroke-linejoin%3D%22round%22/%3E%3Cg%20transform%3D%22translate%2819%2023%29%22%3E%3Cpath%20d%3D%22M1%204.5l8-3%209%203%208-3v18l-8%203-9-3-8%203z%22%20fill%3D%22none%22%20stroke%3D%22%231679c8%22%20stroke-width%3D%223.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M9%201.5v18M18%204.5v18%22%20fill%3D%22none%22%20stroke%3D%22%231679c8%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/g%3E%3C/svg%3E")}
.nav-jewel[data-nav="book"]{--nav:#2fb55a;--navd:#1f8f42;--nav-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpolygon%20points%3D%2232.0%2C9.0%2040.2%2C23.2%2056.3%2C26.6%2045.3%2C38.8%2047.0%2C55.1%2032.0%2C48.5%2017.0%2C55.1%2018.7%2C38.8%207.7%2C26.6%2023.8%2C23.2%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%20stroke-width%3D%2210%22%20stroke-linejoin%3D%22round%22/%3E%3Cg%20transform%3D%22translate%2819%2023%29%22%3E%3Cpath%20d%3D%22M13%205C10%202.8%205.5%202%201%202.6v17c4.5-.6%209%20.2%2012%202.4%203-2.2%207.5-3%2012-2.4v-17C20.5%202%2016%202.8%2013%205z%22%20fill%3D%22none%22%20stroke%3D%22%231f8f42%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M13%205v17%22%20fill%3D%22none%22%20stroke%3D%22%231f8f42%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/g%3E%3C/svg%3E")}
.nav-jewel[data-nav="info"]{--nav:#ff6a55;--navd:#e2453a;--nav-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpolygon%20points%3D%2232.0%2C9.0%2040.2%2C23.2%2056.3%2C26.6%2045.3%2C38.8%2047.0%2C55.1%2032.0%2C48.5%2017.0%2C55.1%2018.7%2C38.8%207.7%2C26.6%2023.8%2C23.2%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%20stroke-width%3D%2210%22%20stroke-linejoin%3D%22round%22/%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2225%22%20r%3D%223%22%20fill%3D%22%23e2453a%22/%3E%3Cpath%20d%3D%22M32%2032v11%22%20fill%3D%22none%22%20stroke%3D%22%23e2453a%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E")}
.nav-jewel[data-nav="arrow"]{--nav:#ff8a1e;--navd:#e06a00;--nav-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpolygon%20points%3D%2232.0%2C9.0%2040.2%2C23.2%2056.3%2C26.6%2045.3%2C38.8%2047.0%2C55.1%2032.0%2C48.5%2017.0%2C55.1%2018.7%2C38.8%207.7%2C26.6%2023.8%2C23.2%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%20stroke-width%3D%2210%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M36%2023l-9%2011%209%2011%22%20fill%3D%22none%22%20stroke%3D%22%23e06a00%22%20stroke-width%3D%225.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E")}
@media (hover:hover){.nav-jewel:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:inset 0 -4px 0 var(--navd),0 8px 16px rgba(40,20,90,.3)!important}}
.nav-jewel:active{transform:translateY(1px);box-shadow:inset 0 -2px 0 var(--navd),0 2px 6px rgba(40,20,90,.25)!important}
.nav-jewel:focus-visible{outline:4px solid #ffd54a!important;outline-offset:3px}
.nav-jewel[hidden]{display:none!important}
.nav-jewel svg{display:none}
.nav-jewel.nav-round{width:54px;height:54px;min-width:48px;padding:0!important;justify-content:center;gap:0}
.nav-jewel.nav-round::before{width:40px;height:40px}
a.nav-jewel{text-decoration:none!important}
.rf-small.nav-jewel{display:none!important}
@media (max-width:760px){.rf-small.nav-jewel{display:inline-flex!important}.room-foot:has(.rf-small.nav-jewel){background:transparent!important;box-shadow:none!important;border:0!important;padding:0!important;backdrop-filter:none!important}}
@media (max-width:480px){.nav-jewel:not(.nav-round){font-size:14px!important;padding:4px 14px 4px 4px!important;gap:6px;min-height:48px!important}.nav-jewel::before{width:34px;height:34px}}
/* OK buttons on pop-ups */
.modal-btn,.modal-btn:hover{border:3px solid #fff!important;border-radius:999px!important;background:#8b45f0!important;color:#fff!important;font-family:Poppins,system-ui,sans-serif!important;font-weight:800!important;
  box-shadow:inset 0 -4px 0 #6a26cc,0 4px 10px rgba(40,20,90,.25)!important;text-shadow:none!important}
.modal-btn:hover{filter:brightness(1.07)}
/* look-left / look-right arrows */
.pan-btn{border:3px solid #fff!important;color:#fff!important;background:#8b45f0!important;box-shadow:inset 0 -3px 0 #6a26cc,0 3px 8px rgba(40,20,90,.25)}
.pan-btn:disabled{opacity:.4}
.pan-track{background:rgba(255,255,255,.8)!important}.pan-thumb{background:#8b45f0!important}

/* ---- other buttons, same bright family: solid color, white edge, soft press shadow ---- */
.ga-btn,.pp-btn,.tw-btn,.mv-btn,.mv-btn.go{border:3px solid #fff!important;border-radius:999px!important;color:#fff!important;font-family:Poppins,system-ui,sans-serif!important;font-weight:800!important;text-shadow:0 1px 0 rgba(0,0,0,.18)!important;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.18),0 4px 10px rgba(40,20,90,.22)!important;transition:transform .2s cubic-bezier(.3,1.6,.5,1),filter .2s ease}
.ga-btn,.pp-btn,.mv-btn.go{background:#8b45f0!important}
.pp-btn.alt{background:#ff5fae!important}
.mv-btn:not(.go){background:#3cb8ff!important}
.tw-btn{background:var(--c,#8b45f0)!important}
@media (hover:hover){.ga-btn:hover,.pp-btn:hover,.tw-btn:hover,.mv-btn:hover{transform:translateY(-2px);filter:brightness(1.07)}}
.ga-btn:active,.pp-btn:active,.tw-btn:active,.mv-btn:active{transform:translateY(1px)}
/* "Hear it again": pink, with a white star holding a speaker */
.pp-replay,.tw-rd-replay{display:inline-flex!important;align-items:center;gap:8px;border:3px solid #fff!important;border-radius:999px!important;background:#ff5fae!important;color:#fff!important;
  padding:4px 18px 4px 4px!important;min-height:48px!important;font:800 16px/1.1 Poppins,system-ui,sans-serif!important;box-shadow:inset 0 -4px 0 #e2318a,0 4px 10px rgba(40,20,90,.22)!important;cursor:pointer}
.pp-replay::before,.tw-rd-replay::before{content:"";width:36px;height:36px;flex:0 0 auto;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpolygon%20points%3D%2232.0%2C9.0%2040.2%2C23.2%2056.3%2C26.6%2045.3%2C38.8%2047.0%2C55.1%2032.0%2C48.5%2017.0%2C55.1%2018.7%2C38.8%207.7%2C26.6%2023.8%2C23.2%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%20stroke-width%3D%2210%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M21%2030h5l7.5-6v20.4l-7.5-6h-5z%22%20fill%3D%22%23e2318a%22/%3E%3Cpath%20d%3D%22M38%2029.3a6.5%206.5%200%200%201%200%209.6M42%2025.6a11.6%2011.6%200%200%201%200%2017%22%20fill%3D%22none%22%20stroke%3D%22%23e2318a%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") center/100% 100% no-repeat;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
@media (hover:hover){.pp-replay:hover,.tw-rd-replay:hover{transform:translateY(-2px);filter:brightness(1.07)}}
/* "Going to [town]…" note */
.mp-loading{background:#3cb8ff!important;border:4px solid #fff!important;color:#fff!important;font-family:Poppins,system-ui,sans-serif!important;font-weight:800!important;box-shadow:0 6px 18px rgba(40,20,90,.3)!important}
/* ---- town activities: one color per activity, the same in every town; the icons at the top light up in that color ---- */
.tw-act{--ac:#8b45f0;--acd:#6a26cc;background:var(--ac)!important;border:4px solid #fff!important;box-shadow:inset 0 -5px 0 var(--acd),0 6px 14px rgba(40,20,90,.28)!important;transition:transform .2s cubic-bezier(.3,1.6,.5,1),filter .2s ease}
.tw-act[data-act="riddle"]{--ac:#ff8a1e;--acd:#e06a00}
.tw-act[data-act="puzzle"]{--ac:#46cc6a;--acd:#24a347}
.tw-act[data-act="match"]{--ac:#3cb8ff;--acd:#1689e0}
.tw-act[data-act="story"]{--ac:#8b45f0;--acd:#6a26cc}
.tw-act-t{font-family:Poppins,system-ui,sans-serif!important;text-shadow:0 1px 0 rgba(0,0,0,.25)!important}
@media (hover:hover){.tw-act:hover{transform:translateY(-3px) rotate(-3deg);filter:brightness(1.07)}}
.tw-act:active{transform:scale(.94)}
.pp-track{background:#fff!important}
.pp-act{--ac:#8b45f0}
.pp-act[data-act="friend"]{--ac:#ff5fae}.pp-act[data-act="song"]{--ac:#2fc8c0}.pp-act[data-act="story"]{--ac:#8b45f0}
.pp-act[data-act="riddle"]{--ac:#ff8a1e}.pp-act[data-act="puzzle"]{--ac:#46cc6a}.pp-act[data-act="match"]{--ac:#3cb8ff}
.pp-act.on{background:var(--ac)!important;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ac)!important}
/* How to Play: each icon shown in its own color, to teach which icon is which */
.pp-icons .pp-act-key{--ac:#8b45f0;background:var(--ac)!important;color:#fff!important;border:3px solid #fff!important;box-shadow:0 2px 6px rgba(40,20,90,.2);font-weight:800}
.pp-act-key[data-act="friend"]{--ac:#ff5fae}.pp-act-key[data-act="song"]{--ac:#2fc8c0}.pp-act-key[data-act="story"]{--ac:#8b45f0}
.pp-act-key[data-act="riddle"]{--ac:#ff8a1e}.pp-act-key[data-act="puzzle"]{--ac:#46cc6a}.pp-act-key[data-act="match"]{--ac:#3cb8ff}
/* ---- labels and titles that sit on the art: bright color, white words, white edge ---- */
.pp-roombtn{background:#fff!important;border:3px solid #fff!important;color:#5b2bb5!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:0 4px 12px rgba(40,20,90,.3)!important;font-family:Poppins,system-ui,sans-serif!important;font-weight:800!important;padding:6px 8px 6px!important;border-radius:18px!important}
.pp-roombtn span{color:#5b2bb5!important;text-shadow:none}
.tw-title{background:var(--c,#3cb8ff)!important;border:3px solid #fff!important;color:#fff!important;font-family:Poppins,system-ui,sans-serif!important;font-weight:800!important;text-shadow:0 1px 0 rgba(0,0,0,.2)!important;box-shadow:inset 0 -4px 0 rgba(0,0,0,.15),0 4px 12px rgba(40,20,90,.25)!important}
.mp-welcome{background:#8b45f0!important;border:3px solid #fff!important;color:#fff!important;font-family:Poppins,system-ui,sans-serif!important;font-weight:800!important;box-shadow:inset 0 -4px 0 #6a26cc,0 4px 12px rgba(40,20,90,.25)!important}
.mp-welcome span span,.mp-welcome span{text-shadow:-1.5px -1.5px 0 #fff,1.5px -1.5px 0 #fff,-1.5px 1.5px 0 #fff,1.5px 1.5px 0 #fff,0 1.5px 0 #fff,0 -1.5px 0 #fff,1.5px 0 0 #fff,-1.5px 0 0 #fff}
.ds-label{background:#8b45f0!important;color:#fff!important;border:3px solid #fff!important;font-weight:800!important;box-shadow:inset 0 -4px 0 #6a26cc,0 4px 10px rgba(40,20,90,.25)!important}
.tw-about-card{background:#fff!important;border:4px solid var(--c,#8b45f0)!important;padding:0 30px 12px 0!important;overflow:hidden}
.tw-about-card h2{background:var(--c,#8b45f0);color:#fff!important;margin:0 -30px 8px 0!important;padding:8px 40px 8px 14px;font-weight:800!important;text-shadow:0 1px 0 rgba(0,0,0,.2)}
.tw-about-card p{padding-left:14px}
.tw-about-x{background:#fff!important;border:2px solid #fff!important;z-index:2}
.tw-about-x svg{stroke:#3b2470!important}
#captions.captions{background:#5a2bb5!important;color:#fff!important;border:3px solid #fff!important;font-weight:700!important;box-shadow:0 6px 16px rgba(40,20,90,.3)!important}
.tw-about-x{width:44px!important;height:44px!important;right:0!important;top:0!important}
.tw-pan{background:#8b45f0!important;border:3px solid #fff!important;color:#fff!important;box-shadow:inset 0 -4px 0 #6a26cc,0 4px 10px rgba(40,20,90,.25)!important}
.tw-pan svg{stroke:#fff!important}
/* bigger tap areas for little fingers */
.bk-arrow{width:46px!important;height:46px!important;margin:-23px 0 0 -23px!important;background:#8b45f0!important;box-shadow:inset 0 -3px 0 #6a26cc,0 3px 8px rgba(40,20,90,.3)!important}
.bk-arrow::after{content:"";position:absolute;inset:-16px;border-radius:50%}
.bk-arrow svg{width:26px!important;height:26px!important}
.si-x{width:44px!important;height:44px!important;min-width:44px;min-height:44px}
.si-x::after{content:"";position:absolute;inset:-8px}
/* Jigsaw level cards always fit the screen (no scrolling), in the same bright style */
.gj-pick{grid-template-rows:minmax(0,1fr)!important;align-content:stretch!important;overflow:hidden!important;max-height:100%}
.gj-level{min-height:0;max-height:100%;border:4px solid #fff!important;background:#8b45f0!important;box-shadow:inset 0 -5px 0 #6a26cc,0 6px 14px rgba(40,20,90,.25)!important}
.gj-level:nth-child(2){background:#3cb8ff!important;box-shadow:inset 0 -5px 0 #1689e0,0 6px 14px rgba(40,20,90,.25)!important}
.gj-level:nth-child(3){background:#46cc6a!important;box-shadow:inset 0 -5px 0 #24a347,0 6px 14px rgba(40,20,90,.25)!important}
.gj-level strong,.gj-level span{color:#fff!important}
.gj-prev{flex:1 1 auto;min-height:0;aspect-ratio:auto!important;width:auto!important;max-width:100%;height:auto}
@media (max-width:700px){
  .gj-pick{grid-template-columns:minmax(0,340px)!important;grid-template-rows:repeat(3,minmax(0,1fr))!important}
  .gj-level{flex-direction:row!important;gap:12px!important;padding:8px 12px!important;text-align:left}
  .gj-prev{height:100%!important;aspect-ratio:1!important;flex:0 0 auto;width:auto!important}
  .gj-level strong{display:block}
}
.gj-prev{flex:1 1 0!important;height:0;aspect-ratio:1!important;width:auto!important;align-self:center}
@media (max-width:700px){
  .gj-level{display:grid!important;grid-template-columns:auto 1fr;grid-template-rows:1fr auto auto 1fr;column-gap:14px!important;row-gap:4px!important;align-items:center}
  .gj-prev{grid-row:1/5;height:100%!important;flex:none!important}
  .gj-level strong{grid-row:2;grid-column:2}.gj-level>span:not(.gj-lstar){grid-row:3;grid-column:2}
}
/* Petalbrook: on phones the welcome note sits up high so the garden arch (the thing it asks you to tap) stays in view */
@media (max-width:700px){#town-screen .tw-about[data-town="petalbrook"]:not(.tucked){bottom:auto!important;top:calc(max(10px,env(safe-area-inset-top)) + 186px);left:66px!important;right:66px}
  #town-screen .tw-about[data-town="petalbrook"]:not(.tucked) .tw-about-card{width:100%}}
/* coloring on a sideways phone: a wider crayon box so every crayon (skin tones too) and the buttons fit without scrolling */
@media (orientation:landscape) and (max-height:520px){
  .dd-box{flex:0 0 min(340px,40vw)!important}
  .dd-crayons,.dd-crayons.dd-skin{grid-template-columns:repeat(6,1fr)!important}
  .dd-crayon{height:44px!important}.dd-crayon svg{height:40px!important;max-width:26px}
}
/* Starli's help bubble always sits on top of the buttons */
.starli-intro{z-index:60!important}
/* sideways phones: For Grown-Ups and the Passport share one small row at the top, clear of the headphones and the art */
@media (orientation:landscape) and (max-height:520px){
  .rf-small.nav-jewel{font-size:13px!important;min-height:44px!important;padding:3px 12px 3px 3px!important;gap:5px}
  .rf-small.nav-jewel::before{width:30px;height:30px}
  .room-foot:has(.rf-small.nav-jewel){top:max(8px,env(safe-area-inset-top))!important}
  #room-screen .pp-roombtn{top:max(8px,env(safe-area-inset-top))!important;left:calc(max(10px,env(safe-area-inset-left)) + 178px)!important;flex-direction:row!important;gap:6px!important;padding:3px 12px 3px 4px!important;border-radius:999px!important;min-height:44px}
  #room-screen .pp-roombtn img{width:26px!important}
  #room-screen .pp-roombtn span{font-size:13px}
}
/* coloring tools: bright buttons that wrap neatly */
.dd-tools{flex-wrap:wrap}
.dd-tool{border:3px solid #fff!important;border-radius:999px!important;color:#fff!important;font-weight:800!important;background:#3cb8ff!important;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18),0 3px 8px rgba(40,20,90,.22)!important}
.dd-tool svg{stroke:#fff!important}
.dd-tool.dd-finish{background:#46cc6a!important}
.dd-tool:disabled{opacity:.45}
/* while Starli's help bubble is open on a small screen, the top buttons step aside so it can be read and closed */
@media (max-width:760px),(max-height:520px){#room-screen:has(.starli-intro) .pp-roombtn,#room-screen:has(.starli-intro) .room-foot{visibility:hidden}}
/* the little pictures at the top of a town are buttons now */
button.pp-act{border:0;padding:0;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;opacity:.75!important;filter:grayscale(.4)!important;transition:transform .15s}
button.pp-act.on{opacity:1!important;filter:none!important}
@media (hover:hover){button.pp-act:hover{transform:scale(1.12);opacity:1!important;filter:none!important}}
button.pp-act:active{transform:scale(.92)}
button.pp-act:focus-visible{outline:3px solid #3cb8ff;outline-offset:2px}
#room-screen:has(.starli-intro) .pp-roombtn{visibility:hidden}
/* back / next song arrows under the headphones (only while music plays) */
.hp-skip{position:absolute;z-index:4;transform:translateX(-50%);display:flex;gap:6px}
.hp-skip[hidden]{display:none}
.hp-skip-b{width:44px;height:44px;border-radius:50%;border:3px solid #fff;background:#a35cff;padding:0;display:grid;place-items:center;cursor:pointer;box-shadow:inset 0 -3px 0 #7a2fe0,0 3px 8px rgba(40,20,90,.3);-webkit-tap-highlight-color:transparent}
.hp-skip-b svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.hp-skip-b:active{transform:scale(.92)}
.hp-skip-b:focus-visible{outline:3px solid #ffd54a;outline-offset:2px}
.ds-room .hp-skip-b{width:44px;height:44px}
@media (max-width:900px),(max-height:520px){.hp-skip{gap:12px}.hp-skip-b,.ds-room .hp-skip-b{width:56px;height:56px}.ds-room .hp-skip-b{width:72px;height:72px}.hp-skip-b svg{width:30px;height:30px}}
.hp-skip-b{position:relative}.hp-skip-b::after{content:"";position:absolute;inset:-10px;border-radius:50%}
/* town puzzle: real jigsaw-shaped pieces */
.tw-pz-piece{background:none!important;box-shadow:none!important;border-radius:0!important;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35)) drop-shadow(0 0 1.5px #fff)}
.tw-pz-in{position:absolute;inset:0;background-repeat:no-repeat;pointer-events:none}
.tw-pz-piece.drag{filter:drop-shadow(0 10px 14px rgba(0,0,0,.4)) drop-shadow(0 0 2px #fff)}
.tw-pz-piece.sel{filter:drop-shadow(0 0 0 #ffd23f) drop-shadow(0 0 4px #ffd23f) drop-shadow(0 0 4px #ffd23f)}
.tw-pz-piece.locked{filter:none}
.tw-pz-slot{border:0!important}
.tw-pz-lines{position:absolute;overflow:visible;pointer-events:none}
.tw-pz-lines path{fill:none;stroke:rgba(123,47,247,.5);stroke-width:2.5;stroke-dasharray:7 6}
.tw-pz-board.done .tw-pz-lines{display:none}
.tw-pz-lines{display:none!important}
/* the Passport and the headphones glow like the other tap spots in the room, so kids know they can tap them */
#room-screen .pp-roombtn{animation:none!important;overflow:visible}
#room-screen .pp-roombtn::after{content:"";position:absolute;inset:-4px;border-radius:22px;pointer-events:none;animation:tap-glow-box 2.4s ease-in-out infinite}
@keyframes tap-glow-box{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0),0 0 0 0 rgba(200,90,255,0)}50%{box-shadow:0 0 10px 5px rgba(255,255,255,.95),0 0 26px 12px rgba(190,80,255,.85)}}
.hp-btn{animation:tap-glow-art 2.4s ease-in-out infinite!important}
@keyframes tap-glow-art{0%,100%{filter:drop-shadow(0 0 1px rgba(255,255,255,.5))}50%{filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px rgba(190,80,255,1)) drop-shadow(0 0 18px rgba(190,80,255,.8))}}
html.calm #room-screen .pp-roombtn::after{animation:none;box-shadow:0 0 10px 5px rgba(255,255,255,.95),0 0 22px 10px rgba(190,80,255,.7)}
html.calm .hp-btn{animation:none!important;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px rgba(190,80,255,1))!important}
.tw-act[data-act="game"]{--ac:#ff4f8b;--acd:#d82a6a}

/* Nov 14: purple buttons stay purple on hover (the cream hover made their white words disappear) */
@media (hover:hover){.ga-btn:not(.alt):hover,.pp-btn:not(.alt):hover{background:#8b45f0!important;border-color:#fff!important}}