/* =====================================================================
   FANTABALLA / GAME PASS — HALLOWEEN EDITION
   Aggiornamento SOLO VISIVO. Nessuna modifica a Firebase, IDs o gameplay.
   Aggiunto DOPO gli stili interni di gamepass.html.
   Palette: carbone, nero, arancio zucca, ambra.
   ===================================================================== */
:root {
  color-scheme: dark;
  --h-bg: #080707;
  --h-panel: #15100e;
  --h-panel-2: #20140f;
  --h-panel-dark: #0e0b0a;
  --h-orange: #ff851b;
  --h-orange-light: #ffc16d;
  --h-orange-deep: #c84c09;
  --h-ink: #0d0805;
  --h-line: rgba(255, 145, 57, .21);
  --h-muted: #c5b3a9;
  --h-glow: 0 0 36px rgba(251, 108, 16, .16);

  /* Compatibilita con i tre livelli CSS originari. */
  --bg0: #080707;
  --bg1: #110c0a;
  --panel: #160f0c;
  --panel2: #20140f;
  --cyan: var(--h-orange);
  --violet: #ff9b33;
  --pink: #ffd4a1;
  --gold: #ffc16d;
  --green: #ffab47;
  --ut-bg: #080707;
  --ut-panel: rgba(25, 16, 12, .92);
  --ut-panel-strong: #20150e;
  --ut-cyan: var(--h-orange);
  --ut-cyan-2: var(--h-orange-deep);
  --ut-gold: #ffc16d;
  --home-yellow: #ffa83d;
  --home-yellow-soft: #ffca81;
  --home-sky: var(--h-orange);
  --home-sky-soft: var(--h-orange-light);
  --home-field: #ff9b33;
  --home-field-dark: #bf4c0a;
  --home-royal: #9c350a;
  --home-red: #b93a13;
  --home-dark: #080707;
  --home-panel: #15100e;
  --home-panel-2: #20140f;
  --home-text: #fff2e7;
  --home-muted: #c5b3a9;
  --ring: 0 0 0 3px rgba(255, 133, 27, .28);
}

body {
  color: #f7ebe2 !important;
  background:
    radial-gradient(ellipse at 17% -7%, rgba(255, 126, 28, .19), transparent 35%),
    radial-gradient(ellipse at 92% 20%, rgba(137, 51, 14, .17), transparent 31%),
    radial-gradient(ellipse at 53% 93%, rgba(116, 35, 10, .13), transparent 34%),
    linear-gradient(180deg, #100b09, #090808 56%, #060606) !important;
}
body::before {
  background:
    linear-gradient(180deg, rgba(10, 6, 5, .22), rgba(0, 0, 0, .69)),
    repeating-linear-gradient(90deg, rgba(255, 149, 73, .023) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(180deg, rgba(255, 149, 73, .023) 0 1px, transparent 1px 56px) !important;
}
.bg-grid { opacity: .2 !important; }

/* Header / navigation */
.topbar {
  background: rgba(12, 8, 7, .94) !important;
  border-bottom: 1px solid var(--h-line) !important;
  box-shadow: 0 10px 38px rgba(0,0,0,.42) !important;
}
.brand .logo {
  background: linear-gradient(155deg, #422113, #190e0a) !important;
  border: 1px solid rgba(255, 148, 58, .53) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 188, 94, .07), 0 0 20px rgba(242, 102, 13, .14) !important;
}
.brand .logo span { color: var(--h-orange-light) !important; }
.ut-nav a { color: #bbaca3 !important; }
.ut-nav a:hover, .ut-nav a.is-active { color: var(--h-orange-light) !important; }
.ut-nav a.is-active::after {
  background: linear-gradient(90deg, #ff6b10, #ffc06a) !important;
  box-shadow: 0 0 14px rgba(255, 133, 27, .4) !important;
}
.profile-shortcut, .btnx, .btn {
  background: #21160f !important;
  border-color: rgba(255, 145, 57, .22) !important;
  color: #ffe4cd !important;
}
.profile-shortcut:hover, .btn:hover, .btnx:hover { border-color: rgba(255, 145, 57, .58) !important; }
.profile-avatar {
  background: linear-gradient(145deg, rgba(255, 133, 27, .25), rgba(98, 36, 8, .35)), #180e09 !important;
}
.profile-shortcut-label { color: var(--h-orange-light) !important; }
.profile-nav-link::before {
  background: var(--h-orange) !important;
  box-shadow: 0 0 12px rgba(255, 132, 27, .46) !important;
}
.btnx.primary, .btn.primary {
  background: linear-gradient(135deg, #ffc16d, #ff891e 48%, #e4600b) !important;
  border-color: #ffa03a !important;
  color: #220e02 !important;
  box-shadow: 0 10px 28px rgba(202, 72, 7, .22) !important;
}
.btn:focus-visible, .btnx:focus-visible, .ut-nav a:focus-visible,
.profile-shortcut:focus-visible, .filters input:focus-visible,
.filters select:focus-visible {
  outline: 3px solid #ffb85a !important;
  outline-offset: 3px;
}

/* Main hero, con scena illustrata al posto del banner Fantacalcio */
#status {
  background: #1a100d !important;
  border-color: var(--h-line) !important;
  color: var(--h-muted) !important;
}
#status::before { background: var(--h-orange) !important; box-shadow: 0 0 10px rgba(255,132,27,.56) !important; }
.hero.site-hero {
  isolation: isolate;
  border: 1px solid rgba(255, 148, 58, .3) !important;
  background: #100a09 !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.55), var(--h-glow) !important;
}
.hero.site-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 1 !important;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(12, 8, 7, .98) 0%, rgba(12, 8, 7, .94) 31%, rgba(14, 8, 6, .74) 51%, rgba(15, 8, 6, .16) 100%),
    url("./halloween-scene.svg") 74% center / cover no-repeat !important;
  pointer-events: none;
}
.hero.site-hero::after {
  content: "HALLOWEEN" !important;
  right: 28px !important;
  bottom: 10px !important;
  font-size: clamp(34px, 6.3vw, 100px) !important;
  color: rgba(255, 171, 80, .075) !important;
  letter-spacing: .08em !important;
  z-index: -1;
}
.hero.site-hero .hero-inner { min-height: 570px !important; }
.hero.site-hero .hero-left {
  position: relative;
  z-index: 1;
  width: min(100%, 830px) !important;
  padding: clamp(28px, 3.6vw, 58px) clamp(20px, 3.5vw, 56px) !important;
}
.hero-kicker-row { gap: 12px !important; }
.hero .pill.gold, .hero .season-chip {
  background: rgba(38, 17, 9, .83) !important;
  border: 1px solid rgba(255, 153, 62, .4) !important;
  color: #ffd29a !important;
  box-shadow: 0 0 16px rgba(247, 102, 17, .075) !important;
}
.hero .pill.gold::before { content: "✦"; font-size: 17px; color: #ff9a2d; }
.hero .headline {
  font-size: clamp(50px, 5.6vw, 100px) !important;
  line-height: .93 !important;
  letter-spacing: -.015em !important;
  margin: 8px 0 12px !important;
}
.hero .headline .line1 { color: #fff3e6 !important; text-shadow: 0 4px 23px rgba(0,0,0,.48) !important; }
.hero .headline .line2 {
  color: #ff982f !important;
  -webkit-text-fill-color: #ff982f !important;
  text-shadow: 0 0 44px rgba(255, 111, 16, .22) !important;
}
.hero .hero-desc {
  max-width: 620px !important;
  font-size: clamp(17px, 1.55vw, 22px) !important;
  line-height: 1.35 !important;
  color: #edddd2 !important;
}
.hero-site-note { color: #ffb576 !important; letter-spacing: .12em !important; }
.hero .meta-box {
  background: rgba(19, 11, 8, .9) !important;
  color: #ddc1ae !important;
  border-color: rgba(255, 140, 47, .2) !important;
}
.hero .meta-box strong { color: var(--h-orange-light) !important; }
.hero .level-card {
  max-width: 660px !important;
  background: linear-gradient(120deg, rgba(23, 13, 10, .97), rgba(34, 17, 9, .87)) !important;
  border: 1px solid rgba(255, 143, 50, .35) !important;
  box-shadow: 0 16px 46px rgba(0,0,0,.39) !important;
  backdrop-filter: blur(8px);
}
.level-card .bolt {
  background: rgba(255, 133, 27, .15) !important;
  border-color: rgba(255, 154, 65, .43) !important;
  color: #ffbe71 !important;
}
.nextbox .val, .pctline strong { color: #ffc06a !important; }
.barwrap { background: rgba(255, 154, 77, .1) !important; }
progress#gpProgressBar::-webkit-progress-value {
  background: linear-gradient(90deg, #db540a, #ff961f, #ffd38b) !important;
}
progress#gpProgressBar::-moz-progress-bar {
  background: linear-gradient(90deg, #db540a, #ff961f, #ffd38b) !important;
}

/* Dashboard cards and section containers */
.stats { background: transparent !important; }
.stat {
  background: linear-gradient(160deg, #23140e, #130e0c 74%) !important;
  border-color: rgba(255, 137, 38, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 177, 96, .035) !important;
}
.stat::before { background: linear-gradient(90deg, #fb7114, #ffbf6c, transparent) !important; }
.stat .ico {
  background: rgba(255, 128, 30, .12) !important;
  border-color: rgba(255, 139, 36, .27) !important;
  color: var(--h-orange-light) !important;
}
.stat .big { color: #fff0dc !important; }
.section-head { border-bottom-color: rgba(255, 142, 48, .18) !important; }
.section-head h2::before { background: var(--h-orange) !important; box-shadow: 0 0 16px rgba(255, 133, 27, .37) !important; }
.section-head h2 { color: #fff0e3 !important; }
.section-head .pill { color: var(--h-orange-light) !important; border-color: rgba(255, 145, 57, .2) !important; }
.road-wrap, .cards-wrap, .filters, #achGrid .card, #reqList .card {
  background: linear-gradient(160deg, #20140e, #110d0b) !important;
  border-color: rgba(255, 142, 51, .19) !important;
}
.road-wrap, .cards-wrap { box-shadow: inset 0 1px 0 rgba(255, 168, 83, .06) !important; }
.roadline, .gp-track-line { background: rgba(255, 139, 34, .15) !important; }
.roadfill, .gp-track-fill { background: linear-gradient(90deg, #cd4908, #ff8a1b, #ffc36c) !important; }
.mark .num, .bubble {
  background: #25170f !important;
  border-color: rgba(255, 143, 50, .3) !important;
}
.mark.unlocked .num, .bubble.unlocked {
  background: rgba(255, 130, 24, .19) !important;
  color: #ffd08c !important;
  border-color: rgba(255, 152, 54, .55) !important;
}
.mark.unlocked .pin, .cursor .dot {
  box-shadow: 0 0 0 6px rgba(255, 126, 21, .15), 0 5px 26px rgba(0,0,0,.42) !important;
}
.tier-card {
  background: linear-gradient(165deg, #24170f 0%, #120d0a 80%) !important;
  border-color: rgba(255, 148, 63, .26) !important;
}
.tier-card::before { background: linear-gradient(90deg, #e05a0c, #ffb357, transparent) !important; }
.tier-card:hover { border-color: rgba(255, 160, 64, .68) !important; box-shadow: var(--h-glow) !important; }
.tier-title { color: #ffe6cc !important; }
.chip, .badge, .typeTag {
  background: #281a12 !important;
  border-color: rgba(255, 158, 64, .2) !important;
  color: #f5cda9 !important;
}
#achGrid .card::before, #reqList .card::before {
  background: linear-gradient(180deg, #ffad4d, #cf4a0d, transparent) !important;
}
#achGrid .card:hover, #reqList .card:hover { border-color: rgba(255, 158, 58, .55) !important; }
.filters input[type="text"], .filters select, textarea,
input[type="url"], input[type="text"] {
  background: #130e0b !important;
  border-color: rgba(255, 145, 58, .27) !important;
  color: #fff0e3 !important;
}
.filters input::placeholder, textarea::placeholder { color: #9e8779 !important; }
.filters .selectWrap::after { color: var(--h-orange-light) !important; }
.sep { background: linear-gradient(90deg, #ff8a1f, #ffb65b, transparent) !important; }
.cards-scroll, #gpRoadScroll { scrollbar-color: rgba(255, 147, 43, .38) rgba(255, 255, 255, .035); }
.cards-scroll::-webkit-scrollbar-thumb, #gpRoadScroll::-webkit-scrollbar-thumb {
  background: rgba(255, 142, 36, .38) !important;
}

/* Contrast & responsive behavior */
@media (max-width: 1120px) {
  .hero.site-hero::before {
    background:
      linear-gradient(90deg, rgba(12, 8, 7, .99) 0%, rgba(12, 8, 7, .94) 42%, rgba(14, 8, 6, .56) 100%),
      url("./halloween-scene.svg") 78% center / cover no-repeat !important;
  }
}
@media (max-width: 680px) {
  .hero.site-hero .hero-inner { min-height: 0 !important; }
  .hero.site-hero .hero-left { width: 100% !important; padding: 27px 18px !important; }
  .hero .headline { font-size: clamp(40px, 10vw, 64px) !important; }
  .hero.site-hero::before {
    background:
      linear-gradient(180deg, rgba(13, 8, 7, .82), rgba(13, 8, 7, .94) 30%, rgba(13, 8, 7, .98) 100%),
      url("./halloween-scene.svg") 77% top / auto 365px no-repeat !important;
  }
  .hero.site-hero::after { font-size: 34px !important; bottom: 5px !important; }
  .hero-meta { grid-template-columns: 1fr !important; }
  .hero .level-card { padding: 16px !important; }
  .hero .hero-desc { font-size: 17px !important; }
  .stat { min-height: 132px !important; }
  .section-head h2 { font-size: 27px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btnx, .tier-card, .profile-shortcut { transition: none !important; }
}