/* Garden playground. The painted garden fills the screen; everything a child touches lives on the stage, a
   logical 1024 to 1400 by 768 area scaled to the visible screen (stage.js), so nothing falls off a phone.
   Fonts are self-hosted (SIL OFL 1.1): Andika for words, Grandstander for numbers and signs. */
@font-face { font-family: 'Andika'; src: url('../fonts/Andika-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Grandstander'; src: url('../fonts/Grandstander.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

:root { --leaf: #2f6b3a; --leaf-dark: #24502c; --ink: #1f2a37; --cream: #fffaf0; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #a8cf72; }
body { font-family: 'Andika', system-ui, sans-serif; font-weight: 700; color: var(--ink); -webkit-font-smoothing: antialiased; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; padding: 0; margin: 0; background: none; }
button:focus-visible { outline: 4px solid #0072b2; outline-offset: 4px; }

#scene { position: fixed; inset: 0; overflow: hidden; background: #a8cf72 url('../art/garden.webp') center bottom / cover no-repeat; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.view { position: absolute; inset: 0; }
.sprite { position: absolute; translate: -50% -50%; pointer-events: none; user-select: none; -webkit-user-drag: none; }

/* Round painted buttons: green goes forward (play, I'm finished), blue helps (speaker, help), orange goes back. */
.round { position: absolute; width: 112px; height: 112px; translate: -50% -50%; display: grid; place-items: center; background: center / contain no-repeat; transition: scale 120ms ease; }
.round img { width: 54%; height: 54%; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.35)); }
.round.green { background-image: url('../art/btn-green.webp'); }
.round.blue { background-image: url('../art/btn-blue.webp'); }
.round.orange { background-image: url('../art/btn-orange.webp'); }
.round:active { scale: 0.92; }
#play { width: 240px; height: 240px; }
#play img { width: 58%; height: 58%; translate: 6% 0; }

#hand { position: absolute; pointer-events: none; z-index: 50; transform-origin: 28% 3%; filter: drop-shadow(5px 8px 6px rgba(40, 30, 10, 0.3)); }

#caption { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; width: max-content; max-width: 86%; padding: 0.25em 0.9em; border-radius: 0.6em; background: rgba(20, 33, 61, 0.8); color: #fff; font-size: 32px; line-height: 1.25; text-align: center; pointer-events: none; z-index: 60; }
#caption:empty { display: none; }

/* The playground */
.game-tile { position: absolute; translate: -50% -50%; background: url('../art/tile.webp') center / 100% 100% no-repeat; filter: drop-shadow(0 8px 6px rgba(30, 50, 20, 0.28)); transition: scale 140ms ease; }
.game-tile:active { scale: 0.94; }
.game-tile .pic { position: absolute; inset: 0; }
.game-tile .badge { position: absolute; right: -16px; top: -16px; width: 74px; height: 74px; display: grid; place-items: center; background: url('../art/btn-orange.webp') center / contain no-repeat; font-family: 'Grandstander', 'Andika', sans-serif; font-weight: 800; font-size: 31px; line-height: 1; color: #fff; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.35); }
.game-tile .badge.op { font-size: 50px; padding-bottom: 4px; } /* not .sign: that is the wooden board in a game */
.game-tile .label { position: absolute; left: 50%; top: 100%; translate: -50% 10px; white-space: nowrap; font-size: 25px; color: var(--leaf-dark); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 8px rgba(255, 255, 255, 0.7); }
.game-tile .stars { position: absolute; left: 50%; top: 100%; translate: -50% 46px; font-size: 22px; color: #b07a00; text-shadow: 0 1px 0 #fff; }
.sprite.tilt-l { rotate: -12deg; }
.sprite.tilt-r { rotate: 12deg; }
.sprite.flying { opacity: 0.85; rotate: -10deg; }

/* A game */
.objects, .ui, .tiles { position: absolute; inset: 0; }
.ui, .tiles, .sign, .round-end { pointer-events: none; }
.ui > .round, .tiles > .num-tile, .round-end .round { pointer-events: auto; }
.ui { z-index: 20; }
.z1 { z-index: 1; } .z2 { z-index: 2; } .z3 { z-index: 3; } .z4 { z-index: 4; } .z8 { z-index: 8; } .z9 { z-index: 9; }
.sprite.berry, .sprite.apple, .sprite.stock, .sprite[data-sprite="basket"], .sprite[data-sprite="post"] { filter: drop-shadow(0 9px 5px rgba(45, 60, 20, 0.33)); }
.sprite.in-basket { scale: 0.78; filter: none; }
.sprite.lifted { opacity: 0; }
.sprite.carried { scale: 1.06; filter: drop-shadow(6px 16px 8px rgba(40, 30, 10, 0.35)); }
.sprite.ghost { opacity: 0.34; filter: grayscale(0.5) brightness(1.15); }
.sprite.extra { filter: drop-shadow(0 0 12px rgba(235, 120, 30, 0.95)); }
.sprite.pop { animation: pop 380ms cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes pop { from { scale: 0.2; opacity: 0; } to { scale: 1; opacity: 1; } }
.target-tile { position: absolute; translate: -50% -50%; width: 118px; height: 122px; display: grid; place-items: center; background: url('../art/tile.webp') center / 100% 100% no-repeat; font-family: 'Grandstander', 'Andika', sans-serif; font-weight: 800; font-size: 76px; line-height: 1; color: #5b3a1a; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.55); filter: drop-shadow(0 6px 5px rgba(30, 50, 20, 0.25)); pointer-events: none; }
#btn-done { width: 136px; height: 136px; animation: breathe 2.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }
.num-tile { position: absolute; translate: -50% -50%; width: 152px; height: 157px; display: grid; place-items: center; background: url('../art/tile.webp') center / 100% 100% no-repeat; font-family: 'Grandstander', 'Andika', sans-serif; font-weight: 800; font-size: 94px; line-height: 1; color: #5b3a1a; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.55); filter: drop-shadow(0 8px 6px rgba(30, 50, 20, 0.28)); transition: scale 120ms ease; }
.num-tile:active { scale: 0.93; }
.num-tile.wrong { opacity: 0.5; animation: shake 420ms ease; }
.num-tile.right { scale: 1.1; filter: drop-shadow(0 0 20px rgba(255, 205, 50, 0.95)); }
.tiles.done .num-tile { opacity: 0; pointer-events: none; transition: opacity 350ms ease 450ms; }
@keyframes shake { 0%, 100% { translate: -50% -50%; } 20% { translate: calc(-50% - 14px) -50%; } 40% { translate: calc(-50% + 12px) -50%; } 60% { translate: calc(-50% - 8px) -50%; } 80% { translate: calc(-50% + 5px) -50%; } }
.sign { position: absolute; translate: -50% -50%; min-width: 380px; height: 150px; padding: 0 46px 8px; display: grid; place-items: center; background: url('../art/sign.webp') center / 100% 100% no-repeat; font-family: 'Grandstander', 'Andika', sans-serif; font-weight: 800; font-size: 80px; line-height: 1; color: #5b3a1a; white-space: nowrap; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5); filter: drop-shadow(0 8px 6px rgba(30, 50, 20, 0.28)); z-index: 6; }
.sign.pop { animation: pop 420ms cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.round-end { position: absolute; translate: -50% -50%; display: flex; gap: 90px; z-index: 30; }
.round-end .round { position: static; translate: none; width: 180px; height: 180px; }
.sprite.reward { z-index: 30; animation: reward 700ms cubic-bezier(0.2, 1.4, 0.4, 1) both; filter: drop-shadow(0 6px 10px rgba(120, 80, 0, 0.35)); }
@keyframes reward { 0% { scale: 0.2; opacity: 0; } 60% { scale: 1.12; opacity: 1; } 100% { scale: 1; opacity: 1; } }
/* A right answer: painted stars burst out and fade (game.js cheer). */
.sprite.spark { z-index: 40; filter: drop-shadow(0 2px 4px rgba(120, 80, 0, 0.35)); }
/* End of a round: the round's objects fade away so the star and the two buttons stand alone. */
.objects.cleared { opacity: 0; transition: opacity 450ms ease; }

.sprite.balloon { transform-origin: 50% 100%; }
.sprite.bump { animation: bump 360ms ease; }
@keyframes bump { 50% { translate: -50% -66%; } }
.sprite.glow { filter: drop-shadow(0 0 16px rgba(255, 214, 80, 0.95)); }
.sign.question { font-size: 70px; height: 130px; min-width: 330px; }

/* Turn the phone */
#rotate { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: rgba(255, 250, 240, 0.97); font-size: 24px; color: var(--leaf-dark); text-align: center; padding: 24px; }
#rotate .turn { width: 120px; height: 120px; animation: turn 2.4s ease-in-out infinite; }
@keyframes turn { 0%, 30% { rotate: 0deg; } 60%, 100% { rotate: -90deg; } }

@media (prefers-reduced-motion: reduce) {
  #rotate .turn, #btn-done, .sprite.pop, .sign.pop, .sprite.reward, .num-tile.wrong, .sprite.bump { animation: none; }
  .round, .game-tile { transition: none; }
}

/* Start screen extras (2026-10-31): a grown-up's list on a card under Play, and "Make your own game". */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.noscript { position: fixed; inset: auto 0 0 0; margin: 0; padding: 12px 16px; background: var(--cream); font-size: 18px; z-index: 200; }
#list-card { position: absolute; translate: -50% -50%; width: 760px; max-width: 90%; padding: 16px 26px 18px; border-radius: 26px; background: rgba(255, 250, 240, 0.94); box-shadow: 0 10px 22px rgba(30, 50, 20, 0.25); text-align: center; }
#list-card p { margin: 0; }
#list-card .card-title { font-size: 30px; color: var(--leaf-dark); }
#list-card .card-items { margin-top: 6px; font-family: 'Grandstander', 'Andika', sans-serif; font-weight: 800; font-size: 34px; color: #5b3a1a; white-space: pre-wrap; }
#list-card .card-skipped { margin-top: 8px; font-size: 22px; color: #7a4b12; }
#make { position: absolute; translate: -50% -50%; display: flex; align-items: center; gap: 12px; padding: 14px 32px 14px 22px; border-radius: 999px; background: var(--cream); border: 4px solid var(--leaf); box-shadow: 0 8px 16px rgba(30, 50, 20, 0.28); font-size: 30px; color: var(--leaf-dark); white-space: nowrap; transition: scale 120ms ease; }
#make img { width: 40px; height: 40px; }
#make:active { scale: 0.95; }

/* The "Make your own game" panel: outside the stage, in real pixels, so it types like a normal form. */
body.making #rotate { display: none !important; }
.maker { position: fixed; inset: 0; z-index: 150; display: flex; justify-content: center; align-items: flex-start; padding: 12px; overflow-y: auto; background: rgba(24, 44, 24, 0.5); }
.maker-card { position: relative; width: min(760px, 100%); margin: auto 0; padding: 18px 22px 20px; border-radius: 22px; background: var(--cream); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3); font-size: 17px; line-height: 1.4; }
.maker-card h2 { margin: 0 44px 6px 0; font-size: 26px; color: var(--leaf-dark); }
.maker-intro, .maker-limits { margin: 0 0 10px; font-weight: 400; font-family: system-ui, sans-serif; }
.maker-limits { margin: 10px 0 0; font-size: 14px; color: #555; }
.maker-close { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; border-radius: 50%; font-size: 30px; line-height: 1; color: var(--leaf-dark); }
.maker-close:hover { background: rgba(47, 107, 58, 0.1); }
.maker textarea { display: block; width: 100%; min-height: 64px; padding: 10px 12px; border: 3px solid var(--leaf); border-radius: 14px; background: #fff; font-family: 'Grandstander', 'Andika', sans-serif; font-weight: 700; font-size: 24px; color: var(--ink); resize: vertical; user-select: text; -webkit-user-select: text; }
.maker textarea:focus { outline: 3px solid #0072b2; outline-offset: 2px; }
.maker-keys, .maker-quick, .maker-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.maker-key { min-width: 52px; height: 46px; padding: 0 12px; border-radius: 12px; background: #fff; border: 2px solid #c9b98f; font-family: 'Grandstander', 'Andika', sans-serif; font-size: 26px; color: #5b3a1a; }
.maker-quick-label { font-size: 15px; color: #555; }
.maker-chip { padding: 6px 12px; border-radius: 999px; background: #eef6e3; border: 2px solid #b9d79a; font-size: 15px; color: var(--leaf-dark); }
.maker-preview { margin-top: 10px; }
.maker-count { margin: 6px 0 2px; font-size: 16px; color: var(--leaf-dark); }
.maker-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: q; font-family: 'Grandstander', 'Andika', sans-serif; font-size: 22px; color: #5b3a1a; }
.maker-list li { counter-increment: q; padding: 2px 12px; border-radius: 12px; background: #fff; border: 2px solid #e5d9b8; }
.maker-list li::before { content: counter(q) ". "; font-size: 0.7em; color: #9a7b4f; }
.maker-skipped { margin: 0; padding-left: 1.2em; font-weight: 400; font-family: system-ui, sans-serif; font-size: 15px; color: #7a4b12; }
.maker-play { padding: 10px 34px; border-radius: 999px; background: var(--leaf); color: #fff; font-size: 22px; box-shadow: 0 4px 0 var(--leaf-dark); }
.maker-copy { padding: 10px 22px; border-radius: 999px; border: 3px solid var(--leaf); color: var(--leaf-dark); font-size: 18px; background: #fff; }
.maker-play:disabled, .maker-copy:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
/* The actions stay in reach on a short screen (a phone held sideways): they stick to the bottom of the panel. */
.maker-actions { position: sticky; bottom: -20px; margin: 10px -22px -20px; padding: 10px 22px 14px; background: var(--cream); border-radius: 0 0 22px 22px; box-shadow: 0 -8px 12px rgba(255, 250, 240, 0.9); }
@media (max-height: 520px) {
  .maker { padding: 6px; }
  .maker-card { padding: 10px 16px 14px; font-size: 15px; }
  .maker-card h2 { font-size: 20px; margin-bottom: 2px; }
  .maker-intro { font-size: 14px; margin-bottom: 6px; }
  .maker textarea { min-height: 46px; font-size: 20px; padding: 6px 10px; }
  .maker-keys, .maker-quick { margin-top: 6px; gap: 6px; }
  .maker-key { min-width: 46px; height: 38px; font-size: 22px; }
  .maker-chip { padding: 4px 10px; font-size: 13px; }
  .maker-list { font-size: 19px; }
  .maker-actions { margin: 6px -16px -14px; padding: 8px 16px 10px; bottom: -14px; }
  .maker-play { padding: 8px 28px; font-size: 19px; }
  .maker-copy { padding: 8px 18px; font-size: 16px; }
}