@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&family=Press+Start+2P&display=swap');
:root {
  --button-outline: rgba(0,0,0,.10);
  --badge-outline: rgba(0,0,0,.05);
  --opaque-button-border-intensity: -8;
  --elevate-1: rgba(0,0,0,.03);
  --elevate-2: rgba(0,0,0,.08);

  --background: 45 100% 90%;
  --foreground: 25 30% 10%;
  --border: 35 60% 70%;
  --input: 35 60% 70%;
  --ring: 205 80% 45%;

  --card: 45 100% 95%;
  --card-foreground: 25 30% 10%;
  --card-border: 35 60% 75%;

  --popover: 45 100% 97%;
  --popover-foreground: 25 30% 10%;
  --popover-border: 35 60% 75%;

  --primary: 205 80% 45%;
  --primary-foreground: 0 0% 100%;
  --secondary: 40 95% 55%;
  --secondary-foreground: 25 30% 10%;
  --muted: 40 60% 85%;
  --muted-foreground: 25 20% 40%;
  --accent: 15 85% 50%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 80% 50%;
  --destructive-foreground: 0 0% 100%;

  --sidebar: 40 80% 88%;
  --sidebar-foreground: 25 30% 10%;
  --sidebar-border: 35 60% 72%;
  --sidebar-primary: 205 80% 45%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 40 95% 55%;
  --sidebar-accent-foreground: 25 30% 10%;
  --sidebar-ring: 205 80% 45%;

  --chart-1: 205 80% 45%;
  --chart-2: 140 60% 40%;
  --chart-3: 30 90% 55%;
  --chart-4: 0 75% 55%;
  --chart-5: 270 65% 55%;

  --app-font-sans: 'Comic Neue', cursive;
  --app-font-serif: 'Bangers', cursive;
  --app-font-mono: Menlo, monospace;
  --radius: 0.75rem;

  --shadow-2xs: 3px 3px 0px 0px rgba(0,0,0,0.25);
  --shadow-xs: 3px 3px 0px 0px rgba(0,0,0,0.25);
  --shadow-sm: 3px 3px 0px 0px rgba(0,0,0,0.3), 0px 1px 2px -1px rgba(0,0,0,0.1);
  --shadow: 4px 4px 0px 0px rgba(0,0,0,0.3), 0px 1px 2px -1px rgba(0,0,0,0.1);
  --shadow-md: 4px 4px 0px 0px rgba(0,0,0,0.3), 0px 2px 4px -1px rgba(0,0,0,0.15);
  --shadow-lg: 5px 5px 0px 0px rgba(0,0,0,0.3), 0px 4px 6px -1px rgba(0,0,0,0.15);
  --shadow-xl: 6px 6px 0px 0px rgba(0,0,0,0.3), 0px 8px 10px -1px rgba(0,0,0,0.15);
  --shadow-2xl: 8px 8px 0px 0px rgba(0,0,0,0.3);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  --primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --sidebar-primary-border: hsl(from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --sidebar-accent-border: hsl(from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
}

.dark {
  --button-outline: rgba(255,255,255,.10);
  --badge-outline: rgba(255,255,255,.05);
  --opaque-button-border-intensity: 9;
  --elevate-1: rgba(255,255,255,.04);
  --elevate-2: rgba(255,255,255,.09);

  --background: 25 30% 8%;
  --foreground: 45 80% 88%;
  --border: 35 40% 25%;
  --input: 35 40% 25%;
  --ring: 205 80% 55%;

  --card: 25 30% 12%;
  --card-foreground: 45 80% 88%;
  --card-border: 35 40% 28%;

  --popover: 25 30% 10%;
  --popover-foreground: 45 80% 88%;
  --popover-border: 35 40% 28%;

  --primary: 205 80% 55%;
  --primary-foreground: 0 0% 100%;
  --secondary: 40 95% 50%;
  --secondary-foreground: 25 30% 10%;
  --muted: 25 30% 18%;
  --muted-foreground: 35 30% 55%;
  --accent: 15 85% 55%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 75% 55%;
  --destructive-foreground: 0 0% 100%;

  --sidebar: 25 30% 10%;
  --sidebar-foreground: 45 80% 88%;
  --sidebar-border: 35 40% 22%;
  --sidebar-primary: 205 80% 55%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 40 95% 50%;
  --sidebar-accent-foreground: 25 30% 10%;
  --sidebar-ring: 205 80% 55%;

  --chart-1: 205 80% 55%;
  --chart-2: 140 60% 45%;
  --chart-3: 30 90% 60%;
  --chart-4: 0 75% 60%;
  --chart-5: 270 65% 60%;

  --shadow-2xs: 3px 3px 0px 0px rgba(0,0,0,0.5);
  --shadow-xs: 3px 3px 0px 0px rgba(0,0,0,0.5);
  --shadow-sm: 3px 3px 0px 0px rgba(0,0,0,0.5), 0px 1px 2px -1px rgba(0,0,0,0.3);
  --shadow: 4px 4px 0px 0px rgba(0,0,0,0.5), 0px 1px 2px -1px rgba(0,0,0,0.3);
  --shadow-md: 4px 4px 0px 0px rgba(0,0,0,0.5), 0px 2px 4px -1px rgba(0,0,0,0.3);
  --shadow-lg: 5px 5px 0px 0px rgba(0,0,0,0.5), 0px 4px 6px -1px rgba(0,0,0,0.3);
  --shadow-xl: 6px 6px 0px 0px rgba(0,0,0,0.5), 0px 8px 10px -1px rgba(0,0,0,0.3);
  --shadow-2xl: 8px 8px 0px 0px rgba(0,0,0,0.5);
}

.font-bangers {
  font-family: 'Bangers', cursive;
  letter-spacing: 0.05em;
}

.comic-border {
  border: 3px solid #1a1a1a;
  box-shadow: 4px 4px 0px #1a1a1a;
}

.comic-border-sm {
  border: 2px solid #1a1a1a;
  box-shadow: 3px 3px 0px #1a1a1a;
}

.comic-border-lg {
  border: 4px solid #1a1a1a;
  box-shadow: 6px 6px 0px #1a1a1a;
}

.halftone-bg {
  background-image: radial-gradient(circle, rgba(0,0,0,0.1) 1px, transparent 1px);
  background-size: 8px 8px;
}

.speech-bubble {
  position: relative;
  background: white;
  border: 3px solid #1a1a1a;
  border-radius: 12px;
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 16px solid #1a1a1a;
}

.speech-bubble::before {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 22px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 14px solid white;
  z-index: 1;
}

@keyframes pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.95); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@keyframes pulse-red {
  0%, 100% { background-color: hsl(0 80% 50%); }
  50% { background-color: hsl(0 80% 65%); }
}

@keyframes bounce-in {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes stamp {
  0% { transform: scale(2) rotate(-20deg); opacity: 0; }
  60% { transform: scale(0.95) rotate(5deg); opacity: 1; }
  80% { transform: scale(1.05) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.animate-shake { animation: shake 0.4s ease-in-out; }
.animate-bounce-in { animation: bounce-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.animate-stamp { animation: stamp 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.board-tile {
  cursor: pointer;
  transition: transform 0.1s ease;
}

.board-tile:hover {
  transform: scale(1.05);
}

.meter-bar {
  transition: width 0.5s ease-in-out;
}

@layer utilities {
  .no-default-hover-elevate {}
  .no-default-active-elevate {}
}


/* Minimal utility layer generated for the static build. */
* { box-sizing: border-box; }
html, body, #root { min-height: 100%; margin: 0; }
body { font-family: 'Comic Neue', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: hsl(var(--background)); color: hsl(var(--foreground)); }
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.min-h-screen{min-height:100vh}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.inset-0{inset:0}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}
.flex{display:flex}.grid{display:grid}.flex-col{flex-direction:column}.flex-1{flex:1 1 0%}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.w-full{width:100%}.max-w-lg{max-width:32rem}.max-w-2xl{max-width:42rem}.overflow-hidden{overflow:hidden}.pointer-events-none{pointer-events:none}.opacity-30{opacity:.3}.text-center{text-align:center}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-bangers{font-family:'Bangers', Impact, fantasy;letter-spacing:.05em}
.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}
@media (max-width: 640px){ .p-6{padding:1rem}.px-8{padding-left:1rem;padding-right:1rem} }