/* ===== DanaGame clone — global theme (green primary) ===== */
:root{
    --c-primary:#22c55e;        /* tailwind green-500 */
    --c-primary-d:#16a34a;
    --c-primary-l:#4ade80;
    --c-dark:#0f1722;
    --c-dark-2:#162033;
    --c-text:#1f2937;
    --c-muted:#6b7280;
    --c-bg:#f7faf9;
    --c-card:#ffffff;
    --c-border:#e5e7eb;
    --radius:10px;
    --shadow:0 6px 24px rgba(0,0,0,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:'Roboto Condensed',system-ui,Arial,sans-serif;color:var(--c-text);background:var(--c-bg);line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 18px}

/* ---- Header ---- */
.site-header{
    position:sticky;top:0;z-index:50;
    background:linear-gradient(90deg,var(--c-dark) 0%,var(--c-dark-2) 100%);
    color:#fff;border-bottom:3px solid var(--c-primary);
}
.header-inner{display:flex;align-items:center;gap:28px;padding:8px 18px}
.logo{display:flex;align-items:center;gap:10px;font-size:22px;letter-spacing:.5px;color:#fff}
.logo img{height:64px;width:auto;object-fit:contain}
.logo strong{color:var(--c-primary)}
.main-nav{display:flex;gap:6px;flex:1;justify-content:center}
.main-nav a{
    padding:9px 16px;border-radius:var(--radius);font-weight:600;font-size:15px;
    color:#e5e7eb;transition:.2s
}
.main-nav a:hover{background:rgba(34,197,94,.15);color:#fff}
.main-nav a.active{background:var(--c-primary);color:#0f1722}
.header-actions{display:flex;align-items:center;gap:10px}
.hi{font-size:14px;color:#cbd5e1}
.nav-toggle{display:none;background:transparent;color:#fff;font-size:24px;border:0;cursor:pointer}

/* ---- Button ---- */
.btn{display:inline-block;padding:9px 18px;border-radius:var(--radius);font-weight:700;font-size:14px;cursor:pointer;border:0;transition:.2s;text-align:center}
.btn-primary{background:var(--c-primary);color:#0f1722}
.btn-primary:hover{background:var(--c-primary-l)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-block{display:block;width:100%}
.btn-lg{padding:14px 26px;font-size:16px}

/* ---- Hero banner ---- */
.hero{
    position:relative;color:#fff;overflow:hidden;
    background:
        radial-gradient(1200px 500px at 20% 0%,rgba(34,197,94,.35),transparent 60%),
        linear-gradient(135deg,#0f1722 0%,#1b2a44 50%,#0a3a1f 100%);
    padding:70px 0 90px;
}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{font-size:46px;font-weight:900;line-height:1.1;margin-bottom:16px}
.hero h1 em{color:var(--c-primary);font-style:normal}
.hero p{font-size:17px;opacity:.85;margin-bottom:26px;max-width:520px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-art{
    aspect-ratio:16/10;border-radius:16px;background:url('https://picsum.photos/seed/banner/900/560') center/cover;
    box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.05)
}

/* ---- Section ---- */
.section{padding:60px 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px;gap:20px;flex-wrap:wrap}
.section-head h2{font-size:30px;font-weight:900}
.section-head h2 em{color:var(--c-primary);font-style:normal}
.section-head p{color:var(--c-muted);margin-top:4px}

/* ---- Game card grid ---- */
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.game-card{
    background:var(--c-card);border-radius:var(--radius);overflow:hidden;
    box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s;
    display:flex;flex-direction:column
}
.game-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.14)}
.game-card .thumb{aspect-ratio:16/9;background-size:cover;background-position:center;position:relative}
.game-card .badge{
    position:absolute;top:10px;left:10px;background:var(--c-primary);color:#0f1722;
    padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700
}
.game-card .body{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column}
.game-card h3{font-size:18px;margin-bottom:6px}
.game-card .desc{font-size:14px;color:var(--c-muted);flex:1;margin-bottom:10px}
.game-card .meta-line{font-size:13px;color:#374151;margin-bottom:4px}
.game-card .meta-line strong{color:#0f1722}
.game-card .foot{display:flex;justify-content:space-between;align-items:center}
.game-card .players{font-size:13px;color:var(--c-primary-d);font-weight:700}
.game-card .play{
    background:var(--c-primary);color:#0f1722;padding:6px 14px;border-radius:6px;
    font-weight:700;font-size:13px
}
.game-card .play:hover{background:var(--c-primary-l)}

/* ---- News card ---- */
.news-card{
    background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
    display:flex;flex-direction:column
}
.news-card .thumb{aspect-ratio:16/9;background-size:cover;background-position:center}
.news-card .body{padding:14px 16px}
.news-card .date{font-size:12px;color:var(--c-primary-d);font-weight:700;margin-bottom:4px}
.news-card h3{font-size:17px;margin-bottom:8px;line-height:1.35}
.news-card p{font-size:14px;color:var(--c-muted)}

/* ---- Feature strip ---- */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:-40px;position:relative;z-index:5}
.feature{
    background:#fff;border-radius:var(--radius);padding:20px;text-align:center;
    box-shadow:var(--shadow);border-top:3px solid var(--c-primary)
}
.feature .icon{font-size:30px;margin-bottom:8px}
.feature h4{font-size:16px;margin-bottom:4px}
.feature p{font-size:13px;color:var(--c-muted)}

/* ---- Forms ---- */
.auth-wrap{max-width:440px;margin:60px auto;background:#fff;padding:34px 30px;border-radius:14px;box-shadow:var(--shadow)}
.auth-wrap h1{font-size:26px;text-align:center;margin-bottom:6px}
.auth-wrap .sub{text-align:center;color:var(--c-muted);margin-bottom:24px;font-size:14px}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.form-group input,.form-group select,.form-group textarea{
    width:100%;padding:11px 14px;border:1px solid var(--c-border);border-radius:8px;font:inherit;
    transition:border .15s,box-shadow .15s;background:#fff
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
    outline:0;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(34,197,94,.15)
}
.form-row{display:flex;gap:12px}
.form-row .form-group{flex:1}
.alert{padding:12px 14px;border-radius:8px;margin-bottom:16px;font-size:14px}
.alert-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.alert-success{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.alert-info{background:#eff6ff;color:#1e3a8a;border:1px solid #bfdbfe}
.auth-foot{text-align:center;margin-top:14px;font-size:14px;color:var(--c-muted)}
.auth-foot a{color:var(--c-primary-d);font-weight:700}

/* ---- Recharge ---- */
.card-list{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card-opt{
    background:#fff;border:2px solid var(--c-border);border-radius:10px;padding:18px;text-align:center;
    cursor:pointer;transition:.15s;font-weight:700
}
.card-opt:hover{border-color:var(--c-primary)}
.card-opt.active{border-color:var(--c-primary);background:#f0fdf4}
.card-opt .amt{font-size:20px;color:var(--c-primary-d)}
.card-opt .unit{font-size:12px;color:var(--c-muted);font-weight:500}

/* ---- Page generic ---- */
.page-head{background:linear-gradient(90deg,var(--c-dark),var(--c-dark-2));color:#fff;padding:46px 0;margin-bottom:40px}
.page-head h1{font-size:34px;margin-bottom:6px}
.page-head .crumb{font-size:14px;opacity:.7}
.page-head .crumb a{color:var(--c-primary-l)}

/* ---- Footer ---- */
.site-footer{background:#0a0f17;color:#cbd5e1;padding:54px 0 26px;margin-top:80px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
.footer-grid h4{color:#fff;font-size:15px;margin-bottom:14px;text-transform:uppercase;letter-spacing:1px}
.footer-grid p,.footer-grid li{font-size:14px;margin-bottom:6px}
.footer-grid a:hover{color:var(--c-primary-l)}
.footer-grid ul{list-style:none}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:22px;color:#fff}
.footer-logo img{height:56px;width:auto;object-fit:contain}
.footer-logo strong{color:var(--c-primary)}
.socials{display:flex;gap:10px}
.socials a{
    width:38px;height:38px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;background:#1f2937;font-weight:700;font-size:12px;color:#fff
}
.socials a:hover{background:var(--c-primary);color:#0f1722}

/* ---- Responsive ---- */
@media (max-width:960px){
    .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
    .features{grid-template-columns:repeat(2,1fr)}
    .hero-grid{grid-template-columns:1fr}
    .hero h1{font-size:34px}
    .footer-grid{grid-template-columns:1fr 1fr}
    .card-list{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
    .main-nav,.header-actions{display:none}
    .nav-toggle{display:block}
    .main-nav.open{
        display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
        background:var(--c-dark-2);padding:14px
    }
    .grid-3,.grid-4{grid-template-columns:1fr}
    .features{grid-template-columns:1fr 1fr}
    .card-list{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:1fr}
}