/* Plyr CSS - Must be at top before @tailwind */
@import "plyr/dist/plyr.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        scroll-behavior: smooth;
        scrollbar-gutter: stable;
    }
    :root {
        --brand-red: #FF4500;
        --brand-black: #000000;
        --background: 0 0% 100%;
        --foreground: 240 10% 3.9%;
        --card: 0 0% 100%;
        --card-foreground: 240 10% 3.9%;
        --popover: 0 0% 100%;
        --popover-foreground: 240 10% 3.9%;
        --primary: 16 100% 50%;
        --primary-foreground: 0 0% 100%;
        --secondary: 240 4.8% 95.9%;
        --secondary-foreground: 240 5.9% 10%;
        --muted: 240 4.8% 95.9%;
        --muted-foreground: 240 3.8% 46.1%;
        --accent: 240 4.8% 95.9%;
        --accent-foreground: 240 5.9% 10%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 0 0% 98%;
        --border: 240 5.9% 90%;
        --input: 240 5.9% 90%;
        --ring: 16 100% 50%;
        --radius: 1rem;

        /* Plyr Custom Theme */
        --plyr-color-main: #FF4500;
    }
    .dark {
        --background: 240 10% 3.9%; /* Matching nihonbuzz.org #0a0a0b approx */
        --foreground: 0 0% 98%;
        --card: 240 10% 3.9%;
        --card-foreground: 0 0% 98%;
        --popover: 240 10% 4.8%;
        --popover-foreground: 0 0% 98%;
        --primary: 16 100% 50%;
        --primary-foreground: 0 0% 100%;
        --secondary: 240 3.7% 15.9%;
        --secondary-foreground: 0 0% 98%;
        --muted: 240 3.7% 12%;
        --muted-foreground: 240 5% 64.9%;
        --accent: 240 3.7% 15.9%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 0% 98%;
        --border: 240 3.7% 15.9%;
        --input: 240 3.7% 15.9%;
        --ring: 16 100% 50%;
    }
}

@layer utilities {
    .bg-grid {
        background-size: 40px 40px;
        background-image: 
            linear-gradient(to right, hsl(var(--foreground) / var(--grid-opacity, 0.05)) 1px, transparent 1px),
            linear-gradient(to bottom, hsl(var(--foreground) / var(--grid-opacity, 0.05)) 1px, transparent 1px);
        mask-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0));
        -webkit-mask-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0));
    }

    .bg-seigaiha {
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cpath d='M0 40a40 40 0 0 1 40-40 40 40 0 0 1 40 40H70a30 30 0 0 0-30-30 30 30 0 0 0-30 30H0zm40 0a10 10 0 0 1 10-10 10 10 0 0 1 10 10H50a5 5 0 0 0-5-5 5 5 0 0 0-5 5h-10zm0-30a10 10 0 0 1 10-10 10 10 0 0 1 10 10h-5a5 5 0 0 0-5-5 5 5 0 0 0-5 5h-5zM0 10a10 10 0 0 1 10-10 10 10 0 0 1 10 10h-5a5 5 0 0 0-5-5 5 5 0 0 0-5 5H0zm70 0a10 10 0 0 1 10-10 10 10 0 0 1 10 10h-5a5 5 0 0 0-5-5 5 5 0 0 0-5 5h-5z' fill='none' stroke='%23FF4500' stroke-width='1.5' stroke-opacity='0.15'/%3E%3C/svg%3E");
        mask-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0));
        -webkit-mask-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0));
    }
}

@layer base {
  * {
    @apply border-border;
    }
  body {
    --grid-opacity: 0.05;
    --hero-glow-opacity: 0.8;
    @apply bg-background text-foreground transition-colors duration-300;
    }
  .dark body {
    --grid-opacity: 0.02;
    --hero-glow-opacity: 0.5;
  }
}

.plyr--video {
    @apply rounded-2xl overflow-hidden shadow-2xl;
}