:root {
  --wall: #2B2746; --wall-2: #3A3460; --wood: #A86F45; --wood-dark: #6E4527; --wood-light: #C98B57;
  --paper: #FFF7EA; --ink: #2A2340; --soft: #CFC6EA; --gold: #FFD36E; --berry: #D9637E;
  --ui: 'Baloo 2', ui-rounded, system-ui, sans-serif; --display: 'Sniglet', 'Baloo 2', sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { background: var(--wall); }
body.playroom {
  font-family: var(--ui); color: var(--paper); font-weight: 600; overflow-x: hidden;
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(255, 211, 110, .22), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 46px),
    linear-gradient(var(--wall-2), var(--wall));
  background-attachment: fixed;
}
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 8px; }
#app { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 28px 16px 40px; position: relative; }
.lamp { position: absolute; top: 0; left: 50%; translate: -50% 0; width: 14px; height: 40px; background: linear-gradient(#5B5280, #3E3863); border-radius: 0 0 4px 4px; }
.lamp::after { content: ''; position: absolute; top: 34px; left: 50%; translate: -50% 0; width: 70px; height: 30px; border-radius: 40px 40px 6px 6px; background: linear-gradient(#FFE29A, #F4B860); box-shadow: 0 10px 50px 14px rgba(255, 211, 110, .35); }

.pr-head { text-align: center; margin-top: 74px; max-width: 640px; }
.pr-head h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 6vw, 3.8rem); letter-spacing: .01em;
  color: var(--paper); text-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.pr-head p { margin: 6px auto 0; color: var(--soft); font-size: 1.15rem; font-weight: 500; line-height: 1.45; max-width: 52ch; }

/* shelf with game boxes */
.shelf { position: relative; width: min(1040px, 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 4vw, 48px); padding: 34px clamp(8px, 3vw, 36px) 40px; margin-top: 18px; }
.plank { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; border-radius: 6px;
  background: linear-gradient(var(--wood-light), var(--wood) 40%, var(--wood-dark)); box-shadow: 0 14px 24px rgba(0, 0, 0, .35); }
.plank::before, .plank::after { content: ''; position: absolute; top: 100%; width: 18px; height: 34px; background: var(--wood-dark); border-radius: 0 0 4px 4px; }
.plank::before { left: 12%; } .plank::after { right: 12%; }
.box {
  position: relative; z-index: 1; display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  background: var(--paper); border-radius: 16px; overflow: hidden; transform: rotate(var(--tilt));
  box-shadow: 10px 10px 0 rgba(0, 0, 0, .22), 0 2px 0 rgba(255, 255, 255, .4) inset; transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .25s;
}
.box::after { content: ''; position: absolute; inset: auto 0 0 0; height: 10px; background: rgba(0, 0, 0, .12); }
.box:hover, .box:focus-visible { transform: rotate(0deg) translateY(-10px) scale(1.02); box-shadow: 14px 22px 0 rgba(0, 0, 0, .2); }
.art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.art-logo { position: absolute; left: 50%; bottom: 6%; translate: -50% 0; width: 78%; }
.art-logo svg { width: 100%; height: auto; display: block; overflow: visible; }

.spark-art { background: linear-gradient(#2F2B5E, #5A4E95 55%, #9C86C4 85%, #E9B8C9); }
.sky-burst { position: absolute; width: 46%; }
.sky-burst svg { width: 100%; height: auto; display: block; }
.sky-burst.b1 { left: -6%; top: -14%; } .sky-burst.b2 { right: -4%; top: -10%; width: 40%; } .sky-burst.b3 { left: 30%; top: -24%; width: 44%; }
.box.spark:hover .sky-burst svg { animation: twinkle 1.4s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: scale(1.06); filter: brightness(1.2); } }
.spark-cards { position: absolute; left: 50%; top: 30%; translate: -50% 0; display: flex; }
.spark-cards span { display: block; width: clamp(54px, 9vw, 86px); margin: 0 -10px; transform: rotate(var(--r)); transition: transform .3s; }
.spark-cards svg { width: 100%; height: auto; display: block; overflow: visible; }
.box.spark:hover .spark-cards span:nth-child(1) { transform: rotate(-22deg) translateY(-6px); }
.box.spark:hover .spark-cards span:nth-child(3) { transform: rotate(18deg) translateY(-6px); }

.nap-art { background:
  radial-gradient(circle at 12px 12px, #C3EAE0 3px, transparent 3.5px) 0 0 / 30px 30px,
  linear-gradient(#9ED6C9, #8CCDBF); }
.mini-quilt { position: absolute; left: 50%; top: 5%; translate: -50% 0; width: 42%; aspect-ratio: 1; display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 3%; background: #D9637E; border-radius: 12px; transform: rotate(-3deg); box-shadow: 0 5px 0 #A9435E; }
.mini-cell { position: relative; }
.mini-cell.f0 { background: #BFDDB3; } .mini-cell.f1 { background: #F8CFCB; } .mini-cell.f2 { background: #F5E8D3; } .mini-cell.f3 { background: #FBD9B7; }
.mini-cell .cushion { position: absolute; inset: 4%; width: 92%; height: 92%; }
.mini-pet { position: absolute; inset: 4%; }
.mini-pet svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mini-pet .awake-face { display: none; }
.box.nap:hover .mini-pet { animation: napHop .6s ease-in-out infinite; }
.box.nap:hover .mini-pet:nth-child(odd) { animation-delay: .15s; }
.box.nap:hover .mini-pet .sleep-face { display: none; }
.box.nap:hover .mini-pet .awake-face { display: inline; }
@keyframes napHop { 50% { transform: translateY(-14%); } }
.bubble-art { position: absolute; font-family: var(--display); font-weight: 800; font-size: clamp(.8rem, 1.5vw, 1rem); background: #fff; padding: .1em .6em; border-radius: 999px; box-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.bubble-art.a { left: 9%; top: 18%; color: #3E4A73; transform: rotate(-8deg); }
.bubble-art.b { right: 9%; top: 34%; color: #5E3A1A; transform: rotate(7deg); }
.nap-art .art-logo { width: 72%; bottom: 2%; }

.box-label { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.box-label h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.6rem; }
.pitch { margin: 0; color: #5B4E7A; font-weight: 500; line-height: 1.4; }
.facts { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.facts span { font-size: .82rem; background: #F1E7F8; color: #4A3F7A; padding: .1em .65em; border-radius: 999px; }
.box.nap .facts span { background: #FFEBD2; color: #6E4527; }
.play { align-self: flex-start; margin-top: 6px; font-weight: 800; font-size: 1.05rem; color: #fff; background: #B8475F; padding: .35em 1.4em; border-radius: 999px; box-shadow: 0 4px 0 #8E3249; }
.box.spark .play { background: #5A4E95; box-shadow: 0 4px 0 #2F2B5E; }

/* code note */
.code-note { margin-top: 46px; background: #FFF3C9; color: var(--ink); padding: 18px 22px 16px; border-radius: 6px; transform: rotate(-1deg); box-shadow: 6px 8px 0 rgba(0, 0, 0, .22); width: min(420px, 100%); position: relative; }
.code-note::before { content: ''; position: absolute; top: -12px; left: 50%; translate: -50% 0; width: 80px; height: 22px; background: rgba(255, 255, 255, .55); transform: rotate(3deg); }
.code-note h2 { margin: 0 0 10px; font-family: var(--display); font-size: 1.25rem; }
.code-note form { display: flex; gap: 8px; }
.code-note input { font: inherit; font-size: 1.15rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; width: 130px; min-height: 44px; padding: .3em .7em; border: 2px solid #E6C980; border-radius: 10px; background: #fff; color: var(--ink); }
.code-note input:focus { outline: none; border-color: var(--ink); }
.code-note button { font: inherit; font-weight: 800; border: 0; cursor: pointer; border-radius: 999px; padding: 0 1.2em; min-height: 44px; background: var(--ink); color: #fff; }
.err { margin: 8px 0 0; color: #A9435E; font-weight: 600; }
.pr-foot { margin-top: 34px; color: var(--soft); font-size: .95rem; opacity: .8; }

@media (max-width: 760px) {
  .shelf { grid-template-columns: 1fr; padding-bottom: 46px; }
  .pr-head { margin-top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* about (static text for readers and search engines) */
.about { width: min(760px, calc(100% - 32px)); margin: 8px auto 56px; color: var(--soft); line-height: 1.6; font-weight: 500; }
.about h2 { font-family: var(--display); color: var(--paper); font-size: 1.35rem; margin: 1.3em 0 .4em; }
.about p, .about li { max-width: 68ch; }
.about a { color: var(--gold); }
.about strong { color: var(--paper); }