@import "./font.css";
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "@fontsource-variable/geist";

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

@theme {
  --font-sans:
    "Inter", "SF Pro Display", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mono:
    "JetBrains Mono", "SFMono-Regular", "SF Mono", Consolas, monospace;
  --font-countdown: "Countdown", "Inter", "SF Pro Display", sans-serif;
  --color-game-bg: #07111f;
  --color-game-surface: #0d1b2d;
  --color-game-surface-strong: #12253d;
  --color-game-accent: #31d0ff;
  --color-game-accent-soft: #7ce8ff;
  --color-game-gold: #f5c86b;
  --color-game-gold-strong: #ffd66e;
  --color-game-danger: #ff5e7a;
  --color-game-success: #4fdc9b;
  --shadow-game-panel:
    0 20px 60px rgba(2, 6, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

:root {
  --design-unit: calc(100vw / 1920);
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.87 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --chart-4: oklch(0.371 0 0);
  --chart-5: oklch(0.269 0 0);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

@media (max-width: 768px) {
  :root {
    --design-unit: calc(100vw / 375);
  }
}

@utility w-design-* {
  width: calc(var(--design-unit) * --value(integer));
}

@utility h-design-* {
  height: calc(var(--design-unit) * --value(integer));
}

@utility min-w-design-* {
  min-width: calc(var(--design-unit) * --value(integer));
}

@utility text-design-* {
  font-size: calc(var(--design-unit) * --value(integer));
}

@utility gap-design-* {
  gap: calc(var(--design-unit) * --value(integer));
}

@utility pt-design-* {
  padding-top: calc(var(--design-unit) * --value(integer));
}

@utility px-design-* {
  padding-left: calc(var(--design-unit) * --value(integer));
  padding-right: calc(var(--design-unit) * --value(integer));
}

@utility p-design-* {
  padding: calc(var(--design-unit) * --value(integer));
}

@utility mt-design-* {
  margin-top: calc(var(--design-unit) * --value(integer));
}

@utility mb-design-* {
  margin-bottom: calc(var(--design-unit) * --value(integer));
}

@utility ml-design-* {
  margin-left: calc(var(--design-unit) * --value(integer));
}

@utility mr-design-* {
  margin-right: calc(var(--design-unit) * --value(integer));
}

@utility mx-design-* {
  margin-left: calc(var(--design-unit) * --value(integer));
  margin-right: calc(var(--design-unit) * --value(integer));
}

@utility py-design-* {
  padding-top: calc(var(--design-unit) * --value(integer));
  padding-bottom: calc(var(--design-unit) * --value(integer));
}

@utility pl-design-* {
  padding-left: calc(var(--design-unit) * --value(integer));
}

@utility pb-design-* {
  padding-bottom: calc(var(--design-unit) * --value(integer));
}

@utility pr-design-* {
  padding-right: calc(var(--design-unit) * --value(integer));
}

@utility my-design-* {
  margin-top: calc(var(--design-unit) * --value(integer));
  margin-bottom: calc(var(--design-unit) * --value(integer));
}

@utility left-design-* {
  left: calc(var(--design-unit) * --value(integer));
}

@utility top-design-* {
  top: calc(var(--design-unit) * --value(integer));
}

@utility right-design-* {
  right: calc(var(--design-unit) * --value(integer));
}

@layer base {
  html {
    @apply h-full w-full text-design-16 font-sans;
  }

  body {
    @apply m-0 h-full w-full bg-background text-foreground;
  }

  #root {
    @apply h-full w-full;
  }

  * {
    -ms-overflow-style: none;
    scrollbar-width: none;
    @apply border-border outline-ring/50;
  }

  *::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  body {
    background:
      radial-gradient(circle at top, rgba(49, 208, 255, 0.12), transparent 28%),
      radial-gradient(
        circle at bottom right,
        rgba(245, 200, 107, 0.1),
        transparent 24%
      ),
      linear-gradient(180deg, #07111f 0%, #040812 100%);
    color: #f8fafc;
  }
}

@layer utilities {
  .common-neon-inset {
    border: 1px solid rgba(128, 223, 231, 0.65);
    border-radius: 5px;
    padding: calc(var(--design-unit) * 8) calc(var(--design-unit) * 10);
    box-shadow: inset 0 0 8px rgba(128, 223, 231, 0.65);
    color: #d5fbff;
  }

  .common-neon-inset-glow {
    border: 1px solid rgba(128, 223, 231, 0.65);
    border-radius: 5px;
    padding: calc(var(--design-unit) * 8) calc(var(--design-unit) * 10);
    background:
      linear-gradient(180deg, rgba(18, 44, 58, 0.92), rgba(8, 22, 34, 0.9)),
      radial-gradient(circle at top, rgba(128, 223, 231, 0.16), transparent 62%);
    box-shadow:
      inset 0 0 calc(var(--design-unit) * 8) rgba(128, 223, 231, 0.72),
      inset 0 0 calc(var(--design-unit) * 18) rgba(128, 223, 231, 0.18),
      0 0 calc(var(--design-unit) * 6) rgba(128, 223, 231, 0.35),
      0 0 calc(var(--design-unit) * 18) rgba(128, 223, 231, 0.24);
    position: relative;
    overflow: hidden;
  }

  .common-neon-inset-glow::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 4px;
    border-top: 1px solid rgba(214, 249, 252, 0.8);
    opacity: 0.85;
    pointer-events: none;
  }

  .game-setting-input-shell {
    border: 1px solid rgba(123, 235, 245, 0.38);
    border-radius: calc(var(--design-unit) * 8);
    background: rgba(17, 52, 67, 0.72);
    transition:
      border-color 180ms ease,
      box-shadow 180ms ease,
      background-color 180ms ease;
  }

  .game-setting-input-shell:focus-within {
    border-color: rgba(136, 245, 255, 0.68);
    box-shadow:
      0 0 0 calc(var(--design-unit) * 1.2) rgba(108, 247, 255, 0.08),
      inset 0 0 calc(var(--design-unit) * 5) rgba(110, 255, 255, 0.06);
    background: rgba(19, 58, 74, 0.82);
  }

  .game-setting-input {
    border: none;
    background: transparent;
    padding: 0;
    color: #8ad6dd;
    box-shadow: none;
    outline: none;
    caret-color: #d9ffff;
  }

  .game-setting-input::placeholder {
    color: rgba(138, 214, 221, 0.58);
  }

  .game-setting-input:focus,
  .game-setting-input:focus-visible {
    border: none;
    box-shadow: none;
    outline: none;
  }

  .game-panel {
    border: 1px solid rgba(124, 232, 255, 0.12);
    background: linear-gradient(
      180deg,
      rgba(18, 37, 61, 0.88),
      rgba(7, 17, 31, 0.78)
    );
    box-shadow: var(--shadow-game-panel);
    backdrop-filter: blur(18px);
  }

  .game-chip-glow {
    box-shadow:
      0 0 0 1px rgba(49, 208, 255, 0.16),
      0 16px 36px rgba(49, 208, 255, 0.16);
  }

  .game-gold-glow {
    box-shadow:
      0 0 0 1px rgba(245, 200, 107, 0.2),
      0 18px 40px rgba(245, 200, 107, 0.14);
  }

  .desktop-game-history-glow {
    filter: drop-shadow(
        0 0 calc(var(--design-unit) * 4) rgba(49, 208, 255, 0.65)
      )
      drop-shadow(0 0 calc(var(--design-unit) * 14) rgba(49, 208, 255, 0.28));
  }

  .modal-close-glow {
    filter: drop-shadow(
        0 0 calc(var(--design-unit) * 4) rgba(110, 255, 255, 0.95)
      )
      drop-shadow(0 0 calc(var(--design-unit) * 12) rgba(48, 214, 255, 0.78))
      drop-shadow(0 0 calc(var(--design-unit) * 24) rgba(18, 162, 255, 0.5));
  }

  .modal-title-glow {
    text-shadow:
      0 0 calc(var(--design-unit) * 2) rgba(224, 255, 255, 0.95),
      0 0 calc(var(--design-unit) * 6) rgba(108, 247, 255, 0.82),
      0 0 calc(var(--design-unit) * 14) rgba(48, 214, 255, 0.58);
  }

  .modal-title-gold-glow {
    text-shadow:
      0 0 calc(var(--design-unit) * 2) rgba(255, 248, 235, 0.9),
      0 0 calc(var(--design-unit) * 8) rgba(254, 238, 176, 0.64),
      0 0 calc(var(--design-unit) * 16) rgba(254, 238, 176, 0.38);
  }

  .desktop-control-chip {
    margin-left: calc(var(--design-unit) * -4);
    margin-right: calc(var(--design-unit) * -18);
  }

  .desktop-control-total {
    margin-left: calc(var(--design-unit) * -26);
    margin-right: calc(var(--design-unit) * -26);
  }

  .desktop-control-actions {
    margin-left: calc(var(--design-unit) * -16);
    margin-right: 0;
  }

  .desktop-control-confirm {
    margin-left: calc(var(--design-unit) * -10);
  }

  .history-scroll-hidden {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .history-scroll-hidden::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .desktop-title-vertical-marquee {
    display: flex;
    flex-direction: column;
    animation: desktop-title-marquee-y 7s linear infinite;
    will-change: transform;
  }

  @keyframes desktop-title-marquee-y {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(-50%);
    }
  }

  @property --gold-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
  }

  @keyframes rotating-gold-border {
    to {
      --gold-angle: 360deg;
    }
  }

  @keyframes gold-border-pulse {
    0%,
    100% {
      opacity: 0.34;
      transform: scale(0.992);
    }

    50% {
      opacity: 0.54;
      transform: scale(1.008);
    }
  }

  .gold-reveal-shell {
    --gold-angle: 0deg;
    position: absolute;
    inset: calc(var(--design-unit) * 2.6);
    border-radius: calc(var(--design-unit) * 16);
    overflow: hidden;
    clip-path: inset(0 round calc(var(--design-unit) * 16));
    pointer-events: none;
  }

  .gold-reveal-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: calc(var(--design-unit) * 16);
    padding: calc(var(--design-unit) * 5.6);
    background: conic-gradient(
      from var(--gold-angle),
      #534217 10%,
      #534217 20%,
      #ffe226 45%,
      #534217 60%,
      #534217 85%,
      #ffe226 95%,
      #534217 100%
    );
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotating-gold-border 8s linear infinite;
  }

  .gold-reveal-shell::after {
    content: "";
    position: absolute;
    inset: calc(var(--design-unit) * 1);
    border-radius: calc(var(--design-unit) * 15);
    padding: calc(var(--design-unit) * 4);
    background: conic-gradient(
      from calc(var(--gold-angle) + 180deg),
      rgba(255, 247, 210, 0) 0%,
      rgba(255, 247, 210, 0) 66%,
      rgba(255, 252, 232, 0.14) 71%,
      rgba(255, 254, 244, 0.98) 75%,
      rgba(255, 230, 130, 0.96) 79%,
      rgba(255, 247, 210, 0.18) 84%,
      rgba(255, 247, 210, 0) 90%,
      rgba(255, 247, 210, 0) 100%
    );
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotating-gold-border 2.1s linear infinite;
  }

  .gold-reveal-static-border {
    position: absolute;
    inset: calc(var(--design-unit) * 2.8);
    border-radius: calc(var(--design-unit) * 16);
    border: calc(var(--design-unit) * 7.4) solid rgba(181, 138, 40, 0.98);
    box-shadow:
      inset 0 0 calc(var(--design-unit) * 14) rgba(255, 241, 181, 0.38),
      0 0 calc(var(--design-unit) * 18) rgba(255, 210, 102, 0.32);
    pointer-events: none;
  }

  .gold-reveal-glow {
    position: absolute;
    inset: calc(var(--design-unit) * 1.4);
    border-radius: calc(var(--design-unit) * 18);
    background: radial-gradient(
      circle at center,
      rgba(255, 226, 92, 0.18) 0%,
      rgba(219, 161, 42, 0.14) 42%,
      rgba(127, 86, 13, 0.08) 62%,
      transparent 82%
    );
    filter: blur(calc(var(--design-unit) * 2.8));
    opacity: 0.36;
    pointer-events: none;
    animation: gold-border-pulse 1.9s ease-in-out infinite;
  }
}

@theme inline {
  --font-heading: var(--font-sans);
  --font-sans: "Geist Variable", sans-serif;
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --color-foreground: var(--foreground);
  --color-background: var(--background);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.87 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --chart-4: oklch(0.371 0 0);
  --chart-5: oklch(0.269 0 0);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}