/* cyber-fix.css */

/* stop totale al glitch/logo multicolore */
.brand .name{
  position: relative !important;
  color: #ffffff !important;
  text-shadow:
    0 0 10px rgba(255,255,255,.03),
    0 0 18px rgba(255, 23, 68, .05) !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  mix-blend-mode: normal !important;
  letter-spacing: .20em !important;
}

.brand .name::before,
.brand .name::after{
  content: none !important;
  display: none !important;
}

.brand,
.brand *{
  transform: none !important;
}

/* topbar più pulita */
.topbar{
  overflow: hidden !important;
}

/* bottone rileva: cyber red/black, dritto, cattivo */
.btn{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 82px !important;
  width: 100% !important;
  padding: 0 24px !important;

  border-radius: 26px !important;
  border: 1px solid rgba(255, 38, 84, .42) !important;
  clip-path: none !important;
  transform: none !important;
  skew: none !important;

  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.28),
    0 0 12px rgba(255,255,255,.04) !important;

  background:
    radial-gradient(circle at 50% 14%, rgba(255,255,255,.10), transparent 28%),
    linear-gradient(180deg, rgba(255, 32, 76, .98) 0%, rgba(175, 10, 46, .98) 44%, rgba(30, 3, 9, 1) 100%) !important;

  box-shadow:
    0 18px 34px rgba(0,0,0,.42),
    0 0 14px rgba(255, 20, 68, .18),
    0 0 28px rgba(255, 20, 68, .10),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -14px 22px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255, 70, 110, .10) !important;

  overflow: hidden !important;
  position: relative !important;
}

.btn::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 40, 82, .08) 20%, rgba(255, 40, 82, .20) 50%, rgba(255, 40, 82, .08) 80%, transparent 100%) !important;
  opacity: .92 !important;
  mix-blend-mode: screen !important;
}

.btn::after{
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  border-left: 1px solid rgba(255,255,255,.04) !important;
  border-right: 1px solid rgba(255, 42, 86, .10) !important;
  border-bottom: 1px solid rgba(0,0,0,.28) !important;
}

.btn:hover{
  transform: none !important;
  filter: brightness(1.05) saturate(1.08) !important;
}

.btn:active{
  transform: scale(.989) !important;
  filter: brightness(.97) !important;
}

.btn span,
.btn b,
.btn strong{
  transform: none !important;
}

/* un po' più ordinato su mobile */
@media (max-width: 640px){
  .brand .name{
    letter-spacing: .16em !important;
  }

  .btn{
    min-height: 78px !important;
    border-radius: 22px !important;
    font-size: 20px !important;
  }
}

/* less round fix */
.topbar{
  border-radius: 18px !important;
}

.panel,
.results{
  border-radius: 20px !important;
}

.select,
.input{
  border-radius: 16px !important;
}

.btn{
  border-radius: 16px !important;
}

.btn::before,
.btn::after{
  border-radius: inherit !important;
}

#status:not(:empty){
  border-radius: 16px !important;
}

.card{
  border-radius: 16px !important;
}

@media (max-width: 640px){
  .topbar{
    border-radius: 16px !important;
  }

  .panel,
  .results{
    border-radius: 18px !important;
  }

  .select,
  .input,
  .btn,
  #status:not(:empty),
  .card{
    border-radius: 14px !important;
  }
}