/* Where's Rocko? — Dress Up Rocko (a Mr. Potato Head-style dress-up for ages 2–4).
   Loaded by /dress/ on top of /styles.css tokens, with /landing.css after it for
   the carnival stage + locked play screen. Everything a toddler touches is BIG
   (≥ 64px), and nothing needs reading: tabs + pieces are pictures.
   Pieces are WebP cutouts (/dress/pieces/); backdrop decor is emoji. */
:root {
  --c-create: #E4589B;
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
}

body.dress main { max-width: 1180px; margin: 0 auto; padding: 0 14px; }
.dress-game { padding: 10px 0 12px; }

.dress-title {
  margin: 4px 0 10px; padding-left: 110px;           /* clear the fixed ☰ Menu */
  font-size: clamp(1.4rem, 3.6vw, 2.1rem); line-height: 1.1; color: #fff;
  text-shadow: 0 3px 0 rgba(0,0,0,.18);
}
.dress-title .accent { color: #FFC93C; }

/* ---- layout: stage beside the toy box (landscape) / above it (portrait) ---- */
.dress-wrap {
  display: flex; gap: 16px; align-items: flex-start; justify-content: center;
}
.dress-stage {
  --size: min(60vw, calc(100dvh - 150px), 640px);
  position: relative; flex: 0 0 auto; width: var(--size); aspect-ratio: 1;
  border-radius: 28px; overflow: hidden; border: 4px solid #fff;
  box-shadow: 0 16px 44px rgba(10,4,30,.5);
  touch-action: none; user-select: none; -webkit-user-select: none;
  transition: background .5s ease;
}
.dress-box {
  flex: 1 1 320px; max-width: 440px; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; color: var(--ink); border-radius: 26px; padding: 12px;
  box-shadow: 0 16px 44px rgba(10,4,30,.45);
}
@media (orientation: portrait), (max-width: 760px) {
  /* title sits to the right of the fixed ☰ Menu, on its row */
  .dress-title { text-align: right; padding-left: 130px; margin: 2px 0 10px; line-height: 46px; }
  .dress-wrap { flex-direction: column; align-items: center; gap: 12px; }
  .dress-stage { --size: min(94vw, calc(100dvh - 480px), 560px); min-width: 250px; }
  .ditem { min-height: 84px; }
  .dress-game { padding-bottom: 64px; }            /* clear the fixed 🏠 All games pill */
  .dress-box { width: min(94vw, 560px); max-width: none; flex: 0 0 auto; }
}

/* ---- backdrops (CSS only; decor emoji scattered by dress.js) ---- */
.dress-stage[data-scene="park"]  { background: linear-gradient(#8FD3FF 0%, #CDEEFF 58%, #7BCB5C 58%, #5DB047 100%); }
.dress-stage[data-scene="beach"] { background: linear-gradient(#7FD0FF 0%, #BDEBFF 45%, #2FA6D9 45%, #4FC0E8 58%, #F6DB9A 58%, #EBC574 100%); }
.dress-stage[data-scene="snow"]  { background: linear-gradient(#9DB7E0 0%, #DCE8F7 60%, #FFFFFF 60%, #EAF2FB 100%); }
.dress-stage[data-scene="party"] { background: radial-gradient(90% 80% at 50% 40%, #FFE3F1 0%, #FFB8D9 60%, #F58CC0 100%); }
.dress-stage[data-scene="space"] { background: radial-gradient(90% 90% at 70% 20%, #3B2A8C 0%, #1A1150 55%, #0B0828 100%); }
.dress-stage[data-scene="home"]  { background: linear-gradient(#FFE9C7 0%, #FFE0B0 62%, #C98B55 62%, #B27643 100%); }

.scene-decor { position: absolute; inset: 0; pointer-events: none; container-type: inline-size; }
.scene-decor span {
  position: absolute; font-family: var(--emoji); line-height: 1;
  transform: translate(-50%, -50%); opacity: .95;
}
.scene-decor .fall { animation: fall linear infinite; top: -8%; }
@keyframes fall { to { transform: translate(-50%, 125cqw) rotate(200deg); } }
.scene-decor .twinkle { animation: twinkle 2.4s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .25; } to { opacity: 1; } }

/* ---- Rocko + the pieces he's wearing (all positions in % of this box) ---- */
.dress-rocko {
  position: absolute; left: 6%; top: 5%; width: 88%; aspect-ratio: 1;
  container-type: inline-size;
}
.dress-rocko > img {
  display: block; width: 100%; height: 100%; cursor: pointer;
  filter: drop-shadow(0 10px 14px rgba(20,10,40,.28));
  -webkit-user-drag: none;
}
.dress-rocko.boing > img { animation: boing .45s ease; }
@keyframes boing {
  0% { transform: scale(1); } 30% { transform: scale(1.05, .95); }
  60% { transform: scale(.97, 1.04); } 100% { transform: scale(1); }
}
.dress-layer { position: absolute; inset: 0; pointer-events: none; }

.piece {
  position: absolute; height: auto; -webkit-user-drag: none; user-select: none;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scaleX(var(--fx, 1));
  cursor: grab; pointer-events: auto; touch-action: none;
  filter: drop-shadow(0 3px 3px rgba(20,10,40,.25));
}
.piece.pop-in { animation: popin .4s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes popin {
  from { transform: translate(-50%, -140%) rotate(var(--r, 0deg)) scaleX(var(--fx, 1)) scale(.2); opacity: 0; }
  to   { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scaleX(var(--fx, 1)) scale(1); opacity: 1; }
}
.piece.fly-off { animation: flyoff .5s ease-in forwards; pointer-events: none; }
@keyframes flyoff {
  to { transform: translate(calc(-50% + var(--dx, 0px)), -260%) rotate(calc(var(--r, 0deg) + 160deg)) scale(.4); opacity: 0; }
}
.piece.wiggle { animation: wiggle .5s ease; }
@keyframes wiggle {
  0%, 100% { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scaleX(var(--fx, 1)); }
  25% { transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) - 12deg)) scaleX(var(--fx, 1)) scale(1.1); }
  75% { transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) + 12deg)) scaleX(var(--fx, 1)) scale(1.1); }
}
.piece.dragging { cursor: grabbing; filter: drop-shadow(0 12px 10px rgba(20,10,40,.35)); z-index: 50 !important; }

.sparkle {
  position: absolute; pointer-events: none; font-family: var(--emoji); font-size: 7cqw;
  transform: translate(-50%, -50%); animation: sparkle .8s ease-out forwards;
}
@keyframes sparkle {
  to { transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(.3); opacity: 0; }
}

.dress-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.dress-flash.go { animation: flash .6s ease-out; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }

/* ---- the toy box ---- */
.dress-tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.dtab {
  height: 58px; border-radius: 16px; cursor: pointer;
  border: 3px solid transparent; background: var(--surface-2);
  font-family: var(--emoji); font-size: 1.9rem; line-height: 1;
  transition: transform .1s ease, background .15s ease;
}
.dtab.is-on { background: #FFF1C2; border-color: #FFC93C; transform: translateY(-2px); }
.dtab:focus-visible { outline: 3px solid var(--c-create); outline-offset: 2px; }

.dress-tray {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  align-content: start; min-height: 0;
}
.ditem {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 92px; padding: 8px 4px 6px; border-radius: 20px; cursor: pointer;
  border: 3px solid var(--line); background: #fff; color: var(--ink);
  transition: transform .1s ease, border-color .15s ease, background .15s ease;
}
.ditem:active { transform: scale(.94); }
.ditem:focus-visible { outline: 3px solid var(--c-create); outline-offset: 2px; }
.ditem .e { font-family: var(--emoji); font-size: 2.9rem; line-height: 1; }
.ditem .pic { width: 64px; height: 52px; object-fit: contain; pointer-events: none; }
.ditem .n { font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--ink-soft); }
.ditem.is-on { border-color: #35D07A; background: #EAFBF0; }
.ditem.is-on::after {
  content: "✓"; position: absolute; top: 5px; right: 8px;
  font-weight: 800; color: #1E9E55; font-size: 1rem;
}

.dress-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dtool {
  height: 60px; border-radius: 18px; cursor: pointer; border: 0;
  background: #FFC93C; box-shadow: 0 4px 0 #D9A21A;
  font-family: var(--emoji); font-size: 1.8rem; line-height: 1;
  transition: transform .08s ease, box-shadow .08s ease;
}
.dtool:active { transform: translateY(3px); box-shadow: 0 1px 0 #D9A21A; }
.dtool.is-off { background: var(--surface-2); box-shadow: 0 4px 0 #CFC8BC; filter: grayscale(1); }

.dress-caption { text-align: center; margin: 12px auto 0; max-width: 70ch; font-size: .88rem; font-weight: 700; }

@media (max-width: 400px) {
  .ditem { min-height: 80px; }
  .ditem .e { font-size: 2.4rem; }
  .ditem .pic { width: 54px; height: 44px; }
  .dtab { height: 50px; font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .piece.pop-in, .piece.wiggle, .dress-rocko.boing > img, .scene-decor .fall, .scene-decor .twinkle { animation: none; }
}

/* ── Lock-and-fit the play screen so it never scrolls (Ron 2026-09-30: game screens
   locked, no scroll). #view-game fills the locked height as a flex column; the outfit
   picker (tray) is the ONE bounded-scroll region, so the screen itself stays put and
   the tools never fall below the fold. Scoped to body.dress.rk-playing. ── */
body.dress.rk-playing #view-game.dress-game {
  display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; padding: 6px 0 6px;
}
body.dress.rk-playing .dress-title { flex: 0 0 auto; margin: 2px 0 6px; }
body.dress.rk-playing .dress-caption { flex: 0 0 auto; margin: 5px auto 0; }
body.dress.rk-playing .dress-wrap { flex: 1 1 auto; min-height: 0; align-items: stretch; flex-direction: row; justify-content: center; }
body.dress.rk-playing .dress-stage { flex: 0 0 auto; }
body.dress.rk-playing .dress-box { min-height: 0; display: flex; flex-direction: column; }
body.dress.rk-playing .dress-tray { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* landscape / desktop: Rocko beside the picker, sized by height so the box gets the width */
@media (orientation: landscape) {
  body.dress.rk-playing .dress-stage { --size: min(80vh, 44vw); }
}
/* portrait phones: Rocko on top, the picker fills the rest */
@media (orientation: portrait) {
  body.dress.rk-playing .dress-wrap { flex-direction: column; }
  body.dress.rk-playing .dress-stage { --size: min(80vw, 42vh, 360px); }
  body.dress.rk-playing .dress-box { flex: 1 1 auto; width: min(94vw, 560px); }
  body.dress.rk-playing #view-game.dress-game { padding-bottom: 6px; }
}