/* Painted stage: background, props, sprite actors and cues */
.scene.stage{position:relative;overflow:hidden;aspect-ratio:3/2;height:auto;width:100%;min-height:0;max-height:none;background:#e8e2d0;border-radius:24px;border:1px solid #d8d2bf;box-shadow:0 8px 24px #2e40331a;isolation:isolate;container-type:inline-size}
.stage-bg-wrap{position:absolute;inset:0;z-index:0}
.stage-bg{width:100%;height:100%;object-fit:cover;display:block;user-select:none;pointer-events:none}
/* The full road projection includes the shelter and bin foreground layers. */
.stage--sidewalk .stage-bg{object-fit:fill}
.sidewalk-traffic{position:absolute;inset:0;z-index:1;pointer-events:none}
.sidewalk-foreground{position:absolute;inset:0;z-index:2;pointer-events:none}
.sidewalk-foreground img{display:block;width:100%;height:100%;object-fit:fill}
.stage--moving .stage-bg-wrap{animation:bus-ride 1.6s ease-in-out infinite}
@keyframes bus-ride{0%,100%{transform:translateY(0)}50%{transform:translateY(-.35%)}}

.prop{position:absolute;height:auto;transform:translate(-50%,-100%);transform-origin:50% 100%;pointer-events:none;user-select:none;filter:drop-shadow(0 4px 3px #2b2a1f26)}
.prop.shadow{filter:blur(.5px) opacity(.85);mix-blend-mode:multiply}
.prop.flame{filter:drop-shadow(0 0 10px #ffc96b);animation:flicker 1.1s ease-in-out infinite;transform-origin:50% 100%}
/* lit znicz: the lantern stays still, its flame flickers and the light breathes */
.prop.glow{filter:none;animation:glow-breathe 2.6s ease-in-out infinite}
.prop.lit-lamp{filter:drop-shadow(0 0 5px #ffb85c99) drop-shadow(0 3px 2px #2b2a1f26)}
.prop.flame-tip{filter:drop-shadow(0 0 4px #ffcf6e);mix-blend-mode:screen;transform-origin:50% 92%;animation:flame-tip .9s ease-in-out infinite}
@keyframes glow-breathe{0%,100%{transform:translate(-50%,-100%) scale(.94)}50%{transform:translate(-50%,-100%) scale(1.05)}}
@keyframes flame-tip{0%,100%{transform:translate(-50%,-100%) scale(1,1) skewX(0)}30%{transform:translate(-50%,-100%) scale(.9,1.1) skewX(3deg)}60%{transform:translate(-50%,-100%) scale(1.05,.94) skewX(-2deg)}80%{transform:translate(-50%,-100%) scale(.96,1.06) skewX(1deg)}}
/* things held in a hand hang from their top (a broom handle) */
.prop.held{transform:translate(-50%,0);transform-origin:50% 0}
.prop.lit-match{filter:drop-shadow(0 0 6px #ffc96b)}
@keyframes flicker{0%,100%{transform:translate(-50%,-100%) scale(1,1)}35%{transform:translate(-50%,-100%) scale(.92,1.08)}70%{transform:translate(-50%,-100%) scale(1.06,.95)}}

.actor{position:absolute;width:0;transform:translateY(-100%);pointer-events:none}
.actor-depth{height:100%;transform-origin:50% 100%}
.actor-flip,.actor-bob{height:100%;position:relative}
.actor:is([data-view="walk-side"],[data-view="wside1"],[data-view="wside2"],[data-view="sweep"])[data-dir="left"] .actor-flip{transform:scaleX(-1)}
.actor[data-view="sweep"] .actor-bob{transform-origin:50% 100%;animation:sweep-sway .52s ease-in-out infinite alternate}
@keyframes sweep-sway{from{transform:rotate(-1.5deg)}to{transform:rotate(2deg)}}
.pv{position:absolute;bottom:var(--sprite-floor,0);left:0;height:100%;width:auto;max-width:none;transform:translateX(var(--sprite-anchor,-50%));display:none;user-select:none;filter:drop-shadow(0 6px 4px #2c2a1f30)}
.pv-svg svg{height:100%;width:auto;display:block}
.pv-svg{aspect-ratio:260/415}
/* sprite actors */
.actor[data-kind="sprite"][data-view="front"] .pv-front,
.actor[data-kind="sprite"][data-view="back"] .pv-back,
.actor[data-kind="sprite"][data-view="look-left"] .pv-look,
.actor[data-kind="sprite"][data-view="look-right"] .pv-look,
.actor[data-kind="sprite"][data-view="wave"] .pv-wave,
.actor[data-kind="sprite"][data-view="give"] .pv-give,
.actor[data-kind="sprite"][data-view="happy"] .pv-happy,
.actor[data-kind="sprite"][data-view="check"] .pv-check,
.actor[data-kind="sprite"][data-view="wside1"] .pv-wside1,
.actor[data-kind="sprite"][data-view="wside2"] .pv-wside2,
.actor[data-kind="sprite"][data-view="wcontact2"] .pv-wcontact2,
.actor[data-kind="sprite"][data-view="wpass1"] .pv-wpass1,
.actor[data-kind="sprite"][data-view="wpass1r3"] .pv-wpass1r3,
.actor[data-kind="sprite"][data-view="wpass2"] .pv-wpass2,
.actor[data-kind="sprite"][data-view="wpass2r3"] .pv-wpass2r3,
.actor[data-kind="sprite"][data-view="wpass2r4"] .pv-wpass2r4,
.actor[data-kind="sprite"][data-view="sweep"] .pv-wside1{display:block}
.actor[data-kind="sprite"][data-view="look-right"] .pv-look{transform:translateX(-50%) scaleX(-1)}
.actor[data-kind="sprite"][data-view="walk-side"] .pv-wside1,.actor[data-kind="sprite"][data-view="walk-side"] .pv-wside2,
.actor[data-kind="sprite"][data-view="walk-side"] .pv-wpass1,.actor[data-kind="sprite"][data-view="walk-side"] .pv-wpass1r3,.actor[data-kind="sprite"][data-view="walk-side"] .pv-wcontact2,.actor[data-kind="sprite"][data-view="walk-side"] .pv-wpass2,.actor[data-kind="sprite"][data-view="walk-side"] .pv-wpass2r3,.actor[data-kind="sprite"][data-view="walk-side"] .pv-wpass2r4,
.actor[data-kind="sprite"][data-view="walk-back"] .pv-wback1,.actor[data-kind="sprite"][data-view="walk-back"] .pv-wback2{display:block}
.actor[data-kind="sprite"][data-view="walk-side"] .pv-wside2,.actor[data-kind="sprite"][data-view="walk-side"] .pv-wpass1,.actor[data-kind="sprite"][data-view="walk-side"] .pv-wpass1r3,.actor[data-kind="sprite"][data-view="walk-side"] .pv-wcontact2,.actor[data-kind="sprite"][data-view="walk-side"] .pv-wpass2,.actor[data-kind="sprite"][data-view="walk-side"] .pv-wpass2r3,.actor[data-kind="sprite"][data-view="walk-side"] .pv-wpass2r4,.actor[data-kind="sprite"][data-view="walk-back"] .pv-wback2{opacity:0}
/* vector avatars (own look / photo / wheelchair) */
.actor[data-kind="svg"] .pv-front{display:block}
.actor[data-kind="svg"]:is([data-view="back"],[data-view="look-left"],[data-view="look-right"],[data-view="walk-back"]) .pv-front{display:none}
.actor[data-kind="svg"]:is([data-view="back"],[data-view="look-left"],[data-view="look-right"],[data-view="walk-back"]) .pv-back{display:block}
.actor[data-kind="svg"][data-view="look-left"] .avatar-head{transform:translateX(-12px) rotate(-10deg)}
.actor[data-kind="svg"][data-view="look-right"] .avatar-head{transform:translateX(12px) rotate(10deg)}
.actor[data-kind="svg"][data-view="look-left"] .avatar-profile-right,.actor[data-kind="svg"][data-view="look-right"] .avatar-profile-left{display:none}
.actor[data-kind="svg"]:not([data-view="look-left"]) .avatar-profile-left,.actor[data-kind="svg"]:not([data-view="look-right"]) .avatar-profile-right{display:none}

/* cues */
.stage-fx{position:absolute;inset:0;z-index:20;pointer-events:none}
.cue{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.5em;padding:.45em .8em;border-radius:999px;background:#fffdf6f2;color:#22382e;font-weight:800;font-size:clamp(14px,2.6cqw,26px);box-shadow:0 6px 18px #22302826;white-space:nowrap}
.cue b{display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:#1e6f80;color:#fff;font-size:.9em}
.cue i{display:block;width:1.6em;height:1.6em;background:center/contain no-repeat}
.cue--look i{background-image:url("assets/props/cue-eyes.svg")}
.cue--look[data-side="left"] span:before{content:"← "}
.cue--look[data-side="right"] span:after{content:" →"}
.cue--ok{background:#e4f3df}
.cue--ok i{background-image:url("assets/props/cue-ok.svg")}
.cue--stop{background:#c4473a;color:#fff}
.cue--stop i{background-image:url("assets/props/cue-stop.svg");width:2.2em;height:2.2em}
.cue--hot{background:#c4473a;color:#fff}
.cue--hot i{background-image:url("assets/props/cue-hot.svg");width:2.2em;height:2.2em}
.cue--wait i{background-image:url("assets/props/cue-wait.svg");width:2em;height:2em}
.cue--clock i{background-image:url("assets/props/cue-moon.svg");width:2em;height:2em}
.cue--beep{background:#e4f3df}
.cue--beep i{background-image:url("assets/props/cue-ok.svg")}
.cue--talk i{background-image:url("assets/props/cue-talk.svg");width:2em;height:2em}
.cue--heart,.cue--wave,.cue--sleep,.cue--sparkle,.cue--drops{background:none;box-shadow:none;padding:0}
.cue--heart i{background-image:url("assets/props/cue-heart.svg");width:3em;height:3em;animation:float-up 1.4s ease-out forwards}
.cue--wave i{background-image:url("assets/props/cue-wave.svg");width:3em;height:3em;transform-origin:50% 90%;animation:wave .5s ease-in-out infinite alternate}
.cue--sleep i{background-image:url("assets/props/cue-sleep.svg");width:3.2em;height:3.2em;animation:float-up 2.2s ease-out forwards}
.cue--sparkle i{background-image:url("assets/props/cue-sparkle.svg");width:4em;height:4em;animation:sparkle .9s ease-out forwards}
.cue--drops i{background-image:url("assets/props/cue-drops.svg");width:2.4em;height:3em;animation:drip .5s linear infinite}
.cue[class*="cue--item-"]{background:#fffdf6;padding:.3em}
.cue[class*="cue--item-"] i{width:2.2em;height:2.2em}
.cue--item-candle i{background-image:url("assets/props/candle.webp")}
.cue--item-matches i{background-image:url("assets/props/matches.webp")}
.cue--item-flowers i{background-image:url("assets/props/flowers.webp")}
@keyframes float-up{from{transform:translateY(20%);opacity:0}25%{opacity:1}to{transform:translateY(-60%);opacity:0}}
@keyframes wave{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
@keyframes sparkle{0%{transform:scale(.3) rotate(0);opacity:0}40%{opacity:1}100%{transform:scale(1.25) rotate(40deg);opacity:0}}
@keyframes drip{from{transform:translateY(-20%)}to{transform:translateY(30%)}}

/* mood layers */
.stage:after{content:"";position:absolute;inset:0;z-index:15;pointer-events:none;opacity:0;transition:opacity 1s ease;background:transparent}
.stage--glow:after{opacity:1;background:radial-gradient(circle at var(--glow-x,77%) var(--glow-y,60%),#ffd58a3d,transparent 16%)}
.stage--calm:after{opacity:1;background:linear-gradient(#f6edd700,#f6edd755)}
.stage--dim:after{opacity:1;background:#14203a8c;transition-duration:1.8s}
.stage--disco:after{opacity:1;background:radial-gradient(circle at 20% 30%,#ffd76a44,transparent 18%),radial-gradient(circle at 70% 25%,#8fd3c844,transparent 18%),radial-gradient(circle at 45% 60%,#f2a1b644,transparent 20%);animation:disco 1.2s steps(2) infinite}
@keyframes disco{50%{filter:hue-rotate(90deg)}}

/* carried items */
.stage .inventory{position:absolute;left:2%;bottom:3%;z-index:18;display:flex;gap:6px;padding:6px;border-radius:16px;background:#fffdf6d9}
.stage .inventory-item{width:clamp(30px,5cqw,48px);height:clamp(30px,5cqw,48px);display:grid;place-items:center}
.stage .inventory-item img,.stage .inventory-item svg{width:100%;height:100%;object-fit:contain}

@media (prefers-reduced-motion:reduce){.actor .actor-bob,.pv,.prop.flame,.prop.glow,.prop.flame-tip,.stage--moving .stage-bg-wrap,.cue i{animation:none!important}}
:root[data-reduced-motion="true"] .actor .actor-bob,:root[data-reduced-motion="true"] .pv,:root[data-reduced-motion="true"] .prop.flame,:root[data-reduced-motion="true"] .prop.glow,:root[data-reduced-motion="true"] .prop.flame-tip,:root[data-reduced-motion="true"] .stage--moving .stage-bg-wrap{animation:none!important}

/* line of sight while looking left / right */
.gaze{position:absolute;display:none;top:4%;left:0;width:26cqw;height:22%;transform-origin:0 50%;background:linear-gradient(90deg,#fff3c4f0,#fff3c400 92%);clip-path:polygon(0 47%,100% 0,100% 100%,0 53%);z-index:-1;pointer-events:none;animation:gaze-in .35s ease-out}
.gaze--guide{top:4%;opacity:.55}
.actor[data-view="look-right"] .gaze{display:block}
.actor[data-view="look-left"] .gaze{display:block;transform:scaleX(-1)}
@keyframes gaze-in{from{opacity:0;width:0}to{opacity:1}}
.stage-tape{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.stage-tape path{fill:none;stroke:#f3e7c4;stroke-width:1.4;stroke-dasharray:3 2;vector-effect:non-scaling-stroke;stroke-width:6px;opacity:.75}
.stage--disco .stage-fx{background:radial-gradient(circle at 15% 40%,#ffd76a55,transparent 14%),radial-gradient(circle at 62% 30%,#8fd3c855,transparent 15%),radial-gradient(circle at 40% 70%,#f2a1b655,transparent 16%),radial-gradient(circle at 85% 60%,#b7a3f055,transparent 14%);background-size:200% 200%;animation:disco-move 2.4s linear infinite}
@keyframes disco-move{0%{background-position:0 0}50%{background-position:100% 50%}100%{background-position:0 0}}
.voice-badge:has(span:empty){visibility:hidden}
.editor-bottom{position:static!important}
.topic-index span:first-child:empty{display:none}
.cemetery-adventure .feedback-copy:not(:has(> p)){justify-content:center;gap:24px}
.cemetery-adventure .feedback-copy:not(:has(> p)) .feedback-symbol{transform:scale(1.25)}
/* portrait tablets: picture on top, choices underneath */
@media (orientation:portrait) and (min-width:600px){
  .cemetery-adventure.story-main .story-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:max-content auto;align-items:start;align-content:start;gap:18px}
  .cemetery-adventure.story-main .story-layout>.scene.stage{width:min(100%,calc((100dvh - 700px) * 1.5));justify-self:center;min-height:auto}
  .cemetery-adventure .story-layout .choice-panel,.cemetery-adventure .story-layout .feedback-copy{width:100%}
}

/* painted pictograms sit straight on the coloured choice chip */
.choice-picture .sym-tile{display:none}

/* =====================================================================
   Board layer — 75" interactive panels in special-education classrooms.
   Children reach the lower part of the screen; caregivers the top band.
   ===================================================================== */
/* one locked screen, no scrolling, no text selection or long-press menus */
body:has(.child-main){overflow:hidden}
.shell:has(.child-main){height:100dvh;min-height:0;overflow:hidden}
.shell:has(.child-main) .child-main{min-height:0;overflow:hidden}
.child-main,.topbar{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.child-main input,.child-main textarea{touch-action:auto;-webkit-user-select:text;user-select:text}
.child-main img,.child-main svg{-webkit-user-drag:none}

/* caregiver band: every adult control in the top strip */
.topbar{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center}
.caregiver-tools{display:flex;justify-content:center;gap:8px;min-width:0;grid-column:2;grid-row:1}
.topbar>.top-actions{grid-column:3}
.caregiver-tools .utility{min-width:0;min-height:52px;padding:8px 14px;gap:8px;font-size:14px;border-radius:14px;flex:0 0 auto;box-shadow:none}
.caregiver-tools .utility svg{width:28px;height:28px}
.caregiver-tools .calm-toggle[aria-pressed="true"]{background:#e4efe6;border-color:#9fbea6}
@media (max-width:1500px){.caregiver-tools .utility span{display:none}.caregiver-tools .utility{padding:8px 11px}}
@media (max-width:900px){.topbar{grid-template-columns:auto auto}.caregiver-tools{grid-column:1/-1;grid-row:2;justify-content:flex-start}.topbar{height:auto}}

/* stories: picture in the upper band, big choices along the bottom */
@media (orientation:landscape) and (min-width:1000px){
  .story-main .story-layout,.cemetery-adventure.story-main .story-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:clamp(18px,2.6vh,34px);align-items:stretch;min-height:0;padding-bottom:clamp(10px,2vh,26px)}
  .story-main .story-layout>.scene,.cemetery-adventure.story-main .story-layout>.scene.stage{height:100%;width:auto;max-width:100%;min-height:0;max-height:none;aspect-ratio:3/2;justify-self:center;align-self:start}
  .story-main .choices-panel,.cemetery-adventure .choices-panel{display:flex;flex-direction:row;justify-content:center;align-items:stretch;gap:clamp(32px,2.6vw,48px);align-self:end}
  .story-main .choices-panel .choice,.cemetery-adventure .choices-panel .choice{flex:0 1 clamp(260px,22vw,380px);min-height:clamp(180px,21vh,230px);max-height:none;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:12px;padding:16px 18px;border-width:3px;border-radius:28px}
  .story-main .choices-panel .choice-picture,.cemetery-adventure .choices-panel .choice-picture,.cemetery-adventure .three-choices .choice-picture{width:clamp(110px,10vh,150px);min-width:0;height:clamp(110px,10vh,150px);padding:8px}
  .story-main .choices-panel .choice-label{font-size:clamp(20px,1.35vw,28px);line-height:1.15}
  .story-main .choices-panel .choice-arrow{display:none}
  .story-main .all-choices-grid{flex-wrap:nowrap}
  .story-main .all-choices-grid .choice{flex-basis:clamp(200px,16vw,300px)}
  .story-main .feedback-copy,.cemetery-adventure .feedback-copy{align-self:end;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:clamp(24px,2vw,40px);min-height:clamp(180px,21vh,230px)}
  .story-main .feedback-copy .primary{min-height:clamp(140px,16vh,190px);min-width:clamp(220px,16vw,300px);font-size:clamp(22px,1.4vw,30px);border-radius:28px;justify-content:center}
  .story-main .page-heading{margin-bottom:clamp(8px,1.4vh,18px)}
}

/* errorless learning: a tried wrong option fades, the right one gently glows */
.choice.choice--faded{opacity:.25;filter:grayscale(.7);pointer-events:none;box-shadow:none;transform:none}
.choice.choice--hint{border-color:#19778d!important;animation:hint-pulse 1.9s ease-in-out infinite}
@keyframes hint-pulse{0%,100%{box-shadow:0 0 0 0 #19778d55}50%{box-shadow:0 0 0 16px #19778d00}}
html[data-reduced-motion=true] .choice.choice--hint{box-shadow:0 0 0 6px #19778d55}
/* a calm stop sign: no alarm red, no flashing */
.cue--stop,.cue--hot{background:#fffaf3;color:#7a3b30;border:3px solid #e3aa9b}

/* Sensory Safe Mode: plain backgrounds, quieter picture, no glow or celebration */
html[data-sensory=true] body{background:#f8fafc}
html[data-sensory=true] .shell *{box-shadow:none!important;text-shadow:none!important}
html[data-sensory=true] .stage .stage-bg{filter:saturate(.55) brightness(1.05) contrast(.94)}
html[data-sensory=true] .stage:after,html[data-sensory=true] .stage-fx,html[data-sensory=true] .reward-celebration,html[data-sensory=true] .prop.glow{display:none!important}
html[data-sensory=true] .prop,html[data-sensory=true] .pv{filter:none!important}
html[data-sensory=true] .group-welcome,html[data-sensory=true] .avatar-preview,html[data-sensory=true] .ig-editor{background:#f8fafc!important}
html[data-sensory=true] .choice{background:#fff;border-color:#c9d3dd}

/* =====================================================================
   Character creator (Instagram-style): big figure on a soft backdrop,
   white sheet below with picture tabs and large round swatches.
   ===================================================================== */
.ig-editor{flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;border-radius:32px;overflow:hidden;background:linear-gradient(180deg,#e7e4fb 0%,#efedfc 45%,#f8f7fe 100%);border:1px solid #e3e0f3;position:relative}
.ig-top{position:absolute;z-index:3;top:0;left:0;right:0;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:16px;padding:18px 22px 0;pointer-events:none}
.ig-top>*{pointer-events:auto}
.ig-round{width:64px;height:64px;border-radius:50%;background:#fff;border:0;display:grid;place-items:center;box-shadow:0 4px 14px #2b235a1a}
.ig-round svg{width:28px;height:28px;fill:none;stroke:#1c1c1e;stroke-width:2.4;stroke-linecap:round}
.ig-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.ig-top .voice-badge{grid-column:3}
.ig-top .voice-badge{margin:0}
.ig-done{min-height:64px;padding:0 34px;border-radius:999px;border:0;background:#2f6ff2;color:#fff;font-size:clamp(20px,1.3vw,26px);font-weight:700;box-shadow:0 6px 18px #2f6ff244}
.ig-done:active{transform:scale(.97)}
.ig-stage{position:relative;min-height:0;display:flex;align-items:flex-end;justify-content:center}
.ig-editor .ig-figure{position:relative;height:100%;width:100%;background:none;border:0;border-radius:0;display:flex;align-items:flex-end;justify-content:center;padding-top:22px;min-height:0;overflow:visible}
.ig-editor .ig-figure:before{content:"";position:absolute;bottom:2%;left:50%;width:min(38%,340px);height:22px;transform:translateX(-50%);background:radial-gradient(ellipse,#2b235a26,transparent 70%)}
.ig-editor .ig-figure>svg{height:100%;width:auto;max-width:100%;position:relative}
.ig-name{position:absolute;left:24px;bottom:18px;display:flex;align-items:center;gap:10px;background:#ffffffd9;border-radius:999px;padding:6px 8px 6px 18px;box-shadow:0 4px 14px #2b235a14}
.ig-name span{font-size:15px;font-weight:700;color:#55515f}
.ig-name input{border:0;background:#fff;border-radius:999px;min-height:46px;padding:0 16px;font-size:18px;width:min(240px,22vw)}
.ig-sheet{background:#fff;border-radius:32px 32px 0 0;box-shadow:0 -10px 30px #2b235a12;display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;height:clamp(300px,47vh,540px)}
.ig-tabs{display:flex;justify-content:center;gap:clamp(4px,1.2vw,22px);padding:10px 18px 0;border-bottom:1px solid #ecebf2;margin:0;background:none}
.ig-tab{background:none;border:0;border-radius:0;min-height:clamp(76px,9vh,100px);min-width:clamp(100px,9vw,150px);padding:8px 10px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#8b8896;font-size:clamp(16px,1.05vw,20px);font-weight:600;position:relative;box-shadow:none}
.ig-tab.active{color:#1c1c1e;background:none;border:0}
.ig-tab.active:after{content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:4px;border-radius:4px;background:#1c1c1e}
.ig-tab i{display:grid;place-items:center;width:34px;height:34px}
.ig-tab .ig-dot{border-radius:50%;box-shadow:inset 0 0 0 1px #0000001f}
.ig-tab .ig-tab-face{border-radius:50%;overflow:hidden;background:#efedfc}
.ig-tab .ig-tab-face svg{width:100%;height:100%}
.ig-tab .ig-glyph svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ig-panel{min-height:0;overflow:auto;touch-action:pan-y;padding:clamp(16px,2.2vh,28px) clamp(20px,3vw,56px);display:flex;flex-direction:column;align-items:center;gap:22px}
.ig-swatches{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(24px,2.2vh,40px) clamp(28px,2.4vw,44px);max-width:1180px}
.ig-swatch{width:clamp(96px,13vh,150px);height:clamp(96px,13vh,150px);border-radius:50%;border:0;padding:0;background:none;display:grid;place-items:center;box-shadow:none;min-height:0}
.ig-swatch span{width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px #0000001a}
.ig-swatch.selected{box-shadow:0 0 0 5px #fff,0 0 0 9px #1c1c1e}
.ig-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(28px,2.4vw,44px)}
.ig-tile{width:clamp(160px,12vw,220px);min-height:clamp(180px,22vh,250px);border-radius:28px;background:#f3f2f8;border:3px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;padding:12px 10px 16px;box-shadow:none;font-size:clamp(17px,1.1vw,21px)}
.ig-tile.selected{border-color:#1c1c1e;background:#fff}
.ig-tile-art{width:100%;flex:1;display:grid;place-items:center;min-height:0}
.ig-tile-art svg{width:auto;height:clamp(110px,14vh,170px);max-width:100%}
.ig-panel .option-section{width:100%;max-width:1100px;margin:0}
.ig-panel .option-section h3{text-align:center;font-size:18px;color:#55515f;margin:4px 0 14px}
.ig-panel .picture-options{display:flex;flex-wrap:wrap;justify-content:center;gap:28px}
.ig-panel .picture-option{min-width:150px;min-height:150px;border-radius:24px}
.ig-note{margin:0;color:#6d6979;font-size:15px}
.ig-panel .photo-panel{max-width:900px;width:100%}
@media (orientation:portrait),(max-width:900px){
  .ig-sheet{height:auto;max-height:58vh}
  .ig-name{position:static;margin:10px auto}
  .ig-stage{flex-direction:column;align-items:center}
  .ig-editor .ig-figure{height:auto;flex:1}
}
/* painted figures wait (hidden) until their chosen colours are applied */
[data-paint]:not([data-painted]){visibility:hidden}
/* header: logo, caregiver tools, compact adult icons */
.topbar .brand-tagline{display:none}
.topbar>.top-actions{gap:6px}
.topbar>.top-actions>.text-button{font-size:0;padding:10px;min-height:52px;min-width:52px;justify-content:center}
.topbar>.top-actions>.text-button svg,.topbar>.top-actions>.text-button .nav-star{font-size:24px;width:26px;height:26px}
.topbar .profile-chip{max-width:220px}
/* child screens: heading on top, the things to tap in the lower part */
.child-main[data-view=topics],.child-main[data-view=profiles]{justify-content:space-between}
.child-main[data-view=topics] .topics{margin-top:auto;gap:clamp(32px,2.6vw,48px)}
.child-main[data-view=topics] .topic-card{min-height:clamp(320px,42vh,460px)}
.child-main[data-view=profiles] .zaradki-roster{margin-top:auto}
.child-main[data-view=profiles] .profile-card{min-height:clamp(220px,28vh,300px);min-width:clamp(180px,13vw,230px)}
.child-main[data-view=profiles] .profiles{gap:clamp(32px,2.6vw,48px)}
@media (orientation:landscape) and (min-width:1000px){
  .child-main[data-view=intro] .intro-copy{align-self:end}
  .child-main[data-view=intro] .intro-copy .primary{min-height:clamp(140px,16vh,190px);font-size:clamp(22px,1.4vw,30px);border-radius:28px}
}
.child-main[data-view=topics] .topics{flex:0 0 auto;align-content:end}
@media (orientation:landscape) and (min-width:1000px){
  .story-main .feedback-copy,.cemetery-adventure .feedback-copy{justify-self:center;width:min(1200px,100%);padding:16px 24px}
  .story-main .feedback-copy .primary,.cemetery-adventure .feedback-copy .primary{flex:0 0 auto;width:auto}
  .story-main .feedback-copy .reward-celebration{position:static;transform:none;flex:0 0 auto}
  .story-main .feedback-copy .feedback-symbol{flex:0 0 auto;width:clamp(110px,10vh,150px);height:clamp(110px,10vh,150px)}
  .story-main .feedback-copy p{flex:0 1 auto;max-width:520px;font-size:clamp(20px,1.3vw,26px)}
}

/* selected tiles are marked by their outline; the old corner check is not used here */
.ig-tile{position:relative}
.ig-tile.selected::after{display:none!important}

/* ===== 16:9 boards: the picture gets the height, choices stay one slim row at the bottom ===== */
@media (orientation:landscape) and (min-width:1000px){
  .child-main.story-main{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);column-gap:24px;padding-top:clamp(8px,1.2vh,16px);padding-bottom:0;min-height:0}
  .child-main.story-main>.page-heading{grid-column:1;grid-row:1;margin:0 0 clamp(6px,1vh,12px);align-items:flex-end}
  .child-main.story-main>.journey-progress{grid-column:2;grid-row:1;align-self:end;margin:0 0 clamp(8px,1.2vh,14px)}
  .child-main.story-main>:not(.page-heading):not(.journey-progress){grid-column:1/-1}
  .child-main.story-main>.story-layout{grid-row:2}
  .story-main .page-heading .eyebrow{margin:0 0 2px;font-size:12px}
  .story-main .page-heading .page-title{font-size:clamp(26px,3.2vh,40px);line-height:1.1;margin:0}
  .story-main .page-heading .subtitle{display:none}
  .story-main .story-layout,.cemetery-adventure.story-main .story-layout,.story-main .story-layout.many-choices-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:clamp(10px,1.4vh,18px);min-height:0;padding-bottom:clamp(10px,1.6vh,20px);align-items:stretch}
  .story-main .story-layout>.scene,.cemetery-adventure.story-main .story-layout>.scene.stage,.story-main .story-layout.many-choices-layout>.scene{grid-row:1;height:100%;width:auto;max-width:100%;max-height:none;min-height:0;aspect-ratio:3/2;justify-self:center;align-self:stretch}
  /* every number of choices: one row of horizontal cards */
  .story-main .choices-panel,.cemetery-adventure .choices-panel,.story-main .choices-panel.three-choices,.story-main .choices-panel.all-choices-grid{grid-row:2;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:stretch;gap:clamp(20px,1.8vw,36px);width:100%;max-width:1680px;justify-self:center;align-self:end}
  .story-main .choices-panel .choice,.cemetery-adventure .choices-panel .choice,.story-main .all-choices-grid .choice{flex:1 1 0;min-width:0;max-width:440px;min-height:0;height:clamp(120px,14.5vh,160px);flex-direction:row;justify-content:flex-start;align-items:center;text-align:left;gap:clamp(12px,1vw,20px);padding:12px clamp(14px,1.2vw,22px);border-width:3px;border-radius:24px}
  .story-main .choices-panel .choice-picture,.cemetery-adventure .choices-panel .choice-picture,.cemetery-adventure .three-choices .choice-picture,.story-main .all-choices-grid .choice-picture{flex:0 0 auto;width:clamp(92px,11.5vh,128px);min-width:0;height:clamp(92px,11.5vh,128px);padding:6px;border-radius:20px}
  .story-main .choices-panel .choice-label,.story-main .all-choices-grid .choice-label{font-size:clamp(19px,2.3vh,27px);line-height:1.15;overflow-wrap:normal;hyphens:auto}
  .story-main .choices-panel .choice-arrow,.story-main .all-choices-grid .choice-arrow{display:none}
  .story-main .choice-pager,.story-main .pager{grid-row:2}
  /* after a decision: the same slim band */
  .story-main .feedback-copy,.cemetery-adventure .feedback-copy{grid-row:2;align-self:end;min-height:0;height:clamp(120px,14.5vh,160px);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:clamp(18px,1.6vw,32px);padding:10px 20px}
  .story-main .feedback-copy p{font-size:clamp(19px,2.2vh,26px);margin:0;max-width:62ch}
  .story-main .feedback-copy .feedback-symbol svg,.story-main .feedback-copy .feedback-symbol img{width:clamp(84px,10vh,116px);height:clamp(84px,10vh,116px)}
  .story-main .feedback-copy .primary{min-height:clamp(100px,12vh,140px);min-width:clamp(200px,14vw,280px);font-size:clamp(22px,2.4vh,30px);border-radius:24px}
  .story-main .reward-celebration{position:absolute}
  .story-main .story-layout>*{grid-column:1}
  .story-main .story-layout>.stage-inventory{position:static;grid-row:1;grid-column:1;justify-self:start;align-self:end;display:flex;flex-direction:column;gap:8px;margin:0;z-index:2}
}

/* ===== groups and playing together ===== */
.group-heading{flex-direction:row!important;align-items:center!important;gap:18px!important;flex-wrap:wrap}
.group-badge{display:inline-flex;align-items:center;gap:14px;background:var(--paper);border:3px solid var(--group,#e9a23b);border-radius:22px;padding:8px 18px 8px 10px;min-height:72px;box-shadow:var(--shadow);text-align:left}
.group-badge small{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1.4px}
.group-badge strong{display:block;font-size:24px;letter-spacing:-.5px}
.group-emoji{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:50%;background:color-mix(in srgb,var(--group,#e9a23b) 22%,#fff);font-size:32px;line-height:1;flex-shrink:0}
.group-switch{font-size:22px;color:var(--muted);margin-left:4px}
.team-start{margin:0 0 0 auto!important;min-height:72px;font-size:21px;padding:10px 26px 10px 14px}
.team-faces{display:flex}
.team-faces i{width:46px;height:46px;border-radius:50%;overflow:hidden;background:#e5ebdd;border:3px solid var(--green);margin-left:-12px;display:block}
.team-faces i:first-child{margin-left:0}
.team-faces svg{width:100%;height:100%}
.team-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin:8px 0 22px}
.team-card{position:relative;background:var(--paper);border:4px solid transparent;border-radius:24px;padding:10px 10px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:var(--shadow);min-height:200px}
.team-card .profile-figure{width:110px;height:130px;display:block}
.team-card .profile-figure svg{width:100%;height:100%}
.team-card strong{font-size:19px}
.team-card.selected{border-color:var(--green);background:#eef5ea}
.team-check{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;border:3px solid #c9d3c4;color:transparent;font-weight:700;font-size:20px}
.team-card.selected .team-check{background:var(--green);border-color:var(--green);color:#fff}
.team-actions{display:flex;gap:16px;justify-content:flex-end;flex-wrap:wrap;padding-bottom:24px}
.team-strip{display:grid;grid-template-rows:repeat(5,auto);grid-auto-flow:column;gap:8px;align-content:start}
.child-main.story-main>.team-strip{grid-row:2;grid-column:1/-1;justify-self:end;align-self:start;z-index:4;margin-top:4px}
.team-turn{display:flex;align-items:center;gap:8px;background:var(--paper);border:3px solid transparent;border-radius:999px;padding:4px 14px 4px 4px;min-height:56px;box-shadow:var(--shadow);font-size:16px;font-weight:700;position:relative}
.team-turn .mini-avatar{width:46px;height:46px}
.team-turn .team-name{max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-turn .team-done{color:#d39a2c;font-size:13px;letter-spacing:-1px}
.team-turn.current{border-color:#d39a2c;background:#fff7e3;transform:scale(1.06);box-shadow:0 0 0 5px #f3d48a66,var(--shadow)}
.team-turn.current::before{content:"Teraz";position:absolute;top:-11px;left:12px;background:#d39a2c;color:#fff;font-size:11px;padding:1px 8px;border-radius:999px;letter-spacing:.5px}
[data-sensory="true"] .team-turn.current{box-shadow:var(--shadow);transform:none}
.team-ending{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;margin-bottom:6px}
.team-ending span{display:flex;align-items:center;gap:6px;font-weight:700}
.team-ending .mini-avatar{width:40px;height:40px}
.group-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:16px 0}
.group-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border-radius:22px;background:#fff;border:4px solid color-mix(in srgb,var(--group) 35%,#fff)}
.group-tile .group-emoji{width:76px;height:76px;font-size:46px}
.group-tile strong{font-size:20px}
.group-tile small{color:var(--muted)}
.group-tile.selected{border-color:var(--group);background:color-mix(in srgb,var(--group) 10%,#fff)}
.pin-dots{display:flex;gap:16px;justify-content:center;margin:14px 0}
.pin-dots i{width:22px;height:22px;border-radius:50%;border:3px solid var(--green);display:block}
.pin-dots i.on{background:var(--green)}
.pin-pad{display:grid;grid-template-columns:repeat(3,84px);gap:12px;justify-content:center;margin-bottom:6px}
.pin-key{height:72px;border-radius:20px;background:#eef3ea;font-size:30px;font-weight:700}
.pin-key:active{background:#d6e3cf}
.modal.shake{animation:pin-shake .4s}
@keyframes pin-shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
.group-admin{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;margin:16px 0 22px}
.group-card{background:var(--paper);border-radius:22px;padding:16px 18px;border:3px solid color-mix(in srgb,var(--group,#ccc) 40%,#fff);display:flex;flex-direction:column;gap:10px}
.group-card.active{border-color:var(--group)}
.group-card header{display:flex;align-items:center;gap:12px}
.group-name input{font-size:20px;font-weight:700;border:2px solid var(--line);padding:6px 10px;width:100%}
.group-card header .group-name{flex:1}
.group-icons{display:flex;flex-wrap:wrap;gap:6px}
.group-icons button{width:42px;height:42px;border-radius:12px;background:#f3f1ea;font-size:22px;border:2px solid transparent}
.group-icons button.selected{border-color:var(--green);background:#e6efe1}
.group-colors{display:flex;gap:8px}
.group-colors button{width:32px;height:32px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #0002}
.group-colors button.selected{box-shadow:0 0 0 3px var(--forest)}
.group-new{border-style:dashed;justify-content:flex-start}
.group-new .group-name{display:flex;flex-direction:column;gap:6px}
.group-kids .kid-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.group-kids .kid-row strong{min-width:8em}
.group-kids select{margin-left:6px;padding:6px 8px}
.photo-match{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.photo-frame{position:relative;width:180px;height:180px;flex-shrink:0}
.photo-frame img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.photo-frame i{position:absolute;inset:8% 16% 4%;border:3px dashed #fff;border-radius:50%;box-shadow:0 0 0 2px #0003}
.actor-tag{position:absolute;left:50%;top:-2%;transform:translate(-50%,-100%);background:#fff7e3;border:3px solid #d39a2c;color:var(--forest);font-weight:700;font-size:clamp(14px,1.6vh,22px);padding:2px 12px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 8px #0002;z-index:2;pointer-events:none}
.actor-tag::after{content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);border:6px solid transparent;border-top-color:#d39a2c}
.child-main[data-view=profiles] .group-heading{margin-top:auto}
.child-main[data-view=profiles] .group-heading+.zaradki-roster{margin-top:0}

/* ===== teacher's story before the outing (read by Asia) ===== */
.teacher-story{background:var(--paper);border-radius:28px;padding:20px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px;margin-bottom:18px;border:3px solid #e9e2cc}
.teacher-story header{display:flex;align-items:center;gap:14px}
.teacher-story-guide{width:64px;height:64px;border-radius:50%;overflow:hidden;background:#e5ebdd;flex-shrink:0;display:block}
.teacher-story-guide svg,.teacher-story-guide img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.teacher-story .eyebrow{margin:0 0 2px;font-size:12px}
.teacher-story h2{font-size:clamp(22px,1.5vw,28px);line-height:1.15}
.teacher-story-caption{font-size:clamp(20px,1.35vw,27px);line-height:1.4;min-height:5.6em;color:var(--forest);background:#f6f1e1;border-radius:20px;padding:14px 18px;display:flex;align-items:center}
.teacher-story[data-state=playing] .teacher-story-caption{background:#fff3d6;box-shadow:inset 0 0 0 3px #e8c46f}
.teacher-story-bar{height:8px;border-radius:99px;background:#ece6d3;overflow:hidden}
.teacher-story-bar i{display:block;height:100%;width:0;background:#d39a2c;border-radius:99px;transition:width .25s linear}
.teacher-story-controls{display:flex;gap:12px}
.teacher-story-controls .primary{flex:1;min-height:78px!important;font-size:21px!important;border-radius:22px!important;margin:0}
.teacher-story-controls .secondary{min-height:78px;padding:0 18px;display:inline-flex;align-items:center;gap:8px;border-radius:22px}
.teacher-story-controls svg{width:34px;height:34px}
.teacher-story-text summary{cursor:pointer;color:var(--muted);font-size:14px}
.teacher-story-text h3{margin:10px 0 6px;font-size:18px}
.teacher-story-text p{margin:0 0 8px;font-size:15px;color:var(--muted)}
.teacher-story-text p.now{color:var(--forest);font-weight:700}
.child-main[data-view=intro] .intro-with-film .intro-copy{display:flex;flex-direction:column;justify-content:flex-end}
.intro-copy .teacher-story~.eyebrow,.intro-copy .teacher-story~.narration{display:none}
.teacher-story-guide>*{transform:scale(2.3);transform-origin:50% 6%}

/* Teacher's story film: poster in the card, full-screen film with big picture buttons, no text on screen. */
.teacher-story-poster{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:22px;overflow:hidden;cursor:pointer;background:#173d32;box-shadow:inset 0 0 0 3px #e9e2cc}
.teacher-story-poster img{width:100%;height:100%;object-fit:cover;display:block}
.teacher-story-mark{position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;background:rgba(255,248,233,.92);display:grid;place-items:center;box-shadow:0 10px 30px rgba(10,20,10,.35)}
.teacher-story-mark svg{width:58px;height:58px}
.teacher-story-poster:focus-visible{outline:5px solid #d39a2c;outline-offset:3px}
.story-film{display:none;position:fixed;inset:0;z-index:900;background:#0f1d17;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:18px}
.teacher-story[data-open=true] .story-film{display:flex}
.story-film-screen{position:relative;width:min(100%,calc((100vh - 170px)*16/9));aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#000}
.story-film-video,.story-film-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.story-film-still{display:none}
.story-film.still .story-film-video{visibility:hidden}
.story-film.still .story-film-still{display:block}
.story-film-bar{width:min(100%,calc((100vh - 170px)*16/9));height:10px;border-radius:99px;background:rgba(255,248,233,.18);overflow:hidden}
.story-film-bar i{display:block;height:100%;width:0;background:#e8c46f;border-radius:99px}
.story-film-controls{display:flex;gap:22px;justify-content:center}
.story-film-controls button{width:104px;height:104px;min-height:0!important;border-radius:50%!important;display:grid;place-items:center;padding:0!important;margin:0}
.story-film-controls .primary{width:124px;height:124px}
.story-film-controls svg{width:56px;height:56px}
body.story-film-open{overflow:hidden}

.teacher-story.film-only{position:static;padding:0;margin:0;border:0;box-shadow:none;background:none}

/* Keep the authored road perspective and integrate the silent Remotion layer. */
.story-layout:has(>.stage--sidewalk){container-type:inline-size}
.scene.stage.stage--sidewalk,
.cemetery-adventure.story-main .story-layout>.scene.stage.stage--sidewalk,
.story-main .story-layout.many-choices-layout>.scene.stage.stage--sidewalk{aspect-ratio:16/9;width:100%;height:auto;max-width:100%;align-self:start;justify-self:center}
@media (orientation:landscape) and (min-width:1000px){
  .scene.stage.stage--sidewalk,
  .cemetery-adventure.story-main .story-layout>.scene.stage.stage--sidewalk,
  .story-main .story-layout.many-choices-layout>.scene.stage.stage--sidewalk{width:auto;height:min(100%,56.25cqw)}
}
.remotion-stage-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.stage--remotion>.sidewalk-traffic,.stage--remotion>.sidewalk-foreground{visibility:hidden}
.stage--remotion .actor[data-remotion-painted="true"] .actor-bob{visibility:hidden}
.stage--remotion .actor[data-remotion-native="true"] .pv-svg{visibility:visible}

/* Full-body mobility choices need enough space to show the seated posture. */
.ig-panel .option-section--mobility .picture-option{width:clamp(180px,15vw,240px);min-height:220px;padding:12px 16px 16px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.ig-panel .option-section--mobility .picture-option>svg{height:clamp(150px,18vh,195px);width:100%;flex:0 0 auto}
.ig-panel .option-section--mobility .picture-option>span{font-size:clamp(15px,1.05vw,19px);line-height:1.25;margin-top:10px}

/* A painted seated body stays coherent in every action; only its head turns. */
.actor[data-mobility="wheelchair"] .actor-flip{transform:none}
.actor[data-mobility="wheelchair"] .gaze{top:23%}
.actor[data-mobility="wheelchair"]:not([data-view="back"]):not([data-view="walk-back"]):not([data-view="look-left"]):not([data-view="look-right"]) .pv-front{display:block;opacity:1}
.actor[data-mobility="wheelchair"]:is([data-view="back"],[data-view="walk-back"]) .pv-back{display:block;opacity:1}
.actor[data-mobility="wheelchair"][data-view="look-left"] .pv-look-left,
.actor[data-mobility="wheelchair"][data-view="look-right"] .pv-look-right{display:block;opacity:1}
.pv-chair-look>svg{display:block;height:100%;width:100%;overflow:visible}

/* Keep participant confirmation visible; the roster, not the page, scrolls. */
.child-main[data-view=team]{display:flex;flex-direction:column;min-height:0}
.child-main[data-view=team]>.page-heading{flex:0 0 auto}
.child-main[data-view=team]>.team-pick{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;align-content:start;padding:6px}
.child-main[data-view=team]>.team-actions{flex:0 0 auto;margin-top:0;padding-bottom:8px}