/* Play — design tokens */
:root {
  --cream: #F7F1E3;
  --cream-2: #EFE8D3;
  --ink: #111111;
  --ink-soft: #2A2A28;
  --tang: #FF5B22;
  --grape: #9B5BFF;
  --leaf: #1FB364;
  --sun: #FFCB2E;
  --ocean: #3D7CFF;
  --bubble: #FF7AB6;
  --paper: #FFFDF6;

  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 32px;
  --r-xl: 44px;
  --r-pill: 999px;

  --shadow-hard: 6px 6px 0 var(--ink);
  --shadow-hard-sm: 4px 4px 0 var(--ink);
  --shadow-hard-lg: 10px 10px 0 var(--ink);

  --bw: 3px;
}

* { box-sizing: border-box; }

html, body, #root {
  margin: 0;
  min-height: 100%;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-feature-settings: 'ss01' on, 'ss02' on;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

/* Visibility helpers tied to the mobile breakpoint */
@media (max-width: 900px) {
  .hide-on-mobile { display: none !important; }
}
@media (min-width: 901px) {
  .show-on-mobile { display: none !important; }
}

button { font-family: inherit; }

.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Grain background overlay for the app */
.grain-bg {
  position: relative;
  isolation: isolate;
}
.grain-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  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.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.12;
  mix-blend-mode: multiply;
  z-index: 50;
}

/* Reusable grainy-fill shape — used inside SVG/HTML */
.grainy {
  position: relative;
  isolation: isolate;
}
.grainy::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.35;
  mix-blend-mode: multiply;
}

/* Chunky button base */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-weight: 700;
  font-size: 17px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-hard);
  transition: transform 180ms cubic-bezier(.34,1.56,.64,1), box-shadow 180ms ease, background 180ms ease;
  user-select: none;
}
.btn:hover {
  transform: translate(-2px, -2px) rotate(-1.2deg);
  box-shadow: 8px 8px 0 var(--ink);
}
.btn:active {
  transform: translate(2px, 2px) rotate(0);
  box-shadow: 2px 2px 0 var(--ink);
}

.btn-primary { background: var(--tang); color: var(--paper); }
.btn-grape   { background: var(--grape); color: var(--paper); }
.btn-leaf    { background: var(--leaf); color: var(--paper); }
.btn-sun     { background: var(--sun); }
.btn-ocean   { background: var(--ocean); color: var(--paper); }

/* Chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 14px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-hard-sm);
  transition: transform 200ms cubic-bezier(.34,1.56,.64,1), box-shadow 200ms ease, background 180ms ease;
  white-space: nowrap;
}
.chip:hover {
  transform: translate(-2px, -2px) rotate(-1.5deg);
  box-shadow: 6px 6px 0 var(--ink);
}
.chip:nth-child(2n):hover { transform: translate(-2px, -2px) rotate(1.5deg); }

/* Card surfaces */
.surface {
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-hard);
}

/* Scrollbar */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ink);
  border-radius: 999px;
  border: 3px solid var(--cream);
}

/* Wordmark wobble */
@keyframes wobble {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.7) rotate(-6deg); }
  60%  { opacity: 1; transform: scale(1.06) rotate(1.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bubble-in {
  0%   { opacity: 0; transform: translateY(10px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dot-bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
}

.anim-pop  { animation: pop-in 600ms cubic-bezier(.34,1.56,.64,1) both; }
.anim-slide { animation: slide-up 500ms cubic-bezier(.34,1.56,.64,1) both; }
.anim-bubble { animation: bubble-in 360ms cubic-bezier(.34,1.56,.64,1) both; }
.anim-float { animation: float 4.5s ease-in-out infinite; }
.anim-wobble { animation: wobble 2.6s ease-in-out infinite; transform-origin: 50% 80%; }
.anim-spin-slow { animation: spin-slow 14s linear infinite; }

/* Hide scrollbar on chip rail */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Typing dots */
.typing-dot {
  width: 10px; height: 10px; border-radius: 999px; background: var(--ink);
  display: inline-block;
  animation: dot-bounce 1.1s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.30s; }

/* Doodle helpers */
.tilt-l { transform: rotate(-2.5deg); }
.tilt-r { transform: rotate(2.5deg); }

/* Outline text style for big display */
.display {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.92;
}

/* Inline platform tag styles */
.platform-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 13px;
}

/* Layout containers */
.app-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: 100vh;
  height: 100dvh;
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  /* Sidebar becomes a slide-in drawer */
  .sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    width: min(86vw, 320px);
    height: 100vh;
    height: 100dvh;
    z-index: 80;
    transform: translateX(-100%);
    transition: transform 280ms cubic-bezier(.34,1.56,.64,1);
    box-shadow: 8px 0 0 var(--ink);
  }
  .sidebar.open { transform: translateX(0); }
}
/* Backdrop is rendered on mobile only — driven by .open class */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

/* Smaller-screen tweaks */
@media (max-width: 640px) {
  .hide-on-small { display: none !important; }
}

/* Fancy underline (sticker style) */
.sticker-underline {
  display: inline-block;
  position: relative;
  isolation: isolate;
}
.sticker-underline::after {
  content: '';
  position: absolute;
  left: -4px; right: -4px;
  bottom: 0.05em;
  height: 0.4em;
  background: var(--sun);
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  z-index: -1;
  transform: rotate(-1.5deg);
}