:root {
  --bg: #050b12;
  --panel: #0d1723;
  --panel2: #132236;
  --line: #24445d;
  --pink: #13c7ed;
  --pink2: #5ee9ff;
  --text: #f6f8fb;
  --muted: #9cb0c3;
  --gold: #f5c34e;
  --violet: #8c5cff;
}

body {
  background:
    linear-gradient(rgba(2, 8, 14, .95), rgba(3, 8, 14, .98)),
    url("assets/apostar/hd/00_mockup_completo_referencia.png") center top / 1500px auto fixed;
}

.site-header {
  background: rgba(5, 12, 21, .96);
  border-bottom-color: #1f3c53;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .32);
}

.brand { width: 180px; height: 58px; }
.brand img, .mobile-menu-head img, .footer-logo img, .modal-logo, .game-shell-bar img {
  object-fit: contain;
}
.brand img { max-height: 56px; }

.desktop-nav { background: #0c1723; border-color: #24445d; }
.desktop-nav button:hover, .desktop-nav button.active { background: #16314a; color: var(--gold); }
.login-button, .balance-button { border-color: var(--pink); color: var(--pink2); }

.hero-carousel {
  background: #06111d;
  border: 1px solid #24445d;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .32), 0 0 34px rgba(19, 199, 237, .08);
}
.apostar-hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 50%, rgba(15, 157, 225, .33), transparent 33%),
    linear-gradient(112deg, #071421 0 48%, #0b2032 62%, #07101a 100%);
}
.apostar-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(94, 233, 255, .4) 1px, transparent 1.5px);
  background-size: 44px 44px;
  opacity: .17;
}
.hero-message {
  position: absolute;
  z-index: 2;
  left: clamp(42px, 7vw, 110px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.hero-slide .hero-message img {
  width: clamp(170px, 23vw, 340px);
  height: auto;
  object-fit: contain;
}
.hero-message strong { margin-top: 3px; font-size: clamp(19px, 2.2vw, 34px); color: #fff; }
.hero-message small { margin-top: 7px; font-size: clamp(11px, 1.2vw, 18px); color: var(--gold); font-weight: 800; }
.hero-slide .hero-gaucho-cutout {
  position: absolute;
  z-index: 1;
  right: 3%;
  bottom: -32%;
  width: min(46%, 620px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 28px rgba(19, 199, 237, .28));
}

.tressalas-modules {
  margin: 18px 0 20px;
  padding: 16px;
  border: 1px solid #1f3f58;
  border-radius: 8px;
  background: #08131f;
}
.module-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}
.module-heading > span {
  width: 4px;
  height: 24px;
  border-radius: 4px;
  background: linear-gradient(#f5c34e, #13c7ed);
}
.module-heading h2 {
  margin: 0;
  font-size: 20px;
}
.module-heading small {
  margin-left: auto;
  color: #8ca3b7;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.module-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
}
.module-grid button {
  position: relative;
  min-width: 0;
  aspect-ratio: 1.28 / 1;
  overflow: hidden;
  padding: 0;
  border: 1px solid #24445d;
  border-radius: 8px;
  background: #050d17;
  color: #fff;
  cursor: pointer;
  text-align: left;
}
.module-grid button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(2, 8, 14, .96) 88%);
}
.module-grid button:hover,
.module-grid button:focus-visible {
  border-color: #f5c34e;
  box-shadow: 0 0 22px rgba(19, 199, 237, .18);
  outline: none;
}
.module-grid button > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.module-grid button[data-sports-launch="horses-race"] > img,
.module-grid button[data-sports-launch^="sportsbook"] > img {
  object-fit: contain;
  padding: 4%;
  background: #030711;
}
.module-grid button > span {
  position: absolute;
  z-index: 2;
  left: 10px;
  right: 8px;
  bottom: 9px;
  display: block;
}
.module-grid strong,
.module-grid small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.module-grid strong { font-size: 12px; }
.module-grid small { margin-top: 2px; color: #9cb0c3; font-size: 9px; }
.module-grid em {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  background: #df264d;
  color: #fff;
  font-size: 8px;
  font-style: normal;
  font-weight: 950;
}

.category-rail button, .provider-rail, .new-provider-cards button, .game-card {
  background: linear-gradient(145deg, #122235, #09131f);
  border-color: #1f3f58;
}
.category-rail button.active, .category-rail button:hover, .game-card:hover { border-color: var(--gold); }
.category-rail img { filter: none; }
.provider-all { background: #102238; border-color: #2d5671; color: var(--gold); }
.provider-logo { background: #06101a; border-color: #274b64; }
.provider-tab.active .provider-logo, .provider-tab:hover .provider-logo { border-color: var(--pink); }
.new-provider-section h2 > span, .pink-bar { background: linear-gradient(var(--gold), #ff8c33); }
.category-chip.active, .category-chip:hover { background: #102c42; border-color: var(--pink); }
.primary-submit { background: linear-gradient(105deg, #f5c34e, #14c8ed 58%, #8c5cff); color: #06101a; }
.modal { border-color: #2d9fc1; background: linear-gradient(155deg, #112238, #07111d); }
.play-overlay { background: rgba(8, 157, 200, .7); }
.play-overlay::after { color: #008db8; }

.apostar-actions {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.apostar-actions-trigger {
  width: 76px;
  height: 64px;
  border: 1px solid #47e5ff;
  border-radius: 8px;
  background: linear-gradient(135deg, #14c8ed, #7554ef);
  color: #04101a;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 15px 34px rgba(0, 0, 0, .42);
}
.apostar-actions-trigger .dice-icon {
  position: relative; display: block; width: 27px; height: 27px; border: 2px solid #07101b; border-radius: 6px;
  background: linear-gradient(135deg, #f3d264, #39ddff 55%, #8b48ff); box-shadow: inset 0 0 8px #fff8;
}
.dice-icon i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #07101b; }
.dice-icon i:nth-child(1) { left: 5px; top: 5px; }.dice-icon i:nth-child(2) { right: 5px; top: 5px; }
.dice-icon i:nth-child(3) { left: 50%; top: 50%; transform: translate(-50%,-50%); }
.dice-icon i:nth-child(4) { left: 5px; bottom: 5px; }.dice-icon i:nth-child(5) { right: 5px; bottom: 5px; }
.apostar-actions-trigger small { font-size: 10px; font-weight: 950; }
.apostar-actions-menu { display: grid; gap: 8px; width: 208px; }
.apostar-actions-menu[hidden] { display: none !important; }
.apostar-actions-menu button {
  min-height: 50px;
  border: 1px solid #275476;
  border-radius: 8px;
  background: #0c1d2d;
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 10px;
  padding: 7px 13px;
  text-align: left;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.apostar-actions-menu img { width: 34px; height: 34px; object-fit: contain; }

@media (max-width: 820px) {
  .brand { width: 132px; height: 52px; }
  .apostar-hero { min-height: 190px; }
  .hero-slides { aspect-ratio: 2.15 / 1; }
  .hero-message { left: 20px; max-width: 52%; }
  .hero-message small { max-width: 180px; }
  .hero-slide .hero-gaucho-cutout { width: 58%; right: -6%; bottom: -3%; }
  .apostar-actions { bottom: 76px; right: 10px; }
  .apostar-actions-trigger { width: 62px; height: 56px; }
  .tressalas-modules { margin: 10px 0 12px; padding: 11px 8px; }
  .module-heading { margin: 0 4px 10px; }
  .module-heading h2 { font-size: 16px; }
  .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .module-grid button { aspect-ratio: 1.14 / 1; }
  .module-grid button > span { left: 7px; right: 6px; bottom: 7px; }
  .module-grid strong { font-size: 10px; }
  .module-grid small { font-size: 8px; }
}

@media (max-width: 430px) {
  .apostar-hero { min-height: 178px; }
  .hero-message { left: 14px; }
  .hero-message strong { font-size: 16px; }
  .hero-message small { font-size: 10px; }
  .hero-slide .hero-gaucho-cutout { width: 66%; right: -14%; }
  .module-heading small { display: none; }
  .module-grid button { min-height: 100px; }
}