/* ===== Casiho shared styles (Solana purple and green, retro/arcade pixel touches) ===== */
:root{
  --bg:#0c0a16; --bg2:#08060f; --navy:#34127a; --blue-lt:#14F195; --sol-purple:#9945FF; --sol-green:#14F195; --panel:rgba(22,16,40,.78); --panel-solid:#15112a;
  --border:rgba(176,150,255,.14); --border-strong:rgba(176,150,255,.28);
  --text:#e6e9f5; --muted:#8b93b0; --dim:#5d6585;
  --violet:#9945FF; --cyan:#14F195; --pink:#ec4899; --green:#14F195; --red:#f43f5e; --amber:#f59e0b;
  --grad:linear-gradient(135deg,#6a1fd1 0%,#9945FF 58%,#14c98a 130%);
  --pixel:"Press Start 2P",ui-monospace,monospace; --vt:"VT323",ui-monospace,monospace;
  --radius:8px; --radius-sm:6px;
  --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --shadow:0 10px 40px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  font-family:var(--sans); color:var(--text); background:var(--bg); line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 500px at 10% -10%, rgba(153,69,255,.22), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(20,241,149,.10), transparent 60%),
    radial-gradient(700px 600px at 50% 120%, rgba(20,241,149,.06), transparent 60%);
  background-attachment:fixed;
}
body::before{ /* subtle grid */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:linear-gradient(rgba(153,69,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(20,241,149,.05) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 80%);
}
a{color:var(--cyan); text-decoration:none}
a:hover{text-decoration:underline}
main{flex:1; width:100%; max-width:1120px; margin:0 auto; padding:28px 20px 60px}
h1,h2,h3{line-height:1.2; margin:0 0 .5em; letter-spacing:-.02em}
h1{font-size:clamp(1.8rem,4vw,2.6rem)}
h2{font-size:1.35rem}
p{margin:0 0 1em}
.muted{color:var(--muted)} .dim{color:var(--dim)} .mono{font-family:var(--mono)}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.up{color:var(--green)} .down{color:var(--red)}
.hidden{display:none!important}

/* ===== Header ===== */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:rgba(9,7,18,.72); border-bottom:1px solid var(--border)}
.nav{max-width:1120px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:18px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.1rem; color:var(--text); white-space:nowrap}
.brand:hover{text-decoration:none}
.brand img{width:34px; height:34px; filter:drop-shadow(0 0 10px rgba(153,69,255,.45))}
.brand .wordmark{letter-spacing:.18em; font-weight:900; font-size:1.05rem}
.brand .wordmark em{font-style:normal; color:var(--cyan)}
.nav-links{display:flex; gap:4px; margin-left:8px; flex:1}
.nav-links a{color:var(--muted); padding:8px 12px; border-radius:10px; font-size:.92rem; font-weight:500; white-space:nowrap}
.nav-links a:hover{color:var(--text); background:rgba(176,150,255,.08); text-decoration:none}
.nav-links a.active{color:var(--text); background:rgba(153,69,255,.16); box-shadow:inset 0 0 0 1px rgba(153,69,255,.35)}
.nav-right{display:flex; align-items:center; gap:10px; margin-left:auto}
.menu-btn{display:none; background:none; border:1px solid var(--border); color:var(--text); border-radius:10px; width:40px; height:40px; cursor:pointer; font-size:1.2rem}
@media (max-width:900px){
  .menu-btn{display:inline-grid; place-items:center}
  .nav{flex-wrap:wrap}
  .nav-links{order:3; flex-basis:100%; flex-direction:column; margin:0; display:none; padding-bottom:6px}
  .nav-links.open{display:flex}
  .nav-links a{padding:11px 12px}
}

/* ===== Buttons / inputs ===== */
.btn{appearance:none; border:0; cursor:pointer; font:inherit; font-weight:600; font-size:.93rem; color:#fff;
  padding:11px 18px; border-radius:12px; background:var(--grad); box-shadow:0 6px 24px -8px rgba(153,69,255,.7);
  transition:transform .12s ease, filter .15s ease, box-shadow .15s; display:inline-flex; align-items:center; gap:8px; justify-content:center; white-space:nowrap}
.btn:hover{filter:brightness(1.12); text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55; cursor:not-allowed; filter:none}
.btn-ghost{background:rgba(176,150,255,.08); box-shadow:inset 0 0 0 1px var(--border-strong); color:var(--text)}
.btn-ghost:hover{background:rgba(176,150,255,.14)}
.btn-sm{padding:7px 12px; font-size:.85rem; border-radius:10px}
.wallet-btn .dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green)}

label{display:block; font-size:.82rem; font-weight:600; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.06em}
.input, select.input{width:100%; font:inherit; color:var(--text); background:rgba(9,7,18,.7); border:1px solid var(--border-strong);
  border-radius:12px; padding:12px 14px; outline:none; transition:border-color .15s, box-shadow .15s}
.input:focus{border-color:var(--violet); box-shadow:0 0 0 3px rgba(153,69,255,.25)}
.input.mono{font-family:var(--mono); font-size:.92rem}
select.input{appearance:none; cursor:pointer; padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b93b0' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center}
select.input option{background:var(--panel-solid)}
.form-row{display:grid; grid-template-columns:1fr 200px auto; gap:12px; align-items:end}
@media (max-width:700px){.form-row{grid-template-columns:1fr}}

/* ===== Cards / panels ===== */
.panel{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); backdrop-filter:blur(8px)}
.panel + .panel{margin-top:18px}
.page-head{margin:10px 0 24px}
.page-head p{color:var(--muted); max-width:720px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); margin-bottom:10px}

.grid{display:grid; gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-3,.grid-2,.grid-4{grid-template-columns:1fr}}

.stat{background:rgba(9,7,18,.55); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px 16px; min-width:0}
.stat .k{font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:600}
.stat .v{font-size:1.45rem; font-weight:700; font-family:var(--mono); margin-top:4px; overflow-wrap:anywhere}
.stat .s{font-size:.82rem; color:var(--muted); margin-top:2px}

/* Hub hero + tool cards */
.hero{padding:36px 0 18px; text-align:center}
.hero h1{font-size:clamp(2.2rem,6vw,3.8rem); margin-bottom:14px}
.hero p{color:var(--muted); font-size:1.1rem; max-width:640px; margin:0 auto 26px}
.hero-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.ticker{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:28px 0 8px}
.ticker .chip{display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:var(--panel); border:1px solid var(--border); font-size:.88rem}
.ticker .chip b{font-family:var(--mono); font-weight:600}
.live-dot{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

.section-title{display:flex; align-items:baseline; justify-content:space-between; margin:40px 0 16px}
.tool-card{position:relative; display:flex; flex-direction:column; gap:10px; padding:22px; border-radius:var(--radius);
  background:var(--panel); border:1px solid var(--border); color:var(--text); overflow:hidden; transition:transform .18s ease, border-color .18s, box-shadow .18s; min-height:190px}
.tool-card::after{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:var(--grad); opacity:0; transition:opacity .2s;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}
.tool-card:hover{transform:translateY(-4px); text-decoration:none; box-shadow:0 18px 50px -18px rgba(153,69,255,.55)}
.tool-card:hover::after{opacity:1}
.tool-card .icon{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:1.4rem; background:rgba(153,69,255,.14); border:1px solid rgba(153,69,255,.3)}
.tool-card h3{margin:4px 0 0; font-size:1.12rem}
.tool-card p{color:var(--muted); font-size:.92rem; margin:0; flex:1}
.tool-card .go{font-size:.85rem; font-weight:600; color:var(--cyan)}
.tool-card.featured{grid-column:span 2; background:linear-gradient(135deg,rgba(153,69,255,.22),rgba(185,140,255,.10)),var(--panel)}
.tool-card.featured .icon{background:rgba(185,140,255,.14); border-color:rgba(185,140,255,.35)}
@media (max-width:600px){.tool-card.featured{grid-column:auto}}
.badge{display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:6px; background:rgba(34,197,94,.14); color:#4ade80; border:1px solid rgba(34,197,94,.3)}
.badge.violet{background:rgba(153,69,255,.15); color:#cdb2ff; border-color:rgba(153,69,255,.35)}


/* ===== Results / alerts ===== */
.result{margin-top:20px}
.alert{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:12px; font-size:.92rem; border:1px solid}
.alert.error{background:rgba(244,63,94,.1); border-color:rgba(244,63,94,.35); color:#fecdd3}
.alert.info{background:rgba(185,140,255,.08); border-color:rgba(185,140,255,.3); color:#cffafe}
.alert.warn{background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.35); color:#fde68a}
.spinner{width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.2); border-top-color:#fff; animation:spin .7s linear infinite; display:inline-block; vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{border-radius:8px; background:linear-gradient(90deg,rgba(176,150,255,.06),rgba(176,150,255,.14),rgba(176,150,255,.06)); background-size:200% 100%; animation:shimmer 1.2s infinite; color:transparent!important}
@keyframes shimmer{to{background-position:-200% 0}}

.table-wrap{overflow-x:auto; border-radius:12px; border:1px solid var(--border)}
table{width:100%; border-collapse:collapse; font-size:.92rem}
th,td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--border); white-space:nowrap}
th{font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); background:rgba(9,7,18,.5); font-weight:600}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right; font-family:var(--mono)}
tbody tr{transition:background .12s}
tbody tr:hover{background:rgba(176,150,255,.05)}
tr.clickable{cursor:pointer}

.addr{font-family:var(--mono); font-size:.88rem; overflow-wrap:anywhere; word-break:break-all}
.copy{background:none; border:0; color:var(--muted); cursor:pointer; padding:2px 6px; border-radius:6px; font-size:.85rem}
.copy:hover{color:var(--text); background:rgba(176,150,255,.1)}
.coin-row{display:flex; align-items:center; gap:10px}
.coin-row img{width:26px; height:26px; border-radius:50%; background:#222}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.chip-btn{background:rgba(176,150,255,.07); border:1px solid var(--border); color:var(--muted); padding:5px 11px; border-radius:999px; font-size:.82rem; cursor:pointer; font:inherit; font-size:.82rem}
.chip-btn:hover{color:var(--text); border-color:var(--border-strong)}

/* Toasts */
.toasts{position:fixed; bottom:20px; right:20px; z-index:100; display:flex; flex-direction:column; gap:8px; max-width:min(380px,calc(100vw - 40px))}
.toast{background:var(--panel-solid); border:1px solid var(--border-strong); border-left:3px solid var(--cyan); padding:12px 14px; border-radius:10px; font-size:.9rem; box-shadow:var(--shadow); animation:toastIn .25s ease}
.toast.error{border-left-color:var(--red)} .toast.success{border-left-color:var(--green)}
@keyframes toastIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:22px 20px; text-align:center; color:var(--dim); font-size:.85rem}
.site-footer a{color:var(--muted)}

/* Game */
.game-layout{display:grid; grid-template-columns:1fr 280px; gap:18px; align-items:start}
@media (max-width:900px){.game-layout{grid-template-columns:1fr}}
.game-wrap{position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border-strong); background:#060410; box-shadow:0 20px 60px -20px rgba(153,69,255,.45)}
#game{display:block; width:100%; touch-action:none; cursor:crosshair; user-select:none; -webkit-user-select:none}
.touch-controls{display:none; gap:10px; margin-top:12px}
.touch-controls button{flex:1; height:58px; font-size:1.5rem; border-radius:14px; border:1px solid var(--border-strong); background:var(--panel); color:var(--text); touch-action:none; user-select:none; -webkit-user-select:none}
.touch-controls button:active,.touch-controls button.held{background:rgba(153,69,255,.25)}
@media (hover:none),(pointer:coarse){.touch-controls{display:flex}}
.legend{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.legend li{display:flex; align-items:center; gap:10px; font-size:.9rem}
.legend .sw{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:.72rem; font-weight:800; color:#0c0a16; flex:none}
kbd{font-family:var(--mono); font-size:.78rem; padding:2px 6px; border-radius:5px; border:1px solid var(--border-strong); background:rgba(9,7,18,.7); color:var(--text)}

/* ===== Retro / pixel layer ===== */
img.pixel,.brand img,.pixel-img{image-rendering:pixelated; image-rendering:crisp-edges}
.brand .wordmark{font-family:var(--pixel); font-size:.95rem; letter-spacing:.12em; font-weight:400; color:#fff; text-shadow:2px 2px 0 var(--navy)}
h1,.pixel-font{font-family:var(--pixel); font-weight:400; letter-spacing:0; line-height:1.35}
h1{font-size:clamp(1.15rem,3.2vw,1.75rem); text-shadow:3px 3px 0 var(--navy)}
.hero h1{font-size:clamp(1.5rem,5.2vw,3rem); line-height:1.3}
.eyebrow{font-family:var(--pixel); font-size:.62rem; letter-spacing:.08em; font-weight:400}
.section-title h2,.panel h2{font-family:var(--pixel); font-size:.9rem; font-weight:400; letter-spacing:.02em; line-height:1.5}
.tool-card h3{font-family:var(--pixel); font-size:.78rem; font-weight:400; line-height:1.6}
.stat .v,.big-num{font-family:var(--vt); font-size:2rem; line-height:1.05; font-weight:400; letter-spacing:.02em}
.btn{border-radius:4px; box-shadow:4px 4px 0 var(--navy); font-weight:700; letter-spacing:.02em}
.btn:hover{box-shadow:4px 4px 0 var(--navy), 0 0 22px -4px rgba(153,69,255,.8)}
.btn:active{transform:translate(3px,3px); box-shadow:1px 1px 0 var(--navy)}
.btn-ghost{box-shadow:inset 0 0 0 2px var(--border-strong), 3px 3px 0 rgba(52,18,122,.7)}
.btn-ghost:active{box-shadow:inset 0 0 0 2px var(--border-strong)}
.panel,.tool-card{border-width:2px}
.tool-card .icon{border-radius:4px; image-rendering:pixelated}
.pixel-divider{height:8px; margin:34px 0; background:repeating-linear-gradient(90deg,var(--violet) 0 8px,transparent 8px 16px); opacity:.35}
.scanlines{position:relative}
.scanlines::after{content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px); mix-blend-mode:multiply}
.coin-float{width:96px; height:96px; image-rendering:pixelated; animation:bob 2.4s steps(8) infinite; filter:drop-shadow(0 0 24px rgba(153,69,255,.6))}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.blink{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ===== Casino / games layer ===== */
.chip-badge{display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:4px; background:rgba(153,69,255,.14); border:2px solid rgba(185,140,255,.4); color:#fff; font-family:var(--vt); font-size:1.25rem; line-height:1}
.chip-badge:hover{text-decoration:none; background:rgba(153,69,255,.25)}
.disclaimer{max-width:820px; margin:0 auto 14px; padding:12px 16px; border:2px dashed rgba(245,158,11,.45); border-radius:6px; background:rgba(245,158,11,.06); color:#fde68a; font-size:.86rem; line-height:1.6}
.casino{display:grid; grid-template-columns:300px 1fr; gap:18px; align-items:start}
.casino .side{order:0} .casino .stage{order:1; min-width:0}
@media (max-width:900px){.casino{grid-template-columns:1fr} .casino .side{order:2}}
.stage{position:relative; background:radial-gradient(ellipse at 50% 0%,rgba(153,69,255,.18),transparent 70%),var(--panel); border:2px solid var(--border-strong); border-radius:var(--radius); padding:22px; min-height:380px}
.balance-box{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-radius:6px; background:rgba(9,7,18,.6); border:2px solid var(--border)}
.balance-box .amt{font-family:var(--vt); font-size:2rem; line-height:1; display:flex; align-items:center; gap:8px}
.betbox{display:grid; grid-template-columns:1fr repeat(3,auto); gap:6px}
.betbox .input{padding:10px 12px; font-family:var(--vt); font-size:1.35rem}
.betbox .btn{padding:8px 10px; font-size:.78rem}
.side .field{margin-top:14px}
.side .btn-play{width:100%; margin-top:16px; padding:15px; font-family:var(--pixel); font-size:.8rem; font-weight:400}
.seg{display:flex; gap:6px}
.seg button{flex:1; padding:10px; border-radius:4px; border:2px solid var(--border-strong); background:rgba(9,7,18,.6); color:var(--muted); font:inherit; font-weight:700; cursor:pointer}
.seg button.on{background:var(--violet); border-color:var(--blue-lt); color:#fff; box-shadow:3px 3px 0 var(--navy)}
.seg button:disabled{opacity:.5; cursor:not-allowed}
.result-banner{font-family:var(--pixel); font-size:clamp(.8rem,2.4vw,1.1rem); text-align:center; min-height:1.6em; margin:14px 0 4px; line-height:1.5}
.result-banner.win{color:#4ade80; text-shadow:0 0 18px rgba(74,222,128,.5)} .result-banner.lose{color:#fb7185}
.hist{display:flex; gap:6px; flex-wrap:wrap; margin-top:14px}
.hist span{font-family:var(--vt); font-size:1.1rem; padding:2px 8px; border-radius:4px; background:rgba(9,7,18,.6); border:1px solid var(--border)}
.hist span.w{color:#4ade80; border-color:rgba(74,222,128,.35)} .hist span.l{color:#fb7185; border-color:rgba(251,113,133,.3)}
.paytable{width:100%; font-size:.85rem} .paytable td{padding:6px 8px} .paytable img{vertical-align:middle}

/* Slots */
.reels{display:flex; gap:12px; justify-content:center; padding:18px; background:#08060f; border:4px solid var(--navy); border-radius:8px; box-shadow:inset 0 0 0 2px var(--violet), 0 0 40px -10px rgba(153,69,255,.7); max-width:520px; margin:10px auto 0}
.reel{width:min(130px,26vw); height:min(130px,26vw); overflow:hidden; border-radius:6px; background:linear-gradient(#1a1236,#08060f 40%,#08060f 60%,#1a1236); border:2px solid var(--border-strong); position:relative}
.reel .strip{position:absolute; left:0; right:0; top:0}
.reel .cell{height:min(130px,26vw); display:grid; place-items:center}
.reel .cell img{width:62%; height:62%}
.reel.win{box-shadow:0 0 0 3px #4ade80, 0 0 24px rgba(74,222,128,.6)}
.payline{height:4px; max-width:520px; margin:-4px auto 0; background:repeating-linear-gradient(90deg,var(--blue-lt) 0 8px,transparent 8px 16px); opacity:.6}

/* Dice */
.dice-num{font-family:var(--vt); font-size:clamp(4rem,14vw,7rem); text-align:center; line-height:1; margin:18px 0 6px; letter-spacing:.04em}
.dice-track{position:relative; height:22px; border-radius:4px; overflow:hidden; border:2px solid var(--navy); margin:22px 4px 8px}
.dice-track .lose-zone,.dice-track .win-zone{position:absolute; top:0; bottom:0}
.dice-track .win-zone{background:var(--green)} .dice-track .lose-zone{background:var(--red)}
.dice-marker{position:absolute; top:-14px; width:0; height:0; border-left:9px solid transparent; border-right:9px solid transparent; border-top:12px solid #fff; transform:translateX(-9px); transition:left .45s cubic-bezier(.2,.9,.3,1.2)}
.dice-scale{display:flex; justify-content:space-between; font-family:var(--vt); color:var(--muted); font-size:1.1rem; padding:0 4px}
input[type=range]{width:100%; accent-color:var(--violet)}

/* Coin flip */
.coin3d{width:min(200px,50vw); height:min(200px,50vw); margin:20px auto; position:relative; transform-style:preserve-3d; perspective:800px}
.coin3d .inner{width:100%; height:100%; position:relative; transform-style:preserve-3d; transition:transform 1.6s cubic-bezier(.25,.8,.3,1)}
.coin3d .face{position:absolute; inset:0; backface-visibility:hidden; display:grid; place-items:center}
.coin3d .face img{width:100%; height:100%; image-rendering:pixelated; filter:drop-shadow(0 0 22px rgba(153,69,255,.55))}
.coin3d .back{transform:rotateY(180deg)}

/* Crash */
.crash-wrap{position:relative; border-radius:6px; overflow:hidden; border:2px solid var(--navy); background:#08060f}
#crash-canvas{display:block; width:100%; height:340px}
.crash-mult{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; font-family:var(--pixel); font-size:clamp(1.6rem,6vw,3.2rem); text-shadow:4px 4px 0 var(--navy)}
.crash-mult.busted{color:var(--red)} .crash-mult.cashed{color:#4ade80}

/* Mines */
.mines-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; max-width:440px; margin:6px auto 0}
.tile{aspect-ratio:1; border-radius:6px; border:2px solid var(--border-strong); background:linear-gradient(180deg,#231a4a,#15112a); box-shadow:0 4px 0 var(--navy); cursor:pointer; display:grid; place-items:center; transition:transform .08s, background .15s; padding:0}
.tile:hover:not(:disabled){transform:translateY(-2px); border-color:var(--blue-lt)}
.tile:disabled{cursor:default}
.tile.safe{background:rgba(34,197,94,.14); border-color:rgba(74,222,128,.6); box-shadow:none}
.tile.boom{background:rgba(244,63,94,.25); border-color:var(--red); box-shadow:none; animation:shake .35s}
.tile.revealed{opacity:.55; box-shadow:none}
.tile img{width:58%; height:58%}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.mult-strip{display:flex; justify-content:space-between; gap:10px; margin-top:14px; flex-wrap:wrap}

/* Plinko */
#plinko-canvas{display:block; width:100%; max-width:620px; margin:0 auto; touch-action:manipulation}

/* Blackjack */
.bj-table{background:radial-gradient(ellipse at 50% 30%,#3b1a7a,#22104f 60%,#130833); border:4px solid var(--navy); border-radius:120px 120px 16px 16px / 60px 60px 16px 16px; padding:22px 16px; min-height:360px}
.bj-hand{min-height:132px; text-align:center}
.bj-hand h3{font-family:var(--pixel); font-size:.65rem; font-weight:400; color:#e6dcff; margin:0 0 10px}
.cards{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; min-height:100px}
.card{width:68px; height:96px; border-radius:6px; background:#fff; color:#0c0a16; border:3px solid #0c0a16; box-shadow:4px 4px 0 rgba(0,0,0,.35); position:relative; font-family:var(--pixel); animation:deal .25s ease-out}
.card .r{position:absolute; top:6px; left:6px; font-size:.75rem}
.card .s{position:absolute; inset:0; display:grid; place-items:center; font-size:1.9rem; font-family:var(--sans)}
.card .r2{position:absolute; bottom:6px; right:6px; font-size:.75rem; transform:rotate(180deg)}
.card.red{color:#dc2626}
.card.back{background:repeating-linear-gradient(45deg,#9945FF 0 6px,#6a1fd1 6px 12px); border-color:#fff}
.card.back::after{content:""; position:absolute; inset:24% 18%; background:url(../img/logo.svg) center/contain no-repeat; image-rendering:pixelated}
@keyframes deal{from{transform:translateY(-30px) rotate(-8deg); opacity:0}to{transform:none; opacity:1}}
.bj-actions{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px}
.bj-actions .btn{font-family:var(--pixel); font-size:.65rem; font-weight:400; padding:13px 6px}
@media (max-width:480px){.card{width:54px; height:78px} .card .s{font-size:1.4rem}}

/* Lobby */
.game-card .thumb{height:96px; display:grid; place-items:center; border-radius:6px; background:rgba(9,7,18,.6); border:2px solid var(--border); margin-bottom:6px}
.game-card .thumb img{width:56px; height:56px}

/* ===== Gate overlay, claim modal, share bar, breadcrumb, misc ===== */
.stage,.game-wrap{position:relative}
.gate{position:absolute; inset:0; z-index:5; display:grid; place-items:center; padding:20px; background:rgba(9,7,18,.86); backdrop-filter:blur(3px); border-radius:inherit}
.gate-box{text-align:center; max-width:360px}
.gate-box h2{font-family:var(--pixel); font-size:.85rem; font-weight:400; line-height:1.6; margin:14px 0 8px}
.gate-box .btn{margin-top:8px}
.modal-backdrop{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:18px; background:rgba(6,4,14,.78); backdrop-filter:blur(4px); animation:toastIn .2s ease}
.modal{position:relative; width:min(440px,100%); text-align:center; padding:28px 24px 20px; background:var(--panel-solid); border:4px solid var(--violet); border-radius:4px; box-shadow:8px 8px 0 var(--navy), 0 0 60px -10px rgba(153,69,255,.7)}
.modal h2{font-family:var(--pixel); font-size:.95rem; font-weight:400; line-height:1.5; margin:14px 0 10px; text-shadow:3px 3px 0 var(--navy)}
.modal p{color:var(--muted); font-size:.92rem}
.modal-coin{image-rendering:pixelated; animation:bob 2.4s steps(8) infinite}
.modal-x{position:absolute; top:8px; right:10px; background:none; border:0; color:var(--muted); font-size:1.1rem; cursor:pointer; padding:6px}
.modal-x:hover{color:#fff}
.modal-steps{display:flex; flex-direction:column; align-items:center; gap:12px; margin:18px 0 14px}
.modal-steps .btn{min-width:240px}
.countdown{font-family:var(--pixel); font-size:2rem; color:#fff; display:flex; align-items:baseline; gap:8px; text-shadow:3px 3px 0 var(--navy)}
.countdown small{font-size:.6rem; color:var(--muted)}
.btn-claim{background:linear-gradient(135deg,#15803d,#22c55e); font-family:var(--pixel); font-size:.72rem; font-weight:400; padding:15px 18px; animation:pulseBtn 1s steps(2) infinite}
@keyframes pulseBtn{50%{filter:brightness(1.25)}}
.modal-note{font-size:.78rem!important; margin:0}
.share-wrap{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:26px; padding-top:16px; border-top:2px dashed var(--border)}
.share-label{font-family:var(--pixel); font-size:.6rem; color:var(--muted); margin-right:4px}
.share-btn{display:inline-flex; align-items:center; padding:7px 12px; border-radius:4px; border:2px solid var(--border-strong); background:rgba(9,7,18,.6); color:var(--text); font:inherit; font-size:.82rem; font-weight:600; cursor:pointer}
.share-btn:hover{border-color:var(--blue-lt); text-decoration:none; background:rgba(153,69,255,.15)}
.breadcrumb{font-size:.82rem; color:var(--muted); margin:0 0 4px; display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.breadcrumb a{color:var(--muted)} .breadcrumb a:hover{color:#fff} .breadcrumb .sep{color:var(--dim)}
.breadcrumb [aria-current]{color:var(--text)}
.skip-link{position:absolute; left:-999px; top:8px; z-index:300; background:var(--violet); color:#fff; padding:8px 12px; border-radius:4px}
.skip-link:focus{left:8px}
.h3{font-family:var(--pixel); font-size:.78rem; font-weight:400; line-height:1.6; margin:4px 0 0}
.footer-links{margin-bottom:6px}
h1 .grad-text{text-shadow:none; filter:drop-shadow(4px 4px 0 #34127a)}

/* Hero: everything on one centered axis */
.hero{display:flex; flex-direction:column; align-items:center; text-align:center}
.hero > *{margin-left:auto; margin-right:auto}
.hero .coin-float{display:block}
.hero .eyebrow{display:flex; justify-content:center; margin-top:18px}
.hero-actions,.ticker{width:100%; justify-content:center}
.btn-x{background:#000; color:#fff; box-shadow:4px 4px 0 var(--navy), inset 0 0 0 2px #fff}
.btn-x:hover{background:#111; filter:none; box-shadow:4px 4px 0 var(--navy), inset 0 0 0 2px var(--blue-lt), 0 0 22px -4px rgba(185,140,255,.8)}
.btn-x .x-logo{flex:none}
@media (max-width:520px){.hero-actions .btn{flex:1 1 100%; max-width:320px}}

/* ===================== Games-site home + lobby ===================== */
.full-bleed{width:100vw; position:relative; left:50%; margin-left:-50vw}
.btn-lg{padding:15px 26px; font-size:1rem}
/* Hero */
.hero-home{margin-top:-28px; min-height:min(88vh,820px); display:grid; place-items:center; overflow:hidden; border-bottom:2px solid rgba(20,241,149,.45)}
#hero-bg{position:absolute; inset:0; width:100%; height:100%; display:block; image-rendering:pixelated}
.crt{position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px), radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(0,0,0,.55) 100%)}
.hero-inner{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; padding:60px 20px 90px; max-width:760px}
.hero-inner > *{margin-left:auto; margin-right:auto}
.hero-inner .eyebrow{display:flex; justify-content:center; margin:22px 0 10px; color:#e6dcff; text-shadow:2px 2px 0 var(--navy)}
.hero-inner h1{font-size:clamp(2.2rem,8vw,4.6rem); margin:0 0 18px; line-height:1.1}
.hero-inner h1 .grad-text{background:linear-gradient(180deg,#ffffff 0%,#e6dcff 45%,#14F195 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(5px 5px 0 #34127a) drop-shadow(0 0 30px rgba(153,69,255,.6))}
.hero-inner p{color:#ece5ff; font-size:clamp(1rem,2.2vw,1.18rem); max-width:600px; margin:0 auto 30px; text-shadow:0 2px 8px rgba(0,0,0,.6)}
.hero-inner .hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; width:100%}
.coin-spin{width:112px; height:112px; image-rendering:pixelated; animation:coinspin 2.4s steps(12) infinite, bob 3s ease-in-out infinite; filter:drop-shadow(0 0 28px rgba(153,69,255,.85))}
.coin-spin.small{width:64px; height:64px}
@keyframes coinspin{0%{transform:scaleX(1)}25%{transform:scaleX(.15)}50%{transform:scaleX(-1)}75%{transform:scaleX(-.15)}100%{transform:scaleX(1)}}
/* Marquee */
.marquee{overflow:hidden; background:#0a0718; border-bottom:2px solid rgba(20,241,149,.25); padding:12px 0; margin-bottom:10px}
.mq-track{display:flex; width:max-content; animation:mq 38s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-item{display:inline-flex; align-items:center; gap:10px; padding:0 28px; font-family:var(--vt); font-size:1.4rem; color:#e6dcff; white-space:nowrap; border-right:2px dashed rgba(185,140,255,.25)}
.mq-item b{font-family:var(--pixel); font-weight:400; font-size:.7rem; color:#fff}
@keyframes mq{to{transform:translateX(-50%)}}
/* Sections */
.home-section{padding:70px 0 10px; scroll-margin-top:70px}
.section-head{text-align:center; margin-bottom:30px}
.section-head h2{font-family:var(--pixel); font-weight:400; font-size:clamp(1rem,2.6vw,1.45rem); text-shadow:3px 3px 0 var(--navy); margin-bottom:12px}
.section-head p{color:var(--muted); max-width:560px; margin:0 auto}
/* Game cards */
.games-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media (max-width:1000px){.games-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.games-grid{grid-template-columns:1fr}}
.game-card{display:flex; flex-direction:column; background:var(--panel-solid); border:2px solid var(--border-strong); border-radius:6px; overflow:hidden; color:var(--text); box-shadow:5px 5px 0 var(--navy); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.game-card:hover,.game-card:focus-visible{transform:translateY(-6px); border-color:var(--blue-lt); box-shadow:5px 11px 0 var(--navy), 0 0 34px -6px rgba(153,69,255,.8); text-decoration:none}
.preview-wrap{position:relative; aspect-ratio:7/4; background:#090614; border-bottom:2px solid var(--border-strong)}
.preview{width:100%; height:100%; display:block; image-rendering:pixelated}
.gc-tag{align-self:flex-start; font-family:var(--vt); font-size:1.05rem; line-height:1; padding:4px 8px; background:rgba(153,69,255,.85); color:#fff; border-radius:3px; box-shadow:2px 2px 0 var(--navy)}
.gc-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1}
.gc-title{font-family:var(--pixel); font-weight:400; font-size:.82rem; margin:0; line-height:1.5}
.gc-body p{color:var(--muted); font-size:.88rem; margin:0; flex:1}
.gc-play{align-self:flex-start; margin-top:6px; font-family:var(--pixel); font-size:.62rem; font-weight:400}
.game-card:hover .gc-play{filter:brightness(1.2)}
/* Steps */
.steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:none}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.steps{grid-template-columns:1fr}}
.step{position:relative; background:var(--panel); border:2px solid var(--border); border-radius:6px; padding:22px 18px 18px; text-align:center}
.step-n{position:absolute; top:-14px; left:50%; transform:translateX(-50%); width:30px; height:30px; display:grid; place-items:center; font-family:var(--pixel); font-size:.7rem; background:var(--violet); color:#fff; border-radius:3px; box-shadow:3px 3px 0 var(--navy)}
.step-ic{width:56px; height:56px; margin:6px auto 12px; display:grid; place-items:center; background:rgba(153,69,255,.15); border:2px solid rgba(185,140,255,.4); border-radius:4px; color:#fff}
.step-ic svg{width:26px; height:26px}
.step h3{font-family:var(--pixel); font-weight:400; font-size:.72rem; margin:0 0 8px; line-height:1.5}
.step p{color:var(--muted); font-size:.88rem; margin:0}
/* Solana band */
.sol-band{margin-top:80px; background:linear-gradient(90deg,#2a0f63 0%,#9945FF 58%,#14F195 135%); border-top:4px solid #14F195; border-bottom:4px solid #34127a}
.sol-inner{max-width:1120px; margin:0 auto; padding:34px 20px; display:flex; align-items:center; gap:26px; flex-wrap:wrap}
.sol-inner > div:nth-child(2){flex:1; min-width:240px}
.sol-inner h2{font-family:var(--pixel); font-weight:400; font-size:1.05rem; margin:0 0 10px; text-shadow:3px 3px 0 #34127a}
.sol-inner p{margin:0; color:#f4efff}
.sol-inner p + p{margin-top:8px}
.sol-mark{width:64px; height:64px; background:#0c0a16; border-radius:8px; display:grid; place-items:center; box-shadow:4px 4px 0 #34127a; flex:none}
.sol-mark svg{width:40px; height:40px}
.sol-band .btn-ghost{background:rgba(12,10,22,.35); box-shadow:inset 0 0 0 2px rgba(255,255,255,.7), 3px 3px 0 #34127a}
/* Final CTA */
.cta-band{text-align:center; padding:80px 20px 30px; display:flex; flex-direction:column; align-items:center}
.cta-band h2{font-family:var(--pixel); font-weight:400; font-size:clamp(1.05rem,3vw,1.6rem); margin:18px 0 12px; text-shadow:3px 3px 0 var(--navy)}
.cta-band p{color:var(--muted); max-width:520px; margin:0 auto 24px}
.cta-band .hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
/* Lobby head */
.lobby-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin:6px 0 20px}
.lobby-head p{color:var(--muted); max-width:560px; margin:0}
.lobby-balance{background:var(--panel-solid); border:2px solid var(--border-strong); border-radius:6px; padding:14px 18px; box-shadow:5px 5px 0 var(--navy); min-width:260px}
.lobby-balance .k{font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:600}
.lobby-balance .amt{font-family:var(--vt); font-size:2.6rem; line-height:1.1; display:flex; align-items:center; gap:10px}
.lb-actions{display:flex; gap:8px; align-items:center; margin-top:6px; flex-wrap:wrap}
body[data-page="games"] .marquee{margin-bottom:24px}
/* Scroll reveal */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .6s ease var(--d,0ms), transform .6s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.reveal.in{opacity:1; transform:none}
.game-card.reveal.in:hover{transform:translateY(-6px)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
  .reveal{opacity:1; transform:none}
  .mq-track{flex-wrap:wrap; width:auto; justify-content:center}
}
@media (max-width:600px){
  .hero-home{min-height:auto}
  .hero-inner{padding:44px 16px 64px}
  .coin-spin{width:88px; height:88px}
  .hero-inner .hero-actions .btn{flex:1 1 100%; max-width:300px}
  .home-section{padding-top:54px}
}

/* ===================== Season 0 features: nav extras, wallet picker, profile, daily, badges, odds ===================== */
.season-tag{font-family:var(--pixel); font-size:.5rem; padding:3px 5px; margin-left:6px; background:var(--violet); color:#fff; border-radius:2px; box-shadow:2px 2px 0 var(--navy); align-self:center}
.icon-btn{display:inline-flex; align-items:center; gap:6px; height:36px; min-width:36px; justify-content:center; padding:0 8px; background:rgba(153,69,255,.12); border:2px solid rgba(185,140,255,.4); color:#fff; border-radius:4px; cursor:pointer; font:inherit; font-size:.8rem}
.icon-btn:hover{background:rgba(153,69,255,.28)}
.icon-btn:focus-visible{outline:2px solid #fff; outline-offset:2px}
#mute-btn .snd-off{display:none} #mute-btn.is-muted .snd-on{display:none} #mute-btn.is-muted .snd-off{display:inline} #mute-btn.is-muted{color:var(--muted)}
.gift-btn{border-color:#fbbf24; animation:giftGlow 1.4s ease-in-out infinite}
@keyframes giftGlow{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.0)}50%{box-shadow:0 0 16px 2px rgba(251,191,36,.75)}}
.install-btn span{font-weight:600}
@media (max-width:760px){.install-btn span{display:none} .season-tag{display:none}}
@media (max-width:420px){.chip-badge{display:none!important}}
.wallet-btn .dot.warn{background:var(--amber); box-shadow:0 0 8px var(--amber)}
.wallet-btn .wb-name{max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wallet-list{display:flex; flex-direction:column; gap:10px; margin:16px 0 8px}
.wallet-opt{display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; background:#120d26; border:2px solid var(--border-strong); border-radius:4px; color:#fff; font:inherit; font-weight:600; cursor:pointer; text-align:left; box-shadow:3px 3px 0 var(--navy); transition:transform .12s, border-color .12s}
.wallet-opt:hover,.wallet-opt:focus-visible{transform:translate(-1px,-1px); border-color:var(--blue-lt); text-decoration:none; outline:none}
.wallet-opt img{border-radius:6px; flex:none}
.wallet-opt .wo-name{flex:1}
.wallet-opt .wo-go{font-family:var(--pixel); font-size:.6rem; color:var(--blue-lt)}
.fx-canvas{position:fixed; inset:0; z-index:300; pointer-events:none; image-rendering:pixelated}
/* daily drop */
.dd-strip{list-style:none; padding:0; margin:16px 0 4px; display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.dd-day{display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 2px; background:#120d26; border:2px solid var(--border); border-radius:4px; position:relative}
.dd-day .dd-n{font-family:var(--pixel); font-size:.42rem; color:var(--muted)}
.dd-day .dd-amt{font-family:var(--vt); font-size:1.1rem; line-height:1; color:#fff}
.dd-day.done{opacity:.55} .dd-day.done::after{content:"✓"; position:absolute; top:2px; right:4px; font-size:.7rem; color:var(--green)}
.dd-day.now{border-color:#fbbf24; box-shadow:0 0 14px -2px rgba(251,191,36,.8); transform:translateY(-3px)}
.dd-day.big .dd-amt{color:#fbbf24}
.dd-strip.mini .dd-day{padding:10px 2px}
.dd-wait{font-family:var(--vt); font-size:1.4rem; color:#e6dcff}
.daily-modal{width:min(520px,100%)}
@media (max-width:480px){.dd-strip{grid-template-columns:repeat(4,1fr)}}
/* profile panel */
.profile-panel{position:absolute; z-index:150; width:min(340px,calc(100vw - 20px)); background:var(--panel-solid); border:3px solid var(--violet); border-radius:4px; box-shadow:6px 6px 0 var(--navy), 0 20px 60px -20px rgba(153,69,255,.7); padding:16px; animation:toastIn .16s ease}
.pp-head{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.pp-head img{image-rendering:pixelated}
.pp-name{font-weight:700; font-size:1.02rem; word-break:break-all}
.pp-addr{font-size:.78rem; color:var(--muted)}
.pp-level{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:.8rem}
.pp-rank{font-family:var(--pixel); font-size:.55rem; color:#fbbf24}
.pp-bar{height:12px; margin:8px 0 14px; background:#0a0718; border:2px solid var(--border-strong); border-radius:2px; overflow:hidden}
.pp-bar span{display:block; height:100%; background:repeating-linear-gradient(90deg,#9945FF 0 8px,#14F195 8px 10px); transition:width .4s}
.pp-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:14px}
.pp-stats div{background:#120d26; border:1px solid var(--border); border-radius:4px; padding:8px 10px; display:flex; flex-direction:column}
.pp-stats b{font-family:var(--vt); font-size:1.35rem; font-weight:400; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pp-stats span{font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.pp-sub{font-family:var(--pixel); font-size:.55rem; margin-bottom:8px}
.pp-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.pp-actions .btn{flex:1 1 auto}
.btn.glow{animation:giftGlow 1.4s ease-in-out infinite}
.badge-grid{display:flex; flex-wrap:wrap; gap:6px}
.badge-tile{width:40px; height:40px; display:grid; place-items:center; background:#120d26; border:2px solid #fbbf24; border-radius:4px; box-shadow:2px 2px 0 var(--navy)}
.badge-tile.locked{border-color:var(--border); filter:grayscale(1) brightness(.55)}
.badge-tile img{image-rendering:pixelated}
/* hero headline */
.season-pill{display:inline-flex; align-items:center; gap:8px; margin:22px auto 14px; padding:7px 12px; font-family:var(--pixel); font-size:.55rem; letter-spacing:.06em; color:#fff; background:rgba(52,18,122,.75); border:2px solid var(--blue-lt); border-radius:3px; box-shadow:3px 3px 0 var(--navy)}
.blink-dot{width:8px; height:8px; background:#22c55e; box-shadow:0 0 8px #22c55e; animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.hero-inner h1{display:flex; flex-direction:column; align-items:center; gap:14px}
.hero-wordmark{font-family:var(--pixel); font-size:clamp(2.2rem,8vw,4.6rem); line-height:1.05; color:#fff; letter-spacing:.02em; text-shadow:4px 4px 0 #9945FF, 8px 8px 0 #34127a, 0 0 34px rgba(185,140,255,.75)}
.hero-title{font-family:var(--pixel); font-weight:400; font-size:clamp(.8rem,2.4vw,1.15rem); line-height:1.6; color:#fff; text-shadow:3px 3px 0 #34127a}
/* progression showcase */
.prog-grid{display:grid; grid-template-columns:1.1fr 1.3fr 1fr; gap:18px}
@media (max-width:980px){.prog-grid{grid-template-columns:1fr}}
.prog-card{background:var(--panel); border:2px solid var(--border-strong); border-radius:6px; padding:20px; box-shadow:5px 5px 0 var(--navy)}
.prog-card h3{font-family:var(--pixel); font-weight:400; font-size:.78rem; margin:0 0 10px}
.prog-card p{color:var(--muted); font-size:.9rem; margin:0 0 14px}
.rank-ladder{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px}
.rank-ladder li{display:flex; gap:12px; align-items:center; padding:7px 10px; background:#120d26; border-left:4px solid var(--violet); border-radius:2px}
.rank-ladder li:nth-child(n+3){border-left-color:var(--blue-lt)} .rank-ladder li:nth-child(5){border-left-color:#fbbf24}
.rank-ladder .lv{font-family:var(--pixel); font-size:.5rem; color:var(--muted); width:46px}
.rank-ladder .rk{font-family:var(--vt); font-size:1.3rem; line-height:1}
/* odds */
.odds-table td.odds-note{color:var(--muted); font-size:.85rem; min-width:260px; white-space:normal}
.odds-table td a{font-weight:700}
.table-wrap{overflow-x:auto; background:var(--panel); border:2px solid var(--border-strong); border-radius:6px; box-shadow:5px 5px 0 var(--navy)}
.table-wrap .table{margin:0}
.odds-panel{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; margin-top:22px; padding:20px; background:var(--panel); border:2px solid var(--border-strong); border-radius:6px; box-shadow:5px 5px 0 var(--navy)}
@media (max-width:700px){.odds-panel{grid-template-columns:1fr}}
.odds-nums{display:flex; flex-direction:column; gap:10px; min-width:200px}
.odds-nums div{background:#120d26; border:2px solid var(--border); border-radius:4px; padding:10px 14px; display:flex; flex-direction:column}
.odds-nums .k{font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:600}
.odds-nums b{font-family:var(--vt); font-size:1.8rem; font-weight:400; line-height:1.1; color:#fff}
.odds-text h2{font-family:var(--pixel); font-weight:400; font-size:.8rem; margin:0 0 10px}
.odds-text p{color:var(--muted); font-size:.92rem; margin:0 0 10px}
.odds-text .keys{font-size:.85rem}
.odds-more summary{cursor:pointer; color:var(--blue-lt); font-weight:600; margin-bottom:8px}
kbd{font-family:var(--vt); font-size:1rem; padding:0 6px; background:#120d26; border:1px solid var(--border-strong); border-bottom-width:3px; border-radius:3px; color:#fff}
/* roadmap + faq */
.roadmap{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media (max-width:900px){.roadmap{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.roadmap{grid-template-columns:1fr}}
.road{position:relative; padding:20px 18px 18px; background:repeating-linear-gradient(135deg,rgba(185,140,255,.06) 0 10px,transparent 10px 20px), var(--panel); border:2px dashed rgba(185,140,255,.5); border-radius:6px}
.road .soon{display:inline-block; font-family:var(--pixel); font-size:.45rem; padding:4px 6px; background:#fbbf24; color:#0c0a16; border-radius:2px; margin-bottom:10px}
.road h3{font-family:var(--pixel); font-weight:400; font-size:.68rem; line-height:1.5; margin:0 0 8px}
.road p{color:var(--muted); font-size:.88rem; margin:0}
.faq{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:10px}
.faq-item{background:var(--panel); border:2px solid var(--border-strong); border-radius:4px; padding:0 18px}
.faq-item summary{cursor:pointer; padding:16px 0; font-weight:700; list-style:none; display:flex; justify-content:space-between; gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; font-family:var(--pixel); font-size:.7rem; color:var(--blue-lt)}
.faq-item[open] summary::after{content:"-"}
.faq-item p{color:var(--muted); margin:0 0 16px}