/* Hespera BCH Play — casino landing */
:root {
    --hx-bch: #0ac18e;
    --hx-bch-bright: #2dffc8;
    --hx-bch-dim: #068f66;
    --hx-gold: #f5c842;
    --hx-gold-dim: #c9971a;
    --hx-red: #ff4d6d;
    --hx-bg: #04060d;
    --hx-panel: #0d1428;
    --hx-panel-2: #121c38;
    --hx-line: rgba(255,255,255,.1);
    --hx-text: #f2f6ff;
    --hx-muted: #8fa3c7;
    --hx-glow: rgba(10,193,142,.45);
    --hx-radius: 20px;
    --hx-font: 'Outfit', system-ui, sans-serif;
    --hx-display: 'Syne', 'Outfit', sans-serif;
}

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

body.hx-play-body {
    margin:0;
    font-family:var(--hx-font);
    background:var(--hx-bg);
    color:var(--hx-text);
    min-height:100vh;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

a { color:inherit; text-decoration:none; }

/* ── Ambient background ── */
.hx-play-bg {
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
    background:
        radial-gradient(ellipse 90% 60% at 50% -15%, rgba(10,193,142,.28), transparent 55%),
        radial-gradient(ellipse 50% 40% at 110% 30%, rgba(245,200,66,.14), transparent 50%),
        radial-gradient(ellipse 45% 40% at -10% 70%, rgba(72,120,255,.12), transparent 50%),
        linear-gradient(180deg, #080e1c 0%, var(--hx-bg) 100%);
}

.hx-play-grid {
    position:absolute;
    left:-50%;
    right:-50%;
    bottom:-30%;
    height:70%;
    transform:perspective(500px) rotateX(72deg);
    background-image:
        linear-gradient(rgba(10,193,142,.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10,193,142,.18) 1px, transparent 1px);
    background-size:60px 60px;
    mask-image:linear-gradient(to top, black 20%, transparent 85%);
    animation:hx-grid-drift 20s linear infinite;
}

@keyframes hx-grid-drift {
    0% { background-position:0 0, 0 0; }
    100% { background-position:0 60px, 60px 0; }
}

.hx-play-orb {
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    animation:hx-orb 16s ease-in-out infinite;
}
.hx-play-orb--green { width:480px; height:480px; top:5%; right:-8%; background:rgba(10,193,142,.2); }
.hx-play-orb--gold { width:380px; height:380px; bottom:8%; left:-6%; background:rgba(245,200,66,.12); animation-delay:-8s; }

@keyframes hx-orb {
    0%,100% { transform:translate(0,0) scale(1); }
    50% { transform:translate(20px,-24px) scale(1.08); }
}

.hx-play-shell { position:relative; z-index:1; }

/* ── Header ── */
.hx-play-header {
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(4,6,13,.78);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--hx-line);
}

.hx-play-header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:.9rem 0;
}

.hx-play-brand {
    display:inline-flex;
    align-items:center;
    gap:.7rem;
}

.hx-play-brand-mark {
    width:42px;
    height:42px;
    border-radius:13px;
    background:linear-gradient(135deg, var(--hx-bch), var(--hx-bch-dim));
    color:#032218;
    display:grid;
    place-items:center;
    box-shadow:0 0 30px var(--hx-glow);
}

.hx-play-brand-text {
    font-family:var(--hx-display);
    font-size:1.45rem;
    font-weight:800;
    letter-spacing:-.03em;
}
.hx-play-brand-text em {
    font-style:normal;
    color:var(--hx-bch);
}

.hx-play-nav-actions {
    display:flex;
    align-items:center;
    gap:.55rem;
    flex-wrap:wrap;
}

.hx-nav-link {
    color:var(--hx-muted);
    font-size:.9rem;
    font-weight:600;
    padding:.4rem .65rem;
    border-radius:8px;
    transition:color .2s, background .2s;
}
.hx-nav-link:hover { color:var(--hx-text); background:rgba(255,255,255,.05); }

.hx-play-badge {
    padding:.45rem .85rem;
    border-radius:999px;
    background:rgba(245,200,66,.12);
    border:1px solid rgba(245,200,66,.35);
    color:var(--hx-gold);
    font-size:.82rem;
    font-weight:700;
}

.hx-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    padding:.6rem 1.2rem;
    border-radius:12px;
    font-weight:700;
    font-size:.9rem;
    border:0;
    cursor:pointer;
    transition:transform .2s, box-shadow .2s, filter .2s;
}
.hx-btn--primary {
    background:linear-gradient(135deg, var(--hx-bch) 0%, var(--hx-bch-dim) 100%);
    color:#031a12;
    box-shadow:0 8px 32px var(--hx-glow);
}
.hx-btn--primary:hover {
    transform:translateY(-2px);
    filter:brightness(1.08);
    color:#031a12;
}
.hx-btn--ghost {
    background:rgba(255,255,255,.04);
    border:1px solid var(--hx-line);
    color:var(--hx-text);
}
.hx-btn--ghost:hover { border-color:rgba(10,193,142,.4); background:rgba(10,193,142,.08); color:var(--hx-text); }
.hx-btn--lg { padding:.85rem 1.65rem; font-size:1rem; border-radius:14px; }
.hx-btn--xl { padding:1rem 2rem; font-size:1.05rem; border-radius:16px; }

/* ── Hero ── */
.hx-hero-full {
    position:relative;
    padding:3.5rem 0 4rem;
    overflow:hidden;
}

.hx-hero-layout {
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:2.5rem;
    align-items:center;
}

.hx-hero-kicker {
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    padding:.45rem 1rem .45rem .55rem;
    border-radius:999px;
    background:rgba(10,193,142,.1);
    border:1px solid rgba(10,193,142,.32);
    color:var(--hx-bch-bright);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-bottom:1.4rem;
}
.hx-hero-kicker-dot {
    width:28px;
    height:28px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--hx-bch), var(--hx-bch-dim));
    display:grid;
    place-items:center;
    color:#032218;
    font-size:.95rem;
}

.hx-hero-h1 {
    font-family:var(--hx-display);
    font-size:clamp(2.8rem, 6vw, 4.8rem);
    font-weight:800;
    line-height:1.02;
    letter-spacing:-.04em;
    margin:0 0 1.2rem;
}
.hx-hero-h1 .hx-gradient {
    display:block;
    background:linear-gradient(100deg, var(--hx-bch-bright) 0%, var(--hx-bch) 40%, var(--hx-gold) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.hx-hero-sub {
    font-size:1.15rem;
    line-height:1.7;
    color:var(--hx-muted);
    max-width:32rem;
    margin:0 0 1.6rem;
}

.hx-hero-cta {
    display:flex;
    flex-wrap:wrap;
    gap:.8rem;
    margin-bottom:2rem;
}

.hx-hero-trust {
    display:flex;
    flex-wrap:wrap;
    gap:1.25rem;
}
.hx-hero-trust-item {
    display:flex;
    align-items:center;
    gap:.5rem;
    font-size:.86rem;
    color:var(--hx-muted);
    font-weight:600;
}
.hx-hero-trust-item i { color:var(--hx-bch); font-size:1.1rem; }

.hx-demo-pill {
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.6rem 1rem;
    margin-bottom:1.2rem;
    border-radius:12px;
    background:rgba(245,200,66,.1);
    border:1px solid rgba(245,200,66,.35);
    color:var(--hx-gold);
    font-weight:600;
    font-size:.88rem;
}

/* Hero visual stage */
.hx-hero-stage {
    position:relative;
    min-height:420px;
    display:grid;
    place-items:center;
}

.hx-hero-ring {
    position:absolute;
    width:340px;
    height:340px;
    border-radius:50%;
    border:1px solid rgba(10,193,142,.25);
    animation:hx-spin 30s linear infinite;
}
.hx-hero-ring::before {
    content:'';
    position:absolute;
    inset:18px;
    border-radius:50%;
    border:1px dashed rgba(245,200,66,.2);
}
.hx-hero-ring--2 {
    width:420px;
    height:420px;
    border-color:rgba(255,255,255,.06);
    animation-direction:reverse;
    animation-duration:45s;
}

@keyframes hx-spin { to { transform:rotate(360deg); } }

.hx-hero-dice-svg {
    width:min(280px, 80%);
    filter:drop-shadow(0 24px 60px rgba(10,193,142,.35));
    animation:hx-float-dice 5s ease-in-out infinite;
}

@keyframes hx-float-dice {
    0%,100% { transform:translateY(0) rotate(-4deg); }
    50% { transform:translateY(-14px) rotate(4deg); }
}

.hx-balance-float {
    position:absolute;
    right:0;
    bottom:12%;
    width:min(260px, 90%);
    padding:1.35rem 1.4rem;
    border-radius:var(--hx-radius);
    background:linear-gradient(145deg, rgba(18,28,56,.95), rgba(10,16,34,.92));
    border:1px solid var(--hx-line);
    box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter:blur(12px);
}
.hx-balance-float::before {
    content:'';
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(135deg, rgba(10,193,142,.6), transparent 45%, rgba(245,200,66,.4));
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}

.hx-balance-label {
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.14em;
    color:var(--hx-muted);
    margin-bottom:.35rem;
}
.hx-balance-amount {
    font-family:var(--hx-display);
    font-size:2.4rem;
    font-weight:800;
    line-height:1;
    margin-bottom:.25rem;
}
.hx-balance-unit { font-size:.95rem; color:var(--hx-bch); margin-left:.2rem; }
.hx-balance-note { font-size:.8rem; color:var(--hx-muted); line-height:1.45; margin:.75rem 0 0; }

.hx-chip {
    position:absolute;
    width:54px;
    height:54px;
    border-radius:50%;
    border:4px dashed rgba(255,255,255,.25);
    background:radial-gradient(circle at 35% 35%, var(--hx-gold), var(--hx-gold-dim));
    box-shadow:0 8px 24px rgba(245,200,66,.35);
    display:grid;
    place-items:center;
    font-weight:800;
    font-size:.7rem;
    color:#3a2800;
}
.hx-chip--1 { top:8%; left:8%; animation:hx-chip 4s ease-in-out infinite; }
.hx-chip--2 { top:18%; right:4%; width:42px; height:42px; animation:hx-chip 5s ease-in-out infinite -.8s; background:radial-gradient(circle at 35% 35%, var(--hx-bch-bright), var(--hx-bch-dim)); color:#032218; }
.hx-chip--3 { bottom:28%; left:2%; width:36px; height:36px; animation:hx-chip 6s ease-in-out infinite -1.5s; }

@keyframes hx-chip {
    0%,100% { transform:translateY(0) rotate(0deg); }
    50% { transform:translateY(-10px) rotate(12deg); }
}

/* ── Main content area ── */
.hx-main { padding:0 0 2rem; }
.hx-main .container { max-width:1180px; margin:0 auto; padding:0 1.25rem; }

.hx-alert {
    max-width:1180px;
    margin:1rem auto 0;
    padding:.85rem 1.1rem;
    border-radius:12px;
    font-weight:600;
}
.hx-alert--ok { background:rgba(10,193,142,.15); color:#9ef5d6; border:1px solid rgba(10,193,142,.3); }
.hx-alert--err { background:rgba(255,77,109,.12); color:#ffb3c0; border:1px solid rgba(255,77,109,.3); }

/* Promo banner */
.hx-promo {
    margin:0 auto 2.5rem;
    max-width:1180px;
    padding:0 1.25rem;
}
.hx-promo-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    flex-wrap:wrap;
    padding:1.35rem 1.75rem;
    border-radius:var(--hx-radius);
    background:linear-gradient(110deg, rgba(245,200,66,.18) 0%, rgba(10,193,142,.12) 50%, rgba(18,28,56,.9) 100%);
    border:1px solid rgba(245,200,66,.28);
    box-shadow:0 16px 48px rgba(0,0,0,.3);
}
.hx-promo h3 {
    margin:0 0 .25rem;
    font-family:var(--hx-display);
    font-size:1.35rem;
    font-weight:800;
}
.hx-promo p { margin:0; color:var(--hx-muted); font-size:.92rem; }

/* Stats row */
.hx-stats {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1rem;
    margin-bottom:2.5rem;
}
.hx-stat-card {
    padding:1.35rem 1.2rem;
    border-radius:var(--hx-radius);
    background:var(--hx-panel);
    border:1px solid var(--hx-line);
    text-align:center;
    position:relative;
    overflow:hidden;
}
.hx-stat-card::after {
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:3px;
    background:linear-gradient(90deg, var(--hx-bch), var(--hx-gold));
    opacity:.7;
}
.hx-stat-num {
    font-family:var(--hx-display);
    font-size:1.85rem;
    font-weight:800;
    margin-bottom:.2rem;
}
.hx-stat-lbl {
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--hx-muted);
    font-weight:600;
}

/* Live ticker */
.hx-ticker {
    margin-bottom:2.75rem;
    border-radius:var(--hx-radius);
    border:1px solid var(--hx-line);
    background:rgba(8,12,24,.85);
    overflow:hidden;
}
.hx-ticker-bar {
    display:flex;
    align-items:center;
    gap:.6rem;
    padding:.75rem 1.2rem;
    border-bottom:1px solid var(--hx-line);
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--hx-muted);
}
.hx-live-dot {
    width:8px; height:8px;
    border-radius:50%;
    background:var(--hx-bch);
    box-shadow:0 0 12px var(--hx-bch);
    animation:hx-pulse 2s ease infinite;
}
@keyframes hx-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.hx-ticker-scroll {
    display:flex;
    gap:2.5rem;
    padding:.85rem 0;
    animation:hx-scroll 45s linear infinite;
    width:max-content;
}
.hx-ticker-scroll:hover { animation-play-state:paused; }
@keyframes hx-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

.hx-ticker-item {
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    white-space:nowrap;
    font-size:.88rem;
    color:var(--hx-muted);
}
.hx-ticker-item strong { color:var(--hx-text); }
.hx-win { color:var(--hx-bch); font-weight:700; }
.hx-loss { color:var(--hx-red); font-weight:600; }

/* Section headers */
.hx-section { margin-bottom:2.75rem; }
.hx-section-head {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1.5rem;
}
.hx-section-head h2 {
    margin:0;
    font-family:var(--hx-display);
    font-size:clamp(1.6rem, 3vw, 2.1rem);
    font-weight:800;
    letter-spacing:-.03em;
}
.hx-section-head p { margin:.35rem 0 0; color:var(--hx-muted); font-size:.95rem; }

/* Game cards — big visual tiles */
.hx-games {
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:1.25rem;
}

.hx-game-tile {
    position:relative;
    border-radius:var(--hx-radius);
    overflow:hidden;
    min-height:300px;
    border:1px solid var(--hx-line);
    background:var(--hx-panel);
    transition:transform .3s, box-shadow .3s;
}
.hx-game-tile:hover {
    transform:translateY(-8px);
    box-shadow:0 28px 60px rgba(0,0,0,.45);
}

.hx-game-art {
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
}
.hx-game-art--dice {
    background:
        radial-gradient(ellipse 80% 70% at 70% 30%, rgba(10,193,142,.45), transparent 55%),
        radial-gradient(ellipse 60% 50% at 20% 80%, rgba(245,200,66,.2), transparent 50%),
        linear-gradient(160deg, #0a1628 0%, #121c38 50%, #0d1428 100%);
}
.hx-game-art--slots {
    background:
        radial-gradient(ellipse 70% 60% at 60% 40%, rgba(245,200,66,.35), transparent 55%),
        linear-gradient(160deg, #1a1428 0%, #281a38 100%);
}
.hx-game-art--live {
    background:
        radial-gradient(ellipse 70% 60% at 40% 50%, rgba(255,77,109,.25), transparent 55%),
        linear-gradient(160deg, #1a1028 0%, #201838 100%);
}

.hx-game-art-icon {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -55%);
    font-size:5.5rem;
    opacity:.22;
    color:#fff;
}

.hx-game-body {
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:1.5rem;
    background:linear-gradient(to top, rgba(4,6,13,.95) 0%, rgba(4,6,13,.4) 55%, transparent 100%);
}

.hx-game-tag {
    align-self:flex-start;
    padding:.3rem .65rem;
    border-radius:999px;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:.65rem;
}
.hx-game-tag--live { background:rgba(10,193,142,.2); color:var(--hx-bch-bright); border:1px solid rgba(10,193,142,.45); }
.hx-game-tag--soon { background:rgba(255,255,255,.08); color:var(--hx-muted); border:1px solid var(--hx-line); }

.hx-game-body h3 {
    margin:0 0 .45rem;
    font-family:var(--hx-display);
    font-size:1.45rem;
    font-weight:800;
}
.hx-game-body p {
    margin:0 0 1rem;
    font-size:.88rem;
    color:var(--hx-muted);
    line-height:1.5;
    max-width:28rem;
}

.hx-game-tile.locked .hx-game-lock {
    position:absolute;
    inset:0;
    z-index:3;
    background:rgba(4,6,13,.55);
    backdrop-filter:blur(2px);
    display:grid;
    place-items:center;
    font-size:2rem;
    color:rgba(255,255,255,.35);
}

/* Steps */
.hx-steps {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1.25rem;
}
.hx-step-card {
    padding:1.6rem;
    border-radius:var(--hx-radius);
    background:var(--hx-panel);
    border:1px solid var(--hx-line);
    position:relative;
}
.hx-step-num {
    width:40px; height:40px;
    border-radius:12px;
    background:rgba(10,193,142,.12);
    border:1px solid rgba(10,193,142,.35);
    color:var(--hx-bch);
    font-weight:800;
    display:grid;
    place-items:center;
    margin-bottom:1rem;
    font-size:1.1rem;
}
.hx-step-card h4 { margin:0 0 .5rem; font-size:1.05rem; font-weight:700; }
.hx-step-card p { margin:0; font-size:.88rem; color:var(--hx-muted); line-height:1.55; }

/* Trust grid */
.hx-trust {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1.25rem;
}
.hx-trust-card {
    display:flex;
    gap:1rem;
    padding:1.4rem;
    border-radius:var(--hx-radius);
    background:var(--hx-panel);
    border:1px solid var(--hx-line);
}
.hx-trust-icon {
    flex-shrink:0;
    width:48px; height:48px;
    border-radius:14px;
    background:rgba(10,193,142,.1);
    border:1px solid rgba(10,193,142,.28);
    color:var(--hx-bch);
    display:grid;
    place-items:center;
    font-size:1.35rem;
}
.hx-trust-card h5 { margin:0 0 .35rem; font-size:.98rem; font-weight:700; }
.hx-trust-card p { margin:0; font-size:.84rem; color:var(--hx-muted); line-height:1.5; }

/* Footer */
.hx-play-footer {
    margin-top:3rem;
    border-top:1px solid var(--hx-line);
    padding:2rem 0 2.5rem;
    background:rgba(4,6,13,.6);
}
.hx-play-footer-inner {
    max-width:1180px;
    margin:0 auto;
    padding:0 1.25rem;
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:1.5rem;
    align-items:center;
}
.hx-footer-brand { display:flex; flex-direction:column; gap:.2rem; }
.hx-footer-brand strong { font-family:var(--hx-display); font-size:1.1rem; }
.hx-footer-brand span { font-size:.84rem; color:var(--hx-muted); }
.hx-footer-links { display:flex; gap:1.25rem; }
.hx-footer-links a { color:var(--hx-muted); font-size:.88rem; font-weight:600; }
.hx-footer-links a:hover { color:var(--hx-bch); }
.hx-footer-copy { margin:0; font-size:.8rem; color:var(--hx-muted); text-align:right; }

/* Auth pages */
.hx-auth-card {
    padding:2rem;
    border-radius:var(--hx-radius);
    background:var(--hx-panel);
    border:1px solid var(--hx-line);
    box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.hx-auth-head { text-align:center; margin-bottom:1.5rem; }
.hx-auth-icon {
    width:56px; height:56px; margin:0 auto .85rem;
    border-radius:16px;
    background:rgba(10,193,142,.12);
    border:1px solid rgba(10,193,142,.3);
    color:var(--hx-bch);
    display:grid; place-items:center; font-size:1.5rem;
}
.hx-auth-head h1 { font-family:var(--hx-display); font-size:1.65rem; font-weight:800; margin:0 0 .35rem; }
.hx-auth-head p { margin:0; color:var(--hx-muted); font-size:.92rem; }
.hx-auth-form { display:grid; gap:1rem; }
.hx-field { display:grid; gap:.35rem; }
.hx-field span { font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--hx-muted); }
.hx-field input {
    width:100%; padding:.75rem .9rem; border-radius:12px;
    border:1px solid var(--hx-line); background:rgba(0,0,0,.25);
    color:var(--hx-text); font-size:1rem;
}
.hx-field input:focus { outline:none; border-color:rgba(10,193,142,.5); box-shadow:0 0 0 3px rgba(10,193,142,.12); }
.hx-check { display:flex; align-items:center; gap:.5rem; font-size:.88rem; color:var(--hx-muted); }
.hx-auth-foot { text-align:center; margin:1.25rem 0 0; font-size:.9rem; color:var(--hx-muted); }
.hx-auth-foot a { color:var(--hx-bch); font-weight:600; }

/* Dashboard */
.hx-dash-hero { padding:2rem 0 1rem; }
.hx-dash-welcome {
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:1.5rem; flex-wrap:wrap;
}
.hx-dash-eyebrow {
    font-size:.72rem; text-transform:uppercase; letter-spacing:.12em;
    color:var(--hx-bch); font-weight:700; margin-bottom:.35rem;
}
.hx-dash-welcome h1 { font-family:var(--hx-display); font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; margin:0 0 .35rem; }
.hx-dash-sub { margin:0; color:var(--hx-muted); max-width:28rem; }
.hx-dash-balance-card {
    padding:1.25rem 1.5rem; border-radius:var(--hx-radius);
    background:var(--hx-panel); border:1px solid var(--hx-line); min-width:220px;
}
.hx-dash-actions {
    display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:2rem;
}
.hx-dash-action {
    display:flex; flex-direction:column; align-items:center; gap:.5rem;
    padding:1.25rem; border-radius:var(--hx-radius);
    background:var(--hx-panel); border:1px solid var(--hx-line);
    font-weight:700; transition:transform .2s, border-color .2s;
}
.hx-dash-action:hover { transform:translateY(-4px); border-color:rgba(10,193,142,.35); color:var(--hx-text); }
.hx-dash-action i { font-size:1.6rem; color:var(--hx-bch); }
.hx-dash-action--primary { background:linear-gradient(160deg, rgba(10,193,142,.15), var(--hx-panel)); }
.hx-panel {
    border-radius:var(--hx-radius); background:var(--hx-panel);
    border:1px solid var(--hx-line); overflow:hidden;
}
.hx-panel-head { padding:1rem 1.25rem; border-bottom:1px solid var(--hx-line); }
.hx-panel-head h2 { margin:0; font-size:1.05rem; font-weight:700; }
.hx-panel-body { padding:1rem 1.25rem; }
.hx-dash-row {
    display:flex; justify-content:space-between; align-items:center;
    gap:1rem; padding:.65rem 0; border-bottom:1px solid rgba(255,255,255,.05);
}
.hx-dash-row:last-child { border-bottom:0; }
.hx-muted { color:var(--hx-muted); }

/* Legacy aliases used on dice/wallet pages */
.hx-play-card { background:var(--hx-panel); border:1px solid var(--hx-line); border-radius:var(--hx-radius); }
.hx-play-accent { color:var(--hx-bch); }
.btn-play { background:linear-gradient(135deg, var(--hx-bch), var(--hx-bch-dim)); border:0; color:#031a12; font-weight:700; border-radius:12px; }
.btn-play:hover { filter:brightness(1.06); color:#031a12; }

/* Responsive */
@media (max-width:991px) {
    .hx-hero-layout { grid-template-columns:1fr; }
    .hx-hero-stage { min-height:320px; margin-top:1rem; }
    .hx-stats, .hx-games, .hx-steps, .hx-trust { grid-template-columns:1fr 1fr; }
    .hx-games { grid-template-columns:1fr; }
    .hx-play-footer-inner { grid-template-columns:1fr; text-align:center; }
    .hx-footer-links, .hx-footer-copy { justify-content:center; text-align:center; }
}
@media (max-width:575px) {
    .hx-stats, .hx-steps, .hx-trust { grid-template-columns:1fr; }
    .hx-play-nav-actions .hx-nav-link { display:none; }
    .hx-hero-full { padding-top:2rem; }
}