@import "tailwindcss";
@import "../../public/assets/css/fonts.css";
@import "tw-animate-css";

/* @custom-variant dark (&:is(.dark *)); */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

* {
  box-sizing: border-box;
}

html,
body {
  @apply h-full bg-background font-irancell font-normal text-foreground;

  @media (prefers-color-scheme: dark) {
    /* color-scheme: dark; */
  }
}

/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="password"]:not(:placeholder-shown) {
  font-family: "irancell";
  font-style: normal;
  font-weight: normal;
  speak: none;
  color: var(--disabled-text);
  margin: 5px 0px 10px 0px;
  font-size: 24px;
  /* Controls dot size (width & height) */
  line-height: 8px;
  /* Ensures vertical alignment */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */

  /* add spacing to better separate each image */
  letter-spacing: 2px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.noscrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.noscrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

/* width */
::-webkit-scrollbar {
  width: 4px;
  height: 6px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  border-radius: 12px;
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 0px transparent inset !important;
  box-shadow: 0 0 0px 0px transparent inset !important;
  -webkit-text-fill-color: var(--disabled-text) !important;
  background: currentColor !important;
  transition: background-color 10000s ease-in-out 0s;
}

input:autofill {
  -webkit-box-shadow: 0 0 0px 0px transparent inset !important;
  box-shadow: 0 0 0px 0px transparent inset !important;
  -webkit-text-fill-color: var(--disabled-text) !important;
  background: currentColor !important;
  transition: background-color 10000s ease-in-out 0s;
}

.box-shadow-normal {
  box-shadow: 0px 2px 16px 0px #00000014;
  height: fit-content;
  padding-bottom: 20px;
}

.gradient-border {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
}

.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  /* border thickness */
  border-radius: inherit;
  /* inherit border-radius from parent */
  background: linear-gradient(
    to bottom right,
    var(--container) 6.25%,
    rgba(255, 253, 253, 0) 52.01%,
    var(--container) 96.87%
  );
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  /* so it doesn't block interactions */
  z-index: -1;
  box-sizing: border-box;
}

@theme {
  --font-irancell: var(--font-irancell);

  --radius-normal: var(--radius-normal);
  --text-sm2: var(--text-sm2);
  --text-xs2: var(--text-xs2);
  --radius-container: var(--radius-container);

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --color-background: var(--background);
  /* oklch(0.963 0.008 289.2) */
  --color-container: var(--container);
  /* oklch(1 0 0) */
  --color-primary: var(--primary);
  /* oklch(0.14 0 0) */
  --color-border: var(--border);
  /* oklch(0.885 0.007 248.3) */
  --color-invalid: var(--invalid);
  /* oklch(0.515 0.118 27.5) */
  --color-valid: var(--valid);
  /* oklch(0.46 0.107 132.7) */
  --color-foreground: var(--foreground);
  /* oklch(0.202 0 0) */
  --color-disabled: var(--disabled);
  /* oklch(0.91 0.004 295.2) */
  --color-disabled2: var(--disabled2);
  /* oklch(0.5 0 0) */
  --color-disabled3: var(--disabled3);
  /* oklch(0.949 0.002 277.1) */
  --color-disabled-text: var(--disabled-text);
  /* oklch(0.34 0.006 257.4) */
  --color-menu-header: var(--menu-header);
  /* oklch(0.79 0.03 237.3) */
  --color-icon-deactive: var(--icon-deactive);
  /* oklch(0.65 0.027 234.8) */
  --color-icon-active: var(--icon-active);
  /* oklch(0.12 0.002 304.5) */
}

/* unified theme */
:root {
  --font-irancell: "Irancell";

  --radius-normal: 10px;
  --text-sm2: 13px;
  --text-xs2: 10px;
  --radius-container: 24px;
}

html[data-theme="light"] {
  /* --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(21% 0.006 285.885);
  --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.928 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.9219 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --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); */

  --background: oklch(0.963 0.008 289.2);
  /* #F4F5F9 */
  --container: oklch(1 0 0);
  /* #FFFFFF */
  --primary: oklch(0.202 0 0);
  /* #333333 - same as foreground for consistency */
  --primary-foreground: oklch(1 0 0);
  /* #FFFFFF */
  --border: oklch(0.885 0.007 248.3);
  /* #E5E5E5 */
  --invalid: oklch(0.515 0.118 27.5);
  /* red (#FF0000 approx) */
  --valid: oklch(0.46 0.107 132.7);
  /* #439C46 */
  --foreground: oklch(0.202 0 0);
  /* #333333 */
  --disabled: oklch(0.91 0.004 295.2);
  /* #E7E7E7 */
  --disabled2: oklch(0.5 0 0);
  /* #7F7F7F */
  --disabled3: oklch(0.949 0.002 277.1);
  /* #F2F2F2 */
  --disabled-text: oklch(0.6564 0.0285 276.16);
  /* #8C90A3 */
  --menu-header: oklch(0.79 0.03 237.3);
  /* #C3C7DD */
  --icon-deactive: oklch(0.65 0.027 234.8);
  /* #A8ABBF */
  --icon-active: oklch(0.12 0.002 304.5);
  /* #292D32 */
}

html[data-theme="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.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --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); */

  --background: oklch(23.26% 0.014 253.1);
  /* #2B2E3F */
  --container: oklch(30.33% 0.016 252.42);
  /* #3A3E52 */
  --primary: oklch(97.807% 0.029 256.847);
  /* same as foreground for consistency */
  --primary-foreground: oklch(23.26% 0.014 253.1);
  /* same as background */
  --border: oklch(1 0 0 / 10%);
  /* #E5E5E5 with 10% opacity */
  --invalid: oklch(0.515 0.118 27.5);
  /* red (#FF0000 approx) */
  --valid: oklch(0.46 0.107 132.7);
  /* #439C46 */
  --foreground: oklch(97.807% 0.029 256.847);
  /* #F5F6FA */
  --disabled: oklch(42.866% 0.00494 286.051);
  /* #5A5D6F */
  --disabled2: oklch(0.5 0 0);
  /* #7F7F7F */
  --disabled3: oklch(0.949 0.002 277.1);
  /* #F2F2F2 */
  --disabled-text: oklch(75.73% 0.01398 251.72);
  /* #B8BBCC */
  --menu-header: oklch(0.79 0.03 237.3);
  /* #C3C7DD */
  --icon-deactive: oklch(0.65 0.027 234.8);
  /* #A8ABBF */
  --icon-active: oklch(0.12 0.002 304.5);
  /* #292D32 */
}

/* @layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
  }
} */

.dltr {
  direction: ltr;
}

.game-explanation {
  display: none;
}