/* Small World (3D) — on top of style.css, which holds the shared look: pills, sheets, toasts, chat, grown-up screens. */
body.sw { background: #cdeefc; }
#boot { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; background: #cdeefc; font-weight: 800; font-size: 20px; text-align: center; padding: 20px; transition: opacity .4s; }
#boot.gone { opacity: 0; pointer-events: none; }

/* soft tilt-shift: blur the far top and near bottom of the diorama */
.tilt { position: absolute; left: 0; right: 0; pointer-events: none; backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); }
.tilt.top { top: 0; height: 24%; -webkit-mask-image: linear-gradient(#000 20%, transparent); mask-image: linear-gradient(#000 20%, transparent); }
.tilt.bot { bottom: 0; height: 16%; -webkit-mask-image: linear-gradient(transparent, #000 85%); mask-image: linear-gradient(transparent, #000 85%); }
body.no-tilt .tilt { display: none; }
@media (orientation: portrait) { .tilt.top { height: 14%; } .tilt.bot { height: 10%; } .tilt { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 55%, transparent 60%, rgba(52, 35, 63, .16)); }

/* HUD */
.hud-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
body.sw .pill.clock { font-size: 15px; }
body.sw .goal { max-width: min(420px, 62vw); height: auto; min-height: 38px; padding: 4px 14px 2px; white-space: normal; text-align: left; line-height: 1.2; }
body.sw #goalText { font-size: 14.5px; }
.pill.shift { background: #fff1a8; font-size: 14px; }
body.sw #lifeBtn { font-size: 24px; position: relative; }
.menu-link { display: block; text-decoration: none; color: inherit; font-weight: 800; font-size: 16px; padding: 9px 12px 6px; border-radius: 12px; }
.menu-link:active { background: var(--cream); }

/* the live map, always on screen */
body.sw #minimap { display: block; width: 170px; height: 168px; background: #b4dc7a; }
body.sw #minimap[hidden] { display: none !important; }
body.sw.touch #minimap { width: 118px; height: 116px; top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); left: calc(env(safe-area-inset-left, 0px) + 12px); right: auto; }
@media (max-height: 520px) { body.sw #minimap { width: 110px; height: 108px; } }


/* the big "do it" button */
body.sw #action { display: flex; align-items: center; gap: 8px; width: auto; height: auto; min-height: 64px; max-width: min(64vw, 360px);
  border-radius: 999px; padding: 10px 22px 6px 14px; font-size: 19px; line-height: 1.05; text-align: left; }
body.sw #action[hidden] { display: none !important; }
body.sw #actionLabel { display: flex; align-items: center; gap: 8px; }
.act-icon { font-size: 28px; line-height: 1; font-family: system-ui, sans-serif; }
body.sw #action.buy { background: #c9f0b4; }
body.sw #action.work { background: var(--broth); }
body.sw #action.water { background: var(--teal-light); }
body.sw #action.talk { background: #ffc6d9; }
body.sw #action.look { background: #eee6ff; }
body.sw.touch #action { right: calc(env(safe-area-inset-right, 0px) + 16px); bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); }
body.sw:not(.touch) #action { display: flex; }

/* name tags and speech bubbles over everyone's head */
#tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; width: max-content; will-change: transform; }
.tag b, .tag small, .tag .say { position: relative; white-space: nowrap; }
.tag b { background: var(--paper); border: 2.5px solid var(--ink); border-left: 6px solid var(--c, var(--ink)); border-radius: 10px; padding: 1px 8px 0; font-size: 13px; line-height: 1.3; box-shadow: 0 2px 0 var(--ink); }
.tag small { order: 2; font-size: 11px; font-weight: 800; color: var(--paper); text-shadow: 0 1px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 -1px 0 var(--ink); margin-top: 1px; }
.tag.npc b { background: #fff1a8; border-left-color: var(--broth); font-size: 12px; }
.tag.me b { background: #fff1a8; }
.tag.talking b { box-shadow: 0 0 0 3px #8cbf5a, 0 2px 0 var(--ink); }
.tag .say { order: -1; white-space: normal; width: max-content; max-width: 220px; background: #fff; border: 2.5px solid var(--ink); border-radius: 14px; padding: 4px 10px 2px; margin-bottom: 6px; font-weight: 700; font-size: 14px; line-height: 1.25; box-shadow: 0 3px 0 var(--ink); text-align: center; animation: toastIn .3s cubic-bezier(.2, 1.5, .4, 1); }
.float { position: absolute; left: 0; top: 0; font-family: var(--display); font-size: 22px; color: var(--paper); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; white-space: nowrap; pointer-events: none; will-change: transform, opacity; }
.float { translate: -50% -50%; }
.float.pay { font-size: 30px; color: #ffd23f; }
.float.task { color: #c9f0b4; }

/* sheets */
.keeper { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.keeper-icon { font-size: 38px; line-height: 1; flex: none; width: 56px; height: 56px; display: grid; place-items: center; background: #fff; border: 3px solid var(--ink); border-radius: 16px; }
.keeper b { font-size: 17px; color: var(--chili); }
.keeper p { margin: 2px 0 0; font-weight: 600; line-height: 1.35; }
.wallet { display: flex; flex-wrap: wrap; gap: 6px 14px; background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 8px 12px 6px; margin-bottom: 12px; font-weight: 700; }
.wallet .owe b { color: var(--chili); }
.sw-msg { background: #fff1a8; border: 2.5px solid var(--ink); border-radius: 12px; padding: 8px 12px 6px; font-weight: 700; margin: 0 0 12px; }
.sw-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 12px; }
.sw-grid .clue { margin: 0; display: flex; flex-direction: column; }
.sw-grid .clue > .choice { margin-top: auto; }
.clue .small, .clue p.small { margin: 4px 0 8px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink-soft); }
.clue .lock { color: var(--chili); }
.locked-card { background: #f4ecdb; }
.goods { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.good { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 4px 10px; background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 6px 10px; }
.good .gi { font-size: 30px; text-align: center; }
.good .gn { display: flex; flex-direction: column; line-height: 1.15; }
.good .gn small { color: var(--ink-soft); font-weight: 700; }
.good .gp { font-weight: 800; font-size: 17px; }
.good .gp.up { color: #3e7d22; }
.good .gp.down { color: var(--chili); }
.good .sw-row { grid-column: 1 / -1; margin-top: 2px; }
.budget { background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 6px 12px; margin-bottom: 12px; }
.budget > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0 3px; border-bottom: 2px dashed #eadcbc; font-weight: 700; }
.budget > div:last-child { border-bottom: 0; }
.budget .total { font-size: 18px; }
.budget .neg { color: var(--chili); }
.budget .pos { color: #3e7d22; }
.proj { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 2px dashed #eadcbc; }
.proj > div { flex: 1; min-width: 0; }
.proj small { color: var(--ink-soft); font-weight: 600; }
.progress.thin { height: 10px; border-width: 2px; margin: 4px 0 0; }
.dreams .mode-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.dream-icon { font-size: 34px; line-height: 1.1; }
.dreams .mode-card b { font-size: 18px; }
.dreams .mode-card small { font-size: 13px; font-weight: 600; color: var(--ink-soft); line-height: 1.3; }

/* title */
body.sw #title { background: radial-gradient(circle at 50% 30%, rgba(255, 243, 196, .85) 0 110px, transparent 260px), linear-gradient(180deg, rgba(126, 203, 224, .92) 0%, rgba(183, 227, 217, .9) 50%, rgba(207, 238, 170, .92) 100%); }
body.sw #title h1 { color: #8cbf5a; }
.title-form { width: min(420px, 92vw); text-align: left; }
#ages .tab { font-size: 14px; }
#titleHero { width: 128px; height: 128px; }

@media (max-width: 600px) {
  body.sw .goal { max-width: 64vw; }
  body.sw .goal-label { display: none; }
  body.sw #goalText { font-size: 13px; }
  body.sw .pill.clock { font-size: 13px; padding: 2px 10px 0; height: 34px; }
  body.sw .pill.coins { height: 34px; }
  .sw-grid { grid-template-columns: 1fr 1fr; }
  .sheet-head h2 { font-size: 24px; }
}
@media (max-width: 380px) { .sw-grid { grid-template-columns: 1fr; } }
/* title screen: everything fits on one screen, from a small phone to a laptop */
#nameIn { text-transform: none; letter-spacing: normal; text-align: left; }
body.sw #title h1 { font-size: clamp(44px, 9vw, 72px); line-height: .92; gap: 2px; }
body.sw .title-inner { gap: 10px; width: 100%; max-width: 480px; }
body.sw .tagline { margin: 0 0 4px; font-size: 17px; max-width: 34ch; }
body.sw .big-btn { font-size: 22px; padding: 10px 26px 7px; }
.title-form { gap: 10px; padding: 14px 16px; }
.title-form .mp-msg:empty { display: none; }
.title-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.title-actions .big-btn.friends { font-size: 22px; }
body.sw #title .how { margin-top: 4px; }
body.sw #title .swatches { gap: 6px; flex-wrap: nowrap; }
body.sw #title .swatches button { width: 32px; height: 32px; flex: none; }
body.sw.touch #title .swatches button { width: 34px; height: 34px; }
@media (max-width: 380px) { body.sw #title .swatches button, body.sw.touch #title .swatches button { width: 29px; height: 29px; } }
@media (max-height: 760px) { #titleHero { width: 96px; height: 96px; } body.sw #title h1 { font-size: clamp(40px, 8vw, 58px); } body.sw .tagline { font-size: 15px; } }
@media (max-height: 620px) { #titleHero { display: none; } }
@media (max-width: 480px) { .title-actions .big-btn { width: 100%; } }

/* polish */
body.sw #menuPop { min-width: 250px; }
body.sw #menuPop button, body.sw #menuPop .menu-link { white-space: nowrap; }
.dreams .mode-card .dream-icon { font-size: 34px; line-height: 1.1; color: inherit; }
.dreams .mode-card small { font-size: 13.5px; }
.job-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.job-head .wage { flex: none; font-size: 15px; background: #fff1a8; border: 2px solid var(--ink); border-radius: 999px; padding: 1px 8px 0; }
.clue > :last-child { margin-bottom: 0; }
.clue .sw-row { margin-top: 10px; }
body.sw .pill.clock { gap: 6px; }
@media (max-width: 600px) {
  #clockDay { display: none; }
  .sw-grid { grid-template-columns: 1fr; }
  .sw-grid.dreams { grid-template-columns: 1fr 1fr; }
  .dreams .mode-card .dream-icon { font-size: 28px; }
}
body.sw #title h1 { column-gap: .28em; }
/* landscape phones: title and form side by side, so nothing hides below the fold */
@media (max-height: 520px) and (orientation: landscape) {
  body.sw .title-inner { display: grid; grid-template-columns: 1fr minmax(300px, 1fr); column-gap: 28px; row-gap: 8px; align-items: center; max-width: 860px; }
  body.sw #title h1 { grid-column: 1; grid-row: 1; flex-direction: column; font-size: 54px; }
  body.sw .tagline { grid-column: 1; grid-row: 2; align-self: start; }
  body.sw .title-form { grid-column: 2; grid-row: 1 / span 2; width: 100%; }
  body.sw .title-actions { grid-column: 2; grid-row: 3; }
  body.sw #newBtn { grid-column: 2; }
  body.sw .title-actions .big-btn { font-size: 18px; padding: 8px 18px 5px; }
}
/* toasts: never clipped; on touch screens they sit under the top-right buttons */
body.sw #toasts { max-height: none; overflow: visible; }
body.sw.touch #toasts { top: calc(env(safe-area-inset-top, 0px) + 74px); bottom: auto; left: auto; right: calc(env(safe-area-inset-right, 0px) + 12px); transform: none; width: min(92vw, 380px); align-items: stretch; }
@media (orientation: portrait) { body.sw.touch #toasts { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 146px); left: 50%; right: auto; transform: translateX(-50%); } }
@media (max-height: 520px) { body.sw.touch #toasts { width: min(46vw, 380px); top: calc(env(safe-area-inset-top, 0px) + 66px); } body.sw .toast { font-size: 14px; padding: 6px 12px 4px; } }

/* picture tiles: most choices are a big icon and a number */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; min-height: 104px; padding: 10px 6px 8px;
  background: #fff; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 3px 0 var(--ink); font-family: var(--body); text-align: center; line-height: 1.15; }
.tile:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
@media (hover: hover) { .tile:not(:disabled):hover { background: #fffbef; } }
.tile.on { background: #e3f4d3; }
.tile:disabled { opacity: .5; cursor: default; }
.tile .tile-i { font-size: 36px; line-height: 1.1; }
.tile b { font-size: 15px; font-weight: 800; }
.tile b i { font-style: normal; font-size: 12px; }
.tile b i.up { color: #3e7d22; } .tile b i.down { color: var(--chili); }
.tile small { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.tile .tile-badge { position: absolute; top: -8px; right: -8px; background: var(--broth); border: 2.5px solid var(--ink); border-radius: 999px; padding: 1px 8px 0; font-size: 12px; font-weight: 800; cursor: pointer; }
.tile .progress.thin { width: 88%; margin: 6px 0 0; }
.tile.mem { min-height: 84px; cursor: default; box-shadow: none; }
.tile.mem.locked { background: #f4ecdb; border-style: dashed; }
.tile.mem .tile-i { font-size: 30px; }
.tiles.dreams .tile .tile-i { font-size: 44px; }
.tiles.dreams .tile { min-height: 116px; justify-content: center; }
.sub-h { margin: 6px 0 10px; font-size: 17px; }
.grow-bar { display: flex; align-items: center; gap: 10px; margin: -4px 0 14px; font-weight: 800; }
.grow-bar .progress { flex: 1; margin: 0; }
.progress.thin > div { background: repeating-linear-gradient(-45deg, #8cbf5a 0 8px, #9fd46e 8px 16px); }
.clue h3 small { font-size: 13px; color: var(--ink-soft); font-weight: 700; }
.clue h3 small.pos { color: #3e7d22; } .clue h3 small.neg { color: var(--chili); }
.budget small { color: var(--ink-soft); font-weight: 700; font-size: 12px; }
.welcome-row { display: flex; justify-content: center; gap: 12px; font-size: 40px; margin: 6px 0 12px; flex-wrap: wrap; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.help-grid div { background: #fff; border: 3px solid var(--ink); border-radius: 16px; padding: 10px 12px 8px; font-size: 20px; font-weight: 800; text-align: center; }
@media (max-width: 600px) { .tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; } .tile { min-height: 96px; padding: 8px 4px 6px; } .tile .tile-i { font-size: 30px; } .tile b { font-size: 13.5px; } .tile small { font-size: 11.5px; } .tiles.dreams { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 360px) { .tiles, .tiles.dreams { grid-template-columns: repeat(2, 1fr); } }

/* the guide arrow at the edge of the screen */
#guide { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; width: 0; height: 0; }
#guide .guide-arrow { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; display: grid; place-items: center; font-size: 30px; color: #ffd23f;
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; animation: guidePulse 1s ease-in-out infinite; }
#guide .guide-icon { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; display: grid; place-items: center; font-size: 20px; background: var(--paper); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 0 2px 0 var(--ink); transform: translate(0, 34px); }
@keyframes guidePulse { 50% { scale: 1.18; } }

/* vehicle button */
body.sw #rideBtn { font-size: 24px; background: #fff1a8; }

/* chat: even gaps, no stray scrollbar, and never under the buttons */
body.sw .chat-phrases { scrollbar-width: none; padding-bottom: 0; }
body.sw .chat-phrases::-webkit-scrollbar { display: none; }
body.sw #chat { gap: 8px; padding: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); }
body.sw #talkBar { gap: 10px; }
body.sw.touch #talkBar { bottom: calc(env(safe-area-inset-bottom, 0px) + 100px); right: calc(env(safe-area-inset-right, 0px) + 16px); }
body.sw.touch #chat { bottom: max(calc(var(--kb, 0px) + 12px), calc(env(safe-area-inset-bottom, 0px) + 170px)); max-height: calc(100% - max(calc(var(--kb, 0px) + 12px), calc(env(safe-area-inset-bottom, 0px) + 170px)) - env(safe-area-inset-top, 0px) - 70px); }
body.sw #emoteBar { bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); }
body.sw.touch #emoteBar { bottom: calc(env(safe-area-inset-bottom, 0px) + 170px); }
@media (max-height: 520px) { body.sw.touch #talkBar { bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); } body.sw.touch #chat { bottom: max(calc(var(--kb, 0px) + 8px), calc(env(safe-area-inset-bottom, 0px) + 150px)); } }

/* receipts: every coin change says why, next to your coins */
#receipts { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; pointer-events: none; max-width: min(360px, 70vw); }
#receipts:empty { display: none; }
.receipt { pointer-events: auto; text-align: left; font-family: var(--body); font-weight: 700; font-size: 14px; line-height: 1.25; color: var(--ink);
  background: #f2fbe8; border: 2.5px solid var(--ink); border-radius: 14px; padding: 5px 10px 3px; box-shadow: 0 2px 0 var(--ink); animation: toastIn .35s cubic-bezier(.2, 1.5, .4, 1); transition: opacity .45s, transform .45s; }
.receipt.neg { background: #fff0e8; }
.receipt.out { opacity: 0; transform: translateX(-12px); }
.receipt b.pos, .led.pos .led-n, b.keep { color: #3e7d22; }
.receipt b.neg, .led.neg .led-n { color: var(--chili); }
.receipt small, .led small { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.receipt em, .led em { font-style: normal; font-size: 12px; color: var(--ink-soft); }
#coinPill { cursor: pointer; font-family: var(--body); color: var(--ink); }
#coinPill.up { animation: coinUp .6s ease; } #coinPill.down { animation: coinDown .6s ease; }
@keyframes coinUp { 30% { background: #d8f0c4; transform: scale(1.12); } }
@keyframes coinDown { 20% { background: #fbd6cc; transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } }
.ledger { display: flex; flex-direction: column; }
.led { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 7px 0 5px; border-top: 2px dashed #eadcbc; }
.led-i { font-size: 22px; text-align: center; }
.led-n { font-size: 17px; white-space: nowrap; }
.budget > div > span small { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.budget em { font-style: normal; font-size: 12px; color: var(--ink-soft); }
.tile small b.keep { font-weight: 800; }
@media (max-width: 600px) { .receipt { font-size: 13px; } #receipts { max-width: 64vw; } }

/* money you can always see: sheets sit under toasts; what you owe sits by your coins */
body.sw #sheet { z-index: 8; }
body.sw #toasts { z-index: 9; }
#oweText { margin-left: 6px; font-size: .8em; color: var(--chili); }
.receipt.move { background: #eef4ff; }
.wallet.flash { animation: walletFlash .7s ease; }
@keyframes walletFlash { 0% { background: #fff3b0; } 100% { background: transparent; } }
.tile .usual { display: block; font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.float.tax { font-size: 22px; color: #ffb4a0; }
.budget .start { border-bottom: 2px dashed #eadcbc; color: var(--ink-soft); }
.things { display: flex; flex-direction: column; gap: 4px; }
.thing { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 6px 0 4px; border-top: 2px dashed #eadcbc; }
.thing:first-child { border-top: 0; }
.thing-i { font-size: 24px; text-align: center; }
.thing-t small { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.thing .choice { padding: 6px 10px; font-size: 14px; }
button.sure { background: #ffe08a !important; }
.choice small { font-size: 11px; font-weight: 700; opacity: .8; }

/* ---------- Small Town Days: stars, rituals, the dream, little-kid views ---------- */
#starPill { cursor: pointer; font-family: var(--body); color: var(--ink); gap: 6px; padding: 2px 12px 0 4px; }
#starPill small { font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.star-ring { --p: 0%; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#ffd23f var(--p), #efe3c9 0); }
.star-ring span { width: 22px; height: 22px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; font-size: 14px; }
#ritualStrip { display: inline-flex; gap: 2px; margin-left: 4px; cursor: pointer; pointer-events: auto; }
#ritualStrip i { font-style: normal; font-size: 17px; position: relative; filter: grayscale(1); opacity: .55; transition: opacity .3s; }
#ritualStrip i.open { filter: none; opacity: 1; animation: ritualPulse 1s ease-in-out infinite alternate; }
#ritualStrip i.done { filter: none; opacity: 1; }
#ritualStrip i.done::after { content: '✓'; position: absolute; right: -4px; bottom: -4px; font-size: 10px; font-weight: 900; color: #fff; background: #3e7d22; border-radius: 50%; width: 13px; height: 13px; line-height: 13px; text-align: center; }
#ritualStrip i.past { opacity: .3; }
@keyframes ritualPulse { from { transform: scale(1); } to { transform: scale(1.25); filter: drop-shadow(0 0 4px #ffd23f); } }
#coinPill.spent { animation: coinSpent .6s ease; }
@keyframes coinSpent { 0%, 100% { background: var(--paper); } 40% { background: #dcecff; } }
.receipt.buy { background: #e6f3ff; color: #1c4f8a; }

/* picture quizzes for little kids */
.quiz-pic { font-size: 44px; line-height: 1.3; text-align: center; margin: 6px 0 14px; word-break: break-word; }
.quiz-opts.pics { grid-template-columns: 1fr 1fr; }
.quiz-opt.pic { text-align: center; font-size: 44px; min-height: 104px; }
.quiz-opt.wiggle { animation: wiggle .4s ease; background: #fbd6cc; }
.quiz-opt.glow { box-shadow: 0 0 0 4px #ffd23f, 0 3px 0 var(--ink); animation: ritualPulse .7s ease-in-out infinite alternate; }
@keyframes wiggle { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.b1 .quiz-why { font-size: 22px; text-align: center; }

/* the morning card, challenges, the star sheet */
.morning-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 4px 0 14px; }
.morning-row span { font-size: 26px; font-weight: 800; background: #fff; border: 3px solid var(--ink); border-radius: 16px; padding: 6px 12px 3px; }
.tile.challenge b { font-size: 18px; }
.budget .head { border-bottom: 0; padding-top: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.star-big { text-align: center; margin-bottom: 12px; }
.star-big b { display: block; font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 1.1; }
.star-big .progress { margin: 8px auto 6px; max-width: 360px; }
.star-big span { font-weight: 800; color: var(--ink-soft); }
.ritual-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ritual-row > span { display: flex; flex-direction: column; align-items: center; font-size: 30px; min-width: 64px; background: #fff; border: 3px solid var(--ink); border-radius: 16px; padding: 6px 8px 4px; }
.ritual-row > span small { font-size: 11px; font-weight: 800; color: var(--ink-soft); }
.ritual-row > span.soon { opacity: .6; } .ritual-row > span.past { opacity: .35; } .ritual-row > span.done { background: #e3f4d3; } .ritual-row > span.open { background: #fff3b0; }
.picture-sum { text-align: center; font-size: 22px; font-weight: 800; margin: 2px 0 10px; }
.piggy { font-size: 30px; }
.tabs.ages { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tabs.ages .tab { min-width: 52px; font-size: 20px; }
#ages { display: flex; flex-wrap: wrap; gap: 6px; }
#ages .tab { min-width: 40px; font-size: 16px; padding-left: 8px; padding-right: 8px; }
.float.zz { font-size: 26px; color: #d9d4ff; }

/* bedtime: a little dream while the night passes */
#dream { position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px;
  background: radial-gradient(circle at 50% 30%, #3a2f6b 0%, #1b1740 75%); color: #fff; overflow: hidden; }
#dream[hidden] { display: none; }
#dreamArt { width: min(320px, 80vw); height: auto; }
#dreamStars { position: absolute; inset: 0; pointer-events: none; }
.dream-star { position: absolute; pointer-events: auto; width: 72px; height: 72px; font-size: 44px; border: 0; background: none; cursor: pointer; animation: twinkle 1.2s ease-in-out infinite alternate; filter: drop-shadow(0 0 10px #ffe680); }
@keyframes twinkle { from { transform: scale(.85) rotate(-8deg); } to { transform: scale(1.1) rotate(8deg); } }
#dreamCount { position: absolute; top: 12%; left: 50%; translate: -50% 0; font-family: var(--display); font-weight: 400; font-size: 120px; line-height: 1; color: #ffe680; text-shadow: 0 4px 0 #1b1740; pointer-events: none; }
#dreamCount.pop { animation: countPop .5s ease; }
@keyframes countPop { 0% { transform: scale(.5); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
#dreamPlan { width: min(360px, 92vw); color: var(--ink); }
#dreamPlan:empty { display: none; }
#nightBar { display: flex; align-items: center; gap: 8px; width: min(360px, 86vw); font-size: 24px; }
#nightBar .progress { flex: 1; margin: 0; }
#nightFill { height: 100%; width: 0; background: linear-gradient(90deg, #7a6fd6, #ffd23f); transition: width .5s linear; }
#wakeBtn { min-width: 96px; min-height: 64px; font-size: 32px; }

/* band 1: pictures and numbers, as few words as possible */
.b1 .keeper p, .b1 .receipt small, .b1 .led small, .b1 .budget small { display: none; }
@media (max-width: 420px) { #starPill small { display: none; } #ritualStrip i { font-size: 15px; } }
.budget b.move { color: var(--ink-soft); }
#ages.nudge { animation: wiggle .4s ease 2; }