/* KNOWBALL — design tokens */
:root {
  /* surface */
  --kb-bg-deep: #07060A;
  --kb-bg-base: #0D0B12;
  --kb-bg-card: #16131C;
  --kb-bg-elev: #1E1A26;
  --kb-glass: rgba(255,255,255,0.045);
  --kb-glass-strong: rgba(255,255,255,0.08);
  --kb-border: rgba(255,255,255,0.08);
  --kb-border-strong: rgba(255,255,255,0.16);
  --kb-hairline: rgba(255,255,255,0.05);

  /* text */
  --kb-fg: #F4F0E6;
  --kb-fg-soft: #C8C2B4;
  --kb-fg-mute: #7A7480;
  --kb-fg-faint: #4D4856;

  /* brand */
  --kb-amber: #FF6A1F;
  --kb-amber-hot: #FF8A3D;
  --kb-amber-glow: #FFB475;
  --kb-amber-deep: #B23B00;

  --kb-ice: #6FE3FF;
  --kb-ice-deep: #2EA0CC;

  --kb-gold: #E8B842;
  --kb-gold-deep: #8A6418;

  --kb-crimson: #FF3D5E;
  --kb-green: #00D17A;
  --kb-violet: #B26CFF;

  /* type */
  --kb-display: "Anton", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --kb-display-wide: "Big Shoulders Display", "Oswald", system-ui, sans-serif;
  --kb-ui: "Space Grotesk", system-ui, sans-serif;
  --kb-mono: "JetBrains Mono", "Geist Mono", ui-monospace, monospace;

  /* radii / shadow */
  --kb-r-sm: 10px;
  --kb-r-md: 16px;
  --kb-r-lg: 22px;
  --kb-r-xl: 28px;

  --kb-shadow-card: 0 2px 4px rgba(0,0,0,0.4), 0 20px 40px -10px rgba(0,0,0,0.6);
  --kb-shadow-amber: 0 14px 40px -6px rgba(255,106,31,0.35);
  --kb-shadow-deep: 0 30px 60px -10px rgba(0,0,0,0.75);
}

/* base */
.kb-root {
  font-family: var(--kb-ui);
  color: var(--kb-fg);
  background: var(--kb-bg-deep);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.kb-display { font-family: var(--kb-display); font-weight: 400; letter-spacing: 0.01em; }
.kb-mono    { font-family: var(--kb-mono); font-feature-settings: "ss01","tnum"; }

/* utility for grain (disabled — inline SVG data URL with filter refs trips offline bundler) */
.kb-grain::after { content: none; }

/* shimmering moving sweep (disabled per design) */
.kb-sweep::before { content: none; }

/* pulse for live dot */
@keyframes kb-pulse { 0%,100% { opacity:1; transform: scale(1);} 50% { opacity:.55; transform: scale(1.25);} }
.kb-pulse { animation: kb-pulse 1.6s ease-in-out infinite; }

/* slow float for hero */
@keyframes kb-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
.kb-float { animation: kb-float 5s ease-in-out infinite; }

/* soft halo pulse — for question mark glow ring */
@keyframes kb-pulse-soft {
  0%,100% { opacity: 0.7; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.06); }
}
.kb-pulse-soft { animation: kb-pulse-soft 3.4s ease-in-out infinite; }

/* hairline tap state for list rows */
.kb-row:active { background: rgba(255,255,255,0.03) !important; }

/* Daily board cell flip-reveal — staggered via animation-delay */
@keyframes kb-cell-flip {
  0%   { transform: perspective(600px) rotateY(-92deg); opacity: 0; }
  55%  { opacity: 1; }
  72%  { transform: perspective(600px) rotateY(12deg); }
  100% { transform: perspective(600px) rotateY(0deg);  opacity: 1; }
}
.kb-flip {
  animation: kb-cell-flip 0.6s cubic-bezier(0.25,0.7,0.3,1.05) both;
  transform-origin: center;
  backface-visibility: hidden;
}

/* Active (next-guess) row — pulsing amber halo */
@keyframes kb-row-active {
  0%, 100% {
    box-shadow:
      inset 0 0 0 1px rgba(255,138,61,0.35),
      0 0 22px -6px rgba(255,106,31,0.22);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(255,138,61,0.55),
      0 0 30px -2px rgba(255,106,31,0.42);
  }
}
.kb-row-active { animation: kb-row-active 2.2s ease-in-out infinite; }

/* Next-guess cell pulse — applied to individual empty cells in the active row */
@keyframes kb-cell-active {
  0%, 100% {
    border-color: rgba(255,138,61,0.45);
    box-shadow: 0 0 0 1px rgba(255,138,61,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  50% {
    border-color: rgba(255,180,117,0.7);
    box-shadow: 0 0 14px -2px rgba(255,138,61,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  }
}
.kb-cell-active { animation: kb-cell-active 2.2s ease-in-out infinite; }

/* hide scrollbars inside device */
.kb-scroll::-webkit-scrollbar { display:none; }
.kb-scroll { scrollbar-width: none; }