@import "tailwindcss";
@import "@fontsource-variable/space-grotesk";
@import "@fontsource-variable/jetbrains-mono";

@custom-variant dark (&:is(.dark *));

/* ===== shadcn/ui tokens · Acid（克制版） ===== */
:root {
  --radius: 0.5rem;

  --background: 56 42% 96%;
  --foreground: 248 20% 9%;

  --card: 0 0% 100%;
  --card-foreground: 248 20% 9%;
  --popover: 0 0% 100%;
  --popover-foreground: 248 20% 9%;

  --primary: 108 60% 30%;
  --primary-foreground: 60 40% 98%;
  --secondary: 55 30% 91%;
  --secondary-foreground: 248 18% 13%;
  --muted: 54 26% 91%;
  --muted-foreground: 248 9% 42%;
  --accent: 188 44% 90%;
  --accent-foreground: 201 50% 16%;

  --destructive: 2 70% 46%;
  --destructive-foreground: 0 0% 100%;
  --success: 143 58% 34%;
  --warning: 34 88% 38%;

  --border: 55 16% 84%;
  --input: 55 16% 79%;
  --ring: 108 60% 36%;

  --acid-lime: 105 72% 42%;
  --acid-cyan: 187 90% 38%;
  --acid-magenta: 322 82% 44%;
  --acid-violet: 258 76% 48%;

  color-scheme: light;
}

.dark {
  --background: 248 22% 5%;
  --foreground: 56 26% 92%;

  --card: 247 18% 7%;
  --card-foreground: 56 26% 92%;
  --popover: 247 18% 7%;
  --popover-foreground: 56 26% 92%;

  --primary: 91 58% 44%;
  --primary-foreground: 240 30% 7%;
  --secondary: 247 16% 12%;
  --secondary-foreground: 55 20% 88%;
  --muted: 247 16% 12%;
  --muted-foreground: 246 10% 62%;
  --accent: 251 22% 14%;
  --accent-foreground: 190 72% 70%;

  --destructive: 3 68% 52%;
  --destructive-foreground: 0 0% 98%;
  --success: 143 62% 55%;
  --warning: 38 92% 55%;

  --border: 248 14% 18%;
  --input: 248 13% 24%;
  --ring: 91 58% 50%;

  --acid-lime: 90 66% 54%;
  --acid-cyan: 188 82% 58%;
  --acid-magenta: 325 80% 62%;
  --acid-violet: 262 86% 68%;

  color-scheme: dark;
}

@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-success: hsl(var(--success));
  --color-warning: hsl(var(--warning));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));

  --color-acid-lime: hsl(var(--acid-lime));
  --color-acid-cyan: hsl(var(--acid-cyan));
  --color-acid-magenta: hsl(var(--acid-magenta));
  --color-acid-violet: hsl(var(--acid-violet));

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --font-sans: "Space Grotesk Variable", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  body {
    @apply min-h-screen bg-background font-sans text-foreground;
  }

  #root {
    @apply min-h-screen;
  }

  ::selection {
    background: hsl(var(--acid-lime) / 0.28);
    color: hsl(var(--foreground));
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(115deg, hsl(var(--acid-lime) / 0.1), transparent 34%),
      linear-gradient(238deg, hsl(var(--acid-cyan) / 0.09), transparent 44%),
      linear-gradient(325deg, hsl(var(--acid-magenta) / 0.07), transparent 42%);
  }

  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      linear-gradient(to right, hsl(var(--foreground) / 0.035) 1px, transparent 1px),
      linear-gradient(to bottom, hsl(var(--foreground) / 0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, black, transparent 76%);
  }
}

@layer components {
  .card {
    @apply rounded-lg border bg-card text-card-foreground shadow-sm;
  }

  .btn {
    @apply inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded-md px-4 text-sm font-medium whitespace-nowrap transition-colors select-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50;
  }
  .btn-primary {
    @apply bg-primary text-primary-foreground shadow-sm hover:bg-primary/90;
  }
  .btn-secondary {
    @apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80;
  }
  .btn-outline {
    @apply border bg-card shadow-sm hover:bg-accent hover:text-accent-foreground;
  }
  .btn-ghost {
    @apply text-foreground/70 hover:bg-accent hover:text-accent-foreground;
  }
  .btn-destructive {
    @apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90;
  }
  .btn-sm {
    @apply h-8 px-3 text-xs;
  }
  .btn-lg {
    @apply h-10 px-6 text-[0.95rem];
  }
  .btn-icon {
    @apply size-9 p-0;
  }

  .field {
    @apply flex h-9 w-full rounded-md border border-input bg-background/60 px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50;
  }

  .label {
    @apply text-sm leading-none font-medium;
  }

  .badge {
    @apply inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-semibold whitespace-nowrap transition-colors;
  }

  .acid-text {
    background: linear-gradient(
      100deg,
      hsl(var(--acid-lime)),
      hsl(var(--acid-cyan)) 42%,
      hsl(var(--acid-violet)) 74%,
      hsl(var(--acid-magenta))
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .panel {
    @apply rounded-lg border bg-background/70;
  }

  .focus-ring {
    @apply focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none;
  }

  .acid-frame {
    position: relative;
  }
  .acid-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
      135deg,
      hsl(var(--acid-lime) / 0.75),
      hsl(var(--acid-cyan) / 0.45) 38%,
      hsl(var(--acid-violet) / 0.18) 68%,
      hsl(var(--acid-magenta) / 0.5)
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }

  .header-line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    opacity: 0.55;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      hsl(var(--acid-lime)),
      hsl(var(--acid-cyan)) 40%,
      hsl(var(--acid-violet)) 72%,
      hsl(var(--acid-magenta))
    );
  }
}

/* ===== 弹幕 ===== */
.danmaku-item {
  position: absolute;
  left: 100%;
  white-space: nowrap;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.9), 0 0 14px rgb(0 0 0 / 0.5);
  animation-name: danmaku-move;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  will-change: left;
}
@keyframes danmaku-move {
  from { left: 100%; }
  to { left: -100%; }
}