:root { --player: #5f27cd; --radius: 22px;
  --bg: linear-gradient(160deg, #fdf2f8 0%, #eef2ff 50%, #ecfeff 100%); --bar: rgba(255, 255, 255, .88);
  --card: #fff; --ink: #1f2937; --muted: #6b7280; --chip: #eceef2; --chip-hover: #dfe3ea; --line: #cbd5e1; --well: #f1f5f9;
  --shadow: 0 8px 24px rgba(31, 41, 55, .10); --scrim: rgba(17, 24, 39, .45); --toast-bg: #111827; --toast-ink: #fff;
  --glow: #fde68a; --glow-ink: #1f2937; --highlight: #fef3c7; --highlight-border: #f59e0b;
  --good-bg: #d1fae5; --good-ink: #0f9f7a; --bad-bg: #fee2e2; --info-bg: #e0f2fe; --purple-bg: #ede9fe; --purple-border: #a78bfa;
  --badge-bg: #eef2ff; --badge-ink: #4338ca; --sticker-got: linear-gradient(160deg, #fff7ed, #fef3c7);
  --sky: linear-gradient(180deg, #bae6fd, #e0f2fe); --meadow: linear-gradient(180deg, #e0f2fe 0%, #bbf7d0 100%); --grid-line: #94a3b8; }
body.dark { color-scheme: dark;
  --bg: linear-gradient(160deg, #1e1b3a 0%, #0f172a 55%, #0b2a3a 100%); --bar: rgba(15, 23, 42, .88);
  --card: #1e293b; --ink: #e5e7eb; --muted: #9ca3af; --chip: #334155; --chip-hover: #475569; --line: #475569; --well: #0f172a;
  --shadow: 0 8px 24px rgba(0, 0, 0, .35); --scrim: rgba(0, 0, 0, .6); --toast-bg: #f1f5f9; --toast-ink: #111827;
  --glow: #facc15; --glow-ink: #1f2937; --highlight: #78350f; --highlight-border: #fbbf24;
  --good-bg: #064e3b; --good-ink: #34d399; --bad-bg: #7f1d1d; --info-bg: #0c4a6e; --purple-bg: #3b2f6b; --purple-border: #8b5cf6;
  --badge-bg: #312e81; --badge-ink: #c7d2fe; --sticker-got: linear-gradient(160deg, #4a3413, #5b3d10);
  --sky: linear-gradient(180deg, #0c4a6e, #082f49); --meadow: linear-gradient(180deg, #0c4a6e 0%, #14532d 100%); --grid-line: #475569; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: "Segoe UI", "Trebuchet MS", system-ui, sans-serif; font-size: 20px; color: var(--ink); background: var(--bg); min-height: 100vh; -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; font: inherit; }
button { font: inherit; cursor: pointer; color: inherit; }
h1, h2, h3 { margin: 0.4em 0; }
a { color: var(--player); }

/* top bar */
#topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--bar); backdrop-filter: blur(8px); box-shadow: 0 2px 12px rgba(0, 0, 0, .06); }
#tbTitle { font-weight: 800; font-size: 24px; flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-right { display: flex; gap: 8px; }
.tb-btn { border: 0; background: var(--chip); border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 20px; min-height: 48px; white-space: nowrap; }
.tb-btn:hover { background: var(--chip-hover); }
#playerBtn { background: var(--player); color: #fff; }
#app { padding: 20px; max-width: 1240px; margin: 0 auto; }

/* buttons & layout */
.btn { border: 0; border-radius: 16px; padding: 12px 22px; font-weight: 800; font-size: 20px; background: var(--player); color: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .18); min-height: 52px; transition: transform .06s; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.btn.big { font-size: 24px; padding: 14px 28px; min-height: 60px; }
.btn.small { font-size: 17px; padding: 8px 14px; min-height: 42px; border-radius: 12px; }
.btn.ghost { background: var(--chip); color: var(--ink); }
.btn.danger { background: #ee5253; }
.btn.go { background: #10ac84; }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.row { display: flex; align-items: center; flex-wrap: wrap; }
.gap { gap: 12px; }
.col { display: flex; flex-direction: column; }
.grow { flex: 1; }
.center { text-align: center; }
.hint { color: var(--muted); font-size: 18px; }
.big-msg { font-size: 28px; font-weight: 800; text-align: center; margin: 10px 0; }
body.short .big-msg { font-size: 22px; margin: 6px 0; } body.short .act-head { margin-bottom: 8px; } body.short #app { padding: 10px 20px; }
.stars-line { font-size: 22px; font-weight: 800; }
.panel { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.act-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab { border: 0; background: var(--chip); border-radius: 999px; padding: 10px 18px; font-weight: 800; font-size: 19px; min-height: 48px; }
.tab.on { background: var(--player); color: #fff; }
.goal-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 18px; }
.goal-list li { display: flex; gap: 8px; align-items: center; color: var(--muted); }
.goal-list li.done { color: var(--good-ink); font-weight: 700; }
.shake { animation: shake .4s; }
@keyframes shake { 20% { transform: translateX(-8px) } 40% { transform: translateX(8px) } 60% { transform: translateX(-6px) } 80% { transform: translateX(6px) } }
.wiggle { animation: wiggle .5s; }
@keyframes wiggle { 25% { transform: rotate(-12deg) } 75% { transform: rotate(12deg) } }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--card); box-shadow: 0 0 0 2px var(--line); padding: 0; }
.swatch.sel { box-shadow: 0 0 0 4px var(--ink); }

/* profiles */
.hero-title { text-align: center; font-size: 44px; margin: 20px 0 6px; }
.hero-sub { text-align: center; font-size: 24px; color: var(--muted); margin: 0 0 24px; }
.profile-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.profile-card { position: relative; --c: var(--player); }
.profile-pick, .profile-card.add { width: 210px; min-height: 230px; border: 0; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); border-top: 10px solid var(--c); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; transition: transform .1s; }
.profile-card.add { border-top-color: var(--line); color: var(--muted); }
.profile-pick:hover, .profile-card.add:hover { transform: translateY(-4px); }
.profile-avatar { font-size: 72px; line-height: 1; }
.profile-name { font-size: 24px; font-weight: 800; }
.profile-stars { color: var(--muted); font-weight: 700; }
.profile-edit { position: absolute; top: 14px; right: 6px; border: 0; background: transparent; font-size: 22px; }
.grownup-link { text-align: center; margin-top: 40px; font-size: 16px; }
.grownup-link a { color: var(--muted); }
.form-card { max-width: 800px; margin: 0 auto; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.lbl { font-weight: 800; font-size: 22px; margin-top: 8px; }
.name-input { font-size: 30px; padding: 12px 16px; border: 3px solid var(--line); background: var(--card); color: var(--ink); border-radius: 16px; width: 100%; }
.name-input:focus { outline: none; border-color: var(--player); }
.avatar-grid { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; }
.avatar-opt { font-size: 34px; border: 3px solid transparent; background: var(--chip); border-radius: 14px; padding: 6px 0; line-height: 1.2; min-width: 0; overflow: hidden; }
.avatar-opt.sel { border-color: var(--player); background: var(--card); }
.color-row { display: flex; gap: 10px; flex-wrap: wrap; }
.color-opt { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--card); box-shadow: 0 0 0 2px var(--line); }
.color-opt.sel { box-shadow: 0 0 0 4px var(--ink); }

/* settings & lock */
#lockBtn.on { background: var(--glow); color: var(--glow-ink); }
.settings { max-width: 640px; text-align: left; }
.settings .dialog-emoji, .settings .dialog-msg { text-align: center; }
.set-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 4px; }
.set-label { font-weight: 800; min-width: 110px; }
.set-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.settings .hint { margin: 0 0 8px; font-size: 16px; }
.settings .dialog-btns { margin-top: 16px; }
.hold-bar { height: 14px; border-radius: 7px; background: var(--chip); margin: 14px auto 0; max-width: 360px; overflow: hidden; }
.hold-fill { height: 100%; width: 0%; background: #10ac84; transition: width .05s linear; }

/* overlay, dialogs, toasts */
#overlay { position: fixed; inset: 0; z-index: 100; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 20px; }
#overlay[hidden] { display: none; }
.dialog, .celebrate { background: var(--card); border-radius: 28px; padding: 28px 32px; max-width: 560px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); animation: popin .25s; }
@keyframes popin { from { transform: scale(.7); opacity: 0; } }
.dialog-emoji { font-size: 60px; }
.dialog-msg { font-size: 24px; font-weight: 700; margin: 10px 0 20px; }
.dialog-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.celebrate-star { font-size: 96px; animation: spin 1s ease-out; }
@keyframes spin { from { transform: rotate(-360deg) scale(.2); } }
.celebrate-title { font-size: 32px; font-weight: 900; }
.celebrate-sub { font-size: 22px; color: var(--muted); margin: 6px 0 18px; }
.toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 20px); background: var(--toast-bg); color: var(--toast-ink); padding: 12px 22px; border-radius: 999px; font-weight: 700; opacity: 0; transition: .3s; z-index: 200; pointer-events: none; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 150; }

/* home & sticker book */
.home-hi { font-size: 34px; font-weight: 900; margin: 6px 0 16px; }
.home-group { font-size: 19px; font-weight: 900; color: var(--muted); margin: 26px 0 10px; text-transform: uppercase; letter-spacing: 1px; }
.act-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.act-card { border: 0; text-align: left; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; display: flex; gap: 14px; align-items: center; transition: transform .1s; min-height: 124px; }
.act-card:hover { transform: translateY(-4px); }
.act-emoji { font-size: 56px; line-height: 1; }
.act-title { font-size: 23px; font-weight: 800; }
.act-desc { color: var(--muted); font-size: 17px; }
.act-meta { display: flex; gap: 8px; margin-top: 6px; font-size: 15px; font-weight: 700; flex-wrap: wrap; }
.badge { background: var(--badge-bg); color: var(--badge-ink); border-radius: 999px; padding: 2px 10px; }
.shelf { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.sticker { width: 96px; height: 110px; border-radius: 18px; background: var(--chip); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 48px; color: var(--muted); }
.sticker small { font-size: 14px; font-weight: 700; margin-top: 4px; }
.sticker.got { background: var(--sticker-got); box-shadow: var(--shadow); color: var(--ink); }

@media (max-width: 760px) {
  body { font-size: 18px; }
  #app { padding: 12px; }
  #tbTitle { font-size: 18px; }
  .tb-btn { padding: 8px 12px; font-size: 18px; }
  #homeBtn span { display: none; }
  .avatar-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .avatar-opt { font-size: 26px; }
  .hero-title { font-size: 34px; }
}