/* ===== Real Win 360 — premium casino landing (DARK: gold on green felt) ===== */
:root{
  /* felt greens */
  --cream:#0a1f14; --cream-2:#06140d; --cream-3:#030a06;
  --paper:#12291c; --paper-2:#173322;
  --glass:rgba(20,46,31,.55); --glass-2:rgba(14,34,23,.72);
  /* gold */
  --gold:#f6c517; --gold-2:#e0a70f; --gold-3:#b8860b; --gold-bright:#ffd54a; --gold-soft:#ffe27a;
  --d-gold:linear-gradient(100deg,#ffe27a,#f6c517 42%,#e0a70f 78%,#b8860b);
  --gold-line:linear-gradient(135deg,rgba(255,226,122,.75),rgba(246,197,23,.15) 40%,rgba(255,226,122,.55));
  /* jewel accents (chips) */
  --red:#e23b3b; --red-2:#c62828; --emerald:#24d17a; --emerald-2:#1f8a3b; --blue:#3aa0ff; --violet:#a877ff;
  /* text */
  --ink:#f7f1e2; --ink-2:#e6ddc9; --txt:#e2dbc9; --muted:#a7b0a2; --muted-2:#6f7d70;
  --line:rgba(246,197,23,.22); --line-soft:rgba(255,255,255,.08);
  --r:16px; --r-lg:22px; --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 24px 60px rgba(0,0,0,.55);
  --glow-gold:0 0 34px rgba(246,197,23,.35);
}
*{box-sizing:border-box;margin:0;padding:0}

/* The hidden attribute has to win.
   Its only defence is the browser's own `display:none`, which any author rule
   with a display of its own outranks — so a .btn or a grid panel that JS marks
   hidden stays on screen, and nothing about the markup says why. Every element
   this stylesheet hides from script is laid out with flex or grid, so without
   this the attribute does nothing at all. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Poppins',system-ui,sans-serif;color:var(--txt);line-height:1.6;overflow-x:hidden;position:relative;
  background:
    radial-gradient(1200px 700px at 50% -8%, rgba(246,197,23,.14), transparent 60%),
    radial-gradient(900px 620px at 88% 12%, rgba(36,209,122,.10), transparent 55%),
    radial-gradient(1000px 780px at 6% 92%, rgba(184,134,11,.12), transparent 62%),
    linear-gradient(180deg, var(--cream), var(--cream-2) 55%, var(--cream-3));
  background-attachment:fixed;
}
/* felt weave texture */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 8px);
  background-size:9px 9px;
  -webkit-mask-image:radial-gradient(90% 70% at 50% 30%, #000 40%, transparent 100%);
          mask-image:radial-gradient(90% 70% at 50% 30%, #000 40%, transparent 100%);}
/* top edge vignette */
body::after{content:"";position:fixed;inset:0 0 auto 0;height:220px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.35), transparent)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:min(1200px,90%);margin-inline:auto;position:relative;z-index:2}
h1,h2,h3,h4{font-family:'Rowdies','Poppins',sans-serif;font-weight:700;line-height:1.04}
.gold{background:var(--d-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.mono{font-family:'Space Grotesk',monospace}

/* glass helper — frosted card with gold gradient hairline */
.glass{position:relative;background:var(--glass);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid transparent;border-radius:var(--r-lg);
  background-image:linear-gradient(var(--glass),var(--glass)),var(--gold-line);
  background-origin:border-box;background-clip:padding-box,border-box}

/* sparkle overlay (glowing gold specks on green felt) */
.sparkle{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,226,122,.9), transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,255,.6), transparent),
    radial-gradient(2px 2px at 40% 70%, rgba(255,226,122,.7), transparent),
    radial-gradient(1.5px 1.5px at 85% 65%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 15% 80%, rgba(255,226,122,.7), transparent),
    radial-gradient(2px 2px at 60% 45%, rgba(255,226,122,.5), transparent);
  background-repeat:no-repeat}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;font-family:'Poppins';
  padding:.95rem 1.7rem;border-radius:999px;border:1px solid transparent;cursor:pointer;position:relative;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;font-size:1rem;white-space:nowrap}
.btn--gold{background:var(--d-gold);color:#2a1e02;box-shadow:0 10px 26px rgba(200,146,10,.4),inset 0 1px 0 rgba(255,255,255,.55);isolation:isolate;overflow:hidden}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(200,146,10,.55),var(--glow-gold)}
.btn--ghost{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--ink);backdrop-filter:blur(6px)}
.btn--ghost:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 8px 24px rgba(150,112,28,.2)}
.btn--sm{padding:.6rem 1.2rem;font-size:.9rem}
.btn--lg{padding:1.1rem 2.3rem;font-size:1.08rem}
/* sheen sweep */
.btn--gold::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);transition:left .7s var(--ease)}
.btn--gold:hover::after{left:150%}

/* ---------- topbar ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,box-shadow .3s,padding .3s;padding:1.1rem 0}
.topbar.scrolled{background:rgba(5,16,11,.72);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line),0 10px 30px rgba(0,0,0,.5);padding:.55rem 0}
.nav{display:flex;align-items:center;gap:1.4rem}
.brand{display:flex;align-items:center;gap:.6rem;font-family:'Rowdies';font-weight:700;font-size:1.15rem;letter-spacing:.5px}
.brand img{width:40px;height:40px;border-radius:11px;box-shadow:0 4px 14px rgba(150,112,28,.35),0 0 0 1px rgba(246,197,23,.3)}
.brand b{color:var(--ink)}.brand span{color:var(--gold)}
.menu{display:flex;gap:1.7rem;margin-left:auto;align-items:center}
.menu a{font-size:.95rem;color:var(--txt);opacity:.88;transition:color .2s,opacity .2s;font-weight:500;position:relative}
.menu a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--d-gold);transition:right .25s var(--ease);border-radius:2px}
.menu a:not(.btn):hover{opacity:1;color:var(--gold)}
.menu a:not(.btn):hover::after{right:0}
.hamb{display:none;flex-direction:column;gap:5px;margin-left:auto;background:none;border:0;cursor:pointer;padding:6px}
.hamb span{width:26px;height:2px;background:var(--gold);border-radius:2px;transition:.3s}

/* ---------- hero ---------- */
.hero{min-height:100vh;display:flex;align-items:center;padding:8rem 0 4rem;position:relative;overflow:hidden}
/* concentric spotlight rings behind hero */
.hero::before{content:"";position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);width:min(900px,120vw);aspect-ratio:1;z-index:0;pointer-events:none;
  background:radial-gradient(circle, rgba(246,197,23,.10), transparent 42%);
  border-radius:50%;box-shadow:0 0 0 1px rgba(246,197,23,.05),0 0 0 90px rgba(246,197,23,.03),0 0 0 200px rgba(246,197,23,.02)}
.hero__in{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:880px;margin-inline:auto;position:relative;z-index:3}
/* floating decorative suits + chips */
.hero__deco{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero__deco i{position:absolute;font-style:normal;opacity:.16;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4));animation:float 9s var(--ease) infinite}
.hero__deco .s1{left:8%;top:26%;font-size:3.4rem;color:var(--gold);animation-delay:.2s}
.hero__deco .s2{right:9%;top:20%;font-size:2.6rem;color:var(--red);animation-delay:1.4s}
.hero__deco .s3{left:14%;bottom:16%;font-size:2.2rem;color:var(--emerald);animation-delay:2.6s}
.hero__deco .s4{right:12%;bottom:20%;font-size:3rem;color:var(--gold-soft);animation-delay:3.4s}
@keyframes float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-22px) rotate(5deg)}}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:'Space Grotesk';font-size:.8rem;
  letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);
  padding:.45rem 1rem;border-radius:999px;background:rgba(246,197,23,.07);backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.hero h1{font-size:clamp(2.9rem,7.2vw,5.6rem);margin:1.5rem 0 .2rem;letter-spacing:.5px}
.hero h1 .flash{display:block;color:var(--ink);text-shadow:0 2px 30px rgba(246,197,23,.28)}
.hero .lede{font-size:clamp(1rem,2.2vw,1.2rem);color:var(--ink-2);max-width:48ch;margin:1.3rem auto 2.2rem}
.hero__cta{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:center}
/* trust pills */
.hero__trust{display:inline-flex;align-items:stretch;margin-top:2.6rem;border-radius:20px;overflow:hidden;
  background:var(--glass);backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid transparent;background-image:linear-gradient(var(--glass),var(--glass)),var(--gold-line);
  background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:0 18px 44px rgba(0,0,0,.4)}
.hero__trust div{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.9rem 2rem}
.hero__trust div + div{border-left:1px solid var(--line-soft)}
.hero__trust b{font-family:'Rowdies';font-size:1.6rem;background:var(--d-gold);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.hero__trust span{font-size:.7rem;letter-spacing:1.4px;color:var(--muted);text-transform:uppercase;margin-top:.35rem}

/* ---------- marquee ---------- */
.marquee{position:relative;z-index:2;overflow:hidden;padding:.95rem 0;
  border-block:1px solid var(--line);background:linear-gradient(180deg,rgba(246,197,23,.12),rgba(10,33,22,.5));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:2.8rem;width:max-content;animation:marq 30s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{display:inline-flex;align-items:center;gap:.55rem;font-family:'Rowdies';font-size:1.02rem;
  color:var(--gold-soft);white-space:nowrap;letter-spacing:.5px}
.marquee span i{color:var(--gold-3);font-style:normal}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- section base ---------- */
.sec{padding:6.5rem 0;position:relative;z-index:2}
.sec__head{text-align:center;max-width:680px;margin:0 auto 3.2rem}
.sec__tag{display:inline-block;font-family:'Space Grotesk';letter-spacing:2.5px;text-transform:uppercase;font-size:.8rem;color:var(--gold);
  padding:.3rem .9rem;border:1px solid var(--line);border-radius:999px;background:rgba(246,197,23,.06);margin-bottom:.9rem}
.sec__head h2{font-size:clamp(2rem,4.6vw,3.2rem);margin:.2rem 0 .7rem;color:var(--ink)}
.sec__head p{color:var(--muted)}
/* ornamental divider with center diamond */
.divider{display:flex;align-items:center;justify-content:center;gap:1rem;height:1px;margin:1rem 0;position:relative}
.divider::before,.divider::after{content:"";height:1px;flex:1;max-width:220px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.divider i{color:var(--gold);font-style:normal;font-size:.9rem;opacity:.8}

/* ---------- about strip ---------- */
.about{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;perspective:1100px}
.about__card{position:relative;border-radius:var(--r-lg);padding:2rem 1.9rem;overflow:hidden;
  background:var(--glass);backdrop-filter:blur(12px) saturate(1.1);
  border:1px solid transparent;background-image:linear-gradient(var(--glass),var(--glass)),var(--gold-line);
  background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:0 14px 34px rgba(0,0,0,.32);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.about__card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 200px at 50% -10%,rgba(246,197,23,.14),transparent 70%);opacity:.7;pointer-events:none}
.about__card:hover{transform:translateY(-6px);box-shadow:0 26px 56px rgba(0,0,0,.5),var(--glow-gold)}
.about__card .ic{font-size:2rem;margin-bottom:.8rem;width:60px;height:60px;display:grid;place-items:center;border-radius:15px;
  background:radial-gradient(circle at 30% 25%,rgba(255,226,122,.28),rgba(246,197,23,.06));border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.about__card h3{color:var(--ink);font-size:1.2rem;margin-bottom:.4rem}
.about__card p{color:var(--muted);font-size:.95rem;position:relative}

/* ---------- games grid ---------- */
.games{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;perspective:1200px}
.game{--acc:var(--gold);position:relative;border-radius:var(--r-lg);padding:1.9rem 1.2rem 1.5rem;text-align:center;overflow:hidden;cursor:pointer;
  background:var(--glass-2);backdrop-filter:blur(10px);
  border:1px solid transparent;background-image:linear-gradient(var(--glass-2),var(--glass-2)),var(--gold-line);
  background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:0 10px 26px rgba(0,0,0,.3);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
/* per-game chip accent */
.games .game:nth-child(8n+1){--acc:#f6c517}
.games .game:nth-child(8n+2){--acc:#e23b3b}
.games .game:nth-child(8n+3){--acc:#24d17a}
.games .game:nth-child(8n+4){--acc:#3aa0ff}
.games .game:nth-child(8n+5){--acc:#ffd54a}
.games .game:nth-child(8n+6){--acc:#a877ff}
.games .game:nth-child(8n+7){--acc:#24d17a}
.games .game:nth-child(8n+8){--acc:#e23b3b}
.game::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 12%,color-mix(in srgb,var(--acc) 30%,transparent),transparent 60%);opacity:0;transition:opacity .35s;pointer-events:none}
.game:hover{transform:translateY(-8px)}
.game:hover::after{opacity:1}
.game:hover{box-shadow:0 22px 46px rgba(0,0,0,.5),0 0 30px color-mix(in srgb,var(--acc) 40%,transparent)}
/* icon medallion (chip) */
.game .ic{font-size:2rem;margin:0 auto .8rem;width:74px;height:74px;display:grid;place-items:center;border-radius:50%;position:relative;z-index:1;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.16),color-mix(in srgb,var(--acc) 22%,transparent) 60%,transparent);
  border:2px dashed color-mix(in srgb,var(--acc) 65%,transparent);
  box-shadow:inset 0 0 0 4px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.35);transition:transform .35s var(--ease)}
.game:hover .ic{transform:translateZ(30px) scale(1.06) rotate(-4deg)}
.game h4{color:var(--ink);font-size:1.05rem;position:relative;z-index:1}
.game span{display:block;font-size:.76rem;color:var(--muted);margin-top:.25rem;position:relative;z-index:1;letter-spacing:.3px}
/* hover "Play" pill */
.game::before{content:"▶ PLAY";position:absolute;left:50%;bottom:14px;transform:translate(-50%,14px);z-index:2;
  font-family:'Space Grotesk';font-weight:600;font-size:.66rem;letter-spacing:1.5px;color:#10251a;
  padding:.32rem .8rem;border-radius:999px;background:var(--d-gold);opacity:0;transition:opacity .3s,transform .3s var(--ease);box-shadow:0 6px 16px rgba(0,0,0,.4)}
.game:hover::before{opacity:1;transform:translate(-50%,0)}

/* ---------- how to play ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;counter-reset:s;position:relative}
.step{position:relative;border-radius:var(--r-lg);padding:2.4rem 1.5rem 1.7rem;
  background:var(--glass);backdrop-filter:blur(12px);
  border:1px solid transparent;background-image:linear-gradient(var(--glass),var(--glass)),var(--gold-line);
  background-origin:border-box;background-clip:padding-box,border-box;box-shadow:0 12px 30px rgba(0,0,0,.3)}
.step b{position:absolute;top:-22px;left:1.5rem;width:52px;height:52px;display:grid;place-items:center;border-radius:15px;
  background:var(--d-gold);color:#2a1e02;font-family:'Rowdies';font-size:1.3rem;box-shadow:0 10px 24px rgba(200,146,10,.4),inset 0 1px 0 rgba(255,255,255,.5)}
.step h4{color:var(--ink);margin:1rem 0 .4rem;font-size:1.1rem}
.step p{color:var(--muted);font-size:.93rem}

/* ---------- token tie-in ---------- */
.token{display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:center;
  border-radius:26px;padding:3.2rem;position:relative;overflow:hidden;
  background:linear-gradient(120deg,rgba(23,51,34,.75),rgba(10,33,22,.75));backdrop-filter:blur(16px);
  border:1px solid transparent;background-image:linear-gradient(120deg,rgba(23,51,34,.85),rgba(10,33,22,.85)),var(--gold-line);
  background-origin:border-box;background-clip:padding-box,border-box;box-shadow:0 26px 60px rgba(0,0,0,.5)}
.token::before{content:"";position:absolute;right:-70px;top:-70px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(246,197,23,.28),transparent 65%);pointer-events:none}
.token::after{content:"";position:absolute;left:-60px;bottom:-80px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(36,209,122,.16),transparent 68%);pointer-events:none}
.token h2{font-size:clamp(1.8rem,3.6vw,2.7rem);color:var(--ink);margin-bottom:.9rem}
.token p{color:var(--muted);margin-bottom:1.5rem}
.token ul{list-style:none;display:grid;gap:.75rem;margin-bottom:1.7rem}
.token li{display:flex;gap:.7rem;align-items:flex-start;color:var(--ink-2);font-size:.96rem}
.token li::before{content:"◆";color:var(--gold);font-size:.8rem;margin-top:.3rem;flex:none}
.token__coin{display:grid;place-items:center;position:relative}
.token__coin::before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(246,197,23,.35),transparent 62%);filter:blur(18px);animation:pulse 4.5s var(--ease) infinite}
.token__coin img{width:min(80%,300px);border-radius:22px;position:relative;z-index:1;
  box-shadow:0 0 0 1px rgba(246,197,23,.35),0 26px 56px rgba(0,0,0,.5),0 0 70px rgba(246,197,23,.3)}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.12);opacity:1}}

/* ---------- CTA band ---------- */
.cta{text-align:center;position:relative;overflow:hidden;padding:6rem 0;border-block:1px solid var(--line);
  background:
    radial-gradient(700px 340px at 50% 0%, rgba(246,197,23,.2), transparent 66%),
    radial-gradient(600px 300px at 50% 100%, rgba(36,209,122,.12), transparent 66%),
    linear-gradient(180deg,rgba(23,51,34,.6),rgba(4,18,11,.9))}
.cta .wrap{position:relative;z-index:2}
.cta h2{font-size:clamp(2.2rem,5.4vw,3.6rem);color:var(--ink);margin-bottom:.7rem}
.cta p{color:var(--muted);max-width:46ch;margin:0 auto 2rem}
/* decorative chips in the CTA */
.cta__chips{position:absolute;inset:0;z-index:1;pointer-events:none}
.cta__chips i{position:absolute;width:70px;height:70px;border-radius:50%;opacity:.35;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.35),transparent 45%),conic-gradient(var(--c) 0 25%,#0000 0 50%,var(--c) 0 75%,#0000 0);
  border:3px solid rgba(255,255,255,.25);filter:blur(.3px);animation:float 10s var(--ease) infinite}
.cta__chips .c1{--c:var(--red);left:9%;top:24%}
.cta__chips .c2{--c:var(--emerald);left:16%;bottom:18%;width:52px;height:52px;animation-delay:1.6s}
.cta__chips .c3{--c:var(--blue);right:11%;top:20%;width:60px;height:60px;animation-delay:2.4s}
.cta__chips .c4{--c:var(--gold);right:8%;bottom:22%;animation-delay:3.2s}

/* ---------- footer ---------- */
.footer{padding:3.8rem 0 2.5rem;border-top:1px solid var(--line-soft);position:relative;z-index:2}
.footer__in{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-start}
.footer .brand{margin-bottom:.8rem}
.footer p{color:var(--muted);font-size:.9rem;max-width:34ch}
.footer__links{display:flex;gap:3rem;flex-wrap:wrap}
.footer__col h5{color:var(--gold);font-size:.8rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:.9rem}
.footer__col a{display:block;color:var(--muted);font-size:.92rem;padding:.28rem 0;transition:color .2s,transform .2s}
.footer__col a:hover{color:var(--ink);transform:translateX(3px)}
.footer__bottom{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--muted-2);font-size:.82rem}
.footer__bottom .warn{color:var(--muted);max-width:60ch}

/* ---------- reveal (gated behind .js so no-JS shows all) ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.gsap .reveal{transition:none}
[data-d="1"]{transition-delay:.06s}[data-d="2"]{transition-delay:.14s}
[data-d="3"]{transition-delay:.22s}[data-d="4"]{transition-delay:.3s}

/* ============ LOGIN PAGE ============ */
.auth{min-height:100vh;display:grid;place-items:center;padding:6rem 1.2rem 3rem}
.auth__card{width:min(440px,100%);position:relative;overflow:hidden;border-radius:24px;padding:2.8rem 2.3rem;
  background:var(--glass);backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid transparent;background-image:linear-gradient(var(--glass-2),var(--glass-2)),var(--gold-line);
  background-origin:border-box;background-clip:padding-box,border-box;box-shadow:var(--shadow)}
.auth__card::before{content:"";position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:280px;height:150px;
  background:radial-gradient(circle,rgba(246,197,23,.3),transparent 65%);pointer-events:none}
.auth__logo{display:flex;flex-direction:column;align-items:center;gap:.7rem;margin-bottom:1.6rem;position:relative}
.auth__logo img{width:78px;height:78px;border-radius:18px;box-shadow:0 6px 24px rgba(150,112,28,.4),0 0 0 1px rgba(246,197,23,.3)}
.auth__logo h1{font-size:1.55rem;color:var(--ink)}
.auth__logo p{font-size:.85rem;color:var(--muted)}
.field{margin-bottom:1.05rem;position:relative}
.field label{display:block;font-size:.82rem;color:var(--gold-2);margin-bottom:.4rem;font-weight:600;letter-spacing:.3px}
.field input{width:100%;background:rgba(4,14,9,.6);border:1px solid var(--line-soft);border-radius:12px;
  padding:.9rem 1rem;color:var(--ink);font-family:'Poppins';font-size:.98rem;transition:border-color .2s,box-shadow .2s}
.field input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(246,197,23,.16)}
.field input::placeholder{color:var(--muted-2)}
.field .toggle{position:absolute;right:.8rem;top:2.2rem;background:none;border:0;color:var(--muted);cursor:pointer;font-size:.8rem}
.field label .req{color:var(--gold)}
.field__hint{font-size:.76rem;color:var(--muted);margin-top:.45rem;line-height:1.4}
.auth__row{display:flex;justify-content:space-between;align-items:center;margin:.2rem 0 1.3rem;font-size:.85rem}
.auth__row label{display:flex;align-items:center;gap:.45rem;color:var(--muted);cursor:pointer}
.auth__row a{color:var(--gold)}
.auth .btn{width:100%;justify-content:center}
.auth__alt{text-align:center;margin-top:1.3rem;color:var(--muted);font-size:.9rem}
.auth__alt a{color:var(--gold);font-weight:600}
.auth__note{margin-top:1.4rem;padding:.8rem 1rem;border:1px dashed var(--line);border-radius:12px;
  font-size:.82rem;color:var(--muted);text-align:center;background:rgba(246,197,23,.05)}
.auth__back{position:absolute;top:1.1rem;left:1.1rem;z-index:5}
.auth__back a{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;color:var(--ink-2);
  padding:.42rem .95rem .42rem .45rem;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-soft);backdrop-filter:blur(6px);
  transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.auth__back a::before{content:"←";display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:rgba(246,197,23,.15);color:var(--gold);font-size:.95rem;line-height:1;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.auth__back a:hover{color:var(--gold);border-color:var(--line);background:rgba(246,197,23,.09);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.auth__back a:hover::before{background:var(--d-gold);color:#2a1e02;transform:translateX(-3px)}
.formmsg{display:none;margin-bottom:1rem;padding:.7rem 1rem;border-radius:10px;font-size:.88rem;
  background:rgba(246,197,23,.1);border:1px solid var(--line);color:var(--gold-soft);text-align:center}
.formmsg.show{display:block}
.formmsg.err{background:rgba(226,59,59,.14);border-color:rgba(226,59,59,.45);color:#ff9b9b}

/* ---- split-screen auth (brand panel + connect card) ---- */
.auth--split{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);place-items:stretch;padding:0;gap:0}
.auth__panel{display:grid;place-items:center;padding:4rem 1.6rem;position:relative}
.auth__brand{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:4rem clamp(2rem,4.5vw,3.6rem);
  border-right:1px solid var(--line);
  background:
    radial-gradient(760px 480px at 18% 18%, rgba(246,197,23,.16), transparent 60%),
    radial-gradient(620px 440px at 92% 92%, rgba(36,209,122,.13), transparent 62%),
    linear-gradient(160deg, rgba(18,41,28,.55), rgba(4,14,9,.9))}
.auth__brand-in{position:relative;z-index:2;max-width:460px}
.brand--lg{font-size:1.55rem;margin-bottom:2.2rem}
.brand--lg img{width:54px;height:54px;border-radius:15px}
.auth__brand h2{font-family:'Rowdies';font-size:clamp(1.9rem,3vw,2.7rem);color:var(--ink);line-height:1.08;margin-bottom:1rem}
.auth__brand > .auth__brand-in > p{color:var(--muted);margin-bottom:1.9rem;max-width:42ch}
.auth__perks{list-style:none;display:grid;gap:1rem}
.auth__perks li{display:flex;align-items:center;gap:.85rem;color:var(--ink-2);font-weight:500;font-size:.98rem}
.auth__perks li span{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:12px;font-size:1.1rem;
  background:radial-gradient(circle at 30% 25%,rgba(255,226,122,.3),rgba(246,197,23,.05));border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.auth__suit{position:absolute;font-style:normal;z-index:1;opacity:.14;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4));animation:float 9s var(--ease) infinite}
.auth__suit.s1{top:11%;right:13%;font-size:3.6rem;color:var(--gold)}
.auth__suit.s2{bottom:14%;left:7%;font-size:2.6rem;color:var(--emerald);animation-delay:1.6s}
.auth__suit.s3{top:44%;right:9%;font-size:2.1rem;color:var(--red);animation-delay:2.8s}
.auth--split .auth__card{margin:0}

/* --- premium connect-card details --- */
.auth__logo-frame{position:relative;display:grid;place-items:center;margin-bottom:.9rem}
.auth__logo-frame::before{content:"";position:absolute;width:116px;height:116px;border-radius:50%;
  background:radial-gradient(circle,rgba(246,197,23,.42),transparent 62%);filter:blur(8px);animation:pulse 4.5s var(--ease) infinite}
.auth__logo-frame img{position:relative;z-index:1;width:86px;height:86px;border-radius:22px;
  box-shadow:0 0 0 2px rgba(246,197,23,.5),0 12px 30px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.1)}
.auth__eyebrow{display:inline-block;font-family:'Space Grotesk';font-size:.66rem;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--gold);padding:.3rem .85rem;border:1px solid var(--line);border-radius:999px;background:rgba(246,197,23,.07);margin-bottom:.75rem}
.auth__logo h1{margin-top:0}
/* username field with leading icon */
.field__wrap{position:relative;display:flex;align-items:center}
.field__ic{position:absolute;left:1rem;color:var(--gold-2);font-weight:700;font-size:1rem;pointer-events:none;z-index:1}
.field__wrap input{padding-left:2.5rem}
.field__max{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);z-index:2;cursor:pointer;
  font-family:'Poppins';font-size:.64rem;font-weight:700;letter-spacing:.6px;padding:.32rem .62rem;border-radius:8px;
  color:var(--gold);background:rgba(246,197,23,.16);border:1px solid rgba(246,197,23,.45)}
.field__max:hover{background:rgba(246,197,23,.28)}
.field__max:active{transform:translateY(-50%) scale(.96)}
.field__wrap:has(.field__max) input{padding-right:4rem}
/* trust chips — shown when the brand panel is hidden (mobile/narrow) */
.auth__trust{display:none;gap:.5rem;margin:1.25rem 0 .1rem;justify-content:center;flex-wrap:wrap}
.auth__trust span{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--ink-2);font-weight:500;
  padding:.42rem .75rem;border:1px solid var(--line-soft);border-radius:999px;background:rgba(246,197,23,.05)}
@media(max-width:920px){
  .auth--split{grid-template-columns:minmax(0,1fr)}
  .auth__brand{display:none}
  .auth__panel{padding:5rem 1.2rem 3rem}
  .auth__trust{display:flex}
}

/* ============ MODERN ENHANCEMENTS ============ */
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.hero__canvas.ready{opacity:1}
.hero .wrap{z-index:3}
.gold{background-size:220% auto;animation:goldshine 7s linear infinite}
@keyframes goldshine{to{background-position:220% center}}
.tilt{transform-style:preserve-3d;will-change:transform}
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:var(--d-gold);box-shadow:0 0 14px rgba(246,197,23,.6);transition:width .1s linear}

@media(prefers-reduced-motion:reduce){
  .gold,.marquee__track,.hero__deco i,.token__coin::before,.cta__chips i{animation:none}
  .hero__canvas{display:none}
}

/* debug flat mode (?flat=1) — reveal everything, no full-height hero */
.flat .reveal{opacity:1!important;transform:none!important}
.flat .hero{min-height:auto}
.flat .hero__canvas{display:none}

/* ============ WALLET AUTH + MEMBER PANEL ============ */
.auth #connectBtn{width:100%;justify-content:center}
.wallets{display:grid;gap:.6rem;margin-top:.9rem}
.wallet-btn{display:flex;align-items:center;gap:.7rem;width:100%;padding:.85rem 1rem;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ink);font-family:'Poppins';font-weight:600;font-size:.95rem;
  cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s,background .2s}
.wallet-btn:hover{border-color:var(--gold);background:rgba(246,197,23,.06);transform:translateY(-1px);box-shadow:0 8px 20px rgba(150,112,28,.15)}
.wallet-btn img,.wallet-btn .wi{width:26px;height:26px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem}
.wallet-note{margin-top:1.3rem;padding:.85rem 1rem;border:1px dashed var(--line);border-radius:12px;
  font-size:.8rem;color:var(--muted);text-align:center;background:rgba(246,197,23,.05);line-height:1.5}
.wallet-note b{color:var(--gold-2)}

/* member panel */
body.panel{background:
    radial-gradient(1000px 560px at 50% -8%, rgba(246,197,23,.2), transparent 60%),
    radial-gradient(800px 500px at 85% 20%, rgba(36,209,122,.1), transparent 60%),
    linear-gradient(180deg,var(--cream),var(--cream-2) 70%,var(--cream-3))}
.panel__user{display:flex;align-items:center;gap:1rem;margin-left:auto}
.panel__hi{font-weight:600;color:var(--ink);font-size:.95rem}
.panel__main{padding:8rem 0 5rem}
.panel__title{font-size:clamp(1.9rem,4.5vw,2.9rem);color:var(--ink)}
.panel__sub{color:var(--muted);margin:.5rem 0 2.4rem;max-width:52ch}
.panel__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
/* Vertical rhythm between the stacked blocks of an app page. Scoped to direct
   children of .wrap so cards *inside* a grid keep using the grid gap alone. */
.panel--app .panel__main > .wrap > .panel__grid + .panel__grid,
.panel--app .panel__main > .wrap > .panel__grid + .panel__card,
.panel--app .panel__main > .wrap > .panel__card + .panel__grid,
.panel--app .panel__main > .wrap > .panel__card + .panel__card{margin-top:2rem}
.panel--app .panel__main > .wrap > .pagehead,
.panel--app .panel__main > .wrap > .stats{margin-bottom:2rem}
.panel__card{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:1.7rem 1.8rem;
  background:var(--glass);backdrop-filter:blur(12px);
  border:1px solid transparent;background-image:linear-gradient(var(--glass),var(--glass)),var(--gold-line);
  background-origin:border-box;background-clip:padding-box,border-box;box-shadow:0 12px 30px rgba(0,0,0,.3)}
.panel__card--wide{grid-column:1 / -1}
.panel__label{font-family:'Space Grotesk';letter-spacing:1.5px;text-transform:uppercase;font-size:.72rem;color:var(--gold-2)}
.panel__wallet{display:flex;align-items:center;gap:.7rem;margin:.6rem 0 .5rem}
.panel__wallet b{font-size:1.15rem;color:var(--ink)}
.copy{border:1px solid var(--line);background:rgba(246,197,23,.08);color:var(--gold-2);border-radius:8px;
  padding:.28rem .7rem;font-size:.78rem;cursor:pointer;font-family:'Poppins';font-weight:600;transition:.2s}
.copy:hover{border-color:var(--gold);color:var(--gold)}
.panel__balance{display:flex;align-items:baseline;gap:.4rem;margin:.6rem 0 .5rem}
.panel__balance b{font-family:'Rowdies';font-size:2.1rem;background:var(--d-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.panel__balance span{font-size:.9rem;color:var(--muted);font-weight:600}
.panel__link{font-size:.85rem;color:var(--gold-2);font-weight:600}
.panel__link:hover{color:var(--gold)}
.panel__games{display:flex;flex-wrap:wrap;gap:.55rem;margin:.9rem 0 1rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .85rem;border-radius:999px;
  background:rgba(246,197,23,.1);border:1px solid var(--line);color:var(--ink);font-size:.85rem;font-weight:500}
.panel__soon{color:var(--muted);font-size:.92rem}
.panel__note{margin-top:2rem;color:var(--muted-2);font-size:.82rem}

/* ---- member panel sidebar ---- */
.sidebar{position:fixed;top:0;left:0;bottom:0;width:250px;z-index:60;display:flex;flex-direction:column;padding:1.4rem 1rem;
  background:linear-gradient(180deg,rgba(18,41,28,.9),rgba(6,20,13,.94));backdrop-filter:blur(14px) saturate(1.1);
  border-right:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain;
  /* The platform scrollbar is a white slab against a dark panel. Firefox takes
     the two-value form; WebKit needs the pseudo-elements below. */
  scrollbar-width:thin;scrollbar-color:rgba(246,197,23,.32) transparent}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{border-radius:999px;background:rgba(246,197,23,.28)}
.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(246,197,23,.55)}
/* Resting state is nearly invisible; the bar shows itself when the pointer is
   in the sidebar, so it never competes with the nav for attention. */
@media(hover:hover){
  .sidebar:not(:hover)::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1)}
  .sidebar:not(:hover){scrollbar-color:rgba(255,255,255,.1) transparent}
}
.sidebar__brand{display:flex;align-items:center;gap:.6rem;font-family:'Rowdies';font-weight:700;font-size:1.1rem;
  padding:.3rem .6rem 1.3rem;letter-spacing:.5px}
.sidebar__brand img{width:38px;height:38px;border-radius:10px;box-shadow:0 0 0 1px rgba(246,197,23,.35)}
.sidebar__brand b{color:var(--ink)}.sidebar__brand span{color:var(--gold)}
.sidebar__nav{display:flex;flex-direction:column;gap:.3rem;margin-top:.3rem}
.sidebar__nav a{display:flex;align-items:center;gap:.85rem;padding:.75rem .9rem;border-radius:12px;color:var(--muted);
  font-weight:500;font-size:.95rem;transition:color .2s,background .2s,border-color .2s;border:1px solid transparent}
.sidebar__nav a .ic{width:22px;text-align:center;font-size:1.05rem;flex:none}
.sidebar__nav a:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.sidebar__nav a.active{color:var(--gold);background:rgba(246,197,23,.1);border-color:var(--line)}
/* collapsible nav group (My Income and its streams) */
.navgroup__btn{display:flex;align-items:center;gap:.85rem;width:100%;padding:.75rem .9rem;border-radius:12px;
  color:var(--muted);font-family:'Poppins';font-weight:500;font-size:.95rem;text-align:left;cursor:pointer;
  background:none;border:1px solid transparent;transition:color .2s,background .2s,border-color .2s}
.navgroup__btn .ic{width:22px;text-align:center;font-size:1.05rem;flex:none}
.navgroup__btn:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.navgroup__btn.active{color:var(--gold);background:rgba(246,197,23,.1);border-color:var(--line)}
.navgroup__caret{margin-left:auto;width:0;height:0;flex:none;transition:transform .2s;
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor}
.navgroup.open .navgroup__caret{transform:rotate(180deg)}
/* Collapsed by default; grid-template-rows animates to a height we don't know. */
.navgroup__sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
.navgroup.open .navgroup__sub{grid-template-rows:1fr}
.navgroup__sub > *{overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:.15rem}
.navgroup__sub a{display:block;padding:.5rem .9rem .5rem 3rem;border-radius:10px;color:var(--muted);
  font-size:.88rem;font-weight:500;transition:color .2s,background .2s}
.navgroup__sub a:first-child{margin-top:.15rem}
.navgroup__sub a:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.navgroup__sub a.active{color:var(--gold);background:rgba(246,197,23,.08)}

.sidebar__foot{margin-top:auto;padding-top:1rem;border-top:1px solid var(--line-soft);display:grid;gap:.7rem}
.sidebar__me{display:flex;align-items:center;gap:.6rem;padding:.35rem .4rem;min-width:0}
.sidebar__me .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--d-gold);
  color:#2a1e02;font-family:'Rowdies';font-weight:700;flex:none}
.sidebar__me b{color:var(--ink);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar__me span{display:block;font-size:.72rem;color:var(--gold-2);font-family:'Space Grotesk';letter-spacing:.5px}

/* main shell shifted right of the sidebar */
.panel--app .panel__shell{margin-left:250px;min-height:100vh}
.panel__topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:1rem;
  padding:1rem clamp(1.1rem,4vw,2.2rem);background:rgba(5,16,11,.72);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft)}
.panel__topbar h2{font-family:'Rowdies';font-size:1.15rem;color:var(--ink)}
.panel__toggle{display:none;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--gold);
  width:42px;height:42px;border-radius:12px;font-size:1.15rem;cursor:pointer;flex:none}
.panel--app .panel__main{padding:2.4rem 0 4rem}
.panel__scrim{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.panel__scrim.show{opacity:1;visibility:visible}
@media(max-width:920px){
  .sidebar{transform:translateX(-100%);transition:transform .3s var(--ease);width:272px}
  .sidebar.open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.6)}
  .panel--app .panel__shell{margin-left:0}
  .panel__toggle{display:grid;place-items:center}
}

/* ---- dashboard games list ---- */
.dgames{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.dgame{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.2rem;border-radius:16px;position:relative;overflow:hidden;
  background:rgba(255,255,255,.03);border:1px solid var(--line-soft);transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.dgame::after{content:"";position:absolute;inset:0;background:radial-gradient(300px 120px at 20% 0%,rgba(246,197,23,.14),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.dgame:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 14px 32px rgba(0,0,0,.4),0 0 22px rgba(246,197,23,.2)}
.dgame:hover::after{opacity:1}
.dgame__ic{width:58px;height:58px;flex:none;display:grid;place-items:center;border-radius:15px;font-size:1.9rem;position:relative;z-index:1;
  background:radial-gradient(circle at 30% 25%,rgba(255,226,122,.28),rgba(246,197,23,.06));border:1px solid var(--line)}
.dgame__body{flex:1;min-width:0;position:relative;z-index:1}
.dgame__body b{display:block;color:var(--ink);font-size:1.08rem;font-family:'Rowdies'}
.dgame__body span{font-size:.82rem;color:var(--muted)}
.dgame__play{flex:none;position:relative;z-index:1;font-family:'Space Grotesk';font-weight:600;font-size:.72rem;letter-spacing:1px;
  color:#10251a;padding:.45rem .9rem;border-radius:999px;background:var(--d-gold);white-space:nowrap;box-shadow:0 6px 16px rgba(200,146,10,.3)}
@media(max-width:560px){ .dgames{grid-template-columns:1fr} }

/* ---- single game stage (stub / launching soon) ---- */
.gamestage{max-width:640px;margin:1rem auto 0;text-align:center;padding:3rem 2rem}
.gamestage__ic{width:120px;height:120px;margin:0 auto 1.4rem;display:grid;place-items:center;border-radius:50%;font-size:3.6rem;position:relative;
  background:radial-gradient(circle at 30% 25%,rgba(255,226,122,.3),rgba(246,197,23,.05));border:2px dashed var(--line)}
.gamestage__ic::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(246,197,23,.35),transparent 62%);filter:blur(10px);z-index:-1;animation:pulse 4.5s var(--ease) infinite}
.gamestage h1{font-size:clamp(2rem,5vw,2.8rem);color:var(--ink);margin-bottom:.5rem}
.gamestage p{color:var(--muted);max-width:44ch;margin:0 auto 1.6rem}
.gamestage__soon{display:inline-block;font-family:'Space Grotesk';letter-spacing:2px;text-transform:uppercase;font-size:.78rem;
  color:var(--gold);padding:.45rem 1.1rem;border:1px solid var(--line);border-radius:999px;background:rgba(246,197,23,.07);margin-bottom:1.8rem}

/* ---- dashboard hero banner ---- */
.dash-hero{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:2.3rem clamp(1.4rem,3vw,2.6rem);margin-bottom:1.4rem;
  border:1px solid transparent;background-image:linear-gradient(120deg,rgba(23,51,34,.9),rgba(6,20,13,.94)),var(--gold-line);
  background-origin:border-box;background-clip:padding-box,border-box;box-shadow:0 18px 44px rgba(0,0,0,.4)}
.dash-hero::before{content:"";position:absolute;right:-50px;top:-70px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(246,197,23,.28),transparent 65%);pointer-events:none}
.dash-hero::after{content:"♠";position:absolute;right:1.6rem;bottom:-1.4rem;font-size:8rem;color:rgba(246,197,23,.06);line-height:1;pointer-events:none}
.dash-hero__eyebrow{font-family:'Space Grotesk';letter-spacing:2.5px;text-transform:uppercase;font-size:.72rem;color:var(--gold);position:relative;z-index:1}
.dash-hero h1{font-family:'Rowdies';font-size:clamp(1.7rem,4vw,2.5rem);color:var(--ink);margin:.45rem 0 .5rem;position:relative;z-index:1}
.dash-hero p{color:var(--ink-2);max-width:50ch;margin-bottom:1.4rem;position:relative;z-index:1}
.dash-hero__cta{display:flex;gap:.7rem;flex-wrap:wrap;position:relative;z-index:1}

/* ---- dashboard stat tiles ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-bottom:1.4rem}
.stat{display:flex;align-items:center;gap:.9rem;padding:1.15rem 1.25rem;border-radius:16px;
  background:var(--glass);backdrop-filter:blur(12px);border:1px solid transparent;
  background-image:linear-gradient(var(--glass),var(--glass)),var(--gold-line);background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:0 12px 30px rgba(0,0,0,.3);transition:transform .25s var(--ease),box-shadow .25s}
.stat:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 20px rgba(246,197,23,.15)}
.stat__ic{width:50px;height:50px;flex:none;display:grid;place-items:center;border-radius:14px;font-size:1.45rem;
  background:radial-gradient(circle at 30% 25%,rgba(255,226,122,.28),rgba(246,197,23,.06));border:1px solid var(--line)}
.stat__b{min-width:0}
.stat__v{font-family:'Rowdies';font-size:1.45rem;line-height:1;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat__v.gold{background:var(--d-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat__v--sm{font-size:1.05rem;letter-spacing:.5px}
.stat__l{font-family:'Space Grotesk';font-size:.72rem;color:var(--muted);letter-spacing:.6px;margin-top:.3rem;text-transform:uppercase}

@media(max-width:920px){ .stats{grid-template-columns:1fr 1fr} }
@media(max-width:480px){ .stats{grid-template-columns:1fr} }

/* ---- member subpage header + team tables ---- */
.pagehead{margin-bottom:1.4rem}
.pagehead h1{font-family:'Rowdies';font-size:clamp(1.6rem,4vw,2.3rem);color:var(--ink)}
.pagehead p{color:var(--muted);margin-top:.4rem;max-width:56ch}
/* Turnover today: the headline figure, what went back, and where it was staked.
   Laid out as one card rather than three stat tiles, because the three numbers
   only mean anything read together. */
.turnover{display:grid;gap:1rem;margin-bottom:1.4rem;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center}
.turnover__v{display:block;font-family:'Rowdies';font-size:clamp(1.8rem,5vw,2.9rem);color:var(--gold);line-height:1.1}
.turnover__sub{font-size:.76rem;color:var(--muted)}
.turnover__sub i{font-style:normal;font-weight:700}
.turnover .up{color:#7fe0a8}
.turnover .down{color:#ff9b9b}
.turnover__side{display:grid;gap:.5rem}
.turnover__row{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  padding-bottom:.4rem;border-bottom:1px solid var(--line-soft)}
.turnover__row span{font-size:.72rem;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.turnover__row b{font-family:'Space Grotesk';font-size:1rem;color:var(--ink)}
.turnover__games{grid-column:1/-1;display:flex;gap:.6rem;flex-wrap:wrap}
.turnover__game{flex:1 1 8rem;padding:.6rem .8rem;border-radius:12px;text-align:center;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.03);transition:.2s}
.turnover__game:hover{border-color:var(--gold);background:rgba(246,197,23,.06)}
.turnover__game b{display:block;font-family:'Space Grotesk';font-size:1rem;color:var(--ink)}
.turnover__game span{font-size:.64rem;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted)}
.turnover__none{font-size:.78rem;color:var(--muted)}
@media(max-width:640px){.turnover{grid-template-columns:1fr}}

/* One game's worth of an admin page, where a page carries several. */
.pagesec{margin-bottom:2.4rem}
.pagesec__head{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:.9rem;
  padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.pagesec__head h2{font-family:'Rowdies';font-size:1.15rem;color:var(--gold)}
.pagesec__head span{font-size:.76rem;color:var(--muted)}

.ttable-wrap{overflow-x:auto;margin-top:.4rem;
  /* The same thin gold bar as the sidebar, not the platform's white slab. */
  scrollbar-width:thin;scrollbar-color:rgba(246,197,23,.32) transparent}
.ttable-wrap::-webkit-scrollbar{height:6px}
.ttable-wrap::-webkit-scrollbar-track{background:transparent}
.ttable-wrap::-webkit-scrollbar-thumb{border-radius:999px;background:rgba(246,197,23,.28)}
.ttable-wrap::-webkit-scrollbar-thumb:hover{background:rgba(246,197,23,.55)}
.ttable{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
.ttable th{text-align:left;font-family:'Space Grotesk';text-transform:uppercase;letter-spacing:.5px;font-size:.7rem;color:var(--gold-2);
  padding:.7rem .9rem;border-bottom:1px solid var(--line);white-space:nowrap}
.ttable td{padding:.85rem .9rem;border-bottom:1px solid var(--line-soft);color:var(--ink-2)}
.ttable tbody tr:last-child td{border-bottom:0}
.ttable tbody tr{transition:background .2s}
.ttable tbody tr:hover{background:rgba(255,255,255,.03)}
.ttable__i{color:var(--muted);width:44px}
.ttable__j{color:var(--muted);white-space:nowrap}
.ttable__ava{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(246,197,23,.14);
  border:1px solid var(--line);font-size:.78rem;margin-right:.45rem;vertical-align:middle}
.ttable__empty{text-align:center;color:var(--muted);padding:2.4rem!important}
.tcode{color:var(--gold-soft);font-weight:600}
.lvlbadge{display:inline-block;font-family:'Space Grotesk';font-weight:600;font-size:.72rem;color:var(--gold);
  padding:.2rem .6rem;border:1px solid var(--line);border-radius:999px;background:rgba(246,197,23,.08)}

/* ============ MEMBER PANEL — premium polish ============ */
.ico{width:1.15em;height:1.15em;display:inline-block;vertical-align:middle;flex:none}

/* sidebar */
.sidebar{width:262px;padding:1.5rem 1.05rem}
.sidebar__brand{position:relative;padding-bottom:1.4rem}
.sidebar__brand::after{content:"";position:absolute;left:.55rem;right:.55rem;bottom:.55rem;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}
.sidebar__nav{gap:.25rem;margin-top:1rem}
.sidebar__nav a{position:relative;gap:.9rem;padding:.8rem .95rem;color:var(--muted)}
.sidebar__nav a .ico{width:20px;height:20px;color:var(--muted-2);transition:color .2s}
.sidebar__nav a:hover{background:rgba(255,255,255,.04);color:var(--ink)}
.sidebar__nav a:hover .ico{color:var(--gold-2)}
.sidebar__nav a.active{color:var(--gold);background:linear-gradient(90deg,rgba(246,197,23,.17),rgba(246,197,23,.02));border-color:transparent}
.sidebar__nav a.active .ico{color:var(--gold)}
.sidebar__nav a.active::before{content:"";position:absolute;left:-.05rem;top:50%;transform:translateY(-50%);width:3px;height:58%;
  border-radius:3px;background:var(--d-gold);box-shadow:0 0 12px rgba(246,197,23,.7)}
.sidebar__foot .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.panel--app .panel__shell{margin-left:262px}
@media(max-width:920px){ .panel--app .panel__shell{margin-left:0} .sidebar{transform:translateX(-100%)} .sidebar.open{transform:none}
  /* The drawer runs to bottom:0 but sits UNDER the fixed tab bar (z-index 60 vs 65),
     so its foot — the user chip and the Logout button — was hidden behind it. Clear
     the bar the same way .panel__main does. */
  .sidebar{padding-bottom:calc(5.6rem + env(safe-area-inset-bottom, 0px))} }

/* topbar — redesigned: page title + user chip (no hamburger) */
.panel__topbar{padding:.95rem clamp(1.1rem,4vw,2.4rem);background:rgba(5,16,11,.62);box-shadow:0 1px 0 rgba(255,255,255,.02)}
.topbar__head{display:flex;align-items:center;gap:.65rem;min-width:0}
.topbar__head h2{font-family:'Rowdies';font-size:1.12rem;color:var(--ink);letter-spacing:.3px;white-space:nowrap;position:relative;padding-left:.85rem}
.topbar__head h2::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:1.1em;
  border-radius:3px;background:var(--d-gold);box-shadow:0 0 10px rgba(246,197,23,.6)}
.topbar__me{display:inline-flex;align-items:center;gap:.6rem;margin-left:auto;padding:.32rem .8rem .32rem .35rem;
  border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line-soft)}
.topbar__av{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--d-gold);color:#2a1e02;font-family:'Rowdies';font-weight:700;font-size:.95rem;box-shadow:0 4px 12px rgba(200,146,10,.35)}
.topbar__meta{display:flex;flex-direction:column;line-height:1.18;min-width:0}
.topbar__meta b{font-size:.85rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.topbar__meta span{font-family:'Space Grotesk';font-size:.68rem;color:var(--gold-2);letter-spacing:.5px}

/* section label with accent dot */
.panel__label{display:inline-flex;align-items:center;gap:.5rem}
.panel__label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--d-gold);box-shadow:0 0 8px rgba(246,197,23,.65)}

/* hero */
.dash-hero{padding:2.5rem clamp(1.5rem,3.2vw,2.8rem)}
.dash-hero::after{font-size:9rem;bottom:-2rem;right:1.2rem}
.dash-hero__eyebrow{display:inline-flex;align-items:center;gap:.45rem;padding:.34rem .85rem;border:1px solid var(--line);
  border-radius:999px;background:rgba(246,197,23,.06)}
.dash-hero__eyebrow .ico{width:14px;height:14px}
.dash-hero__cta .btn{display:inline-flex;align-items:center;gap:.5rem}
.dash-hero__cta .btn .ico{width:17px;height:17px}

/* stat tiles — accent medallions + top line + bigger numbers */
.stat{--acc:var(--gold);position:relative;overflow:hidden;padding:1.3rem 1.35rem}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 75%,transparent),transparent)}
.stat__ic{width:52px;height:52px;border-radius:15px;color:var(--acc);
  border-color:color-mix(in srgb,var(--acc) 45%,transparent);
  background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--acc) 26%,transparent),transparent 72%)}
.stat__ic .ico{width:24px;height:24px}
.stat__v{font-size:1.6rem}
.stat--gold{--acc:var(--gold)}.stat--emerald{--acc:var(--emerald)}.stat--red{--acc:var(--red)}
.stat--blue{--acc:var(--blue)}.stat--violet{--acc:var(--violet)}.stat--cyan{--acc:#2ad3d3}

/* card section titles get a touch more air */
.panel__card .panel__label{margin-bottom:.2rem}
.dgame__play{display:inline-flex;align-items:center;gap:.35rem}
.dgame__play .ico{width:13px;height:13px}
.panel__link{display:inline-flex;align-items:center;gap:.35rem}
.panel__link .ico{width:14px;height:14px}

/* ---- mobile: native-app feel (bottom tab bar + app header) ---- */
.bottomnav{display:none}
@media(max-width:920px){
  /* app header: title left, avatar right (drawer via the bottom "More" tab) */
  .panel__topbar{position:sticky;top:0;justify-content:space-between;padding:.85rem 1rem}
  .topbar__head h2{font-size:1.02rem}
  .topbar__meta{display:none}
  .topbar__me{padding:.25rem;gap:0}
  .panel--app .panel__main{padding-top:1.6rem;padding-bottom:calc(5.6rem + env(safe-area-inset-bottom, 0px))}

  /* bottom tab bar */
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:65;
    padding:.35rem .25rem calc(.35rem + env(safe-area-inset-bottom, 0px));
    background:rgba(6,20,13,.94);backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);
    border-top:1px solid var(--line);box-shadow:0 -10px 34px rgba(0,0,0,.45)}
  .bottomnav a,.bottomnav button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.18rem;
    background:none;border:0;cursor:pointer;color:var(--muted);font-family:'Poppins';font-size:.6rem;font-weight:600;
    letter-spacing:.2px;padding:.5rem .15rem .35rem;border-radius:12px;position:relative;transition:color .2s}
  .bottomnav .ico{width:23px;height:23px;color:var(--muted-2);transition:color .2s,transform .2s}
  .bottomnav a:hover .ico,.bottomnav button:hover .ico{color:var(--gold-2)}
  .bottomnav a.active{color:var(--gold)}
  .bottomnav a.active .ico{color:var(--gold);transform:translateY(-1px)}
  .bottomnav a.active::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:3px;
    border-radius:0 0 3px 3px;background:var(--d-gold);box-shadow:0 0 10px rgba(246,197,23,.7)}
  /* larger touch targets in cards */
  .panel__card{padding:1.4rem 1.3rem}
  .stat{padding:1.15rem 1.15rem}
}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .hero{padding:7rem 0 3.5rem}
  .about{grid-template-columns:1fr 1fr}
  .games{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr;gap:2.4rem 1.3rem}
  .token{grid-template-columns:1fr;padding:2.4rem;text-align:center}
  .token ul{text-align:left;max-width:26rem;margin-inline:auto;margin-bottom:1.6rem}
  .token__coin{order:-1}
  .hero__deco{display:none}
}
@media(max-width:600px){
  .menu{position:fixed;inset:60px 0 auto 0;flex-direction:column;gap:0;background:rgba(5,16,11,.98);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);padding:0 6%;max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
  .menu.open{max-height:380px;padding:.5rem 6% 1.2rem}
  .menu a:not(.btn){padding:.9rem 0;border-bottom:1px solid var(--line-soft);width:100%}
  .menu a:not(.btn)::after{display:none}
  .menu .btn{margin:.7rem 0}
  .hamb{display:flex}
  .about,.games,.steps{grid-template-columns:1fr}
  .hero h1{font-size:clamp(2.4rem,10vw,3.2rem)}
  .hero__trust{flex-wrap:wrap}
  .footer__in{flex-direction:column}
}

/* ============ member cards — cleaner, richer (less murky) ============ */
body.panel{
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(246,197,23,.10), transparent 58%),
    radial-gradient(820px 520px at 92% 12%, rgba(36,209,122,.06), transparent 60%),
    linear-gradient(180deg, var(--cream), var(--cream-2) 68%, var(--cream-3));
}
.panel__card,.stat{
  background:linear-gradient(180deg, rgba(24,53,36,.92), rgba(12,30,20,.96));
  border:1px solid rgba(246,197,23,.16);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 16px 38px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
}
.panel__card{position:relative}
.panel__card::before{content:"";position:absolute;left:0;right:0;top:0;height:56px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent);border-radius:var(--r-lg) var(--r-lg) 0 0}
.panel__card:hover{border-color:rgba(246,197,23,.26)}
.stat{transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.stat:hover{border-color:rgba(246,197,23,.3);box-shadow:0 20px 44px rgba(0,0,0,.5),0 0 20px rgba(246,197,23,.12)}
.dash-hero{
  background:linear-gradient(120deg, rgba(31,66,45,.96), rgba(9,26,17,.97));
  border:1px solid rgba(246,197,23,.24);
  box-shadow:0 22px 48px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.06);
}
.dgame{
  background:linear-gradient(180deg, rgba(31,64,44,.72), rgba(17,40,27,.84));
  border:1px solid rgba(246,197,23,.14);
}

/* ============ individual game pages ============ */
.gtable{max-width:680px;margin:0 auto;text-align:center;padding:2.4rem 1.6rem 2.8rem}
.gtable__soon{display:inline-flex;align-items:center;gap:.5rem;font-family:'Space Grotesk';letter-spacing:2px;text-transform:uppercase;
  font-size:.72rem;color:var(--gold);padding:.4rem 1rem;border:1px solid var(--line);border-radius:999px;background:rgba(246,197,23,.07);margin-bottom:.4rem}
.gtable h1{font-family:'Rowdies';font-size:clamp(1.8rem,5vw,2.6rem);color:var(--ink);margin:.8rem 0 .4rem}
.gtable p{color:var(--muted);max-width:42ch;margin:0 auto}
.gbtn{margin-top:1.8rem;display:inline-flex;align-items:center;gap:.5rem}
.gbtn .ico{width:17px;height:17px}

/* roulette wheel */
.wheel{width:min(250px,66vw);aspect-ratio:1;border-radius:50%;position:relative;margin:2rem auto 1rem;
  background:conic-gradient(from -4deg,
    #1f8a3b 0 8deg,#c62828 8deg 28deg,#141414 28deg 48deg,#c62828 48deg 68deg,#141414 68deg 88deg,
    #c62828 88deg 108deg,#141414 108deg 128deg,#c62828 128deg 148deg,#141414 148deg 168deg,
    #c62828 168deg 188deg,#141414 188deg 208deg,#c62828 208deg 228deg,#141414 228deg 248deg,
    #c62828 248deg 268deg,#141414 268deg 288deg,#c62828 288deg 308deg,#141414 308deg 328deg,
    #c62828 328deg 348deg,#141414 348deg 360deg);
  border:9px solid #2a1e08;box-shadow:0 0 0 3px rgba(246,197,23,.4),0 24px 54px rgba(0,0,0,.55),inset 0 0 40px rgba(0,0,0,.65);
  animation:spin 24s linear infinite}
.wheel__hub{position:absolute;inset:32%;border-radius:50%;background:var(--d-gold);
  box-shadow:inset 0 0 22px rgba(0,0,0,.45),0 0 24px rgba(246,197,23,.4);display:grid;place-items:center;
  font-size:1.6rem;animation:spin 24s linear infinite reverse}
.wheel__ball{position:absolute;top:3%;left:50%;width:13px;height:13px;border-radius:50%;background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.8);transform:translateX(-50%)}
@keyframes spin{to{transform:rotate(360deg)}}
.bet-grid{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:1.6rem}
.bet{padding:.6rem 1.2rem;border-radius:12px;border:1px solid var(--line-soft);font-weight:600;font-size:.9rem;color:var(--ink);background:rgba(255,255,255,.03)}
.bet--red{background:rgba(198,40,40,.22);border-color:rgba(226,59,59,.45)}
.bet--black{background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.12)}
.bet--green{background:rgba(31,138,59,.28);border-color:rgba(36,209,122,.5)}

/* big / small */
.bschoice{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:480px;margin:2rem auto 0}
.bs{padding:1.7rem 1.2rem;border-radius:18px;border:1px solid var(--line);position:relative;overflow:hidden}
.bs b{font-family:'Rowdies';font-size:1.7rem;display:block;color:var(--ink);letter-spacing:1px}
.bs span{font-size:.82rem;color:var(--muted);display:block;margin-top:.2rem}
.bs--big{background:linear-gradient(160deg,rgba(198,40,40,.28),transparent 75%);border-color:rgba(226,59,59,.4)}
.bs--small{background:linear-gradient(160deg,rgba(58,160,255,.24),transparent 75%);border-color:rgba(58,160,255,.4)}
.dice-row{display:flex;gap:.7rem;justify-content:center;margin:2rem auto 0;font-size:2.8rem;filter:drop-shadow(0 8px 16px rgba(0,0,0,.4))}
@media(prefers-reduced-motion:reduce){ .wheel,.wheel__hub{animation:none} }

/* ============ working roulette ============ */
.rgame{max-width:640px;margin:0 auto}
.rbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:space-between;margin-bottom:1.2rem}
.rstat{display:flex;flex-direction:column}
.rstat b{font-family:'Rowdies';font-size:1.5rem;color:var(--gold-soft);line-height:1}
.rstat span{font-size:.68rem;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-family:'Space Grotesk';margin-top:.2rem}
.roulette__result{width:72px;height:72px;flex:none;border-radius:50%;display:grid;place-items:center;font-family:'Rowdies';font-size:1.9rem;
  color:#fff;border:2px solid rgba(255,255,255,.25);opacity:.35;transition:opacity .2s,transform .2s;background:#222}
.roulette__result.show{opacity:1;transform:scale(1.04)}
.roulette__result.red{background:linear-gradient(180deg,#d33,#a51f1f)}
.roulette__result.black{background:linear-gradient(180deg,#333,#111)}
.roulette__result.green{background:linear-gradient(180deg,#25a04b,#178037)}

.rboard{display:grid;grid-template-columns:repeat(6,1fr);gap:.42rem}
.rnum,.rout button,.rzero{position:relative;cursor:pointer;border:1px solid rgba(255,255,255,.1);border-radius:10px;
  font-family:'Rowdies';font-weight:700;color:#fff;padding:.75rem 0;text-align:center;font-size:1.05rem;user-select:none;
  transition:transform .1s,box-shadow .2s}
.rnum.red{background:linear-gradient(180deg,#d33,#a51f1f)}
.rnum.black{background:linear-gradient(180deg,#2b2b2b,#121212)}
.rzero{background:linear-gradient(180deg,#25a04b,#178037);grid-column:1 / -1;margin-bottom:.15rem}
.rnum:hover,.rout button:hover,.rzero:hover{box-shadow:0 0 0 2px var(--gold),0 6px 16px rgba(0,0,0,.45);z-index:2}
.rnum.win,.rout button.win,.rzero.win{box-shadow:0 0 0 3px var(--gold),0 0 22px rgba(246,197,23,.75);z-index:3}
.rnum.pulse,.rout button.pulse,.rzero.pulse{transform:scale(.93)}
.rchip{position:absolute;top:-9px;right:-9px;min-width:22px;height:22px;padding:0 4px;border-radius:999px;
  background:var(--d-gold);color:#2a1e02;font-family:'Poppins';font-weight:700;font-size:.64rem;display:grid;place-items:center;
  box-shadow:0 3px 8px rgba(0,0,0,.55);border:2px solid #2a1e02;z-index:4}
.rout{display:grid;gap:.42rem;margin-top:.42rem}
.rout--6{grid-template-columns:repeat(6,1fr)}
.rout--3{grid-template-columns:repeat(3,1fr)}
.rout button{background:rgba(255,255,255,.05);font-size:.8rem;padding:.72rem .2rem;letter-spacing:.3px}
.rout button[data-bet="red"]{background:linear-gradient(180deg,#c62828,#8e1c1c)}
.rout button[data-bet="black"]{background:linear-gradient(180deg,#2b2b2b,#121212)}

.chips{display:flex;gap:.55rem;justify-content:center;margin:1.4rem 0 .8rem;flex-wrap:wrap}
.chipbtn{width:52px;height:52px;border-radius:50%;border:3px dashed rgba(255,255,255,.45);cursor:pointer;
  font-family:'Rowdies';font-weight:700;color:#2a1e02;background:var(--d-gold);font-size:.95rem;opacity:.72;
  transition:transform .15s,box-shadow .2s,opacity .2s}
.chipbtn.active{opacity:1;transform:scale(1.12);box-shadow:0 0 0 2px var(--gold),0 6px 18px rgba(246,197,23,.45);border-style:solid}
.rctrl{display:flex;gap:.7rem;justify-content:center;margin-top:.4rem;flex-wrap:wrap}
.rctrl .btn{min-width:130px;justify-content:center}
.roulette__net{text-align:center;margin-top:1rem;min-height:1.4rem;font-weight:600;color:var(--muted)}
.roulette__net.win{color:var(--emerald)}
.roulette__net.lose{color:#ff9b9b}
.rstat.bad b{color:#ff9b9b}
@media(max-width:520px){
  .rboard{grid-template-columns:repeat(4,1fr)}
  .rout--6{grid-template-columns:repeat(3,1fr)}
  .chipbtn{width:46px;height:46px}
  .roulette__result{width:60px;height:60px;font-size:1.6rem}
}

/* ============ realistic roulette wheel ============ */
.rwheel{position:relative;width:min(340px,82vw);margin:.4rem auto 1.6rem}
.rw-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 20px 44px rgba(0,0,0,.6))}
#wheelSpin{transform-origin:200px 200px;transition:transform 4.6s cubic-bezier(.12,.62,.16,1)}
.rwheel__pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);z-index:3;
  width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:22px solid var(--gold);
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.7))}
@media(prefers-reduced-motion:reduce){ #wheelSpin{transition:transform 1s ease-out} }

/* ============ live roulette timer + locked state ============ */
.rtimer{display:flex;flex-direction:column;align-items:center;gap:.15rem;margin:.2rem 0 .4rem}
.rtimer__t{font-family:'Rowdies';font-size:2.1rem;line-height:1;color:var(--gold-soft);letter-spacing:1px;
  text-shadow:0 0 18px rgba(246,197,23,.4)}
.rtimer__p{font-family:'Space Grotesk';font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.rlocked .rtimer__t{color:#ff9b9b;text-shadow:0 0 18px rgba(226,59,59,.4)}
/* lock the board while the wheel spins / bets closed */
.rlocked .rboard,.rlocked .rzero,.rlocked .rout,.rlocked .chips,.rlocked #undoBtn,.rlocked #clearBtn{
  opacity:.5;pointer-events:none;filter:saturate(.7)}

/* 0–9 board layout */
.rboard--9{grid-template-columns:repeat(3,1fr);gap:.5rem}
.rboard--9 .rnum{font-size:1.35rem;padding:1.05rem 0}
.rout--4{grid-template-columns:repeat(4,1fr)}

/* ============ roulette — premium table polish ============ */
.rgame{padding-top:1.6rem}
.rbar{margin-bottom:.7rem}
.rstat b{font-size:1.7rem}
.roulette__result{width:66px;height:66px;box-shadow:0 0 0 3px rgba(255,255,255,.12),0 8px 22px rgba(0,0,0,.5)}
.roulette__result.green{box-shadow:0 0 0 3px rgba(36,209,122,.35),0 0 26px rgba(36,209,122,.4),0 8px 22px rgba(0,0,0,.5)}
.roulette__result.red{box-shadow:0 0 0 3px rgba(226,59,59,.35),0 0 26px rgba(226,59,59,.35),0 8px 22px rgba(0,0,0,.5)}

/* recent results strip */
.rrecent{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;margin:.1rem 0 1rem;min-height:26px}
.rr{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-family:'Rowdies';font-size:.82rem;color:#fff;
  border:1.5px solid rgba(255,255,255,.18);box-shadow:0 3px 8px rgba(0,0,0,.45)}
.rr--red{background:linear-gradient(180deg,#d33,#a51f1f)}
.rr--black{background:linear-gradient(180deg,#3a3a3a,#111)}
.rr--green{background:linear-gradient(180deg,#25a04b,#178037)}
.rr:first-child{outline:2px solid var(--gold);outline-offset:1px}

/* circular countdown ring */
.rtimer{position:relative;width:134px;height:134px;margin:.2rem auto 1.3rem;display:block}
.rtimer__ring{width:100%;height:100%;transform:rotate(-90deg)}
.rtimer__bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:6}
.rtimer__fg{fill:none;stroke:var(--gold);stroke-width:6;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(246,197,23,.6));transition:stroke-dashoffset .3s linear,stroke .3s}
.rtimer__fg.lock{stroke:#e23b3b;filter:drop-shadow(0 0 6px rgba(226,59,59,.6))}
.rtimer__c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rtimer__t{font-family:'Rowdies';font-size:2.6rem;line-height:1;color:var(--ink);text-shadow:0 0 18px rgba(246,197,23,.35)}
.rtimer__p{font-family:'Space Grotesk';font-size:.6rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-top:.3rem}
.rlocked .rtimer__t{color:#ff9b9b}

/* wheel glow + felt backdrop */
.rwheel{padding:4px}
.rwheel::before{content:"";position:absolute;inset:-12px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(31,138,59,.22),transparent 68%)}
.rw-svg{filter:drop-shadow(0 0 26px rgba(246,197,23,.22)) drop-shadow(0 22px 46px rgba(0,0,0,.6))}

/* betting tiles polish */
.rnum,.rout button,.rzero{border:1px solid rgba(246,197,23,.28);
  box-shadow:0 4px 12px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.15);text-shadow:0 1px 2px rgba(0,0,0,.55);
  transition:transform .12s,box-shadow .2s,filter .2s}
.rnum:hover,.rout button:hover,.rzero:hover{transform:translateY(-2px);box-shadow:0 0 0 2px var(--gold),0 8px 18px rgba(0,0,0,.5);filter:brightness(1.08);z-index:2}
.rzero{border-radius:12px;font-size:1.35rem;letter-spacing:1px;padding:.95rem 0}
.rboard--9 .rnum{border-radius:14px}
.rout button{border-radius:12px;font-size:.92rem;padding:.9rem .2rem}
@keyframes winpop{0%{transform:scale(1)}35%{transform:scale(1.14)}100%{transform:scale(1)}}
.rnum.win,.rout button.win,.rzero.win{animation:winpop .6s var(--ease);
  box-shadow:0 0 0 3px var(--gold),0 0 28px rgba(246,197,23,.85)!important;z-index:5}
.chipbtn{box-shadow:0 4px 10px rgba(0,0,0,.4),inset 0 -3px 6px rgba(0,0,0,.25)}
.chipbtn.active{box-shadow:0 0 0 2px var(--gold),0 6px 18px rgba(246,197,23,.5),inset 0 -3px 6px rgba(0,0,0,.2)}

/* let the timer ring glow escape the svg box (no hard clipping) */
.rtimer, .rtimer__ring{overflow:visible}
.rtimer__fg{filter:drop-shadow(0 0 4px rgba(246,197,23,.55))}
.rtimer__fg.lock{filter:drop-shadow(0 0 4px rgba(226,59,59,.55))}

/* glossy betting tiles */
.rnum::after,.rzero::after{content:"";position:absolute;left:0;right:0;top:0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0));border-radius:inherit}
.rnum,.rzero{position:relative}
.rnum.red{background:linear-gradient(180deg,#e23b3b,#9c1c1c)}
.rnum.black{background:linear-gradient(180deg,#3a3a3a,#0e0e0e)}
.rzero{background:linear-gradient(180deg,#2bb35a,#127034)}
.rout button{background:linear-gradient(180deg,rgba(42,74,52,.85),rgba(15,36,24,.92));border:1px solid rgba(246,197,23,.32);color:var(--gold-soft)}
.rout button:hover{color:#fff}

/* ============ roulette win popup ============ */
.rpopup{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:1.2rem;
  background:rgba(0,0,0,.62);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.rpopup.show{opacity:1;visibility:visible}
.rpopup__card{width:min(330px,88vw);text-align:center;padding:2.1rem 1.7rem 1.7rem;border-radius:24px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(24,53,36,.98),rgba(9,24,15,.99));border:1px solid var(--gold);
  box-shadow:0 26px 64px rgba(0,0,0,.6),0 0 44px rgba(246,197,23,.28);transform:scale(.88) translateY(8px);
  transition:transform .32s var(--ease)}
.rpopup.show .rpopup__card{transform:none}
.rpopup--win .rpopup__card::before{content:"";position:absolute;inset:-40% -40% auto -40%;height:80%;pointer-events:none;
  background:radial-gradient(circle at 50% 0,rgba(246,197,23,.35),transparent 62%)}
.rpopup__num{width:78px;height:78px;margin:0 auto 1.1rem;border-radius:50%;display:grid;place-items:center;position:relative;
  font-family:'Rowdies';font-size:2.1rem;color:#fff;border:2px solid rgba(255,255,255,.22);box-shadow:0 10px 26px rgba(0,0,0,.5)}
.rpopup__num.red{background:linear-gradient(180deg,#e23b3b,#9c1c1c)}
.rpopup__num.black{background:linear-gradient(180deg,#3a3a3a,#0e0e0e)}
.rpopup__num.green{background:linear-gradient(180deg,#2bb35a,#127034)}
.rpopup__meta{position:relative;display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem;margin:-.5rem 0 1rem}
.rpmeta{font-size:.64rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:.2rem .65rem;border-radius:999px;border:1px solid rgba(255,255,255,.14)}
.rpmeta--green{background:rgba(43,179,90,.16);border-color:rgba(43,179,90,.45);color:#7fe0a8}
.rpmeta--red{background:rgba(226,59,59,.16);border-color:rgba(226,59,59,.45);color:#ff9b9b}
.rpmeta--size{background:rgba(246,197,23,.14);border-color:rgba(246,197,23,.4);color:var(--gold,#f6c517)}
.rpopup__title{font-family:'Rowdies';font-size:1.5rem;color:var(--ink);position:relative}
.rpopup__amt{font-family:'Rowdies';font-size:2.9rem;line-height:1;margin:.35rem 0 .1rem;position:relative;
  background:var(--d-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.rpopup--lose .rpopup__amt{background:none;-webkit-text-fill-color:#ff9b9b;color:#ff9b9b}
.rpopup__sub{color:var(--muted);font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:1.1rem;position:relative}
.rpopup__bets{position:relative;display:flex;flex-direction:column;gap:.35rem;margin:0 0 1.3rem;text-align:left}
.rpopup__bets:empty{display:none;margin:0}
.rpbet{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.4rem .65rem;border-radius:10px;font-size:.78rem;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.rpbet--won{background:rgba(60,190,120,.12);border-color:rgba(60,190,120,.36)}
.rpbet__l{display:flex;align-items:center;gap:.45rem;min-width:0}
.rpbet__stake{font-size:.66rem;color:var(--muted)}
.rpbet__r{font-family:'Space Grotesk',monospace;font-weight:700;white-space:nowrap}
.rpbet--won .rpbet__r{color:#7fe0a8}
.rpbet--lost .rpbet__r{color:#ff9b9b}
.rpopup__card .btn{width:100%;justify-content:center;position:relative}
@keyframes popwin{0%{transform:scale(.6);opacity:0}55%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.rpopup--win.show .rpopup__num{animation:popwin .5s var(--ease)}

/* ---- win celebration (see assets/js/winfx.js) ----
   The coin canvas is the popup's FIRST child, so the card — later in DOM order —
   always paints over it. Coins fly behind the result, never across the figures. */
.rwfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Tier ribbon: hidden on an ordinary win, so "Big Win" keeps its meaning. */
.rpopup__tier{display:none;position:relative;width:max-content;margin:-.55rem auto .6rem;
  font-family:'Rowdies';font-size:.72rem;letter-spacing:2.2px;text-transform:uppercase;
  padding:.28rem .9rem;border-radius:999px;color:#2a1c00;background:var(--d-gold);
  box-shadow:0 6px 18px rgba(246,197,23,.42)}
.rpopup--bigwin .rpopup__tier,.rpopup--megawin .rpopup__tier{display:block}
.rpopup--bigwin.show .rpopup__tier,.rpopup--megawin.show .rpopup__tier{animation:tierpop .45s var(--ease) both}
@keyframes tierpop{0%{transform:scale(.5) translateY(6px);opacity:0}60%{transform:scale(1.12)}100%{transform:none;opacity:1}}

.rpopup--bigwin .rpopup__card{border-color:#ffdf6b;box-shadow:0 26px 64px rgba(0,0,0,.6),0 0 64px rgba(246,197,23,.5)}
.rpopup--megawin .rpopup__card{border-color:#fff0b8;box-shadow:0 26px 70px rgba(0,0,0,.65),0 0 98px rgba(246,197,23,.72)}
.rpopup--megawin.show .rpopup__card{animation:megapulse 1.5s ease-in-out 2}
@keyframes megapulse{0%,100%{box-shadow:0 26px 70px rgba(0,0,0,.65),0 0 98px rgba(246,197,23,.72)}
  50%{box-shadow:0 26px 70px rgba(0,0,0,.65),0 0 136px rgba(246,197,23,.95)}}
/* Gold bleeding in from the screen edge — mega only, and it never eats a tap. */
.rpopup--megawin::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 130px rgba(246,197,23,.32)}
.rpopup--megawin.show::after{animation:edgeglow 1.5s ease-in-out 2}
@keyframes edgeglow{0%,100%{opacity:.5}50%{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .rpopup--bigwin.show .rpopup__tier,.rpopup--megawin.show .rpopup__tier,
  .rpopup--megawin.show .rpopup__card,.rpopup--megawin.show::after,
  .rpopup--win.show .rpopup__num{animation:none}
}

/* ============ rummy ============ */

/* ============ rummy: the table ============ */
/* A real table is landscape and full-bleed — no panel shell, no scrolling. Every
   size is derived from ONE variable, --cw (the width of a card), so the whole
   table scales together and 13 cards always fit the long edge of the screen. */
.rtbody{margin:0;overflow:hidden;overscroll-behavior:none;background:#04100a;
  font-family:'Poppins',system-ui,sans-serif;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  /* One variable sizes the whole table. It lives on the body, not the table, so
     the cards that leave it — the drag ghost, the score window — keep scale. */
  /* One percent of the STAGE, not of the viewport. Turned a quarter they are
     the viewport's units the other way round, and everything on the table is
     sized from these — a card measured against a phone's narrow edge while the
     table lies along its long one comes out a third of the size it should be. */
  --sw:1vw; --sh:1vh;
  --cw:min(calc(6.4 * var(--sw)),calc(15.5 * var(--sh)),96px);
  --ch:calc(var(--cw)*1.42)}

.rt{position:fixed;inset:0;display:flex;flex-direction:column;color:#eaf3ec}

/* ---- the rail across the top ---- */
.rt__top{flex:none;height:calc(7.4 * var(--sh));min-height:45px;display:flex;align-items:center;gap:calc(.8 * var(--sw));padding:0 calc(1.6 * var(--sw));
  background:linear-gradient(180deg,#08150f,#06110c);border-bottom:1px solid rgba(255,255,255,.06)}
.rt__side{display:flex;gap:calc(.6 * var(--sw));flex:none}
.rt__side--r{margin-left:auto}
.rt__info{flex:1;display:flex;align-items:center;justify-content:center;gap:calc(1.4 * var(--sw));
  font-size:clamp(12px,calc(1.5 * var(--sh)),17px);color:#9fb6a8;white-space:nowrap;overflow:hidden}
.rt__id{font-family:'Space Grotesk';letter-spacing:.5px}
.rt__ttl{color:#eaf3ec;font-weight:600}
.rt__chip{display:inline-flex;align-items:center;gap:.35em;color:#dfe9e2}
.rt__chip b{color:#fff;font-weight:600}
.rt__chip--prize b{color:#ffd76a}
.rtcoin{width:.9em;height:.9em;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 30%,#ffeaa6,#e0a51c);box-shadow:0 0 0 1px rgba(0,0,0,.3)}

.rtico{width:calc(5.6 * var(--sh));height:calc(5.6 * var(--sh));min-width:34px;min-height:34px;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
  color:#dfe9e2;font-size:calc(1.6 * var(--sh));cursor:pointer;padding:0}
.rtico svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.rtico:hover{background:rgba(255,255,255,.13)}

/* ---- the felt ---- */
.rt__felt{flex:1;position:relative;margin:calc(1.2 * var(--sh)) calc(1.2 * var(--sw)) 0;border-radius:44%/30%;
  background:radial-gradient(ellipse at 50% 34%,#2ea468 0%,#18744a 52%,#0c4a2e 100%);
  box-shadow:inset 0 0 0 calc(.5 * var(--sh)) rgba(255,255,255,.07),inset 0 0 70px rgba(0,0,0,.4),
    0 0 0 calc(.7 * var(--sh)) #0a3320,0 0 0 calc(1.4 * var(--sh)) #17110c,0 calc(1.4 * var(--sh)) calc(3 * var(--sh)) rgba(0,0,0,.55)}

/* ---- the other seats, around the top arc ---- */
.rtseats{position:absolute;top:calc(-1.6 * var(--sh));left:7%;right:7%;display:flex;justify-content:space-around;
  align-items:flex-start;pointer-events:none;z-index:3}
.rtseats[data-n="1"]{justify-content:center}
.rtseats[data-n="4"] .rtseat:first-child,.rtseats[data-n="4"] .rtseat:last-child,
.rtseats[data-n="3"] .rtseat:first-child,.rtseats[data-n="3"] .rtseat:last-child{transform:translateY(calc(2.2 * var(--sh)))}

.rtseat{display:flex;flex-direction:column;align-items:center;gap:calc(.3 * var(--sh));width:calc(var(--cw)*2.1)}
.rtseat__pts{background:#fff;color:#1a1a1a;border-radius:999px;padding:.1em .5em;line-height:1.35;
  font-size:calc(var(--cw)*.26);font-weight:700;box-shadow:0 2px 5px rgba(0,0,0,.4)}
.rtseat__pts i{font-style:normal;font-size:.72em;margin-left:.25em;color:#777}
.rtseat__av{position:relative;width:calc(var(--cw)*1.34);height:calc(var(--cw)*1.34)}
.rtseat__nm{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:rgba(0,0,0,.5);border-radius:999px;padding:.1em .6em;font-size:calc(var(--cw)*.24);color:#e6f0e9}
/* Their member number, under the name. Players know each other by it. */
.rtseat__id{font-size:calc(var(--cw)*.2);letter-spacing:.6px;color:#9fd0ff;
  text-shadow:0 1px 3px rgba(0,0,0,.7)}

/* An opponent's hand, face down and fanned. A seat with no cards on it does not
   read as somebody playing against you. */
.rtseat__fan{position:relative;display:block;height:calc(var(--cw)*.42);width:calc(var(--cw)*1.5);
  margin:.1em 0 .15em}
.rtseat__fan i{position:absolute;top:0;left:calc(var(--k) * var(--cw) * .1);
  width:calc(var(--cw)*.3);height:calc(var(--cw)*.42);border-radius:2px;
  background:linear-gradient(160deg,#f0c463,#a56b12);box-shadow:0 1px 2px rgba(0,0,0,.5);
  border:.5px solid rgba(255,255,255,.35)}
/* Taking and throwing, shown on the seat that did it. */
@keyframes rtseattook{0%{transform:translateY(-14%) scale(1.06)}100%{transform:none}}
@keyframes rtseatthrew{0%{transform:translateY(10%) scale(.96)}100%{transform:none}}
.rtseat--took .rtseat__fan{animation:rtseattook .55s ease-out}
.rtseat--threw .rtseat__fan{animation:rtseatthrew .55s ease-out}
.rtseat--took .rtav{box-shadow:0 0 0 2px #7fe0a8,0 0 18px rgba(127,224,168,.6)}
.rtseat--threw .rtav{box-shadow:0 0 0 2px #6cd0ff,0 0 18px rgba(108,208,255,.6)}
/* Dropped and out are stamped over the face, the way a table shows them. */
.rtseat__tag{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;
  background:rgba(0,0,0,.62);color:#fff;font-size:calc(var(--cw)*.26);text-transform:uppercase;letter-spacing:.5px}
/* A seat that is out of the deal. Dimmed and drained of colour, so it reads as
   somebody no longer playing rather than somebody having a quiet turn — the tag
   over the face says which, but the seat should say it from across the table. */
.rtseat--out,.rtseat--dropped{opacity:.55;filter:grayscale(.7)}
.rtseat--out .rtseat__fan,.rtseat--dropped .rtseat__fan{opacity:.4}
.rtseat--turn .rtav{box-shadow:0 0 0 2px #3ddc84,0 0 18px rgba(61,220,132,.55)}
/* The dealer chip: whoever led the deal, since leading is worth real money. */
.rtseat__d{position:absolute;left:-14%;bottom:2%;width:1.7em;height:1.7em;border-radius:50%;
  display:grid;place-items:center;font-style:normal;font-weight:700;font-size:calc(var(--cw)*.24);
  background:linear-gradient(#ffdd80,#dfa316);color:#3a2900;box-shadow:0 2px 5px rgba(0,0,0,.45)}

.rtav{position:absolute;inset:0;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--tone,#2c3e50),#0e1c14)}
.rtav svg{position:absolute;width:100%;height:100%;fill:rgba(255,255,255,.22)}
.rtav i{position:relative;font-style:normal;font-weight:700;color:#fff;font-size:calc(var(--cw)*.42);
  text-shadow:0 1px 3px rgba(0,0,0,.6)}

/* The turn clock, drawn as a ring around whoever is on play. */
.rtring{position:absolute;inset:-9%;border-radius:50%;pointer-events:none}
.rtring::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(#3ddc84 calc(var(--p,1)*360deg),rgba(0,0,0,.45) 0);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 65%);
  mask:radial-gradient(circle,transparent 63%,#000 65%)}
.rtring--urgent::before{background:conic-gradient(#ff6b6b calc(var(--p,1)*360deg),rgba(0,0,0,.45) 0)}
.rtring i{position:absolute;top:-8%;left:-8%;min-width:1.6em;height:1.6em;padding:0 .25em;border-radius:999px;
  display:grid;place-items:center;font-style:normal;font-weight:700;font-size:calc(var(--cw)*.24);
  background:#2f9e63;color:#fff;box-shadow:0 2px 5px rgba(0,0,0,.4)}
.rtring--urgent i{background:#e23b3b}

/* ---- the middle: joker, closed deck, finish slot, open pile ---- */
/* The cut for the lead: one card a seat, face down, then turned over together.
   It sits where the piles will be, because that is where the table's attention
   already is. */
.rttoss{position:absolute;left:0;right:0;top:26%;z-index:8;display:grid;justify-items:center;
  gap:calc(1.2 * var(--sh));opacity:0;pointer-events:none;transition:opacity .25s}
.rttoss.show{opacity:1}
.rttoss__ttl{font-size:clamp(11px,calc(1.9 * var(--sh)),17px);font-weight:600;letter-spacing:.5px;
  color:#ffe08a;text-shadow:0 2px 6px rgba(0,0,0,.7)}
.rttoss__row{display:flex;gap:calc(var(--cw)*.6);align-items:flex-start}
.rttoss__seat{display:grid;justify-items:center;gap:.3em;transition:transform .3s}
.rttoss__seat b{font-size:calc(var(--cw)*.24);color:#e6f0e9;text-shadow:0 1px 3px rgba(0,0,0,.7);
  max-width:calc(var(--cw)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rttoss__card{display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.rttoss__seat--up{transform:translateY(-6%)}
/* The one that took it. */
.rttoss__seat--won{transform:translateY(-14%) scale(1.06)}
.rttoss__seat--won .rc{box-shadow:0 0 0 2px #ffd76a,0 0 24px rgba(255,215,106,.7)}
.rttoss__seat--won b{color:#ffe08a}

.rtmid{position:absolute;left:0;right:0;top:36%;display:flex;align-items:center;justify-content:center;
  gap:calc(var(--cw)*.7);z-index:2}
.rtdeck{position:relative;display:flex;align-items:center}
/* The wild joker leans out from under the deck: visible, but plainly not in play. */
.rtwild{transform:rotate(-16deg) translateX(34%);filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.rtclosed{position:relative;width:var(--cw);height:var(--ch);padding:0;border:0;background:none;cursor:pointer;
  z-index:2}
.rtclosed::before{content:"";position:absolute;inset:-14px;border-radius:12px}  /* the tap target */
.rtwild{pointer-events:none}
.rtclosed:disabled{cursor:default}
.rtback,.rc--back{border-radius:calc(var(--cw)*.11);background:
  repeating-linear-gradient(45deg,rgba(0,0,0,.08) 0 3px,transparent 3px 6px),
  linear-gradient(160deg,#f0c463,#c8891f 55%,#a56b12);
  box-shadow:0 3px 8px rgba(0,0,0,.5),inset 0 0 0 2px rgba(255,255,255,.35)}
.rtback{position:absolute;inset:0}
.rtback::after{content:"";position:absolute;inset:22% 24%;border:2px solid rgba(255,255,255,.5);
  transform:rotate(45deg);border-radius:3px}
.rtclosed i{position:absolute;right:-.4em;bottom:-.5em;font-style:normal;font-size:calc(var(--cw)*.24);
  background:rgba(0,0,0,.6);color:#fff;border-radius:999px;padding:.05em .45em}
/* Only where there is a pointer to hover with. On a touch screen :hover latches
   on after a tap and stays, so tapping the deck to draw left the whole pile
   sitting three pixels higher — the deck appearing to move when a card was
   taken off it, which is the thing it must not do. */
@media (hover: hover) and (pointer: fine) {
  .rtclosed:not(:disabled):hover{transform:translateY(-3px)}
}
/* When drawing is the only move left, the deck says so rather than waiting to be
   discovered. */
.rtclosed--live{animation:rtdeck 1.4s ease-in-out infinite}
@keyframes rtdeck{0%,100%{filter:drop-shadow(0 0 0 rgba(255,224,102,0))}
  50%{filter:drop-shadow(0 0 10px rgba(255,224,102,.85))}}
/* Which pile a card came off. The open card is named the moment it is taken;
   a card off the deck is face down and says nothing about itself, so the deck
   has to be seen giving it up.
   
   It brightens, and that is all. The deck used to tilt and shift as well, which
   is the one thing it must not do: what leaves is the card off the top, and the
   pile under it stays exactly where it was. The card that moves is the one
   flying to the hand — the deck moving too made it look as though the whole
   pile had been knocked. */
.rtclosed--pull{animation:rtpull .6s ease-out}
@keyframes rtpull{0%{filter:none}
  30%{filter:drop-shadow(0 0 14px rgba(255,224,102,.95)) brightness(1.18)}
  100%{filter:none}}
.rtthrow{--x:0}

.rtfinish{width:calc(var(--cw)*1.2);height:var(--ch);border-radius:calc(var(--cw)*.11);padding:0;
  border:2px dashed rgba(255,255,255,.45);background:rgba(0,0,0,.14);color:#d7ece0;cursor:pointer;
  font-size:calc(var(--cw)*.22);line-height:1.3;text-transform:uppercase;letter-spacing:.5px;
  display:grid;place-items:center;transition:box-shadow .2s,border-color .2s,color .2s}
.rtfinish--on,.rtfinish--hot{border-color:#ffe066;color:#ffe066;box-shadow:0 0 20px rgba(255,224,102,.5)}

/* The slot with the winning card in it. Solid, not dashed: the dashes mean an
   empty place to put something, and there is nothing left to put here. */
.rtfinish--held{border-style:solid;border-color:#ffe066;background:rgba(255,224,102,.1);
  display:grid;place-items:center;padding:calc(var(--cw)*.06)}
.rtfinish--held .rc{width:calc(var(--cw)*.94);height:calc(var(--ch)*.94)}

/* Snapping in. It overshoots, drops back and settles, which is what makes it
   read as fitting into the slot rather than merely appearing over it. */
.rc--snap{animation:rcsnap .42s cubic-bezier(.2,1.5,.4,1)}
@keyframes rcsnap{
  0%{transform:scale(1.5) rotate(-9deg);opacity:.65}
  55%{transform:scale(.93) rotate(2deg);opacity:1}
  78%{transform:scale(1.04) rotate(-1deg)}
  100%{transform:scale(1) rotate(0)}}

/* And the slot takes the impact — a ring thrown off as the card lands. */
.rtfinish--landed{animation:rtland 1.1s ease-out}
@keyframes rtland{
  0%{box-shadow:0 0 0 0 rgba(255,224,102,.9),0 0 24px rgba(255,224,102,.7)}
  60%{box-shadow:0 0 0 calc(var(--cw)*.5) rgba(255,224,102,0),0 0 30px rgba(255,224,102,.5)}
  100%{box-shadow:0 0 0 0 rgba(255,224,102,0),0 0 20px rgba(255,224,102,.5)}}

/* The felt when the hand you have just gone out with is yours. The banner and
   its prize come later — after the other players have shown — and a win that
   is announced a minute after it happened is not a celebration. */
.rtstage--won{animation:rtwon 2.4s ease-out}
@keyframes rtwon{
  0%{filter:brightness(1)}
  12%{filter:brightness(1.35) saturate(1.2)}
  40%{filter:brightness(1.08)}
  100%{filter:brightness(1)}}
.rtstage--won .rtfinish--held{box-shadow:0 0 34px rgba(255,224,102,.85)}

.rtopen{display:flex;align-items:center;gap:calc(var(--cw)*.22);position:relative}
.rtslot{position:relative;width:var(--cw);height:var(--ch);padding:0;
  border:2px dashed rgba(255,255,255,.35);
  border-radius:calc(var(--cw)*.11);background:rgba(0,0,0,.14);cursor:pointer;overflow:visible}
.rtslot .rc{box-shadow:0 3px 8px rgba(0,0,0,.5)}
.rtslot:not(.rtslot--empty){border:0;background:none}
.rtslot:disabled{cursor:default}
/* The card you may take. Green, with a pointer at it — the reference marks it
   this way and it is worth copying: a player has to know, without trying it,
   whether tapping the thrown card picks it up. */
.rtslot--take{outline:2px solid #35d07f;outline-offset:2px;
  box-shadow:0 0 0 4px rgba(53,208,127,.25),0 0 22px rgba(53,208,127,.55)}
.rtslot--take::before{content:"";position:absolute;left:calc(var(--cw) * -.42);top:50%;
  transform:translateY(-50%);border:calc(var(--cw)*.14) solid transparent;
  border-left-color:#35d07f;border-right:0;filter:drop-shadow(0 0 5px rgba(53,208,127,.8))}
.rtslot--take::after{content:"TAKE";position:absolute;left:50%;top:calc(var(--cw) * -.34);
  transform:translateX(-50%);padding:0 .35em;border-radius:3px;white-space:nowrap;
  font-size:calc(var(--cw)*.2);font-weight:700;letter-spacing:.6px;
  background:#35d07f;color:#04240f;box-shadow:0 1px 3px rgba(0,0,0,.5)}

/* The deck as a place to take from, said in the same words as the open card so
   the two piles read as the two choices they are. */
.rtclosed--live::after{content:"DRAW";position:absolute;left:50%;top:calc(var(--cw) * -.34);
  transform:translateX(-50%);padding:0 .35em;border-radius:3px;white-space:nowrap;
  font-size:calc(var(--cw)*.2);font-weight:700;letter-spacing:.6px;
  background:#ffe066;color:#3a2a00;box-shadow:0 1px 3px rgba(0,0,0,.5)}

/* The house-seats switch on the dashboard. A setting that changes whether the
   game runs at all deserves to say what it does, so the words sit beside the
   button rather than behind a tooltip. */
.rmybots{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1rem;
  padding:.9rem 1rem;border-radius:12px;border:1px solid rgba(255,255,255,.09);
  background:rgba(0,0,0,.16)}
.rmybots__l{flex:1 1 18rem;min-width:0}
.rmybots__l b{display:block;font-size:.95rem;letter-spacing:.3px}
.rmybots__l span{display:block;margin-top:.15rem;font-size:.82rem;line-height:1.45;opacity:.72}
.rmybots select{flex:0 0 auto;max-width:100%}
.rmybots__pct{display:flex;align-items:center;gap:.35rem;flex:0 0 auto}
.rmybots__pct input{width:5rem;text-align:right}
.rmybots__pct span{opacity:.7}

/* The turn you have already missed once. Red rather than the usual gold: the
   next thing that happens if nothing is done is being dropped, and that costs
   points, so it should not look like an ordinary prompt. */
.rtmsg--last{background:rgba(120,10,10,.9);color:#ffd9d9;
  box-shadow:0 0 0 1px rgba(255,107,107,.6),0 6px 20px rgba(0,0,0,.5);
  animation:rtlast 1s ease-in-out infinite}
@keyframes rtlast{0%,100%{box-shadow:0 0 0 1px rgba(255,107,107,.6),0 6px 20px rgba(0,0,0,.5)}
  50%{box-shadow:0 0 0 2px rgba(255,107,107,1),0 6px 26px rgba(255,60,60,.45)}}

/* Leaving for good. Deliberately not the green of "back to the lobby" beside
   it: one keeps your seat, the other gives it up, and they must not look like
   two ways of saying the same thing. */
.rtbtn--quit{background:transparent;color:#ff8b8b;border:1px solid rgba(255,107,107,.5);margin-top:.55rem}
.rtbtn--quit:hover{background:rgba(255,107,107,.12);border-color:rgba(255,107,107,.9)}
.rtmenu__note{margin:.5rem 0 0;font-size:.78rem;line-height:1.45;opacity:.62;text-align:center}

/* A joker somebody threw: left face up, but it cannot be picked. Marked where
   TAKE would be, in red, so it never reads as the card on offer. */
.rtslot--locked{outline:2px solid #d94a3d;outline-offset:2px}
.rtslot--locked::after{content:"NO PICK";position:absolute;left:50%;top:calc(var(--cw) * -.34);
  transform:translateX(-50%);padding:0 .35em;border-radius:3px;white-space:nowrap;
  font-size:calc(var(--cw)*.2);font-weight:700;letter-spacing:.6px;
  background:#d94a3d;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.5)}

/* The pile with its top card taken: face down, and dimmed so it does not read as
   a card waiting to be picked up. */
.rtslot--buried{opacity:.5;filter:saturate(.6)}
.rtslot--buried .rc--back{position:absolute;inset:0}

/* Whose throw is sitting on the pile. Small, under the card, out of the way of
   the TAKE marker above it — a caption on the card, not a second thing to read. */
.rtslot__by{position:absolute;left:50%;bottom:calc(var(--cw) * -.3);transform:translateX(-50%);
  padding:0 .4em;border-radius:3px;white-space:nowrap;max-width:calc(var(--cw) * 2);
  overflow:hidden;text-overflow:ellipsis;
  font-size:calc(var(--cw)*.19);font-weight:600;letter-spacing:.3px;
  background:rgba(6,22,14,.85);color:#cfe6da;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.rtslot--ismine .rtslot__by{background:#3a2a00;color:#ffe066}

/* Where the picked card goes. Without this the discard pile is just another card
   on the felt, and "throw one away" has no visible destination. */
.rtslot--target{outline:2px dashed #6cd0ff;outline-offset:3px;animation:rttarget 1.2s ease-in-out infinite}
.rtslot--target::after{content:"Throw here";position:absolute;left:50%;top:-1.5em;transform:translateX(-50%);
  white-space:nowrap;font-size:calc(var(--cw)*.22);color:#9fe4ff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
@keyframes rttarget{0%,100%{outline-color:rgba(108,208,255,.45)}50%{outline-color:rgba(108,208,255,1)}}
.rtthrow{width:calc(var(--cw)*.78);height:calc(var(--cw)*.78);border-radius:calc(var(--cw)*.12);border:0;
  display:grid;place-items:center;background:#2f6fd0;color:#fff;cursor:pointer;opacity:.35;transition:opacity .2s,box-shadow .2s}
.rtthrow svg{width:64%;height:64%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.rtthrow--on{opacity:1}
.rtthrow--hot{box-shadow:0 0 18px rgba(47,111,208,.9)}
.rtthrow:disabled{cursor:default}

/* ---- the hand ---- */
/* The hand overhangs the rail below it. Only the cards themselves may take a
   tap — the wrapper is a full-width box, and it was eating presses aimed at the
   buttons underneath. */
.rthandwrap{position:absolute;left:0;right:0;bottom:calc(-1.5 * var(--sh));display:flex;justify-content:center;
  z-index:4;pointer-events:none}
.rthand{pointer-events:auto}
/* One line, always. The cards are scaled down to fit rather than wrapping — a
   card on a second row is a card the player will not look for. */
.rthand{display:flex;align-items:flex-start;flex-wrap:nowrap;justify-content:center;
  gap:calc(var(--cw)*.34);max-width:100%}
.rtgrp{position:relative;padding:0 calc(var(--cw)*.06) calc(var(--cw)*.06);border-radius:calc(var(--cw)*.14);
  transition:background .15s}
.rtgrp--hot{background:rgba(255,255,255,.16)}
/* A group opened but not yet filled. Card-sized, so the row does not jump when
   something lands in it. */
.rtgrp--empty .rtgrp__cards{width:var(--cw);height:var(--ch);display:grid;place-items:center;
  border:2px dashed rgba(255,255,255,.45);border-radius:calc(var(--cw)*.11);
  background:rgba(255,255,255,.06);border-bottom-color:rgba(255,255,255,.45)}
.rtgrp--empty .rtgrp__slot{font-size:calc(var(--cw)*.5);color:rgba(255,255,255,.6);line-height:1}
.rtgrp--empty .rtgrp__lbl{color:#cfe6d8}
.rtgrp--empty.rtgrp--hot .rtgrp__cards{border-color:#6cd0ff;background:rgba(108,208,255,.18)}
.rtgrp__cards{display:flex;padding-bottom:calc(var(--cw)*.08);border-bottom:calc(var(--cw)*.07) solid transparent;
  border-radius:calc(var(--cw)*.06)}
.rtgrp--pure .rtgrp__cards{border-bottom-color:#25c46a}
.rtgrp--run .rtgrp__cards{border-bottom-color:#25c46a}
.rtgrp--set .rtgrp__cards{border-bottom-color:#4a9fe0}
.rtgrp--invalid .rtgrp__cards{border-bottom-color:#d84a4a}
/* The card a finish would throw. Gold, because it is the move — not red, which
   would read as the one thing wrong with the hand. */
.rtgrp--odd .rtgrp__cards{border-bottom-color:#e0a51c}
.rtgrp--odd .rtgrp__lbl{color:#ffe08a}
.rtgrp__lbl{display:block;text-align:center;margin-top:calc(var(--cw)*.08);white-space:nowrap;
  font-size:calc(var(--cw)*.23);color:#dff0e5;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.rtgrp--invalid .rtgrp__lbl{color:#ffb3b3}
.rtgrp__ok{color:#2fe07f}
.rtgrp__bad{color:#ff6b6b}

/* ---- playing cards ---- */
/* A card arriving in the hand or on the pile: it comes in from where it came
   from, slowly enough to be seen doing it. */
@keyframes rcdrawn{from{transform:translateY(-38%) scale(.86);opacity:0}to{transform:none;opacity:1}}
@keyframes rcthrown{from{transform:translateY(26%) scale(.9);opacity:.2}to{transform:none;opacity:1}}
.rc--drawn{animation:rcdrawn .34s cubic-bezier(.22,.9,.3,1)}
/* Only a card that has just LANDED on the pile. This used to be on every card
   the slot painted, so taking the top card made the one underneath bounce in as
   though it had been thrown — the pile shaking at the moment a card was picked
   off it, when nothing down there had moved at all. */
.rtslot--landed .rc{animation:rcthrown .34s cubic-bezier(.22,.9,.3,1)}

.rc{position:relative;width:var(--cw);height:var(--ch);flex:none;border-radius:calc(var(--cw)*.11);
  background:linear-gradient(170deg,#fff,#f0f0ee);color:#15202b;overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.16);
  font-family:'Poppins';line-height:1}
.rc--red{color:#d21f2b}
.rc__r{position:absolute;top:2%;left:7%;font-size:calc(var(--cw)*.5);font-weight:700;letter-spacing:-.03em}
.rc__s{position:absolute;top:calc(var(--cw)*.52);left:9%;font-size:calc(var(--cw)*.3)}
.rc__big{position:absolute;right:6%;bottom:2%;font-size:calc(var(--cw)*.72)}
.rc__pj{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--cw)*.8)}
/* A joker — printed or this deal's wild rank — is coloured, because missing one
   is the difference between a winning hand and eighty points. */
.rc--jok{background:linear-gradient(170deg,#ffef9f,#f7d64b)}
.rc--jok::after{content:"🃏";position:absolute;left:4%;bottom:2%;font-size:calc(var(--cw)*.36)}
.rc--pj::after{content:none}
/* Restated after .rc — the shared rule with .rtback sits above the card face and
   would otherwise lose to it, leaving a blank white slab. */
.rc--back{color:transparent;background:
  repeating-linear-gradient(45deg,rgba(0,0,0,.10) 0 3px,transparent 3px 6px),
  linear-gradient(160deg,#f0c463,#c8891f 55%,#a56b12);
  box-shadow:0 2px 5px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.4)}
.rc--back::after{content:"";position:absolute;inset:26% 28%;border-radius:2px;
  border:1.5px solid rgba(255,255,255,.5);transform:rotate(45deg)}

/* Cards move at a pace you can follow. A card lifting, landing or being thrown
   is the one moment a player checks they did what they meant to, and at .12s it
   was over before they looked. */
.rc--hand{cursor:grab;touch-action:none;transition:transform .28s cubic-bezier(.22,.9,.3,1),box-shadow .28s}
.rc--hand+.rc--hand{margin-left:calc(var(--cw)*-.02)}
.rc--picked{transform:translateY(-16%);box-shadow:0 10px 18px rgba(0,0,0,.5),0 0 0 2px #ffd76a}
/* More than one card up means a group is being built, not a throw chosen. */
.rthand--many .rc--picked{box-shadow:0 10px 18px rgba(0,0,0,.5),0 0 0 2px #6cd0ff}
.rc--fin::before{content:"";position:absolute;top:5%;right:5%;width:calc(var(--cw)*.16);height:calc(var(--cw)*.16);
  border-radius:50%;background:#2fe07f;box-shadow:0 0 8px rgba(47,224,127,.9)}
/* ---- the deal ----
   Backs come out of the middle of the table one after another and settle into
   the row; the whole hand then turns over at once, unsorted, before it sorts
   itself. Each card is told where it flew from (--dx,--dy) and when to leave
   (--i), because they land in different places and must not leave together. */
@keyframes rcdeal{
  from{transform:translate(var(--dx,0),var(--dy,0)) scale(.72) rotate(-7deg);opacity:0}
  55%{opacity:1}
  to{transform:none;opacity:1}
}
@keyframes rcturn{
  from{transform:perspective(600px) rotateY(88deg);opacity:.6}
  to{transform:none;opacity:1}
}
.rthand--dealing .rc{animation:rcdeal .42s cubic-bezier(.2,.85,.3,1) backwards;
  animation-delay:calc(var(--i,0) * 45ms);cursor:default}
.rthand--flip .rc{animation:rcturn .32s ease-out backwards;animation-delay:calc(var(--i,0) * 14ms)}
/* Dealt order is one unbroken row: no groups, no labels, nothing decided yet. */
.rtgrp--dealt .rtgrp__cards{border-bottom-color:transparent}
.rthand--dealing .rc--hand+.rc--hand{margin-left:calc(var(--cw)*-.06)}

/* The card that just arrived. With the hand sorted for you, a drawn card can
   land anywhere in it — this is how a player finds it. */
/* Its own element, not ::after. A joker's face is already an ::after, and a
   card cannot carry two of them: setting the badge there gave the joker a box
   stretched from the badge's top to the joker mark's bottom — a gold slab over
   the whole card, which is exactly what it looked like. */
.rc__new{position:absolute;top:-.5em;left:50%;transform:translateX(-50%);
  padding:0 .35em;border-radius:3px;font-style:normal;font-size:calc(var(--cw)*.2);font-weight:700;
  letter-spacing:.5px;line-height:1.35;white-space:nowrap;
  background:linear-gradient(#ffe08a,#e0a51c);color:#2a1f00;box-shadow:0 1px 3px rgba(0,0,0,.5);z-index:3}
.rc--new{overflow:visible}

.rc--ghosted{opacity:.28}
.rtdrag{position:fixed;inset:0;pointer-events:none;z-index:80}
.rtghost{position:absolute;top:0;left:0;transform:translate(-100px,-100px);opacity:.92;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.6))}
/* A card on its way somewhere: to the pile, off it, or across to a seat. Every
   card that moves is seen moving, so the fly is not only for a throw. */
.rtghost--fly{transition:transform .42s cubic-bezier(.3,.8,.35,1),opacity .42s}

/* The throw hint. The zone itself is the whole table above the hand — that is a
   geometric hit test, not an element — so all that is drawn is a small tag right
   above the cards, where the player's eyes already are. A full-table dashed box
   shouted at them for something they only need told once. */
.rtzone{position:absolute;left:50%;bottom:calc(var(--ch) + calc(8.6 * var(--sh)));transform:translateX(-50%);
  padding:.25em .8em;border-radius:999px;pointer-events:none;opacity:0;z-index:5;white-space:nowrap;
  background:rgba(6,22,14,.82);border:1px dashed rgba(108,208,255,.55);
  transition:opacity .15s,border-color .15s,background .15s}
.rtzone--on{opacity:1}
.rtzone--hot{background:rgba(20,70,95,.9);border-color:rgba(108,208,255,.95)}
.rtzone span{font-size:calc(var(--cw)*.24);letter-spacing:1px;text-transform:uppercase;color:#bfeaff}
.rtzone--hot span{color:#eaf8ff}

/* Whose turn it is. Grey text on green felt was a whisper; when it is the
   player's turn this is a badge, and in the last ten seconds it is a red one. */
/* Somebody has declared. A bar across the table, above the hand: who went out,
   what to do about it, and the button to do it — not three places to look. */
.rtshow{position:absolute;left:3%;right:3%;bottom:calc(var(--ch) + calc(4.4 * var(--sh)));
  z-index:6;display:flex;align-items:center;justify-content:space-between;gap:calc(2 * var(--sw));
  padding:calc(.7 * var(--sh)) calc(1.4 * var(--sw));border-radius:10px;
  background:rgba(8,20,14,.92);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 6px 18px rgba(0,0,0,.5)}
.rtshow__txt{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.rtshow__txt b{font-size:clamp(11px,calc(1.7 * var(--sh)),15px);font-weight:600;color:#f2f7f3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rtshow__txt span{font-size:clamp(10px,calc(1.4 * var(--sh)),13px);color:#a9bdb0}
.rtshow__btn{flex:none;padding:calc(.55 * var(--sh)) calc(1.8 * var(--sw));border:0;border-radius:7px;
  font-weight:700;letter-spacing:1px;cursor:pointer;color:#fff;
  font-size:clamp(11px,calc(1.7 * var(--sh)),15px);
  background:linear-gradient(#e5453a,#b3211a);box-shadow:0 3px 10px rgba(0,0,0,.5)}
.rtshow__btn:disabled{opacity:.45;cursor:default}

.rtmsg{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--ch) + calc(4.6 * var(--sh)));
  max-width:92%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:clamp(10px,calc(1.4 * var(--sh)),14px);color:#bcd6c6;text-shadow:0 1px 3px rgba(0,0,0,.6);
  pointer-events:none;z-index:5;padding:.2em .6em;border-radius:999px;transition:background .2s,color .2s}
.rtmsg--mine{padding:.3em .85em;font-weight:700;letter-spacing:.4px;text-shadow:none;
  font-size:clamp(11px,calc(1.7 * var(--sh)),16px);color:#2a1f00;background:linear-gradient(#ffe08a,#e0a51c);
  box-shadow:0 3px 10px rgba(0,0,0,.45),0 0 0 1.5px rgba(255,255,255,.28),0 0 18px rgba(255,208,80,.4);
  animation:rtturnpulse 1.5s ease-in-out infinite}
/* A hand that can finish: the one message worth interrupting for. */
.rtmsg--finish{color:#04240f;background:linear-gradient(#8bf0b0,#22a85c);
  box-shadow:0 5px 16px rgba(0,0,0,.5),0 0 0 2px rgba(255,255,255,.3),0 0 30px rgba(55,204,112,.6)}
.rtmsg--urgent{color:#fff;background:linear-gradient(#ff7a6a,#c0261a);
  box-shadow:0 5px 16px rgba(0,0,0,.5),0 0 0 2px rgba(255,255,255,.25),0 0 26px rgba(226,59,59,.55)}
@keyframes rtturnpulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.04)}}

/* ---- the rail along the bottom ---- */
.rt__bot{position:relative;z-index:6;flex:none;height:calc(12 * var(--sh));min-height:69px;display:flex;align-items:center;gap:calc(1.4 * var(--sw));padding:0 calc(2 * var(--sw));
  background:linear-gradient(0deg,#08150f,#06110c)}
.rtpool{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;
  min-width:calc(8 * var(--sh));padding:calc(.5 * var(--sh)) calc(.8 * var(--sh));border-radius:10px;line-height:1.25;
  background:linear-gradient(160deg,#1c8b56,#0d4c2f);border:2px solid #7ee3a9;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.rtpool span{font-size:clamp(11px,calc(1.3 * var(--sh)),15px);color:#cdf3dd}
.rtpool b{font-size:clamp(13px,calc(1.7 * var(--sh)),18px);color:#fff}
/* Declare stands in the pool chip's corner, and only while the hand can finish.
   Green, larger than the chip it replaces, and it should be the brightest thing
   on the felt at that moment. */
.rtdeclare{flex:none;min-width:5em;padding:.5em .9em;border:0;border-radius:12px;cursor:pointer;
  font-family:'Rowdies';font-size:clamp(13px,calc(2.8 * var(--sh)),19px);letter-spacing:.5px;color:#fff;
  background:linear-gradient(#37cc70,#1c8b45);box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 0 2px rgba(255,255,255,.25)}
.rtdeclare--ready{animation:rtpulse 1.2s ease-in-out infinite}
.rtdeclare:disabled{filter:grayscale(.4);opacity:.75;cursor:default;animation:none}

/* Make a group. A dashed outline on a near-black rail read as a disabled
   control; this is a button like the others, and it should look like one. */
.rtplus{flex:none;font-size:clamp(12px,calc(2.6 * var(--sh)),17px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05em;
  min-width:3.6em;padding:.42em .6em;border:0;border-radius:9px;
  background:linear-gradient(#4a5f52,#26332c);color:#fff;cursor:pointer;line-height:1.1;
  box-shadow:0 3px 8px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.14)}
.rtplus span{font-size:1.3em;line-height:.9;font-weight:700}
.rtplus i{font-style:normal;font-size:.62em;letter-spacing:.6px;text-transform:uppercase;color:#dfe9e2}
.rtplus:hover:not(:disabled){background:linear-gradient(#5c766a,#2f3f36)}
.rtplus:disabled{opacity:.35;cursor:default}

.rtme{flex:1;display:flex;align-items:center;justify-content:center;gap:calc(1.6 * var(--sw))}
.rtme__n{font-size:clamp(13px,calc(1.8 * var(--sh)),20px);color:#cfe6d8}
.rtme__n b{color:#fff}
.rtme__av{position:relative;width:calc(8 * var(--sh));height:calc(8 * var(--sh));min-width:45px;min-height:45px;border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.rtme__av .rtav i{font-size:calc(2.6 * var(--sh))}
.rtme__av .rtring i{font-size:clamp(13px,calc(1.9 * var(--sh)),20px);min-width:1.7em;height:1.7em}
.rtme__av--lead::before{content:"D";position:absolute;left:-12%;bottom:0;z-index:2;width:1.9em;height:1.9em;
  border-radius:50%;display:grid;place-items:center;font-size:calc(1.4 * var(--sh));font-weight:700;
  background:linear-gradient(#ffdd80,#dfa316);color:#3a2900;box-shadow:0 2px 5px rgba(0,0,0,.45)}
/* Your own seat out of the deal: the same stamp and the same dimming as the
   plates across the table. The stamp is sized to this avatar, which is measured
   in stage height rather than card widths and would clip at the opponents' size. */
.rtme__av .rtseat__tag{font-size:max(9px,calc(1.45 * var(--sh)))}
.rtme--dropped .rtme__av,.rthandwrap--dropped .rthand{opacity:.55;filter:grayscale(.7)}

.rtact{flex:none;font-size:clamp(12px,calc(2.6 * var(--sh)),17px);
  min-width:4.6em;padding:.42em .7em;border:0;border-radius:9px;cursor:pointer;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;
  box-shadow:0 3px 8px rgba(0,0,0,.5)}
.rtact b{font-size:1em;font-weight:700;letter-spacing:.4px}
.rtact i{font-style:normal;font-size:.68em;opacity:.9}
.rtact:disabled{opacity:.4;cursor:default;box-shadow:none}
.rtact--split{background:linear-gradient(#9b6fd8,#5b3596)}
.rtact--split:disabled{display:none}
.rtact--split.rtact--asked{background:linear-gradient(#7d7d7d,#4a4a4a)}
/* The other player has asked: this is now an accept, and it should look like one. */
.rtact--split.rtact--offered{background:linear-gradient(#37cc70,#1c8b45);
  animation:rtpulse 1.2s ease-in-out infinite}
.rtact--throw{background:linear-gradient(#3fb1e0,#1c6b96)}
.rtact--throw:disabled{display:none}
.rtact--drop{background:linear-gradient(#d94a3d,#a32b21)}
.rtact--drop i{color:#ffd76a}
.rtact--sort{background:linear-gradient(#3d7fd9,#1f4d92);
  flex-direction:row;align-items:center;gap:.45em;padding-left:.5em}
.rtact--sort .rtact__txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.rtact__box{flex:none;width:1.05em;height:1.05em;border-radius:3px;display:grid;place-items:center;
  border:1.5px solid rgba(255,255,255,.85);background:transparent;font-size:.9em}
.rtact--on .rtact__box{background:#fff}
.rtact--on .rtact__box::after{content:"✓";font-size:.8em;font-weight:700;color:#1f4d92;line-height:1}
@keyframes rtpulse{0%,100%{box-shadow:0 3px 8px rgba(0,0,0,.5)}50%{box-shadow:0 3px 8px rgba(0,0,0,.5),0 0 22px rgba(55,204,112,.85)}}

/* ---- overlays ---- */
.rtover{position:absolute;inset:0;display:grid;place-items:center;background:rgba(4,16,10,.72);z-index:20}
.rtover__card{text-align:center;display:grid;gap:calc(.8 * var(--sh));justify-items:center;
  padding:calc(2.4 * var(--sh)) calc(3.4 * var(--sh));border-radius:16px;background:rgba(8,26,18,.9);border:1px solid rgba(255,255,255,.1)}
.rtover__card b{font-family:'Rowdies';font-size:clamp(17px,calc(2.4 * var(--sh)),26px);color:#fff}
.rtover__card span{font-size:clamp(12px,calc(1.6 * var(--sh)),17px);color:#9fb6a8;max-width:34ch}
.rtspin{width:calc(4 * var(--sh));height:calc(4 * var(--sh));min-width:29px;min-height:29px;border-radius:50%;
  border:3px solid rgba(255,255,255,.15);border-top-color:#3ddc84;animation:rtspin 1s linear infinite}
@keyframes rtspin{to{transform:rotate(360deg)}}

/* ---- horizontal, whichever way the phone is held ----
   Thirteen cards, four seats and two piles do not fit across a portrait phone at
   a readable size, and the wallet browsers people arrive in — Trust, SafePal —
   grant neither full screen nor an orientation lock, so asking the device to
   rotate does not work. The page turns itself instead: on a portrait phone the
   stage is laid out landscape and rotated a quarter turn to fill the screen.
   The player turns the handset; nothing has to be granted by anyone.

   Everything fixed inside the stage — the felt, the dialogs, the drag layer —
   positions against the stage rather than the viewport, because a transform
   makes it their containing block. That is what keeps them square to the table.

   The pointer, though, still speaks viewport coordinates, so rummy-table.js
   turns them back the other way when it places a dragged card and when it works
   out which side of the hand the player let go on. */
.rtstage{position:fixed;inset:0;overflow:hidden}

@media(orientation:portrait) and (max-width:900px){
  /* Turned: the stage's width runs down the screen and its height across it. */
  .rtbody{--sw:1vh; --sh:1vw}

  .rtstage{
    inset:auto;top:0;left:0;
    width:100vh;height:100vw;
    width:100dvh;height:100dvw;
    transform-origin:0 0;
    transform:rotate(90deg) translateY(-100%);
  }
}

/* ---- the score window, and the little confirms ---- */
.rtwin{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.6);display:none;place-items:center;padding:calc(2 * var(--sh))}
.rtwin.show{display:grid}
.rtwin__card{width:min(calc(94 * var(--sw)),820px);max-height:calc(92 * var(--sh));display:flex;flex-direction:column;overflow:hidden;
  background:#fff;color:#1b1b1b;border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.65)}
.rtwin--sm .rtwin__card{width:min(calc(88 * var(--sw)),420px)}
.rtwin__bar{position:relative;padding:calc(.9 * var(--sh)) 2.6rem;text-align:center;letter-spacing:2px;font-weight:700;
  font-size:clamp(15px,calc(2 * var(--sh)),21px);color:#fff;background:linear-gradient(#cf4436,#8e2420 70%,#7a1d19);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 6px rgba(0,0,0,.25)}
.rtwin__bar i{font-style:normal;font-weight:500;letter-spacing:1px;opacity:.75;margin-left:.6rem;font-size:.8em}
.rtwin__x{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:2rem;height:2rem;
  border:0;background:none;color:#fff;font-size:1.1rem;cursor:pointer;line-height:1}
/* Proportions, not rem. Sized in rem, these columns grew with the reader's own
   text setting and squeezed the cards into a strip six wide — a score window
   that will not show a hand is not a score window. */
.rtwin__head,.rtwin__row{display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,3.4fr) minmax(0,.6fr) minmax(0,.7fr);
  align-items:center;gap:.5rem;padding:.5rem .8rem}
.rtwin__head{background:#f4f4f4;color:#8a8a8a;font-size:clamp(12px,calc(1.5 * var(--sh)),15px);text-align:center;
  letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid #e4e4e4}
.rtwin__head span:first-child{text-align:left;padding-left:.2rem}
.rtwin__rows{overflow:auto;-webkit-overflow-scrolling:touch}
.rtwin__row{border-bottom:1px solid #eee;font-size:clamp(12px,calc(1.6 * var(--sh)),17px);text-align:center;
  transition:background .2s}
.rtwin__row:nth-child(even){background:#fbfbfb}
/* The two rows that matter are the one that won and the one that is me. */
.rtwin__row--won{background:linear-gradient(90deg,#fffdf4,#fdf3d2)}
.rtwin__row--me{box-shadow:inset 3px 0 0 #c0392b}
.rtwin__row--out{opacity:.62}

.rtwin__who{display:flex;align-items:center;gap:.5rem;text-align:left;position:relative;min-width:0}
.rtwin__who .rtav{position:relative;width:2.1rem;height:2.1rem;flex:none;inset:auto;
  box-shadow:0 0 0 2px rgba(0,0,0,.08)}
.rtwin__who .rtav i{font-size:.9rem}
.rtwin__nm{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.rtwin__who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82em;
  font-weight:600;color:#2a2a2a}
.rtwin__nm i{font-style:normal;font-size:.66em;letter-spacing:.5px;color:#8a8a8a}
.rtwin__me{font-style:normal;background:#c0392b;color:#fff;border-radius:3px;padding:.05rem .3rem;
  font-size:.58em;letter-spacing:.6px;font-weight:700;flex:none}

.rtwin__res{font-weight:700;color:#9a9a9a;letter-spacing:.6px;font-size:.86em}
.rtwin__res--won{color:#b07d0a}
.rtwin__res--won::before{content:"🏆";margin-right:.3rem;font-size:1.1em;vertical-align:-.1em}
.rtwin__res i{display:block;font-style:normal;font-size:.68em;font-weight:700;color:#c0392b;letter-spacing:1px}

/* Every card, always. It wraps onto another line rather than scrolling out of
   sight: a hand nobody can see the end of settles no argument. */
.rtwin__cards{display:flex;gap:.4rem;row-gap:.3rem;flex-wrap:wrap;align-items:center;padding:.2rem 0}
.rtwin__grp{display:flex;flex:none;padding-bottom:3px;border-bottom:2.5px solid transparent;border-radius:3px}
.rtwin__grp--pure,.rtwin__grp--run{border-bottom-color:#25a05e}
.rtwin__grp--set{border-bottom-color:#3d7fd9}
.rtwin__grp--invalid{border-bottom-color:#d84a4a}
.rtwin__backs{display:flex;gap:1px;flex-wrap:wrap;row-gap:.3rem;opacity:.85}
.rtwin__wait{color:#aaa;font-size:.86em;font-style:italic}

.rtwin__sc{font-weight:700;color:#444}
.rtwin__tot{font-weight:700;font-size:1.1em;color:#1c8b45}
.rtwin__row--won .rtwin__tot{color:#b07d0a}
.rtwin__empty{padding:1.4rem;text-align:center;color:#888;font-size:.8rem}
.rtwin__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem .8rem;
  background:#f4f4f4;border-top:1px solid #e2e2e2}
.rtwin__joker{display:flex;align-items:center;gap:.5rem;font-size:.62rem;letter-spacing:1px;
  text-transform:uppercase;color:#8a8a8a}
.rtwin__joker div{display:flex;gap:.3rem}
.rtwin__note{font-size:clamp(12px,calc(1.5 * var(--sh)),16px);color:#666;text-align:right}
.rtwin__end{display:flex;align-items:center;gap:.8rem}
.rtbtn--sm{min-width:5.5rem;padding:.45rem 1rem;font-size:.76rem}
/* At this size a corner index and a big pip are two illegible marks. One centred
   rank over one centred suit is the whole card. */
.rc--mini{--cw:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.32),inset 0 0 0 1px rgba(0,0,0,.14)}
.rc--mini .rc__r{position:static;font-size:12px;line-height:1;letter-spacing:-.03em}
.rc--mini .rc__s{position:static;font-size:11px;line-height:1}
.rc--mini .rc__big{display:none}
.rc--mini.rc--jok::after{display:none}
.rc--mini .rc__pj{position:static;font-size:14px}
.rc--mini+.rc--mini{margin-left:1px}

.rtnotice__msg{margin:0;padding:2.4rem 1.2rem;text-align:center;font-size:clamp(16px,calc(2 * var(--sh)),21px);color:#222}
.rtnotice__acts{display:flex;gap:.8rem;padding:0 1.2rem 1.2rem;justify-content:center}
.rtbtn{display:inline-flex;align-items:center;justify-content:center;min-width:7.5rem;padding:.6rem 1.2rem;
  border:0;border-radius:6px;font-weight:700;letter-spacing:1px;font-size:.82rem;color:#fff;cursor:pointer;
  text-decoration:none;font-family:'Poppins'}
.rtbtn--red{background:linear-gradient(#d94a3d,#b3291d)}
.rtbtn--green{background:linear-gradient(#37cc70,#1c8b45)}

.rtmenu{padding:1rem 1.2rem 1.2rem;display:grid;gap:.6rem;justify-items:center}
.rtmenu__row{width:100%;display:flex;justify-content:space-between;font-size:.82rem;color:#555;
  border-bottom:1px solid #eee;padding-bottom:.4rem}
.rtmenu__row b{color:#111}
.rtmenu__help{font-size:.74rem;line-height:1.7;color:#666}
.rtmenu__help p{margin:.4rem 0}

/* ---- the winner banner ---- */
/* The result sits ACROSS the table rather than down the middle of it, and high
   enough to clear the hand — a player wants to read the result while still
   looking at the cards that produced it, not instead of them. */
.rtbanner{position:fixed;inset:0;z-index:75;display:none;place-items:start center;
  padding-top:calc(6 * var(--sh));background:rgba(2,10,6,.5)}
.rtbanner.show{display:grid}
.rtbanner__in{position:relative;text-align:center;width:min(97%,64em);
  display:grid;grid-template-columns:auto auto;align-items:center;justify-content:center;
  column-gap:calc(2.4 * var(--sw));row-gap:calc(.5 * var(--sh));
  padding:calc(1.2 * var(--sh)) calc(3 * var(--sw));
  border-radius:14px;background:rgba(6,22,14,.94);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 44px rgba(0,0,0,.6)}
/* The hand must stay readable underneath it: a result is read against the cards
   that produced it, and the thirteen that could have gone out are the point. */
.rtbanner{align-content:start}
/* Title and figure share the top line; the explanation and the buttons run the
   full width beneath them. */
.rtbanner__sub,.rtbanner__acts,.rtbanner__low{grid-column:1/-1}
.rtbanner__ttl{font-family:'Rowdies';font-size:clamp(18px,calc(3.4 * var(--sh)),38px);letter-spacing:1.5px;
  background:linear-gradient(#fff3c4,#e8b62c);-webkit-background-clip:text;background-clip:text;color:transparent}
.rtbanner--lose .rtbanner__ttl{background:linear-gradient(#e7eef0,#93a4a9);-webkit-background-clip:text;background-clip:text}
.rtbanner__amt{font-family:'Space Grotesk';font-size:clamp(16px,calc(2.6 * var(--sh)),30px);color:#7ee3a9;
  white-space:nowrap}
.rtbanner--lose .rtbanner__amt{color:#ff9b9b}
.rtbanner__sub{font-size:clamp(12px,calc(1.7 * var(--sh)),17px);color:#9fb6a8}
.rtbanner__acts{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:.2rem}
.rtbanner__acts .rtbtn{min-width:0;padding:.45rem .9rem;font-size:.74rem}
.rtbanner__low{display:grid;gap:.5rem;justify-items:center;margin-top:.2rem}
.rtbanner__low b{font-size:clamp(13px,calc(1.8 * var(--sh)),18px);color:#ff9b9b;font-weight:600}
.rtbtn--gold{background:linear-gradient(#ffdd80,#dfa316);color:#2a1f00}
.rtbtn--dark{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22)}

@media(prefers-reduced-motion:reduce){
  .rtdeclare--ready,.rtspin,.rtclosed--live,.rtslot--target,.rtmsg--mine,
  .rtseat--took .rtseat__fan,.rtseat--threw .rtseat__fan{animation:none}
}

/* ---- multiplayer: lobby ---- */
/* The balance sits with the tables: joining spends it, so it is not a footnote. */
.rmyhead{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.rmybal{text-align:right;line-height:1.25}
.rmybal__lbl{display:block;font-size:.6rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.rmybal__val{display:block;font-family:'Rowdies';font-size:1.6rem;color:var(--gold)}
.rmybal__add{display:inline-flex;align-items:center;gap:.3rem;margin-top:.15rem;font-size:.68rem;font-weight:600;
  color:var(--muted);text-decoration:none}
.rmybal__add .ico{width:14px;height:14px}
.rmybal__add:hover{color:var(--gold)}
/* A table the balance will not cover says so instead of failing on the join. */
.rmytile--poor{opacity:.5;filter:grayscale(.45)}
.rmytile--poor .rmytile__seats{color:#ff9b9b}
.rmytile--poor .rmytile__go{opacity:.4}

/* ---- choosing a game, then a stake ---- */
.rmytypes{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.8rem}
.rmytype{display:grid;gap:.3rem;justify-items:start;text-align:left;padding:1.1rem 1.1rem 1.2rem;
  border-radius:16px;cursor:pointer;border:1px solid var(--line-soft);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02));transition:.2s}
.rmytype:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 12px 26px rgba(0,0,0,.45)}
.rmytype__ic{font-size:1.6rem;line-height:1}
.rmytype b{font-family:'Rowdies';font-size:1.1rem;color:var(--ink)}
.rmytype__sub{font-size:.66rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold-2)}
.rmytype__blurb{font-size:.74rem;color:var(--muted);line-height:1.5}

.rmystakes__head{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:.2rem}
/* The way back out of a game. It was a grey pill saying "Games", which reads as
   a label rather than a control — this one says what pressing it does. */
.rmyback{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1rem;border-radius:999px;
  font-size:.82rem;font-weight:700;cursor:pointer;letter-spacing:.2px;
  border:1px solid var(--gold-3);background:rgba(246,197,23,.1);color:var(--gold);transition:.2s}
.rmyback__ar{font-size:1em;line-height:1;transition:transform .2s}
.rmyback:hover{background:var(--d-gold);border-color:transparent;color:#2a1e02}
.rmyback:hover .rmyback__ar{transform:translateX(-2px)}
.rmylobby__note{font-size:.74rem;color:var(--muted);line-height:1.6;margin:-.4rem 0 1rem;max-width:62ch}
.rmylobby__note b{color:var(--gold-2)}
/* A rate reads as a rate, and what it can cost is said underneath it. */
.rmytile b em{font-style:normal;font-family:'Poppins';font-size:.62rem;font-weight:600;
  letter-spacing:.5px;color:var(--muted);margin-left:.15rem}
.rmytile__cap{display:block;font-size:.62rem;color:var(--muted-2,var(--muted));margin-top:-.15rem}

/* ---- the member's own rummy tables ---- */
.rmysum{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:.2rem 0 1rem}
.rmysum__c{text-align:center;padding:.6rem .4rem;border-radius:12px;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.rmysum__c b{display:block;font-family:'Rowdies';font-size:1.15rem;color:var(--ink)}
.rmysum__c span{font-size:.62rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.wghist .up{color:#7fe0a8}
.wghist .down{color:#ff9b9b}

.rmyh{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.65rem .2rem;border-bottom:1px solid rgba(255,255,255,.06)}
.rmyh:last-child{border-bottom:0}
.rmyh__l b{display:block;font-size:.86rem;color:var(--ink)}
.rmyh__l span{font-size:.68rem;color:var(--muted)}
.rmyh__r{text-align:right;line-height:1.35}
.rmyh__r em{font-style:normal;font-size:.58rem;letter-spacing:1.4px;color:var(--muted)}
.rmyh__r b{display:block;font-family:'Space Grotesk';font-size:.98rem}
.rmyh__r span{font-size:.64rem;color:var(--muted-2,var(--muted))}
.rmyh--won .rmyh__r em{color:var(--gold)}

.rmylobby__blurb{font-size:.76rem;color:var(--muted);margin:-.2rem 0 1rem}
.rmylobby{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.7rem}
.rmytile{position:relative;padding:1rem .8rem;border-radius:14px;cursor:pointer;text-align:center;
  border:1px solid rgba(246,197,23,.3);background:linear-gradient(180deg,rgba(42,74,52,.85),rgba(15,36,24,.92));
  transition:transform .12s,box-shadow .2s,filter .2s}
.rmytile:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.45)}
.rmytile:disabled{cursor:default;filter:grayscale(.5);opacity:.55}
.rmytile b{display:block;font-family:'Rowdies';font-size:1.35rem;color:var(--ink)}
.rmytile__seats{display:block;font-size:.66rem;color:var(--muted);margin:.25rem 0 .5rem}
.rmytile--filling .rmytile__seats{color:#7fe0a8}
.rmytile__go{display:inline-flex;align-items:center;gap:.3rem;font-size:.66rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;color:var(--gold)}
.rmyseated{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.rmyseated__txt b{display:block;font-family:'Rowdies';color:var(--ink)}
.rmyseated__txt span{font-size:.72rem;color:var(--muted)}
.rmyseated__acts{display:flex;gap:.5rem}

.wgclock--urgent span{color:#ff9b9b;border-color:rgba(226,59,59,.5)}

/* Beta tag on the games list */
.dgame__tag{font-style:normal;font-size:.56rem;letter-spacing:1.2px;text-transform:uppercase;vertical-align:middle;
  margin-left:.45rem;padding:.14rem .45rem;border-radius:999px;background:rgba(246,197,23,.16);
  border:1px solid rgba(246,197,23,.4);color:var(--gold)}

/* ============ big small game ============ */
.bstotal{display:flex;flex-direction:column;align-items:center}
.bstotal b{font-family:'Rowdies';font-size:2rem;line-height:1;color:var(--gold-soft);min-width:2ch;text-align:center}
.bstotal span{font-size:.68rem;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-family:'Space Grotesk';margin-top:.2rem}

.bsdice{display:flex;gap:1rem;justify-content:center;margin:1.6rem 0 1.8rem}
.die{width:66px;height:66px;background:linear-gradient(155deg,#fffdf5,#e6dfca);border-radius:15px;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:10px;gap:2px;
  box-shadow:0 10px 22px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.08),inset 0 3px 6px rgba(255,255,255,.7);
  transition:transform .1s}
.die span{border-radius:50%;background:transparent}
.die span.on{background:radial-gradient(circle at 34% 30%,#4a4a4a,#0e0e0e);box-shadow:inset 0 1px 1px rgba(0,0,0,.4)}

.bsgrid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:.9rem}
.bsgrid--2{margin-bottom:.4rem}
.bsbet{position:relative;padding:1.5rem 1rem;border-radius:18px;cursor:pointer;text-align:center;
  border:1px solid rgba(246,197,23,.32);background:linear-gradient(180deg,rgba(42,74,52,.85),rgba(15,36,24,.92));
  box-shadow:0 8px 20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1);transition:transform .12s,box-shadow .2s,filter .2s}
.bsbet b{display:block;font-family:'Rowdies';font-size:1.6rem;color:var(--ink);letter-spacing:1px}
.bsbet span{display:block;font-size:.74rem;color:var(--muted);margin-top:.25rem}
.bsbet--small{background:linear-gradient(180deg,#2f7fd6,#12457f)}
.bsbet--small b,.bsbet--big b{color:#fff}
.bsbet--big{background:linear-gradient(180deg,#e23b3b,#8e1c1c)}
.bsbet:hover{transform:translateY(-2px);box-shadow:0 0 0 2px var(--gold),0 10px 24px rgba(0,0,0,.5);filter:brightness(1.06)}
.bsbet.pulse{transform:scale(.96)}
.bsbet.win{box-shadow:0 0 0 3px var(--gold),0 0 30px rgba(246,197,23,.85);animation:winpop .6s var(--ease);z-index:2}
.bshint{text-align:center;color:var(--muted);font-size:.8rem;margin:.4rem 0 .2rem}

/* big small recent chips */
.rr--big{background:linear-gradient(180deg,#e23b3b,#8e1c1c)}
.rr--small{background:linear-gradient(180deg,#2f7fd6,#12457f)}
.rr--triple{background:linear-gradient(180deg,#f6c517,#b8860b);color:#2a1e02}

/* ---- wallet: deposit / withdraw ---- */
.wstatus{display:inline-block;padding:.24rem .7rem;border-radius:999px;font-size:.72rem;font-weight:600;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.04);color:var(--muted)}
.wstatus--confirmed,.wstatus--paid{border-color:rgba(60,190,120,.45);background:rgba(60,190,120,.12);color:#7fe0a8}
.wstatus--pending{border-color:rgba(246,197,23,.45);background:rgba(246,197,23,.1);color:var(--gold-soft)}
.wstatus--rejected,.wstatus--failed{border-color:rgba(226,59,59,.45);background:rgba(226,59,59,.12);color:#ff9b9b}
.formmsg.ok{background:rgba(60,190,120,.14);border-color:rgba(60,190,120,.45);color:#7fe0a8}
.panel__card .btn{width:100%;justify-content:center}
.panel__card details summary::-webkit-details-marker{display:none}
.panel__card details summary{list-style:none;color:var(--gold-2)}
.panel__card details[open] summary{margin-bottom:.2rem}
@media(max-width:880px){
  .panel__grid{grid-template-columns:1fr}
}

/* ---- admin panel ---- */
.adm-badge{font-family:'Space Grotesk';font-size:.62rem;letter-spacing:1.5px;font-weight:600;
  color:#2a1e02;background:var(--d-gold,linear-gradient(180deg,#f6c517,#b8860b));
  padding:.25rem .6rem;border-radius:999px}
.adm-burger{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:.2rem;margin-right:.6rem}
/* stream switcher on the income pages; mirrors .adm-tabs but member-side */
.incometabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 1.1rem}
.incometabs a{font-size:.8rem;font-weight:600;color:var(--muted);padding:.45rem .9rem;border-radius:999px;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.03);transition:.2s;white-space:nowrap}
.incometabs a:hover{color:var(--gold);border-color:var(--line)}
.incometabs a.active{color:#2a1e02;background:var(--gold);border-color:var(--gold)}

.pager{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-top:1rem;flex-wrap:wrap}

/* who generated an aggregated payout — franchise base income names no single
   payer, so the row expands into the members whose turnover produced it */
.srcs{min-width:150px}
.srcs summary{cursor:pointer;color:var(--gold-2);font-size:.82rem;font-weight:600;list-style:none;
  padding:.15rem .5rem;border:1px solid var(--line-soft);border-radius:999px;display:inline-block}
.srcs summary::-webkit-details-marker{display:none}
.srcs summary::after{content:' ▾'}
.srcs[open] summary::after{content:' ▴'}
.srcs summary:hover{color:var(--gold);border-color:var(--gold)}
.srcs ul{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.45rem}
.srcs li{display:grid;gap:.1rem;padding:.4rem .55rem;border-radius:8px;background:rgba(255,255,255,.03);
  border:1px solid var(--line-soft)}
.srcs li em{font-style:normal;font-size:.66rem;color:var(--gold-2);text-transform:uppercase;letter-spacing:.4px}
.srcs li b{font-size:.86rem}
.srcs li .field__hint{font-size:.7rem}

.adm-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:.9rem 0 .4rem}
/* An admin is inside a member's account: unmistakable, on every page, with the
   way out in the bar itself. */
.asbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.6rem 1rem;border-radius:12px;margin-bottom:1rem;font-size:.8rem;color:#2a1f00;
  background:linear-gradient(#ffd76a,#e0a51c);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.asbar b{font-weight:700}
.asbar__out{flex:none;padding:.35rem .9rem;border-radius:999px;font-weight:700;font-size:.76rem;
  background:rgba(0,0,0,.72);color:#ffd76a}
.asbar__out:hover{background:#000}

/* A row that carries more than one action. */
.rowacts{display:flex;gap:.4rem;align-items:center;justify-content:flex-end;flex-wrap:nowrap}
.rowacts form{display:inline}

/* A page heading with an action alongside it. */
.pagehead--act{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* Paging for an admin ledger: how much of the set is on screen, and a short
   window of pages around this one — never a hundred numbers under a table. */
.adm-pager{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line-soft)}
.adm-pager__count{font-size:.76rem;color:var(--muted)}
.adm-pager__nav{display:flex;gap:.3rem;flex-wrap:wrap}
.adm-pager__nav a{min-width:2rem;height:2rem;padding:0 .5rem;display:inline-flex;align-items:center;
  justify-content:center;border-radius:9px;border:1px solid var(--line-soft);background:rgba(255,255,255,.03);
  color:var(--muted);font-size:.8rem;font-weight:600;transition:.2s}
.adm-pager__nav a:hover{color:var(--gold);border-color:var(--gold)}
.adm-pager__nav a.active{background:var(--gold);border-color:var(--gold);color:#2a1e02}
.adm-pager__nav a.off{opacity:.32;pointer-events:none}

/* Rows-per-page, sitting inside the search row it belongs to. */
.adm-per{display:inline-flex;align-items:center;gap:.45rem;font-size:.76rem;color:var(--muted)}
.adm-per select{background:rgba(4,14,9,.6);border:1px solid var(--line-soft);border-radius:10px;
  padding:.55rem .6rem;color:var(--ink);font-family:'Poppins';font-size:.82rem;cursor:pointer}
.adm-per select:focus{outline:none;border-color:var(--gold)}

/* A bet is several legs; each reads as a chip with its stake under it, so a
   row of them stays scannable instead of turning into a sentence. */
.betlegs{display:flex;gap:.3rem;flex-wrap:wrap;max-width:22rem}
.betleg{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15;
  padding:.2rem .45rem;border-radius:8px;font-size:.72rem;font-weight:600;color:var(--ink);
  border:1px solid var(--line-soft);background:rgba(255,255,255,.04)}
.betleg i{font-style:normal;font-size:.62rem;color:var(--muted)}

.adm-tabs a,.adm-export{font-size:.8rem;font-weight:600;color:var(--muted);padding:.4rem .9rem;border-radius:999px;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.03);transition:.2s;white-space:nowrap}
.adm-tabs a:hover{color:var(--gold);border-color:var(--line)}
.adm-tabs a.active{color:#2a1e02;background:var(--gold);border-color:var(--gold)}
/* Pushed to the far end so it reads as an action on the row, not another tab.
   The same pill serves a page with a search box instead of tabs. */
.adm-tabs__export,.adm-export{margin-left:auto;color:var(--gold-2)}
.adm-tabs__export:hover,.adm-export:hover{color:var(--gold);border-color:var(--gold)}
.adm-export{display:inline-flex;align-items:center}
.adm-search{display:flex;gap:.5rem;margin:.9rem 0 .3rem;flex-wrap:wrap}
.adm-search input{flex:1;min-width:200px;background:rgba(4,14,9,.6);border:1px solid var(--line-soft);
  border-radius:12px;padding:.7rem .9rem;color:var(--ink);font-family:'Poppins';font-size:.92rem}
.adm-search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(246,197,23,.16)}
/* the income filter adds a type picker and a date range alongside the search */
.adm-search select{background:rgba(4,14,9,.6);border:1px solid var(--line-soft);border-radius:12px;
  padding:.7rem .9rem;color:var(--ink);font-family:'Poppins';font-size:.92rem;cursor:pointer}
.adm-search select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(246,197,23,.16)}
.adm-search input[type=date]{flex:0 0 auto;min-width:0;color-scheme:dark}
.adm-acts{display:flex;flex-direction:column;gap:.4rem;min-width:150px}
.adm-acts .btn{width:100%;justify-content:center}
.adm-acts details summary{list-style:none;cursor:pointer}
.adm-acts details summary::-webkit-details-marker{display:none}
.adm-acts input,.panel__card details input[type=text]{width:100%;background:rgba(4,14,9,.6);
  border:1px solid var(--line-soft);border-radius:10px;padding:.5rem .7rem;color:var(--ink);
  font-family:'Poppins';font-size:.85rem}
.adm-acts input:focus{outline:none;border-color:var(--gold)}
.field select{width:100%;background:rgba(4,14,9,.6);border:1px solid var(--line-soft);border-radius:12px;
  padding:.9rem 1rem;color:var(--ink);font-family:'Poppins';font-size:.98rem;appearance:none;cursor:pointer}
.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(246,197,23,.16)}
.field select option{background:#16161a;color:var(--ink)}
.wstatus--approved{border-color:rgba(90,150,255,.45);background:rgba(90,150,255,.12);color:#9dc0ff}
@media(max-width:980px){
  .adm-burger{display:inline-grid;place-items:center}
}

/* ---- business plan: levels + VIP ---- */
.lvlgrid{display:flex;gap:.45rem;flex-wrap:wrap}
.lvl{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;font-weight:700;font-size:.85rem;
  font-family:'Space Grotesk';color:var(--muted);border:1px solid var(--line-soft);background:rgba(255,255,255,.03)}
.lvl--on{color:#2a1e02;background:var(--gold);border-color:var(--gold);box-shadow:0 4px 14px rgba(246,197,23,.25)}
.vipbar{height:10px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;margin-top:.7rem;
  border:1px solid var(--line-soft)}
.vipbar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#b8860b,#f6c517);
  transition:width .6s var(--ease)}

/* ---- RealWin ---- */
.wgtabs{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.3rem;margin-bottom:1rem}
.wgtab{flex:0 0 auto;display:grid;place-items:center;gap:.1rem;min-width:88px;padding:.7rem .6rem;border-radius:14px;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.03);color:var(--muted);transition:.2s}
.wgtab b{font-size:.78rem;color:var(--ink-2)}
.wgtab span{font-size:.72rem}
.wgtab__ic{color:var(--gold-2);display:grid;place-items:center}
.wgtab__ic .ico{width:18px;height:18px}
.wgtab:hover{border-color:var(--line);color:var(--gold)}
.wgtab.active{background:linear-gradient(180deg,rgba(246,197,23,.18),rgba(246,197,23,.06));border-color:var(--gold)}
.wgtab.active b,.wgtab.active span{color:var(--gold)}

.wghead{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.wghead__name{font-family:'Rowdies';font-size:1.15rem;color:var(--ink);margin:.5rem 0 .6rem}
.wghead__r{text-align:right;position:relative}
.wghead__lbl{font-size:.75rem;color:var(--muted);margin-bottom:.35rem}
.wghow{display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:600;color:var(--gold-2);
  padding:.4rem .8rem;border-radius:999px;border:1px solid var(--line-soft);background:rgba(246,197,23,.06);cursor:pointer}
.wghow:hover{border-color:var(--gold);color:var(--gold)}
.wgclock{display:flex;gap:.25rem;align-items:center;justify-content:flex-end}
.wgclock span{display:grid;place-items:center;width:26px;height:34px;border-radius:7px;font-family:'Space Grotesk';
  font-weight:700;font-size:1.15rem;color:#2a1e02;background:linear-gradient(180deg,#f6c517,#b8860b)}
.wgclock i{color:var(--gold);font-style:normal;font-weight:700}
.wgperiod{font-size:.72rem;color:var(--muted);margin-top:.4rem}
.wgmute{position:absolute;top:0;right:0;background:none;border:0;cursor:pointer;font-size:1rem;opacity:.75}
.wgmute:hover{opacity:1}

.wgboard{position:relative;overflow:hidden}
.wgbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.wgboard.locked .wgcolours,.wgboard.locked .wgnums,.wgboard.locked .wgstake,.wgboard.locked .wgbs{
  opacity:.45;pointer-events:none;filter:saturate(.5)}

.wgcolours{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin-bottom:1rem}
.wgc{position:relative;padding:.85rem .5rem;border-radius:12px;border:1px solid transparent;cursor:pointer;
  display:grid;gap:.15rem;transition:transform .12s,box-shadow .2s;color:#fff}
.wgc b{font-size:.95rem}
.wgc span{font-size:.75rem;opacity:.9}
.wgc--green{background:linear-gradient(180deg,#2fbf71,#127a45)}
.wgc--violet{background:linear-gradient(180deg,#9b5cf6,#5b21b6)}
.wgc--red{background:linear-gradient(180deg,#e23b3b,#8e1c1c)}
.wgc:hover{transform:translateY(-2px)}
.wgc.picked{box-shadow:0 0 0 2px var(--gold),0 8px 22px rgba(0,0,0,.45)}

.wgnums{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;margin-bottom:1rem}
.wgnum{position:relative;background:none;border:0;cursor:pointer;display:grid;justify-items:center;gap:.2rem;padding:.2rem}
.wgnum small{font-size:.66rem;color:var(--muted)}
.wgnum.picked small{color:var(--gold)}
.wgnum.picked .ball{box-shadow:0 0 0 2px var(--gold),0 6px 18px rgba(0,0,0,.5)}
.ball{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;font-family:'Rowdies';
  font-size:1.15rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);transition:transform .12s,box-shadow .2s}
.ball--sm{width:28px;height:28px;font-size:.8rem}
.ball--g{background:linear-gradient(180deg,#2fbf71,#127a45)}
.ball--r{background:linear-gradient(180deg,#e23b3b,#8e1c1c)}
/* 0 and 5 are dual-colour — the split is the reason they pay 1.5x on green/red */
.ball--rv{background:linear-gradient(135deg,#e23b3b 0 50%,#9b5cf6 50% 100%)}
.ball--gv{background:linear-gradient(135deg,#2fbf71 0 50%,#9b5cf6 50% 100%)}
.wgnum:hover .ball{transform:translateY(-2px)}

.wgstake{display:grid;gap:.6rem;margin-bottom:1rem}
.wgmul{display:flex;gap:.4rem;flex-wrap:wrap}
.wgm{flex:1 1 auto;min-width:52px;padding:.5rem .5rem;border-radius:10px;font-size:.8rem;font-weight:600;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer;transition:.15s}
.wgm:hover{border-color:var(--gold);color:var(--gold)}
.wgm.active{background:var(--gold);border-color:var(--gold);color:#2a1e02}
.wgm--rand{color:var(--gold-2)}

.wgbs{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:.8rem}
.wgb{position:relative;padding:.9rem;border-radius:12px;border:0;cursor:pointer;color:#fff;display:grid;gap:.1rem;
  transition:transform .12s,box-shadow .2s}
.wgb b{font-family:'Rowdies';font-size:1.05rem}
.wgb span{font-size:.75rem;opacity:.9}
/* Amber / blue, deliberately NOT green / red: those two are the colour bets
   sitting directly above, and reusing them made Big look like a Green stake. */
.wgb--big{background:linear-gradient(180deg,#e8951f,#b35c0d)}
.wgb--small{background:linear-gradient(180deg,#2f66d8,#17318a)}
.wgb:hover{transform:translateY(-2px)}
.wgb.picked{box-shadow:0 0 0 2px var(--gold),0 8px 22px rgba(0,0,0,.45)}

.wgchip{position:absolute;top:-6px;right:-6px;background:var(--gold);color:#2a1e02;border-radius:999px;
  font-size:.62rem;font-weight:700;padding:.1rem .35rem;font-family:'Space Grotesk';box-shadow:0 2px 8px rgba(0,0,0,.5)}

/* final-5s countdown — covers the board, never blocks the header timer */
.wgcount{position:absolute;inset:0;display:none;place-items:center;z-index:5;
  background:rgba(6,8,6,.72);backdrop-filter:blur(3px)}
.wgcount.show{display:grid}
.wgcount__tiles{display:flex;gap:1rem}
.wgcount__tiles span{display:grid;place-items:center;width:clamp(76px,26vw,120px);height:clamp(96px,32vw,150px);
  border-radius:18px;font-family:'Rowdies';font-size:clamp(3.4rem,13vw,6rem);line-height:1;color:#2a1e02;
  background:linear-gradient(180deg,#f6c517,#b8860b);box-shadow:0 14px 40px rgba(0,0,0,.6);
  animation:cdpop .5s var(--ease)}
@keyframes cdpop{from{transform:scale(.86)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .wgcount__tiles span{animation:none}
}
.rpopup__card--wide{max-width:420px}
@media(max-width:560px){
  .wgnums{grid-template-columns:repeat(5,1fr);gap:.4rem}
  .ball{width:40px;height:40px;font-size:1rem}
  .wghead{flex-direction:column}
  .wghead__r{text-align:left}
  .wgclock{justify-content:flex-start}
}

/* ---- RealWin history ---- */
.wghist{margin-top:1.4rem}
.wghtabs{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:.9rem}
.wght{flex:1 1 auto;padding:.55rem .9rem;border-radius:999px;font-size:.82rem;font-weight:600;cursor:pointer;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.03);color:var(--muted);transition:.2s;white-space:nowrap}
.wght:hover{border-color:var(--line);color:var(--gold)}
.wght.active{background:var(--gold);border-color:var(--gold);color:#2a1e02}
.wghbody{min-height:2.5rem}
.wghloading,.wghempty{text-align:center;color:var(--muted);padding:2.2rem 0;font-size:.88rem}
.wghempty b{display:block;color:var(--ink-2);margin-bottom:.3rem}
.wgdot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:3px;vertical-align:middle}
.wgdot--green{background:#2fbf71}
.wgdot--red{background:#e23b3b}
.wgdot--violet{background:#9b5cf6}
.wgnumbig{font-family:'Rowdies';font-size:1.15rem}
.wgnumbig--green{color:#2fbf71}
.wgnumbig--red{color:#e23b3b}
.wgnumbig--violet{color:#9b5cf6}
.wgpager{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-top:1rem}
.wgpager button{width:32px;height:32px;border-radius:9px;border:1px solid var(--line-soft);cursor:pointer;
  background:rgba(255,255,255,.03);color:var(--gold-2);font-size:1.1rem;line-height:1}
.wgpager button:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.wgpager button:disabled{opacity:.35;cursor:default}
.wgpager span{font-size:.82rem;color:var(--muted)}

/* chart */
.wgstat{width:100%;border-collapse:collapse;font-size:.76rem;margin-bottom:1rem}
.wgstat th,.wgstat td{padding:.35rem .2rem;text-align:center;border-bottom:1px solid var(--line-soft)}
.wgstat th:first-child,.wgstat td:first-child{text-align:left;color:var(--muted);white-space:nowrap;padding-right:.6rem}
.wgstat .c{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-weight:700;
  font-size:.72rem;color:#fff}
.wgchart{position:relative}
.wgchart svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.wgrow{display:flex;align-items:center;gap:.5rem;padding:.3rem 0;position:relative;z-index:2}
.wgrow__p{font-size:.68rem;color:var(--muted);width:96px;flex:0 0 auto}
.wgrow__d{display:flex;gap:.28rem;flex:1 1 auto;justify-content:space-between}
.wgrow__d i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-style:normal;
  font-size:.66rem;color:var(--muted);border:1px solid var(--line-soft)}
.wgrow__d i.on{color:#fff;border-color:transparent;font-weight:700}
.wgrow__b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.62rem;font-weight:700;
  flex:0 0 auto;color:#fff}
.wgrow__b--big{background:#f0a02a}
.wgrow__b--small{background:#2f7fd6}
.wgdetail{background:rgba(255,255,255,.03);border-radius:8px;padding:.5rem .7rem;margin-top:.35rem}
.wgdetail span{display:inline-block;font-size:.72rem;color:var(--ink-2);margin-right:.7rem}
.wgmore{background:none;border:0;color:var(--gold-2);cursor:pointer;font-size:.72rem;padding:0}
@media(max-width:560px){
  .wgrow__p{width:74px;font-size:.6rem}
  .wgrow__d i{width:17px;height:17px;font-size:.58rem}
}

/* ---- RealWin header: compact (v43) ----
   Overrides the earlier .wghead block. The header is a summary, not the game —
   it must not push the colour bets below the fold on a phone. The countdown
   overlay is deliberately NOT touched here; it stays large. */
.wghead{display:block;padding:.75rem .9rem;margin-bottom:.9rem}
.wghead__top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.wghead__mid{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:.5rem 0 .45rem}
.wghead__name{font-family:'Rowdies';font-size:1rem;color:var(--ink);margin:0;line-height:1.1}
.wghead__time{display:flex;align-items:center;gap:.5rem}
.wghead__lbl{font-size:.6rem;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:0;white-space:nowrap}
/* The digits stay the clearest thing in the card — players watch these. */
.wgclock{gap:.18rem}
.wgclock span{width:21px;height:28px;border-radius:6px;font-size:1rem}
.wgclock i{font-size:.85rem}
.wgperiod{margin:0;font-size:.65rem;opacity:.85}
.wghow{padding:.28rem .6rem;font-size:.68rem;gap:.3rem}
.wghow .ico{width:13px;height:13px}
.wgmute{position:static;font-size:.9rem}
/* Small enough to be a strip, big enough to read the colour apart. */
.rrecent .ball{width:24px;height:24px;font-size:.7rem}
@media(max-width:560px){
  /* Undo the old stacked mobile layout — that was the height culprit. */
  .wghead{flex-direction:row}
  .wghead__r{text-align:right}
  .wghead__mid{margin:.45rem 0 .4rem}
  .wghead__name{font-size:.92rem}
  .wgclock span{width:19px;height:26px;font-size:.92rem}
  .rrecent .ball{width:22px;height:22px;font-size:.64rem}
}

/* ---- RealWin bet builder modal ---- */
.betm{position:fixed;inset:0;z-index:120;display:none;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.6);backdrop-filter:blur(3px);padding:0}
.betm.show{display:flex}
@media(min-width:560px){.betm{align-items:center;padding:1rem}}
.betm__card{width:100%;max-width:460px;background:var(--paper,#16161a);border:1px solid var(--line,#2a2a30);
  border-radius:20px 20px 0 0;overflow:hidden;box-shadow:0 -10px 40px rgba(0,0,0,.5)}
@media(min-width:560px){.betm__card{border-radius:20px}}
.betm__head{background:linear-gradient(180deg,#f6c517,#c8961a);padding:1.1rem 1.2rem;text-align:center}
.betm__head h3{margin:0 0 .6rem;color:#231a02;font-family:'Rowdies';font-size:1.25rem}
.betm__sel{background:rgba(255,255,255,.92);border-radius:10px;padding:.55rem 1rem;color:#333;font-size:.95rem}
.betm__sel b{color:#111;text-transform:capitalize}
.betm__body{padding:1.2rem}
.betm__line{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:1.1rem}
.betm__lbl{color:var(--ink,#eee);font-weight:600;font-size:1rem}
.betm__amts{display:flex;gap:.5rem}
.betm__amts button{min-width:52px;padding:.55rem .3rem;border-radius:10px;border:1px solid var(--line-soft,#333);
  background:rgba(255,255,255,.04);color:var(--muted,#999);font-family:'Space Grotesk';font-weight:600;cursor:pointer;transition:.15s}
.betm__amts button.active{background:var(--gold,#f6c517);color:#231a02;border-color:var(--gold,#f6c517)}
.betm__qty{display:flex;align-items:center;gap:.5rem}
.betm__qty button{width:44px;height:44px;border-radius:10px;border:0;background:var(--gold,#f6c517);color:#231a02;
  font-size:1.4rem;font-weight:700;cursor:pointer;line-height:1}
.betm__qty input{width:100px;height:44px;text-align:center;border-radius:10px;border:1px solid var(--line-soft,#333);
  background:rgba(4,14,9,.5);color:var(--ink,#eee);font-family:'Space Grotesk';font-size:1.1rem}
.betm__qty input:focus{outline:none;border-color:var(--gold,#f6c517)}
.betm__muls{display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem;margin-bottom:1.1rem}
.betm__muls button{padding:.55rem .2rem;border-radius:8px;border:1px solid var(--line-soft,#333);
  background:rgba(255,255,255,.04);color:var(--muted,#999);font-family:'Space Grotesk';font-weight:600;font-size:.85rem;cursor:pointer;transition:.15s}
.betm__muls button.active{background:var(--gold,#f6c517);color:#231a02;border-color:var(--gold,#f6c517)}
.betm__agree{display:flex;align-items:center;gap:.5rem;color:var(--muted,#999);font-size:.9rem}
.betm__agree input{width:18px;height:18px;accent-color:var(--gold,#f6c517)}
.betm__agree a{color:var(--gold-2,#e0b32a)}
.betm__foot{display:grid;grid-template-columns:1fr 2fr}
.betm__cancel{padding:1.1rem;border:0;background:#1a1a20;color:var(--muted,#aaa);font-size:1rem;font-weight:600;cursor:pointer}
.betm__ok{padding:1.1rem;border:0;background:linear-gradient(180deg,#f6c517,#c8961a);color:#231a02;
  font-size:1rem;font-weight:700;cursor:pointer}
.betm__ok b{font-family:'Space Grotesk'}

/* ---- Roulette (0–8) — colours, outside bets, chart badges ---- */
.ball--green{background:linear-gradient(180deg,#2bb35a,#127034)}
.ball--red{background:linear-gradient(180deg,#e23b3b,#9c1c1c)}
.ball--black{background:linear-gradient(180deg,#3a3a3a,#0e0e0e)}
.wgnums--9{grid-template-columns:repeat(5,1fr)}
.wgout{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:.8rem}
.wgo{position:relative;padding:.8rem .4rem;border-radius:12px;border:1px solid var(--line-soft);cursor:pointer;
  color:var(--ink);display:grid;gap:.1rem;background:rgba(255,255,255,.04);transition:.15s}
.wgo b{font-family:'Rowdies';font-size:1rem}
.wgo span{font-size:.7rem;opacity:.85}
.wgo--red{background:linear-gradient(180deg,#e23b3b,#8e1c1c);color:#fff;border-color:transparent}
.wgo--black{background:linear-gradient(180deg,#3a3a3a,#111);color:#fff;border-color:transparent}
.wgo:hover{transform:translateY(-2px)}
.wgo.picked{box-shadow:0 0 0 2px var(--gold),0 8px 22px rgba(0,0,0,.45)}
.wgboard.locked .wgout{opacity:.5;pointer-events:none}
.wgdot--black{background:#3a3a3a}
.wgnumbig--black{color:#c8c8c8}
.wgrow__b--low{background:#2f7fd6}
.wgrow__b--high{background:#f0a02a}
.wgrow__b--zero{background:#2bb35a}
@media(max-width:560px){
  .wgout{grid-template-columns:repeat(2,1fr)}
}

/* ---- Roulette wheel reveal (plays after the round ends) ---- */
.rwheelov{position:absolute;inset:0;z-index:6;display:none;place-items:center;
  background:radial-gradient(circle at 50% 40%,rgba(10,8,4,.82),rgba(6,4,2,.94));
  border-radius:inherit;padding:1rem}
.rwheelov.show{display:grid}
.rwheelov .rwheel{position:relative;width:min(300px,74vw);margin:0}
.rwheelov .rw-svg{width:100%;height:auto;display:block;
  filter:drop-shadow(0 0 26px rgba(246,197,23,.28)) drop-shadow(0 20px 44px rgba(0,0,0,.6))}
/* Rotation MUST pivot on the wheel centre, not the SVG origin. */
#wheelSpin{transform-box:fill-box;transform-origin:center}
.rw-mark,.rw-ball{pointer-events:none}
.rwheel__cap{margin-top:.9rem;text-align:center;font-family:'Space Grotesk';font-weight:600;
  letter-spacing:.5px;color:var(--gold,#f6c517);font-size:1rem}

/* ---- roulette betting-cloth board (redesign) ---- */
.rtable{display:grid;gap:.55rem;margin-bottom:1rem}
.rtable__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem}
.rcell{position:relative;display:grid;place-content:center;justify-items:center;gap:.1rem;
  min-height:64px;border-radius:14px;border:1px solid rgba(255,255,255,.12);cursor:pointer;
  color:#fff;font-family:'Rowdies';box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 6px 16px rgba(0,0,0,.4);
  transition:transform .12s,box-shadow .18s,filter .18s}
.rcell b{font-size:1.5rem;line-height:1}
.rcell small{font-size:.62rem;font-family:'Poppins';font-weight:600;opacity:.8;letter-spacing:.5px}
.rcell--red{background:linear-gradient(180deg,#e23b3b,#8e1c1c)}
.rcell--black{background:linear-gradient(180deg,#3d3d44,#141418)}
.rcell:hover{transform:translateY(-2px);filter:brightness(1.08)}
.rcell:active{transform:scale(.97)}
.rcell.picked{box-shadow:0 0 0 2px var(--gold),0 8px 22px rgba(0,0,0,.5)}
.wgo--range{background:linear-gradient(180deg,rgba(246,197,23,.14),rgba(246,197,23,.04));color:var(--ink);border-color:rgba(246,197,23,.35)}
.wgboard.locked .rtable,.wgboard.locked .wgout{opacity:.5;pointer-events:none;filter:grayscale(.3)}
@media(max-width:480px){
  .rcell{min-height:56px}
  .rcell b{font-size:1.3rem}
}

/* ---- roulette wheel reveal: polish + 3s winner hold ---- */
.rwheelov{overflow:hidden}
.rwheelov::after{content:"";position:absolute;width:min(340px,84vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(246,197,23,.16),transparent 66%);filter:blur(8px);z-index:0;pointer-events:none}
.rwheelov .rwheel{z-index:1}
.rwheelov.show .rwheel{animation:rwpop .42s cubic-bezier(.2,.85,.25,1) both}
@keyframes rwpop{from{transform:scale(.82);opacity:.3}to{transform:scale(1);opacity:1}}
.rwheelov.landed .rw-svg{animation:rwglow 1.15s ease-in-out infinite alternate}
@keyframes rwglow{
  from{filter:drop-shadow(0 0 24px rgba(246,197,23,.4)) drop-shadow(0 20px 44px rgba(0,0,0,.6))}
  to{filter:drop-shadow(0 0 46px rgba(246,197,23,.9)) drop-shadow(0 20px 44px rgba(0,0,0,.6))}}
.rwheelov.landed .rw-mark{filter:drop-shadow(0 0 8px rgba(246,197,23,.9))}
.rwresult{display:none;align-items:center;justify-content:center;gap:.85rem;margin-top:1rem;position:relative;z-index:1}
.rwresult.show{display:flex;animation:rwpop .5s cubic-bezier(.2,.85,.25,1) both}
.rwresult__ball{width:62px;height:62px;font-size:1.7rem;
  box-shadow:0 0 0 3px rgba(246,197,23,.75),0 0 26px rgba(246,197,23,.4),0 8px 22px rgba(0,0,0,.5)}
.rwresult__meta{text-align:left}
.rwresult__lbl{display:block;font-size:.66rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.rwresult__meta b{font-family:'Rowdies';color:var(--gold);font-size:1rem}
@media(prefers-reduced-motion:reduce){
  .rwheelov.show .rwheel,.rwheelov.landed .rw-svg,.rwresult.show{animation:none}
}

/* ---- Roulette: compact "Clear bets" pill ---- */
.rlclear{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .95rem;border-radius:999px;
  font-family:'Poppins';font-size:.82rem;font-weight:600;letter-spacing:.2px;cursor:pointer;
  color:var(--gold-2,#e0b32a);background:rgba(246,197,23,.06);
  border:1px solid rgba(246,197,23,.34);transition:.18s var(--ease,ease)}
.rlclear .ico{width:15px;height:15px}
.rlclear:hover{color:#2a1e02;background:linear-gradient(180deg,#f6c517,#d9a616);
  border-color:var(--gold,#f6c517);box-shadow:0 4px 14px rgba(246,197,23,.28);transform:translateY(-1px)}
.rlclear:active{transform:translateY(0)}
.wgboard.locked .rlclear{opacity:.5;pointer-events:none}

/* ============ member dashboard ============
   The landing page a member sees, built out of the same figures the pages that
   own them show: wallet totals, income per stream, VIP standing, the team. */
.stat__sub{font-family:'Space Grotesk';font-size:.68rem;color:var(--muted-2);margin-top:.15rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-hero__tag{display:inline-block;margin-left:.5rem;vertical-align:middle;padding:.22rem .7rem;border-radius:999px;
  font-size:.5em;font-weight:700;letter-spacing:.5px;color:var(--gold);
  background:linear-gradient(180deg,rgba(246,197,23,.24),rgba(246,197,23,.08));border:1px solid rgba(246,197,23,.55)}
.dash-acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem;position:relative;z-index:2}
.dash-acts--tight{margin-top:1rem}

/* A line that needs acting on: a VIP reward to claim, a withdrawal on its way. */
.dash-call{display:flex;align-items:center;gap:.9rem;margin-bottom:1.1rem;padding:.9rem 1.2rem;border-radius:14px;
  color:var(--ink);font-size:.92rem;border:1px solid rgba(246,197,23,.45);
  background:linear-gradient(100deg,rgba(246,197,23,.16),rgba(246,197,23,.04));transition:transform .2s var(--ease),box-shadow .2s}
.dash-call:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.dash-call--wait{border-color:rgba(58,160,255,.4);background:linear-gradient(100deg,rgba(58,160,255,.14),rgba(58,160,255,.03))}
.dash-call__ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:rgba(255,255,255,.07);border:1px solid var(--line)}
.dash-call__ic .ico{width:17px;height:17px}
.dash-call__go{margin-left:auto;flex:none;opacity:.7}
.dash-call__go .ico{width:18px;height:18px}

/* Label on the left, figure on the right; a row is a link when it has a page. */
.dkv{display:flex;flex-direction:column}
.dkv__row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.6rem 0;
  border-bottom:1px solid var(--line-soft);color:var(--txt);font-size:.88rem}
.dkv__row:last-child{border-bottom:0}
a.dkv__row{transition:color .18s,padding-left .18s}
a.dkv__row:hover{color:var(--ink);padding-left:.25rem}
a.dkv__row:hover b{color:var(--gold)}
.dkv__row b{font-family:'Space Grotesk';font-size:1rem;color:var(--ink);white-space:nowrap}
.dkv__row--sum{margin-top:.3rem;border-top:1px solid var(--line);border-bottom:0;padding-top:.8rem}
.dkv__row--sum b{font-size:1.15rem}

/* How far to the next VIP tier. */
.dvip{margin-top:1.2rem}
.dvip__top{display:flex;justify-content:space-between;gap:.8rem;font-size:.72rem;letter-spacing:.6px;
  text-transform:uppercase;color:var(--muted);font-family:'Space Grotesk'}
.dvip .field__hint{margin-top:.5rem}

/* Today's three figures, side by side. */
.dtri{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:.9rem}
.dtri > div{padding:.8rem .9rem;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line-soft)}
.dtri b{display:block;font-family:'Rowdies';font-size:1.25rem;line-height:1.1;color:var(--ink)}
.dtri span{display:block;margin-top:.25rem;font-size:.66rem;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.dloss{color:#ff9b9b}
@media(max-width:560px){ .dtri{grid-template-columns:1fr} }