/* Room layouts. Portrait: tray along the bottom. Landscape: tray on the right. */
.room-layout { display: flex; flex-direction: column; gap: 16px; }

/* Top bar: kid button on the left; the right end is kept free for the lock. */
.bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--touch-gap);
  height: var(--bar);
  padding-right: calc(56px + var(--touch-gap));
}

/* ── Splash ─────────────────────────────────────────── */
.splash { position: relative; height: 100%; display: grid; place-items: center; }
.splash-start {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: #FEF3C7;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .1);
  animation: pulse 1.6s ease-in-out infinite;
}
.splash-start img { width: 76%; height: 76%; }
.splash-bricks { position: absolute; inset: 0; pointer-events: none; }
.deco { position: absolute; width: 18vmin; height: 11vmin; border-radius: 2vmin; opacity: .9; }
.deco::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 12%;
  height: 12%;
  border-radius: 99px;
  background: rgba(255, 255, 255, .35);
}
.deco-red { left: 4%; top: 10%; background: var(--red); transform: rotate(-8deg); }
.deco-yellow { right: 6%; top: 18%; background: var(--yellow); transform: rotate(6deg); }
.deco-blue { left: 8%; bottom: 12%; background: var(--blue); transform: rotate(5deg); }
.deco-green { right: 4%; bottom: 8%; background: var(--green); transform: rotate(-6deg); }

/* ── Home ───────────────────────────────────────────── */
.games {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--touch-gap);
}
.game {
  min-height: 0;
  display: grid;
  place-items: center;
  border-radius: 32px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .08);
  overflow: hidden;
}
.game:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0, 0, 0, .08); }
.game-build { background: #FEF3C7; }
.game-peekaboo { background: #DBEAFE; }
.game-art { width: min(80%, 380px); max-height: 82%; height: auto; }
.game-art-drop { animation: drop 2.4s ease-in-out infinite; }
.game-art-peek { animation: peek 3s ease-in-out infinite; }

/* ── Build ──────────────────────────────────────────── */
.play {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--touch-gap);
}
.board-wrap { container-type: size; min-width: 0; min-height: 0; display: grid; place-items: center; }
.board { position: relative; width: min(100cqw, 100cqh); aspect-ratio: 1; }
.board > img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .3s ease; }
.silhouette { filter: brightness(0) opacity(.12); }
.art { opacity: 0; }
.board.is-complete .art { opacity: 1; animation: hop .6s ease-out 2; }
.board.is-complete .silhouette, .board.is-complete .slot { opacity: 0; }

.slot {
  position: absolute;
  border: 3px dashed var(--c);
  border-radius: 8px;
  background: rgba(255, 255, 255, .5);
  background: color-mix(in srgb, var(--c) 20%, transparent);
  transition: opacity .3s ease, transform .18s ease;
}
.slot.is-placed {
  border-color: transparent;
  background: var(--c);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12);
}
.slot.is-placed::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 8%;
  height: 10%;
  min-height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .35);
}
.slot.is-hint { border-style: solid; transform: scale(1.04); }
.slot.is-glow { border-style: solid; animation: glow 1.2s ease-in-out infinite; }

.tray {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: var(--touch-gap);
  --brick: clamp(var(--brick-min), 13vmin, var(--brick-max));
}
.piece {
  position: relative;
  width: var(--brick);
  height: var(--brick);
  color: var(--c);
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .12));
}
.piece svg { width: 100%; height: 100%; pointer-events: none; }
.piece.is-lifted { z-index: 5; scale: 1.06; filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .22)); }

@media (orientation: landscape) {
  .games { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .play { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) auto; }
  .tray {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--rows, 1), var(--brick));
    grid-auto-columns: var(--brick);
  }
}

/* ── Peekaboo ───────────────────────────────────────── */
.field { flex: 1; min-height: 0; display: grid; place-items: center; }
.cells {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--touch-gap);
  width: calc(var(--cols, 2) * var(--cell, 160px) + (var(--cols, 2) - 1) * var(--touch-gap));
}
.cell {
  position: relative;
  width: var(--cell, 160px);
  height: var(--cell, 160px);
  border-radius: 24px;
  background: #FFF7E6;
}
.cover { position: absolute; inset: 0; color: var(--c); transition: opacity .2s ease, transform .2s ease; }
.cover-brick, .crack { position: absolute; inset: 0; width: 100%; height: 100%; }
.crack { opacity: 0; }
.crack path { fill: none; stroke: #1F2937; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.cell.is-cracked .crack { opacity: 1; }
.cell.is-cracked .cover { animation: shake .12s linear 1; }
.cell.is-broken .cover { opacity: 0; transform: scale(1.15); }
.peek {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
  opacity: 0;
  transform: scale(.4) translateY(20%);
  transition: opacity .2s ease, transform .26s cubic-bezier(.3, 1.5, .6, 1);
}
.cell.is-broken .peek { opacity: 1; transform: none; }
.shards { position: absolute; inset: 0; pointer-events: none; }
.shards i {
  position: absolute;
  left: 44%;
  top: 44%;
  width: 12%;
  height: 12%;
  border-radius: 3px;
  background: var(--c);
  opacity: 0;
}
.cell.is-cracked.is-broken .shards i { animation: shard .4s ease-out 1 forwards; }
.shards i:nth-child(1) { --dx: -120%; --dy: -140%; }
.shards i:nth-child(2) { --dx: 140%; --dy: -110%; }
.shards i:nth-child(3) { --dx: -130%; --dy: 130%; }
.shards i:nth-child(4) { --dx: 120%; --dy: 150%; }

/* ── Celebration ────────────────────────────────────── */
.celebrate { position: relative; height: 100%; display: grid; place-items: center; }
.hero { width: min(70vmin, 520px); height: auto; animation: hop .6s ease-in-out 3; }
.confetti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i {
  position: absolute;
  left: var(--x);
  top: -8%;
  width: 22px;
  height: 14px;
  border-radius: 3px;
  background: var(--c);
  opacity: 0;
  animation: fall var(--ms, 1.5s) var(--delay, 0ms) ease-in 1 forwards;
}
/* Inset leaves room for the 1.06× pulse inside the 24 px edge band. */
.next {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: var(--brick-min);
  height: var(--brick-min);
  background: var(--green);
  color: var(--paper);
  animation: pulse 1.6s ease-in-out infinite;
}

/* ── Sticker Shelf ──────────────────────────────────── */
.shelf-wrap { flex: 1; min-height: 0; display: grid; place-items: center; }
.shelf {
  --sticker: clamp(var(--brick-min), 18vmin, 200px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--touch-gap) + 8px) var(--touch-gap);
  max-width: calc(3 * var(--sticker) + 2 * var(--touch-gap));
}
.sticker {
  display: block;
  width: var(--sticker);
  height: var(--sticker);
  padding: 12px;
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 8px 0 #D6A86E;
}
.sticker img { width: 100%; height: 100%; }
.sticker:not(.is-met) img { filter: brightness(0) opacity(.15); }
@media (orientation: landscape) and (max-height: 520px) {
  .shelf { max-width: calc(6 * var(--sticker) + 5 * var(--touch-gap)); }
}

/* ── Rest ───────────────────────────────────────────── */
.app[data-room="rest"] { background: var(--night); }
.room-rest { background: var(--night); }
.night { position: relative; height: 100%; display: grid; place-items: center; }
.moon { position: absolute; left: 0; top: 0; width: clamp(64px, 14vmin, 140px); height: auto; }
.star { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #F8FAFC; animation: twinkle 2.4s ease-in-out infinite; }
.star-1 { left: 30%; top: 12%; }
.star-2 { left: 62%; top: 8%; animation-delay: .6s; }
.star-3 { left: 82%; top: 30%; animation-delay: 1.2s; }
.star-4 { left: 16%; top: 40%; animation-delay: 1.8s; }
.sleeper { position: relative; width: min(56vmin, 420px); }
.sleeper .animal-art { width: 100%; height: auto; filter: saturate(.7) brightness(.82); transform-origin: 50% 90%; animation: breathe 3.2s ease-in-out infinite; }
.zzz { position: absolute; right: -14%; top: -22%; width: 34%; height: auto; animation: float 3.2s ease-in-out infinite; }
.zzz path { fill: none; stroke: #E2E8F0; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

/* ── Parent Panel & gate (adults) ───────────────────── */
.room-parent { display: grid; place-items: center; background: #F3F4F6; }
.panel { width: min(100%, 640px); display: grid; gap: 24px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.panel-title { margin: 0; font-size: 22px; line-height: 1.3; }
.panel-group { display: grid; gap: 16px; justify-items: start; }
.panel-group h2 { margin: 0; font-size: 17px; line-height: 1.3; }
.panel-note { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.seg { display: flex; flex-wrap: wrap; gap: 16px; }

.gate-card { display: grid; gap: 20px; width: min(100%, 420px); justify-items: center; text-align: center; }
.gate-copy { display: grid; gap: 12px; justify-items: center; }
.gate-title { margin: 0; font-size: 20px; line-height: 1.3; }
.gate-prompt { margin: 0; font-size: 17px; }
.gate-code { display: block; margin-top: 4px; font-size: 32px; line-height: 1.3; letter-spacing: .04em; }
.keypad { display: grid; grid-template-columns: repeat(3, 64px); gap: 16px; }
.key { width: 64px; height: 64px; padding: 0; font-size: 24px; }
.key[data-digit="0"] { grid-column: 2; }
@media (orientation: landscape) and (max-height: 520px) {
  .gate-card { width: auto; grid-template-columns: auto auto; align-items: center; gap: 32px; text-align: left; }
  .keypad { grid-template-columns: repeat(3, 56px); }
  .key { width: 56px; height: 56px; min-height: 56px; }
}

/* Last minute before Rest: the animals get sleepy (no visible clock). */
.app.is-sleepy .board, .app.is-sleepy .game-art, .app.is-sleepy .cell.is-broken .peek { animation: yawn 4s ease-in-out infinite; }

@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes drop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes peek { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-4px); } }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-8%) scale(1.04, .97); } }
@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); }
  50% { box-shadow: 0 0 0 10px rgba(250, 204, 21, .55); }
}
@keyframes shake { 0%, 100% { transform: rotate(0); } 33% { transform: rotate(-3deg); } 66% { transform: rotate(3deg); } }
@keyframes shard { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(90deg); } }
@keyframes fall {
  0% { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: 0; transform: translateY(110vh) rotate(calc(var(--spin, 1) * 540deg)); }
}
@keyframes twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.97); } }
@keyframes float { 0%, 100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(-10%); opacity: 1; } }
@keyframes yawn { 0%, 80%, 100% { transform: scale(1); } 88% { transform: scale(1.03, .96); } }