/* ── Reset & Tokens ── */
*{box-sizing:border-box;margin:0;padding:0}
:root{--r:#FF4510;--r2:#C83A0A;--r3:#8B2800;--r4:#5C1800;--r5:#300A00;--r6:#180400;--r7:#0A0100;--gold:#f0c000;--tr:.18s ease;--font-body:'Barlow',sans-serif;--font-display:'Bebas Neue',sans-serif;--font-condensed:'Barlow Condensed',sans-serif}
body{font-family:var(--font-body);background:var(--r6);color:#fff;min-width:0;-webkit-font-smoothing:antialiased}

/* ── Topbar ── */
.topbar{display:flex;align-items:center;gap:12px;background:var(--r7);border-bottom:1px solid #2a0a00;padding:10px 16px;flex-wrap:wrap;position:sticky;top:0;z-index:100}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}
.logo-icon{width:32px;height:32px;background:var(--r);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:18px;color:#fff;clip-path:polygon(0 0,100% 0,100% 75%,75% 100%,0 100%);overflow:hidden}
.logo-wrap{line-height:1}
.logo-name{font-family:var(--font-display);font-size:20px;letter-spacing:2px;color:#fff;display:block}
.logo-sub{font-size:9px;font-weight:700;letter-spacing:3px;color:var(--r);text-transform:uppercase}
.search-wrap{flex:1;min-width:160px;display:flex;align-items:stretch;border:1px solid #3a1000;border-radius:6px;overflow:hidden}
.search-wrap input{flex:1;min-width:0;background:#1a0500;border:none;color:#fff;padding:8px 12px;font-family:var(--font-body);font-size:13px;outline:none}
.search-wrap input::placeholder{color:#7a3820}
.search-btn{flex-shrink:0;background:#1a0500;border:none;border-left:1px solid #3a1000;color:#b05030;padding:0 14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color var(--tr),background var(--tr)}
.search-btn:hover{background:#2a0800;color:#ff6030}
.topbar-btns{display:flex;gap:8px;flex-shrink:0;align-items:center}
.btn-si{background:transparent;border:1px solid #4a1500;color:#ff8060;padding:7px 14px;border-radius:6px;font-size:12px;font-weight:600;font-family:var(--font-body);cursor:pointer;transition:background var(--tr),border-color var(--tr)}
.btn-si:hover{background:#2a0800;border-color:var(--r)}
.btn-su{background:var(--r);border:none;color:#fff;padding:7px 14px;border-radius:6px;font-size:12px;font-weight:700;font-family:var(--font-body);cursor:pointer;transition:background var(--tr)}
.btn-su:hover{background:var(--r2)}

/* ── User chip ── */
.user-chip{display:none;align-items:center;gap:8px;cursor:pointer}
.user-chip.visible{display:flex}
.user-avatar{width:30px;height:30px;border-radius:50%;background:var(--r3);border:2px solid var(--r);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;text-transform:uppercase;flex-shrink:0;overflow:hidden}
.user-avatar img{width:100%;height:100%;object-fit:cover}
.user-info{line-height:1.2}
.user-name{font-size:12px;font-weight:700;color:#fff}
.user-uid{font-size:9px;color:#7a3820;font-weight:600;letter-spacing:.5px}
.btn-logout{background:transparent;border:1px solid #3a1000;color:#7a3820;padding:5px 10px;border-radius:5px;font-size:11px;font-weight:600;font-family:var(--font-body);cursor:pointer;transition:color var(--tr),border-color var(--tr)}
.btn-logout:hover{color:#ff8060;border-color:var(--r)}

/* ── Coin chip ── */
.coin-chip{display:none;align-items:center;gap:5px;background:#1a1000;border:1px solid #5a4000;border-radius:20px;padding:4px 10px 4px 6px;cursor:pointer;transition:border-color var(--tr),background var(--tr)}
.coin-chip.visible{display:flex}
.coin-chip:hover{background:#2a1a00;border-color:#c8a000}
.coin-icon{font-size:14px;line-height:1;display:flex;align-items:center}
.coin-bal{font-family:var(--font-display);font-size:14px;color:var(--gold);letter-spacing:1px}
.coin-label{font-size:9px;color:#a08000;font-weight:700;letter-spacing:1px;text-transform:uppercase}

/* ── Sidebar ── */
.page{display:flex;align-items:flex-start}
.sidebar{width:52px;flex-shrink:0;background:var(--r7);border-right:1px solid #2a0a00;padding:0;align-self:stretch;min-height:calc(100vh - 53px);overflow:visible;transition:width .35s cubic-bezier(.4,0,.2,1);position:sticky;top:53px;z-index:10;will-change:width;scrollbar-width:thin;scrollbar-color:var(--r3) transparent}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:var(--r3);border-radius:4px}
.sidebar::-webkit-scrollbar-thumb:hover{background:var(--r)}
.sidebar:hover{width:200px}
.slabel{font-size:10px;font-weight:700;letter-spacing:2px;color:#5a2010;text-transform:uppercase;padding:8px 14px 4px;white-space:nowrap;overflow:hidden;opacity:0;transition:opacity .35s cubic-bezier(.4,0,.2,1)}
.sidebar:hover .slabel{opacity:1}
.sitem{display:flex;align-items:center;gap:10px;padding:8px 14px;font-size:12px;font-weight:500;color:#b05030;text-decoration:none;cursor:pointer;white-space:nowrap;overflow:hidden;transition:background var(--tr),color var(--tr)}
.sitem:hover,.sitem.on{background:var(--r4);color:#fff}
.sitem.on{border-left:3px solid var(--r);padding-left:11px}
.sitem.cat-on{background:var(--r3);color:#fff;border-left:3px solid var(--r);padding-left:11px}
.sitem i{font-size:18px;flex-shrink:0;min-width:20px;text-align:center}
.sitem-label{opacity:0;transition:opacity .35s cubic-bezier(.4,0,.2,1);white-space:nowrap}
.sidebar:hover .sitem-label{opacity:1}
.stag{margin-left:auto;background:var(--r3);color:#ff8060;font-size:9px;font-weight:700;padding:2px 5px;border-radius:3px;letter-spacing:1px;opacity:0;transition:opacity .35s cubic-bezier(.4,0,.2,1);flex-shrink:0}
.sidebar:hover .stag{opacity:1}
.sdiv{border:none;border-top:1px solid #2a0a00;margin:6px 10px}
.main{flex:1;min-width:0;overflow:hidden;transition:margin .35s cubic-bezier(.4,0,.2,1);will-change:contents}

/* Applied by ResizeObserver in app.js while the sidebar is animating.
   Smooths grid column count changes, section headings, and card widths
   so nothing appears to snap or flicker during the sidebar expand/collapse. */
.main.resizing,
.main.resizing *{
  transition-duration:.35s !important;
  transition-timing-function:cubic-bezier(.4,0,.2,1) !important;
}
.main.resizing .ggrid,
.main.resizing .frow,
.main.resizing .scrow,
.main.resizing .sh,
.main.resizing .gc,
.main.resizing .fc,
.main.resizing .hcard,
.main.resizing .hero{
  transition:all .35s cubic-bezier(.4,0,.2,1) !important;
}

/* ── Auth Modal ── */
.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)}
.modal-backdrop.open{display:flex}
.modal{background:var(--r7);border:1px solid #3a1000;border-radius:12px;width:100%;max-width:400px;padding:28px 28px 24px;position:relative;animation:modalIn .2s ease}
@keyframes modalIn{from{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:none}}
.modal-close{position:absolute;top:14px;right:14px;background:none;border:none;color:#7a3820;cursor:pointer;font-size:20px;line-height:1;transition:color var(--tr)}
.modal-close:hover{color:#ff8060}
.modal-tabs{display:flex;border-bottom:1px solid #2a0a00;margin-bottom:24px}
.mtab{background:none;border:none;font-family:var(--font-body);font-size:13px;font-weight:700;color:#5a2010;padding:0 0 12px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--tr),border-color var(--tr);letter-spacing:.5px;text-transform:uppercase}
.mtab+.mtab{margin-left:20px}
.mtab.active{color:#fff;border-bottom-color:var(--r)}
.mform{display:none}
.mform.active{display:block}
.mfield{margin-bottom:14px}
.mfield label{display:block;font-size:11px;font-weight:700;color:#7a3820;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.mfield input{width:100%;background:#150300;border:1px solid #3a1000;border-radius:6px;color:#fff;padding:9px 12px;font-family:var(--font-body);font-size:13px;outline:none;transition:border-color var(--tr)}
.mfield input:focus{border-color:var(--r)}
.mfield input::placeholder{color:#5a2010}
.msubmit{width:100%;background:var(--r);color:#fff;border:none;border-radius:6px;padding:11px;font-family:var(--font-body);font-size:14px;font-weight:700;cursor:pointer;margin-top:4px;transition:background var(--tr);letter-spacing:.5px}
.msubmit:hover:not(:disabled){background:var(--r2)}
.msubmit:disabled{opacity:.5;cursor:not-allowed}
.merror{font-size:11px;color:#ff6040;margin-top:10px;display:none;text-align:center}
.merror.show{display:block}
.mok{font-size:11px;color:#60d060;margin-top:10px;display:none;text-align:center}
.mok.show{display:block}
.mdivider{display:flex;align-items:center;gap:10px;margin:16px 0}
.mdivider span{font-size:10px;color:#5a2010;text-transform:uppercase;letter-spacing:1px;font-weight:600;flex-shrink:0}
.mdivider::before,.mdivider::after{content:'';flex:1;height:1px;background:#2a0a00}
.btn-google{width:100%;background:#1a0500;border:1px solid #3a1000;color:#e0c0b0;border-radius:6px;padding:10px;font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background var(--tr),border-color var(--tr);text-decoration:none}
.btn-google:hover{background:#2a0800;border-color:var(--r)}
.btn-google svg{width:16px;height:16px;flex-shrink:0}
.forgot-link{display:block;text-align:right;font-size:11px;color:#7a3820;cursor:pointer;margin-top:-8px;margin-bottom:14px;transition:color var(--tr)}
.forgot-link:hover{color:#ff8060}

/* ── Toast ── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--r7);border:1px solid var(--r);border-radius:8px;padding:10px 20px;font-size:12px;font-weight:600;color:#fff;z-index:2000;transition:transform .25s ease,opacity .25s ease;opacity:0;pointer-events:none;letter-spacing:.5px;white-space:nowrap}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ── Spinner ── */
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:inline-block;vertical-align:middle;margin-right:6px}

/* ── Hero ── */
.hero{background:var(--r5);border-bottom:1px solid #2a0a00;padding:24px 20px;transition:padding .35s cubic-bezier(.4,0,.2,1)}
.hero-inner{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.hero-text{flex:1;min-width:200px}
.eyebrow{display:inline-block;background:var(--r);color:#fff;font-size:10px;font-weight:700;letter-spacing:2px;padding:3px 8px;border-radius:4px;text-transform:uppercase;margin-bottom:10px}
.hero-h{font-family:var(--font-display);font-size:44px;line-height:1;letter-spacing:2px;color:#fff;margin-bottom:8px}
.hero-h span{color:var(--r)}
.hero-p{font-size:13px;color:#8a4030;line-height:1.5;margin-bottom:16px;max-width:320px}
.hero-btns{display:flex;gap:8px;flex-wrap:wrap}
.btn-p,.btn-o{display:inline-block;text-decoration:none;text-align:center}
.btn-p{background:var(--r);color:#fff;border:none;padding:9px 20px;border-radius:6px;font-size:13px;font-weight:700;font-family:var(--font-body);cursor:pointer;transition:background var(--tr)}
.btn-p:hover{background:var(--r2)}
.btn-o{background:transparent;color:#ff8060;border:1px solid #4a1500;padding:9px 20px;border-radius:6px;font-size:13px;font-weight:600;font-family:var(--font-body);cursor:pointer;transition:background var(--tr),border-color var(--tr)}
.btn-o:hover{background:#2a0800;border-color:var(--r)}
.hero-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:280px;flex-shrink:0}
.hcard{background:var(--r4);border-radius:8px;overflow:hidden;border:1px solid #3a1000;cursor:pointer;transition:border-color var(--tr)}
.hcard:hover{border-color:var(--r)}
.hcard.big{grid-column:span 2}
/* Layout 1: single card fills entire area */
.hero-cards.layout-1{grid-template-columns:1fr;grid-template-rows:1fr}
.hero-cards.layout-1 .hcard{grid-column:span 1}
.hero-cards.layout-1 .hcard .hthumb,.hero-cards.layout-1 .hcard .hthumb-wrap{height:152px;font-size:56px}
/* Layout 2: two cards side by side, equal halves */
.hero-cards.layout-2{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.hero-cards.layout-2 .hcard{grid-column:span 1}
.hero-cards.layout-2 .hcard .hthumb,.hero-cards.layout-2 .hcard .hthumb-wrap{height:152px;font-size:44px}
/* Layout 4: four equal quadrants */
.hero-cards.layout-4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.hero-cards.layout-4 .hcard{grid-column:span 1}
.hero-cards.layout-4 .hcard .hthumb,.hero-cards.layout-4 .hcard .hthumb-wrap{height:68px;font-size:28px}
.hthumb{width:100%;display:flex;align-items:center;justify-content:center}
.hcard.big .hthumb{height:76px;font-size:44px}
.hcard:not(.big) .hthumb{height:68px;font-size:28px}
.hc1{background:#3a1000}.hc2{background:#2a0800}.hc3{background:#300800}
.hinfo{padding:6px 8px}
.hname{font-size:11px;font-weight:700;color:#fff}
.hgen{font-size:10px;color:#7a3820}

/* ── Content ── */
.content{padding:18px 20px}
.sbar{background:var(--r5);border:1px solid #2a0800;border-radius:8px;padding:12px 16px;display:flex;align-items:center;justify-content:space-around;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.snum{font-family:var(--font-display);font-size:26px;color:var(--r);text-align:center}
.slbl2{font-size:10px;font-weight:700;color:#7a3820;text-transform:uppercase;letter-spacing:1px;text-align:center}
.sdivv{width:1px;height:32px;background:#2a0800}
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.st2{font-family:var(--font-condensed);font-size:18px;font-weight:700;letter-spacing:1px;color:#fff;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.st2 i{color:var(--r);font-size:18px}
.sa{font-size:11px;font-weight:600;color:var(--r);text-decoration:none;letter-spacing:1px;text-transform:uppercase;display:flex;align-items:center;gap:3px}
/* ── Category bar ── */
.cats-wrap{position:relative;margin-bottom:22px}
.cats{display:flex;flex-wrap:nowrap;gap:7px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px;scroll-behavior:smooth}
.cats::-webkit-scrollbar{display:none}
.cpill{display:flex;align-items:center;gap:5px;background:var(--r5);border:1px solid #2a0800;color:#b05030;padding:6px 12px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;text-transform:uppercase;letter-spacing:.5px;transition:background var(--tr),color var(--tr),border-color var(--tr);white-space:nowrap;flex-shrink:0}
.cpill:hover{background:var(--r3);color:#fff;border-color:var(--r3)}
.cpill.on{background:var(--r);color:#fff;border-color:var(--r)}
/* Fade overlays */
.cats-fade-left,.cats-fade-right{position:absolute;top:0;bottom:6px;width:64px;pointer-events:none;opacity:0;transition:opacity .25s ease;z-index:2}
.cats-fade-left{left:0;background:linear-gradient(to right,var(--r6) 0%,transparent 100%)}
.cats-fade-right{right:0;background:linear-gradient(to left,var(--r6) 0%,transparent 100%)}
.cats-wrap.can-scroll-left .cats-fade-left{opacity:1}
.cats-wrap.can-scroll-right .cats-fade-right{opacity:1}
/* Chevron arrows */
.cats-chevron{position:absolute;top:50%;transform:translateY(-60%);width:24px;height:24px;background:var(--r5);border:1px solid #3a1000;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:#ff8060;opacity:0;pointer-events:none;transition:opacity .25s ease,background var(--tr);z-index:3;line-height:1;padding-bottom:1px}
.cats-chevron:hover{background:var(--r3);color:#fff}
.cats-chevron-left{left:4px}
.cats-chevron-right{right:4px}
.cats-wrap.can-scroll-left .cats-chevron-left{opacity:1;pointer-events:auto}
.cats-wrap.can-scroll-right .cats-chevron-right{opacity:1;pointer-events:auto}
.cpill:hover{background:var(--r3);color:#fff;border-color:var(--r3)}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:26px;transition:grid-template-columns .35s cubic-bezier(.4,0,.2,1)}
.gc{background:var(--r5);border-radius:8px;overflow:hidden;border:1px solid #2a0800;cursor:pointer;transition:border-color var(--tr),width .35s cubic-bezier(.4,0,.2,1)}
.gc:hover{border-color:var(--r)}
.gthumb{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;font-size:28px}
.g1{background:#3a1000}.g2{background:#2a0800}.g3{background:#400000}.g4{background:#1a0400}.g5{background:#500800}.g6{background:#200400}.g7{background:#380a00}.g8{background:#2c0600}
.gi2{padding:7px 9px 9px}
.gn{font-size:12px;font-weight:600;color:#fff;margin-bottom:2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.gm{display:flex;align-items:center;justify-content:space-between}
.gg{font-size:10px;color:#7a3820}
.badge{font-size:9px;font-weight:700;padding:2px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:.5px}
.bh{background:var(--r);color:#fff}.bn{background:var(--r3);color:#ff9060}.bt{background:#200a00;color:#ff6030;border:1px solid #4a1000}
.frow{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:26px;transition:grid-template-columns .35s cubic-bezier(.4,0,.2,1)}
.fc{background:var(--r5);border-radius:10px;overflow:hidden;border:1px solid #2a0800;cursor:pointer;display:flex;flex-direction:column;transition:border-color var(--tr),transform var(--tr)}
.fc:hover{border-color:var(--r);transform:translateY(-2px)}
/* 3:4 banner area */
.fc-banner{width:100%;aspect-ratio:3/4;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ft1 .fc-banner{background:#4a1200}.ft2 .fc-banner{background:#2a0600}.ft3 .fc-banner{background:#380a00}.ft4 .fc-banner{background:#220600}
.fc-banner-img{width:100%;height:100%;object-fit:cover;display:block}
.fc-banner-fit{object-fit:contain;padding:12px}
.fc-banner-emoji{font-size:56px;line-height:1}
.finfo{padding:12px;flex:1}
.fname{font-size:14px;font-weight:700;color:#fff;margin-bottom:3px}
.fdesc{font-size:11px;color:#7a3820;line-height:1.4;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bplay{background:var(--r);color:#fff;border:none;padding:5px 12px;border-radius:5px;font-size:11px;font-weight:700;font-family:var(--font-body);cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:background var(--tr)}
.bplay:hover{background:var(--r2)}
.scrow{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:26px;scrollbar-width:none}
.scrow::-webkit-scrollbar{display:none}
.sc{flex-shrink:0;width:120px;background:var(--r5);border-radius:8px;overflow:hidden;border:1px solid #2a0800;cursor:pointer;transition:border-color var(--tr)}
.sc:hover{border-color:var(--r)}
.sct{width:120px;height:90px;display:flex;align-items:center;justify-content:center;font-size:24px}
.st1b{background:#280600}.st2b{background:#3c0a00}.st3b{background:#200800}.st4b{background:#340a00}.st5b{background:#400e00}.st6b{background:#1a0400}
.sn{padding:6px 8px;font-size:11px;font-weight:600;color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* ── Footer ── */
.foot{background:var(--r7);border-top:1px solid #2a0a00;padding:18px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.flinks{display:flex;flex-wrap:wrap;gap:14px}
.fl{font-size:11px;color:#6a2a10;text-decoration:none;font-weight:500;transition:color var(--tr)}
.fl:hover{color:#ff8060}
.fcopy{font-size:11px;color:#4a1a08}

/* ── Wallet overlay ── */
.overlay-page{display:none;position:fixed;inset:0;background:var(--r6);z-index:200;overflow-y:auto}
.overlay-page.open{display:block}
.op-header{background:var(--r7);border-bottom:1px solid #2a0a00;padding:14px 20px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:10}
.op-back{background:none;border:1px solid #3a1000;color:#b05030;width:32px;height:32px;border-radius:6px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color var(--tr),border-color var(--tr)}
.op-back:hover{color:#fff;border-color:var(--r)}
.op-title{font-family:var(--font-display);font-size:22px;letter-spacing:2px;color:#fff}
.op-body{padding:20px;max-width:800px;margin:0 auto}
.wallet-hero{background:var(--r5);border:1px solid #2a0800;border-radius:12px;padding:24px;display:flex;align-items:center;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.wallet-coin-big{font-size:48px;line-height:1}
.wallet-bal-wrap{flex:1}
.wallet-bal-label{font-size:11px;font-weight:700;color:#7a3820;text-transform:uppercase;letter-spacing:2px;margin-bottom:4px}
.wallet-bal-num{font-family:var(--font-display);font-size:52px;color:var(--gold);line-height:1;letter-spacing:2px}
.wallet-bal-sub{font-size:12px;color:#7a3820;margin-top:2px}
.wallet-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.btn-wallet{background:var(--r5);border:1px solid #3a1000;color:#ff8060;padding:8px 16px;border-radius:6px;font-size:12px;font-weight:700;font-family:var(--font-body);cursor:pointer;display:flex;align-items:center;gap:6px;transition:background var(--tr),border-color var(--tr)}
.btn-wallet:hover{background:var(--r4);border-color:var(--r)}
.btn-wallet.primary{background:var(--r);border-color:var(--r);color:#fff}
.btn-wallet.primary:hover{background:var(--r2)}
.txn-list{background:var(--r5);border:1px solid #2a0800;border-radius:10px;overflow:hidden}
.txn-head{padding:12px 16px;border-bottom:1px solid #2a0800;font-size:11px;font-weight:700;color:#7a3820;text-transform:uppercase;letter-spacing:1px}
.txn-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #1a0400}
.txn-item:last-child{border-bottom:none}
.txn-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.txn-award{background:#1a3000}.txn-topup{background:#1a2a00}.txn-spend{background:#3a0a00}.txn-transfer_in{background:#001a30}.txn-transfer_out{background:#2a001a}
.txn-info{flex:1;min-width:0}
.txn-note{font-size:12px;font-weight:600;color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.txn-date{font-size:10px;color:#5a2010;margin-top:1px}
.txn-amt{font-family:var(--font-display);font-size:16px;letter-spacing:1px;flex-shrink:0}
.txn-pos{color:#60d000}.txn-neg{color:#ff4040}
.txn-empty{padding:24px;text-align:center;color:#5a2010;font-size:13px}

/* ── Empty state ── */
.games-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:40px 20px;color:#5a2010;font-size:13px;text-align:center}
.games-empty i{font-size:32px;color:#3a1000}

/* ═══════════════════════════════════════════════
   HERO SLIDESHOW
═══════════════════════════════════════════════ */
.hero-slideshow {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #2a0a00;
}

/* Individual slide */
.hero-slide {
  display: none;
  padding: 24px 20px;
  background: var(--r5);
  background-size: cover;
  background-position: center;
  position: relative;
  min-height: 220px;
  box-sizing: border-box;
}
.hero-slide.has-bg-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(10,1,0,var(--ov,.45)) 40%, rgba(10,1,0,calc(var(--ov,.45) * 0.55)) 100%);
  pointer-events: none;
}
.hero-slide.has-bg-image .hero-inner { position: relative; z-index: 1; }
.hero-slide.active { display: block; }

/* ── Transition: Fade ── */
.trans-out-fade { animation: heroFadeOut .5s ease forwards; }
.trans-in-fade  { animation: heroFadeIn  .5s ease forwards; }
@keyframes heroFadeOut { from{opacity:1} to{opacity:0} }
@keyframes heroFadeIn  { from{opacity:0} to{opacity:1} }

/* ── Transition: Slide ── */
.trans-out-slide-left  { animation: heroSlideOutLeft  .55s cubic-bezier(.4,0,.2,1) forwards; }
.trans-out-slide-right { animation: heroSlideOutRight .55s cubic-bezier(.4,0,.2,1) forwards; }
.trans-in-slide-right  { animation: heroSlideInRight  .55s cubic-bezier(.4,0,.2,1) forwards; }
.trans-in-slide-left   { animation: heroSlideInLeft   .55s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes heroSlideOutLeft  { from{transform:translateX(0)}   to{transform:translateX(-100%)} }
@keyframes heroSlideOutRight { from{transform:translateX(0)}   to{transform:translateX(100%)} }
@keyframes heroSlideInRight  { from{transform:translateX(100%)} to{transform:translateX(0)} }
@keyframes heroSlideInLeft   { from{transform:translateX(-100%)} to{transform:translateX(0)} }

/* ── Transition: Zoom-fade ── */
.trans-out-zoom-fade { animation: heroZoomFadeOut .55s ease forwards; }
.trans-in-zoom-fade  { animation: heroZoomFadeIn  .55s ease forwards; }
@keyframes heroZoomFadeOut { from{opacity:1;transform:scale(1)}    to{opacity:0;transform:scale(1.04)} }
@keyframes heroZoomFadeIn  { from{opacity:0;transform:scale(.97)}  to{opacity:1;transform:scale(1)} }

/* ── Transition: Flip ── */
.hero-slideshow { perspective: 1200px; }
.trans-out-flip { animation: heroFlipOut .55s ease forwards; backface-visibility: hidden; }
.trans-in-flip  { animation: heroFlipIn  .55s ease forwards; backface-visibility: hidden; }
@keyframes heroFlipOut { from{transform:rotateY(0deg);opacity:1}    to{transform:rotateY(-90deg);opacity:0} }
@keyframes heroFlipIn  { from{transform:rotateY(90deg);opacity:0}   to{transform:rotateY(0deg);opacity:1} }

/* ── Slide controls ── */
.hero-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0 10px;
  background: var(--r5);
  border-bottom: 1px solid #2a0a00;
}
.hero-arrow {
  background: none;
  border: 1px solid #3a1000;
  color: #8a4030;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, color .15s, background .15s;
}
.hero-arrow:hover { border-color: var(--r); color: var(--r); background: #1a0400; }
.hero-dots { display: flex; gap: 6px; align-items: center; }
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3a1000;
  border: none;
  cursor: pointer;
  transition: background .2s, transform .2s;
  padding: 0;
}
.hero-dot.active { background: var(--r); transform: scale(1.3); }

/* ── Promoted badge on hcard ── */
.hcard { position: relative; }
.hcard-promoted {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #f0a020;
  color: #3a1000;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 3px;
  z-index: 2;
}
.hcard-empty {
  opacity: 0;
  pointer-events: none;
}

/* Thumbnail image inside hcard */
.hthumb-wrap {
  width: 100%;
}
.hcard.big .hthumb-wrap { height: 76px; }
.hcard:not(.big) .hthumb-wrap { height: 68px; }
.hthumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Email verification floating banner ── */
.verify-banner{position:fixed;bottom:20px;right:20px;left:auto;max-width:340px;background:#1a0f00;border:1px solid #c87000;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;z-index:1500;box-shadow:0 8px 24px rgba(0,0,0,.4);transform:translateY(120%);opacity:0;transition:transform .3s ease,opacity .3s ease;pointer-events:none}
.verify-banner.visible{transform:translateY(0);opacity:1;pointer-events:auto}
.vb-icon{font-size:18px;flex-shrink:0}
.vb-text{font-size:12px;color:#f0c000;font-weight:600;flex:1;line-height:1.4}
.vb-btn{flex-shrink:0;background:var(--r);color:#fff;font-size:11px;font-weight:700;padding:6px 12px;border-radius:6px;text-decoration:none;letter-spacing:.5px;transition:background var(--tr)}
.vb-btn:hover{background:var(--r2)}
.vb-close{flex-shrink:0;background:none;border:none;color:#7a5000;cursor:pointer;font-size:12px;padding:2px;line-height:1;transition:color var(--tr)}
.vb-close:hover{color:#f0c000}
/* Restore sidebar padding on desktop only — mobile always stays padding:0 */
@media (min-width:769px){.sidebar{padding:10px 0 !important}}

@media (max-width:480px){.verify-banner{right:12px;left:12px;max-width:none}}

/* ═══════════════════════════════════════════════
   RESPONSIVE / MOBILE
   Breakpoints: 768px (tablet), 600px (large mobile), 480px (small mobile)
═══════════════════════════════════════════════ */

/* ── Shared: hide sidebar, show hamburger ── */
.mob-menu-btn{display:none;background:none;border:none;color:#b05030;cursor:pointer;padding:4px 6px;font-size:22px;line-height:1;flex-shrink:0;transition:color var(--tr)}
.mob-menu-btn:hover{color:#fff}
/* Sidebar close button — hidden on desktop, shown inside mobile drawer */
.sidebar-close-btn{display:none;width:100%;background:none;border:none;color:#ff8060;font-family:var(--font-body);font-size:13px;font-weight:700;padding:14px 16px 10px;text-align:left;cursor:pointer;align-items:center;gap:8px;border-bottom:1px solid #2a0a00;margin-bottom:6px;flex-shrink:0}
.sidebar-close-btn i{font-size:16px}
.sidebar-close-btn:hover{color:#fff}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:199;backdrop-filter:blur(2px)}
.sidebar-overlay.open{display:block}

@media (max-width: 768px) {
  /* ── Topbar ── */
  .topbar{gap:8px;padding:8px 12px;flex-wrap:nowrap}
  .mob-menu-btn{display:flex;align-items:center}
  .logo-sub{display:none}
  .logo-name{font-size:17px;letter-spacing:1px}

  /* Collapse auth buttons to icon-only on tablet */
  .btn-si{padding:6px 10px;font-size:11px}
  .btn-su{padding:6px 10px;font-size:11px}

  /* ── Sidebar → off-canvas drawer ── */
  .sidebar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    height:100vh !important;
    width:260px !important;
    min-width:260px !important;
    max-width:260px !important;
    transform:translateX(-100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1) !important;
    will-change:transform !important;
    pointer-events:none;
    z-index:200;
    overflow-y:auto;
    padding:0 !important;
    min-height:100vh !important;
    flex-shrink:0 !important;
  }
  .sidebar.mob-open{
    transform:translateX(0);
    pointer-events:all;
  }
  .sidebar:hover{
    width:260px !important;
  }
  .sidebar.mob-open .sidebar-close-btn{display:flex}
  /* Labels always visible in drawer */
  .sidebar .slabel{opacity:1}
  .sidebar .sitem-label{opacity:1}
  .sidebar .stag{opacity:1}

  /* ── Main takes full width ── */
  /* Sidebar is position:fixed on mobile so remove it from flex flow */
  .page, .page-wrap{display:block !important}
  .main{width:100% !important;margin-left:0 !important}

  /* ── Hero ── */
  .hero-h{font-size:36px}
  .hero-cards{width:220px}

  /* ── Grids ── */
  .ggrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
}

@media (max-width: 600px) {
  /* ── Topbar: hide sign-in text, keep icon feel ── */
  .topbar{padding:8px 10px;gap:6px}
  .logo-name{font-size:15px}
  .btn-si span,.btn-su span{display:none}

  /* ── Shrink auth buttons further ── */
  .btn-si{padding:6px 9px}
  .btn-su{padding:6px 9px}

  /* ── Hero ── */
  .hero,.hero-slide{padding:16px 14px}
  .hero-h{font-size:30px;letter-spacing:1px}
  .hero-p{font-size:12px;margin-bottom:12px;max-width:none}
  .hero-inner{gap:12px}
  .hero-cards{width:180px}
  .hcard.big .hthumb{height:64px}
  .hcard:not(.big) .hthumb{height:56px;font-size:22px}
  .hcard.big .hthumb-wrap{height:64px}
  .hcard:not(.big) .hthumb-wrap{height:56px}

  /* ── Content ── */
  .content{padding:14px 12px}

  /* ── Game grid ── */
  .ggrid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:7px}

  /* ── Originals grid — 2 columns on mobile ── */
  .frow{grid-template-columns:repeat(2,1fr);gap:10px}

  /* ── Wallet ── */
  .wallet-bal-num{font-size:40px}
  .wallet-coin-big{font-size:36px}

  /* ── Section headings ── */
  .st2{font-size:15px}

  /* ── Toast full width ── */
  .toast{left:12px;right:12px;transform:translateX(0) translateY(80px);white-space:normal;text-align:center}
  .toast.show{transform:translateX(0) translateY(0)}
}

@media (max-width: 480px) {
  /* ── Topbar: hide user info text, keep avatar ── */
  .user-info{display:none}
  .btn-logout{padding:5px 8px;font-size:10px}
  .logo-name{font-size:14px}
  .search-wrap{min-width:0}

  /* ── Hero: stack cards below text ── */
  .hero-inner{flex-direction:column}
  .hero-cards{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .hcard.big{grid-column:span 2}
  .hero-h{font-size:28px}

  /* ── Originals: 1 column on very small ── */
  .frow{grid-template-columns:1fr}

  /* ── Game grid tighter ── */
  .ggrid{grid-template-columns:repeat(2,1fr);gap:6px}

  /* ── Auth modal padding ── */
  .modal{padding:20px 16px 16px}

  /* ── Wallet ── */
  .op-body{padding:14px}
  .wallet-hero{padding:16px;gap:12px}
  .wallet-bal-num{font-size:36px}

  /* ── Section header ── */
  .sh{margin-bottom:8px}
  .st2{font-size:14px}

  /* ── Slideshow controls ── */
  .hero-controls{padding:6px 0 8px}
  .hero-arrow{width:24px;height:24px;font-size:16px}
}

/* Disable hover-expand on touch devices — drawer handles mobile nav */
@media (max-width: 768px) {
  .sidebar:hover{width:260px !important}
  .sidebar:hover .slabel{opacity:1}
  .sidebar:hover .sitem-label{opacity:1}
  .sidebar:hover .stag{opacity:1}
  /* Full width and visible when drawer is open */
  .sidebar.mob-open{width:260px !important}
  .sidebar.mob-open .slabel{opacity:1}
  .sidebar.mob-open .sitem-label{opacity:1}
  .sidebar.mob-open .stag{opacity:1}
}

/* ═══════════════════════════════════════════════
   MOBILE BOTTOM NAV
═══════════════════════════════════════════════ */
.mob-bottom-nav{
  display:none; /* desktop: hidden */
  position:fixed;
  bottom:0;left:0;right:0;
  height:60px;
  background:var(--r7);
  border-top:1px solid #2a0a00;
  z-index:150;
  align-items:center;
  justify-content:space-around;
  padding:0 8px;
  padding-bottom:env(safe-area-inset-bottom,0px); /* iPhone notch */
}
.mbn-btn{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  background:none;
  border:none;
  color:#7a3820;
  cursor:pointer;
  font-family:var(--font-body);
  padding:6px 0;
  transition:color var(--tr);
  position:relative;
}
.mbn-btn:hover,.mbn-btn.active{color:var(--r)}
.mbn-icon-wrap{position:relative;font-size:22px;line-height:1}
.mbn-label{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}

/* Centre profile button — larger, accent ring */
.mbn-centre{flex:1.2}
.mbn-avatar{
  width:40px;height:40px;
  border-radius:50%;
  background:var(--r4);
  border:2px solid var(--r);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:#fff;font-weight:700;
  text-transform:uppercase;
  overflow:hidden;
  transition:border-color var(--tr),background var(--tr);
}
.mbn-avatar img{width:100%;height:100%;object-fit:cover}
.mbn-btn.active .mbn-avatar{background:var(--r);border-color:#fff}

/* Badge (notifications / coins) */
.mbn-badge{
  position:absolute;
  top:-4px;right:-6px;
  min-width:16px;height:16px;
  background:var(--r);
  color:#fff;
  font-size:9px;font-weight:700;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  padding:0 3px;
  border:1.5px solid var(--r7);
}
.mbn-coin-badge{
  top:-2px;right:-4px;
  background:#c8a000;
  color:#3a2000;
}

/* Settings popover */
.mbn-popover{
  position:fixed;
  bottom:68px;
  right:16px;
  background:var(--r5);
  border:1px solid #3a1000;
  border-radius:10px;
  padding:6px;
  min-width:160px;
  z-index:160;
  box-shadow:0 4px 24px rgba(0,0,0,.5);
  opacity:0;
  transform:translateY(8px) scale(.97);
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.mbn-popover.open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.mbn-pop-arrow{
  position:absolute;
  bottom:-6px;right:18px;
  width:10px;height:10px;
  background:var(--r5);
  border-right:1px solid #3a1000;
  border-bottom:1px solid #3a1000;
  transform:rotate(45deg);
}
.mbn-pop-item{
  width:100%;
  display:flex;align-items:center;gap:8px;
  background:none;border:none;
  color:#ff8060;
  font-family:var(--font-body);
  font-size:13px;font-weight:600;
  padding:10px 12px;
  border-radius:7px;
  cursor:pointer;
  transition:background var(--tr),color var(--tr);
  text-align:left;
}
.mbn-pop-item:hover{background:var(--r3);color:#fff}

/* Backdrop to close popover */
.mbn-backdrop{
  display:none;
  position:fixed;inset:0;
  z-index:155;
}
.mbn-backdrop.open{display:block}

@media (max-width:768px){
  .mob-bottom-nav{display:flex}

  /* Hide desktop-only topnav items on mobile */
  .topbar-btns{display:none !important}
  .user-chip{display:none !important}
  .btn-logout{display:none !important}

  /* Coin chip stays but compact */
  .coin-chip{padding:4px 8px 4px 5px;font-size:11px}
  .coin-label{display:none}

  /* Add bottom padding so content doesn't hide behind nav */
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(70px + env(safe-area-inset-bottom,0px))}
}