/* Mars Arcade - mobile first. All colours come from CSS variables set by the active theme. */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Exo 2",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);
  min-height:100vh;padding-bottom:78px;line-height:1.4;
  background-image:radial-gradient(900px 500px at 85% -10%,rgba(var(--accent-rgb),.10),transparent 60%)}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
img{max-width:100%}

.wrap{max-width:1180px;margin:0 auto;padding:0 14px}

/* ================= top bar ================= */
.top{position:sticky;top:0;z-index:30;background:linear-gradient(var(--bg2),var(--bg));border-bottom:1px solid var(--border)}
.top .wrap{display:flex;align-items:center;gap:10px;height:60px}
.brand{display:flex;align-items:center;gap:8px;font-weight:900;letter-spacing:.4px;font-size:1.2rem}
.brand .planet{width:30px;height:30px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%,#ffd08a,#ff7a1a 45%,#8a2a0c 100%);box-shadow:0 0 14px var(--glow)}
.brand span{background:linear-gradient(var(--accent2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 18px var(--glow);-webkit-text-stroke:.4px rgba(0,0,0,.35)}
.top .wrap.mh{height:0;display:block;position:relative}
.nav{display:none;gap:2px;margin-left:10px}
.nav a{padding:8px 11px;border-radius:10px;color:var(--text);font-weight:600;font-size:.88rem;display:flex;gap:6px;align-items:center;opacity:.9}
.nav a:hover{background:var(--card)}
.nav a.on{border:1px solid var(--accent);background:rgba(var(--accent-rgb),.12);box-shadow:0 0 14px var(--glow);opacity:1}
.spacer{flex:1}
.themeSwitch{display:none;border:1px solid var(--border);border-radius:12px;padding:3px;gap:3px;background:var(--bg)}
.themeSwitch button{border:0;background:transparent;padding:6px 12px;border-radius:9px;display:flex;align-items:center;gap:6px;font-weight:700;font-size:.85rem;cursor:pointer}
.themeSwitch button.on{border:1px solid var(--accent);background:rgba(var(--accent-rgb),.14);box-shadow:0 0 10px var(--glow)}
.themeSwitch i{width:14px;height:14px;border-radius:50%;display:inline-block}
.themeSwitch .m{background:radial-gradient(circle at 35% 30%,#ffd08a,#ff7a1a 55%,#8a2a0c)}
.themeSwitch .p{background:linear-gradient(135deg,#ff8bd0,#c13fff);border-radius:4px}
.avatar{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:900;color:#1a0d05;
  background:linear-gradient(var(--accent2),var(--accent));border:2px solid var(--accent)}
.who{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem}
.who span{display:none}
.helpbtn{display:none;align-items:center;gap:6px;border:1px solid var(--accent);border-radius:10px;padding:7px 12px;font-weight:700;font-size:.85rem;
  background:rgba(var(--accent-rgb),.1)}
.chip{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--card);border:1px solid var(--border);font-weight:700;font-size:.9rem;cursor:pointer}
.chip b{color:var(--accent2)}
.burger{display:grid;place-items:center;width:38px;height:38px;border:0;background:transparent;cursor:pointer}
.menu{display:none;position:absolute;right:14px;top:58px;min-width:210px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:8px;box-shadow:0 20px 40px #000a}
.menu.open{display:block}
.menu a,.menu button{display:flex;gap:10px;align-items:center;width:100%;padding:11px 12px;border-radius:10px;border:0;background:transparent;font-weight:600;cursor:pointer;text-align:left}
.menu a:hover,.menu button:hover{background:var(--card)}

/* ================= hero ================= */
.hero{position:relative;overflow:hidden;min-height:200px;border-bottom:1px solid var(--border);
  background:#2a0f08 url('../img/hero-banner.jpg') right center/cover no-repeat}
.hero:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,4,3,.92) 0%,rgba(10,4,3,.55) 38%,rgba(10,4,3,0) 66%),linear-gradient(0deg,var(--bg) 0%,transparent 28%)}
.hero .wrap{position:relative;z-index:2}
.hero .txt{padding:22px 0 34px;max-width:64%}
.crumb{font-size:.88rem;color:var(--muted);margin-bottom:10px;display:flex;gap:8px;align-items:center}
.crumb a{color:var(--accent2);font-weight:600}
.hero h1{font-size:2rem;line-height:1.05;font-weight:900;text-shadow:0 2px 14px #000}
.hero h1 em{font-style:normal;color:var(--accent2)}
.hero p{color:#f4e3d8;margin-top:8px;font-size:.98rem;text-shadow:0 1px 8px #000;max-width:520px}

/* ================= cards / buttons ================= */
.grid{display:grid;gap:12px;margin:14px 0}
.card{background:linear-gradient(160deg,var(--card),var(--bg2));border:1px solid var(--border);border-radius:16px;padding:16px;
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset,0 8px 28px rgba(0,0,0,.35)}
.card.glow{border-color:rgba(var(--accent-rgb),.45);box-shadow:0 0 22px var(--glow)}
.card h2,.card h3{font-size:1.05rem;margin-bottom:8px;display:flex;align-items:center;gap:9px}
.card h2 svg,.card h3 svg{color:var(--accent)}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.big{font-size:2rem;font-weight:900;line-height:1.1}
.big small{font-size:.9rem;color:var(--muted);font-weight:600}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;cursor:pointer;
  padding:13px 16px;border-radius:12px;font-weight:800;font-size:1rem;color:var(--accent-text);
  background:linear-gradient(var(--accent2),var(--accent));box-shadow:0 6px 22px var(--glow)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:rgba(var(--accent-rgb),.06);color:var(--text);border:1px solid var(--accent);box-shadow:none}
.btn.sm{padding:9px 14px;font-size:.9rem;width:auto}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:10px;align-items:center}
.row.between{justify-content:space-between}
.row.wrapx{flex-wrap:wrap}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:800;background:var(--bg);border:1px solid var(--border)}
.pill.ok{color:var(--success)} .pill.warn{color:var(--accent2)} .pill.bad{color:var(--danger)}
.ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(var(--accent-rgb),.12);border:1px solid var(--border);color:var(--accent)}
.link{color:var(--accent2);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ================= forms ================= */
label{display:block;font-weight:700;font-size:.9rem;margin:12px 0 6px}
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],select{width:100%;padding:13px;border-radius:12px;
  background:var(--bg);border:1px solid var(--border);font-size:1rem}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}
.err{color:var(--danger);font-size:.88rem;margin-top:6px}
.ok-msg{color:var(--success);margin-bottom:10px;font-weight:600}
.links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:14px;font-size:.9rem}
.links a{color:var(--accent2);font-weight:600}
.toggle{width:46px;height:26px;border-radius:99px;background:var(--bg);border:1px solid var(--border);position:relative;cursor:pointer;flex:none}
.toggle:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--muted);transition:.2s}
.toggle.on{background:linear-gradient(var(--accent2),var(--accent))}
.toggle.on:after{left:22px;background:#fff}

/* ================= tabs (wallet / profile) ================= */
.subnav{display:flex;gap:6px;overflow-x:auto;padding:12px 0;border-bottom:1px solid var(--border);scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav a{padding:9px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg2);font-weight:700;font-size:.9rem;white-space:nowrap;display:flex;gap:7px;align-items:center}
.subnav a.on{border-color:var(--accent);background:rgba(var(--accent-rgb),.16);box-shadow:0 0 12px var(--glow)}
.pagetitle{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pagetitle h2{font-size:1.7rem;font-weight:900}

/* ================= stepper / deposit ================= */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--bg);border:1px solid var(--border);padding:4px;border-radius:14px}
.seg a,.seg button{display:flex;gap:8px;justify-content:center;align-items:center;padding:12px;border-radius:11px;border:0;background:transparent;font-weight:800;cursor:pointer}
.seg .on{background:linear-gradient(var(--accent2),var(--accent));color:var(--accent-text)}
.stepper{display:flex;align-items:center;gap:8px;margin:14px 0;font-size:.88rem;font-weight:700}
.stepper .n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border);color:var(--muted);flex:none}
.stepper .on .n{background:linear-gradient(var(--accent2),var(--accent));color:var(--accent-text);border:0}
.stepper .on{color:var(--accent2)}
.stepper .ln{flex:1;height:1px;background:var(--border)}
.field{display:flex;align-items:center;gap:12px;padding:12px 0}
.field>.ic{width:34px;height:34px;border-radius:10px}
.field>.lab{width:116px;font-weight:700;flex:none}
.field>.val{flex:1}
.presets{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.presets button{padding:12px 0;border-radius:11px;border:1px solid var(--border);background:var(--bg);font-weight:800;cursor:pointer}
.presets button.on{border-color:var(--accent);background:rgba(var(--accent-rgb),.16);box-shadow:0 0 12px var(--glow)}
.method{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--bg);margin-bottom:8px;cursor:pointer}
.method.on{border-color:var(--accent);background:rgba(var(--accent-rgb),.10);box-shadow:0 0 14px var(--glow)}
.method .logo{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-weight:900;color:#fff;flex:none}
.method .go{margin-left:auto;color:var(--muted)}
.logo.tl{background:#5b2bd6}.logo.bp{background:#1668ff}.logo.gc{background:#ff9d1c}
.timeline{margin:6px 0}
.timeline>div{display:flex;align-items:center;gap:12px;padding:9px 0}
.timeline .d{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);flex:none}
.timeline .on .d{border-color:var(--accent);background:radial-gradient(var(--accent) 45%,transparent 50%)}
.timeline .st{margin-left:auto}

/* ================= lists / tables / tiles ================= */
.list>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--border)}
.list>div:last-child{border:0}
.plus{color:var(--success);font-weight:800}.minus{color:var(--danger);font-weight:800}
table.t{width:100%;border-collapse:collapse;font-size:.9rem}
table.t th{color:var(--muted);text-align:left;font-weight:700;padding:10px 8px;border-bottom:1px solid var(--border)}
table.t td{padding:12px 8px;border-bottom:1px solid var(--border)}
.statrow{display:grid;gap:12px}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:12px 0}
.chips a,.chips button{padding:10px 18px;border-radius:12px;border:1px solid var(--border);background:var(--bg2);font-weight:700;white-space:nowrap;cursor:pointer}
.chips .on{background:linear-gradient(var(--accent2),var(--accent));color:var(--accent-text);border:0}

/* ================= game cards ================= */
.gcards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:14px 0}
.gcard{border:1px solid rgba(var(--accent-rgb),.45);border-radius:14px;overflow:hidden;background:linear-gradient(var(--card),var(--bg2));box-shadow:0 0 14px rgba(var(--accent-rgb),.12)}
.gcard .art{aspect-ratio:174/122;background-size:cover;background-position:center}
.gcard .bd{padding:10px}
.gcard h4{font-size:1rem}
.stars{color:var(--accent2);letter-spacing:2px;font-size:.8rem}
.price{display:flex;align-items:center;gap:6px;font-size:.82rem;margin:6px 0 8px}
.coin{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b0,#ffb02e 55%,#a3590a);display:inline-block}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tile{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;border:1px solid var(--border);background:var(--bg2)}
.thumb{width:100%;aspect-ratio:98/62;border-radius:10px;background-size:cover;background-position:center;border:1px solid var(--border)}
.bigtile{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--bg2)}
.bigtile .art{aspect-ratio:16/8;background-size:cover;background-position:center}
.bigtile .bd{padding:12px}

/* ================= vip ================= */
.rank{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px;border:1px solid var(--border);background:var(--bg2);margin-bottom:8px}
.rank.cur{border-color:var(--accent);box-shadow:0 0 16px var(--glow)}
.rank.lock{opacity:.6}
.badge{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:900;color:#111;flex:none}
.bar{height:10px;border-radius:99px;background:var(--bg);border:1px solid var(--border);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))}

/* ================= rewards ================= */
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{border:1px solid var(--border);border-radius:10px;background:var(--bg);padding:8px 2px;text-align:center;font-size:.72rem;font-weight:700}
.day .o{width:28px;height:28px;border-radius:50%;margin:6px auto;display:grid;place-items:center;border:2px solid var(--border)}
.day.done .o{background:linear-gradient(var(--accent2),var(--accent));border:0;color:var(--accent-text)}
.day.today{border-color:var(--accent);box-shadow:0 0 14px var(--glow)}

/* ================= bottom tab bar (mobile) ================= */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;background:var(--bg2);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom)}
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;font-size:.72rem;font-weight:700;color:var(--muted)}
.tabs a.on{color:var(--accent)}
.tabs a.on svg{filter:drop-shadow(0 0 6px var(--glow))}

/* ================= guest (login / register) ================= */
.guest{min-height:100vh;display:flex;flex-direction:column}
.guest .hero{min-height:230px}
.guest main{flex:1;padding:0 14px 30px;margin-top:18px;position:relative;z-index:3}
.guest .card{max-width:460px;margin:0 auto}
body.is-guest{padding-bottom:0}

/* ================= landing ================= */
.sec{font-size:1.35rem;font-weight:900;margin:26px 0 4px}
.big-hero{min-height:320px}
.big-hero .txt{max-width:100%;padding:34px 0 40px}
.big-hero h1{font-size:2.1rem}
.step{position:relative;padding-top:22px}
.step .num{position:absolute;top:-14px;left:16px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:var(--accent-text);background:linear-gradient(var(--accent2),var(--accent))}
.ranks{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.rk{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px;border-radius:12px;background:var(--bg);border:1px solid var(--border);text-align:center}
.rk .badge{width:38px;height:38px}
.faq details{padding:12px 0;border-bottom:1px solid var(--border)}
.faq details:last-child{border:0}
.faq summary{cursor:pointer;font-weight:800}
.faq p{margin-top:8px}
.foot{border-top:1px solid var(--border);padding:22px 0 30px;margin-top:10px;text-align:center}

/* ================= desktop ================= */
@media(min-width:900px){
  body{padding-bottom:0}
  .nav,.themeSwitch,.helpbtn{display:flex}
  .who span{display:inline}
  .burger,.tabs{display:none}
  .hero{min-height:270px}
  .hero h1{font-size:3rem}
  .hero .txt{padding:46px 0 52px;max-width:52%}
  .grid.c2{grid-template-columns:1fr 1fr}
  .grid.c3{grid-template-columns:repeat(3,1fr)}
  .grid.c4{grid-template-columns:repeat(4,1fr)}
  .grid.c21{grid-template-columns:1.4fr 1fr}
  .gcards{grid-template-columns:repeat(6,1fr)}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .big-hero{min-height:440px}
  .big-hero .txt{max-width:52%;padding:80px 0}
  .big-hero h1{font-size:3.4rem}
  .ranks{grid-template-columns:repeat(5,1fr)}
  .guest .hero{min-height:260px}
}

/* ---- platform logos (from GIZMOS) ---- */
.plogo{width:100%;aspect-ratio:4/3;border-radius:12px;border:1px solid var(--border);background:#0d0605 center/contain no-repeat;
  display:grid;place-items:center;text-align:center;overflow:hidden}
.plogo span{padding:8px;font-weight:900;font-size:1rem;line-height:1.1;color:var(--accent2);
  background:linear-gradient(135deg,#7a2a12,#2a0f08);width:100%;height:100%;display:grid;place-items:center}
.plogo.sm{width:90px}
.method .logo{background:#fff;padding:4px;overflow:hidden}
.method .logo img{width:100%;height:100%;object-fit:contain;display:block}

/* ---- inbox / chat ---- */
.dot{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--danger);color:#fff;
  font-size:.7rem;font-weight:800;display:grid;place-items:center}
.fab{position:fixed;right:14px;bottom:86px;z-index:35;display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:999px;font-weight:800;
  color:var(--accent-text);background:linear-gradient(var(--accent2),var(--accent));box-shadow:0 8px 26px var(--glow)}
.fab .dot{top:-4px;right:-2px}
.msg{display:block;padding:14px;border-radius:14px;border:1px solid var(--border);background:var(--bg2);margin-bottom:8px}
.msg.unread{border-color:var(--accent);background:rgba(var(--accent-rgb),.08);box-shadow:0 0 12px var(--glow)}
.msg .tag{font-size:.72rem;font-weight:800;color:var(--accent2);text-transform:uppercase;letter-spacing:.5px}
.msgbody{white-space:pre-wrap;word-break:break-word;line-height:1.55}
.chatbox{height:min(62vh,520px);overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--bg);border:1px solid var(--border);border-radius:14px}
.bub{max-width:82%;padding:9px 13px;border-radius:14px;font-size:.95rem;word-break:break-word;white-space:pre-wrap}
.bub small{display:block;opacity:.65;font-size:.7rem;margin-top:3px}
.bub.player{align-self:flex-end;background:linear-gradient(var(--accent2),var(--accent));color:var(--accent-text);border-bottom-right-radius:4px}
.bub.staff,.bub.bot{align-self:flex-start;background:var(--card);border:1px solid var(--border);border-bottom-left-radius:4px}
.bub.bot{border-style:dashed}
@media(min-width:900px){.fab{bottom:24px}}

/* header: never wrap, and tighten up on mid-size screens */
.brand,.nav a,.chip,.helpbtn,.themeSwitch button{white-space:nowrap}
@media(min-width:900px) and (max-width:1150px){
  .nav a{padding:8px 8px;font-size:.82rem}
  .nav a svg{display:none}
  .helpbtn{padding:7px 9px}
  .themeSwitch button{padding:6px 8px}
  .who span{display:none}
}

/* =====================================================================
   MARS ATMOSPHERE: real scenery behind every page, glass cards, motion
   ===================================================================== */
body{background:#080408;background-image:none}
body::before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:url('../img/bg-mars.jpg') 72% 30%/cover no-repeat}
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(rgba(8,4,6,.18),rgba(8,4,6,.50) 55%,rgba(8,4,6,.28))}

.top{background:linear-gradient(rgba(22,10,8,.94),rgba(22,10,8,.80));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hero:after{background:linear-gradient(90deg,rgba(10,4,3,.90) 0%,rgba(10,4,3,.50) 38%,rgba(10,4,3,0) 66%),linear-gradient(0deg,rgba(8,4,6,.60) 0%,transparent 32%)}
.hero{animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{background-position:100% 50%}to{background-position:88% 50%}}

/* glass */
.card{background:linear-gradient(160deg,rgba(46,20,13,.80),rgba(22,10,8,.74));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-color:rgba(var(--accent-rgb),.28);box-shadow:0 10px 34px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,200,150,.10)}
.tile,.msg,.rank,.method,.gcard,.bigtile,.faq,.day,.stat{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tile,.rank,.method,.bigtile,.day{background:rgba(26,12,9,.66)}
.subnav a,.chips a,.chips button{background:rgba(26,12,9,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.chatbox{background:rgba(10,5,4,.62)}

/* life */
.card.glow{animation:glowpulse 4.5s ease-in-out infinite}
@keyframes glowpulse{0%,100%{box-shadow:0 10px 34px rgba(0,0,0,.45),0 0 14px var(--glow)}50%{box-shadow:0 10px 34px rgba(0,0,0,.45),0 0 30px var(--glow)}}
a.card,.tile,a.tile,.gcard,.bigtile,.msg{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
a.card:hover,.tile:hover,.gcard:hover,.bigtile:hover,.msg:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 22px var(--glow)}

.btn{position:relative;overflow:hidden}
.btn:not(.ghost)::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:shine 5s ease-in-out infinite}
@keyframes shine{0%,60%{left:-130%}100%{left:230%}}

.hero h1{font-size:2.3rem;letter-spacing:-.5px;text-shadow:0 2px 18px rgba(0,0,0,.9),0 0 34px rgba(var(--accent-rgb),.35)}
.hero h1 em{background:linear-gradient(var(--accent2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px var(--glow))}
.sec{font-size:1.5rem;margin:34px 0 10px;display:flex;align-items:center;gap:12px}
.sec:after{content:"";flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),transparent)}
.big{text-shadow:0 0 22px var(--glow)}

/* ===== landing ===== */
.land{min-height:calc(100vh - 60px);display:flex;align-items:center;background-size:cover}
.land .txt{max-width:100%;padding:44px 0 64px}
.land .tag{display:inline-block;margin-bottom:12px;padding:6px 14px;border-radius:999px;font-weight:800;font-size:.8rem;letter-spacing:1px;
  text-transform:uppercase;color:var(--accent2);border:1px solid var(--accent);background:rgba(var(--accent-rgb),.12);box-shadow:0 0 18px var(--glow)}
.land h1{font-size:2.7rem;line-height:1.02}
.land .lead{font-size:1.1rem;max-width:520px;margin-top:12px}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;max-width:480px}
.cta .btn{font-size:1.1rem;padding:16px 22px}
.trust{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;color:#f1ddd0;font-weight:700;font-size:.9rem}
.trust span{display:flex;gap:6px;align-items:center}
.trust svg{color:var(--accent2)}

.statbar{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0 6px;position:relative;z-index:4}
.stat{padding:16px;border-radius:16px;text-align:center;border:1px solid rgba(var(--accent-rgb),.35);background:rgba(26,12,9,.82);box-shadow:0 0 22px rgba(var(--accent-rgb),.18)}
.stat b{display:block;font-size:1.7rem;font-weight:900;background:linear-gradient(var(--accent2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--muted);font-size:.85rem;font-weight:600}

.promos{display:grid;gap:12px}
.promo{position:relative;padding:20px;border-radius:18px;overflow:hidden;border:1px solid rgba(var(--accent-rgb),.55);
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.30),rgba(120,30,10,.55) 55%,rgba(26,10,8,.80));box-shadow:0 0 30px var(--glow)}
.promo:before{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,200,120,.55),transparent 65%)}
.promo .big{font-size:2.4rem;color:#fff}
.promo .pill{background:rgba(0,0,0,.4);color:var(--accent2);border-color:var(--accent)}
.ends{font-size:.85rem;color:#ffd9b8;margin-top:6px;font-weight:700}

.marquee{overflow:hidden;border-radius:16px;border:1px solid var(--border);background:rgba(18,8,6,.66);padding:14px 0;
  -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:14px;width:max-content;animation:scrollx 55s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee img{height:78px;width:auto;border-radius:12px;border:1px solid var(--border);background:#0d0605}
@keyframes scrollx{to{transform:translateX(-50%)}}

@media(min-width:900px){
  .hero h1{font-size:3.2rem}
  .land h1{font-size:4.6rem}
  .land .txt{max-width:56%;padding:90px 0 110px}
  .statbar{grid-template-columns:repeat(4,1fr);margin-top:-48px}
  .promos{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
}
@media (prefers-reduced-motion:reduce){.hero,.card.glow,.btn::after,.marquee .track{animation:none!important}}

/* ---- mobile bottom bar: Home | Play | DEPOSIT | Redeem | Profile ---- */
.tabs{background:rgba(20,9,7,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.tabs a .ti{display:grid;place-items:center}
.tabs a.cta{position:relative;color:var(--text)}
.tabs a.cta .ti{width:54px;height:54px;border-radius:50%;margin-top:-26px;color:var(--accent-text);
  background:linear-gradient(var(--accent2),var(--accent));border:3px solid var(--bg2);box-shadow:0 6px 22px var(--glow);animation:glowpulse 3.5s ease-in-out infinite}
.tabs a.cta .ti svg{width:26px;height:26px}
.tabs a.cta.on{color:var(--accent2)}

/* ---- visitors: sticky Log in / Sign up bar (phones) ---- */
.guestbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(20,9,7,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--border)}
.guestbar .btn{padding:14px 10px;font-size:1rem}
.guestbar .btn.ghost{flex:1}
.guestbar .btn:not(.ghost){flex:1.4}
body.is-guest{padding-bottom:80px}
@media(min-width:900px){.guestbar{display:none}body.is-guest{padding-bottom:0}}

/* ---- FOUR big buttons, always visible: Games · Deposit · Redeem · Profile ---- */
.tabs a{font-size:.8rem;gap:4px;padding:10px 0 9px}
.tabs a .ti{width:44px;height:44px;border-radius:14px;color:var(--text)}
.tabs a svg,.tabs a .ti svg{width:24px;height:24px}
.tabs a.dep .ti{background:linear-gradient(var(--accent2),var(--accent));color:var(--accent-text);box-shadow:0 4px 16px var(--glow)}
.tabs a.red .ti{border:2px solid var(--accent);color:var(--accent2);background:rgba(var(--accent-rgb),.10)}
.tabs a.dep,.tabs a.red{color:var(--text);font-weight:800}
.tabs a.on:not(.dep):not(.red) .ti{background:rgba(var(--accent-rgb),.18);color:var(--accent)}
.tabs a.on{color:var(--accent2)}
.tabs a.cta .ti{margin-top:0;border:0;animation:none}   /* old raised-circle style no longer used */
.topdep{padding:8px 14px;font-size:.9rem;white-space:nowrap}
.topdep svg{width:18px;height:18px}
@media(max-width:380px){.topdep{padding:8px 10px}.brand span{font-size:1rem}}

/* landing hero: full width text, characters sit at the bottom right instead of behind the headline */
.land .wrap{width:100%}
.land{animation:none;background-size:auto 52%;background-position:100% 100%;background-repeat:no-repeat;background-color:transparent}
.land:after{background:linear-gradient(90deg,rgba(8,4,6,.82) 0%,rgba(8,4,6,.35) 60%,rgba(8,4,6,0) 100%),linear-gradient(0deg,rgba(8,4,6,.5) 0%,transparent 30%)}
.land h1{font-size:2.4rem}
@media(min-width:900px){
  .land{background-size:auto 92%;background-position:100% 50%}
  .land h1{font-size:4.6rem}
}

/* flash messages sit above the page with room to spare (cards that overlap the banner no longer cover them) */
.flash{margin:14px 0 40px;position:relative;z-index:5}
.flash.ok-msg{margin-bottom:40px}

/* header: nothing may squeeze (the Deposit button must always read "Deposit") */
.top .wrap>*{flex:none}
.top .wrap>.nav{flex:0 1 auto;min-width:0}
.top .wrap>.spacer{flex:1 1 0;min-width:4px}
.topdep{white-space:nowrap}
@media(min-width:900px) and (max-width:1280px){
  .nav a svg{display:none}
  .nav a{padding:8px 9px}
  .who span{display:none}
  .themeSwitch button{padding:6px 9px}
}
@media(min-width:900px) and (max-width:1060px){
  .helpbtn{display:none}
  .brand span{font-size:1rem}
}

/* banner art is never covered by cards */
.statbar{margin-top:18px!important}
.flash{margin-top:14px}

/* brighter gold for the highlighted word in banner headlines */
.hero h1 em{background:linear-gradient(#ffe29a,#ffb02e 60%,#ff8a1f);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.8)) drop-shadow(0 0 14px var(--glow))}

/* ===== themes: each one has its own scenery and banner ===== */
.brand .planet{background:radial-gradient(circle at 35% 30%,var(--accent2),var(--accent) 48%,var(--bg) 125%)}
.theme-pink::before{background-image:url('../img/bg-pink.jpg')}
.theme-pink .hero{background-image:url('../img/hero-banner-pink.jpg');background-color:#2a0f3a}
.theme-pink .land{background-image:url('../img/hero-banner-pink.jpg')}
.theme-pink .hero:after{background:linear-gradient(90deg,rgba(16,5,26,.90) 0%,rgba(16,5,26,.50) 38%,rgba(16,5,26,0) 66%),linear-gradient(0deg,rgba(12,4,18,.60) 0%,transparent 32%)}
.theme-pink .land:after{background:linear-gradient(90deg,rgba(16,5,26,.82) 0%,rgba(16,5,26,.35) 60%,rgba(16,5,26,0) 100%),linear-gradient(0deg,rgba(12,4,18,.5) 0%,transparent 30%)}
.theme-pink::after{background:linear-gradient(rgba(12,4,18,.18),rgba(12,4,18,.50) 55%,rgba(12,4,18,.28))}
.theme-pink .promo{background:linear-gradient(135deg,rgba(var(--accent-rgb),.30),rgba(110,20,90,.55) 55%,rgba(20,8,26,.80))}
.theme-pink .card{background:linear-gradient(160deg,rgba(44,16,52,.80),rgba(22,9,28,.74))}
.theme-pink .top,.theme-pink .tabs,.theme-pink .guestbar{background:linear-gradient(rgba(22,9,30,.94),rgba(22,9,30,.80))}

/* highlighted headline word: no dark shadow bleeding through the gradient letters, and it follows the theme colour */
.hero h1 em{text-shadow:none;
  background:linear-gradient(color-mix(in srgb,var(--accent2) 55%,#fff),var(--accent2) 62%,var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.75)) drop-shadow(0 0 12px var(--glow))}

/* one menu button per screen size: hamburger on phones, name + arrow on desktop */
@media(max-width:899px){
  .who{display:none!important}
  .menu{left:14px;right:auto}
}

/* narrow phones: everything in the top bar fits; long menus scroll */
.menu{max-height:calc(100vh - 84px);overflow-y:auto}
@media(max-width:430px){
  .top .wrap{gap:6px;padding:0 10px}
  .brand{gap:6px}
  .brand span{font-size:.98rem}
  .brand .planet{width:24px;height:24px}
  .topdep{padding:7px 11px;font-size:.85rem}
  .topdep svg{display:none}
  .burger{width:34px}
}

/* units + the "What's what?" box */
abbr.unit{text-decoration:none;cursor:help;font-size:.55em;font-weight:900;letter-spacing:.5px;color:var(--accent-text);
  background:linear-gradient(var(--accent2),var(--accent));padding:2px 7px;border-radius:7px;vertical-align:middle;white-space:nowrap}
.big small abbr.unit,.big abbr.unit{font-size:.4em}
.legend{margin:14px 0;padding:0}
.legend summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:800;display:flex;gap:8px;align-items:center}
.legend summary::-webkit-details-marker{display:none}
.legend .list{padding:0 16px 10px}
.legend[open] summary{border-bottom:1px solid var(--border)}

/* ===== slide-out menu ===== */
.menu{display:none!important}   /* the old dropdown is gone */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:70;opacity:0;pointer-events:none;transition:opacity .2s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(86vw,340px);z-index:80;display:flex;flex-direction:column;
  background:linear-gradient(rgba(34,14,10,.98),rgba(16,7,6,.98));border-right:1px solid var(--border);
  transform:translateX(-104%);transition:transform .24s ease;box-shadow:0 0 40px rgba(0,0,0,.7)}
.drawer.open{transform:none}
.theme-pink .drawer{background:linear-gradient(rgba(36,12,44,.98),rgba(18,6,24,.98))}
.dhead{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--border)}
.dclose{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer;font-size:1rem}
.dbal{display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);font-weight:800;justify-content:space-between}
.dbal span{display:flex;gap:6px;align-items:center}
.dbal abbr.unit{font-size:.7rem}
.dbody{flex:1;overflow-y:auto;padding:6px 10px;overscroll-behavior:contain}
.dsec{margin:14px 8px 4px;font-size:.72rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent2)}
.dbody a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;font-weight:700}
.dbody a:hover,.dbody a.on{background:rgba(var(--accent-rgb),.14)}
.dbody a.on{box-shadow:inset 0 0 0 1px var(--accent)}
.dbody a svg{color:var(--accent)}
.dfoot{padding:12px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:rgba(0,0,0,.25)}
@media(min-width:900px){
  .drawer{left:auto;right:0;transform:translateX(104%);border-right:0;border-left:1px solid var(--border)}
  .drawer.open{transform:none}
}

/* staff: "Chats" button with a live count in the header */
.staffchip{border-color:var(--accent);background:rgba(var(--accent-rgb),.12)}
@media(max-width:560px){.hide-sm{display:none}}

/* menu: sized to the VISIBLE screen (phone browser bars), footer in one compact row so Sign out is always on screen */
.drawer{bottom:auto;height:100vh;height:100dvh}
.dfoot{display:flex;gap:10px;align-items:stretch}
.dfoot form{flex:1;margin:0}
.dfoot .seg{height:100%}
.dfoot .seg button{padding:10px 6px;font-size:.9rem}
.dfoot .btn{padding:12px 8px;font-size:.95rem;height:100%}

/* staff on phones: the Chats alert has priority over the Deposit shortcut */
@media(max-width:560px){
  .top.is-staff .topdep{display:none}
  .top.is-staff .brand span{font-size:.9rem}
}

/* ===== back office ===== */
.bars{display:flex;align-items:flex-end;gap:4px;height:120px;margin-top:12px}
.bar-col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;min-width:0}
.bar-col i{display:block;width:100%;border-radius:5px 5px 0 0;background:linear-gradient(var(--accent2),var(--accent));min-height:2px}
.bar-col span{font-size:.65rem;color:var(--muted)}
@media print{
  body{background:#fff!important;color:#000!important}
  body::before,body::after,.sky,.top,.tabs,.fab,.hero,.subnav,.no-print,.drawer,.scrim,#pushBanner{display:none!important}
  .card,.tile{background:#fff!important;color:#000!important;border:1px solid #bbb!important;box-shadow:none!important;backdrop-filter:none!important}
  .muted,.small{color:#444!important}.plus{color:#0a7a3a!important}.minus{color:#b00020!important}
  table.t th,table.t td{color:#000!important;border-color:#ccc!important}
}

/* ===== cashier / admin panels: their own pages, not part of the player site ===== */
body.office .top .wrap{height:auto;min-height:58px;flex-wrap:wrap;padding-top:4px;padding-bottom:4px}
.panelpill{padding:5px 12px;border-radius:999px;font-size:.72rem;font-weight:900;letter-spacing:1.2px;border:1px solid var(--accent);color:var(--accent2);background:rgba(var(--accent-rgb),.12)}
.panelpill.admin{border-color:#b388ff;color:#d7c0ff;background:rgba(150,100,255,.16)}
.ohead{padding:6px 0 4px}
.ohead h1{font-size:1.9rem;line-height:1.1;font-weight:900;margin-top:4px}
.ohead h1 em{font-style:normal;color:var(--accent2)}
.ohead p{color:var(--muted);margin-top:4px}
body.office{padding-bottom:30px}
body.office .subnav{border-bottom:0;padding:6px 0 10px}
.dpanel{background:rgba(var(--accent-rgb),.12);border:1px solid var(--accent);margin:4px 0}
@media(max-width:560px){body.office .top .wrap>*{flex:none}.ohead h1{font-size:1.5rem}}

/* requests inside the chat */
.reqbox{border:1px solid var(--border);border-radius:14px;padding:10px 12px;margin-top:8px;background:rgba(26,12,9,.55)}
.reqbox.open{border-color:var(--accent);box-shadow:0 0 14px rgba(var(--accent-rgb),.25)}
.reqbox summary{cursor:pointer;display:flex;justify-content:space-between;gap:8px;align-items:center;list-style:none;flex-wrap:wrap}
.reqbox summary::-webkit-details-marker{display:none}
.reqchip{display:block;margin-bottom:5px;padding:4px 9px;border-radius:9px;font-size:.78rem;font-weight:800;background:rgba(var(--accent-rgb),.2);border:1px solid var(--accent);color:var(--accent2)!important}

/* ===== chat console (conversations | chat) + one-line requests ===== */
.console{display:grid;grid-template-columns:1fr;gap:12px;margin-top:8px}
@media(min-width:1000px){.console{grid-template-columns:300px 1fr;align-items:start}}
.clist{border:1px solid var(--border);border-radius:16px;background:rgba(18,8,6,.7);overflow:hidden}
.clist>summary{cursor:pointer;padding:12px 14px;font-weight:800;list-style:none;display:flex;gap:8px;align-items:center;justify-content:space-between}
.clist>summary::-webkit-details-marker{display:none}
@media(min-width:1000px){.clist>summary{pointer-events:none}}
.csearch{padding:0 12px 8px}.csearch input{padding:10px 12px;border-radius:999px}
.ctabs{display:flex;gap:4px;padding:0 10px 8px}
.ctabs a{flex:1;text-align:center;padding:8px 4px;border-radius:10px;font-weight:700;font-size:.85rem;border-bottom:2px solid transparent;display:flex;gap:4px;justify-content:center;align-items:center}
.ctabs a.on{border-bottom-color:var(--accent);color:var(--accent2)}
.cusers{max-height:640px;overflow-y:auto;padding:0 8px 8px}
.cuser{display:flex;align-items:center;gap:10px;padding:9px;border-radius:12px;margin-bottom:4px;border:1px solid transparent;background:rgba(26,12,9,.55)}
.cuser.on{border-color:var(--accent);background:rgba(var(--accent-rgb),.14)}
.cuser:hover{background:rgba(var(--accent-rgb),.10)}
.cav{position:relative;width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:900;color:var(--accent-text);background:linear-gradient(var(--accent2),var(--accent))}
.cav.big{width:48px;height:48px;font-size:1.2rem}
.cav i{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:#666;border:2px solid var(--bg2)}
.cav i.on{background:#39d98a}
.cn{flex:1;min-width:0;display:flex;flex-direction:column}
.cn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn small{color:var(--muted);font-size:.74rem}
.cb{display:flex;gap:4px;align-items:center}
.cmain{border:1px solid var(--border);border-radius:16px;background:rgba(18,8,6,.7);padding:12px;min-width:0}
.chead{display:flex;gap:12px;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--border)}
.flagbar{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:rgba(255,160,40,.07)}
.flagbar.on{border-color:var(--danger);background:rgba(255,70,80,.10)}
.pinfo{margin:0 0 10px;border:1px solid var(--border);border-radius:12px;background:rgba(10,5,4,.45)}
.pinfo>summary{cursor:pointer;padding:9px 12px;list-style:none;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pinfo>summary::-webkit-details-marker{display:none}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 12px;padding:4px 12px 12px}
.pgrid span{display:block;font-size:.68rem;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.pgrid b{font-size:.9rem;word-break:break-word}
@media(min-width:700px){.pgrid{grid-template-columns:repeat(4,1fr)}}
.console .chatbox{height:min(46vh,420px)}

.pending{margin-top:10px;border:1px solid var(--accent);border-radius:12px;background:rgba(var(--accent-rgb),.08);padding:8px}
.phead{font-size:.75rem;font-weight:900;letter-spacing:1px;color:var(--accent2);padding:2px 4px 6px}
.rstrip{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;border-radius:12px;background:rgba(10,5,4,.55);border:1px solid var(--border);margin-bottom:6px}
.rstrip.flash2{animation:flashrow 1.6s ease}
@keyframes flashrow{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 3px var(--accent)}}
.rinfo{display:flex;gap:10px;align-items:center;min-width:0;flex:1 1 220px}
.rico{font-size:1.4rem}
.ramt{font-size:1.1rem;margin-left:auto;white-space:nowrap}
.rbtns{display:flex;gap:6px;align-items:flex-start}
.rb{display:inline-flex;align-items:center;justify-content:center;padding:9px 13px;border-radius:9px;border:1px solid;font-weight:900;font-size:.8rem;letter-spacing:.4px;cursor:pointer;background:transparent;list-style:none;white-space:nowrap}
.rb::-webkit-details-marker{display:none}
.rb.auto{color:#4fd8ff;border-color:#4fd8ff;background:rgba(79,216,255,.10)}
.rb.manual{color:#39d98a;border-color:#39d98a;background:rgba(57,217,138,.10)}
.rb.reject{color:#ff6a5c;border-color:#ff6a5c;background:rgba(255,106,92,.10)}
.rpop{position:relative}
/* an open Manual/Refund box must sit above the rows under it (each row is its own layer) */
div:has(.rpop[open]),section:has(.rpop[open]),article:has(.rpop[open]),li:has(.rpop[open]){position:relative;z-index:60}
.rpopbox{position:absolute;right:0;top:calc(100% + 6px);z-index:50;width:250px;padding:12px;border-radius:12px;background:var(--bg2);border:1px solid var(--accent);box-shadow:0 14px 34px rgba(0,0,0,.6)}
.rpopbox input,.rpopbox select{padding:9px 10px;font-size:.9rem}
@media(max-width:560px){.rpopbox{position:fixed;left:12px;right:12px;top:auto;bottom:14px;width:auto}}
.reqchip{display:block;margin-bottom:5px;padding:4px 9px;border-radius:9px;font-size:.78rem;font-weight:800;background:rgba(var(--accent-rgb),.2);border:1px solid var(--accent);color:var(--accent2)!important}

/* the "open details" button at the end of an activity row: a clear round chevron */
.rowgo{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--accent);background:rgba(var(--accent-rgb),.14);color:var(--accent)}
.rowgo svg{width:16px;height:16px}
tr:hover .rowgo,.rowgo:focus-visible{background:var(--accent);color:#1a0d00}

/* generated cover for social games without a painted image: their emoji on their own color */
.gcard .art.emojiart{display:grid;place-items:center}
.gcard .art.emojiart span{font-size:3.6rem;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}

/* sign-up: three quick reasons to join */
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:2px 0 14px}
.perks div{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 4px;border-radius:12px;background:rgba(var(--accent-rgb),.10);border:1px solid rgba(var(--accent-rgb),.35)}
.perks b{font-size:1.05rem;color:var(--accent2)}
.perks span{font-size:.72rem;color:var(--muted)}

/* sign-in / sign-up header: taller, characters not cropped, soft fade into the page instead of a hard edge */
.guest .hero{min-height:290px;border-bottom:0;background-position:right center}
.guest .hero:before{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;z-index:1;background:linear-gradient(0deg,var(--bg) 4%,transparent);pointer-events:none}
.guest .hero:after{background:linear-gradient(90deg,rgba(10,4,3,.92) 0%,rgba(10,4,3,.55) 40%,rgba(10,4,3,0) 68%)}
.guest .hero .txt{padding:34px 0 70px;max-width:58%}
.guest .hero h1{font-size:2.5rem}
.guest .hero p{font-size:1.02rem}
.guest main{margin-top:0}
@media(min-width:900px){.guest .hero{min-height:340px}.guest .hero h1{font-size:3.6rem}.guest .hero .txt{padding:56px 0 90px;max-width:48%}}

/* the banner dissolves into the starry page instead of ending on a line (the page background shows through) */
.guest .hero:before{display:none}
.guest .hero{-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%);margin-bottom:-24px}

/* sign-in / sign-up page background: starts in the exact rust color of the banner's bottom edge and settles into the dark
   night sky, so the banner flows into the page (the banner itself is untouched) */
body.is-guest::before{position:absolute;inset:0;height:100%;z-index:-3;
  background:linear-gradient(180deg,#a23a1a 0,#8a3016 140px,#4d1b0f 330px,#22100c 560px,#0c0508 100%)}
body.is-guest::after{background:radial-gradient(ellipse at 50% 38%,rgba(255,140,60,.10),transparent 60%)}

/* sign-in / sign-up scene: a big Mars, its two small moons and dunes, all behind the form */
.guest{position:relative;overflow:hidden}
.guest .hero,.guest main{position:relative;z-index:2}
.scene{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.s-planet{position:absolute;right:-170px;top:330px;width:560px;height:560px;border-radius:50%;
  background:
    radial-gradient(circle at 30% 32%,rgba(0,0,0,.26) 0 6%,transparent 7%),
    radial-gradient(circle at 58% 24%,rgba(0,0,0,.22) 0 4%,transparent 5%),
    radial-gradient(circle at 44% 62%,rgba(0,0,0,.24) 0 8%,transparent 9%),
    radial-gradient(circle at 70% 70%,rgba(0,0,0,.20) 0 5%,transparent 6%),
    radial-gradient(circle at 26% 74%,rgba(0,0,0,.18) 0 4%,transparent 5%),
    radial-gradient(circle at 32% 28%,#e0702f 0,#b8441a 38%,#6a220f 70%,#2a0d07 100%);
  box-shadow:0 0 90px rgba(255,120,50,.28),inset -60px -40px 120px rgba(0,0,0,.65);opacity:.85;animation:planetdrift 60s ease-in-out infinite alternate}
.s-ring{position:absolute;left:-120px;top:520px;width:260px;height:260px;border-radius:50%;border:1px solid rgba(255,160,90,.14);box-shadow:0 0 40px rgba(255,120,50,.08)}
.s-moon{position:absolute;border-radius:50%;background:radial-gradient(circle at 32% 30%,#c9b9a8,#7d6a5c 60%,#3a2c26);box-shadow:inset -6px -5px 10px rgba(0,0,0,.55),0 0 18px rgba(255,200,150,.18)}
.s-moon.m1{width:46px;height:46px;left:9%;top:300px;animation:moonbob 9s ease-in-out infinite alternate}
.s-moon.m2{width:24px;height:24px;left:19%;top:410px;animation:moonbob 12s ease-in-out infinite alternate-reverse}
.s-dunes{position:absolute;left:0;right:0;bottom:0;height:230px;background:url('../img/dunes.svg') center bottom/100% 100% no-repeat;opacity:.75}
@keyframes planetdrift{from{transform:translate(0,0) rotate(0)}to{transform:translate(-26px,-14px) rotate(4deg)}}
@keyframes moonbob{from{transform:translateY(0)}to{transform:translateY(-14px)}}
@media(max-width:700px){.s-planet{width:380px;height:380px;right:-150px;top:520px}.s-moon.m1{left:6%;top:560px}.s-moon.m2{left:16%;top:650px}.s-ring{display:none}.s-dunes{height:150px}}
@media(prefers-reduced-motion:reduce){.s-planet,.s-moon{animation:none}}
@media(max-width:700px){
  /* phones: words on top, the crew standing below them instead of behind the buttons */
  .hero.land{min-height:640px;align-items:flex-start;background-size:auto 50%;background-position:72% 100%}
  .hero.land:after{background:linear-gradient(180deg,rgba(10,4,3,.85) 0%,rgba(10,4,3,.55) 48%,rgba(10,4,3,0) 78%)}
  .hero.land .txt{padding:28px 0 0}
}

/* ---------- homepage (visitors): right-sized banner, Mars scene, games showcase ---------- */
.landing-wrap{position:relative;overflow:hidden}
.landing-wrap>.top,.landing-wrap>.land,.landing-wrap>main,.landing-wrap>.foot{position:relative;z-index:2}
.landing-wrap>.top{position:sticky;top:0;z-index:30}
.hero.land{min-height:440px;display:flex;align-items:center;border-bottom:0;margin-bottom:-26px;animation:none;
  background-size:auto 112%;background-position:84% 30%;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 66%,transparent 100%);mask-image:linear-gradient(180deg,#000 66%,transparent 100%)}
.hero.land:after{background:linear-gradient(90deg,rgba(10,4,3,.9) 0%,rgba(10,4,3,.62) 45%,rgba(10,4,3,.05) 80%)}
.hero.land .txt{max-width:100%;padding:36px 0 80px}
.hero.land h1{font-size:2.5rem}
.land .trust{margin-top:14px}
@media(min-width:900px){
  .hero.land{min-height:540px;background-size:auto 104%;background-position:right 28%}
  .hero.land .txt{max-width:50%;padding:70px 0 110px}
  .hero.land h1{font-size:4rem}
}
.showcase{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:rgba(var(--accent-rgb),.6) transparent}
.showcase .sc{flex:0 0 150px;scroll-snap-align:start;display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:14px;
  border:1px solid rgba(var(--accent-rgb),.4);background:linear-gradient(var(--card),var(--bg2));transition:transform .15s}
.showcase .sc:hover{transform:translateY(-3px)}
.showcase .sc .art{aspect-ratio:1/1;border-radius:10px;background-size:cover;background-position:center;display:grid;place-items:center;margin-bottom:6px}
.showcase .sc .art span{font-size:3rem;filter:drop-shadow(0 5px 8px rgba(0,0,0,.5))}
.showcase .sc.more .art{background:linear-gradient(135deg,rgba(var(--accent-rgb),.35),rgba(var(--accent-rgb),.08))}
.showcase .sc.more .art span{font-size:2rem;font-weight:900;color:var(--accent2)}
@media(min-width:900px){.showcase .sc{flex-basis:170px}}
@media(max-width:700px){
  /* phones: words on top, the crew standing below them instead of behind the buttons (must stay last) */
  .hero.land{min-height:640px;align-items:flex-start;background-size:auto 50%;background-position:72% 100%}
  .hero.land:after{background:linear-gradient(180deg,rgba(10,4,3,.85) 0%,rgba(10,4,3,.55) 48%,rgba(10,4,3,0) 78%)}
  .hero.land .txt{padding:28px 0 0}
}

/* the logo is Mars itself: rust surface, dark regions, Valles Marineris, polar caps, thin atmosphere (same in every theme) */
.brand .planet{background:url('../img/mars-logo.svg') center/cover no-repeat!important;box-shadow:0 0 14px rgba(255,125,60,.55),0 0 2px rgba(255,200,160,.6)}

/* ---------- logged-in home: same Mars as the visitor pages ---------- */
body.is-home{position:relative}
body.is-home main,body.is-home .wrap{position:relative}
body.is-home .scene{position:fixed;z-index:-1}
body.is-home .scene .s-planet{top:22vh}
body.is-home .hero{border-bottom:0;margin-bottom:-22px;
  -webkit-mask-image:linear-gradient(180deg,#000 68%,transparent 100%);mask-image:linear-gradient(180deg,#000 68%,transparent 100%)}
body.is-home .hero:after{background:linear-gradient(90deg,rgba(10,4,3,.9) 0%,rgba(10,4,3,.5) 40%,rgba(10,4,3,0) 70%)}
body.is-home .sec{margin:6px 0 8px}

/* ---------- every logged-in page: the sign-up background (rust sky into night, Mars, moons, dunes) ---------- */
body.is-app::before{position:absolute;inset:0;height:100%;z-index:-3;
  background:linear-gradient(180deg,#a23a1a 0,#8a3016 140px,#4d1b0f 330px,#22100c 560px,#0c0508 100%)}
body.is-app::after{background:radial-gradient(ellipse at 50% 38%,rgba(255,140,60,.10),transparent 60%)}
body.is-app .scene{position:fixed;inset:0;z-index:-2;pointer-events:none}
body.is-app .scene .s-planet{top:26vh;opacity:.55}
body.is-app .scene .s-moon{opacity:.8}
body.is-app .scene .s-dunes{opacity:.55}
body.is-app .hero{border-bottom:0;margin-bottom:-22px;
  -webkit-mask-image:linear-gradient(180deg,#000 68%,transparent 100%);mask-image:linear-gradient(180deg,#000 68%,transparent 100%)}
body.is-app .hero:after{background:linear-gradient(90deg,rgba(10,4,3,.9) 0%,rgba(10,4,3,.5) 40%,rgba(10,4,3,0) 70%)}

/* logged-in banners sized like the sign-up one: both characters in view, never zoomed into one */
body.is-app .hero{min-height:250px;background-size:auto 100%;background-position:right top;background-repeat:no-repeat;display:flex;align-items:center}
body.is-app .hero .txt{padding:26px 0 52px}
@media(min-width:900px){
  body.is-app .hero{min-height:290px;background-size:max(1500px,100vw) auto}
  body.is-app .hero .txt{padding:36px 0 64px}
}
body.is-app .hero .wrap{width:100%}

/* ONE fade for every banner on the site (visitor home, sign-in/up, and all logged-in pages): the picture dissolves into the page */
.hero.land,.guest .hero,body.is-app .hero{
  -webkit-mask-image:linear-gradient(180deg,#000 48%,rgba(0,0,0,.55) 74%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 48%,rgba(0,0,0,.55) 74%,transparent 100%)}
body.is-app .hero{margin-bottom:0}
body.is-app .hero .txt{padding-bottom:70px}

/* date / time pickers: dark like every other field (they were left white with dark text) */
input[type=date],input[type=datetime-local],input[type=time],input[type=month]{
  color-scheme:dark;padding:12px 13px;border-radius:12px;border:1px solid var(--border);background:var(--bg2);color:var(--text);font:inherit;min-height:46px}
input[type=date]::-webkit-datetime-edit,input[type=datetime-local]::-webkit-datetime-edit{color:var(--text)}
input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator{filter:invert(1) sepia(1) saturate(4) hue-rotate(345deg);cursor:pointer;opacity:.85}
input[type=date]::selection,input[type=datetime-local]::selection{background:var(--accent);color:var(--accent-text)}
input[type=date]:focus,input[type=datetime-local]:focus{outline:2px solid var(--accent);outline-offset:1px}
input[type=date]::-webkit-datetime-edit-fields-wrapper :focus{background:var(--accent);color:var(--accent-text);outline:none;border-radius:4px}

/* a calmer top bar: logo, four menu items, Deposit, inbox, you. Theme switch and Help live in the side menu. */
.top .wrap{gap:8px}
.nav a{padding:8px 10px}
@media(max-width:1250px){.nav a svg{display:none}}
@media(max-width:1100px){.who span:not(.avatar){display:none}.who{padding-right:8px!important}}
@media(max-width:980px){.staffchip .hide-sm{display:none}}
.top .wrap>.nav{flex:0 1 auto;min-width:0}
.topdep{margin-left:4px}

/* Add Funds: pick any game platform right on the page */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:430px;overflow-y:auto;padding:2px}
@media(min-width:600px){.pgrid{grid-template-columns:repeat(4,1fr)}}
.pcell{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 8px;border-radius:12px;border:1px solid var(--border);background:var(--bg);cursor:pointer;text-align:center}
.pcell img,.pcell .ini{width:100%;aspect-ratio:1/1;border-radius:10px;object-fit:cover;background:#0d0605;display:grid;place-items:center;font-weight:900;font-size:1.3rem;color:var(--accent2)}
.pcell b{font-size:.74rem;line-height:1.15;word-break:break-word}
.pcell.on{border-color:var(--accent);background:rgba(var(--accent-rgb),.14);box-shadow:0 0 14px var(--glow)}
.pcell .hot{position:absolute;top:4px;right:4px;background:var(--accent);color:var(--accent-text);font-size:.68rem;font-weight:900;padding:2px 6px;border-radius:999px}
.pcell .have{font-size:.66rem;color:var(--success)}
.promorow{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin;scrollbar-color:rgba(var(--accent-rgb),.6) transparent}
.promorow .pr{flex:0 0 230px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:12px;border-radius:14px;border:1px solid rgba(var(--accent-rgb),.5);background:linear-gradient(135deg,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.05));cursor:pointer}
.promorow .pr b{font-size:1rem}

/* page links under long lists */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:14px 0 6px}
.pager .pgs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.pager .pg{min-width:38px;padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg2);color:var(--text);font-weight:700;font-size:.9rem;text-align:center;cursor:pointer}
.pager a.pg:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.14)}
.pager .pg.on{background:linear-gradient(var(--accent2),var(--accent));color:var(--accent-text);border-color:transparent}
.pager .pg.dis{opacity:.4;cursor:default}

/* ---------- My character (avatar), shop and mascot care ---------- */
.av-stage{position:relative;display:grid;grid-template-columns:68px 1fr 68px;align-items:center;gap:6px;min-height:380px;padding:10px;border-radius:16px;background:#1a0a06 center/cover no-repeat;overflow:hidden;border:1px solid var(--border)}
.av-stage::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45));pointer-events:none}
.av-char{position:relative;z-index:1;width:100%;max-width:260px;height:auto;margin:22px auto 0;filter:drop-shadow(0 10px 14px rgba(0,0,0,.6));transition:filter .4s}
.av-char.mood-okay{filter:drop-shadow(0 10px 14px rgba(0,0,0,.6)) saturate(.8)}
.av-char.mood-sad{filter:drop-shadow(0 10px 14px rgba(0,0,0,.6)) grayscale(.55) brightness(.85)}
.av-col{position:relative;z-index:2;display:grid;gap:10px;align-content:center}
.av-slot{position:relative;width:64px;height:64px;border-radius:14px;background:rgba(10,4,3,.6);border:1.5px dashed var(--border);display:grid;place-items:center}
.av-slot.full{border-style:solid;border-color:var(--accent2);box-shadow:0 0 14px rgba(255,176,46,.3)}
.av-slot img{width:54px;height:54px;object-fit:contain}
.av-empty{font-size:.62rem;color:var(--muted);text-align:center;line-height:1.1}
.av-x{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;border:0;background:var(--danger);color:#fff;font-size:.6rem;line-height:1;cursor:pointer;padding:0}
.av-lvl{position:absolute;z-index:3;top:8px;left:50%;transform:translateX(-50%);display:flex;gap:6px;align-items:center;background:rgba(10,4,3,.75);border:1px solid var(--accent2);border-radius:999px;padding:4px 12px;font-size:.8rem;white-space:nowrap}
.av-lvl span{color:var(--accent2)}
.av-say{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:8px;width:calc(100% - 150px);max-width:300px;background:rgba(255,255,255,.93);color:#2a1208;border-radius:14px;padding:6px 10px;font-size:.76rem;line-height:1.25;text-align:center;font-weight:600}
.av-need{display:grid;grid-template-columns:92px 1fr 30px;gap:8px;align-items:center;margin:8px 0;font-size:.85rem}
.av-need .bar.low i{background:var(--danger)}
.av-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.av-acts .btn{width:100%;padding-left:6px;padding-right:6px}
.av-acts small{opacity:.75;font-weight:500}
.av-races{display:flex;gap:8px;flex-wrap:wrap}
.av-race{background:rgba(255,255,255,.04);border:1.5px solid var(--border);border-radius:12px;padding:6px;color:var(--text);cursor:pointer;text-align:center;font-size:.72rem}
.av-race img{display:block;width:62px;height:76px;object-fit:cover;border-radius:8px;margin-bottom:3px}
.av-race.on{border-color:var(--accent2);box-shadow:0 0 14px rgba(255,176,46,.35)}
.av-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.av-item{border:1.5px solid var(--border);border-radius:14px;background:rgba(255,255,255,.03);padding:8px;text-align:center;display:grid;gap:4px;justify-items:center;font-size:.74rem}
.av-item img{width:64px;height:64px;object-fit:contain}
.av-item.on{border-color:var(--accent2);background:rgba(255,176,46,.08)}
.av-shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.av-card{border:1.5px solid var(--border);border-radius:16px;background:var(--card);padding:10px;display:grid;gap:4px;align-content:start;text-align:center;justify-items:center}
.av-card .av-pic{width:100%;aspect-ratio:1;display:grid;place-items:center;border-radius:12px;background:rgba(0,0,0,.25);overflow:hidden}
.av-card .av-pic img{max-width:100%;max-height:100%;object-fit:contain}
.av-card.r-rare{border-color:#4aa3ff}.av-card.r-epic{border-color:#b05cff}.av-card.r-legendary{border-color:var(--accent2);box-shadow:0 0 16px rgba(255,176,46,.3)}
.av-card.owned{opacity:.8}
.av-price{font-weight:800;color:var(--accent2)}
@media(max-width:480px){.av-stage{grid-template-columns:58px 1fr 58px;min-height:350px;padding:8px 6px}.av-slot{width:56px;height:56px}.av-slot img{width:46px;height:46px}.av-say{width:calc(100% - 132px)}}

/* choose your hero */
.av-choose{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px}
.av-pick{text-align:center}
.av-pick .av-pic{border-radius:14px;overflow:hidden;border:1px solid var(--border);background:#1a0a06}
.av-pick .av-pic img{display:block;width:100%;height:auto}
.av-choose{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.av-pick{display:flex;flex-direction:column}
.av-pick .av-pic{aspect-ratio:4/5}
.av-pick .av-pic img{width:100%;height:100%;object-fit:cover}
.av-pick .btn{margin-top:auto}
.av-locked .av-pic img{filter:none}

/* ---------- avatar shop v2 ---------- */
.shop-wallet{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 0 10px;padding:10px 14px;border:1px solid var(--border);border-radius:14px;background:rgba(0,0,0,.25);font-size:.9rem}
.shop-wallet .btn{margin-left:auto}
.shop-deal{display:flex;gap:14px;align-items:center;margin:0 0 14px;padding:12px;border-radius:18px;border:1.5px solid var(--accent2);background:linear-gradient(120deg,rgba(255,122,26,.22),rgba(255,176,46,.08));box-shadow:0 0 24px rgba(255,176,46,.25)}
.shop-deal img{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.shop-layout{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
@media(min-width:900px){.shop-layout{grid-template-columns:340px 1fr}.shop-stage{position:sticky;top:78px}}
.shop-stage .av-stage{min-height:340px}
.av-slot.try{border-color:#4aa3ff;box-shadow:0 0 16px rgba(74,163,255,.6);border-style:solid}
.shop-try{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;padding:10px;border-radius:12px;border:1px solid #4aa3ff;background:rgba(74,163,255,.1)}
.shop-try form{display:flex;gap:6px;flex-wrap:wrap}
.shop-tabs{display:flex;gap:6px;overflow:auto;padding-bottom:6px}
.shop-tab{white-space:nowrap;padding:9px 14px;border-radius:999px;border:1.5px solid var(--border);color:var(--text);text-decoration:none;font-size:.85rem;background:rgba(255,255,255,.03)}
.shop-tab small{opacity:.7;margin-left:4px}
.shop-tab.on{border-color:var(--accent2);background:linear-gradient(120deg,var(--accent),var(--accent2));color:var(--accent-text);font-weight:800}
.shop-filter{display:flex;gap:6px;margin:6px 0 4px;flex-wrap:wrap}
.shop-filter button{border:1px solid var(--border);background:none;color:var(--muted);border-radius:8px;padding:5px 10px;font-size:.75rem;cursor:pointer}
.shop-filter button.on{color:var(--text);border-color:var(--accent2)}
.av-card{position:relative}
.av-card .rib{position:absolute;top:8px;left:8px;z-index:2;font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:3px 7px;border-radius:6px;background:rgba(0,0,0,.65);color:#ddd}
.av-card .rib-rare{color:#6cb6ff}.av-card .rib-epic{color:#c78bff}.av-card .rib-legendary{color:#ffc24a}
.av-card .rib-deal{left:auto;right:8px;background:var(--danger);color:#fff}
.av-card.r-epic{box-shadow:0 0 14px rgba(176,92,255,.25)}
.av-card.r-legendary{background:linear-gradient(180deg,rgba(255,176,46,.1),var(--card))}
.av-card .av-pic{position:relative}
.av-card.is-locked .av-pic img{filter:grayscale(.8) brightness(.55)}
.av-lock{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:1.6rem;gap:2px}
.av-lock b{font-size:.72rem}
.av-card .looks{display:flex;gap:3px;justify-content:center}
.av-card .looks span{width:30px;height:44px;border-radius:6px;overflow:hidden;background:#0006}
.av-card .looks img{width:100%;height:100%;object-fit:cover;object-position:top}
.shop-layout>*{min-width:0}
.shop-main,.shop-stage{max-width:100%}
.shop-tabs{max-width:100%}
.shop-try{flex-wrap:wrap}

/* hero ability + stats */
.av-perk{font-size:.7rem;line-height:1.3;color:var(--accent2);background:rgba(255,176,46,.08);border:1px solid rgba(255,176,46,.25);border-radius:10px;padding:6px 8px;margin:6px 0;text-align:left}
.av-stats{display:grid;gap:6px;margin-top:12px}
.av-stats>div{display:grid;grid-template-columns:70px 1fr 22px;gap:8px;align-items:center;font-size:.8rem}

/* hero ability box: plain words */
.av-perk2{text-align:left;border:1px solid rgba(255,176,46,.35);border-radius:12px;background:linear-gradient(180deg,rgba(255,176,46,.1),rgba(255,122,26,.04));padding:8px 10px;margin:6px 0;display:grid;gap:4px}
.av-perk2-head{display:flex;gap:8px;align-items:center}
.av-perk2-head img{border-radius:6px;background:#000;object-fit:contain}
.av-perk2-ic{width:26px;height:26px;display:grid;place-items:center;font-size:1.05rem;background:rgba(0,0,0,.3);border-radius:6px}
.av-perk2-head small{display:block;font-size:.58rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent2);line-height:1}
.av-perk2-head b{font-size:.85rem;line-height:1.1}
.av-perk2-line{font-weight:700;font-size:.78rem;line-height:1.25}
.av-perk2-sub{font-size:.7rem;color:var(--muted);line-height:1.3}
.av-perk2-grow{font-size:.66rem;color:var(--accent2);border-top:1px dashed rgba(255,176,46,.3);padding-top:4px}
.av-pick .av-perk2,.av-card .av-perk2{width:100%}

/* ---------- share & earn (all networks) ---------- */
.share-steps{display:grid;gap:14px;margin-top:14px}
@media(min-width:900px){.share-steps{grid-template-columns:1.1fr 1fr}.share-steps>.card:first-child{grid-row:span 2}}
.share-steps h2 .badge{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(var(--accent2),var(--accent));color:var(--accent-text);font-size:.85rem;margin-right:6px}
.share-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.share-pick button{display:grid;gap:2px;justify-items:center;padding:10px 6px;border-radius:14px;border:1.5px solid var(--border);background:rgba(255,255,255,.03);color:var(--text);cursor:pointer;font-size:.85rem}
.share-pick button small{color:var(--accent2);font-size:.72rem}
.share-pick button.on{border-color:var(--accent2);box-shadow:0 0 14px rgba(255,176,46,.3);background:rgba(255,176,46,.08)}
.share-pick button:disabled{opacity:.4;cursor:not-allowed}
.share-nets{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.share-chat{margin-top:8px}
.net{padding:11px 12px;border-radius:12px;border:0;background:var(--c,#444);color:#fff;font-weight:800;cursor:pointer;font-size:.85rem}
.net.ghost{background:none;border:1.5px solid #25d366;color:#25d366;width:100%}
.net small{font-weight:500;opacity:.8}
.share-code{margin-top:12px;padding:10px 12px;border:1px dashed var(--accent2);border-radius:12px;background:rgba(255,176,46,.08)}
.share-code b{color:var(--accent2);letter-spacing:.08em;font-size:1.05rem}
.share-steps>*{min-width:0}
.share-steps textarea,.share-steps select,.share-steps input[type=text]{max-width:100%;box-sizing:border-box}
.share-pick button{min-width:0}

/* ---------- compact wardrobe ---------- */
.wd-tabs{display:flex;gap:6px;overflow-x:auto;padding:10px 0 6px;max-width:100%}
.wd-tabs button{white-space:nowrap;border:1.5px solid var(--border);background:rgba(255,255,255,.03);color:var(--text);border-radius:999px;padding:6px 12px;font-size:.78rem;cursor:pointer}
.wd-tabs button small{opacity:.65;margin-left:3px}
.wd-tabs button.on{border-color:var(--accent2);background:linear-gradient(120deg,var(--accent),var(--accent2));color:var(--accent-text);font-weight:800}
.wd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px;margin-top:6px}
.wd-item{margin:0}
.wd-item button{width:100%;display:grid;gap:2px;justify-items:center;text-align:center;padding:7px 4px 6px;border-radius:12px;border:1.5px solid var(--border);background:rgba(255,255,255,.03);color:var(--text);cursor:pointer;font:inherit}
.wd-item button:hover:not(:disabled){border-color:var(--accent2);background:rgba(255,176,46,.08)}
.wd-item button:disabled{cursor:default}
.wd-item.on button{border-color:var(--accent2);background:rgba(255,176,46,.12);box-shadow:0 0 12px rgba(255,176,46,.25)}
.wd-img{position:relative;width:56px;height:56px;display:grid;place-items:center}
.wd-img img{max-width:100%;max-height:100%;object-fit:contain}
.wd-tick{position:absolute;right:-4px;top:-4px;width:18px;height:18px;border-radius:50%;background:var(--accent2);color:var(--accent-text);font-style:normal;font-size:.65rem;display:grid;place-items:center;font-weight:900}
.wd-item b{font-size:.68rem;line-height:1.15;font-weight:700;min-height:2.3em;display:grid;align-items:center}
.wd-item small{font-size:.6rem;color:var(--muted)}

/* ---------- legal pages and sign-up agreement ---------- */
.legal-wrap{max-width:760px;margin:0 auto;padding:18px 16px 70px;position:relative;z-index:2}
.legal-doc{padding:18px 20px;line-height:1.65}
.legal-doc h1{font-size:1.7rem;margin:0 0 4px}
.legal-doc h2{font-size:1.05rem;margin:22px 0 6px;color:var(--accent2)}
.legal-doc p,.legal-doc li{color:var(--text);font-size:.92rem}
.legal-doc ul,.legal-doc ol{padding-left:20px;margin:6px 0}
.legal-doc a{color:var(--accent2)}
.legal-links{margin:14px 0 0;text-align:center;font-size:.78rem;color:var(--muted)}
.legal-links a{color:var(--muted);text-decoration:underline}
.agree{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;font-size:.82rem;line-height:1.4;color:var(--muted);font-weight:400}
.agree input{width:auto;margin-top:2px;flex:none}
.agree a{color:var(--accent2)}

/* Please read before playing */
.rules-back{position:fixed;inset:0;z-index:9999;background:rgba(5,5,12,.82);display:flex;align-items:center;justify-content:center;padding:16px}
.rules-box{max-width:440px;width:100%;background:var(--card,#1a1a2e);border:1px solid var(--line,#333);border-radius:18px;padding:20px;max-height:92vh;overflow:auto}
.rules-box h2{margin:0 0 10px}
.rules-list{padding-left:18px;margin:0 0 12px;display:grid;gap:10px;line-height:1.4}
.rules-box .btn{width:100%}

/* arrows on sideways rows */
.rail{position:relative}
.rail-btn{position:absolute;top:38%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid rgba(var(--accent-rgb),.7);background:rgba(10,6,4,.85);color:var(--accent2,#fff);font-size:1.7rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 3px;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.rail-btn.prev{left:-6px}.rail-btn.next{right:-6px}
.rail.at-start .rail-btn.prev,.rail.at-end .rail-btn.next{display:none}

/* site footer */
.site-foot{margin:26px auto 0;padding:18px 12px 6px;text-align:center;border-top:1px solid rgba(var(--accent-rgb),.25);max-width:640px;color:var(--muted);font-size:.78rem;line-height:1.6}
.site-foot .sf-brand{font-size:.95rem;color:var(--text);margin-bottom:6px}
.site-foot .sf-links{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 16px;margin-bottom:8px}
.site-foot a{color:var(--muted);text-decoration:none}
.site-foot .sf-links a:hover,.site-foot .sf-made a:hover{color:var(--accent2);text-decoration:underline}
.site-foot p{margin:2px 0}
.site-foot .sf-made a{color:var(--accent2);font-weight:700}

/* footer with the two heroes */
.site-foot{border-top:0;padding:0;max-width:720px}
.site-foot .sf-card{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(var(--accent-rgb),.4);background-size:cover;background-position:center top;min-height:250px;display:flex;align-items:flex-end;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.site-foot .sf-inner{width:100%;padding:90px 14px 14px}
.site-foot .sf-brand{display:flex;flex-direction:column;align-items:center;margin-bottom:8px}
.site-foot .sf-brand b{font-size:1.35rem;font-weight:900;color:#fff;letter-spacing:.5px;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.site-foot .sf-brand span{font-size:.78rem;color:var(--accent2)}
.site-foot .sf-links a{color:#f3e3d6}
.site-foot .sf-note{color:#d9c3b3}
.site-foot .sf-copy{color:#c9b3a3}
.site-foot .sf-card{min-height:340px;background-position:center 8%}
.site-foot .sf-inner{padding-top:190px}

/* compact footer box (replaces the hero-image version above) */
.site-foot .sf-card{min-height:0;display:block;background:rgba(20,10,6,.7);background-image:none;padding:14px 12px;text-align:center;box-shadow:none}
.site-foot .sf-inner{padding:0}
.site-foot .sf-brand{margin-bottom:6px}
.site-foot .sf-brand b{font-size:1rem}
.site-foot .sf-links{margin-bottom:6px}
.site-foot .sf-made{display:none}

/* =====================================================================
   LIVE SITE: the Spin & Win look on every page (a drifting city, sparks, things rising into place)
   ===================================================================== */
body::before{inset:-6%;background:url('../img/welcome-bg.jpg') 50% 30%/cover no-repeat;animation:liveKb 30s ease-in-out infinite alternate;will-change:transform}
body.theme-pink::before{filter:hue-rotate(290deg) saturate(1.05)}
body::after{background:linear-gradient(180deg,rgba(8,4,6,.55) 0%,rgba(8,4,6,.30) 28%,rgba(8,4,6,.55) 62%,rgba(8,4,6,.82) 100%)}
@keyframes liveKb{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(-1.5%,-2%,0)}}
#embers{position:fixed;inset:0;z-index:-1;pointer-events:none;width:100%;height:100%}

/* things rise into place (they keep their normal hover afterwards) */
.wrap>.card,.wrap>.grid>*,.wrap>.chips,.wrap>.list,.wrap>section{animation:liveRise .55s ease backwards}
.wrap>.card:nth-child(2),.wrap>.grid>*:nth-child(2){animation-delay:.07s}
.wrap>.card:nth-child(3),.wrap>.grid>*:nth-child(3){animation-delay:.14s}
.wrap>.card:nth-child(4),.wrap>.grid>*:nth-child(4){animation-delay:.21s}
.wrap>.card:nth-child(n+5),.wrap>.grid>*:nth-child(n+5){animation-delay:.28s}
@keyframes liveRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* headlines shimmer like the Spin & Win title */
.hero h1 em{background:linear-gradient(100deg,#ffb02e 20%,#fff3c4 45%,#ffb02e 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:liveShine 3.4s linear infinite}
@keyframes liveShine{from{background-position:120% 0}to{background-position:-120% 0}}

/* the bottom bar and the main buttons feel alive */
.tabs a.dep .ti,.tabs a.red .ti{animation:liveBeat 2.4s ease-in-out infinite}
@keyframes liveBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.pill.ok{box-shadow:0 0 10px rgba(80,220,140,.25)}
.card.glow{animation:glowpulse 4.5s ease-in-out infinite,liveRise .55s ease backwards}

@media(prefers-reduced-motion:reduce){body::before,.wrap>.card,.wrap>.grid>*,.wrap>.chips,.wrap>.list,.wrap>section,.hero h1 em,.tabs a .ti{animation:none!important}}
@media print{#embers{display:none!important}}
/* the old still planets give way to the live city */
.scene,.sky{display:none!important}
.hero{background-color:transparent}

/* the hero wearing its gear: each piece is laid over the picture at its own spot */
.av-dress{position:relative;width:100%;max-width:240px;margin:0 auto;z-index:1}
.av-dress .av-char{display:block;width:100%;height:auto}
.av-wear{position:absolute;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));height:auto}
.av-wear.try-on{animation:wearPop .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes wearPop{from{opacity:0;transform:translate(-50%,-50%) scale(.4)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* the shop's hero preview: smaller gear slots (there are 11 now) and it scrolls when the screen is short or zoomed in */
.shop-stage .av-stage{grid-template-columns:56px 1fr 56px;gap:4px;padding:8px}
.shop-stage .av-col{gap:7px}
.shop-stage .av-slot{width:52px;height:52px;border-radius:12px}
.shop-stage .av-slot img{width:42px;height:42px}
.shop-stage .av-empty{font-size:.55rem}
.shop-stage .av-dress{max-width:200px}
@media(min-width:900px){.shop-stage{max-height:calc(100vh - 92px);overflow-y:auto;scrollbar-width:thin}}
@media(max-width:480px){.shop-stage .av-stage{grid-template-columns:48px 1fr 48px}.shop-stage .av-slot{width:46px;height:46px}.shop-stage .av-slot img{width:38px;height:38px}}

/* hero cards carry a lot (picture, five looks, ability, buttons): give them wider columns so they never overlap */
.av-shop.heroes{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.av-card{min-width:0;overflow:hidden}
.av-card .looks{flex-wrap:wrap}

/* the menu's folded "More" section */
.dmore summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.dmore summary::-webkit-details-marker{display:none}
.dmore summary::after{content:"+";font-size:1rem;color:var(--muted)}
.dmore[open] summary::after{content:"−"}
.dbody .dsec{margin-top:16px;padding-top:12px;border-top:1px solid rgba(var(--accent-rgb),.18)}
.dbody .dsec:first-child{border-top:0;margin-top:8px;padding-top:0}