/* Chrome follows light/dark. The paper (sheet, ink, blank) is fixed in
   engine.js and never inverts: crayon colours are chosen against warm white. */
:root {
  --tint: #F2733F;
  --bg: #F2F2F7;
  --card: #FFFFFF;
  --fg: #111114;
  --fg2: #6E6E73;
  --fg3: #9A9AA0;
  --line: rgba(0,0,0,0.08);
  --material: rgba(255,255,255,0.78);
  --shadow: 0 2px 10px rgba(0,0,0,0.12);
  --done: #2F9E44;
  --font: ui-rounded, -apple-system, "SF Pro Rounded", system-ui, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --card: #1C1C1E;
    --fg: #F5F5F7;
    --fg2: #A1A1A6;
    --fg3: #6E6E73;
    --line: rgba(255,255,255,0.10);
    --material: rgba(44,44,46,0.82);
    --shadow: 0 2px 12px rgba(0,0,0,0.5);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font-family: var(--font); overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button { font: inherit; color: inherit; }
#app { min-height: 100%; }

/* ---------- gallery ---------- */
.gallery-header { padding: calc(env(safe-area-inset-top) + 18px) 20px 6px; }
.gallery-header h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.5px; }
.summary { margin: 8px 0 0; font-size: 15px; font-weight: 600; color: var(--fg2); }
.summary::before { content: "🎨 "; }
.grid {
  display: grid; gap: 16px; padding: 12px 16px calc(env(safe-area-inset-bottom) + 28px);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.card {
  display: block; padding: 9px; border-radius: 20px; background: var(--card);
  border: 1px solid var(--line); text-decoration: none; color: inherit; text-align: left; cursor: pointer;
}
.card:active { transform: scale(0.98); }
.card-art { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid rgba(42,46,53,0.15); background: #FFFCF4; padding-bottom: 100%; height: 0; }
.card-art .thumb { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }
.star { position: absolute; top: 7px; right: 7px; line-height: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
.card-body { padding: 10px 4px 2px; }
.card-title { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row { display: flex; align-items: center; gap: 7px; margin-top: 7px; }
.bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(127,127,127,0.25); overflow: hidden; }
.bar > div { height: 100%; background: var(--tint); border-radius: 3px; }
.bar.done > div { background: var(--done); }
.pct { font-size: 12px; font-weight: 600; color: var(--fg2); font-variant-numeric: tabular-nums; }
.card-sub { margin-top: 6px; font-size: 11px; font-weight: 500; color: var(--fg3); }
.backup-tile { width: 100%; }
.backup-art {
  position: relative; padding-bottom: 100%; height: 0; border-radius: 14px;
  background: rgba(242,115,63,0.12); color: var(--tint); border: 2px dashed rgba(242,115,63,0.35); font-size: 15px; font-weight: 700;
}
.backup-art > span { position: absolute; left: 0; right: 0; text-align: center; }
.backup-icon { top: 30%; line-height: 0; }
.backup-label { top: 58%; }

/* ---------- coloring screen ---------- */
/* Pinned to the visual viewport. On iOS 100vh is the *largest* viewport and
   overshoots by the status bar in a home-screen app, clipping the crayons. */
.coloring {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg);
}
.color-header { display: flex; align-items: center; gap: 12px; padding: 6px 14px 0; }
.back {
  display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 14px 0 10px; border-radius: 24px;
  background: var(--material); box-shadow: var(--shadow); color: inherit; text-decoration: none; font-weight: 600; font-size: 17px;
}
.title-block { margin-left: auto; text-align: right; }
.page-title { font-size: 18px; font-weight: 700; }
.progress-label { font-size: 13px; font-weight: 500; color: var(--fg2); font-variant-numeric: tabular-nums; }

.canvas {
  position: relative; flex: 1; min-height: 0; margin: 6px 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  /* Our own pinch/pan; also stops Safari's double-tap zoom from eating taps. */
  touch-action: none;
}
.sheet {
  position: relative; border-radius: 18px; overflow: hidden; background: #FFFCF4;
  box-shadow: 0 4px 10px rgba(0,0,0,0.16), 0 0 0 1px rgba(42,46,53,0.18);
  transform-origin: center center; will-change: transform;
}
.sheet-svg { display: block; width: 100%; height: 100%; }
.region { transition: fill 0.2s ease-in-out, stroke 0.2s ease-in-out; transform-box: fill-box; transform-origin: center; }
.region.hinted { stroke: #F5A623 !important; stroke-width: 5; }
.region.shake { animation: shake 0.36s linear; }
.region.flash { animation: flash 0.4s ease-out; }
.region.shake.flash { animation: shake 0.36s linear, flash 0.4s ease-out; }
@keyframes shake {
  0% { transform: translateX(0); } 16% { transform: translateX(20px); } 33% { transform: translateX(-20px); }
  50% { transform: translateX(20px); } 66% { transform: translateX(-20px); } 83% { transform: translateX(20px); } 100% { transform: translateX(0); }
}
@keyframes flash {
  0% { fill: #FBF7EC; } 25% { fill: #ED9A98; } 100% { fill: #FBF7EC; }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes flash { 0% { fill: #FBF7EC; } 25% { fill: #EA8A88; } 100% { fill: #FBF7EC; } }
}
.num { paint-order: stroke; stroke: rgba(255,252,244,0.82); stroke-linejoin: round; font-family: var(--font); transition: opacity 0.25s; }
.num-g { transition: opacity 0.25s ease-out; }
.fit { position: absolute; top: 10px; right: 10px; }

.toolbar { display: flex; justify-content: center; gap: 14px; padding: 8px 0; }
.tool {
  width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--line); background: var(--material);
  box-shadow: var(--shadow); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.tool:disabled { opacity: 0.35; }
.tool:active:not(:disabled) { transform: scale(0.94); }

/* ---------- crayons ---------- */
.crayons {
  display: flex; gap: 12px; overflow-x: auto; overflow-y: visible; padding: 14px 18px 8px; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.crayons::-webkit-scrollbar { display: none; }
.crayon {
  position: relative; flex: 0 0 62px; width: 62px; height: 104px; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.14));
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), opacity 0.2s, filter 0.2s;
}
.crayon .tip {
  height: 23px; background: var(--c); -webkit-clip-path: polygon(50% 0, 72% 100%, 28% 100%); clip-path: polygon(50% 0, 72% 100%, 28% 100%);
}
.crayon .barrel {
  position: relative; flex: 1; background: var(--c); border-radius: 4px 4px 14px 14px;
  box-shadow: inset 0 0 0 1px rgba(42,46,53,0.28); display: flex; align-items: center; justify-content: center;
}
.crayon .band { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: rgba(255,255,255,0.2); border-radius: 4px 4px 0 0; }
.crayon .n { font-size: 27px; font-weight: 900; color: var(--ink); text-shadow: 0 0 1px rgba(0,0,0,0.25); }
.crayon.selected { transform: translateY(-10px) scale(1.09); filter: drop-shadow(0 6px 9px rgba(0,0,0,0.28)); }
.crayon.selected .barrel { box-shadow: inset 0 0 0 3px var(--fg); }
.crayon.complete:not(.selected) { opacity: 0.5; }
.crayon .tick { position: absolute; top: 19px; right: -6px; line-height: 0; display: none; background: #fff; border-radius: 50%; }
.crayon.complete .tick { display: block; }
@media (prefers-reduced-motion: reduce) { .crayon { transition: none; } }

/* ---------- dialogs ---------- */
.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; padding: 20px; }
.sheet-dialog {
  border: 0; border-radius: 22px; padding: 22px 22px 16px; width: 100%; max-width: 380px; background: var(--card); color: var(--fg);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.sheet-dialog h2 { margin: 0 0 8px; font-size: 20px; font-weight: 800; }
.sheet-dialog p { margin: 0 0 16px; font-size: 15px; color: var(--fg2); line-height: 1.4; }
.sheet-dialog button, .celebration button {
  display: block; width: 100%; min-height: 52px; margin-top: 10px; border: 0; border-radius: 26px;
  font-size: 17px; font-weight: 700; background: rgba(127,127,127,0.15); cursor: pointer;
}
.sheet-dialog button:active, .celebration button:active { transform: scale(0.98); }
.sheet-dialog .primary, .celebration .primary { background: var(--tint); color: #fff; }
.sheet-dialog .danger { background: #E5484D; color: #fff; }
.sheet-dialog .quiet { background: none; color: var(--fg2); }
.status { min-height: 1.2em; margin: 10px 0 0 !important; font-size: 14px; text-align: center; }

/* ---------- celebration ---------- */
.celebration {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s;
}
.celebration.in { opacity: 1; }
.card-pop {
  position: relative; padding: 34px; border-radius: 28px; background: var(--material); text-align: center; width: min(86vw, 340px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.3); transform: scale(0.85); transition: transform 0.5s cubic-bezier(.34,1.56,.64,1);
}
.celebration.in .card-pop { transform: scale(1); }
.big-star svg { width: 74px; height: 74px; }
.card-pop h2 { margin: 12px 0 4px; font-size: 30px; font-weight: 900; }
.card-pop p { margin: 0 0 14px; font-size: 19px; color: var(--fg2); }
.confetti { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; }
.confetti i {
  position: absolute; left: var(--x); top: -40px; width: var(--s); height: calc(var(--s) * 1.6); border-radius: 2px;
  animation: fall 1.9s ease-in var(--d) forwards;
}
@keyframes fall { to { transform: translateY(110vh) rotate(var(--spin)); } }
@media (prefers-reduced-motion: reduce) {
  .celebration, .card-pop, .region { transition: none; }
  .region.shake { animation: none; }
}

.empty { padding: 60px 24px; text-align: center; color: var(--fg2); }