/* ═══════════════════════════════════════════════════════════════
   SANTANDER ARCADE — DraftKings-style casino lobby

   Built against the real thing, not a guess. DraftKings Casino's
   lobby is a Netflix-style product surface, and the theme is:

   · near-black canvas (#080908), not navy and not grey
   · ONE brand green (#61B510) carrying every call to action, with
     near-black text on it — the strongest single tell of the brand
   · lime (#9AC434) and orange (#F6770E) as the only secondary accents
 · condensed bold uppercase display type (Roboto Condensed) over a
     plain grotesk body — US sportsbook typography, not designer sans
   · a wide promo carousel directly under the header
   · game tiles as rounded dark cards with the art filling the card
   · tight radii (4-6px), flat surfaces, no glass, no neon glow

   Colours taken from published brand palettes (Brandfetch / codeofcolors
   / colorswall agree on the #61B510 family). No DraftKings assets, marks
   or copy are used: the theme is emulated with our own content.

   No balance, no coins, no odds, no wager, no checkout anywhere.
   ═══════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}

:root{
  --bg:#080908;
  --surface:#121412;
  --surface-2:#1a1d1a;
  --surface-3:#22261f;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.18);
  --white:#f7f7f6;
  --muted:#9aa09a;
  --dim:#6f756e;
  --green:#61b510;
  --green-2:#4d9209;
  --lime:#9ac434;
  --orange:#f6770e;
  --cond:"Roboto Condensed",system-ui,sans-serif;
  --ui:"Roboto",system-ui,-apple-system,sans-serif;
  --wrap:1440px;
  --pad:clamp(14px,2.2vw,30px);
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--white);
  font-family:var(--ui);font-size:13.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:700}
p{margin:0}
::selection{background:var(--green);color:#080908}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* ── compliance strip ───────────────────────────────────────── */
.strip{background:#050605;border-bottom:1px solid var(--line)}
.strip-in{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:30px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);
}
.strip-in p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip-in p::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--green);margin-right:7px;vertical-align:1px;
}
.strip-nav{display:flex;gap:18px;flex:0 0 auto}
.strip-nav a:hover{color:var(--white)}

/* ── header ─────────────────────────────────────────────────── */
.hdr{
  position:sticky;top:0;z-index:50;background:var(--bg);
  border-bottom:1px solid var(--line);
}
.hdr-in{
  display:flex;align-items:center;gap:clamp(14px,2.6vw,34px);height:58px;
}
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.brand-mark{
  display:grid;place-items:center;width:30px;height:30px;border-radius:5px;
  background:var(--green);color:#080908;
  font-family:var(--cond);font-weight:700;font-size:19px;line-height:1;
  padding-bottom:2px;
}
.brand-word{
  display:flex;flex-direction:column;line-height:1.1;
  font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.06em;
}
.brand-word em{
  font-style:normal;color:var(--green);letter-spacing:.16em;font-size:.9em;
}

.hdr-nav{display:flex;gap:4px}
.hdr-nav a{
  font-size:12.5px;font-weight:500;color:var(--muted);
  padding:7px 11px;border-radius:4px;transition:color .14s,background .14s;
}
.hdr-nav a:hover{color:var(--white);background:var(--surface)}
.hdr-nav a.on{color:var(--white);font-weight:700}
.hdr-nav a.on::after{
  content:"";display:block;height:2px;margin-top:6px;background:var(--green);
  border-radius:2px;
}

.hdr-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.search{
  display:flex;align-items:center;gap:7px;height:34px;padding:0 11px;
  background:var(--surface);border:1px solid var(--line);border-radius:5px;
  width:min(240px,26vw);transition:border-color .15s;
}
.search:focus-within{border-color:var(--green)}
.search svg{width:14px;height:14px;color:var(--dim);flex:0 0 auto}
.search input{
  border:0;background:none;outline:none;color:var(--white);
  font-family:var(--ui);font-size:12.5px;width:100%;
}
.search input::placeholder{color:var(--dim)}

.btn-green{
  display:inline-flex;align-items:center;justify-content:center;
  height:34px;padding:0 16px;border-radius:5px;
  background:var(--green);color:#080908;
  font-family:var(--cond);font-weight:700;font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  transition:background .14s;
}
.btn-green:hover{background:var(--lime)}

/* ── carousel ───────────────────────────────────────────────── */
.main{padding-top:clamp(14px,2vw,22px);padding-bottom:44px}

.carousel{position:relative;border-radius:8px;overflow:hidden;background:var(--surface)}
.slides{display:grid}
.slide{
  display:none;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(16px,3vw,40px);align-items:center;
  padding:clamp(22px,3.4vw,44px);
  min-height:clamp(210px,26vw,320px);
  background:
    radial-gradient(700px 300px at 88% 30%,rgba(97,181,16,.28),transparent 66%),
    linear-gradient(115deg,#141714,#0b0d0b 62%);
}
.slide.on{display:grid}
.slide-k{
  font-family:var(--cond);font-weight:700;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green);margin-bottom:10px;
}
.slide-h{
  font-family:var(--cond);font-weight:700;
  font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:.92;
  letter-spacing:-.01em;text-transform:uppercase;margin-bottom:12px;
}
.slide-h em{font-style:normal;color:var(--green)}
.slide-b{font-size:13.5px;line-height:1.6;color:var(--muted);max-width:44ch;margin-bottom:18px}

.slide-art{
  position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;
  border:1px solid var(--line-2);background:#050605;
  box-shadow:0 24px 50px -24px rgba(0,0,0,1);
}
.slide-art img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(1.2) saturate(1.12);
}
.slide-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(97,181,16,.18),transparent 46%);
}

.dots{
  position:absolute;left:clamp(22px,3.4vw,44px);bottom:clamp(14px,1.8vw,20px);
  display:flex;gap:6px;
}
.dots i{
  width:18px;height:3px;border-radius:2px;background:rgba(255,255,255,.24);
  transition:background .2s,width .2s;
}
.dots i.on{background:var(--green);width:30px}

/* ── rails ──────────────────────────────────────────────────── */
.rail-sec{margin-top:clamp(18px,2.4vw,26px)}

.rail-head{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:12px;
}
.rail-head h2{
  font-family:var(--cond);font-weight:700;font-size:19px;letter-spacing:.01em;
  text-transform:uppercase;
}
.rail-head h2::before{
  content:"";display:inline-block;width:3px;height:15px;background:var(--green);
  margin-right:9px;vertical-align:-2px;border-radius:2px;
}
.rail-count{
  margin-left:auto;font-size:10.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);
}

.chips{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.chip{
  appearance:none;cursor:pointer;font-family:var(--ui);
  font-size:11px;font-weight:500;letter-spacing:.04em;
  padding:6px 12px;border-radius:100px;
  background:var(--surface);color:var(--muted);
  border:1px solid var(--line);transition:color .14s,border-color .14s,background .14s;
}
.chip:hover{color:var(--white);border-color:var(--line-2)}
.chip[aria-pressed="true"]{
  background:var(--green);color:#080908;border-color:var(--green);font-weight:700;
}
.rail-head .chips + .rail-count{margin-left:0}

.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,168px);
  gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;
}
.rail::-webkit-scrollbar{height:5px}
.rail::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:3px}

.grid{
  display:grid;gap:clamp(10px,1.2vw,14px);
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
}

/* ── a cabinet ──────────────────────────────────────────────── */
.cab{
  appearance:none;padding:0;cursor:pointer;text-align:left;
  font-family:inherit;color:inherit;background:var(--surface);
  border:1px solid var(--line);border-radius:7px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.cab:hover,.cab:focus-visible{
  border-color:var(--green);transform:translateY(-3px);
  box-shadow:0 14px 28px -14px rgba(0,0,0,.95);
  outline:none;
}

.cab-art{position:relative;aspect-ratio:4/3;overflow:hidden;background:#050605}
.cab-art img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(1.22) saturate(1.1);
  transition:transform .35s ease,filter .25s;
}
.cab:hover .cab-art img{transform:scale(1.05);filter:brightness(1.32) saturate(1.18)}

.cab-tag{
  position:absolute;top:7px;left:7px;z-index:2;
  font-family:var(--cond);font-weight:700;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#080908;background:var(--lime);
  border-radius:3px;padding:2px 6px;
}
.cab-go{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  background:rgba(8,9,8,.42);opacity:0;transition:opacity .15s;
}
.cab:hover .cab-go,.cab:focus-visible .cab-go{opacity:1}
.cab-go em{
  font-style:normal;font-family:var(--cond);font-weight:700;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:#080908;background:var(--green);border-radius:4px;padding:8px 16px;
}

.cab-plate{padding:8px 10px 9px;display:flex;flex-direction:column;gap:1px}
.cab-name{
  font-size:12px;font-weight:700;color:var(--white);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cab-by{
  font-size:10px;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.empty{
  grid-column:1/-1;padding:30px 14px;text-align:center;
  border:1px dashed var(--line-2);border-radius:7px;
  color:var(--dim);font-size:12px;
}

/* ── playing ────────────────────────────────────────────────── */
.play{
  margin:18px 0;border:1px solid var(--green);border-radius:8px;overflow:hidden;
  background:#050605;
}
.play-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 12px;background:var(--surface);border-bottom:1px solid var(--line);
}
.play-k{
  font-family:var(--cond);font-weight:700;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--green);
}
.play-title{
  font-family:var(--cond);font-weight:700;font-size:15px;text-transform:uppercase;
}
.close{
  margin-left:auto;appearance:none;cursor:pointer;
  font-family:var(--ui);font-size:11px;font-weight:500;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:4px;padding:6px 12px;transition:color .14s,border-color .14s;
}
.close:hover{color:var(--white);border-color:var(--line-2)}
.screen{position:relative;aspect-ratio:16/9;background:#000}
.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play-foot{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:8px 12px;background:var(--surface);border-top:1px solid var(--line);
  font-size:10.5px;color:var(--dim);
}

/* ── build ──────────────────────────────────────────────────── */
.build{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:clamp(18px,3vw,42px);align-items:center;margin-top:clamp(20px,2.8vw,30px);
  padding:clamp(18px,2.6vw,30px);
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
}
.kicker{
  font-family:var(--cond);font-weight:700;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green);margin-bottom:8px;
}
.build h2{
  font-family:var(--cond);font-weight:700;font-size:clamp(1.2rem,2.2vw,1.7rem);
  text-transform:uppercase;margin-bottom:10px;
}
.build p{font-size:13px;line-height:1.65;color:var(--muted);max-width:46ch;margin-bottom:16px}
.build b{color:var(--lime)}
.build-code{
  margin:0;background:#050605;border:1px solid var(--line);border-radius:6px;
  padding:15px 17px;overflow-x:auto;
}
.build-code code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;line-height:1.9;color:var(--lime);white-space:pre;
}

/* ── footer ─────────────────────────────────────────────────── */
.foot{background:#050605;border-top:1px solid var(--line);padding:28px 0 18px;margin-top:24px}
.foot-cols{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:24px;
  padding-bottom:22px;border-bottom:1px solid var(--line);
}
.foot-col{display:flex;flex-direction:column;gap:6px}
.foot-col h4{
  font-family:var(--cond);font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--white);margin-bottom:3px;
}
.foot-col a,.foot-col span{font-size:11.5px;color:var(--dim)}
.foot-col a:hover{color:var(--white)}
.brand-col p{font-size:11.5px;line-height:1.6;color:var(--dim);max-width:34ch;margin-top:10px}
.foot-base{
  display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;
  padding-top:14px;font-size:10.5px;color:#4e534d;
}

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:1000px){
  /* the dots are absolutely placed bottom-left; without extra padding the
     call to action sits right on top of them */
  .slide{grid-template-columns:1fr;min-height:0;padding-bottom:46px}
  .slide-art{display:none}
  .build{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .hdr-nav{display:none}
  .search{width:min(180px,34vw)}
}
@media (max-width:600px){
  .strip-nav{display:none}
  .strip-in{justify-content:center}
  .search{display:none}
  .grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .chips{margin-left:0;width:100%}
  .rail-count{margin-left:0}
  .foot-base{flex-direction:column}
  .slide-h{font-size:clamp(1.6rem,8vw,2.2rem)}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}