@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  --brand: #d7192f;
  --brand-dark: #a91022;
  --gold: #f2b705;
  --blue: #155eef;
  --green: #12805c;
  --ink: #182230;
  --muted: #667085;
  --bg: #f5f7fb;
  --panel: #ffffff;
  --panel-soft: #fffaf0;
  --line: #d9dee8;
  --danger: #c9183a;
  --shadow: 0 14px 34px rgba(24, 34, 48, .10);
  --soft-shadow: 0 8px 20px rgba(24, 34, 48, .08);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 260px),
    linear-gradient(135deg, #fff8df 0, #f6f8fc 42%, #edf3ff 100%);
  overflow-x: hidden;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: var(--brand);
}

a:hover {
  color: var(--brand-dark);
}

::selection {
  background: #ffe999;
  color: #241700;
}

.site-nav {
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid rgba(24, 34, 48, .10);
  box-shadow: 0 6px 22px rgba(24, 34, 48, .08);
  backdrop-filter: blur(16px) saturate(145%);
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--ink) !important;
  font-weight: 800;
  letter-spacing: 0;
}

.navbar-brand img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(24, 34, 48, .10);
}

.navbar-toggler {
  min-width: 46px;
  min-height: 46px;
  border-color: #ccd3df;
}

.navbar-collapse {
  padding: .35rem 0;
}

.nav-link {
  color: #344054 !important;
  border-radius: 8px;
  padding: .58rem .9rem !important;
  font-size: .94rem;
  font-weight: 700;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #fff !important;
  background: var(--brand);
  box-shadow: 0 8px 18px rgba(215, 25, 47, .22);
}

.hero {
  position: relative;
  padding: 4.4rem 0 2.6rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .25)),
    repeating-linear-gradient(135deg, rgba(215, 25, 47, .045) 0 1px, transparent 1px 18px);
}

.hero h1 {
  max-width: 920px;
  margin-inline: auto;
  color: #101828;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
}

.hero .lead {
  color: #596579 !important;
  line-height: 1.7;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1rem;
  padding: .42rem .72rem;
  border: 1px solid #ffd56b;
  border-radius: 8px;
  background: #fff7dd;
  color: #7a4d00;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.eyebrow::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(18, 128, 92, .14);
}

.casino-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  margin-top: 1rem;
  color: #586579;
  font-size: .9rem;
  font-weight: 600;
}

.casino-status .live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(18, 128, 92, .14);
}

main.container {
  min-width: 0;
}

.tool-card,
.content-card,
.game-card,
.combo-row,
.stat,
.responsible-note,
.ad-slot {
  border-radius: 8px;
}

.tool-card,
.content-card,
.game-card {
  position: relative;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow-wrap: anywhere;
}

.tool-card,
.content-card {
  padding: 1.35rem;
}

.game-card {
  display: flex;
  min-height: 248px;
  height: 100%;
  padding: 1.35rem;
  flex-direction: column;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.game-card:hover {
  transform: translateY(-4px);
  border-color: rgba(215, 25, 47, .34);
  box-shadow: 0 18px 40px rgba(24, 34, 48, .14);
}

.game-card h3 {
  color: #101828;
  font-weight: 800;
  letter-spacing: 0;
}

.game-card p,
.text-secondary,
.text-muted {
  color: var(--muted) !important;
}

.game-card .btn {
  margin-top: auto;
}

.game-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffe27a, var(--gold));
  color: #382300;
  font-size: 1.35rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 8px 18px rgba(242, 183, 5, .22);
}

.btn {
  position: relative;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-radius: 8px;
  overflow: hidden;
  border-width: 1px;
  font-weight: 750;
  letter-spacing: 0;
  touch-action: manipulation;
  transition: transform .14s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(1px);
}

.btn-sm {
  min-height: 38px;
}

.btn-brand {
  color: #fff;
  border-color: var(--brand);
  background: linear-gradient(135deg, var(--brand), #ec4356);
  box-shadow: 0 10px 22px rgba(215, 25, 47, .24);
}

.btn-brand:hover {
  color: #fff;
  border-color: var(--brand-dark);
  background: var(--brand-dark);
}

.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-primary {
  background: #fff;
  border-color: #cbd3df;
  color: #344054;
}

.btn-outline-secondary:hover,
.btn-outline-dark:hover,
.btn-outline-primary:hover {
  background: #243041;
  border-color: #243041;
  color: #fff;
}

.btn-outline-success:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.btn-outline-danger:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 255, 255, .46);
  transform: scale(0);
  animation: ripple .58s ease-out;
}

.form-control,
.form-select {
  min-height: 48px;
  color: var(--ink);
  background-color: #fff;
  border: 1px solid #cbd3df;
  border-radius: 8px;
  box-shadow: inset 0 1px 3px rgba(24, 34, 48, .04);
}

.form-control::placeholder {
  color: #98a2b3;
}

.form-control:focus,
.form-select:focus {
  color: var(--ink);
  background-color: #fff;
  border-color: var(--blue);
  box-shadow: 0 0 0 .22rem rgba(21, 94, 239, .16);
}

.form-check-input {
  border-color: #aeb8c8;
}

.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}

.control-label {
  margin-bottom: .42rem;
  color: #344054;
  font-size: .9rem;
  font-weight: 750;
}

.responsible-note {
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  color: #604600;
  background: #fff8df;
  border: 1px solid #efd480;
  border-left: 5px solid var(--gold);
  box-shadow: var(--soft-shadow);
  font-size: .92rem;
}

.ad-slot,
.ad-unit {
  min-height: 90px;
  display: grid;
  place-items: center;
  margin: 1.4rem 0;
  color: #8a94a6;
  border: 1px dashed #c6ceda;
  background: rgba(255, 255, 255, .62);
}

.ad-unit-horizontal {
  width: 100%;
  min-height: 96px;
}

.ad-slot span,
.ad-unit span {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.lotto-ball {
  position: relative;
  width: 54px;
  height: 54px;
  display: inline-grid;
  place-items: center;
  margin: .25rem;
  color: #291900;
  border: 2px solid #ffe28a;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, #fff 0 9%, #fff3a8 22%, #ffc629 56%, #d88b00 100%);
  box-shadow: inset -6px -8px 12px rgba(90, 54, 0, .15), inset 4px 4px 8px rgba(255, 255, 255, .60), 0 7px 15px rgba(95, 62, 0, .18);
  font-size: 1.08rem;
  font-weight: 800;
  animation: ballPop .30s cubic-bezier(.2, .8, .2, 1.2) both;
}

.combo-row {
  margin: .72rem 0;
  padding: .9rem;
  border: 1px solid #e1e6ef;
  background: linear-gradient(145deg, #fff, var(--panel-soft));
  box-shadow: var(--soft-shadow);
}

.stat {
  min-height: 82px;
  display: grid;
  place-items: center;
  padding: .85rem;
  text-align: center;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--soft-shadow);
}

.stat strong {
  display: block;
  color: var(--brand);
  font-size: 1.25rem;
  font-weight: 800;
}

.alert {
  border-radius: 8px;
}

.alert-success {
  color: #075e45;
  background: #e8f8f1;
  border-color: #a8e3cb;
}

.alert-danger {
  color: #97132b;
  background: #fff0f3;
  border-color: #f1b4c0;
}

.alert-info {
  color: #184f86;
  background: #eef7ff;
  border-color: #bfdcf8;
}

.alert-warning {
  color: #6e5400;
  background: #fff7d6;
  border-color: #ead478;
}

.list-group-item {
  color: #30394a;
  background: transparent;
  border-color: #e4e8f0;
}

.list-group-item-action:hover {
  color: var(--brand);
  background: #fff4f5;
}

.sticky-actions {
  position: sticky;
  bottom: .75rem;
  z-index: 5;
  padding: .75rem;
  border: 1px solid #dbe1ea;
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 -10px 26px rgba(24, 34, 48, .10);
  backdrop-filter: blur(14px);
}

.site-footer {
  margin-top: 3rem;
  padding: 2.25rem 0;
  color: #283143;
  border-top: 1px solid #dfe5ee;
  background: #fff;
}

.site-footer .container {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-footer a {
  margin-left: 1rem;
  color: #596579;
  font-weight: 700;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--brand);
}

.visually-live {
  min-height: 1.5rem;
}

.range-output {
  color: var(--brand);
  font-weight: 800;
}

.floating-spark {
  position: fixed;
  z-index: 9999;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  pointer-events: none;
  background: var(--gold);
  animation: sparkFly .65s ease-out forwards;
  box-shadow: 0 0 10px rgba(242, 183, 5, .55);
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: #2b3445;
  --bs-table-border-color: #e2e7ef;
}

.modal-content {
  color: var(--ink);
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(24, 34, 48, .18);
}

.wheel-wrap {
  position: relative;
  width: min(82vw, 390px);
  aspect-ratio: 1;
  margin-inline: auto;
}

.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, #d7192f 0 20deg, #f2b705 20deg 40deg, #155eef 40deg 60deg, #12805c 60deg 80deg, #ffffff 80deg 100deg, #d7192f 100deg 120deg, #f2b705 120deg 140deg, #155eef 140deg 160deg, #12805c 160deg 180deg, #ffffff 180deg 200deg, #d7192f 200deg 220deg, #f2b705 220deg 240deg, #155eef 240deg 260deg, #12805c 260deg 280deg, #ffffff 280deg 300deg, #d7192f 300deg 320deg, #f2b705 320deg 340deg, #155eef 340deg 360deg);
  box-shadow: inset 0 0 0 10px #fff, inset 0 0 0 12px #d9dee8, 0 18px 38px rgba(24, 34, 48, .18);
  transition: transform 1.6s cubic-bezier(.16, .84, .21, 1);
}

.wheel::after {
  content: "SPIN";
  position: absolute;
  inset: 50%;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  color: #fff;
  border-radius: 50%;
  background: #101828;
  font-weight: 800;
  letter-spacing: .06em;
}

.pointer {
  position: absolute;
  top: -4px;
  left: 50%;
  z-index: 2;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 0;
  border-bottom: 32px solid #101828;
}

.form-range {
  min-height: 44px;
}

:focus-visible {
  outline: 3px solid rgba(21, 94, 239, .34);
  outline-offset: 3px;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes ballPop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(.8);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes sparkFly {
  to {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media (hover: none) {
  .game-card:hover,
  .btn:hover,
  .nav-link:hover {
    transform: none;
  }
}

@media (max-width: 991.98px) {
  .site-nav .navbar-collapse {
    margin-top: .7rem;
    padding: .65rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--soft-shadow);
  }

  .site-nav .nav-link {
    display: block;
    margin: .12rem 0;
  }
}

@media (max-width: 575.98px) {
  .container {
    --bs-gutter-x: 1.15rem;
  }

  .navbar-brand span {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero {
    padding: 2.8rem 0 1.75rem;
  }

  .hero h1 {
    font-size: 2.15rem;
  }

  .hero .lead {
    font-size: 1rem;
    line-height: 1.6;
  }

  .tool-card,
  .content-card,
  .game-card {
    padding: 1rem;
  }

  .game-card {
    min-height: 224px;
  }

  .input-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
  }

  .input-group > .form-control,
  .input-group > .form-select,
  .input-group > .btn {
    width: 100%;
    border-radius: 8px !important;
  }

  .sticky-actions {
    bottom: calc(.45rem + env(safe-area-inset-bottom));
    padding: .65rem;
  }

  .sticky-actions .btn {
    width: 100%;
    margin: .2rem 0;
  }

  .lotto-ball {
    width: 44px;
    height: 44px;
    margin: .18rem;
    font-size: .95rem;
  }

  .combo-row {
    padding: .72rem;
  }

  .site-footer {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  }

  .site-footer .container {
    display: block;
    text-align: center;
  }

  .site-footer nav {
    margin-top: 1rem;
  }

  .site-footer a {
    display: inline-block;
    margin: .25rem .45rem;
  }

  .ad-slot {
    min-height: 76px;
  }
}