/* Spell the Picture: its own look (warm paper, a wooden tray, red vowels and blue consonants).
   Calm by design: soft colors, slow smooth motion (0.4 to 0.8 s, ease in and out), one thing moving at a time, nothing flashes. */
@font-face {
  font-family: 'ABeeZee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(abeezee.woff2) format('woff2');
}

:root {
  --paper: #fff3dc;
  --paper-2: #ffe8bf;
  --card: #fffdf7;
  --ink: #3b2a1a;
  --soft: #7a6047;
  --blue: #3f7fc4;
  --blue-d: #1f5fa8;
  --red: #d65a55;
  --red-d: #ad3f3b;
  --green: #3fa34d;
  --green-d: #2a7a36;
  --sun: #f4c55a;
  --wood: #e3b277;
  --wood-d: #b98345;
  --tile: min(84px, calc((100vw - 72px) / 4.6));
  --radius: 20px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 12% 8%, #fff9ec 0 18%, transparent 19%),
    radial-gradient(circle at 92% 30%, #ffefcf 0 14%, transparent 15%),
    var(--paper);
  color: var(--ink);
  font: 500 18px/1.45 'Fredoka', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
h1, h2 { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 700; line-height: 1.1; margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--blue-d); }
.v { color: var(--red); }
[hidden] { display: none !important; }

/* top bar */
.top { display: flex; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 16px 6px; min-height: 64px; }
.grow { flex: 1; }
.brand { display: inline-flex; gap: 3px; }
.brand .t { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; color: #fff; font: 400 20px/1 'ABeeZee', sans-serif; box-shadow: inset 0 -3px 0 #0003; }
.brand .c { background: var(--blue); }
.brand .v { background: var(--red); color: #fff; }
.back, .round {
  min-height: 48px; min-width: 48px; border: 3px solid var(--ink); border-radius: 16px; background: var(--card);
  box-shadow: 0 4px 0 var(--ink); font-weight: 700; padding: 6px 14px; display: inline-flex; align-items: center; gap: 6px;
}
.round { padding: 6px; justify-content: center; }
.back:active, .round:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
#sound .mute { display: none; }
#sound[aria-pressed='false'] .mute { display: inline; }
#sound[aria-pressed='false'] .waves { display: none; }

main { max-width: 760px; margin: 0 auto; padding: 0 16px calc(28px + env(safe-area-inset-bottom)); }
.screen { display: grid; gap: 18px; }

/* letter tiles: the toy's look in our own colors */
.tile {
  display: grid; place-items: center; width: var(--tile); height: var(--tile); border-radius: 14px; color: #fff;
  font: 400 calc(var(--tile) * .62)/1 'ABeeZee', 'Comic Sans MS', sans-serif; padding-bottom: calc(var(--tile) * .06);
  background: var(--blue); box-shadow: inset 0 -6px 0 var(--blue-d), 0 4px 0 #0002; border: 0; user-select: none;
  -webkit-user-select: none; touch-action: none; position: relative;
}
.tile.v { background: var(--red); box-shadow: inset 0 -6px 0 var(--red-d), 0 4px 0 #0002; color: #fff; }
.tile::after { content: ''; position: absolute; inset: 5px 6px auto; height: 26%; border-radius: 10px 10px 30px 30px; background: #ffffff26; pointer-events: none; }

/* the wooden tray */
.tray {
  display: flex; justify-content: center; gap: var(--gap, 10px); padding: 12px; border-radius: 18px;
  background: repeating-linear-gradient(92deg, #0000 0 18px, #ffffff14 18px 20px, #0000 20px 46px, #00000010 46px 48px), linear-gradient(#ecc08a, var(--wood));
  box-shadow: inset 0 3px 0 #fff6, inset 0 -5px 0 var(--wood-d), 0 6px 0 #a06f3a55;
  width: max-content; max-width: 100%; margin: 0 auto;
}
.slot {
  width: calc(var(--tile) + var(--pad, 8px)); height: calc(var(--tile) + var(--pad, 8px)); border-radius: calc(var(--tile) * .18); display: grid; place-items: center;
  background: #c48c50; box-shadow: inset 0 5px 8px #7a4b1c88; position: relative;
}
.slot .ghost { font: 400 calc(var(--tile) * .62)/1 'ABeeZee', sans-serif; color: #fff7; padding-bottom: calc(var(--tile) * .06); }
.slot.want { outline: 4px dashed var(--sun); outline-offset: 2px; }
.slot .tile { position: absolute; }

/* home */
.hero { text-align: center; display: grid; gap: 8px; padding-top: 4px; }
.hero h1 { font-size: clamp(32px, 9vw, 52px); color: var(--ink); }
.lede { margin: 0; font-size: 20px; color: var(--soft); }
.demo-tray { display: grid; justify-items: center; gap: 8px; margin-top: 6px; --tile: 54px; }
.demo-tray img { width: 96px; height: 96px; filter: drop-shadow(0 4px 0 #0001); }

.big {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 76px;
  border: 3px solid var(--ink); border-radius: 24px; font-size: 30px; font-weight: 700; box-shadow: 0 7px 0 var(--ink); padding: 10px 20px;
}
.big:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--ink); }
.big.go { background: var(--green); color: #fff; text-shadow: 0 2px 0 #0003; }
.big.plain { background: var(--card); font-size: 24px; min-height: 64px; }
.big.deck { background: var(--sun); font-size: 26px; }
.fan { display: inline-flex; }
.fan img { width: 44px; height: 44px; margin-right: -10px; background: var(--card); border: 2px solid var(--ink); border-radius: 10px; padding: 3px; }
.fan img:nth-child(1) { transform: rotate(-10deg); }
.fan img:nth-child(3) { transform: rotate(10deg); margin-right: 6px; }

.pickers { display: grid; gap: 14px; }
.pick { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pick legend { font-weight: 700; font-size: 18px; margin-bottom: 8px; padding: 0; }
.pick button {
  border: 3px solid var(--ink); border-radius: 18px; background: var(--card); box-shadow: 0 4px 0 var(--ink); padding: 10px 6px;
  display: grid; justify-items: center; gap: 4px; font-weight: 700; font-size: 20px; min-height: 56px;
}
.ages { grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ages button { padding: 8px 2px; gap: 2px; }
.ages button b { font-size: 26px; line-height: 1; }
.ages button:last-child b { font-size: 20px; padding-top: 4px; }
.pick button small { font-size: 13px; font-weight: 500; color: var(--soft); }
.pick button[aria-pressed='true'] { background: #dff3e1; border-color: var(--green-d); box-shadow: 0 4px 0 var(--green-d); outline: 3px solid var(--green); outline-offset: 1px; }
.pick button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.mini { display: flex; gap: 2px; --tile: 22px; }
.mini .tile { border-radius: 6px; box-shadow: inset 0 -2px 0 #0003; }
.mini .tile::after { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { width: 100%; }
.chips button { display: inline-flex; min-height: 48px; padding: 6px 14px; font-size: 18px; align-items: center; gap: 2px; }
.chips button b { font-family: 'ABeeZee', sans-serif; font-weight: 400; font-size: 22px; }

.grownups, .about { background: var(--card); border: 3px solid var(--ink); border-radius: var(--radius); padding: 14px 16px; box-shadow: 0 5px 0 #3b2a1a33; }
.grownups summary, .about summary { font-weight: 700; cursor: pointer; min-height: 32px; }
.grownups p, .about p { margin: 10px 0 0; }
.about h2 { font-size: 22px; }
.small { font-size: 14px; color: var(--soft); }
#word-list h3 { font-size: 17px; margin: 14px 0 4px; }
#word-list p { margin: 0; font: 400 20px/1.6 'ABeeZee', sans-serif; word-spacing: 6px; }

/* play */
#play-screen { gap: 14px; }
.dots { list-style: none; display: flex; justify-content: center; gap: 6px; margin: 0; padding: 0; }
.dots li { width: 16px; height: 16px; border-radius: 50%; background: #e7cfa6; border: 2px solid #c9a36c; }
.dots li.now { background: var(--sun); border-color: var(--ink); }
.dots li.done { background: var(--green); border-color: var(--green-d); }
.stage { display: grid; justify-items: center; gap: 6px; }
.picture {
  position: relative; border: 4px solid var(--ink); border-radius: 26px; background: var(--card); padding: 14px;
  box-shadow: 0 7px 0 var(--ink); width: min(62vw, 250px, 34dvh); aspect-ratio: 1; display: grid; place-items: center;
}
.picture img { width: 100%; height: 100%; object-fit: contain; }
.picture .ear-big { display: none; width: 62%; height: 62%; color: var(--blue); }
.picture.no-pic img { display: none; }
.picture.no-pic .ear-big { display: block; }
.picture.no-pic .hear { display: none; }
.picture .hear { position: absolute; right: -10px; bottom: -10px; width: 44px; height: 44px; border-radius: 50%; background: var(--sun); border: 3px solid var(--ink); display: grid; place-items: center; }
.picture:active { transform: scale(.97); }
.picture.yay { animation: yay .8s ease-in-out; }
.word { margin: 0; min-height: 52px; font: 400 clamp(30px, 10vw, 44px)/1.2 'ABeeZee', sans-serif; letter-spacing: 3px; color: var(--blue); }
.word .v { color: var(--red); }
.word .lit { text-shadow: 0 0 0 currentColor; background: #ffe48a; border-radius: 8px; }
.big-tray { min-height: calc(var(--tile) + 32px); }
.praise { margin: 0; text-align: center; min-height: 36px; font-size: 28px; font-weight: 700; color: var(--green-d); }
.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; min-height: calc(var(--tile) + 8px); }
.tiles .tile, .tray .tile { cursor: grab; }
.tiles .tile { width: var(--pool, var(--tile)); height: var(--pool, var(--tile)); font-size: calc(var(--pool, var(--tile)) * .62); }
.tray .tile { border-radius: calc(var(--tile) * .17); }
.tiles { max-width: calc(var(--pool, var(--tile)) * 5 + 60px); margin: 0 auto; }
.tile.dragging { z-index: 20; cursor: grabbing; box-shadow: inset 0 -6px 0 #0003, 0 14px 16px #0003; }
.tile { transition: box-shadow .6s ease-in-out; }
.tile.nope { animation: nope .7s ease-in-out; }
/* The hint is a still, soft ring that fades in: no bobbing. */
.tile.hint { box-shadow: inset 0 -6px 0 #0003, 0 0 0 6px var(--sun); }
.tile.say { animation: say .6s ease-in-out; }
.tile.placed { cursor: default; }
.next { margin-top: 4px; animation: fade .5s ease-in-out both; }

/* finish */
#finish { text-align: center; padding-top: 10px; }
.cheer { font-size: clamp(30px, 8vw, 44px); }
.stickers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.stickers { animation: fade .6s ease-in-out both; }
.sticker { background: var(--card); border: 3px solid var(--ink); border-radius: 18px; padding: 6px; display: grid; justify-items: center; gap: 2px; box-shadow: 0 4px 0 var(--ink); }
.talk { margin: 0; background: #fff8e6; border: 2px dashed var(--wood-d); border-radius: 16px; padding: 12px 14px; text-align: left; font-size: 18px; }
.sticker img { width: 100%; aspect-ratio: 1; }
.sticker span { font: 400 18px/1.1 'ABeeZee', sans-serif; color: var(--blue); }
.sticker .v { color: var(--red); }

/* cards */
.cards-title { font-size: 32px; text-align: center; }
.cards-help { margin: -8px 0 0; text-align: center; color: var(--soft); }
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.flip { perspective: 800px; border: 0; padding: 0; background: none; aspect-ratio: 1; }
.flip .in { position: relative; display: block; width: 100%; height: 100%; transition: transform .45s ease; transform-style: preserve-3d; }
.flip.over .in { transform: rotateY(180deg); }
.flip .face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 18px; border: 3px solid var(--ink);
  background: var(--card); display: grid; place-items: center; padding: 12px; box-shadow: 0 4px 0 var(--ink);
}
.flip .face img { width: 100%; height: 100%; object-fit: contain; }
.flip .back-face { transform: rotateY(180deg); font: 400 34px/1 'ABeeZee', sans-serif; color: var(--blue); padding: 8px 6px 34px; }
.flip .back-face .v { color: var(--red); }
.flip .face.listen .ear { width: 56%; height: 56%; color: var(--blue); }
.flip .back-face .w { font-size: clamp(22px, calc(150px / var(--len, 4)), 40px); }
.sticker .ear { width: 100%; aspect-ratio: 1; color: var(--blue); padding: 12%; }
.flip .spell { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font: 700 14px/1 'Fredoka', sans-serif; background: var(--green); color: #fff; border-radius: 999px; padding: 6px 10px; border: 2px solid var(--ink); white-space: nowrap; }
#card-groups, #card-ages { justify-content: center; }
#card-ages button { min-height: 44px; font-size: 16px; }

/* Evening look (after 6 PM unless a grown-up changes it): dimmer and warmer, same layout. */
body.evening { --paper: #e9d6b4; --paper-2: #e2c99f; --card: #f3e6cc; background: var(--paper); }
body.evening main, body.evening .top { filter: brightness(.86) sepia(.18); }

/* Motion: slow, smooth, once. Nothing loops or shakes. */
@keyframes fade { from { opacity: 0; } }
@keyframes yay { 50% { transform: scale(1.04); } }
@keyframes nope { 40% { opacity: .55; transform: scale(.94); } }
@keyframes say { 50% { transform: translateY(-8px); } }

@media (min-width: 700px) {
  :root { --tile: 92px; }
  .pickers { grid-template-columns: 1fr; }
  .big { max-width: 520px; justify-self: center; }
  #finish .big { justify-self: center; }
}
/* short, wide screens (a phone held sideways): picture beside the tray */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --tile: min(64px, 15dvh); }
  #play-screen { grid-template-columns: auto 1fr; align-items: center; column-gap: 20px; }
  #play-screen .dots { grid-column: 1 / -1; }
  .stage { grid-row: span 4; }
  .picture { width: min(40dvh, 200px); }
  .word { font-size: 32px; min-height: 40px; }
}
/* The grown-ups text under the game (own site only, hidden under the Child lock). */
.grown-text { display: grid; gap: 8px; }
.grown-text h2 { margin: 8px 0 0; }
.grown-text h3 { margin: 6px 0 0; font-size: 19px; }
.grown-text p, .grown-text ul { margin: 0; }
.grown-text ul { padding-left: 22px; display: grid; gap: 4px; }
.grown-text a { color: #24598f; }
/* For parents: why, what they learn, how it is designed (written from games.js by web/kids-site/pages.mjs). */
.parents { display: grid; gap: 8px; }
.parents h2 { margin: 8px 0 0; }
.parents p { margin: 0; }