/* Playroom home. Designed on a fixed 360×760 stage that js/hub.js scales to fit the phone. */
#hub { display: none; place-items: center; overflow: hidden; }
#hub.on { display: grid; }
.room { position: relative; width: 360px; height: 760px; transform-origin: center; font-family: var(--font-ui); }
.room > * { position: absolute; }
.room .wall { inset: 0 0 36%; background: radial-gradient(circle, #ffffff66 0 3px, transparent 4px) 0 0 / 36px 36px, linear-gradient(#e8f8f4, #cdeee6); }
.room .floor { left: 0; right: 0; bottom: 0; height: 36%; background: repeating-linear-gradient(90deg, #e9b878 0 48px, #d9a25e 48px 96px); box-shadow: inset 0 8px 0 #b9803f44; }
.room .rug { left: 7%; right: 7%; bottom: 52px; height: 176px; border-radius: 50%; background: radial-gradient(ellipse at 50% 45%, #ff8fab 0 30%, #ff5f8f 31% 60%, #fff 61% 66%, #ff5f8f 67%); box-shadow: 0 6px 0 #0001; }
/* letterbox colours behind the stage (see scenes.js hub) */
.layer .wall-bleed { inset: 0 0 36%; background: #d4efe9; }
.layer .floor-bleed { left: 0; right: 0; bottom: 0; height: 36%; background: #e0ab68; }

/* Bunting + title */
.room .bunting { left: -4%; right: -4%; top: 44px; height: 46px; display: flex; justify-content: space-between; padding: 0 2%; }
.room .bunting::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 3px; background: #6d4c41; border-radius: 2px; transform: rotate(-1deg); }
.room .bunting i { width: 26px; height: 34px; margin-top: 6px; clip-path: polygon(0 0, 100% 0, 50% 100%); animation: flap 3s ease-in-out infinite; }
.room .bunting i:nth-child(odd) { animation-delay: -1.5s; }
@keyframes flap { 50% { transform: skewX(6deg); } }
.room .title { left: 50%; top: 92px; transform: translateX(-50%); font-size: 34px; font-weight: 700; color: #fff; paint-order: stroke fill; -webkit-text-stroke: 7px var(--ink); text-shadow: 0 4px 0 var(--ink), 0 8px 12px #0003; white-space: nowrap; }

/* Language balloons */
.room .balloons { left: 16px; top: 128px; display: flex; gap: 12px; }
.room .balloon { width: 50px; display: grid; justify-items: center; animation: bob 3s ease-in-out infinite; transition: transform .3s var(--spring); }
.room .balloon:nth-child(2) { animation-delay: -1s; } .room .balloon:nth-child(3) { animation-delay: -2s; }
.room .balloon b { width: 46px; height: 56px; border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%; background: radial-gradient(circle at 35% 30%, #fff8, transparent 40%), var(--c); box-shadow: 0 4px 0 var(--d); display: grid; place-items: center; color: #fff; font-size: 26px; font-weight: 800; font-family: var(--font-glyph); line-height: 1; }
.room .balloon i { width: 2px; height: 24px; background: #0003; }
/* Selected language: bigger, gold ring with a glow, green tick. Others fade and shrink. */
.room .balloon.sel { z-index: 1; }
.room .balloon b { transition: transform .35s var(--spring), box-shadow .3s; }
.room .balloon.sel b { transform: scale(1.14); box-shadow: 0 0 0 4px #fff, 0 0 0 8px #ffd600, 0 5px 0 8px #c99a00, 0 0 22px 10px #ffd60088; animation: glow 1.6s ease-in-out infinite; }
.room .balloon.sel::after { content: "✓"; position: absolute; right: -6px; top: -8px; width: 24px; height: 24px; border-radius: 50%; background: #22c55e; color: #fff; font-size: 15px; font-weight: 800; display: grid; place-items: center; border: 2.5px solid #fff; box-shadow: 0 2px 0 #15803d; }
.room .balloon:not(.sel) { opacity: .6; filter: saturate(.75); }
.room .balloon:not(.sel) b { transform: scale(.84); }
@keyframes glow { 50% { box-shadow: 0 0 0 4px #fff, 0 0 0 8px #ffd600, 0 5px 0 8px #c99a00, 0 0 34px 16px #ffd600bb; } }
@keyframes bob { 50% { transform: translateY(-6px); } }

/* Toys (= activities) */
.room .obj { position: absolute; display: grid; justify-items: center; gap: 4px; cursor: pointer; }
.room .obj .label { background: #fff; color: var(--ink); font-weight: 700; font-size: 13px; padding: 2px 11px; border-radius: 999px; box-shadow: 0 3px 0 #0002; white-space: nowrap; }
.room .obj:active .toy { transform: scale(.94); }
.room .toy { transition: transform .15s var(--soft); }

.room .window { position: relative; width: 134px; height: 122px; border: 7px solid #fff; border-radius: 14px; overflow: hidden; background: linear-gradient(#8ae8ff, #1fa6ff 70%); box-shadow: 0 0 0 4px #bfe4dc, 0 8px 14px #0002; }
.room .window::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 40%; width: 5px; margin-left: -2px; background: #fff; }
.room .window::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: #6bd468; border-radius: 50% 50% 0 0 / 60% 60% 0 0; }
.room .window .peek { position: absolute; bottom: 6px; z-index: 1; width: 44px; height: 44px; animation: peek 5s ease-in-out infinite; }
.room .window .peek:last-child { animation-delay: -2.5s; }
.room .window .sunny { position: absolute; right: 10px; top: 8px; width: 34px; height: 34px; border-radius: 50%; background: #ffd600; box-shadow: 0 0 0 6px #ffd60044; }
@keyframes peek { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-8px); } 90% { transform: translateY(0); } }

.room .shelf { width: 148px; }
.room .shelf .plank { width: 100%; height: 13px; background: #c48b4c; border-radius: 4px; box-shadow: 0 5px 0 #8d5a2b; }
.room .shelf .books { display: flex; align-items: flex-end; gap: 4px; padding: 0 10px; }
.room .shelf .books i { width: 18px; height: 50px; border-radius: 3px 3px 0 0; background: var(--c); box-shadow: inset 0 0 0 2px #fff5; }
.room .shelf .books i:nth-child(2n) { height: 42px; }
.room .shelf .friends { display: flex; gap: 2px; width: 104px; margin-bottom: -5px; }
.room .shelf .friends .chara-box { width: 50%; }

.room .easel .canvas { width: 96px; height: 78px; background: #fff; border: 4px solid #c48b4c; border-radius: 6px; display: grid; place-items: center; box-shadow: 0 6px 0 #8d5a2b; }
.room .easel .canvas .chara-box { width: 62px; }
.room .easel .legs { width: 66px; height: 64px; margin-top: -6px; background: linear-gradient(80deg, transparent 46%, #c48b4c 47% 53%, transparent 54%), linear-gradient(-80deg, transparent 46%, #c48b4c 47% 53%, transparent 54%); }
.room .easel .pots { display: flex; gap: 3px; margin-top: -52px; }
.room .easel .pots i { width: 15px; height: 20px; border-radius: 3px 3px 5px 5px; background: var(--c); box-shadow: inset 0 -5px 0 #0002; }

.room .sorter .box { width: 112px; height: 70px; background: linear-gradient(#ffd600, #f0a000); border-radius: 10px; box-shadow: 0 6px 0 #c47a00; display: flex; justify-content: space-evenly; align-items: center; }
.room .sorter .box i { width: 22px; height: 22px; background: #c47a00; }
.room .sorter .box i.c { border-radius: 50%; } .room .sorter .box i.t { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.room .sorter .tops { display: flex; gap: 4px; margin-bottom: -10px; }
.room .sorter .tops .chara-box { width: 34px; }

.room .blocks { display: grid; justify-items: center; }
.room .blocks .row { display: flex; gap: 3px; }
.room .blocks b { width: 34px; height: 34px; border-radius: 6px; background: var(--c); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 20px; font-family: var(--font-glyph); box-shadow: inset -4px -4px 0 #0002, inset 3px 3px 0 #fff5, 0 3px 0 var(--d); }

.room .car .sticker { width: 74px; aspect-ratio: 1; font-size: 74px; animation: drive 4s ease-in-out infinite; }
@keyframes drive { 50% { transform: translateX(10px); } }
.room .bowl .fruit { display: flex; margin-bottom: -16px; }
.room .bowl .fruit .sticker { width: 34px; aspect-ratio: 1; font-size: 34px; }
.room .bowl .dish { width: 96px; height: 30px; border-radius: 0 0 44px 44px; background: linear-gradient(#82b1ff, #2979ff); box-shadow: 0 5px 0 #1a4fbf; }

.room .mascot { left: 50%; bottom: 182px; width: 86px; margin-left: -43px; cursor: pointer; animation: breathe 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
.room .gear { right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; background: #ffffffcc; display: grid; place-items: center; box-shadow: 0 3px 0 #0002; }
.room .gear svg { width: 50%; height: 50%; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }

/* Grown-ups panel */
#grownups { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: #2b246688; }
#grownups .panel { width: min(400px, 100%); background: #fffaf2; border-radius: 28px; padding: 20px 18px; display: grid; gap: 12px; box-shadow: 0 16px 50px #0004; animation: popin .45s var(--spring); }
#grownups h2 { font-size: 22px; color: var(--ink); }
#grownups h3 { font-size: 13px; letter-spacing: 1.3px; text-transform: uppercase; opacity: .6; }
#grownups .row { display: flex; gap: 8px; flex-wrap: wrap; }
#grownups .credit { font-size: 11px; opacity: .6; line-height: 1.4; }
#grownups .done { padding: 12px; border-radius: 16px; background: var(--ink); color: #fff; font-size: 18px; font-weight: 700; }
.chip { padding: 8px 18px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 17px; font-weight: 700; box-shadow: inset 0 0 0 2px #0000001a; }
.chip.sel { background: #ffd600; box-shadow: 0 3px 0 #c99a00; }