/* Crisp UI components (art: Anipixels Crisp Kit, pink + violet themes, assets/crisp/ui).
   Buttons use the kit's own normal / pressed / disabled art; press feedback is immediate,
   release adds a short bounce. Touch targets are 48px or larger. */

@font-face {
  font-family: 'Fredoka';
  src: url('../assets/fonts/fredoka-latin-wght.woff2?v=3.0-s8') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --pink-top: #ff93cd; --pink-bot: #f465ae; --pink-lip: #c7408a; --pink-deep: #9c2c6b; --pink-hi: #ffc4e4;
  --violet-top: #b59bff; --violet-bot: #8a6bf6; --violet-lip: #6446cf; --violet-deep: #4b32a6; --violet-hi: #d6c8ff;
  --ink: #2b3245; --muted: #7c869e;
  --ui: 'Fredoka', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --press: 90ms; --bounce: 170ms;
}

.cr { font-family: var(--ui); font-weight: 600; color: var(--ink); -webkit-tap-highlight-color: transparent; }
:where(.cr) :where(button) { font: inherit; color: inherit; border: 0; padding: 0; background: none; cursor: pointer; touch-action: manipulation; }   /* zero specificity: components win */
.cr button:focus-visible { outline: 3px solid var(--violet-bot); outline-offset: 3px; border-radius: 16px; }

/* ---- press feedback (all buttons) */
.cr-btn { transition: transform var(--press) ease-out, filter var(--press); will-change: transform; }
.cr-btn.is-down { transform: scale(0.93) translateY(2px); }
.cr-btn.is-bounce { animation: cr-bounce var(--bounce) ease-out; }
@keyframes cr-bounce { 0% { transform: scale(0.93) translateY(2px); } 55% { transform: scale(1.06); } 100% { transform: scale(1); } }
.cr-btn[disabled], .cr-btn.is-disabled { cursor: default; filter: saturate(0.6); }
@media (prefers-reduced-motion: reduce) {
  .cr-btn, .cr-btn.is-down { transition: none; transform: none; }
  .cr-btn.is-bounce { animation: none; }
}

/* ---- round buttons: tools (pink) and navigation (violet). Art is 64x70 (lip below). */
.cr-round {
  position: relative; width: 64px; height: 70px; flex: 0 0 auto;
  background: url('../assets/crisp/ui/pink-button_round_normal.svg?v=3.0-s8') center / 100% 100% no-repeat;
  display: grid; place-items: center; padding-bottom: 6px;
}
.cr-round.is-down { background-image: url('../assets/crisp/ui/pink-button_round_pressed.svg?v=3.0-s8'); }
.cr-round[disabled] { background-image: url('../assets/crisp/ui/pink-button_round_disabled.svg?v=3.0-s8'); }
.cr-round.violet { background-image: url('../assets/crisp/ui/violet-button_round_normal.svg?v=3.0-s8'); }
.cr-round.violet.is-down { background-image: url('../assets/crisp/ui/violet-button_round_pressed.svg?v=3.0-s8'); }
.cr-round.violet[disabled] { background-image: url('../assets/crisp/ui/violet-button_round_disabled.svg?v=3.0-s8'); }
.cr-round.small { width: 50px; height: 55px; padding-bottom: 5px; }
.cr-round img.icon { width: 46%; height: auto; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.18)); }
.cr-round.small img.icon { width: 44%; }
/* selected tool: lifted, white ring, check badge (not colour alone) */
.cr-round.is-active { transform: translateY(-4px); }
.cr-round.is-active::after {
  content: ''; position: absolute; inset: -5px -5px 1px -5px; border-radius: 50%;
  border: 4px solid #fff; box-shadow: 0 0 0 3px var(--pink-lip);
}
.cr-badge-check {
  position: absolute; right: -4px; top: -4px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff url('../assets/crisp/icons/check.svg?v=3.0-s8') center / 70% no-repeat;
  box-shadow: 0 2px 0 var(--pink-lip); filter: invert(0);
}
.cr-badge-check { background-color: var(--pink-lip); }

/* placeholder label for tools that have no artwork yet */
.cr-ph-label {
  font-size: 12px; font-weight: 700; color: #fff; line-height: 1.05; text-align: center;
  padding: 0 4px; text-shadow: 0 1px 0 var(--pink-lip); pointer-events: none;
}
.cr-ph-label::before { content: 'art to come'; display: block; font-size: 7px; letter-spacing: .03em; opacity: .85; }

/* ---- square option tiles (colours, shapes, stickers). 9-slice art 64x64 */
.cr-tile {
  position: relative; width: 68px; height: 68px; flex: 0 0 auto;
  border-style: solid; border-width: 20px 20px 22px 20px;
  border-image: url('../assets/crisp/ui/pink-button_square_normal.svg?v=3.0-s8') 20 20 22 20 fill / 20px 20px 22px 20px;
  display: grid; place-items: center; margin: 0;
}
.cr-tile.is-down { border-image-source: url('../assets/crisp/ui/pink-button_square_pressed.svg?v=3.0-s8'); }
.cr-tile > .face {
  position: absolute; inset: -14px -14px -12px -14px; display: grid; place-items: center; pointer-events: none;
}
.cr-tile > .face img, .cr-tile > .face canvas { max-width: 100%; max-height: 100%; display: block; }
.cr-tile .swatch {
  width: 40px; height: 40px; border-radius: 50%; background: var(--c);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.35), 0 0 0 3px #fff;
}
.cr-tile.is-active { transform: translateY(-4px); }
.cr-tile.is-active::after {
  content: ''; position: absolute; inset: -24px -24px -26px -24px; border-radius: 22px;
  border: 4px solid #fff; box-shadow: 0 0 0 3px var(--violet-lip);
}

/* ---- pill: primary action (done). 9-slice sideways only, 56px tall */
.cr-pill {
  height: 56px; min-width: 120px; padding: 0 8px; flex: 0 0 auto;
  border-style: solid; border-width: 0 28px; border-image: url('../assets/crisp/ui/pink-button_pill_normal.svg?v=3.0-s8') 0 28 fill / 0 28px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding-bottom: 6px;
  color: #fff; font-size: 20px; font-weight: 700; text-shadow: 0 2px 0 var(--pink-lip);
}
.cr-pill.is-down { border-image-source: url('../assets/crisp/ui/pink-button_pill_pressed.svg?v=3.0-s8'); padding-bottom: 2px; }
.cr-pill[disabled] { border-image-source: url('../assets/crisp/ui/pink-button_pill_disabled.svg?v=3.0-s8'); text-shadow: none; }
.cr-pill img.icon { width: 28px; height: 28px; }
.cr-pill.is-ready { animation: cr-nudge 1.4s ease-in-out infinite; }
@keyframes cr-nudge { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.08); } 90% { transform: scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .cr-pill.is-ready { animation: none; } }

/* ---- floating tray: violet accent panel (9-slice 96x96) */
.cr-tray {
  border-style: solid; border-width: 20px 20px 24px 20px;
  border-image: url('../assets/crisp/ui/violet-panel_accent.svg?v=3.0-s8') 20 20 24 20 fill / 20px 20px 24px 20px;
}
.cr-scroll {
  display: flex; gap: 12px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x proximity;
  padding: 10px 6px 12px; margin: -10px -6px -12px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.cr-scroll::-webkit-scrollbar { display: none; }
.cr-scroll > * { scroll-snap-align: center; }

/* ---- stage progress: track + fill (sideways 3-slice), dots */
.cr-progress {
  height: 24px; border-style: solid; border-width: 0 12px;
  border-image: url('../assets/crisp/ui/pink-progress_track.svg?v=3.0-s8') 0 12 fill / 0 12px; position: relative;
}
.cr-progress > i {
  position: absolute; left: -12px; top: 0; bottom: 0; min-width: 24px; display: block;
  border-style: solid; border-width: 0 12px;
  border-image: url('../assets/crisp/ui/pink-progress_fill.svg?v=3.0-s8') 0 12 fill / 0 12px;
  transition: width 300ms ease-out;
}
.cr-dots { display: flex; gap: 6px; justify-content: center; }
.cr-dots > i { width: 14px; height: 14px; background: url('../assets/crisp/ui/pink-page_dot_off.svg?v=3.0-s8') center / contain no-repeat; }
.cr-dots > i.on { background-image: url('../assets/crisp/ui/pink-page_dot_on.svg?v=3.0-s8'); transform: scale(1.25); }

/* ---- modal sheet (settings) */
.cr-sheet-backdrop { position: fixed; inset: 0; background: rgba(43, 20, 64, .35); display: none; z-index: 30; }
.cr-sheet-backdrop.open { display: grid; place-items: center; }
.cr-modal {
  width: min(340px, calc(100vw - 32px)); min-height: 240px;
  border-style: solid; border-width: 72px 32px 40px 32px;
  border-image: url('../assets/crisp/ui/pink-modal.svg?v=3.0-s8') 72 32 40 32 fill / 72px 32px 40px 32px;
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 4px 0;
}
.cr-modal > .cr-modal-title {
  position: absolute; top: -58px; left: 0; right: 0; height: 40px; display: flex; align-items: center; justify-content: center;
}
.cr-modal > .cr-modal-title img { width: 34px; }
.cr-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.cr-row img.icon-dark { width: 32px; filter: invert(18%) sepia(14%) saturate(900%) hue-rotate(190deg); }
.cr-toggle { width: 64px; height: 36px; background: url('../assets/crisp/ui/pink-toggle_off.svg?v=3.0-s8') center / contain no-repeat; }
.cr-toggle[aria-checked="true"] { background-image: url('../assets/crisp/ui/pink-toggle_on.svg?v=3.0-s8'); }

/* hold-to-confirm for destructive actions: a ring fills while held */
.cr-hold { position: relative; }
.cr-hold > .ring {
  position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(#fff calc(var(--p, 0) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
}