/* ─────────────────────────────────────────────────────────────
   Doodle Cheese — design tokens (v3)
   Aesthetic: hand-drawn marker sketchbook. Pure black on white.
   Wobbly borders, crosshatch fills, handwritten type.
   ───────────────────────────────────────────────────────────── */

:root {
  --ink: #111;
  --ink-soft: rgba(17,17,17,0.72);
  --ink-faint: rgba(17,17,17,0.42);
  --paper: #fafaf7;
  --paper-warm: #f2f0ea;
  --line: #111;

  --hand-display: 'Caveat', 'Gloria Hallelujah', cursive;
  --hand-body: 'Patrick Hand', 'Kalam', 'Caveat', cursive;
  --hand-mono: 'Kalam', 'Patrick Hand', 'Caveat', cursive;

  --dur: 280ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--hand-body);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  min-height: 100svh;
  background: var(--paper);
  overflow-x: hidden;
  /* notebook paper feel — very subtle */
  background-image:
    repeating-linear-gradient(
      transparent 0,
      transparent 31px,
      rgba(17,17,17,0.04) 31px,
      rgba(17,17,17,0.04) 32px
    );
}
::selection { background: var(--ink); color: var(--paper); }

button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
button:disabled { opacity: 0.3; cursor: default; }

.app {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  max-width: 440px; margin: 0 auto;
  background: var(--paper);
  z-index: 2;
}
@media (min-width: 441px) {
  body { background: #2a2a2a; }
  .app { box-shadow: 0 0 0 2px var(--ink), 0 40px 80px rgba(0,0,0,0.4); }
}

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 22px 22px calc(22px + env(safe-area-inset-bottom)) 22px;
  padding-top: calc(22px + env(safe-area-inset-top));
  background: var(--paper);
}
.screen-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ── Type utilities ── */

.hand {
  font-family: var(--hand-display);
  font-weight: 700;
  line-height: 0.95;
}
.scribble-label {
  font-family: var(--hand-mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.note {
  font-family: var(--hand-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ── Wobbly borders via SVG filter — only way to get genuine hand-drawn feel ── */

.wobble {
  position: relative;
  border: 2px solid var(--ink);
  filter: url(#wobble-filter);
}
.wobble-thick { border-width: 3px; }

/* ── Primary button — solid black, white text, wobble ── */
.btn-ink {
  display: block;
  width: 100%;
  padding: 14px 18px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--hand-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 2px solid var(--ink);
  filter: url(#wobble-filter);
  transition: transform 120ms var(--ease);
  position: relative;
}
@media (hover: hover) and (pointer: fine) {
  .btn-ink:hover { transform: translate(-1px, -1px); }
}
.btn-ink:active { transform: translate(1px, 1px); }

.btn-outline {
  display: block;
  width: 100%;
  padding: 12px 18px;
  background: transparent;
  color: var(--ink);
  font-family: var(--hand-display);
  font-size: 18px;
  font-weight: 700;
  border: 2px solid var(--ink);
  filter: url(#wobble-filter);
  transition: background var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .btn-outline:hover { background: var(--ink); color: var(--paper); }
}

/* ── Question option — big underlined hand-written choice ── */
.doodle-opt {
  display: flex; align-items: flex-start; gap: 14px;
  width: 100%;
  padding: 15px 10px;
  background: transparent;
  text-align: left;
  border: none;
  border-bottom: 2px solid var(--ink);
  font-family: var(--hand-body);
  font-size: 19px;
  line-height: 1.35;
  color: var(--ink);
  transition: transform 160ms var(--ease), background 180ms var(--ease);
  filter: url(#wobble-small);
  position: relative;
}
.doodle-opt:first-child { border-top: 2px solid var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .doodle-opt:hover {
    background: var(--ink);
    color: var(--paper);
    transform: translateX(4px);
  }
}
.doodle-opt__mark {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: 2px solid currentColor;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--hand-display);
  font-weight: 700;
  font-size: 18px;
  filter: url(#wobble-small);
}

/* ── Trait tag — circled word ── */
.tag-circled {
  display: inline-block;
  padding: 5px 12px 4px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--hand-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--ink);
  filter: url(#wobble-small);
}

/* ── Arrow / scribble flourishes ── */
.arrow-in { display: inline-block; transform: translateY(1px); }

/* ── Progress dots ── */
.dots { display: flex; gap: 8px; align-items: center; }
.dots > span {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--ink);
  background: transparent;
}
.dots > span.done { background: var(--ink); }
.dots > span.cur {
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink);
}

/* ── Entry animations ── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scribble-in {
  from { opacity: 0; transform: rotate(-1deg) scale(0.96); }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}
.enter { animation: fade-up 420ms var(--ease) both; }
.enter-1 { animation-delay: 60ms; }
.enter-2 { animation-delay: 140ms; }
.enter-3 { animation-delay: 220ms; }
.enter-4 { animation-delay: 300ms; }
.enter-5 { animation-delay: 380ms; }
.doodle-in { animation: scribble-in 520ms var(--ease) both; }

/* ── Extra animations — personality ── */

/* floating stars / sparkles */
@keyframes float-star {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-6px) rotate(8deg); }
}
.anim-float       { animation: float-star 2.8s ease-in-out infinite; }
.anim-float-slow  { animation: float-star 4.2s ease-in-out infinite; animation-delay: 300ms; }

/* gentle wiggle — decorative elements */
@keyframes wiggle {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
.anim-wiggle { animation: wiggle 3.4s ease-in-out infinite; transform-origin: center; }

/* breathe — subtle scale pulse */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
.anim-breathe { animation: breathe 3.6s ease-in-out infinite; }

/* stamp-in — big entrance for cheese name / certificate */
@keyframes stamp-in {
  0%   { opacity: 0; transform: scale(0.45) rotate(-14deg); }
  55%  { opacity: 1; transform: scale(1.12) rotate(3deg); }
  80%  { transform: scale(0.97) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.anim-stamp { animation: stamp-in 780ms var(--bounce) both; }

/* pop-in — springy entrance for tags / pills */
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.4) rotate(-6deg); }
  65%  { opacity: 1; transform: scale(1.18) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.anim-pop { animation: pop-in 480ms var(--bounce) both; }

/* slide-in — question transitions */
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
.anim-slide { animation: slide-in-right 380ms var(--ease) both; }

/* slow spin — idle cheese wheel */
@keyframes spin-slow { to { transform: rotate(360deg); } }
.anim-spin-slow { animation: spin-slow 22s linear infinite; transform-origin: center; }

/* draw underline — SVG path */
@keyframes draw-underline {
  from { stroke-dashoffset: 300; }
  to   { stroke-dashoffset: 0; }
}
.anim-draw { stroke-dasharray: 300; animation: draw-underline 900ms ease-out 400ms both; }

/* bounce ellipsis — loading dots */
@keyframes bounce-dot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-6px); opacity: 1; }
}
.anim-dot-1 { animation: bounce-dot 1.2s ease-in-out infinite; }
.anim-dot-2 { animation: bounce-dot 1.2s ease-in-out 0.15s infinite; }
.anim-dot-3 { animation: bounce-dot 1.2s ease-in-out 0.3s infinite; }

/* option hover — tiny jitter on hover (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .doodle-opt:hover .doodle-opt__mark { animation: wiggle 500ms ease-in-out 1; }
}

/* button press — satisfying squish */
.btn-ink:active { transform: translate(1px, 1px) scale(0.98); }
.btn-outline:active { transform: scale(0.98); }

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}