/* ===========================================================
   DUCKY VEGAS — home page styles
   Plain CSS. No framework, no build step, no preprocessor.
   Edit this file directly and reload.
   =========================================================== */

/* ---- Font ----------------------------------------------------------------
   Outfit is self-hosted rather than pulled from Google. Three reasons: it is
   one 32 KB request instead of two cross-origin ones, the page cannot be
   slowed down by somebody else's server, and no visitor data leaves for a
   third party just to render text. It is a variable font, so this single
   file covers every weight from 400 to 800. */
@font-face{
  font-family:'Outfit';
  src:url('/fonts/outfit-latin.woff2') format('woff2-variations'),
      url('/fonts/outfit-latin.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ---- Palette -------------------------------------------------------------
   Tropical night: deep ocean base, turquoise water, coral sunset, gold sand.
   Every colour used on the page is declared here, so re-theming later means
   editing this block and nothing else. */
:root{
  --ocean-900:#04121c;      /* page background            */
  --ocean-800:#071d2b;      /* alternating section bands  */
  --ocean-700:#0b2434;      /* cards                      */
  --ocean-600:#103246;      /* borders, inputs            */

  --teal:#2dd4bf;
  --teal-dim:#14b8a6;
  --coral:#ff6b4a;
  --sunset:#ff9a3c;
  --gold:#fbbf24;
  --palm:#22c55e;

  --ink:#ffffff;
  --ink-soft:#c2dbe6;
  --ink-mute:#7fa3b5;

  --sun-grad:linear-gradient(135deg,var(--coral),var(--sunset));
  --sea-grad:linear-gradient(135deg,var(--teal-dim),var(--teal));

  --radius:16px;
  --shell:1200px;
}

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

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--ocean-900);
  color:var(--ink);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 18px}

/* Utility: the small coloured label that sits above most section titles */
.eyebrow{
  font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal);margin:0 0 10px;
}
.sect-title{
  font-size:clamp(26px,5.5vw,42px);font-weight:800;line-height:1.15;margin:0 0 14px;
}
.sect-sub{color:var(--ink-mute);max-width:620px;margin:0 auto 34px;font-size:15px}
.center{text-align:center}

/* Gradient text, used for the accent words in headings */
.grad{background:var(--sun-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-sea{background:var(--sea-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 30px;border-radius:999px;font-weight:700;font-size:16px;
  transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn-sun{background:var(--sun-grad);color:#25120a;box-shadow:0 8px 26px rgba(255,107,74,.34)}
.btn-sun:hover{box-shadow:0 12px 34px rgba(255,107,74,.46)}
.btn-sea{background:var(--sea-grad);color:#042224;box-shadow:0 8px 26px rgba(20,184,166,.3)}
.btn-ghost{border:1.5px solid var(--ocean-600);color:var(--ink-soft)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn-lg{padding:17px 44px;font-size:17px}

/* ---- Header -------------------------------------------------------------
   The reference site uses a notched centre panel behind the logo. Same idea
   here, cut with clip-path so it costs no image. */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:80;
  background:rgba(4,18,28,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:66px;position:relative}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.01em}
.brand img{width:38px;height:38px;border-radius:50%}
.brand span{color:var(--ink)}
.brand em{font-style:normal;color:var(--gold)}

.nav{display:none;gap:30px;align-items:center}
.nav a{font-size:15px;color:var(--ink-soft);font-weight:500;transition:color .15s}
.nav a:hover{color:var(--teal)}
.hdr-cta{display:none}

.burger{
  width:42px;height:42px;border-radius:11px;background:var(--ocean-700);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4.5px;
  border:1px solid var(--ocean-600);
}
.burger i{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.burger.on i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Slide-down mobile menu */
.mnav{
  position:fixed;top:66px;left:0;right:0;z-index:79;
  background:var(--ocean-800);border-bottom:1px solid var(--ocean-600);
  transform:translateY(-120%);
  /* visibility, not just the transform: a translated panel can still be
     reachable by keyboard and still shows up in full-page captures. The
     delay lets the slide-out finish before it disappears. */
  visibility:hidden;
  transition:transform .3s cubic-bezier(.4,0,.2,1),visibility 0s linear .3s;
  padding:14px 18px 22px;
}
.mnav.on{transform:translateY(0);visibility:visible;transition-delay:0s,0s}
.mnav a{display:block;padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.05);font-weight:600}
.mnav a:last-of-type{border-bottom:0}
.mnav .btn{width:100%;margin-top:14px}

/* ---- Hero --------------------------------------------------------------- */
.hero{position:relative;padding:112px 0 64px;overflow:hidden;min-height:92vh;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
/* Two washes: one to darken for contrast, one to pull the brand colours in */
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(4,18,28,.72) 0%,rgba(4,18,28,.42) 40%,var(--ocean-900) 97%),
    linear-gradient(105deg,rgba(4,18,28,.94) 8%,rgba(4,18,28,.55) 52%,rgba(255,107,74,.10) 100%);
}
.hero-in{position:relative;z-index:2;width:100%;text-align:center}

.bonus-pill{
  display:inline-flex;align-items:center;gap:11px;
  background:var(--sun-grad);color:#25120a;
  padding:9px 20px 9px 10px;border-radius:999px;margin-bottom:26px;
  box-shadow:0 8px 28px rgba(255,107,74,.36);
}
.bonus-pill b{display:block;font-size:15px;line-height:1.15;font-weight:800}
.bonus-pill small{display:block;font-size:11.5px;opacity:.82;font-weight:600}
.bonus-ico{
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.9);
  display:grid;place-items:center;font-size:18px;flex:0 0 auto;
}

.hero h1{
  font-size:clamp(32px,8.2vw,62px);font-weight:800;line-height:1.1;
  margin:0 0 18px;letter-spacing:-.02em;
}
.hero h1 .l2{color:var(--ink-soft)}
.hero p.lede{
  color:var(--ink-mute);font-size:16px;max-width:560px;margin:0 auto 30px;
}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.proof{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:34px}
.faces{display:flex}
.faces i{
  width:40px;height:40px;border-radius:50%;border:2.5px solid var(--ocean-900);
  margin-left:-12px;display:grid;place-items:center;font-size:17px;font-style:normal;
  background:var(--ocean-700);
}
.faces i:first-child{margin-left:0}
.proof b{display:block;font-size:20px;font-weight:800;line-height:1.1}
.proof span{font-size:13px;color:var(--ink-mute)}

/* ---- Trust strip -------------------------------------------------------- */
.trust{background:var(--ocean-800);border-block:1px solid var(--ocean-600);padding:26px 0}
.trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 14px;text-align:center}
.trust-grid b{display:block;font-size:22px;font-weight:800;background:var(--sea-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.trust-grid span{font-size:12.5px;color:var(--ink-mute)}

/* ---- Sections ----------------------------------------------------------- */
.sect{padding:64px 0}
.sect-alt{background:var(--ocean-800)}

/* ---- Game grid ---------------------------------------------------------- */
.g-tools{display:flex;gap:10px;margin:0 auto 26px;max-width:560px}
.g-search{
  flex:1;display:flex;align-items:center;gap:9px;background:var(--ocean-700);
  border:1px solid var(--ocean-600);border-radius:999px;padding:11px 18px;
}
.g-search input{
  flex:1;background:none;border:0;color:var(--ink);font-size:15px;outline:none;min-width:0;
}
.g-search input::placeholder{color:var(--ink-mute)}

.games{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.gcard{
  background:var(--ocean-700);border:1px solid var(--ocean-600);
  border-radius:var(--radius);overflow:hidden;position:relative;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.gcard:hover{transform:translateY(-4px);border-color:var(--teal);
  box-shadow:0 14px 34px rgba(0,0,0,.45)}
.gcard-img{position:relative;aspect-ratio:1/1;background:var(--ocean-600);overflow:hidden}
.gcard-img img{width:100%;height:100%;object-fit:cover}
.hot{
  position:absolute;top:8px;left:8px;background:var(--sun-grad);color:#25120a;
  font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:999px;
  letter-spacing:.05em;text-transform:uppercase;
}
.gcard-body{padding:11px 12px 13px}
.gcard h3{font-size:14px;font-weight:700;margin:0 0 9px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.gcard .btn{width:100%;padding:9px 0;font-size:13.5px;border-radius:10px}

.g-more{display:flex;justify-content:center;margin-top:30px}
.g-empty{text-align:center;color:var(--ink-mute);padding:40px 0;display:none}

/* ---- Steps -------------------------------------------------------------- */
.steps{display:grid;gap:16px}
.step{
  background:var(--ocean-700);border:1px solid var(--ocean-600);
  border-radius:var(--radius);padding:26px 22px;position:relative;
}
.step-n{
  width:46px;height:46px;border-radius:14px;background:var(--sea-grad);
  color:#042224;font-weight:800;font-size:19px;display:grid;place-items:center;margin-bottom:15px;
}
.step h3{margin:0 0 8px;font-size:18px;font-weight:700}
.step p{margin:0;color:var(--ink-mute);font-size:14.5px}

/* ---- Feature cards ------------------------------------------------------ */
.feats{display:grid;gap:15px}
.feat{
  background:var(--ocean-700);border:1px solid var(--ocean-600);
  border-radius:var(--radius);padding:24px 20px;
}
.feat-ico{font-size:28px;margin-bottom:12px}
.feat h3{margin:0 0 7px;font-size:17px;font-weight:700}
.feat p{margin:0;color:var(--ink-mute);font-size:14.5px}

/* ---- Payments ----------------------------------------------------------- */
.pays{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pay{
  background:var(--ocean-700);border:1px solid var(--ocean-600);border-radius:12px;
  padding:11px 18px;font-size:14px;font-weight:600;color:var(--ink-soft);
  display:flex;align-items:center;gap:8px;
}

/* ---- FAQ ---------------------------------------------------------------- */
.faq{max-width:780px;margin:0 auto}
.qa{border-bottom:1px solid var(--ocean-600)}
.qa-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 2px;text-align:left;font-weight:600;font-size:16px;
}
.qa-q i{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--sun-grad);
  color:#25120a;display:grid;place-items:center;font-style:normal;font-size:14px;
  font-weight:800;transition:transform .25s;
}
.qa.on .qa-q i{transform:rotate(45deg)}
.qa-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.qa-a p{margin:0 0 19px;color:var(--ink-mute);font-size:15px}

/* ---- CTA band ----------------------------------------------------------- */
.cta{
  position:relative;text-align:center;padding:66px 0;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,107,74,.13),rgba(45,212,191,.10));
  border-block:1px solid var(--ocean-600);
}
.cta h2{font-size:clamp(25px,5.5vw,38px);font-weight:800;margin:0 0 14px;line-height:1.16}
.cta p{color:var(--ink-soft);max-width:520px;margin:0 auto 28px}

/* ---- Footer ------------------------------------------------------------- */
/* Extra bottom padding keeps the last row clear of the floating chat button,
   which sits 16px from the bottom on small screens. */
.ftr{background:var(--ocean-800);border-top:1px solid var(--ocean-600);padding:46px 0 92px}
@media(min-width:600px){.ftr{padding-bottom:30px}}
.ftr-top{display:grid;gap:30px;margin-bottom:32px}
.ftr-brand p{color:var(--ink-mute);font-size:14px;margin:13px 0 0;max-width:330px}
.ftr h4{font-size:14px;font-weight:700;margin:0 0 13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink)}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin-bottom:9px}
.ftr li a{color:var(--ink-mute);font-size:14.5px;transition:color .15s}
.ftr li a:hover{color:var(--teal)}

/* Compliance block — legally required, must stay visible on every page */
.compliance{
  background:var(--ocean-900);border:1px solid var(--ocean-600);border-radius:var(--radius);
  padding:20px;margin-bottom:26px;
}
.compliance p{margin:0 0 9px;font-size:13px;color:var(--ink-mute);line-height:1.65}
.compliance p:last-child{margin-bottom:0}
.compliance b{color:var(--gold)}
.age-badge{
  display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:2px solid var(--coral);color:var(--coral);font-weight:800;font-size:13px;
  float:left;margin:0 14px 6px 0;
}
.ftr-btm{
  border-top:1px solid var(--ocean-600);padding-top:20px;
  display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;
}
.ftr-btm small{color:var(--ink-mute);font-size:13px}
.socials{display:flex;gap:10px}
.socials a{
  width:38px;height:38px;border-radius:11px;background:var(--ocean-700);
  border:1px solid var(--ocean-600);display:grid;place-items:center;font-size:16px;
  transition:.15s;
}
.socials a:hover{border-color:var(--teal);transform:translateY(-2px)}

/* ---- Floating chat ------------------------------------------------------ */
.chat-fab{
  position:fixed;right:16px;bottom:16px;z-index:70;
  width:56px;height:56px;border-radius:50%;background:var(--sun-grad);
  display:grid;place-items:center;font-size:24px;
  box-shadow:0 10px 30px rgba(255,107,74,.44);
}
.chat-fab:active{transform:scale(.94)}

/* ---- Age gate ----------------------------------------------------------- */
.gate{
  position:fixed;inset:0;z-index:200;background:var(--ocean-900);
  display:grid;place-items:center;padding:22px;text-align:center;
}
.gate-card{max-width:400px}
.gate img{width:88px;height:88px;border-radius:50%;margin:0 auto 20px}
.gate h2{font-size:25px;font-weight:800;margin:0 0 12px}
.gate p{color:var(--ink-mute);font-size:14.5px;margin:0 0 24px}
.gate .btn{width:100%;margin-bottom:11px}
.gate small{display:block;color:var(--ink-mute);font-size:12px;margin-top:16px;line-height:1.6}

/* =========================================================================
   Wider screens. Mobile is the default above; these only add.
   ========================================================================= */
@media(min-width:600px){
  .games{grid-template-columns:repeat(3,1fr)}
  .trust-grid{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .feats{grid-template-columns:repeat(2,1fr)}
  .ftr-btm{flex-direction:row;justify-content:space-between}
}

@media(min-width:900px){
  .shell{padding:0 28px}
  .nav{display:flex}
  .hdr-cta{display:inline-flex}
  .burger{display:none}
  .mnav{display:none}
  .hero{padding:130px 0 80px;min-height:88vh}
  .hero-in{text-align:left}
  .hero p.lede{margin-left:0}
  .hero-actions{justify-content:flex-start}
  .proof{justify-content:flex-start}
  .sect{padding:86px 0}
  .games{grid-template-columns:repeat(6,1fr)}
  .feats{grid-template-columns:repeat(4,1fr)}
  .ftr-top{grid-template-columns:2fr 1fr 1fr 1fr}
  .sect-sub{margin-inline:auto}
}

/* Respect the reader who asked for less motion */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* =========================================================================
   LIVE CHAT PANEL
   Full screen on a phone, a floating card on a desktop.
   ========================================================================= */
.chatp{
  position:fixed;z-index:120;inset:0;
  background:var(--ocean-800);
  display:flex;flex-direction:column;
  transform:translateY(100%);visibility:hidden;
  transition:transform .32s cubic-bezier(.4,0,.2,1),visibility 0s linear .32s;
}
.chatp.on{transform:translateY(0);visibility:visible;transition-delay:0s,0s}
body.chat-open{overflow:hidden}
/* Paired with chat.js: the body is pinned at a negative offset so the
   page stays exactly where the visitor left it instead of snapping to
   the top the moment the panel opens. `top` is set by the script. */
body.chat-lock{position:fixed;left:0;right:0;width:100%}

.chatp-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;background:var(--ocean-700);
  border-bottom:1px solid var(--ocean-600);flex:0 0 auto;
}
.chatp-who{display:flex;align-items:center;gap:11px;min-width:0;flex:1 1 auto}
.chatp-av{
  width:40px;height:40px;border-radius:50%;background:var(--sea-grad);
  display:grid;place-items:center;font-size:20px;flex:0 0 auto;
}
.chatp-who b{display:block;font-size:15.5px;font-weight:700}
.chatp-who small{display:block;font-size:12.5px;color:var(--ink-mute)}
.chatp-who small.on{color:var(--palm)}
.chatp-who small.on::before{
  content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--palm);margin-right:6px;vertical-align:middle;
}
/* Messenger, beside the name. Only rendered when a username is saved in
   the panel, so the header does not gain a dead button. `margin-left:auto`
   keeps it and the close button together on the right however wide the
   name runs. */
.chatp-fb{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,#0695FF 0%,#A334FA 50%,#FF6968 100%);
  color:#fff;display:grid;place-items:center;flex:0 0 auto;
  text-decoration:none;
}
.chatp-fb[hidden]{display:none}
.chatp-fb svg{width:21px;height:21px;display:block}
.chatp-fb:active{transform:scale(.94)}
.chatp-x{
  width:36px;height:36px;border-radius:10px;background:var(--ocean-600);
  font-size:15px;flex:0 0 auto;
}

.chatp-body{
  flex:1;overflow-y:auto;padding:18px 14px;
  display:flex;flex-direction:column;gap:10px;
  -webkit-overflow-scrolling:touch;
}

.cmsg{
  max-width:82%;padding:10px 13px;border-radius:15px;font-size:14.5px;
  line-height:1.5;word-break:break-word;position:relative;
}
.cmsg time{display:block;font-size:10.5px;opacity:.6;margin-top:4px}
.cmsg-them{
  align-self:flex-start;background:var(--ocean-700);
  border:1px solid var(--ocean-600);border-bottom-left-radius:5px;
}
.cmsg-me{
  align-self:flex-end;background:var(--sea-grad);color:#042224;
  border-bottom-right-radius:5px;
}
.cmsg-img{
  display:block;max-width:100%;border-radius:10px;margin-bottom:6px;
  background:var(--ocean-600);
}
.cmsg-doc{
  display:inline-block;padding:8px 12px;background:rgba(0,0,0,.2);
  border-radius:9px;font-size:13.5px;margin-bottom:5px;
}
/* Copy-a-message and save-attachment affordances in chat bubbles,
   shared by the player panel (chat.js) and the operator panel. */
.cmsg-copy{
  display:inline-block;margin-left:6px;padding:0 6px;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:var(--ink-soft);border-radius:6px;
  font-size:12px;line-height:1.6;vertical-align:middle;
}
.cmsg-copy:hover{background:rgba(255,255,255,.28);color:var(--ink)}
.cmsg-dl{
  display:inline-block;margin:2px 0 6px;padding:3px 10px;
  background:rgba(255,255,255,.14);color:var(--ink);border-radius:8px;
  font-size:12px;text-decoration:none;
}
.cmsg-dl:hover{background:rgba(255,255,255,.28)}

.chatp-file{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 16px;background:var(--ocean-700);
  border-top:1px solid var(--ocean-600);font-size:13px;color:var(--ink-soft);
}
.chatp-file button{font-size:14px;color:var(--ink-mute)}

.chatp-foot{
  display:flex;align-items:center;gap:9px;padding:12px 14px;
  background:var(--ocean-700);border-top:1px solid var(--ocean-600);
  flex:0 0 auto;padding-bottom:calc(12px + env(safe-area-inset-bottom));
}
.chatp-clip{
  width:40px;height:40px;border-radius:11px;background:var(--ocean-600);
  display:grid;place-items:center;font-size:17px;cursor:pointer;flex:0 0 auto;
}
#chat-input{
  flex:1;min-width:0;background:var(--ocean-600);border:1px solid var(--ocean-600);
  border-radius:999px;padding:11px 17px;color:var(--ink);font-size:15px;outline:none;
}
#chat-input:focus{border-color:var(--teal)}
#chat-input::placeholder{color:var(--ink-mute)}
.chatp-send{
  width:42px;height:42px;border-radius:50%;background:var(--sun-grad);
  color:#25120a;font-size:16px;flex:0 0 auto;
}

@media(min-width:720px){
  .chatp{
    inset:auto 20px 20px auto;width:392px;height:min(620px,82vh);
    border-radius:20px;overflow:hidden;border:1px solid var(--ocean-600);
    box-shadow:0 26px 70px rgba(0,0,0,.6);
  }
  body.chat-open{overflow:auto}
}

/* ---- Toasts -------------------------------------------------------------
   Used for anything the player must actually notice, such as an attachment
   that was refused. Sits above the chat panel deliberately. */
.toast{
  position:fixed;left:50%;bottom:86px;z-index:200;
  transform:translate(-50%,16px);opacity:0;
  background:var(--ocean-700);border:1px solid var(--ocean-600);
  color:var(--ink);padding:12px 20px;border-radius:12px;
  font-size:14px;font-weight:500;max-width:calc(100% - 32px);
  box-shadow:0 12px 34px rgba(0,0,0,.5);
  transition:opacity .25s,transform .25s;pointer-events:none;text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast-error{border-color:var(--coral);color:#ffd9cf}
.toast-success{border-color:var(--palm);color:#c9f7dc}

/* `display:flex` above beats the plain hidden attribute, which left the
   attachment bar visible with nothing in it. */
.chatp-file[hidden]{display:none}

/* A styled element with display:grid/flex beats the plain hidden attribute,
   so panels stayed on screen after being 'hidden'. This has bitten twice
   now (the chat attachment bar, then the admin tab panes) - make the
   attribute authoritative everywhere. */
[hidden]{display:none !important}

/* ---- Two buttons per game card: chat for an ID, wallet for money ---- */
.gcard-btns{display:flex;flex-direction:column;gap:6px}
.gcard-btns .btn{width:100%;padding:8px 0;font-size:12.5px;border-radius:9px}

/* ---- Deposit / Cashout entry points ---- */
.wallet-cta{display:grid;gap:14px;max-width:560px;margin:0 auto}
.wcta{
  display:block;padding:24px 20px;border-radius:var(--radius);
  background:var(--ocean-700);border:1px solid var(--ocean-600);
  transition:transform .16s,border-color .16s,box-shadow .16s;text-align:center;
}
.wcta:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.42)}
.wcta-in:hover{border-color:var(--palm)}
.wcta-out:hover{border-color:var(--coral)}
.wcta-ico{
  display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  margin:0 auto 12px;font-size:22px;font-weight:800;
}
.wcta-in .wcta-ico{background:rgba(34,197,94,.16);color:var(--palm)}
.wcta-out .wcta-ico{background:rgba(255,107,74,.16);color:var(--coral)}
.wcta b{display:block;font-size:18px;font-weight:700;margin-bottom:3px}
.wcta small{display:block;font-size:13px;color:var(--ink-mute)}
@media(min-width:560px){.wallet-cta{grid-template-columns:1fr 1fr}}

/* =========================================================================
   SECRET ADMIN ENTRANCE
   Hold the logo for three seconds. A ring fills around it, then it flashes
   and the panel opens. Invisible until the hold begins.
   ========================================================================= */
.brand{position:relative;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.brand img{
  -webkit-user-drag:none;user-select:none;pointer-events:none;
  transition:transform .25s, filter .25s;
}

.hold-ring{
  position:absolute;left:-3px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;pointer-events:none;
  opacity:0;transition:opacity .18s;
}
.brand.holding .hold-ring,
.brand.unlocked .hold-ring{opacity:1}
.hold-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.hold-trk{fill:none;stroke:rgba(255,255,255,.12);stroke-width:2.5}
.hold-bar{fill:none;stroke:url(#holdgrad);stroke:var(--teal);stroke-width:2.5;stroke-linecap:round}

/* While held: the logo draws in and warms up, so the gesture feels alive
   rather than like a frozen page. */
.brand.holding img{transform:scale(.9);filter:brightness(1.25) saturate(1.3)}

/* Completed: one confident pulse, then the page changes. */
.brand.unlocked img{animation:unlockPop .6s cubic-bezier(.34,1.56,.64,1) forwards}
.brand.unlocked .hold-bar{stroke:var(--gold);animation:unlockRing .6s ease-out forwards}

@keyframes unlockPop{
  0%{transform:scale(.9);filter:brightness(1.25)}
  45%{transform:scale(1.22);filter:brightness(2) drop-shadow(0 0 14px var(--gold))}
  100%{transform:scale(1);filter:brightness(1)}
}
@keyframes unlockRing{
  0%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.5)}
}

@media(prefers-reduced-motion:reduce){
  .brand.holding img,.brand.unlocked img{animation:none;transform:none}
}

/* ---- Shared form primitives -------------------------------------------
   Used by the wallet AND the admin panel. They live here, not in
   wallet.css, because admin.html does not load that file - which is
   exactly how the admin login form ended up unstyled. */
.wfield{margin-bottom:14px}
.wfield label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink-soft)}
.win,.wfield input,.wfield textarea,.wfield select{
  width:100%;background:var(--ocean-600);border:1px solid var(--ocean-600);
  border-radius:11px;padding:12px 15px;color:var(--ink);font-size:15px;
  outline:none;font-family:inherit;
}
.win:focus,.wfield input:focus,.wfield textarea:focus{border-color:var(--teal)}
.win::placeholder,.wfield input::placeholder{color:var(--ink-mute)}
select.win{appearance:none;cursor:pointer}
.wfull{width:100%;margin-top:14px}
.werr{color:#ff9d85;font-size:13.5px;min-height:18px;margin-top:10px}

/* The artwork is now a link to the game page, so it needs the anchor reset
   and a hint that it is clickable. */
a.gcard-img{display:block;cursor:pointer}
a.gcard-img img{transition:transform .25s}
.gcard:hover a.gcard-img img{transform:scale(1.05)}

/* ---- Footer money promise -------------------------------------------
   The headline claim now leads; the legally required notice stays, but as
   fine print underneath where it belongs. */
.money-promise{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.mp-ico{font-size:26px;flex:0 0 auto;line-height:1.2}
.money-promise b{display:block;font-size:17px;font-weight:800;margin-bottom:5px;
  background:var(--sea-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.money-promise p{margin:0;font-size:14px;color:var(--ink-soft);line-height:1.6}

.fineprint{margin:0;padding-top:14px;border-top:1px solid var(--ocean-600);
  font-size:11.5px;line-height:1.7;color:var(--ink-mute)}
.fineprint b{color:var(--gold)}
.age-badge-sm{display:inline-grid;place-items:center;width:26px;height:26px;
  border-radius:50%;border:1.5px solid var(--coral);color:var(--coral);
  font-weight:800;font-size:10px;float:left;margin:0 9px 3px 0}

/* ---- Back button ------------------------------------------------------
   Sits in the header on every page except the home page, which has nowhere
   to go back to. */
.goback{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:8px 14px;border-radius:999px;background:var(--ocean-700);
  border:1px solid var(--ocean-600);font-size:13.5px;font-weight:600;
  color:var(--ink-soft);transition:.15s;margin-right:10px;
}
.goback:hover{border-color:var(--teal);color:var(--teal);transform:translateX(-2px)}
.goback span{font-size:15px;line-height:1}
/* Narrow phones: the Back pill becomes arrow-only and the brand tightens up,
   so the wordmark can never slide under the sign-in buttons in .hdr-r. */
@media (max-width:440px){
  .goback{font-size:0;padding:8px 11px;margin-right:6px}
  .goback span{font-size:16px}
  .brand{font-size:16px;gap:8px}
  .hdr-r{gap:7px}
}
@media (max-width:380px){
  .goback{padding:8px 9px;margin-right:4px}
  .brand{font-size:15px;gap:7px}
  .hdr-r{gap:5px}
}


/* ── Reviews section (public) ──────────────────────────────────────────── */
#rv-avg .rv-stars{font-size:18px;vertical-align:-2px}
.rv-stars{color:var(--gold);letter-spacing:.06em}
.rv-stars .off{color:rgba(255,255,255,.18)}

.rvlist{
  display:grid;gap:16px;margin:30px 0 22px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.rvcard{
  background:var(--ocean-2);border:1px solid rgba(255,255,255,.07);
  border-radius:18px;padding:18px 19px;
}
.rvcard .rv-h{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.rvcard .rv-h div{min-width:0;flex:1}
.rvcard .rv-h b{display:block;font-size:14px}
.rvcard .rv-h small{display:block;font-size:11.5px;color:var(--ink-mute);margin-top:1px}
.rvcard p{font-size:14px;line-height:1.65;color:var(--ink-soft);margin:0}
.rv-av{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-weight:700;font-size:15px;color:#04121c;
  background:linear-gradient(135deg,var(--teal),var(--sun));
}
.rv-none{text-align:center;color:var(--ink-mute);padding:26px 0;grid-column:1/-1}

.rvform{
  max-width:620px;margin:34px auto 0;padding:26px 24px;
  background:var(--ocean-2);border:1px solid rgba(255,255,255,.07);border-radius:20px;
}
.rvform h3{margin:0 0 5px;font-size:19px}
.rv-note{font-size:13px;color:var(--ink-mute);margin:0 0 18px;line-height:1.55}
.rv-row{margin-bottom:15px}
.rv-lab{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}

/* The buttons are big enough to hit on a phone without zooming - a rating
   control that needs precision is a rating nobody leaves. */
.rv-pick{display:flex;gap:4px}
.rv-star{
  background:none;border:0;cursor:pointer;padding:2px 4px;line-height:1;
  font-size:30px;color:rgba(255,255,255,.18);transition:color .13s,transform .13s;
}
.rv-star:hover{transform:scale(1.14)}
.rv-star.on{color:var(--gold)}

.rv-err{color:var(--coral);font-size:13px;min-height:18px;margin:0 0 10px}


/* A note the chat script writes itself (instant-ID hand-off) */
.cmsg-note code{
  background:rgba(0,0,0,.07); padding:2px 6px; border-radius:5px;
  font:700 13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.cmsg-note a{ font-weight:600; }


/* ── Announcement bar ──────────────────────────────────────────────────
   Sits above everything and pushes the page down rather than covering the
   header — a bar that overlaps a fixed header hides the menu on phones. */
/* The announcement was a normal block at the very top of the document,
   which put it UNDER the fixed header, the logo rail and the live-wins
   strip - three layers, all with a higher z-index. The operator pressed
   Save, the panel said "Live on every page now", and on the site it was
   invisible. It sits above everything now, and the page below is pushed
   down by exactly its height (--annh, measured in promos.js) so nothing
   is covered in turn. */
.annbar{
  position:fixed; top:0; left:0; right:0; z-index:96;
  display:flex; align-items:center; gap:12px;
  padding:9px 16px;
  background:linear-gradient(90deg,#f97316,#fb923c);
  color:#1c1917; font:600 14px/1.4 'Outfit',system-ui,sans-serif;
}
body.has-annbar .hdr{ top:var(--annh,0px); }
body.has-annbar .mnav{ top:calc(66px + var(--annh,0px)); }
body.has-annbar{ padding-top:var(--annh,0px); }
/* The preview inside the admin panel is a copy of this bar sitting in a
   card, so it must stay where it was put. */
.acard .annbar, #ann-prev .annbar{ position:static; }
.annbar-txt{ flex:1; min-width:0; }
.annbar-cta{
  flex:0 0 auto; padding:5px 13px; border-radius:999px;
  background:rgba(28,25,23,.86); color:#fff; text-decoration:none;
  font-size:13px; font-weight:700; white-space:nowrap;
}
.annbar-cta:hover{ background:#1c1917; }
.annbar-x{
  flex:0 0 auto; width:26px; height:26px; cursor:pointer;
  background:rgba(28,25,23,.14); color:#1c1917;
  border:0; border-radius:7px; font-size:12px; line-height:1;
}
.annbar-x:hover{ background:rgba(28,25,23,.28); }
@media (max-width:560px){
  .annbar{ font-size:13px; padding:8px 12px; gap:8px; }
  .annbar-cta{ padding:4px 10px; font-size:12px; }
}

/* ── Promotions strip ──────────────────────────────────────────────── */
.promos[hidden]{ display:none !important; }
.promogrid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.promocard{
  display:block; padding:18px; border-radius:16px; text-decoration:none;
  background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(255,247,237,.96));
  border:1px solid rgba(249,115,22,.22);
  box-shadow:0 6px 18px rgba(124,45,18,.07);
  transition:transform .16s, box-shadow .16s;
}
a.promocard:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(124,45,18,.14); }
.promo-tag{
  display:inline-block; margin-bottom:9px; padding:3px 10px;
  border-radius:999px; background:#f97316; color:#fff;
  font:700 11px/1.5 'Outfit',system-ui,sans-serif;
  letter-spacing:.05em; text-transform:uppercase;
}
.promocard b{
  display:block; font:800 17px/1.3 'Outfit',system-ui,sans-serif;
  color:#1c1917; margin-bottom:6px;
}
.promocard p{ margin:0; font-size:14px; line-height:1.55; color:#57534e; }
.promo-code{
  display:inline-block; margin-top:11px; padding:5px 11px;
  border-radius:8px; background:rgba(249,115,22,.13);
  border:1px dashed rgba(249,115,22,.5); color:#9a3412;
  font:700 13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
}


/* ── Voice notes ───────────────────────────────────────────────────── */
.chatp-mic{
  flex:0 0 auto; width:38px; height:38px; cursor:pointer;
  background:rgba(0,0,0,.05); color:#475569;
  border:1px solid rgba(0,0,0,.10); border-radius:10px;
  font-size:16px; line-height:1;
  touch-action:none;             /* stop the press turning into a scroll */
  user-select:none; -webkit-user-select:none;
  transition:background .14s, transform .14s;
}
.chatp-mic:hover{ background:rgba(0,0,0,.09); }
.chatp-mic.rec{
  background:#dc2626; color:#fff; border-color:#dc2626;
  transform:scale(1.08);
  animation:micpulse 1.1s ease-in-out infinite;
}
@keyframes micpulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(220,38,38,.55); }
  50%    { box-shadow:0 0 0 8px rgba(220,38,38,0); }
}
@media (prefers-reduced-motion:reduce){
  .chatp-mic.rec{ animation:none; }
}
.cmsg-aud{ display:block; max-width:230px; width:100%; margin:2px 0; }


/* ── Call button + call panel (player) ─────────────────────────────── */
.chatp-call{
  margin-left:auto; margin-right:6px;
  width:34px; height:34px; cursor:pointer;
  background:rgba(255,255,255,.16); color:#fff;
  border:0; border-radius:10px; font-size:15px; line-height:1;
}
.chatp-call:hover{ background:rgba(255,255,255,.3); }
.callp{
  position:fixed; inset:0; z-index:9500;
  display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(4,10,20,.78);
}
.callp[hidden]{ display:none !important; }
.callp-box{
  width:100%; max-width:300px; padding:28px 22px; text-align:center;
  background:#0f172a; color:#fff; border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.callp-av{
  width:72px; height:72px; margin:0 auto 14px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.1); font-size:32px;
}
.callp-box b{ display:block; font:700 18px/1.3 'Outfit',system-ui,sans-serif; }
.callp-box span{
  display:block; margin-top:5px; font-size:14px; color:#94a3b8;
  font-variant-numeric:tabular-nums;
}
.callp-box small{
  display:block; margin-top:9px; font-size:12.5px; line-height:1.5; color:#cbd5e1;
}
.callp-end{
  margin-top:20px; padding:11px 26px; cursor:pointer;
  background:#dc2626; color:#fff; border:0; border-radius:999px;
  font:700 14px/1 'Outfit',system-ui,sans-serif;
}
.callp-end:hover{ background:#b91c1c; }


/* ── Wallet shortcuts: four across ─────────────────────────────────────
   Deposit, Cashout, My Games and Profile. Two rows of two on a phone,
   one row of four from tablet up. Wider than the old two-card block, so
   it overrides the 560px cap. */
.wallet-cta.four{
  max-width:940px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:760px){
  .wallet-cta.four{ grid-template-columns:repeat(4,1fr); }
}
.wallet-cta.four .wcta{ padding:20px 14px; }
.wallet-cta.four .wcta-ico{ width:42px; height:42px; font-size:19px; margin-bottom:10px; }
.wcta-games:hover{ border-color:var(--gold,#fbbf24); }
.wcta-me:hover{ border-color:var(--sea,#38bdf8); }


/* ── Sign-in wall inside chat ──────────────────────────────────────── */
.cwall{ padding:34px 22px; text-align:center; }
.cwall-ico{ font-size:34px; margin-bottom:12px; }
.cwall b{ display:block; font:800 18px/1.3 'Outfit',system-ui,sans-serif; color:#0f172a; }
.cwall p{ margin:9px 0 18px; font-size:14px; line-height:1.6; color:#475569; }
.cwall-go{ display:inline-block; }
.cwall small{ display:block; margin-top:12px; font-size:12.5px; color:#94a3b8; }

/* ── Incoming call (player) ────────────────────────────────────────── */
.callp-two{ display:flex; gap:10px; justify-content:center; margin-top:20px; }
.callp-yes{
  padding:11px 24px; cursor:pointer;
  background:#16a34a; color:#fff; border:0; border-radius:999px;
  font:700 14px/1 'Outfit',system-ui,sans-serif;
}
.callp-yes:hover{ background:#15803d; }
.callp-two .callp-end{ margin-top:0; }
.callp-av.ring{ animation:callring 1.3s ease-in-out infinite; }
@keyframes callring{
  0%,100%{ box-shadow:0 0 0 0 rgba(52,211,153,.5); }
  50%    { box-shadow:0 0 0 13px rgba(52,211,153,0); }
}
@media (prefers-reduced-motion:reduce){ .callp-av.ring{ animation:none; } }


/* ── Wallet shortcuts: three across ───────────────────────────────────
   Profile moved into the menu, so this is Deposit, Cashout and My Games.
   Full width each on a phone - three across a 390px screen leaves
   targets too narrow to tap confidently - and one row from tablet up. */
.wallet-cta.three{
  max-width:760px;
  grid-template-columns:1fr;
}
@media (min-width:640px){
  .wallet-cta.three{ grid-template-columns:repeat(3,1fr); }
}
.wallet-cta.three .wcta{ padding:22px 16px; }
.wallet-cta.three .wcta-ico{ width:44px; height:44px; font-size:20px; margin-bottom:11px; }


/* ═══════════════════════════════════════════════════════════════════════
   MOVEMENT

   Everything below is decoration, and decoration has two rules here.

   One: it must never move something a person is trying to read or tap.
   Text stays put; only borders, sheens and background strips drift.

   Two: it must all stop for prefers-reduced-motion. That setting is not
   a preference for most of the people who turn it on - it is vestibular
   illness, and a scrolling strip can genuinely make them unwell. Every
   animation in this block is switched off in one place at the bottom.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Logo rail ───────────────────────────────────────────────────────
   Two rows drifting in opposite directions. The track holds the logos
   TWICE and slides exactly -50%, so the second copy lands where the
   first began and the loop has no seam. */
.logorail{
  position:relative; overflow:hidden;
  padding:22px 0 24px;
  background:linear-gradient(180deg,var(--ocean-800,#0b1b2b),var(--ocean-900,#071320));
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
/* Fade the ends so logos arrive and leave instead of being cut off. */
.logorail::before, .logorail::after{
  content:''; position:absolute; top:0; bottom:0; width:90px; z-index:2;
  pointer-events:none;
}
.logorail::before{ left:0;  background:linear-gradient(90deg,var(--ocean-800,#0b1b2b),transparent); }
.logorail::after { right:0; background:linear-gradient(270deg,var(--ocean-800,#0b1b2b),transparent); }

.lr-row{ display:flex; width:max-content; }
.lr-row + .lr-row{ margin-top:14px; }
.lr-track{
  display:flex; gap:14px; padding-right:14px;
  animation:lrLeft 60s linear infinite;
  will-change:transform;
}
.lr-row.rev .lr-track{ animation-name:lrRight; animation-duration:72s; }
@keyframes lrLeft  { from{ transform:translateX(0) }    to{ transform:translateX(-50%) } }
@keyframes lrRight { from{ transform:translateX(-50%) } to{ transform:translateX(0) } }

/* Stopping on hover is what turns a decoration into something usable -
   a logo you spotted can be read instead of chased. */
.logorail:hover .lr-track{ animation-play-state:paused; }

.lr-item{
  flex:0 0 auto; display:block; width:74px; height:74px;
  border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
.lr-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.lr-item:hover{
  transform:translateY(-4px) scale(1.06);
  border-color:var(--gold,#fbbf24);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
}
@media (max-width:640px){
  .lr-item{ width:58px; height:58px; border-radius:13px; }
  .logorail{ padding:16px 0 18px; }
  .logorail::before, .logorail::after{ width:48px; }
}

/* ── Counting numbers ────────────────────────────────────────────────
   Tabular figures so the width does not jitter while it counts. */
.trust-grid b{ font-variant-numeric:tabular-nums; }

/* ── Payment strip ───────────────────────────────────────────────── */
.paystrip{
  display:flex; flex-wrap:wrap; gap:9px; justify-content:center;
  margin-top:22px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.07);
}
.paystrip[hidden]{ display:none !important; }
.pay-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:99px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  font:600 13px/1 'Outfit',system-ui,sans-serif;
  color:var(--ink-mute,#9fb0c6);
  transition:border-color .16s, color .16s, transform .16s;
}
.pay-chip:hover{ border-color:var(--palm,#34d399); color:var(--ink,#e8eef7); transform:translateY(-2px); }
.pay-chip i{ font-style:normal; font-size:15px; }

/* ── Review ticker ───────────────────────────────────────────────── */
.rvticker{
  display:flex; align-items:center; gap:14px;
  max-width:1100px; margin:0 auto; padding:10px 18px;
  border-radius:99px; overflow:hidden;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
}
.rvticker[hidden]{ display:none !important; }
.rvt-label{
  flex:none; font:900 10px/1 'Outfit',system-ui,sans-serif;
  letter-spacing:1.6px; color:var(--gold,#fbbf24); white-space:nowrap;
}
.rvt-track{
  display:flex; gap:38px; white-space:nowrap; min-width:0;
  animation:rvtScroll 46s linear infinite;
  will-change:transform;
}
.rvticker:hover .rvt-track{ animation-play-state:paused; }
@keyframes rvtScroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.rvt-item{ font-size:12.5px; color:rgba(255,255,255,.62); flex:0 0 auto; }
.rvt-item b{ color:var(--ink,#e8eef7); font-weight:700; }
.rvt-item .rvt-stars{ color:var(--gold,#fbbf24); letter-spacing:1px; }

/* ── Hero polish ─────────────────────────────────────────────────── */
/* A slow sheen across the brand words. background-clip means it lights
   the letters, not a box behind them. */
.hero h1 .grad{
  background-size:220% 100%;
  animation:gradSheen 7s ease-in-out infinite;
}
@keyframes gradSheen{
  0%,100%{ background-position:0% 50% }
  50%    { background-position:100% 50% }
}

/* The bonus pill breathes. Border and shadow only - the text does not
   move, so it stays readable. */
.bonus-pill{ animation:pillBreathe 4.5s ease-in-out infinite; }
@keyframes pillBreathe{
  0%,100%{ box-shadow:0 0 0 0 rgba(251,191,36,.28) }
  50%    { box-shadow:0 0 0 9px rgba(251,191,36,0) }
}

/* A light sweeps across the main button on hover. */
.hero-actions .btn-sun{ position:relative; overflow:hidden; }
.hero-actions .btn-sun::after{
  content:''; position:absolute; top:0; left:-120%;
  width:60%; height:100%; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);
}
.hero-actions .btn-sun:hover::after{ animation:btnSheen .75s ease-out; }
@keyframes btnSheen{ to{ left:130% } }

/* Scroll hint: a mouse outline with a drop inside. */
.scrollhint{
  display:block; width:24px; height:38px; margin:34px auto 0;
  border:2px solid rgba(255,255,255,.3); border-radius:14px;
  position:relative;
}
.scrollhint span{
  position:absolute; top:7px; left:50%; width:3px; height:7px;
  margin-left:-1.5px; border-radius:2px; background:rgba(255,255,255,.75);
  animation:hintDrop 1.9s ease-in-out infinite;
}
@keyframes hintDrop{
  0%      { transform:translateY(0);    opacity:0 }
  22%     { opacity:1 }
  72%,100%{ transform:translateY(14px); opacity:0 }
}
@media (max-width:900px){ .scrollhint{ display:none } }

/* ── The one switch that turns all of it off ─────────────────────── */
@media (prefers-reduced-motion:reduce){
  .lr-track,
  .lr-row.rev .lr-track,
  .rvt-track,
  .hero h1 .grad,
  .bonus-pill,
  .scrollhint span,
  .hero-actions .btn-sun:hover::after{
    animation:none !important;
  }
  .lr-item:hover{ transform:none; }
  /* Still readable without the drift: show the first screenful and stop. */
  .lr-track{ flex-wrap:nowrap; overflow:hidden; }
  .scrollhint span{ opacity:.8; }
}


/* ── Logo rail at the very top ─────────────────────────────────────────
   First thing under the header, before the hero. The header is fixed, so
   the rail carries its own clearance for it - and the hero no longer
   needs to leave room for a header it is not touching any more, so its
   top padding comes back down. Without that second half the page opens
   with a band of empty space. */
.logorail-top{
  margin-top:67px;                 /* header height + its 1px bottom border */
  border-top:0;
}
.logorail-top + .hero{ padding-top:46px; min-height:0; }
@media (min-width:900px){
  .logorail-top + .hero{ padding-top:62px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   FOUR KEYS
   Physical-looking buttons. The depth is a solid offset shadow rather
   than a blur - `0 6px 0 <darker>` reads as a key with a side to it,
   where a soft shadow just reads as a floating rectangle. Pressing
   shrinks that offset, so the key travels down under the finger.
   ═══════════════════════════════════════════════════════════════════════ */
.keyrow{
  display:grid; gap:10px; max-width:820px; margin:0 auto;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:720px){ .keyrow{ grid-template-columns:repeat(4,1fr); gap:14px; } }

.keybtn{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; padding:20px 10px 18px;
  border:0; border-radius:16px; cursor:pointer;
  font:800 14px/1 'Outfit',system-ui,sans-serif;
  letter-spacing:.3px; text-align:center;
  transform:translateZ(0);
  transition:transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .14s, filter .14s;
  animation:keyIn .5s both;
}
.keybtn svg{ width:26px; height:26px; transition:transform .18s; }
.keybtn span{ white-space:nowrap; }

/* Each key: face gradient, a hard edge below it, a coloured glow, and a
   highlight along the top lip. */
.key-dep{
  background:linear-gradient(145deg,#ffd75e,#f59e0b 68%,#d97706); color:#451a03;
  box-shadow:0 6px 0 #92400e, 0 14px 30px rgba(245,158,11,.4), inset 0 2px 0 rgba(255,255,255,.55);
}
.key-out{
  background:linear-gradient(145deg,#7dd3fc,#0ea5e9 62%,#0369a1); color:#04293d;
  box-shadow:0 6px 0 #075985, 0 14px 30px rgba(14,165,233,.4), inset 0 2px 0 rgba(255,255,255,.5);
}
.key-games{
  background:linear-gradient(145deg,#c4b5fd,#8b5cf6 62%,#6d28d9); color:#fff;
  box-shadow:0 6px 0 #4c1d95, 0 14px 30px rgba(139,92,246,.42), inset 0 2px 0 rgba(255,255,255,.35);
}
.key-chat{
  background:linear-gradient(145deg,#6ee7b7,#10b981 62%,#047857); color:#052e1c;
  box-shadow:0 6px 0 #065f46, 0 14px 30px rgba(16,185,129,.4), inset 0 2px 0 rgba(255,255,255,.5);
}

.keybtn:hover{ transform:translateY(-4px); filter:brightness(1.08); }
.key-dep:hover  { box-shadow:0 10px 0 #92400e, 0 20px 40px rgba(245,158,11,.5),  inset 0 2px 0 rgba(255,255,255,.55); }
.key-out:hover  { box-shadow:0 10px 0 #075985, 0 20px 40px rgba(14,165,233,.5),  inset 0 2px 0 rgba(255,255,255,.5); }
.key-games:hover{ box-shadow:0 10px 0 #4c1d95, 0 20px 40px rgba(139,92,246,.52), inset 0 2px 0 rgba(255,255,255,.35); }
.key-chat:hover { box-shadow:0 10px 0 #065f46, 0 20px 40px rgba(16,185,129,.5),  inset 0 2px 0 rgba(255,255,255,.5); }
.keybtn:hover svg{ transform:scale(1.14) rotate(-7deg); }

/* Pressed: the key travels down and its side shrinks to almost nothing. */
.keybtn:active{ transform:translateY(4px); }
.key-dep:active  { box-shadow:0 2px 0 #92400e, 0 4px 10px rgba(245,158,11,.4); }
.key-out:active  { box-shadow:0 2px 0 #075985, 0 4px 10px rgba(14,165,233,.4); }
.key-games:active{ box-shadow:0 2px 0 #4c1d95, 0 4px 10px rgba(139,92,246,.4); }
.key-chat:active { box-shadow:0 2px 0 #065f46, 0 4px 10px rgba(16,185,129,.4); }

/* A light crosses each key, one after another. */
.keybtn::after{
  content:''; position:absolute; top:-60%; left:-90%;
  width:45%; height:220%; pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);
  animation:keyShine 5s ease-in-out infinite;
}
@keyframes keyShine{
  0%, 62%  { left:-90% }
  78%, 100%{ left:150% }
}
@keyframes keyIn{
  from{ opacity:0; transform:translateY(14px) scale(.96) }
  to  { opacity:1; transform:translateY(0) scale(1) }
}
/* Staggered, so they land one after another instead of all at once. */
.keybtn:nth-child(1){ animation-delay:.05s } .keybtn:nth-child(1)::after{ animation-delay:0s }
.keybtn:nth-child(2){ animation-delay:.14s } .keybtn:nth-child(2)::after{ animation-delay:.5s }
.keybtn:nth-child(3){ animation-delay:.23s } .keybtn:nth-child(3)::after{ animation-delay:1s }
.keybtn:nth-child(4){ animation-delay:.32s } .keybtn:nth-child(4)::after{ animation-delay:1.5s }

@media (max-width:719px){
  .keybtn{ padding:16px 8px 14px; font-size:13px; border-radius:14px; }
  .keybtn svg{ width:22px; height:22px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LOGO RAIL — the premium pass
   A shallow perspective tilt, glass on every tile, and a reflected
   sheen crossing the whole strip. The tilt is 6 degrees: enough to read
   as depth, little enough that the logos stay square-on and legible.
   ═══════════════════════════════════════════════════════════════════════ */
.logorail{
  perspective:1100px;
  perspective-origin:50% 40%;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(56,189,248,.10), transparent 62%),
    linear-gradient(180deg,#081826,#050f1a);
}
.lr-row{ transform-style:preserve-3d; }
.lr-row:first-child{ transform:rotateX(7deg)  translateZ(14px); }
.lr-row.rev       { transform:rotateX(-5deg) translateZ(-10px); opacity:.92; }

.lr-item{
  position:relative;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 8px 18px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.26);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s, border-color .22s;
}
/* Glass: a highlight across the top third of every tile. */
.lr-item::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(160deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.06) 34%,transparent 52%);
}
.lr-item:hover{
  transform:translateY(-8px) scale(1.12) rotateX(-7deg);
  border-color:var(--gold,#fbbf24);
  box-shadow:
    0 18px 38px rgba(0,0,0,.6),
    0 0 26px rgba(251,191,36,.34),
    inset 0 1px 0 rgba(255,255,255,.4);
  z-index:3;
}

/* A slow sheen travelling across the whole strip, above the tiles. */
.logorail .lr-gloss{
  position:absolute; top:0; bottom:0; left:-30%; width:26%;
  pointer-events:none; z-index:3;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.07),transparent);
  transform:skewX(-14deg);
  animation:railGloss 9s ease-in-out infinite;
}
@keyframes railGloss{
  0%, 55%  { left:-30% }
  92%, 100%{ left:120% }
}

@media (prefers-reduced-motion:reduce){
  .keybtn, .keybtn::after, .logorail .lr-gloss{ animation:none !important; }
  .keybtn{ opacity:1; transform:none; }
  .lr-row:first-child, .lr-row.rev{ transform:none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   BOTTOM BAR — phones and small tablets only

   Hidden from 900px up, where the header menu is already visible and a
   bar across the bottom would just be in the way.
   ═══════════════════════════════════════════════════════════════════════ */
.tabbar{ display:none; }

@media (max-width:899px){
  .tabbar{
    position:fixed; left:0; right:0; bottom:0; z-index:75;
    display:grid; grid-template-columns:repeat(5,1fr);
    align-items:end;
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));
    background:rgba(6,20,32,.86);
    backdrop-filter:blur(16px);
    border-top:1px solid rgba(255,255,255,.09);
    box-shadow:0 -8px 28px rgba(0,0,0,.4);
  }

  /* Content has to end above the bar, or the footer sits underneath it. */
  body.has-tabbar{ padding-bottom:78px; }

  .tb{
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:6px 2px; border:0; background:none; cursor:pointer;
    color:rgba(255,255,255,.52);
    font:600 10.5px/1 'Outfit',system-ui,sans-serif;
    letter-spacing:.2px;
    transition:color .16s, transform .16s;
    -webkit-tap-highlight-color:transparent;
  }
  .tb svg{ width:22px; height:22px; transition:transform .18s; }
  .tb:active{ transform:scale(.9); }
  .tb.on{ color:var(--gold,#fbbf24); }
  .tb.on svg{ transform:translateY(-1px) scale(1.06); }

  /* A small dot under whichever tab you are on - colour alone is not
     enough for anybody who cannot separate these two shades. */
  .tb.on::after{
    content:''; width:4px; height:4px; border-radius:50%;
    background:currentColor; margin-top:1px;
  }

  /* The chat key is raised out of the bar. It is the one thing on this
     site a stuck player needs, and it should not look like a peer of
     "Offers". */
  .tb-chat{
    position:relative; top:-16px;
    width:56px; height:56px; margin:0 auto; padding:0;
    border-radius:50%; gap:2px;
    color:#052e1c !important;
    background:linear-gradient(145deg,#6ee7b7,#10b981 62%,#047857);
    box-shadow:
      0 5px 0 #065f46,
      0 12px 26px rgba(16,185,129,.45),
      inset 0 2px 0 rgba(255,255,255,.5);
    font-size:9px; font-weight:800;
  }
  .tb-chat svg{ width:21px; height:21px; }
  .tb-chat::after{ display:none !important; }
  .tb-chat:active{
    transform:translateY(4px) scale(.96);
    box-shadow:0 1px 0 #065f46, 0 4px 10px rgba(16,185,129,.4);
  }
  /* A slow ring, so it reads as "we are here" without nagging. */
  .tb-chat{ animation:tbPulse 3.4s ease-in-out infinite; }
  @keyframes tbPulse{
    0%,100%{ box-shadow:0 5px 0 #065f46, 0 12px 26px rgba(16,185,129,.45),
                        inset 0 2px 0 rgba(255,255,255,.5), 0 0 0 0 rgba(16,185,129,.5) }
    55%    { box-shadow:0 5px 0 #065f46, 0 12px 26px rgba(16,185,129,.45),
                        inset 0 2px 0 rgba(255,255,255,.5), 0 0 0 12px rgba(16,185,129,0) }
  }

  /* The floating bubble would sit on top of the bar, and the bar already
     has a chat button. One way in, not two. */
  body.has-tabbar .chat-fab{ display:none !important; }

  /* Keep the open chat panel clear of the bar. */
  body.has-tabbar .chatp{ bottom:78px; }
}

@media (max-width:899px) and (prefers-reduced-motion:reduce){
  .tb-chat{ animation:none; }
}


/* ── Bottom bar icons: filled and coloured ─────────────────────────────
   The icons carry their own colour now, so `color` no longer dims them -
   opacity does. Labels still follow `color`. */
@media (max-width:899px){
  .tb svg{ opacity:.6; transition:opacity .16s, transform .18s; }
  .tb.on svg{ opacity:1; transform:translateY(-2px) scale(1.12); }
  .tb.on{ color:#fff; }

  /* A soft halo behind the live tab, in that tab's own colour. */
  .tb{ position:relative; }
  .tb.on::before{
    content:''; position:absolute; top:2px; left:50%;
    width:34px; height:34px; margin-left:-17px; border-radius:50%;
    background:currentColor; opacity:.14; z-index:-1;
  }

  /* The chat key is already green; a green icon on it would vanish.
     Force the glyph dark so it reads against its own button. */
  .tb-chat svg{ fill:#04291b !important; opacity:1 !important; }
  .tb-chat.on svg{ transform:none; }
  .tb-chat::before{ display:none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   GAME CARDS IN 3D

   The tilt follows the cursor: the card leans towards wherever the mouse
   is, and a highlight slides across the artwork with it. ducky.js sets
   two custom properties per card and everything below reads them.

   Only the card under the cursor ever animates. Forty-two cards all
   drifting on their own would cost a phone real battery and turn the
   grid into noise you cannot read.
   ═══════════════════════════════════════════════════════════════════════ */
#games-grid{ perspective:1200px; }

.gcard{
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .35s cubic-bezier(.22,1,.36,1),
             border-color .2s, box-shadow .35s;
}

/* .tilt is added by script only on devices with a real pointer, so a
   phone never inherits a hover state it cannot leave. */
.gcard.tilt{
  transform:
    perspective(900px)
    rotateX(var(--ry, 0deg))
    rotateY(var(--rx, 0deg))
    translateY(-8px) scale(1.035);
  border-color:var(--gold,#fbbf24);
  box-shadow:
    0 26px 48px rgba(0,0,0,.6),
    0 0 30px rgba(251,191,36,.22);
  z-index:5;
}

/* The artwork lifts off the card face. This is the part that actually
   reads as depth rather than as a rotating rectangle. */
.gcard-img img{
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  backface-visibility:hidden;
}
.gcard.tilt .gcard-img img{ transform:translateZ(34px) scale(1.07); }

.gcard.tilt h3{ transform:translateZ(18px); }
.gcard h3{ transition:transform .35s cubic-bezier(.22,1,.36,1); }
.gcard.tilt .gcard-btns{ transform:translateZ(12px); }
.gcard-btns{ transition:transform .35s cubic-bezier(.22,1,.36,1); }

/* Light sliding across the glass, tracking the cursor. */
.gcard-img::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity .3s;
  background:radial-gradient(
    220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.30), rgba(255,255,255,.06) 42%, transparent 70%);
}
.gcard.tilt .gcard-img::after{ opacity:1; }

/* A thin lit edge along the top, as if something is shining above it. */
.gcard::before{
  content:''; position:absolute; top:0; left:12%; right:12%; height:2px;
  border-radius:0 0 3px 3px; pointer-events:none; z-index:2;
  background:linear-gradient(90deg,transparent,var(--gold,#fbbf24),transparent);
  opacity:0; transition:opacity .3s;
}
.gcard.tilt::before{ opacity:.9; }

/* Pressing one on a phone: a short push rather than a tilt. */
@media (hover:none){
  .gcard:active{ transform:scale(.97); transition:transform .1s; }
}

/* Cards turn in as they reach the screen, a few at a time. */
.gcard.rise{ animation:cardRise .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes cardRise{
  from{ opacity:0; transform:perspective(900px) rotateX(14deg) translateY(26px); }
  to  { opacity:1; transform:perspective(900px) rotateX(0) translateY(0); }
}

@media (prefers-reduced-motion:reduce){
  .gcard, .gcard-img img, .gcard h3, .gcard-btns{ transition:none !important; }
  .gcard.tilt{ transform:translateY(-4px); }
  .gcard.tilt .gcard-img img{ transform:none; }
  .gcard.rise{ animation:none; }
  .gcard-img::after{ display:none; }
}


/* ── "How would you like to reach us" ─────────────────────────────────
   A sheet, not a dropdown. On a phone it rises from the bottom where the
   thumb already is; on a laptop it sits in the middle. */
.cpick{
  position:fixed; inset:0; z-index:9200;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(4,10,20,.6); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .22s;
}
.cpick.on{ opacity:1; }
@media (min-width:640px){ .cpick{ align-items:center; } }

.cpick-box{
  width:100%; max-width:420px; padding:16px;
  background:var(--ocean-800,#0b1b2b);
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px 22px 0 0;
  box-shadow:0 -14px 50px rgba(0,0,0,.55);
  transform:translateY(24px); transition:transform .24s cubic-bezier(.22,1,.36,1);
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
}
.cpick.on .cpick-box{ transform:translateY(0); }
@media (min-width:640px){
  .cpick-box{ border-radius:20px; padding-bottom:16px; }
}

.cpick-h{
  display:flex; align-items:center; gap:10px;
  font:700 15px/1.3 'Outfit',system-ui,sans-serif;
  color:var(--ink,#e8eef7); margin-bottom:14px;
}
.cpick-x{
  margin-left:auto; width:30px; height:30px; flex:none; cursor:pointer;
  background:rgba(255,255,255,.08); color:var(--ink-mute,#9fb0c6);
  border:0; border-radius:9px; font-size:13px;
}
.cpick-x:hover{ background:rgba(255,255,255,.16); color:#fff; }

.cpick-o{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:14px 16px; margin-bottom:10px; cursor:pointer;
  text-align:left; text-decoration:none;
  border:1px solid rgba(255,255,255,.12); border-radius:15px;
  background:rgba(255,255,255,.04);
  transition:transform .15s, border-color .15s, background .15s;
}
.cpick-o:last-child{ margin-bottom:0; }
.cpick-o:hover{ transform:translateY(-2px); background:rgba(255,255,255,.08); }
.cpick-o:active{ transform:scale(.98); }
.cpick-o i{
  flex:0 0 42px; width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center; font-style:normal; font-size:20px;
}
.cpick-o i svg{ width:24px; height:24px; }
.cpick-o span{ display:block; min-width:0; }
.cpick-o b{
  display:block; font:700 15px/1.25 'Outfit',system-ui,sans-serif;
  color:var(--ink,#e8eef7);
}
.cpick-o small{
  display:block; margin-top:2px; font-size:12.5px;
  color:var(--ink-mute,#9fb0c6);
}

/* Brand colours, because these two are recognised by colour before the
   word is read. */
.cpick-live i{ background:linear-gradient(145deg,#6ee7b7,#10b981); }
.cpick-live:hover{ border-color:#34d399; }
.cpick-wa   i{ background:#25D366; color:#fff; }
.cpick-wa:hover{ border-color:#25D366; }
.cpick-tg   i{ background:#2AABEE; color:#fff; }
.cpick-tg:hover{ border-color:#2AABEE; }

@media (prefers-reduced-motion:reduce){
  .cpick, .cpick-box, .cpick-o{ transition:none !important; }
  .cpick-box{ transform:none; }
}

/* Admin: the link preview under the channel fields */
.soc-prev{ margin:4px 0 14px; }
.soc-line{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 11px; margin-bottom:6px; border-radius:9px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  font-size:13px; color:var(--ink-mute,#9fb0c6);
}
.soc-line b{ color:var(--ink,#e8eef7); flex:0 0 74px; }
.soc-line code{
  font:600 12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#7dd3fc; word-break:break-all;
}
.soc-line.bad{ border-color:rgba(248,113,113,.4); background:rgba(248,113,113,.08); }
.soc-line.bad span{ color:#fca5a5; }


/* ── Win ticker ────────────────────────────────────────────────────────
   One long line of wins sliding right to left, the way the reference
   site does it. The track holds the run TWICE and travels exactly -50%,
   so copy two lands where copy one started and the loop is seamless. */
.wintick{
  position:fixed; left:12px; top:78px; z-index:65;   /* top is set by script */
  display:flex; align-items:center; gap:11px;
  width:calc(100vw - 24px); max-width:560px;
  padding:8px 6px 8px 13px;
  border-radius:99px; overflow:hidden;
  background:rgba(6,20,32,.84); backdrop-filter:blur(12px);
  border:1px solid rgba(52,211,153,.28);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  pointer-events:none;              /* never in the way of a real control */
}
@media (min-width:900px){ .wintick{ left:18px; max-width:620px; } }

.wt-label{
  flex:none; display:flex; align-items:center; gap:6px;
  font:900 9.5px/1 'Outfit',system-ui,sans-serif;
  letter-spacing:1.4px; color:#34d399; white-space:nowrap;
}
.wt-label i{
  width:6px; height:6px; border-radius:50%; background:#34d399;
  animation:wtBlink 1.8s ease-in-out infinite;
}
@keyframes wtBlink{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }

/* The window the line travels through. */
.wt-win{ flex:1 1 auto; min-width:0; overflow:hidden; }
.wt-track{
  display:flex; gap:30px; width:max-content;
  white-space:nowrap;
  animation:wtScroll 44s linear infinite;
  will-change:transform;
}
@keyframes wtScroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

.wt-item{
  flex:0 0 auto;
  font:500 12px/1 'Outfit',system-ui,sans-serif;
  color:rgba(255,255,255,.58);
}
.wt-item b{ color:var(--ink,#e8eef7); font-weight:700; }
.wt-item em{ font-style:normal; font-weight:800; color:#34d399; }

@media (prefers-reduced-motion:reduce){
  .wt-track{ animation:none; }
  .wt-label i{ animation:none; }
}

/* ── "N playing" on a game card ──────────────────────────────────────── */
.gplay{
  display:flex; align-items:center; gap:5px;
  margin:-4px 0 9px;
  font:500 11.5px/1 'Outfit',system-ui,sans-serif;
  color:#64809a;
}
.gplay i{
  width:6px; height:6px; border-radius:50%; background:#34d399;
  flex:none; animation:wtLive 2.4s ease-out infinite;
}
.gplay span{
  font-weight:800; color:#8fb3cc;
  font-variant-numeric:tabular-nums;   /* width holds while it drifts */
}
.gplay span.bump{ animation:playBump .45s ease-out; }
@keyframes playBump{
  0%  { color:#34d399; transform:translateY(-1px) }
  100%{ color:#8fb3cc; transform:translateY(0) }
}
@media (prefers-reduced-motion:reduce){
  .gplay i{ animation:none; }
  .gplay span.bump{ animation:none; }
}


/* ── Proof row: real game logos instead of emoji ──────────────────────
   Same 40px circles, same overlap. The image has to fill its circle or
   the artwork sits in a box inside a ring and looks like a mistake. */
.faces i{ overflow:hidden; padding:0; }
.faces i img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:50%;
}
/* Stacked left over right, so the first one reads as the front of the
   pile rather than the back. */
.faces i{ position:relative; }
.faces i:nth-child(1){ z-index:5 }
.faces i:nth-child(2){ z-index:4 }
.faces i:nth-child(3){ z-index:3 }
.faces i:nth-child(4){ z-index:2 }
.faces i:nth-child(5){ z-index:1 }
.faces i{ transition:transform .18s; }
.faces:hover i{ margin-left:-6px; }        /* fan out a little on hover */
.faces:hover i:first-child{ margin-left:0; }
@media (prefers-reduced-motion:reduce){
  .faces i{ transition:none; }
  .faces:hover i{ margin-left:-12px; }
  .faces:hover i:first-child{ margin-left:0; }
}


/* ═══════════════════════════════════════════════════════════════════════
   OFFERS — movement

   Same restraint as everywhere else: nothing that moves text a reader is
   trying to follow. The card lifts, a light crosses it, the ribbon
   breathes and the code chip marches. The words stay still.
   ═══════════════════════════════════════════════════════════════════════ */
.promocard{
  position:relative; overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .3s cubic-bezier(.22,1,.36,1),
             box-shadow .3s, border-color .2s;
}

/* They arrive as you reach them, one after another. */
.promocard.rise{ animation:promoRise .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes promoRise{
  from{ opacity:0; transform:translateY(26px) rotateX(10deg) scale(.97); }
  to  { opacity:1; transform:translateY(0)   rotateX(0)     scale(1); }
}

/* A light sweeps across, one card at a time so it reads as a wave
   moving along the row rather than three things blinking together. */
.promocard::after{
  content:''; position:absolute; top:-60%; left:-100%;
  width:55%; height:230%; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);
  animation:promoShine 7s ease-in-out infinite;
}
.promocard:nth-child(2)::after{ animation-delay:.9s }
.promocard:nth-child(3)::after{ animation-delay:1.8s }
.promocard:nth-child(4)::after{ animation-delay:2.7s }
.promocard:nth-child(5)::after{ animation-delay:3.6s }
.promocard:nth-child(6)::after{ animation-delay:4.5s }
@keyframes promoShine{
  0%, 72%  { left:-100% }
  92%, 100%{ left:160% }
}

/* A warm edge that brightens as it comes forward. */
a.promocard:hover{
  transform:translateY(-7px) scale(1.02);
  box-shadow:0 22px 44px rgba(124,45,18,.22), 0 0 0 1px rgba(249,115,22,.4);
  border-color:rgba(249,115,22,.55);
}
a.promocard:active{ transform:translateY(-2px) scale(.995); }

/* The ribbon breathes, so the eye lands on it first. */
.promo-tag{
  position:relative;
  animation:promoTag 3.2s ease-in-out infinite;
}
@keyframes promoTag{
  0%,100%{ box-shadow:0 0 0 0 rgba(249,115,22,.45) }
  55%    { box-shadow:0 0 0 7px rgba(249,115,22,0) }
}
a.promocard:hover .promo-tag{ transform:translateY(-1px) scale(1.04); }
.promo-tag{ transition:transform .2s; }

/* The dashed border on a code chip marches, the way a coupon should. */
.promo-code{
  background-image:repeating-linear-gradient(
    -45deg, rgba(249,115,22,.12) 0 6px, transparent 6px 12px);
  animation:promoCode 1.4s linear infinite;
}
@keyframes promoCode{ to{ background-position:17px 0 } }

@media (prefers-reduced-motion:reduce){
  .promocard, .promocard::after, .promo-tag, .promo-code{ animation:none !important; }
  .promocard{ transition:none; }
  a.promocard:hover{ transform:translateY(-3px); }
}


/* ── Install card ──────────────────────────────────────────────────────
   Bottom of the screen, above the tab bar. Dismissible, and once
   dismissed it stays gone - an install nag that returns every visit is
   the fastest way to make somebody leave. */
.instbar{
  position:fixed; left:12px; right:12px; z-index:9100;
  bottom:calc(12px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:16px;
  background:rgba(8,24,38,.96); backdrop-filter:blur(14px);
  border:1px solid rgba(251,191,36,.34);
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  transform:translateY(120%); opacity:0;
  transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .32s;
}
.instbar.on{ transform:translateY(0); opacity:1; }
body.has-tabbar .instbar{ bottom:calc(86px + env(safe-area-inset-bottom)); }
@media (min-width:640px){ .instbar{ left:auto; right:18px; width:380px; } }

/* ---- Floating install button --------------------------------------------
   The card arrives once and then stands back for three days. This stays,
   quietly, for anyone who meant to install later. Bottom LEFT on purpose:
   chat owns the bottom right, and covering the way to a human to sell an
   app would be the wrong trade. */
.instfab{
  position:fixed; left:16px; bottom:16px; z-index:69;
  display:flex; align-items:center; gap:9px;
  padding:9px 15px 9px 10px; border-radius:999px;
  background:rgba(8,24,38,.92); backdrop-filter:blur(12px);
  border:1px solid rgba(251,191,36,.38);
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  color:var(--ink,#e8eef7);
  font:700 13.5px/1 'Outfit',system-ui,sans-serif;
  cursor:pointer;
  opacity:0; transform:translateY(14px);
  transition:opacity .3s, transform .3s;
}
.instfab.on{ opacity:1; transform:translateY(0); }
.instfab img{ border-radius:7px; }
.instfab:active{ transform:scale(.96); }
body.has-tabbar .instfab{ bottom:calc(86px + env(safe-area-inset-bottom)); }
/* Never on top of the full-screen chat or the age gate. */
body.chat-open .instfab{ display:none; }
@media (max-width:360px){ .instfab span{ display:none; } .instfab{ padding:10px; } }

.instbar img{ flex:none; border-radius:11px; }
.inst-txt{ flex:1; min-width:0; }
.inst-txt b{
  display:block; font:700 14.5px/1.25 'Outfit',system-ui,sans-serif;
  color:var(--ink,#e8eef7);
}
.inst-txt small{
  display:block; margin-top:2px; font-size:12.5px; line-height:1.45;
  color:var(--ink-mute,#9fb0c6);
}
.inst-txt small b{ display:inline; color:var(--gold,#fbbf24); font-weight:700; }
.inst-go{
  flex:none; padding:9px 16px; cursor:pointer; border:0; border-radius:11px;
  background:linear-gradient(145deg,#ffd75e,#f59e0b); color:#451a03;
  font:800 13.5px/1 'Outfit',system-ui,sans-serif;
  box-shadow:0 3px 0 #92400e;
}
.inst-go:hover{ filter:brightness(1.07); }
.inst-go:active{ transform:translateY(2px); box-shadow:0 1px 0 #92400e; }
.inst-x{
  flex:none; width:26px; height:26px; cursor:pointer; align-self:flex-start;
  background:rgba(255,255,255,.08); color:var(--ink-mute,#9fb0c6);
  border:0; border-radius:8px; font-size:11px;
}
.inst-x:hover{ background:rgba(255,255,255,.16); color:#fff; }

@media (prefers-reduced-motion:reduce){
  .instbar{ transition:none; transform:none; }
}


/* ── "Turn on notifications" bar, inside the chat ─────────────────────
   A button, not an automatic prompt. Browsers only allow the permission
   request in the moment right after a real click; anything on a timer
   is refused silently, and the player never even sees a prompt. */
.cnote{
  display:flex; align-items:center; gap:9px;
  padding:10px 12px;
  background:rgba(251,191,36,.12);
  border-bottom:1px solid rgba(251,191,36,.3);
}
.cnote-ico{ flex:none; font-size:16px; }
.cnote-txt{
  /* Light, not the dark brown this started as - the chat panel behind it
     is dark, and the first version was unreadable on it. */
  flex:1; min-width:0; font-size:12.5px; line-height:1.4; color:#fde9b8;
}
.cnote-go{
  flex:none; padding:7px 14px; cursor:pointer; border:0; border-radius:9px;
  background:linear-gradient(145deg,#ffd75e,#f59e0b); color:#451a03;
  font:800 12.5px/1 'Outfit',system-ui,sans-serif;
  box-shadow:0 2px 0 #92400e;
}
.cnote-go:hover{ filter:brightness(1.07); }
.cnote-go:active{ transform:translateY(2px); box-shadow:none; }
.cnote-go:disabled{ opacity:.6; }
.cnote-x{
  flex:none; width:22px; height:22px; cursor:pointer;
  background:rgba(255,255,255,.12); color:#e8d9a8;
  border:0; border-radius:6px; font-size:10px;
}
.cnote-x:hover{ background:rgba(255,255,255,.22); color:#fff; }

/* =========================================================================
   HEADER SIGN-IN / PROFILE BUTTON  (phones and tablets only)

   The top bar on a phone offered one control, the menu, and nothing that
   said whether the visitor was known to us. Signing in meant opening the
   menu and reading down it. This is the shortcut, sitting immediately
   left of the menu button: "Sign in" to a stranger, and their own
   initial once they are known - the same thing every app they already
   use puts in that corner.

   Desktop already has the full nav and the wallet button, so it is
   hidden from 900px up. Built by appuser.js, which is on every page, so
   the markup cannot drift between 47 files.
   ========================================================================= */
.hdr-r{ display:flex; align-items:center; gap:9px; }

.hauth{
  display:inline-flex; align-items:center; gap:7px;
  height:42px; padding:0 13px; border-radius:11px;
  background:var(--ocean-700); border:1px solid var(--ocean-600);
  color:var(--ink); font:700 13.5px/1 'Outfit',system-ui,sans-serif;
  white-space:nowrap; transition:border-color .15s, background .15s;
  -webkit-tap-highlight-color:transparent;
}
.hauth:hover{ background:var(--ocean-600); }
.hauth:active{ transform:translateY(1px); }
.hauth svg{ width:16px; height:16px; flex:none; color:var(--teal); }

/* Signed in: the initial in a circle, no label. A name in a 390px bar
   either truncates to nonsense or pushes the menu button off the edge. */
.hauth.hauth-me{ padding:0; width:42px; justify-content:center; }
.hauth-av{
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--sea-grad); color:#04121c;
  font:800 14px/1 'Outfit',system-ui,sans-serif;
  text-transform:uppercase; overflow:hidden;
}
.hauth-av img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
/* Quiet proof the session is live, rather than a second line of text. */
.hauth.hauth-me::after{
  content:''; position:absolute; width:9px; height:9px; border-radius:50%;
  background:var(--palm); border:2px solid var(--ocean-900);
  transform:translate(13px,-12px);
}
.hauth.hauth-me{ position:relative; }

@media(min-width:900px){ .hauth{ display:none } }

/* =========================================================================
   CHECKING THE SHELF

   Shown while the ID pool is read, between pressing Get My ID and either
   landing on My Games or the chat opening. It is short - usually under a
   second - but a button that appears to do nothing gets pressed twice.
   ========================================================================= */
.idwait{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  background:rgba(4,18,28,.72); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .2s ease;
}
.idwait.on{ opacity:1; }
.idwait-box{
  width:min(320px,86vw); padding:26px 22px; text-align:center;
  background:var(--ocean-700); border:1px solid var(--ocean-600);
  border-radius:18px; box-shadow:0 22px 60px rgba(0,0,0,.5);
  transform:translateY(8px); transition:transform .2s ease;
}
.idwait.on .idwait-box{ transform:none; }
.idwait-box b{ display:block; font-size:16px; margin-bottom:6px; }
.idwait-box small{ display:block; color:var(--ink-mute); font-size:12.5px; }
.idwait-spin{
  width:38px; height:38px; margin:0 auto 14px;
  border-radius:50%; border:3px solid var(--ocean-600);
  border-top-color:var(--teal); animation:idspin .8s linear infinite;
}
.idwait-tick{
  border-color:var(--palm); animation:none;
  display:flex; align-items:center; justify-content:center;
  color:var(--palm); font-size:20px; font-weight:800;
}
.idwait-ok{ border-color:rgba(34,197,94,.45); }
@keyframes idspin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){
  .idwait-spin{ animation:none; border-top-color:var(--ocean-600); }
  .idwait,.idwait-box{ transition:none; }
}

/* ── The notification gate (installed app only) ────────────────────────
   Covers everything, including the header, the chat bubble and the
   install bar: the point is that nothing else can be reached until the
   answer is yes. z-index sits above the chat panel (9000s) and the
   install bar. Opaque rather than translucent - a blurred view of the
   page underneath invites people to try tapping it. */
body.ngate-on{overflow:hidden}
.ngate{
  position:fixed;inset:0;z-index:99000;
  background:var(--ocean-900,#04263a);
  display:grid;place-items:center;padding:24px 18px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.ngate-card{
  width:100%;max-width:400px;text-align:center;
  background:var(--ocean-700);border:1px solid var(--ocean-600);
  border-radius:18px;padding:26px 22px 22px;
}
.ngate-ico{font-size:44px;line-height:1;margin-bottom:12px}
.ngate-card h2{font-size:21px;margin:0 0 10px}
.ngate-card p{font-size:14.5px;line-height:1.6;color:var(--ink-mute);margin:0 0 16px}
.ngate-btn{width:100%;padding:14px;font-size:16px}
.ngate-btn:disabled{opacity:.6}
.ngate-fine{font-size:12.5px;margin:12px 0 0!important}
.ngate-steps{
  text-align:left;margin:0 0 18px;padding-left:22px;
  font-size:14px;line-height:1.75;color:var(--ink-mute);
}
.ngate-steps b{color:var(--ink,#fff)}

/* ── The floating SPIN button, carried on the home page ──────────────────
   Same corner and the same height off the bottom as the other site, so a
   player who knows one knows the other. It sits above the chat bubble and
   steps aside when the chat panel is open - a fixed button over an open
   conversation is a misdirected tap waiting to happen. */
.spin-float {
  position: fixed; right: 14px; bottom: 170px; z-index: 9460;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  text-decoration: none; color: #3b2503;
  background: linear-gradient(145deg, #ffd75e, #f59e0b 70%, #d97706);
  border: 2.5px solid rgba(255,255,255,.35);
  box-shadow: 0 6px 0 #92400e, 0 12px 30px rgba(0,0,0,.5), 0 0 34px rgba(251,191,36,.55);
  animation: spFloat 2.2s ease-in-out infinite;
  transition: transform .16s;
}
.spin-float:hover { transform: scale(1.08); }
.spin-float:active { transform: scale(.92); }
.sf-wheel { font-size: 25px; line-height: 1; animation: spTurn 4s linear infinite; }
.sf-txt { font-size: 10px; font-weight: 900; letter-spacing: .6px; margin-top: 1px; }
@keyframes spFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes spTurn  { to { transform: rotate(360deg); } }

body.chat-open .spin-float,
body.has-annbar.chat-open .spin-float { display: none !important; }

@media (max-width: 768px) {
  .spin-float { width: 58px; height: 58px; bottom: 160px; right: 10px; }
  .sf-wheel { font-size: 23px; }
}

/* A player who has already used today's spin should not be invited to
   press it again - the button says so instead of lying. */
.spin-float.used {
  background: linear-gradient(145deg, #6b7280, #4b5563 70%, #374151);
  box-shadow: 0 6px 0 #1f2937, 0 10px 24px rgba(0,0,0,.45);
  color: #e5e7eb; animation: none;
}
.spin-float.used .sf-wheel { animation: none; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .spin-float, .sf-wheel { animation: none !important; }
}