:root{
  --bg:#f5f4f8; --panel:#ffffff; --ink:#2a2a30; --muted:#9aa0a6;
  --line:#eceaf2; --accent:#7c5cff; --done:#3bbf73; --radius:14px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;overscroll-behavior:none;
}
#app{height:100%}
.screen{height:100%;display:flex;flex-direction:column}

/* ---- top bar ---- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:calc(10px + var(--safe-top)) 14px 10px;
  background:var(--panel);border-bottom:1px solid var(--line);
  flex:0 0 auto;
}
.topbar .title{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.topbar .title b{font-size:15px}
.topbar .title .pct{font-size:12px;color:var(--accent);font-weight:700}
.lib-title{font-size:18px}
.count{color:var(--accent);font-weight:700;font-size:14px}
.iconbtn{
  border:none;background:#f1f0f6;color:var(--ink);
  font-size:13px;font-weight:600;padding:9px 12px;border-radius:10px;cursor:pointer;
  min-height:40px;
}
.iconbtn:active{background:#e6e4ef}
.actions{display:flex;gap:6px;align-items:center}
.iconbtn.reset,.iconbtn.sound,.iconbtn.stickers{font-size:18px;line-height:1;padding:9px 11px;min-width:40px}

/* ---- progress bar ---- */
.progress{height:6px;background:var(--line);flex:0 0 auto}
.progress>i{display:block;height:100%;width:0;background:var(--accent);transition:width .18s ease}

/* ---- coloring canvas ---- */
.canvas-wrap{flex:1 1 auto;position:relative;overflow:hidden;background:#fff;touch-action:none;overscroll-behavior:none}
.canvas-wrap canvas{display:block;touch-action:none}
.canvas-wrap.shake{animation:shake .25s}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}

/* ---- floating tools (brush size / magic fill) ---- */
.tools{
  position:absolute;right:10px;bottom:10px;z-index:2;
  display:flex;flex-direction:row;gap:8px;align-items:center;
}
.tools.hidden{display:none}
.toolbtn{
  width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  background:var(--panel);box-shadow:0 2px 10px rgba(40,30,80,.22);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;padding:0;
}
.toolbtn:active{transform:scale(.92)}
.toolbtn.magic:disabled{opacity:.35;cursor:default}
.toolbtn.brush .dot{
  display:block;border-radius:50%;background:var(--accent);
  transition:width .15s,height .15s;
}
.toolbtn.brush[data-size="1"] .dot{width:6px;height:6px}
.toolbtn.brush[data-size="2"] .dot{width:11px;height:11px}
.toolbtn.brush[data-size="3"] .dot{width:16px;height:16px}
.toolbtn.brush[data-size="4"] .dot{width:21px;height:21px}
.toolbtn.brush[data-size="5"] .dot{width:26px;height:26px}
.toolbtn.brush[data-size="6"] .dot{width:30px;height:30px}
/* pop-out slider panel: opens above the buttons, out of the picture's way;
   auto-hidden again the moment a paint stroke starts */
.brush-pop{
  position:absolute;right:0;bottom:56px;
  height:46px;border-radius:23px;padding:0 18px;
  background:var(--panel);box-shadow:0 2px 10px rgba(40,30,80,.22);
  display:flex;align-items:center;
  width:min(330px,calc(100vw - 40px));box-sizing:border-box;
  touch-action:none; /* slider owns its touches; a drag here must not paint */
}
.brush-pop.hidden{display:none}
.brush-range{
  width:100%;margin:0;accent-color:var(--accent);cursor:pointer;
  touch-action:none;
}
/* brush footprint ring following the finger while painting */
.brush-cursor{
  position:absolute;z-index:1;display:none;pointer-events:none;
  border:2px solid var(--accent);border-radius:50%;
  background:rgba(124,92,255,.12);box-sizing:border-box;
}
.brush-cursor.on{display:block}

/* ---- palette ---- */
.palette{
  flex:0 0 auto;display:flex;gap:10px;padding:12px 12px calc(12px + var(--safe-bottom));
  overflow-x:auto;background:var(--panel);border-top:1px solid var(--line);
  -webkit-overflow-scrolling:touch;
}
.swatch{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;font-size:15px;font-weight:800;border:3px solid transparent;cursor:pointer;
  text-shadow:0 1px 2px rgba(0,0,0,.35);position:relative;
}
.swatch .cnt{font-size:9px;font-weight:700;opacity:.95}
.swatch.on{border-color:var(--ink);transform:scale(1.12)}
.swatch.fin{filter:grayscale(.7) opacity(.5)}
.swatch .check{font-size:18px}
/* a finished color does a happy little bounce before settling to "done" grey */
.swatch.cele{animation:swatch-bounce .6s ease;z-index:1}
@keyframes swatch-bounce{
  0%{transform:scale(1);filter:none}
  30%{transform:scale(1.4) rotate(-9deg);filter:drop-shadow(0 0 6px #ffd23f)}
  55%{transform:scale(1.12) rotate(7deg);filter:none}
  80%{transform:scale(1.22) rotate(-3deg)}
  100%{transform:scale(1)}
}

/* ---- library grid ---- */
.grid{
  flex:1 1 auto;overflow-y:auto;display:grid;
  grid-template-columns:repeat(2,1fr);gap:14px;
  padding:14px 14px calc(14px + var(--safe-bottom));
}
@media(min-width:560px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:820px){.grid{grid-template-columns:repeat(4,1fr)}}
.thumb{
  position:relative;border:none;background:var(--panel);border-radius:var(--radius);
  padding:10px;box-shadow:0 2px 10px rgba(40,30,80,.06);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.thumb:active{transform:scale(.98)}
.thumb canvas{
  width:100%;aspect-ratio:1;background:#fff;border-radius:10px;
  image-rendering:pixelated;
}
.thumb .tlabel{font-size:13px;font-weight:600;color:var(--ink)}
.badge{
  position:absolute;top:8px;right:8px;font-size:10px;font-weight:800;color:#fff;
  background:var(--accent);border-radius:10px;padding:3px 7px;z-index:1;
}
.badge.done{background:var(--done)}
.badge.new{background:#aeb2bd}

/* ---- sticker book ---- */
.sticker{cursor:default}
.sticker:active{transform:none}
.sticker.earned{
  background:linear-gradient(150deg,#fff7df,#fffdf7);
  box-shadow:0 3px 14px rgba(255,180,40,.4),0 0 0 2px #ffd23f inset;
}
.sticker .locked-face{
  width:100%;aspect-ratio:1;border-radius:10px;background:#ece9f2;
  display:flex;align-items:center;justify-content:center;
  font-size:44px;font-weight:800;color:#c4bfd2;
}
.sticker.locked .tlabel{color:#b6b2c2;letter-spacing:2px}

/* ---- completion overlay ---- */
.complete-overlay,.confirm-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(20,16,40,.45);backdrop-filter:blur(2px);z-index:5;
}
.confirm-overlay{z-index:7}
.complete-overlay.hidden,.confirm-overlay.hidden{display:none}
.complete-card{
  background:var(--panel);border-radius:20px;padding:26px 30px;text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.3);max-width:80%;
}
.complete-card h2{margin:6px 0 4px;font-size:24px;color:var(--accent)}
.complete-card p{margin:0 0 16px;color:var(--muted)}
.complete-emblem{
  width:54px;height:54px;margin:0 auto 8px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffe98a, #ffd23f);
}
.primary{
  border:none;background:var(--accent);color:#fff;font-weight:700;font-size:15px;
  padding:12px 22px;border-radius:12px;cursor:pointer;
}
.primary:active{filter:brightness(.94)}
.card-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.ghost{
  border:none;background:#f1f0f6;color:var(--ink);font-weight:700;font-size:15px;
  padding:12px 20px;border-radius:12px;cursor:pointer;
}
.ghost:active{background:#e6e4ef}
.hidden{display:none}

.tl-note{margin:10px 0 0;color:var(--muted);font-size:14px;text-align:center}
.tl-note.hidden{display:none}
.timelapse-overlay{
  position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;
  background:rgba(20,18,30,.78);backdrop-filter:blur(2px);
}
.timelapse-overlay .tl-canvas{
  background:#fff;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.35);
  image-rendering:pixelated;
}
.timelapse-overlay .tl-controls{display:flex;gap:10px}
.timelapse-overlay .tl-controls.hidden{display:none}

.coloring{position:relative}
.action-bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:10px 12px}
.action-bar.hidden{display:none}
.palette.hidden{display:none}
.done-toast{
  position:absolute;top:54px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-weight:700;font-size:16px;
  padding:8px 18px;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.18);
  z-index:40;transition:opacity .4s;pointer-events:none;
}
.done-toast.hidden{opacity:0}

.canvas-wrap{position:relative}
.sparkle-layer{position:absolute;inset:0;pointer-events:none}
.swatch{position:relative}
.swatch .spk-mark{
  position:absolute;top:1px;right:3px;font-size:11px;color:#fff;line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.45);pointer-events:none;
}