/* Wiggle & Poke — shared paper/felt design system */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&family=Caveat:wght@600;700&display=swap');

html { color-scheme: light only; background: #F5EBD8; }

:root {
  color-scheme: light only;
  --paper: #F5EBD8;
  --paper-deep: #EADBC0;
  --ink: #3A2E1F;
  --ink-soft: #6B5843;

  --tomato: #E8574C;
  --mustard: #F2B84B;
  --mint: #7EC8A6;
  --sky: #6BAED6;
  --plum: #9B6B9E;
  --coral: #F28B82;
  --moss: #6B9A54;
  --cream: #FBF3E0;

  --font-head: 'Quicksand', system-ui, sans-serif;
  --font-hand: 'Caveat', 'Quicksand', cursive;

  --shadow-felt: 0 2px 0 rgba(58, 46, 31, 0.15), 0 6px 14px rgba(58, 46, 31, 0.18);
  --shadow-soft: 0 1px 0 rgba(58, 46, 31, 0.10), 0 3px 8px rgba(58, 46, 31, 0.12);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-touch-callout: none; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-head);
  color: var(--ink);
  background: var(--paper);
  overscroll-behavior: none;
  touch-action: manipulation;
}

/* Paper fiber texture — applied as a filter reference on an SVG <rect> overlay */
.paper-bg {
  position: absolute;
  inset: 0;
  background: var(--paper);
  overflow: hidden;
}
.paper-bg::before {
  content: "";
  position: absolute;
  inset: -20%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.23  0 0 0 0 0.18  0 0 0 0 0.12  0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.55;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Felt shape — the universal card/button */
.felt {
  position: relative;
  background: var(--cream);
  box-shadow: var(--shadow-felt);
  border-radius: 18px;
}
.felt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.7;
}

/* Torn / snipped edge variant */
.snip-top {
  clip-path: polygon(
    0 8px, 4% 4px, 10% 10px, 17% 3px, 24% 8px, 31% 2px, 40% 9px, 48% 3px,
    56% 10px, 64% 4px, 72% 8px, 80% 2px, 88% 9px, 95% 4px, 100% 8px,
    100% 100%, 0 100%
  );
}

/* Button */
.btn-felt {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  background: var(--mustard);
  border: none;
  padding: 14px 22px;
  border-radius: 22px;
  box-shadow: var(--shadow-felt);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn-felt:active { transform: translateY(2px); box-shadow: var(--shadow-soft); }

/* Generic full-screen toy stage */
.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
}

/* Back-to-hub button — long-press (child-lock) */
.exit {
  position: fixed;
  top: calc(16px + var(--safe-top));
  left: calc(16px + var(--safe-left));
  z-index: 20;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: var(--shadow-soft);
  display: grid; place-items: center;
  font-size: 22px;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  overflow: hidden;
}
.exit .ring {
  position: absolute; inset: 2px;
  border-radius: 50%;
  background: conic-gradient(var(--tomato) var(--p, 0%), transparent 0);
  opacity: 0.85;
  pointer-events: none;
  mask: radial-gradient(closest-side, transparent 62%, #000 64%);
  -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 64%);
}
.exit .glyph { position: relative; z-index: 1; }

/* Discovery badge — paper pop-up */
.badge {
  position: fixed;
  left: 50%;
  top: calc(90px + var(--safe-top));
  transform: translate(-50%, -20px) rotate(-3deg);
  background: var(--mustard);
  color: var(--ink);
  padding: 10px 18px 12px;
  border-radius: 14px;
  box-shadow: var(--shadow-felt);
  font-family: var(--font-hand);
  font-size: 28px;
  font-weight: 700;
  z-index: 30;
  opacity: 0;
  transition: opacity 240ms ease, transform 320ms cubic-bezier(.3,1.6,.5,1);
  pointer-events: none;
  white-space: nowrap;
}
.badge.show {
  opacity: 1;
  transform: translate(-50%, 0) rotate(-3deg);
}
.badge .sub {
  display: block;
  font-size: 15px;
  font-family: var(--font-head);
  font-weight: 600;
  opacity: 0.75;
  margin-top: -2px;
  letter-spacing: 0.02em;
}

/* Progress dots */
.dots { display: inline-flex; gap: 5px; }
.dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(58,46,31,0.18);
}
.dot.on { background: var(--tomato); box-shadow: 0 1px 0 rgba(0,0,0,0.15); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }

  .paper-bg::before {
    opacity: 0.4;
  }

  .btn-felt,
  .badge {
    transition-duration: 120ms;
  }
}