/* Lolo's Garden (web): warm cream paper, leafy greens, berry pinks, chunky clay tiles with a darker lip. */

@font-face { font-family: 'Nunito'; font-weight: 800; src: url('../assets/fonts/Nunito-ExtraBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Andika'; font-weight: 400; src: url('../assets/fonts/Andika-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Andika'; font-weight: 700; src: url('../assets/fonts/Andika-Bold.ttf') format('truetype'); font-display: swap; }

:root {
  --bg-top: #FFF4E0; --bg-bottom: #FFE2C6;
  --ink: #4A3426; --ink-soft: #8C6E5A;
  --card: #FFFCF6; --card-lip: #EAD3B5;
  --leaf: #6DBE7A; --leaf-dark: #4E9A5C;
  --berry: #F0628C; --berry-dark: #C9476D;
  --sun: #FFC53D; --sun-dark: #DFA11A;
  --sky: #8FD3F4; --sky-dark: #58ADD4;
  --plum: #A77BCA; --plum-dark: #8058A6;
  --peach: #FFB38A; --peach-dark: #E58C63;
  --good: #7ED08A; --good-lip: #53A962; --bad: #F28B82;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden; overscroll-behavior: none;
  background: var(--bg-bottom); color: var(--ink);
  font-family: 'Nunito', 'Arial Rounded MT Bold', system-ui, sans-serif; font-weight: 800;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  touch-action: manipulation;
}
img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; }

#app { position: fixed; inset: 0; overflow: hidden; }
.screen { position: absolute; inset: 0; overflow: hidden; }
.screen-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.read { font-family: 'Andika', 'Nunito', system-ui, sans-serif; font-weight: 400; }
.read-bold { font-family: 'Andika', 'Nunito', system-ui, sans-serif; font-weight: 700; }
.play { font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; }

/* ---- clay ---------------------------------------------------------------------------------- */
/* A clay slab: a rounded face over a darker lip; pressed, the face sinks onto the lip. */
.clay {
  --face: var(--card); --lip: var(--card-lip); --radius: 26px; --stroke: transparent;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--face) 82%, white), var(--face));
  box-shadow: 0 5px 0 var(--lip), inset 0 0 0 3px var(--stroke);
  transform: translateY(0);
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
  margin-bottom: 5px;
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .clay { background: var(--face); }
}
.clay.pressable:active, .clay.pressed { transform: translateY(4px) scale(0.97, 0.95); box-shadow: 0 1px 0 var(--lip), inset 0 0 0 3px var(--stroke); }
.btn { color: #fff; text-shadow: 0 1.5px 1.5px rgba(0,0,0,0.25); padding: 12px 22px 12px; font-size: 26px; line-height: 1.1; text-align: center; }
.round-btn { width: 50px; height: 50px; --radius: 40px; font-size: 22px; line-height: 1; padding-bottom: 3px; }
.label { color: var(--ink); text-align: center; }
.chip { white-space: nowrap; padding: 4px 12px 5px; font-size: 16px; --face: #FFF1C9; --lip: var(--sun-dark); --radius: 18px; color: var(--ink); }

/* ---- home ---------------------------------------------------------------------------------- */
.home-scroll { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(12px + var(--safe-top)) calc(14px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(14px + var(--safe-left)); }
.home-col { max-width: 560px; margin: 0 auto; }
.home-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.home-head .lolo { width: 118px; height: 118px; flex: none; }
.home-head .lolo img { width: 100%; height: 100%; object-fit: contain; }
.home-title { font-size: 32px; color: var(--berry-dark); line-height: 1.05; }
.home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 2px; }
.badge { display: flex; flex-direction: column; align-items: center; padding: 6px 4px 8px; }
.badge .disc { width: 98px; height: 102px; padding: 6px 8px 12px; --radius: 60px; }
.badge .disc img { width: 100%; height: 100%; object-fit: contain; }
.badge .name { font-size: 15px; margin-top: 2px; line-height: 1.15; min-height: 2.3em; }
.home-hint { display: block; margin: 14px 12px 40px; padding: 8px 14px 13px; font-size: 13px; color: var(--ink-soft); --face: rgba(255,251,242,0.93); --radius: 16px; }
.home-foot { text-align: center; font-size: 12px; color: var(--ink-soft); margin: -26px 0 30px; font-family: 'Andika', sans-serif; font-weight: 400; }
.home-foot a { color: var(--ink-soft); }

/* ---- game ---------------------------------------------------------------------------------- */
.game-content { position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: calc(6px + var(--safe-top)) calc(10px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(10px + var(--safe-left)); }
.topbar { display: flex; align-items: center; flex: none; }
.topbar .home { width: 48px; height: 50px; font-size: 20px; }
.topbar .gear { width: 46px; height: 48px; font-size: 18px; margin-left: 8px; opacity: 0.7; }
.topbar .path { flex: 1; min-width: 0; height: 36px; margin: 0 8px; }
.topbar > .round-btn, .topbar > .chip { flex: none; }
.promptbar { display: flex; align-items: center; margin: 6px 0 4px; flex: none; min-height: 58px; }
.promptbar .ear { width: 56px; height: 58px; font-size: 24px; --face: #FFE3EC; --lip: #E9A9BE; flex: none; }
.promptbar .extra { width: 56px; height: 58px; font-size: 24px; --face: #E6DBFF; --lip: #B9A3E6; flex: none; }
.promptbar .spacer { width: 56px; flex: none; }
.promptbar .prompt-img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.promptbar .prompt-text { flex: 1; min-width: 0; padding: 0 6px; text-align: center; line-height: 1.12; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.board { position: relative; flex: 1; min-height: 0; }

.veil { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; z-index: 20; }
.veil.show { display: flex; }
.veil .col { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 20px; }
.veil img.big { width: 200px; height: 200px; object-fit: contain; }
.timeout-veil { background: rgba(247,228,204,0.85); z-index: 30; }
.drain { width: 210px; height: 16px; border-radius: 8px; background: rgba(160,82,45,0.2); margin-top: 12px; overflow: hidden; }
.drain > div { height: 100%; width: 100%; border-radius: 8px; background: var(--berry); transform-origin: left center; }
.end-veil { background: rgba(255,241,221,0.95); z-index: 40; }
.lock-veil { background: rgba(232,221,245,0.96); z-index: 41; }
.end-title { font-size: 30px; margin: 0 20px 10px; }
.end-stickers { display: flex; gap: 6px; padding: 8px 10px 14px; margin-bottom: 22px; --face: #fff; --radius: 20px; }
.end-stickers img { width: 72px; height: 72px; object-fit: contain; }
.end-hint { font-size: 19px; color: var(--ink-soft); margin: 0 24px 20px; }

.friend-layer { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 110%); z-index: 50; pointer-events: none;
  display: none; flex-direction: column; align-items: center; transition: transform 450ms cubic-bezier(.34,1.3,.64,1); }
.friend-layer.show { display: flex; }
.friend-layer.up { transform: translate(-50%, 0); }
.friend-layer.down { transition: transform 300ms ease-in; transform: translate(-50%, 110%); }
.friend-bubble { font-size: 22px; padding: 8px 16px 14px; --face: #fff; --lip: #E6D2BA; --radius: 22px; margin-bottom: 4px; max-width: 90vw; }
.friend-layer img { object-fit: contain; object-position: bottom; }

.reveal { position: absolute; top: calc(60px + var(--safe-top)); left: 50%; z-index: 45; display: none; flex-direction: column; align-items: center;
  padding: 10px 10px 14px; --face: #fff; --lip: #F3B3C7; --stroke: #F7A1BB; --radius: 24px; transform: translateX(-50%); }
.reveal.show { display: flex; animation: reveal-in 420ms cubic-bezier(.34,1.5,.64,1) both; }
.reveal img { border-radius: 18px; object-fit: cover; }
.reveal .cap { font-size: 26px; margin-top: 4px; }
@keyframes reveal-in { from { opacity: 0; transform: translateX(-50%) scale(0.5) rotate(-3deg); } to { opacity: 1; transform: translateX(-50%) scale(1) rotate(2deg); } }

.sticker-veil { position: absolute; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; background: rgba(255,240,204,0.96); }
.sticker-veil.show { display: flex; }
.sunburst { position: absolute; width: 460px; height: 460px; left: 50%; top: 50%; margin: -230px 0 0 -230px; animation: spin 9s linear infinite; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.sticker-col { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sticker-title { font-size: 32px; color: var(--berry-dark); margin: 0 20px 14px; }
.sticker-card { padding: 14px 14px 20px; --face: #fff; --lip: var(--sun-dark); --stroke: var(--sun); --radius: 30px; margin-bottom: 12px; }
.sticker-card img { object-fit: contain; }
.sticker-caption { font-size: 28px; margin: 0 20px; }

.confetti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 90; pointer-events: none; }
.toast { position: absolute; left: 50%; bottom: calc(40px + var(--safe-bottom)); transform: translateX(-50%); z-index: 100;
  background: rgba(60,45,35,0.9); color: #fff; padding: 10px 18px; border-radius: 20px; font-size: 15px; pointer-events: none;
  opacity: 0; transition: opacity 200ms; font-family: 'Andika', sans-serif; font-weight: 700; white-space: nowrap; }
.toast.show { opacity: 1; }

.rotate-veil { position: absolute; inset: 0; z-index: 95; display: none; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(255,244,224,0.97); text-align: center; font-size: 24px; padding: 20px; }
.needs-landscape .rotate-veil { display: none; }
@media (orientation: portrait) { .needs-landscape .rotate-veil { display: flex; } }
.rotate-veil img { width: 150px; height: 150px; object-fit: contain; animation: tilt 2s ease-in-out infinite; }
@keyframes tilt { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

/* ---- start (tap to play: unlocks sound on iPhone) ------------------------------------------ */
.start { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.start img { width: 190px; height: 190px; object-fit: contain; animation: bob 1.6s ease-in-out infinite; }
.start h1 { font-size: 40px; color: var(--berry-dark); margin: 6px 0 18px; }
.start .btn { font-size: 30px; padding: 16px 40px 18px; }
.start .hint { margin-top: 18px; font-size: 15px; color: var(--ink-soft); max-width: 340px; }
.start .loading { margin-top: 10px; font-size: 14px; color: var(--ink-soft); min-height: 1.2em; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.wiggle { animation: wiggle 400ms ease-in-out; }
@keyframes wiggle { 0% { transform: rotate(0) scale(1); } 30% { transform: rotate(-6deg) scale(1.08); } 60% { transform: rotate(5deg) scale(1.08); } 100% { transform: rotate(0) scale(1); } }
.pop-in { animation: pop-in 320ms cubic-bezier(.34,1.8,.64,1) both; }
@keyframes pop-in { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
.shake { animation: shake 420ms ease-in-out; }
@keyframes shake { 0%,100% { transform: translateX(0); } 14% { transform: translateX(-18px); } 28% { transform: translateX(18px); } 42% { transform: translateX(-12px); } 57% { transform: translateX(12px); } 71% { transform: translateX(-6px); } 85% { transform: translateX(6px); } }

/* ---- options & sticker book ----------------------------------------------------------------- */
.page { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(12px + var(--safe-top)) calc(16px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(16px + var(--safe-left)); }
.page-col { max-width: 560px; margin: 0 auto; }
.page h1 { font-size: 28px; color: var(--berry-dark); margin: 6px 0 12px; display: flex; align-items: center; gap: 12px; }
.page h2 { font-size: 15px; letter-spacing: 0.06em; color: var(--ink-soft); margin: 20px 4px 8px; text-transform: uppercase; }
.panel { display: block; padding: 10px 14px 14px; --face: #FFFCF6; --radius: 20px; text-align: left; width: 100%; }
.opt-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; font-size: 18px; font-family: 'Andika', sans-serif; font-weight: 700; }
.opt-row input { width: 22px; height: 22px; accent-color: var(--leaf-dark); flex: none; }
.opt-row small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 14px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button { padding: 8px 14px 10px; font-size: 17px; --radius: 16px; }
.seg button.on { --face: var(--leaf); --lip: var(--leaf-dark); color: #fff; }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.sticker-grid .cell { aspect-ratio: 1; padding: 6px 6px 10px; --radius: 18px; }
.sticker-grid .cell img { width: 100%; height: 100%; object-fit: contain; }
.sticker-grid .cell.empty { --face: #F3E6D3; opacity: 0.55; }
.zoom-veil { position: absolute; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center; background: rgba(74,52,38,0.55); }
.zoom-veil.show { display: flex; }
.zoom-card { display: flex; flex-direction: column; align-items: center; padding: 16px 16px 20px; --face: #fff; --lip: var(--sun-dark); --stroke: var(--sun); --radius: 30px; }
.zoom-card img { width: min(70vw, 60vh, 320px); height: min(70vw, 60vh, 320px); object-fit: contain; }
.zoom-card .cap { font-size: 30px; margin-top: 6px; }

/* ---- grown-up settings (settings.js): one design for every Lolo's Garden app ---------------- */
.home-head { position: relative; padding-right: 50px; }
.home-head .gear { position: absolute; top: 0; right: 0; width: 48px; height: 50px; font-size: 18px; opacity: 0.75; }
.settings .page h1.set-title { font-size: 26px; line-height: 1.1; margin: 4px 0 6px; gap: 10px; }
.settings .page h1.set-title .round-btn { flex: none; }
.settings .page h1.set-title .set-icon { width: 46px; height: 46px; object-fit: contain; flex: none; }
.settings .page h2 { margin: 18px 6px 8px; }
.set-panel { padding: 12px 14px 14px; }
.set-sub { font-size: 17px; color: var(--ink); margin: 14px 2px 8px; }
.set-panel > .set-sub:first-child { margin-top: 2px; }
.set-note { font-size: 14.5px; color: var(--ink-soft); margin: 6px 2px 2px; line-height: 1.3; white-space: pre-line; }
.set-note.strong { color: var(--ink); font-size: 16px; font-family: 'Andika', sans-serif; font-weight: 700; }
.set-blurb { font-size: 16px; color: var(--ink); margin: 8px 2px 0; line-height: 1.3; min-height: 1.3em; }
.seg.fill { display: grid; gap: 8px; }
.seg.fill > button { min-height: 50px; min-width: 0; font-size: 18px; padding: 8px 6px 10px; white-space: nowrap; }
.seg > button[aria-pressed="true"] { color: #fff; }
/* the game rows on the settings home */
.set-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 2px; text-align: left;
  border-bottom: 2px solid #F3E6D3; border-radius: 0; }
.set-row:last-child { border-bottom: 0; }
.set-row.pressed { background: rgba(234,211,181,0.35); border-radius: 14px; }
.set-row .disc { flex: none; width: 50px; height: 50px; border-radius: 50%; background: #FFF1DD; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.set-row .disc img { width: 44px; height: 44px; object-fit: contain; }
.set-row .disc .glyph { font-size: 24px; }
.set-row .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.set-row .name { font-size: 18px; color: var(--ink); line-height: 1.15; }
.set-row .line { font-size: 14.5px; color: var(--ink-soft); line-height: 1.25; margin-top: 2px; }
.set-row .chev { flex: none; font-size: 28px; color: var(--ink-soft); padding: 0 4px 4px; }
/* on/off switches: the whole row is the touch target */
.set-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 2px; text-align: left; margin-top: 6px; }
.set-toggle .txt { flex: 1; min-width: 0; font-size: 17px; line-height: 1.2; }
.set-toggle small { display: block; font-size: 14px; color: var(--ink-soft); margin-top: 2px; }
.set-toggle .switch { flex: none; position: relative; width: 60px; height: 36px; border-radius: 18px; background: #E6D6C2;
  box-shadow: inset 0 2px 3px rgba(74,52,38,0.18); transition: background-color 160ms; }
.set-toggle .knob { position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 0 #D4BC9C; transition: transform 160ms cubic-bezier(.34,1.5,.64,1); }
.set-toggle[aria-checked="true"] .switch { background: var(--leaf); }
.set-toggle[aria-checked="true"] .knob { transform: translateX(24px); box-shadow: 0 2px 0 var(--leaf-dark); }
/* category chips */
.set-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-cat { min-height: 48px; padding: 6px 14px 8px 10px; font-size: 16px; --radius: 24px; --face: #FFF6EA; --lip: #E6CFB0; color: var(--ink); gap: 6px; }
.chip-cat .emo { font-size: 20px; line-height: 1; }
.chip-cat:not(.on) { opacity: 0.6; }
.chip-cat.on { --face: var(--leaf); --lip: var(--leaf-dark); color: #fff; opacity: 1; }
.set-learning { font-size: 15.5px; line-height: 1.35; white-space: pre-line; color: var(--ink); }
.set-btn { display: flex; width: 100%; min-height: 52px; margin-top: 12px; font-size: 18px; }
.set-recommend { color: var(--ink); text-shadow: none; }
.set-recommend.done { color: var(--ink-soft); }
.set-go { display: flex; width: 100%; min-height: 60px; margin: 16px 0 10px; }
.set-count { font-size: 20px; color: var(--ink); margin: 2px 2px 0; }
.set-gap { height: 6px; }
.set-tips { margin-top: 12px; }
.set-tips summary { font-size: 17px; color: var(--ink-soft); min-height: 40px; display: flex; align-items: center; cursor: pointer; list-style: none; }
.set-tips summary::-webkit-details-marker { display: none; }
.set-tips summary::before { content: '▸'; margin-right: 8px; transition: transform 150ms; }
.set-tips[open] summary::before { transform: rotate(90deg); }
.set-tips ul { margin: 4px 0 2px; padding-left: 20px; font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.set-tips li { margin: 4px 0; }