/* ============================================================================
   ATM88 Win (atm88win.com) — PURPLE + GOLD casino portal.
   Namespace .aw-* — a purple dark casino on its own system. Mobile-first.
   ========================================================================== */
:root{
  --bg:#180a2e; --bg2:#20103f; --panel:#2a1550; --panel2:#331a5e; --card:#271249;
  --purple:#7c3aed; --purple2:#a569f7; --purple-deep:#4c1d95;
  --gold:#f5c518; --gold2:#ffd94d; --gold-ink:#2a1a02;
  --ink:#f4ecff; --mut:#b7a2d8; --line:rgba(180,140,255,.16);
  --good:#34d399; --hot:#ff5d7a;
  --radius:13px; --maxw:1240px; --shadow:0 16px 40px -22px rgba(0,0,0,.8); --h:60px;
}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
body{margin:0;color:var(--ink);
  background:
    radial-gradient(900px 500px at 80% -10%,rgba(124,58,237,.35),transparent 60%),
    radial-gradient(700px 460px at 0% 8%,rgba(245,197,24,.08),transparent 55%),
    var(--bg);
  font:15.5px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--gold2);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{line-height:1.22;margin:0 0 .5em;font-weight:800;letter-spacing:-.01em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.eyebrow{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold2);background:rgba(245,197,24,.12);border:1px solid rgba(245,197,24,.3);padding:5px 12px;border-radius:999px;margin-bottom:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:800;padding:11px 20px;border-radius:10px;font-size:14.5px}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--gold-ink);box-shadow:0 8px 22px -8px rgba(245,197,24,.55)}
.btn-gold:hover{filter:brightness(1.05);text-decoration:none}
.btn-ghost{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{background:rgba(255,255,255,.12);text-decoration:none}

/* ---- top bar ---- */
.aw-top{position:sticky;top:0;z-index:50;background:rgba(18,8,36,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.aw-top .wrap{display:flex;align-items:center;gap:14px;height:var(--h)}
.aw-logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:21px;color:#fff;letter-spacing:.02em;white-space:nowrap}
.aw-logo:hover{text-decoration:none}.aw-logo img{width:28px;height:28px}
.aw-logo b{color:var(--gold2)}.aw-logo i{color:var(--purple2);font-style:normal}
.aw-search{flex:1;max-width:360px;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 14px;color:var(--mut);font-size:13.5px}
.aw-search input{flex:1;background:none;border:none;color:var(--ink);outline:none;font-size:13.5px;min-width:0}
.aw-auth{display:flex;gap:8px;margin-left:auto;align-items:center}
.aw-lang{display:flex;gap:2px}
.aw-lang a{font-size:12px;padding:5px 7px;color:var(--mut);border-radius:6px}
.aw-lang a[aria-current="true"]{color:var(--gold2);background:rgba(245,197,24,.14)}
.aw-login{color:var(--ink);font-weight:700;padding:9px 14px;border:1px solid var(--line);border-radius:9px;font-size:14px}
.aw-login:hover{text-decoration:none;background:rgba(255,255,255,.06)}
.aw-burger{display:none;background:none;border:1px solid var(--line);border-radius:8px;width:42px;height:40px;color:#fff;font-size:17px}

/* ---- category tabs ---- */
.aw-cats{background:var(--bg2);border-bottom:1px solid var(--line);position:sticky;top:var(--h);z-index:40}
.aw-cats .wrap{display:flex;gap:6px;overflow-x:auto;padding:9px 16px}
.aw-cats a{flex:none;display:flex;align-items:center;gap:7px;padding:8px 15px;border-radius:9px;color:var(--mut);font-weight:700;font-size:13.5px;white-space:nowrap;border:1px solid transparent}
.aw-cats a:hover,.aw-cats a[aria-current="page"]{color:#fff;background:linear-gradient(135deg,var(--purple),var(--purple-deep));border-color:var(--line);text-decoration:none}
.aw-cats .ic{font-size:15px}

/* ---- casino grid ---- */
.aw-floor{display:grid;grid-template-columns:230px 1fr 260px;gap:14px;padding:16px 0}
.aw-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.panel .ph{background:linear-gradient(135deg,var(--purple),var(--purple-deep));color:#fff;font-weight:800;font-size:13px;padding:9px 13px;letter-spacing:.02em}
.panel .pb{padding:12px 13px}

/* promo banner */
.aw-promo{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);display:block}
.aw-promo img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.aw-promo .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 12px 10px;font-weight:800;color:#fff;
  background:linear-gradient(0deg,rgba(18,8,36,.95),transparent)}
.aw-promo .cap b{color:var(--gold2);font-size:19px;display:block}

/* payment strip */
.aw-pay{display:flex;flex-wrap:wrap;gap:6px}
.aw-pay img{height:24px;width:auto;background:#fff;border-radius:5px;padding:3px 5px}

/* live-transaction feed */
.aw-feed table{width:100%;border-collapse:collapse;font-size:12px}
.aw-feed th{color:var(--mut);font-weight:600;text-align:left;padding:4px 4px;border-bottom:1px solid var(--line)}
.aw-feed td{padding:5px 4px;border-bottom:1px solid rgba(255,255,255,.04)}
.aw-feed .dep{color:var(--good)}.aw-feed .wd{color:var(--gold2)}

/* commission promo */
.aw-comm{background:linear-gradient(135deg,var(--purple-deep),#6d1f9e);border:1px solid var(--line);border-radius:var(--radius);padding:14px;text-align:center}
.aw-comm b{display:block;font-size:30px;color:var(--gold2);line-height:1}
.aw-comm span{color:var(--mut);font-size:12.5px}

/* game grid (provider tiles) */
.aw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.aw-logo .wm{display:inline;white-space:nowrap}
.aw-grid .gtile{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border-radius:12px;
  padding:14px 12px;aspect-ratio:3/2;border:1px solid rgba(255,255,255,.12);overflow:hidden;transition:transform .18s,border-color .18s}
.aw-grid .gtile:hover{transform:translateY(-2px);text-decoration:none;border-color:var(--gold2)}
.aw-grid .gtile img{max-width:88%;max-height:52px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.9}
.aw-grid .gtile:hover img{opacity:1}
.aw-grid .gtile span{color:#fff;font-weight:800;font-size:17px;text-align:center;line-height:1.2;letter-spacing:.02em}
.gtile{background:linear-gradient(160deg,var(--panel2),var(--card));border:1px solid var(--line);border-radius:12px;
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:12px;transition:transform .2s,border-color .2s}
.gtile:hover{transform:translateY(-3px);border-color:rgba(245,197,24,.45);text-decoration:none}
.gtile img{max-width:100%;max-height:52px;object-fit:contain}
.gtile span{color:var(--ink);font-weight:700;font-size:13px;text-align:center}

/* right: account panel */
.aw-acct .row{display:flex;gap:8px;margin-bottom:9px}.aw-acct .row .btn{flex:1;padding:10px}
.aw-acct .bal{color:var(--mut);font-size:12px;margin-top:4px}.aw-acct .amt{font-size:22px;font-weight:800;color:var(--gold2)}

/* hot matches */
.aw-match{border-bottom:1px solid var(--line);padding:10px 0}
.aw-match:last-child{border-bottom:none}
.aw-match .lg{color:var(--mut);font-size:11px;margin-bottom:5px}
.aw-match .tm{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px}
.aw-match .odds{display:flex;gap:5px}
.aw-match .odds b{flex:1;text-align:center;background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:5px 2px;font-size:12px;color:var(--gold2)}

/* popular tiles strip */
.aw-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.ptile{position:relative;border-radius:11px;overflow:hidden;border:1px solid var(--line);display:block}
.ptile img{height:auto;aspect-ratio:1/1;object-fit:cover;width:100%;transition:transform .25s}
.ptile:hover img{transform:scale(1.06)}
.ptile span{position:absolute;left:0;right:0;bottom:0;padding:13px 6px 6px;font-size:11px;font-weight:700;color:#fff;
  background:linear-gradient(0deg,rgba(18,8,36,.92),transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* section frame + SEO content */
section{scroll-margin-top:110px}
.aw-sec{padding:26px 0;border-top:1px solid var(--line)}
.aw-sec h2{font-size:clamp(19px,2.3vw,25px)}
.sec-intro{color:var(--mut);max-width:60ch;margin:0 0 18px}
.aw-4d{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.aw-4d .d{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.aw-4d .d b{display:block;font-weight:800;color:#fff}.aw-4d .d span{color:var(--mut);font-size:12px}
.aw-4d .d .n{margin-top:8px;font-family:ui-monospace,monospace;font-size:19px;letter-spacing:4px;color:var(--gold2);font-weight:800}
.aw-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:s}
.aw-step{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.aw-step::before{counter-increment:s;content:counter(s);display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--gold-ink);font-weight:800;margin-bottom:9px}
.aw-step h4{font-size:14.5px;margin:0 0 4px}.aw-step p{color:var(--mut);font-size:13px;margin:0}
.aw-logos{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.plogo{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:9px;padding:9px 14px;height:48px;min-width:90px}
.plogo img{max-height:26px;max-width:110px;width:auto;object-fit:contain}
.aw-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rail{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:11px 13px}
.rail img{height:26px;width:auto;background:#fff;border-radius:5px;padding:3px 5px;flex:none}.rail span{font-weight:600;font-size:13.5px}
.aw-reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.aw-rev{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column}
.aw-rev .stars{color:var(--gold2);font-size:15px;letter-spacing:1px;margin-bottom:9px}
.aw-rev p{color:var(--mut);font-size:13.5px;margin:0 0 14px}
.aw-rev .who{display:flex;align-items:center;gap:10px;margin-top:auto}
.aw-rev .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--purple2));color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.aw-rev .who b{display:block;font-size:13.5px;color:#fff}.aw-rev .who span{font-size:12px;color:var(--mut)}
.aw-faq details{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:3px 15px;margin-bottom:9px}
.aw-faq summary{font-weight:700;padding:12px 0;cursor:pointer;list-style:none;font-size:14.5px}
.aw-faq summary::-webkit-details-marker{display:none}
.aw-faq summary::after{content:"+";float:right;color:var(--gold2);font-weight:800;font-size:19px}
.aw-faq details[open] summary::after{content:"\2212"}
.aw-faq p{color:var(--mut);margin:0 0 13px;font-size:13.5px}
.aw-prose{max-width:74ch}.aw-prose h2{margin-top:1.1em;font-size:20px}.aw-prose p{color:#d8c8f0;margin:0 0 1em}
.aw-prose a{color:var(--gold2);font-weight:600}
.aw-pgames{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:18px 0}
.aw-phero{background:linear-gradient(135deg,var(--purple-deep),var(--bg2));padding:34px 0 26px;border-bottom:1px solid var(--line)}
.aw-phero h1{font-size:clamp(25px,3.6vw,38px);color:#fff}.aw-phero p{color:var(--mut);max-width:60ch}

/* footer */
.aw-foot{border-top:1px solid var(--line);background:var(--bg2);margin-top:12px;padding:30px 0 90px}
.aw-foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:24px}
.aw-foot h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);margin:0 0 11px}
.aw-foot a{display:block;color:var(--ink);font-size:13.5px;padding:3px 0}
.aw-foot .blurb{color:var(--mut);font-size:13.5px;max-width:34ch}
.aw-badges{display:flex;gap:8px;margin-top:12px}.aw-badges span{border:1px solid var(--line);border-radius:7px;padding:4px 9px;font-size:11.5px;font-weight:700;color:var(--mut)}
.aw-foot .social{display:flex;gap:9px;margin-top:11px}
.aw-foot .social a{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:9px;color:var(--mut)}
.aw-foot .social svg{width:17px;height:17px;fill:currentColor}
.aw-fine{border-top:1px solid var(--line);margin-top:20px;padding-top:16px;color:var(--mut);font-size:12px}

/* bottom app nav (mobile) + sticky cta */
.aw-bottom{position:fixed;bottom:0;left:0;right:0;z-index:40;display:none;grid-template-columns:repeat(5,1fr);
  background:rgba(14,6,28,.97);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.aw-bottom a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;color:var(--mut);font-size:10.5px;font-weight:600}
.aw-bottom a[aria-current="page"]{color:var(--gold2)}.aw-bottom .ic{font-size:16px}
.aw-scta{display:none}
.aw-scta .cta{display:block;text-align:center;font-weight:800;font-size:15px;padding:13px;border-radius:11px;color:var(--gold-ink);background:linear-gradient(135deg,var(--gold),var(--gold2));box-shadow:0 10px 26px -8px rgba(245,197,24,.5)}
.aw-scta .cta:hover{text-decoration:none;filter:brightness(1.04)}

/* mobile menu */
.aw-mob{display:none;background:var(--bg2);border-bottom:1px solid var(--line)}
.aw-mob a{display:block;padding:12px 16px;color:var(--ink);font-weight:600;border-top:1px solid var(--line)}
html.nav-open .aw-mob{display:block}

@media(max-width:1040px){
  .aw-floor{grid-template-columns:1fr 260px}
  .aw-col.left{display:none}
  .aw-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
  .aw-4d,.aw-rail,.aw-steps{grid-template-columns:repeat(2,1fr)}
  .aw-reviews{grid-template-columns:1fr}
  .aw-tiles{grid-template-columns:repeat(4,1fr)}
  .aw-foot .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .aw-menu,.aw-lang,.aw-login,.aw-search{display:none}
  .aw-burger{display:block}
  .aw-top .wrap{gap:10px}.aw-logo{font-size:19px}
  .aw-floor{grid-template-columns:1fr}
  .aw-col.right{order:-1}
  .aw-grid{grid-template-columns:repeat(3,1fr)}
  .aw-tiles{grid-template-columns:repeat(3,1fr)}
  .aw-pgames{grid-template-columns:repeat(3,1fr)}
  .aw-bottom{display:grid}
  .aw-scta{display:block;position:fixed;left:0;right:0;bottom:52px;z-index:41;padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:rgba(14,6,28,.97);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
  .aw-foot{padding-bottom:132px}.aw-foot .cols{grid-template-columns:1fr}
}

/* === mobile card shape (generated by emd_mobile_shape_check.py --apply) === */
/* A two-column grid of text cards makes each card a thin vertical strip on a
   phone. Picture tiles stay two-up; only word cards collapse. Regenerate. */
@media(max-width:560px){
  .aw-steps:has(> .aw-step){grid-template-columns:minmax(0,1fr)}
}
/* === end mobile card shape === */