/* Reading Quest: cosy painted-game look (Baloo 2 + Nunito, brown outlines, glossy buttons, cream cards). */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@600;700;800;900&display=swap');

:root {
  --ink: #4A2C1D;
  --ink-2: #5A3A22;
  --wood: #A86F44;
  --cream: #FFFBF3;
  --cream-2: #F7EAD3;
  --cream-line: #E3CBA6;
  --sky: #8FD0F0;
  --green: #2FB45A;
  --yellow: #FFC21A;
  --pink: #FF4F8B;
  --blue: #2E9BF0;
  --purple: #8A4FFF;
  --orange: #FF7A2E;
  --r-common: #9AA5B1;
  --r-uncommon: #2FB45A;
  --r-rare: #2E9BF0;
  --r-epic: #8A4FFF;
  --r-legendary: #FFB21A;
  --r-mythic: #FF4F8B;
  --display: 'Baloo 2', system-ui, sans-serif;
  --body: 'Nunito', system-ui, sans-serif;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--body); color: var(--ink); background: #EAD9BC;
  font-weight: 700; font-size: 16px; overscroll-behavior: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
a { color: var(--ink); }
#app { min-height: 100%; }
/* Frosted strip under the phone's status bar: content scrolls under it blurred instead of showing a coloured band. */
body::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); z-index: 60; pointer-events: none;
  background: rgba(255,248,235,.35); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}

/* ---------- app frame: phone-shaped column, centred on big screens ---------- */
.screen {
  position: relative; max-width: 480px; margin: 0 auto; min-height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden; background: var(--sky);
}
.screen > .bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: 0; pointer-events: none;
}
.screen > .bg.home { background: url('/art/ui/bg-home.webp') center top / cover; }
.screen > .bg.timer { background: url('/art/ui/bg-timer.webp') center top / cover; }
.screen > .bg.sticker { background: url('/art/ui/bg-sticker.webp') center top / cover; }
.screen > .bg.spooky { background: radial-gradient(circle at 70% 10%, #FFE8A3 0 40px, transparent 41px), linear-gradient(#2B1B4A, #4B2A6B 50%, #E07B2A); }
.screen > .bg.paper { background: linear-gradient(#FFF6E6, #F3E2C4); }
.body {
  position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; gap: 12px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 110px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.body.no-nav { padding-bottom: calc(24px + var(--safe-bottom)); }

/* ---------- type ---------- */
.h1, .h2, .h3 { font-family: var(--display); font-weight: 800; margin: 0; line-height: 1.1; }
.h1 { font-size: 30px; }
.h2 { font-size: 24px; }
.h3 { font-size: 19px; }
.outline { color: #fff; text-shadow: 0 2px 0 var(--ink), 1.5px 0 0 var(--ink), -1.5px 0 0 var(--ink), 0 -1.5px 0 var(--ink); }
.outline-big { color: #fff; text-shadow: 0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink), 2px 2px 0 var(--ink), -2px 2px 0 var(--ink); }
.muted { opacity: .75; }
.small { font-size: 13px; }
.tiny { font-size: 11px; }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.between { justify-content: space-between; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

/* ---------- cards and pills ---------- */
.card {
  position: relative; background: linear-gradient(var(--cream), var(--cream-2));
  border: 3px solid var(--cream-line); outline: 2px solid var(--wood); border-radius: 20px;
  padding: 14px 16px; box-shadow: 0 6px 12px rgba(74,44,29,.25); margin: 2px;
}
.card.tight { padding: 10px 12px; }
.card.white { background: linear-gradient(#FFFFFF, #FFF1DA); border: 3px solid var(--ink-2); outline: none; box-shadow: 0 5px 0 var(--ink-2); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(255,250,240,.92);
  border-radius: 999px; padding: 4px 14px; box-shadow: 0 3px 8px rgba(74,44,29,.2); font-weight: 900;
}
.pill.dark { background: rgba(60,40,25,.55); color: #fff; padding: 3px 4px 3px 14px; font-size: 17px; box-shadow: none; }
.tag {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 1px 10px;
  font-weight: 900; font-size: 12px; color: #fff; background: var(--ink-2);
}
.badge-dot {
  position: absolute; right: -6px; top: -6px; min-width: 20px; height: 20px; border-radius: 10px; padding: 0 5px;
  background: var(--pink); border: 2px solid #fff; color: #fff; font-size: 12px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- buttons ---------- */
.btn {
  --a: #FFA65A; --b: #E2702A; --edge: #8A4A1E; --shadow: #6E3A16; --text-edge: #7A3A12;
  appearance: none; border: 3px solid var(--edge); border-radius: 999px; cursor: pointer;
  background: linear-gradient(var(--a), var(--b)); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; padding: 12px 22px; min-height: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  text-shadow: 0 2px 0 var(--text-edge), 1.5px 0 0 var(--text-edge), -1.5px 0 0 var(--text-edge), 0 -1px 0 var(--text-edge);
  box-shadow: inset 0 4px 0 rgba(255,255,255,.35), inset 0 -5px 0 rgba(120,50,10,.25), 0 4px 0 var(--shadow), 0 7px 12px rgba(74,44,29,.3);
  transition: transform .08s, box-shadow .08s; user-select: none;
}
.btn:active { transform: translateY(3px); box-shadow: inset 0 4px 0 rgba(255,255,255,.35), inset 0 -5px 0 rgba(120,50,10,.25), 0 1px 0 var(--shadow); }
.btn:disabled, .btn.disabled { filter: grayscale(.7) brightness(.95); opacity: .7; cursor: default; }
.btn.big { font-size: 28px; min-height: 64px; padding: 14px 28px; }
.btn.small { font-size: 17px; min-height: 40px; padding: 8px 16px; border-width: 2.5px; }
.btn.block { display: flex; width: 100%; }
.btn.green { --a: #A6E865; --b: #48A82A; --edge: #2F6E18; --shadow: #24560F; --text-edge: #2F5A1A; }
.btn.blue { --a: #7CC0FF; --b: #2F7FD6; --edge: #1B4F8F; --shadow: #143E70; --text-edge: #143E70; }
.btn.purple { --a: #C3A6FF; --b: #8E4FE0; --edge: #5A2A9A; --shadow: #45207A; --text-edge: #45207A; }
.btn.pink { --a: #FF9CC0; --b: #F0508A; --edge: #9A1F50; --shadow: #7A1840; --text-edge: #7A1840; }
.btn.cream {
  --a: #FFFDF6; --b: #F3E2C4; --edge: var(--wood); --shadow: #8A5A32; color: var(--ink); text-shadow: none;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.8), 0 4px 0 #8A5A32, 0 6px 10px rgba(74,44,29,.2);
}
.btn.ghost { background: rgba(255,250,240,.9); color: var(--ink); text-shadow: none; border-color: var(--wood); box-shadow: 0 3px 0 #8A5A32; }
.icon-btn {
  appearance: none; border: 2.5px solid var(--wood); background: rgba(255,250,240,.95); border-radius: 50%;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 3px 0 #8A5A32; font-size: 20px; color: var(--ink); text-decoration: none; flex: none;
}

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.hello { display: flex; align-items: center; gap: 8px; background: rgba(255,250,240,.92); border-radius: 999px; padding: 4px 16px 4px 4px; box-shadow: 0 3px 8px rgba(74,44,29,.2); text-decoration: none; }
.avatar {
  width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--wood); display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--ink); overflow: hidden; flex: none;
}
.avatar img { width: 115%; height: 115%; object-fit: contain; margin-top: 12%; transform-origin: 50% 80%; }
.wallet { display: grid; grid-auto-rows: auto; justify-items: stretch; gap: 6px; }
.wallet .pill { justify-content: space-between; min-width: 92px; font-variant-numeric: tabular-nums; }
.title-bar { display: flex; align-items: center; gap: 10px; position: relative; z-index: 5; } /* above zoomed pet art */
.title-bar .h1 { flex: 1; }

/* ---------- bottom nav (wood) ---------- */
.nav {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 20; width: 100%; max-width: 480px;
  background: repeating-linear-gradient(0deg, rgba(90,50,20,0) 0 7px, rgba(90,50,20,.12) 7px 9px), linear-gradient(#B47C4A, #9A643A);
  border-top: 3px solid var(--ink-2); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 6px 4px calc(10px + var(--safe-bottom)); gap: 2px;
}
.nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 54px;
  text-decoration: none; color: #fff; font-weight: 900; font-size: 13px; border-radius: 14px;
  text-shadow: 0 2px 0 var(--ink), 1.5px 0 0 var(--ink), -1.5px 0 0 var(--ink), 0 -1.5px 0 var(--ink);
}
.nav a.on { background: rgba(60,30,10,.35); box-shadow: inset 0 2px 4px rgba(0,0,0,.3); }

/* ---------- progress bars ---------- */
.bar { height: 16px; border-radius: 999px; background: #6E4A33; box-shadow: inset 0 2px 3px rgba(0,0,0,.35); overflow: hidden; padding: 2px; position: relative; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #F06595, #FF922B, #FFD43B, #69DB7C, #4DABF7); box-shadow: inset 0 2px 0 rgba(255,255,255,.45); transition: width .6s cubic-bezier(.2,.8,.2,1); min-width: 10px; }
.bar.green > i { background: linear-gradient(#8CE25A, #3FA02A); }
.bar.gold > i { background: linear-gradient(#FFE27A, #F2A93B); }
.bar.thin { height: 10px; padding: 1px; }
.bar .spark { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 12px; }

/* ---------- pets ---------- */
.pet { display: block; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(40,30,10,.25)); }
.pet.bounce { animation: bounce 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.pet.sleepy { animation: breathe 4s ease-in-out infinite; transform-origin: 50% 100%; filter: drop-shadow(0 6px 6px rgba(40,30,10,.25)) saturate(.85); }
.pet.happy-jump { animation: jump .6s ease-out 2; }
.aura { position: absolute; inset: 8% 12%; border-radius: 50%; z-index: -1; pointer-events: none; }
.aura.r1 { background: radial-gradient(closest-side, rgba(47,180,90,.35), transparent); }
.aura.r2 { background: radial-gradient(closest-side, rgba(46,155,240,.45), transparent); }
.aura.r3 { background: radial-gradient(closest-side, rgba(138,79,255,.5), transparent); animation: pulse 3s ease-in-out infinite; }
.aura.r4 { background: radial-gradient(closest-side, rgba(255,200,40,.65), transparent); animation: pulse 2.4s ease-in-out infinite; }
.aura.r5 { background: conic-gradient(from 0deg, rgba(255,79,139,.5), rgba(255,194,26,.5), rgba(47,180,90,.5), rgba(46,155,240,.5), rgba(138,79,255,.5), rgba(255,79,139,.5)); filter: blur(18px); animation: spin 8s linear infinite; }
.rarity-tag {
  display: inline-flex; align-items: center; justify-content: center; padding: 2px 12px; border-radius: 12px;
  font-family: var(--display); font-weight: 800; font-size: 17px; color: #fff; border: 2.5px solid rgba(0,0,0,.35);
  text-shadow: 0 1.5px 0 rgba(0,0,0,.4); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 3px 0 rgba(0,0,0,.25);
}
.rarity-tag.r0 { background: linear-gradient(#C4CCD4, #9AA5B1); }
.rarity-tag.r1 { background: linear-gradient(#7DDB8F, #2FB45A); }
.rarity-tag.r2 { background: linear-gradient(#7CC4FF, #2E9BF0); }
.rarity-tag.r3 { background: linear-gradient(#C1A2FF, #8A4FFF); }
.rarity-tag.r4 { background: linear-gradient(#FFE27A, #F2A93B); color: #5A3412; text-shadow: none; box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 3px 0 #A86A12, 0 0 16px rgba(255,220,120,.9); }
.rarity-tag.r5 { background: linear-gradient(90deg, #FF8FAB, #FFC94D, #8CE99A, #74C0FC, #B197FC); text-shadow: 0 1.5px 0 rgba(0,0,0,.5); }

/* ---------- overlays ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 50; background: rgba(30,18,8,.6); display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: fade .2s ease-out;
}
.overlay .panel { width: 100%; max-width: 400px; max-height: 92dvh; overflow-y: auto; animation: pop .35s cubic-bezier(.2,1.4,.4,1); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-width: 480px; margin: 0 auto; }
.toast {
  position: fixed; left: 50%; top: calc(16px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 60; max-width: 90vw;
  background: var(--ink); color: #fff; border-radius: 999px; padding: 10px 18px; font-weight: 900; box-shadow: 0 6px 16px rgba(0,0,0,.3);
  animation: drop .3s ease-out;
}
.rays { position: absolute; inset: -40%; background: repeating-conic-gradient(rgba(255,255,255,.25) 0 10deg, transparent 10deg 20deg); animation: spin 18s linear infinite; pointer-events: none; }

/* ---------- inputs ---------- */
.field { display: flex; flex-direction: column; gap: 4px; font-weight: 900; }
.input, select.input, textarea.input {
  border: 3px solid var(--wood); border-radius: 14px; background: #fff; padding: 10px 12px; font-weight: 800; width: 100%; min-height: 48px;
}
.input:focus { outline: 3px solid var(--blue); outline-offset: 1px; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 900; cursor: pointer; }
.check input { width: 26px; height: 26px; accent-color: var(--green); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 2.5px solid var(--wood); background: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 900; cursor: pointer; }
.chip.on { background: var(--green); border-color: #2F6E18; color: #fff; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 6px; }
.tabs a, .tabs button {
  flex: 1; text-align: center; text-decoration: none; padding: 8px 4px; border-radius: 14px 14px 6px 6px; font-weight: 900; font-size: 15px;
  background: rgba(255,250,240,.75); border: 2.5px solid var(--wood); color: var(--ink); cursor: pointer;
}
.tabs .on { background: linear-gradient(#FFD36A, #F2A93B); border-color: #A86A12; color: #5A3412; box-shadow: 0 3px 0 #A86A12; }

/* ---------- animations ---------- */
@keyframes bounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-6px) scale(.98, 1.02); } 55% { transform: translateY(-6px) scale(.98, 1.02); } 80% { transform: translateY(0) scale(1.03, .97); } }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, .98); } }
@keyframes jump { 0% { transform: translateY(0); } 40% { transform: translateY(-30px) rotate(-4deg); } 70% { transform: translateY(0) scale(1.05, .95); } 100% { transform: none; } }
@keyframes pulse { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
@keyframes drop { from { transform: translate(-50%, -30px); opacity: 0; } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(7deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes confetti { to { transform: translate(var(--dx), 110vh) rotate(var(--rot)); } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; animation: confetti var(--t) cubic-bezier(.2,.6,.4,1) forwards; }
.zzz { position: absolute; font-family: var(--display); font-weight: 800; color: #fff; text-shadow: 0 2px 0 var(--ink); animation: float 2.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* ---------- scrapbook / scene backgrounds (shop items) ---------- */
.scene { position: relative; border-radius: 22px; overflow: hidden; border: 3px solid var(--ink-2); }
.scene-meadow { background: radial-gradient(circle at 80% 15%, #FFF3A0 0 30px, transparent 31px), linear-gradient(#9FDBFF 0 55%, #8BD46A 55% 100%); }
.scene-bedroom { background: repeating-linear-gradient(90deg, #FFD6E7 0 18px, #FFE6F0 18px 36px) top / 100% 62% no-repeat, linear-gradient(#C98B5A, #A86F44) bottom / 100% 38% no-repeat; }
.scene-library { background: repeating-linear-gradient(0deg, #6E4428 0 6px, transparent 6px 46px), repeating-linear-gradient(90deg, #E07B5A 0 10px, #4DA3F0 10px 18px, #F2C14E 18px 27px, #69A85A 27px 36px, #8A4FFF 36px 44px) top / 100% 70% no-repeat, linear-gradient(#B47C4A, #8A5A32); }
.scene-candy { background: radial-gradient(circle at 20% 30%, #FFB3D1 0 14px, transparent 15px), radial-gradient(circle at 75% 20%, #B3E5FF 0 18px, transparent 19px), radial-gradient(circle at 60% 60%, #FFF0A3 0 12px, transparent 13px), linear-gradient(#FFE0F0, #FFC2E0 60%, #FF9CC8); }
.scene-sea { background: radial-gradient(circle at 25% 70%, rgba(255,255,255,.5) 0 6px, transparent 7px), radial-gradient(circle at 30% 55%, rgba(255,255,255,.4) 0 4px, transparent 5px), linear-gradient(#7FD6F5, #2E9BF0 55%, #1B5FA8); }
.scene-space { background: radial-gradient(circle at 20% 20%, #fff 0 1.5px, transparent 2px), radial-gradient(circle at 70% 35%, #fff 0 1.5px, transparent 2px), radial-gradient(circle at 45% 75%, #fff 0 1px, transparent 2px), radial-gradient(circle at 85% 80%, #FFB3D1 0 22px, transparent 23px), linear-gradient(#1B1446, #3A2A8A 60%, #6A3FB0); }
.scene-castle { background: linear-gradient(transparent 55%, #8CC66F 55%), repeating-linear-gradient(90deg, #CFC6E8 0 20px, transparent 20px 32px) 0 32% / 100% 14px no-repeat, linear-gradient(transparent 38%, #B9AFDB 38% 56%, transparent 56%), linear-gradient(#FFD6A8, #FFB3C7); }
.scene-pumpkins { background: radial-gradient(ellipse at 25% 85%, #FF8A1F 0 22px, transparent 23px), radial-gradient(ellipse at 70% 90%, #FF9E3D 0 28px, transparent 29px), radial-gradient(circle at 80% 15%, #FFF3B0 0 22px, transparent 23px), linear-gradient(#2B1B4A, #5A3478 60%, #3F6F34 60%); }
.scene-haunted { background: radial-gradient(circle at 75% 18%, #FFF3B0 0 26px, transparent 27px), linear-gradient(transparent 40%, #3A2A5A 40% 75%, #2B1B4A 75%), linear-gradient(#4B2A6B, #8A4FBF); }

/* ---------- misc ---------- */
.empty { text-align: center; padding: 24px 12px; font-weight: 800; opacity: .8; }
.list { display: flex; flex-direction: column; gap: 10px; }
.sep { height: 2px; background: var(--cream-line); border-radius: 2px; margin: 4px 0; }
.spinner { width: 42px; height: 42px; border-radius: 50%; border: 5px solid rgba(255,255,255,.5); border-top-color: var(--wood); animation: spin .8s linear infinite; margin: 40px auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.reader-text { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 19px; line-height: 1.6; color: #2A1A10; }
.reader-text img { max-width: 100%; height: auto; display: block; margin: 12px auto; }

/* Tap-to-claim */
.claim-btn { --a: #FFE27A; --b: #F5A700; --edge: #A86A12; --shadow: #7A4A08; --text-edge: #7A4A08; animation: claim-glow 1.6s ease-in-out infinite; flex: none; }
.claim-card { background: linear-gradient(#FFF6D6, #FFE9A8); }
.claim-gift { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 30px; animation: wobble 2.4s ease-in-out infinite; }
@keyframes claim-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255,200,40,0)); } 50% { filter: drop-shadow(0 0 8px rgba(255,200,40,.95)); } }