/* One original articulated character, replacing all former dashboard sprites. */
.koko-scene { position:relative; width:100%; aspect-ratio:640/478; overflow:hidden; border-radius:9px; background:#171b13; pointer-events:none; contain:layout paint; }
.koko-scene img,.koko-scene video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }
.koko-scene video { opacity:0; }
.koko-scene[data-scene-state=playing] video { opacity:1; }
.koko-scene[data-scene-state=playing] img { visibility:hidden; }
.shift-treasure { display:grid; grid-template-columns:minmax(210px,35%) minmax(0,1fr); align-items:center; gap:25px; padding:24px; border-radius:16px 7px 16px 7px; }
.shift-treasure .koko-scene { grid-column:1; grid-row:1; }
.shift-treasure .treasure-copy { grid-column:2; grid-row:1; }
.hero.koko-welcome { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,35%); gap:24px; align-items:center; padding:24px; background:var(--surface); }
.hero.koko-welcome .koko-scene { grid-column:2; grid-row:1/4; }
.hero.koko-welcome p,.hero.koko-welcome h1 { margin:0; }
.today-overview > h1 { padding-right:0; }
@media(max-width:680px) {
  .shift-treasure { grid-template-columns:minmax(0,1fr); padding:18px; gap:18px; }
  .shift-treasure .treasure-copy { grid-column:1; grid-row:1; }
  .shift-treasure .koko-scene { grid-row:2; max-width:340px; justify-self:center; }
  .hero.koko-welcome { grid-template-columns:minmax(0,1fr); }
  .hero.koko-welcome .koko-scene { grid-column:1; grid-row:auto; max-width:340px; justify-self:center; }
}
@media(prefers-reduced-motion:reduce) {
  .koko-scene video { display:none!important; }
  .koko-scene img { visibility:visible!important; }
}