@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import "tailwindcss";
@plugin "tailwindcss-animate";

@theme {
  --color-background: #0d0d0d;
  --color-primary: #ed2939;
  --color-primary-50: #fbd2d6;
  --color-primary-100: #f7a5ad;
  --color-primary-200: #f37884;
  --color-primary-300: #ef4b5b;
  --color-primary-400: #eb1e32;
  --color-primary-500: #ed2939;
  --color-primary-600: #cd1121;
  --color-primary-700: #990d18;
  --color-primary-800: #650910;
  --color-primary-900: #310408;
  --color-primary-950: #180204;
  --color-body: #f5f5f5;
  --color-danger: #f8081c;
  --color-danger-50: #fdbbc0;
  --color-danger-100: #fca7ae;
  --color-danger-200: #f9838e;
  --color-danger-300: #f65f5f;
  --color-danger-400: #f33b32;
  --color-danger-500: #f01708;
  --color-danger-600: #e70000;
  --color-danger-700: #b00000;
  --color-danger-800: #790000;
  --color-danger-900: #420000;
  --color-danger-950: #210000;
  --color-success: #00dd5c;
  --color-success-50: #96ffc1;
  --color-success-100: #81ffb6;
  --color-success-200: #58ff9e;
  --color-success-300: #30ff86;
  --color-success-400: #08ff6e;
  --color-success-500: #00dd5c;
  --color-success-600: #00a545;
  --color-success-700: #006d2d;
  --color-success-800: #003516;
  --color-success-900: #000000;
  --color-success-950: #000000;
  --color-warning: #fff346;
  --color-warning-50: #fffffe;
  --color-warning-100: #fffee9;
  --color-warning-200: #fffbc0;
  --color-warning-300: #fff898;
  --color-warning-400: #fff66f;
  --color-warning-500: #fff346;
  --color-warning-600: #ffef0d;
  --color-warning-700: #d5c700;
  --color-warning-800: #9d9300;
  --color-warning-900: #655e00;
  --color-warning-950: #494400;
  --color-info: #17a1fd;
  --color-info-50: #cdebff;
  --color-info-100: #b9e3fe;
  --color-info-200: #90d2fe;
  --color-info-300: #68c2fe;
  --color-info-400: #3fb1fd;
  --color-info-500: #17a1fd;
  --color-info-600: #0284da;
  --color-info-700: #0162a2;
  --color-info-800: #01406b;
  --color-info-900: #001f33;
  --color-info-950: #000e17;
  --font-sans: "Inter", sans-serif;
  --color-neutral-50: #f5f5f5;
  --color-neutral-100: #e0e0e0;
  --color-neutral-200: #c2c2c2;
  --color-neutral-300: #a3a3a3;
  --color-neutral-400: #858585;
  --color-neutral-500: #666666;
  --color-neutral-600: #4d4d4d;
  --color-neutral-700: #333333;
  --color-neutral-800: #1a1a1a;
  --color-neutral-900: #0d0d0d;
  --color-neutral-950: #000000;
}

:root {
  /* HUD Color Palette - Enhanced Vibrant Colors */
  --hud-health-low: #ff1744;
  --hud-health-mid: #ff9800;
  --hud-health-high: #4caf50;
  --hud-armor: #2196f3;
  --hud-stress: #9443ff;

  --hud-thirst: #00bcd4;
  --hud-hunger: #ff5722;
  --hud-vocal-whisper: #00bcd4;
  --hud-vocal-normal: #4caf50;
  --hud-vocal-shout: #ff9800;
  --hud-neutral: #607d8b;

  /* HUD Base Colors */
  --hud-bg-base: rgba(20, 20, 20, 0.85);
  --hud-bg-hover: rgba(25, 25, 25, 0.9);
  --hud-border-base: rgba(255, 255, 255, 0.15);
  --hud-border-hover: rgba(255, 255, 255, 0.25);
  --hud-text-primary: rgba(255, 255, 255, 0.95);
  --hud-text-secondary: rgba(255, 255, 255, 0.8);

  /* HUD Sizing */
  --hud-icon-sm: 32px;
  --hud-icon-md: 40px;
  --hud-icon-lg: 48px;
  --hud-border-radius: 10px;
  --hud-progress-height: 3px;
  --hud-ring-width: 2px;
}

@layer base {
  html {
    @apply font-sans text-body;
  }
}

@layer components {
  /* Glass in/out animations */
  @keyframes glassIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes glassOut {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  .animate-glass-in {
    animation: glassIn 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  .animate-glass-out {
    animation: glassOut 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  /* Modern Glassmorphism Button Styles */
  .btn {
    @apply px-4 py-2 w-full max-w-xs font-bold flex justify-center items-center gap-2 cursor-pointer relative overflow-hidden;

    /* Glassmorphism effect matching inventory-slot-modern */
    background: rgba(17, 17, 17, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;

    /* Modern shadow matching inventory-slot-modern */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.2);

    /* Smooth transitions */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Text color */
    color: rgba(255, 255, 255, 0.9);
  }

  .btn::before {
    content: "";
    @apply absolute inset-0 pointer-events-none;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.02) 50%,
      rgba(255, 255, 255, 0.08) 100%
    );
    border-radius: 12px;
    opacity: 0.6;
  }

  .btn:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 20px rgba(255, 255, 255, 0.1);
  }

  .btn:active {
    transform: translateY(0px) scale(0.95);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }

  .btn:disabled:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  }

  .btn-full-width {
    @apply w-full max-w-none;
  }

  /* Color variants with glassmorphism */
  .btn-primary {
    background: rgba(237, 41, 57, 0.15);
    border-color: rgba(237, 41, 57, 0.3);
    color: rgba(237, 41, 57, 0.95);
  }

  .btn-primary::before {
    background: linear-gradient(
      135deg,
      rgba(237, 41, 57, 0.2) 0%,
      rgba(237, 41, 57, 0.05) 50%,
      rgba(237, 41, 57, 0.15) 100%
    );
  }

  .btn-primary:hover {
    background: rgba(237, 41, 57, 0.25);
    border-color: rgba(237, 41, 57, 0.5);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 20px rgba(237, 41, 57, 0.3);
  }

  .btn-success {
    background: rgba(0, 221, 92, 0.15);
    border-color: rgba(0, 221, 92, 0.3);
    color: rgba(0, 221, 92, 0.95);
  }

  .btn-success::before {
    background: linear-gradient(
      135deg,
      rgba(0, 221, 92, 0.2) 0%,
      rgba(0, 221, 92, 0.05) 50%,
      rgba(0, 221, 92, 0.15) 100%
    );
  }

  .btn-success:hover {
    background: rgba(0, 221, 92, 0.25);
    border-color: rgba(0, 221, 92, 0.5);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 20px rgba(0, 221, 92, 0.3);
  }

  .btn-warning {
    background: rgba(255, 243, 70, 0.15);
    border-color: rgba(255, 243, 70, 0.3);
    color: rgba(255, 243, 70, 0.95);
  }

  .btn-warning::before {
    background: linear-gradient(
      135deg,
      rgba(255, 243, 70, 0.2) 0%,
      rgba(255, 243, 70, 0.05) 50%,
      rgba(255, 243, 70, 0.15) 100%
    );
  }

  .btn-warning:hover {
    background: rgba(255, 243, 70, 0.25);
    border-color: rgba(255, 243, 70, 0.5);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 20px rgba(255, 243, 70, 0.3);
  }

  .btn-danger {
    background: rgba(248, 8, 28, 0.15);
    border-color: rgba(248, 8, 28, 0.3);
    color: rgba(248, 8, 28, 0.95);
  }

  .btn-danger::before {
    background: linear-gradient(
      135deg,
      rgba(248, 8, 28, 0.2) 0%,
      rgba(248, 8, 28, 0.05) 50%,
      rgba(248, 8, 28, 0.15) 100%
    );
  }

  .btn-danger:hover {
    background: rgba(248, 8, 28, 0.25);
    border-color: rgba(248, 8, 28, 0.5);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 20px rgba(248, 8, 28, 0.3);
  }

  .btn-neutral {
    background: rgba(115, 115, 115, 0.15);
    border-color: rgba(115, 115, 115, 0.3);
    color: rgba(245, 245, 245, 0.9);
  }

  .btn-neutral::before {
    background: linear-gradient(
      135deg,
      rgba(115, 115, 115, 0.2) 0%,
      rgba(115, 115, 115, 0.05) 50%,
      rgba(115, 115, 115, 0.15) 100%
    );
  }

  .btn-neutral:hover {
    background: rgba(115, 115, 115, 0.25);
    border-color: rgba(115, 115, 115, 0.5);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 20px rgba(115, 115, 115, 0.3);
  }

  /* Icon-only button variants */
  .btn-icon {
    @apply w-10 h-10 p-0 flex items-center justify-center min-w-0 max-w-none;
    border-radius: 10px;
  }

  .btn-icon-sm {
    @apply w-8 h-8 p-0 flex items-center justify-center min-w-0 max-w-none;
    border-radius: 8px;
  }

  .btn-icon-lg {
    @apply w-12 h-12 p-0 flex items-center justify-center min-w-0 max-w-none;
    border-radius: 14px;
  }

  .divider-hor {
    @apply h-px w-50 bg-neutral-700 my-4;
  }

  .divider-ver {
    @apply h-50 w-px bg-neutral-700 my-4;
  }

  .input {
    @apply p-2 w-full border-b rounded-t-md bg-transparent shadow-xl shadow-transparent border-neutral-500 placeholder:text-neutral-500 transition-all duration-300;
  }

  .input:focus {
    @apply outline-none bg-neutral-900/60 shadow-primary/10 border-primary;
  }

  input[type="text"]::placeholder,
  input[type="number"]::placeholder {
    color: #808080;
    opacity: 0.5;
  }

  .select {
    @apply appearance-none w-full p-2 pr-8 border rounded text-neutral-200 bg-neutral-900 border-neutral-700 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-transparent transition-all duration-300;
  }

  .select option {
    @apply bg-neutral-900 text-neutral-200;
  }

  .textarea {
    @apply p-2 w-full border rounded bg-transparent border-neutral-700 placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-transparent transition-all duration-300;
  }

  .radio {
    @apply appearance-none w-5 h-5 border shadow-md shadow-transparent rounded-full bg-transparent border-neutral-700 focus:outline-none focus:border-transparent hover:border-primary/70 transition-all duration-300 cursor-pointer relative;
  }

  .radio:checked {
    @apply border-primary bg-primary/20 shadow-primary/30;
  }

  .radio:checked::before {
    content: "";
    @apply absolute w-2.5 h-2.5 bg-primary rounded-full;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .radio:disabled {
    @apply bg-neutral-900/60 cursor-not-allowed border-danger/50;
  }

  .radio:disabled:checked {
    @apply cursor-not-allowed border-danger/50;
  }

  .radio:disabled:checked::before {
    @apply bg-danger cursor-not-allowed;
  }

  /* Checkbox custom styles */
  .checkbox-custom {
    @apply appearance-none w-5 h-5 border shadow-md shadow-transparent rounded bg-transparent border-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-transparent hover:border-primary/70 transition-all duration-300 cursor-pointer relative;
  }

  .checkbox-custom:checked {
    @apply border-primary bg-primary/20 shadow-primary/30;
  }

  .checkbox-custom:checked::after {
    content: "✓";
    @apply absolute text-primary text-sm font-bold;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
  }

  /* Otp styles */

  .otp-container {
    @apply flex flex-col gap-2 items-center justify-center;
  }

  .otp-group {
    @apply flex gap-2 items-center justify-center;
  }

  .otp-input {
    @apply w-12 h-12 text-center shadow-xl shadow-transparent text-xl font-bold border rounded bg-transparent border-neutral-700 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-transparent transition-all duration-300;
  }

  .otp-input:focus {
    @apply outline-none bg-neutral-900/60 shadow-primary/10;
  }

  .otp-input:disabled {
    @apply bg-neutral-900/60 cursor-not-allowed border-danger/50;
  }

  .otp-input:read-only {
    @apply bg-neutral-900/60 cursor-not-allowed;
  }

  /* Textarea styles */

  .textarea {
    @apply p-2 w-full border rounded bg-transparent shadow-xl shadow-transparent border-neutral-700 placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-transparent transition-all duration-300;
  }

  .textarea:focus {
    @apply outline-none bg-neutral-900/60 shadow-primary/10;
  }

  /* Modal styles */
  .modal-overlay {
    @apply fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm;
  }

  .modal-content {
    @apply bg-neutral-900 rounded-lg p-6 w-full max-w-md mx-4 border border-neutral-700 shadow-2xl;
  }

  .modal-header {
    @apply flex justify-between items-center mb-4;
  }

  .modal-body {
    @apply text-neutral-200 leading-relaxed;
  }

  /* Modern Glassmorphism Card Styles */
  .card {
    @apply w-full max-w-md mx-4 relative overflow-hidden;

    /* Glassmorphism effect matching inventory-slot-modern */
    background: rgba(17, 17, 17, 0.712);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;

    /* Modern shadow matching inventory-slot-modern */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.2);

    /* Smooth transitions */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .card::before {
    content: "";
    @apply absolute inset-0 pointer-events-none;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.02) 50%,
      rgba(255, 255, 255, 0.08) 100%
    );
    border-radius: 12px;
    opacity: 0.6;
  }

  .card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 20px rgba(255, 255, 255, 0.1);
  }

  .card-header {
    @apply flex justify-between items-center p-4 border-b relative z-10;
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px 12px 0 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .card-header:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
  }

  .card-header.card-primary {
    background: rgba(237, 41, 57, 0.08);
    border-color: rgba(237, 41, 57, 0.15);
  }

  .card-header.card-primary:hover {
    background: rgba(237, 41, 57, 0.12);
    border-color: rgba(237, 41, 57, 0.25);
  }

  .card-header.card-success {
    background: rgba(0, 221, 92, 0.08);
    border-color: rgba(0, 221, 92, 0.15);
  }

  .card-header.card-success:hover {
    background: rgba(0, 221, 92, 0.12);
    border-color: rgba(0, 221, 92, 0.25);
  }

  .card-header.card-warning {
    background: rgba(255, 243, 70, 0.08);
    border-color: rgba(255, 243, 70, 0.15);
  }

  .card-header.card-warning:hover {
    background: rgba(255, 243, 70, 0.12);
    border-color: rgba(255, 243, 70, 0.25);
  }

  .card-header.card-danger {
    background: rgba(248, 8, 28, 0.08);
    border-color: rgba(248, 8, 28, 0.15);
  }

  .card-header.card-danger:hover {
    background: rgba(248, 8, 28, 0.12);
    border-color: rgba(248, 8, 28, 0.25);
  }

  .card-header.card-info {
    background: rgba(23, 161, 253, 0.08);
    border-color: rgba(23, 161, 253, 0.15);
  }

  .card-header.card-info:hover {
    background: rgba(23, 161, 253, 0.12);
    border-color: rgba(23, 161, 253, 0.25);
  }

  .card-body {
    @apply text-neutral-200 leading-relaxed p-4 relative z-10;
    background: rgba(255, 255, 255, 0.01);
    border-radius: 0 0 12px 12px;
  }

  .card-title {
    @apply text-2xl font-bold flex items-center gap-2 relative z-10;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  }

  .card-title.card-primary {
    color: rgba(237, 41, 57, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 10px rgba(237, 41, 57, 0.3);
  }

  .card-title.card-success {
    color: rgba(0, 221, 92, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 221, 92, 0.3);
  }

  .card-title.card-warning {
    color: rgba(255, 243, 70, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 243, 70, 0.3);
  }

  .card-title.card-danger {
    color: rgba(248, 8, 28, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 10px rgba(248, 8, 28, 0.3);
  }

  .card-title.card-info {
    color: rgba(23, 161, 253, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 10px rgba(23, 161, 253, 0.3);
  }

  .card-text {
    @apply text-neutral-200 leading-relaxed relative z-10;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  }

  /* Accordion styles */
  .accordion {
    @apply w-full flex flex-col gap-4;
  }

  .accordion-item {
    @apply rounded-lg w-full shadow-2xl;
  }

  .accordion-header {
    @apply flex justify-between items-center bg-neutral-500/10 rounded-t-lg p-4 border-b border-neutral-700 cursor-pointer hover:bg-neutral-500/50 transition-all duration-300;
  }

  .accordion-title {
    @apply text-2xl font-bold flex items-center gap-2 select-none;
  }

  .accordion-content {
    @apply border-b border-l border-r rounded-b-lg border-neutral-700;
    padding: 0;
    overflow: hidden;
  }

  /* Wrapper interno per il contenuto con padding fisso */
  .accordion-content-inner {
    @apply text-neutral-200 leading-relaxed p-4;
    transform: translateY(-100%);
    opacity: 0;
    transition: all 300ms ease-out;
  }

  /* Accordion aperto - animazione fluida del contenuto interno */
  .accordion-item.open .accordion-content-inner {
    transform: translateY(0);
    opacity: 1;
  }

  .divider-hor {
    @apply my-1 mx-2;
    height: 1px;
    margin: 0 8px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.15) 20%,
      rgba(255, 255, 255, 0.15) 80%,
      transparent 100%
    );
  }

  .glass {
    @apply overflow-hidden relative;
    /* Glassmorphism effect */
    background: rgba(17, 17, 17, 0.459);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px !important;

    /* Modern shadow */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  }

  .glass::before {
    content: "";
    @apply absolute inset-0 pointer-events-none;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.02) 50%,
      rgba(255, 255, 255, 0.08) 100%
    );
    border-radius: 12px;
    opacity: 0.6;
  }

  .glass-primary {
    @apply overflow-hidden relative;
    /* Glassmorphism effect */
    background: rgba(17, 17, 17, 0.459);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px !important;

    /* Modern shadow */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  }

  .glass-primary::before {
    @apply absolute inset-0 pointer-events-none;
    background: linear-gradient(
      135deg,
      rgba(237, 41, 57, 0.3) 0%,
      rgba(237, 41, 57, 0.06) 50%,
      rgba(237, 41, 57, 0.24) 100%
    );
    border-radius: 12px;
    opacity: 0.6;
  }

  @keyframes glass-reflect {
    0% {
      transform: translateX(-100%) skewX(-15deg);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    20% {
      transform: translateX(100%) skewX(-15deg);
      opacity: 1;
    }
    25% {
      opacity: 0;
    }
    100% {
      transform: translateX(100%) skewX(-15deg);
      opacity: 0;
    }
  }

  /* Developer panel button styles */
  .btn-dev {
    @apply px-2 py-1 text-xs font-medium rounded border transition-all duration-200 cursor-pointer;
    background: rgba(31, 41, 55, 0.8);
    border-color: rgba(75, 85, 99, 0.6);
    color: rgba(229, 231, 235, 0.9);
  }

  .btn-dev:hover {
    background: rgba(55, 65, 81, 0.9);
    border-color: rgba(107, 114, 128, 0.8);
    transform: translateY(-1px);
  }

  .btn-dev.btn-active {
    background: rgba(59, 130, 246, 0.8);
    border-color: rgba(59, 130, 246, 1);
    color: white;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
  }

  .btn-dev.btn-secondary {
    background: rgba(75, 85, 99, 0.6);
    border-color: rgba(107, 114, 128, 0.4);
  }

  .btn-dev.btn-danger {
    background: rgba(220, 38, 38, 0.8);
    border-color: rgba(220, 38, 38, 1);
    color: white;
  }

  .btn-dev.btn-danger:hover {
    background: rgba(239, 68, 68, 0.9);
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.4);
  }

  .btn-dev.btn-success {
    background: rgba(34, 197, 94, 0.8);
    border-color: rgba(34, 197, 94, 1);
    color: white;
  }

  .btn-dev.btn-success:hover {
    background: rgba(74, 222, 128, 0.9);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
  }
}

input[type="number"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Nasconde le frecce negli input di tipo numero per Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}