/* AfriBconnect — style.css */
:root{
  --bg:#0D0A07;--bg2:#111009;--bg3:#1a1614;--bg4:#231f1a;
  --gold:#D4AF37;--orange:#E85D26;
  --gold-dim:rgba(212,175,55,.13);--orange-dim:rgba(232,93,38,.13);
  --border:rgba(255,255,255,.09);--border-gold:rgba(212,175,55,.22);
  --white:  #fff;--w60:rgba(255,255,255,.6);--w30:rgba(255,255,255,.3);--w10:rgba(255,255,255,.1);
  --r:12px;--rl:20px;
  --font-d:'Cormorant Garamond',Georgia,serif;
  --font-b:'DM Sans',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--white);font-family:var(--font-b);font-size:16px;line-height:1.6;overflow-x:hidden}
input,select,textarea,button{font-family:var(--font-b);font-size:15px}
.container{max-width:1160px;margin:0 auto;padding:0 24px}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,box-shadow .3s}
.nav.scrolled{background:rgba(13,10,7,.93);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--border)}
.nav-inner{max-width:1160px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;gap:40px}
.logo{font-family:var(--font-b);font-size:15px;font-weight:700;letter-spacing:2px;color:var(--gold);text-decoration:none}
.logo-accent{color:var(--orange)}
.nav-links{list-style:none;display:flex;gap:32px;margin-left:auto;align-items:center}
.nav-links a{color:var(--w60);text-decoration:none;font-size:14px;transition:color .2s}
.nav-links a:hover{color:var(--white)}
.btn-nav{background:var(--gold);color:var(--bg)!important;font-weight:600!important;padding:8px 20px;border-radius:8px;font-size:13px!important;transition:background .2s,transform .15s!important}
.btn-nav:hover{background:#c9a22a!important;transform:translateY(-1px)}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.hamburger span{display:block;width:22px;height:2px;background:var(--white);border-radius:2px;transition:all .3s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;flex-direction:column;background:rgba(13,10,7,.97);border-top:1px solid var(--border);padding:12px 24px 20px}
.mobile-menu.open{display:flex}
.mobile-menu a{color:var(--w60);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--border);font-size:15px}
.btn-mobile{background:var(--gold)!important;color:var(--bg)!important;font-weight:700!important;padding:12px!important;border-radius:10px!important;text-align:center;border-bottom:none!important;margin-top:8px}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:120px 24px 80px;max-width:1160px;margin:0 auto;gap:60px}
.hero-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.hero-orb{position:absolute;border-radius:50%;filter:blur(100px)}
.hero-orb-1{width:500px;height:500px;background:radial-gradient(circle,rgba(212,175,55,.18) 0%,transparent 70%);top:-100px;left:-100px;animation:pulse 8s ease-in-out infinite alternate}
.hero-orb-2{width:400px;height:400px;background:radial-gradient(circle,rgba(232,93,38,.14) 0%,transparent 70%);bottom:0;right:0;animation:pulse 10s ease-in-out infinite alternate-reverse}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.15);opacity:1}}
.grain{position:absolute;inset:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px}
.hero-content{position:relative;z-index:1;max-width:560px;flex:1}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--gold-dim);border:1px solid var(--border-gold);border-radius:100px;padding:6px 16px;font-size:12px;color:var(--gold);letter-spacing:.5px;margin-bottom:24px}
.badge-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e;animation:blink 2s ease-in-out infinite;flex-shrink:0}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.hero-title{font-family:var(--font-d);font-size:clamp(44px,7vw,78px);font-weight:700;line-height:1.06;margin-bottom:20px}
.hero-title em{font-style:italic;color:var(--gold)}
.hero-sub{font-size:17px;color:var(--w60);max-width:440px;margin-bottom:32px;line-height:1.7}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px}
.btn-primary{background:var(--gold);color:var(--bg);font-weight:700;padding:14px 28px;border-radius:10px;text-decoration:none;font-size:15px;border:none;cursor:pointer;transition:background .2s,transform .15s;display:inline-block}
.btn-primary:hover{background:#c9a22a;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--w60);border:1px solid var(--border);padding:14px 28px;border-radius:10px;text-decoration:none;font-size:15px;cursor:pointer;transition:color .2s,border-color .2s,transform .15s;display:inline-block}
.btn-ghost:hover{color:var(--white);border-color:var(--w30);transform:translateY(-2px)}
.full-width{width:100%;text-align:center}
.hero-stats{display:flex;align-items:center;gap:24px}
.stat{display:flex;flex-direction:column}
.stat-num{font-size:28px;font-weight:700;color:var(--gold);line-height:1}
.stat-label{font-size:12px;color:var(--w60);margin-top:2px}
.stat-divider{width:1px;height:36px;background:var(--border)}
.hero-phone{position:relative;z-index:1;flex-shrink:0}
.phone-preview{background:var(--bg3);border:1px solid var(--border-gold);border-radius:var(--rl);padding:28px 24px;cursor:pointer;transition:transform .3s,box-shadow .3s;width:280px}
.phone-preview:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(212,175,55,.15)}
.pp-brand{font-size:13px;color:var(--gold);font-weight:700;letter-spacing:1px;margin-bottom:20px}
.pp-brand span{color:var(--orange)}
.pp-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:20px}
.pp-tile{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:22px;transition:background .2s}
.pp-tile:hover{background:var(--bg4)}
.pp-tile span{font-size:11px;color:var(--w60)}
.pp-launch{text-align:center;font-size:12px;color:var(--gold);border:1px solid var(--border-gold);border-radius:8px;padding:8px}

/* Animations */
.animate-fade-up{opacity:0;transform:translateY(20px);animation:fadeUp .6s ease forwards}
.animate-slide-up{opacity:0;transform:translateY(40px);animation:fadeUp .8s ease forwards}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.animate-on-scroll{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.animate-on-scroll.visible{opacity:1;transform:translateY(0)}

/* Features */
.features{padding:100px 0}
.section-tag{display:inline-block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;border:1px solid var(--border-gold);border-radius:100px;padding:5px 14px}
.section-tag.light{color:var(--bg);border-color:rgba(13,10,7,.3);background:rgba(13,10,7,.15)}
.section-title{font-family:var(--font-d);font-size:clamp(34px,5vw,54px);font-weight:700;line-height:1.1;margin-bottom:56px}
.section-title em{color:var(--gold);font-style:italic}
.section-title.light{color:var(--white)}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--rl);padding:28px 24px;cursor:pointer;transition:border-color .3s,transform .3s}
.feat-card:hover{border-color:var(--border-gold);transform:translateY(-4px)}
.feat-icon{font-size:32px;margin-bottom:16px}
.feat-card h3{font-size:18px;font-weight:600;margin-bottom:10px}
.feat-card p{font-size:14px;color:var(--w60);line-height:1.7;margin-bottom:14px}
.feat-link{font-size:13px;color:var(--gold);font-weight:600}

/* Community */
.community{position:relative;padding:100px 0;overflow:hidden}
.community-bg{position:absolute;inset:0;background:linear-gradient(135deg,rgba(212,175,55,.1) 0%,rgba(232,93,38,.07) 100%);border-top:1px solid var(--border-gold);border-bottom:1px solid var(--border-gold)}
.community-inner{position:relative;z-index:1;display:flex;gap:80px;align-items:center}
.community-text{flex:1}
.community-desc{font-size:16px;color:var(--w60);max-width:480px;margin-bottom:32px}
.community-stats{display:flex;gap:32px}
.cstat{font-size:14px;color:var(--w60)}
.cstat span{font-size:28px;font-weight:700;color:var(--gold);display:block;line-height:1}
.community-flags{flex-shrink:0;text-align:center}
.flag-row{font-size:26px;letter-spacing:8px;margin-bottom:12px}
.flag-more{font-size:13px;color:var(--w60);margin-top:8px}

/* Download */
.download{padding:100px 0}
.download-inner{display:flex;gap:80px;align-items:center}
.dl-text{flex:1}
.dl-text p{font-size:16px;color:var(--w60);margin-bottom:28px}
.dl-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.dl-btn{display:flex;align-items:center;gap:12px;padding:12px 22px;border-radius:12px;text-decoration:none;transition:transform .2s}
.dl-btn:hover{transform:translateY(-2px)}
.dl-btn.playstore{background:var(--gold);color:var(--bg)}
.dl-btn.webapp{background:var(--bg3);color:var(--white);border:1px solid var(--border)}
.dl-btn small{display:block;font-size:11px;font-weight:400}
.dl-btn strong{display:block;font-size:15px;font-weight:700}
.dl-pkg{font-size:13px;color:var(--w30)}
.dl-pkg code{color:var(--gold);font-size:12px}
.dl-mockup{flex-shrink:0}
.dl-phone-frame{width:200px;background:#0D0A07;border-radius:28px;border:5px solid #1f1a16;box-shadow:0 30px 60px rgba(0,0,0,.6);overflow:hidden}

/* Footer */
.footer{background:var(--bg2);border-top:1px solid var(--border);padding:60px 0 0}
.footer-inner{display:flex;gap:60px;margin-bottom:48px}
.footer-brand{flex:2}
.footer-brand p{font-size:14px;color:var(--w60);margin-top:10px;max-width:240px}
.footer-links{flex:3;display:flex;gap:48px}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col strong{font-size:13px;font-weight:600;margin-bottom:4px}
.footer-col a,.footer-col p{font-size:14px;color:var(--w60);text-decoration:none;transition:color .2s}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{border-top:1px solid var(--border);padding:20px 24px;text-align:center}
.footer-bottom p{font-size:12px;color:var(--w30)}
.footer-bottom code{color:var(--gold)}

/* ═══════════════════════════
   WEB APP STYLES
═══════════════════════════ */

/* App Nav */
.app-nav{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(13,10,7,.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.app-nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;gap:20px}
.app-nav-tabs{display:flex;gap:4px;margin:0 auto}
.app-tab{background:none;border:none;color:var(--w60);padding:7px 14px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s}
.app-tab:hover{color:var(--white);background:var(--w10)}
.app-tab.active{color:var(--gold);background:var(--gold-dim)}
.app-nav-user{display:flex;align-items:center;gap:10px;flex-shrink:0}
.app-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--orange));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--bg)}
.app-username{font-size:13px;color:var(--w60)}

/* Mobile bottom nav */
.app-bottom-nav{display:none;border-top:1px solid var(--border);padding:6px 0 10px}
.abn-item{flex:1;background:none;border:none;color:var(--w60);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:18px;cursor:pointer;padding:4px 0;transition:color .2s}
.abn-item span{font-size:10px}
.abn-item.active{color:var(--gold)}

/* App main */
.app-main{margin-top:60px;min-height:calc(100vh - 60px)}
.screen{display:none}
.screen.active{display:block}
.screen-content{max-width:1100px;margin:0 auto;padding:32px 24px 80px}

/* Screen header */
.screen-header{margin-bottom:28px}
.screen-header h2{font-family:var(--font-d);font-size:32px;font-weight:700;margin-bottom:4px}
.screen-header p{font-size:14px;color:var(--w60)}

/* HOME */
.home-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px}
.home-greeting{font-family:var(--font-d);font-size:28px;font-weight:700;margin-bottom:4px}
.home-sub{font-size:14px;color:var(--w60)}
.home-live{display:flex;align-items:center;gap:6px;font-size:12px;color:#22c55e;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);border-radius:100px;padding:5px 12px}
.home-wallet-card{background:linear-gradient(135deg,#1a1614,#2a1f0a);border:1px solid var(--border-gold);border-radius:var(--rl);padding:28px 32px;margin-bottom:32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hwc-label{font-size:11px;color:rgba(212,175,55,.6);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.hwc-amount{font-size:38px;font-weight:700;color:var(--gold);margin-bottom:4px}
.hwc-usd{font-size:13px;color:var(--w60)}
.hwc-btns{display:flex;gap:12px;flex-wrap:wrap}
.hwc-btn{padding:11px 22px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .2s}
.hwc-btn.primary{background:var(--gold);color:var(--bg)}
.hwc-btn.primary:hover{background:#c9a22a;transform:translateY(-1px)}
.hwc-btn.ghost{background:rgba(255,255,255,.08);color:var(--white);border:1px solid var(--border)}
.hwc-btn.ghost:hover{background:rgba(255,255,255,.14)}
.section-label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--w60);margin-bottom:14px;margin-top:32px}
.home-quick-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.hq-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:18px 12px;text-align:center;cursor:pointer;transition:all .25s}
.hq-card:hover{border-color:var(--border-gold);transform:translateY(-3px)}
.hq-icon{font-size:28px;margin-bottom:8px}
.hq-label{font-size:13px;font-weight:600;margin-bottom:3px}
.hq-sub{font-size:11px;color:var(--w60)}
.home-trending{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.trending-item{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:14px;display:flex;gap:12px;align-items:center;cursor:pointer;transition:border-color .2s,transform .2s}
.trending-item:hover{border-color:var(--border-gold);transform:translateY(-2px)}
.ti-thumb{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.ti-thumb.orange{background:var(--orange-dim)}
.ti-thumb.gold{background:var(--gold-dim)}
.ti-avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.ti-avatar.gold{background:var(--gold-dim);color:var(--gold)}
.ti-avatar.orange{background:var(--orange-dim);color:var(--orange)}
.ti-info{flex:1}
.ti-info strong{display:block;font-size:14px;margin-bottom:3px}
.ti-info span{font-size:12px;color:var(--w60)}
.hot-badge{font-size:11px;color:var(--orange);font-weight:700;background:var(--orange-dim);border-radius:6px;padding:3px 8px}
.new-badge{font-size:11px;color:#22c55e;font-weight:700;background:rgba(34,197,94,.12);border-radius:6px;padding:3px 8px}
.online-dot{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e;flex-shrink:0}

/* CONNECT */
.search-bar{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:10px 16px;display:flex;gap:10px;align-items:center;margin-bottom:16px}
.search-bar input{flex:1;background:none;border:none;color:var(--white);outline:none;font-size:15px}
.search-bar input::placeholder{color:var(--w30)}
.filter-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.chip{background:var(--bg3);border:1px solid var(--border);border-radius:100px;padding:6px 14px;font-size:13px;color:var(--w60);cursor:pointer;transition:all .2s}
.chip.active,.chip:hover{background:var(--gold-dim);border-color:var(--border-gold);color:var(--gold)}
.profiles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.profile-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:20px;display:flex;gap:14px;align-items:center;transition:border-color .2s,transform .2s}
.profile-card:hover{border-color:var(--border-gold);transform:translateY(-2px)}
.profile-avatar{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;flex-shrink:0}
.pa-gold{background:var(--gold-dim);color:var(--gold)}
.pa-orange{background:var(--orange-dim);color:var(--orange)}
.pa-green{background:rgba(34,197,94,.15);color:#22c55e}
.pa-blue{background:rgba(0,112,186,.2);color:#5ab4f0}
.pa-purple{background:rgba(147,51,234,.15);color:#c084fc}
.profile-info{flex:1}
.profile-name{font-size:15px;font-weight:600;margin-bottom:3px}
.profile-role{font-size:13px;color:var(--w60);margin-bottom:6px}
.profile-country{font-size:12px;color:var(--gold)}
.connect-btn-web{background:var(--gold-dim);color:var(--gold);border:1px solid var(--border-gold);border-radius:8px;padding:7px 16px;font-size:13px;cursor:pointer;transition:all .2s;white-space:nowrap}
.connect-btn-web:hover{background:rgba(212,175,55,.22)}
.connect-btn-web.connected{background:rgba(34,197,94,.12);color:#22c55e;border-color:rgba(34,197,94,.25)}

/* MARKET */
.market-map{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);height:180px;margin-bottom:28px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:14px}
.map-grid-bg{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0,transparent 1px,transparent 22px),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0,transparent 1px,transparent 22px)}
.map-pin{position:absolute;font-size:20px;cursor:pointer;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%);transition:transform .2s}
.map-pin:hover{transform:translateX(-50%) scale(1.2)}
.map-pin span{font-size:10px;color:var(--gold);background:var(--bg);border:1px solid var(--border-gold);border-radius:6px;padding:2px 6px;white-space:nowrap;margin-top:2px}
.map-label{position:relative;z-index:1;font-size:12px;color:var(--w60)}
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.product-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:border-color .2s,transform .2s}
.product-card:hover{border-color:var(--border-gold);transform:translateY(-3px)}
.product-thumb{height:120px;display:flex;align-items:center;justify-content:center;font-size:44px}
.product-info{padding:14px}
.product-name{font-size:14px;font-weight:600;margin-bottom:4px}
.product-price{font-size:15px;color:var(--gold);font-weight:700;margin-bottom:4px}
.product-seller{font-size:12px;color:var(--w60)}

/* Modal */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:500;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal-card{background:var(--bg3);border:1px solid var(--border-gold);border-radius:var(--rl);max-width:440px;width:100%;position:relative;overflow:hidden}
.modal-thumb{height:160px;display:flex;align-items:center;justify-content:center;font-size:56px}
.modal-body{padding:24px}
.modal-body h3{font-size:20px;font-weight:700;margin-bottom:6px}
.modal-price{font-size:22px;color:var(--gold);font-weight:700;margin-bottom:12px}
.modal-body p{font-size:14px;color:var(--w60);margin-bottom:14px}
.modal-seller{font-size:13px;color:var(--gold);margin-bottom:20px}
.modal-close{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.4);border:none;color:var(--white);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}

/* WALLET */
.wallet-balance-card{background:linear-gradient(135deg,#1a1614,#2a1f0a);border:1px solid var(--border-gold);border-radius:var(--rl);padding:32px;margin-bottom:28px}
.wbc-label{font-size:11px;color:rgba(212,175,55,.6);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.wbc-amount{font-size:44px;font-weight:700;color:var(--gold);margin-bottom:6px}
.wbc-currencies{font-size:13px;color:var(--w60);margin-bottom:24px}
.wbc-btns{display:flex;gap:12px;flex-wrap:wrap}
.wbc-btn{padding:12px 24px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .2s}
.wbc-btn.primary{background:var(--gold);color:var(--bg)}
.wbc-btn.primary:hover{background:#c9a22a}
.wbc-btn.ghost{background:var(--w10);color:var(--white);border:1px solid var(--border)}
.wbc-btn.ghost:hover{background:rgba(255,255,255,.15)}
.wallet-form{background:var(--bg3);border:1px solid var(--border-gold);border-radius:var(--rl);padding:28px;margin-bottom:28px}
.form-title{font-family:var(--font-d);font-size:22px;font-weight:700;margin-bottom:20px}
.wallet-form label{display:block;font-size:13px;color:var(--w60);margin-bottom:6px;margin-top:16px}
.wallet-form label:first-of-type{margin-top:0}
.wallet-form input,.wallet-form select{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 14px;color:var(--white);outline:none;transition:border-color .2s}
.wallet-form input:focus,.wallet-form select:focus{border-color:var(--gold)}
.wallet-form select option{background:var(--bg)}
.amount-row{display:flex;gap:10px}
.amount-row input{flex:1}
.amount-row select{width:110px;flex-shrink:0}
.conversion-preview{font-size:13px;color:var(--gold);margin-top:8px;min-height:20px}
.payment-methods{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.pm-card{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 16px;font-size:13px;cursor:pointer;transition:all .2s}
.pm-card:hover,.pm-card.selected{background:var(--gold-dim);border-color:var(--border-gold);color:var(--gold)}
.form-btns{display:flex;gap:10px;margin-top:24px;justify-content:flex-end}
.methods-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.method-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;transition:border-color .2s}
.method-card:hover{border-color:var(--border-gold)}
.method-card.mpesa .mc-name{color:#00a450}
.method-card.paypal .mc-name{color:#0070ba}
.method-card.mtn .mc-name{color:#FFCC00;text-shadow:0 0 8px rgba(255,204,0,.3)}
.method-card.airtel .mc-name{color:#ef233c}
.method-card.bank .mc-name,.method-card.card .mc-name{color:var(--white)}
.mc-name{font-size:15px;font-weight:600;margin-bottom:4px}
.mc-region{font-size:12px;color:var(--w60)}
.tx-list{display:flex;flex-direction:column;gap:8px}
.tx-item{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:14px 18px;display:flex;justify-content:space-between;align-items:center;transition:border-color .2s}
.tx-item:hover{border-color:var(--border)}
.tx-item-info strong{display:block;font-size:14px;margin-bottom:3px}
.tx-item-info small{font-size:12px;color:var(--w60)}
.tx-out{color:var(--orange);font-size:15px;font-weight:700}
.tx-in{color:#22c55e;font-size:15px;font-weight:700}

/* AI */
.ai-screen-content{display:flex;flex-direction:column;height:calc(100vh - 100px)}
.ai-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-shrink:0}
.ai-header h2{font-family:var(--font-d);font-size:28px;font-weight:700;margin-bottom:3px}
.ai-header p{font-size:13px;color:var(--w60)}
.ai-powered-badge{background:var(--gold-dim);border:1px solid var(--border-gold);border-radius:8px;padding:6px 14px;font-size:12px;color:var(--gold);font-weight:600}
.chat-window{flex:1;overflow-y:auto;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:14px;margin-bottom:12px;min-height:300px;max-height:420px}
.chat-msg{display:flex;flex-direction:column;max-width:75%}
.chat-msg.bot{align-self:flex-start}
.chat-msg.user{align-self:flex-end;align-items:flex-end}
.chat-bubble{padding:12px 16px;border-radius:14px;font-size:14px;line-height:1.6}
.chat-msg.bot .chat-bubble{background:var(--bg4);border:1px solid var(--border);border-radius:14px 14px 14px 0}
.chat-msg.user .chat-bubble{background:var(--gold-dim);border:1px solid var(--border-gold);color:var(--gold);border-radius:14px 14px 0 14px}
.chat-time{font-size:11px;color:var(--w30);margin-top:4px;padding:0 4px}
.chat-typing .chat-bubble{color:var(--w60);font-style:italic}
.chat-suggestions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;flex-shrink:0}
.chat-suggestions button{background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:6px 14px;font-size:12px;color:var(--w60);cursor:pointer;transition:all .2s}
.chat-suggestions button:hover{border-color:var(--border-gold);color:var(--gold);background:var(--gold-dim)}
.chat-input-bar{display:flex;gap:10px;flex-shrink:0}
.chat-input-bar input{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:24px;padding:12px 20px;color:var(--white);outline:none;transition:border-color .2s;font-size:14px}
.chat-input-bar input:focus{border-color:var(--border-gold)}
.chat-send{width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--bg);border:none;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .15s;flex-shrink:0}
.chat-send:hover{background:#c9a22a;transform:scale(1.05)}

/* HUB */
.hub-tabs{display:flex;gap:6px;margin-bottom:24px;flex-wrap:wrap}
.hub-tab{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:9px 18px;font-size:14px;color:var(--w60);cursor:pointer;transition:all .2s}
.hub-tab.active,.hub-tab:hover{background:var(--gold-dim);border-color:var(--border-gold);color:var(--gold)}
.hub-panel{display:none}
.hub-panel.active{display:block}

/* Trivia */
.trivia-card-web{background:linear-gradient(135deg,rgba(232,93,38,.07),rgba(212,175,55,.07));border:1px solid var(--border-gold);border-radius:var(--rl);padding:28px;max-width:640px}
.trivia-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.trivia-category{font-size:11px;color:var(--gold);letter-spacing:1px;text-transform:uppercase;background:var(--gold-dim);border:1px solid var(--border-gold);border-radius:100px;padding:4px 12px}
.trivia-pts{font-size:13px;color:var(--gold);font-weight:600}
.trivia-question{font-family:var(--font-d);font-size:22px;font-weight:600;line-height:1.4;margin-bottom:20px}
.trivia-options{display:flex;flex-direction:column;gap:10px}
.trivia-opt{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:13px 18px;font-size:14px;cursor:pointer;transition:all .2s}
.trivia-opt:hover{border-color:var(--border-gold)}
.trivia-opt.correct{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3);color:#22c55e}
.trivia-opt.wrong{background:rgba(232,93,38,.1);border-color:rgba(232,93,38,.3);color:var(--orange)}
.trivia-opt.disabled{pointer-events:none;opacity:.7}
.trivia-result{margin-top:16px;padding:14px 18px;border-radius:10px;font-size:14px;font-weight:600}
.trivia-result.correct-msg{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.25);color:#22c55e}
.trivia-result.wrong-msg{background:rgba(232,93,38,.1);border:1px solid rgba(232,93,38,.25);color:var(--orange)}
.trivia-score-bar{display:flex;gap:32px;margin-top:20px;font-size:14px;color:var(--w60)}
.trivia-score-bar strong{color:var(--gold)}

/* Leaderboard */
.lb-web-list{display:flex;flex-direction:column;gap:8px;max-width:600px}
.lb-web-row{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:14px 18px;display:flex;align-items:center;gap:14px;transition:border-color .2s}
.lb-web-row:hover{border-color:var(--border-gold)}
.lb-web-row.first{background:rgba(212,175,55,.07);border-color:rgba(212,175,55,.25)}
.lb-web-row.second{background:rgba(192,192,192,.05);border-color:rgba(192,192,192,.15)}
.lb-web-row.third{background:rgba(205,127,50,.07);border-color:rgba(205,127,50,.2)}
.lb-rank-num{width:28px;text-align:center;font-size:16px;font-weight:700}
.lb-ava{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.lb-info{flex:1}
.lb-info strong{display:block;font-size:15px;margin-bottom:2px}
.lb-info span{font-size:12px;color:var(--w60)}
.lb-points{font-size:15px;font-weight:700;color:var(--gold)}

/* Language */
.language-panel h3{font-family:var(--font-d);font-size:22px;font-weight:700;margin-bottom:16px}
.lang-input-area{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:20px;margin-bottom:24px}
.lang-input-area textarea{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--white);padding:10px 14px;outline:none;resize:vertical;font-size:15px;transition:border-color .2s}
.lang-input-area textarea:focus{border-color:var(--gold)}
.lang-select-row{display:flex;gap:12px;align-items:center;margin-top:14px;flex-wrap:wrap}
.lang-select-row label{font-size:13px;color:var(--w60)}
.lang-select-row select{background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--white);padding:8px 12px;outline:none;cursor:pointer}
.lang-result{background:var(--gold-dim);border:1px solid var(--border-gold);border-radius:var(--r);padding:20px;margin-bottom:24px}
.lang-result-lang{font-size:11px;color:var(--gold);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.lang-result-text{font-size:22px;font-weight:600;margin-bottom:6px}
.lang-result-romanized{font-size:14px;color:var(--w60)}
.phrase-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.phrase-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:16px}
.phrase-en{font-size:13px;color:var(--w60);margin-bottom:6px}
.phrase-native{font-size:18px;font-weight:600;margin-bottom:4px}
.phrase-lang{font-size:11px;color:var(--gold)}

/* Exchange */
.exchange-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.exchange-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:20px}
.exchange-card h4{font-size:15px;font-weight:600;margin-bottom:12px}
.exchange-card p{font-size:14px;color:var(--w60);line-height:1.7}
.exchange-flag{font-size:28px;margin-bottom:10px}
.exchange-card strong{color:var(--gold)}

/* Toast */
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--bg3);border:1px solid var(--border-gold);border-radius:10px;padding:12px 24px;font-size:14px;color:var(--white);z-index:999;transition:transform .3s,opacity .3s;opacity:0;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* Responsive */
@media(max-width:1000px){
  .home-quick-grid{grid-template-columns:repeat(3,1fr)}
  .methods-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .app-nav-tabs{display:none}
  .app-nav-user .app-username{display:none}
  .app-bottom-nav{display:flex}
  .home-wallet-card{flex-direction:column;align-items:flex-start}
  .home-quick-grid{grid-template-columns:repeat(3,1fr)}
  .home-trending{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr 1fr}
  .community-inner{flex-direction:column;gap:40px;text-align:center}
  .community-stats{justify-content:center}
  .community-flags{display:none}
  .download-inner{flex-direction:column;gap:40px}
  .footer-inner{flex-direction:column;gap:32px}
  .footer-links{flex-wrap:wrap;gap:28px}
  .hero{flex-direction:column;padding:110px 20px 60px;text-align:center;gap:40px}
  .hero-content{max-width:100%}
  .hero-badge{margin:0 auto 20px}
  .hero-cta{justify-content:center}
  .hero-stats{justify-content:center}
  .hero-phone{margin:0 auto}
  .screen-content{padding:20px 16px 100px}
  .wbc-amount{font-size:34px}
  .hwc-amount{font-size:28px}
  .methods-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .features-grid{grid-template-columns:1fr}
  .home-quick-grid{grid-template-columns:repeat(2,1fr)}
  .methods-grid{grid-template-columns:1fr}
  .hub-tabs{gap:4px}
  .hub-tab{font-size:12px;padding:7px 12px}
}

/* ══════════════════════════════
   AUTH STYLES
══════════════════════════════ */
#auth-overlay{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  padding:20px;overflow-y:auto;
}
.auth-bg{position:fixed;inset:0;background:var(--bg);z-index:0}
.auth-orb{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none}
.auth-orb-1{width:500px;height:500px;background:radial-gradient(circle,rgba(212,175,55,.2) 0%,transparent 70%);top:-150px;left:-100px;animation:pulse 8s ease-in-out infinite alternate}
.auth-orb-2{width:380px;height:380px;background:radial-gradient(circle,rgba(232,93,38,.15) 0%,transparent 70%);bottom:-80px;right:-80px;animation:pulse 10s ease-in-out infinite alternate-reverse}

.auth-card{
  position:relative;z-index:1;
  background:var(--bg3);border:1px solid var(--border-gold);
  border-radius:var(--rl);padding:36px 40px;
  width:100%;max-width:480px;
  box-shadow:0 40px 80px rgba(0,0,0,.6);
}
.auth-back{background:none;border:none;color:var(--w60);font-size:13px;cursor:pointer;padding:0 0 20px;transition:color .2s;display:block}
.auth-back:hover{color:var(--gold)}
.auth-logo{font-family:var(--font-b);font-size:14px;font-weight:700;letter-spacing:2px;color:var(--gold);margin-bottom:20px}
.auth-logo span{color:var(--orange)}
.auth-title{font-family:var(--font-d);font-size:30px;font-weight:700;margin-bottom:6px}
.auth-sub{font-size:14px;color:var(--w60);margin-bottom:28px}
.auth-form{display:flex;flex-direction:column;gap:16px}
.auth-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.auth-field{display:flex;flex-direction:column;gap:6px}
.auth-field label{font-size:13px;color:var(--w60);font-weight:500}
.auth-field input,.auth-field select{
  background:var(--bg);border:1px solid var(--border);
  border-radius:8px;padding:11px 14px;color:var(--white);
  outline:none;font-size:15px;transition:border-color .2s;width:100%
}
.auth-field input:focus,.auth-field select:focus{border-color:var(--gold)}
.auth-field select option{background:var(--bg)}
.auth-field input.error,.auth-field select.error{border-color:var(--orange)}
.field-error{font-size:12px;color:var(--orange);min-height:16px}
.pass-wrap{position:relative}
.pass-wrap input{padding-right:44px}
.toggle-pass{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:16px;color:var(--w60);padding:4px;line-height:1}
.toggle-pass:hover{color:var(--white)}
.pass-strength{margin-top:6px}
.strength-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:4px}
.strength-fill{height:100%;border-radius:2px;transition:width .3s,background .3s}
.strength-label{font-size:11px;font-weight:600}
.auth-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.check-label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--w60);cursor:pointer;user-select:none}
.check-label input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--gold)}
.auth-link{color:var(--gold);text-decoration:none;font-size:13px}
.auth-link:hover{text-decoration:underline}
.auth-error{background:rgba(232,93,38,.12);border:1px solid rgba(232,93,38,.3);border-radius:8px;padding:10px 14px;font-size:13px;color:var(--orange)}
.auth-success{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);border-radius:8px;padding:10px 14px;font-size:13px;color:#22c55e}
.auth-btn{
  background:var(--gold);color:var(--bg);
  font-size:15px;font-weight:700;padding:13px;
  border-radius:10px;border:none;cursor:pointer;
  transition:background .2s,transform .15s;margin-top:4px;
}
.auth-btn:hover{background:#c9a22a;transform:translateY(-1px)}
.auth-btn:disabled{background:var(--bg4);color:var(--w60);cursor:not-allowed;transform:none}
.auth-divider{display:flex;align-items:center;gap:12px;color:var(--w30);font-size:12px}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.auth-switch{text-align:center;font-size:14px;color:var(--w60)}
.auth-switch a{color:var(--gold);text-decoration:none;font-weight:600}
.auth-switch a:hover{text-decoration:underline}

/* Success screen */
.success-icon{font-size:64px;text-align:center;margin:16px 0 8px;animation:bounceIn .6s ease}
@keyframes bounceIn{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}

/* User dropdown */
.user-dropdown{
  position:fixed;top:64px;right:16px;z-index:250;
  background:var(--bg3);border:1px solid var(--border-gold);
  border-radius:var(--r);padding:8px;min-width:220px;
  box-shadow:0 20px 40px rgba(0,0,0,.5);
}
.udrop-name{font-size:14px;font-weight:600;padding:8px 12px 2px}
.udrop-email{font-size:12px;color:var(--w60);padding:0 12px 10px}
.udrop-divider{border:none;border-top:1px solid var(--border);margin:4px 0}
.user-dropdown button{
  display:block;width:100%;text-align:left;
  background:none;border:none;color:var(--white);
  padding:9px 12px;border-radius:8px;font-size:13px;
  cursor:pointer;transition:background .2s;
}
.user-dropdown button:hover{background:var(--w10)}
.udrop-logout{color:var(--orange)!important}

/* Nav ghost button */
.btn-nav-ghost{
  color:var(--w60)!important;border:1px solid var(--border)!important;
  padding:7px 18px;border-radius:8px;font-size:13px!important;
  transition:all .2s!important;text-decoration:none;
}
.btn-nav-ghost:hover{color:var(--white)!important;border-color:var(--w30)!important}

/* Profile modal */
.profile-modal-card{max-width:500px;padding:28px}
.pm-header{display:flex;gap:16px;align-items:center;margin-bottom:24px}
.pm-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--orange));display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:var(--bg);flex-shrink:0}
.pm-name{font-size:20px;font-weight:700;margin-bottom:3px}
.pm-role{font-size:14px;color:var(--w60);margin-bottom:3px}
.pm-country{font-size:13px;color:var(--gold)}
.pm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.pm-stat{background:var(--bg);border-radius:var(--r);padding:14px;text-align:center}
.pm-stat span{display:block;font-size:20px;font-weight:700;color:var(--gold)}
.pm-stat small{font-size:11px;color:var(--w60)}
.pm-edit h4{font-size:15px;font-weight:600;margin-bottom:14px}
.pm-edit label{display:block;font-size:13px;color:var(--w60);margin-bottom:5px;margin-top:12px}
.pm-edit input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 14px;color:var(--white);outline:none;font-size:14px;transition:border-color .2s}
.pm-edit input:focus{border-color:var(--gold)}

@media(max-width:520px){
  .auth-card{padding:24px 20px}
  .auth-row-2{grid-template-columns:1fr}
}

/* ══════════════════════════════
   GAMES STYLES
══════════════════════════════ */

/* Coin bar */
.coin-bar{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#1a1614,#2a1f0a);border:1px solid var(--border-gold);border-radius:var(--r);padding:14px 20px;margin-bottom:28px}
.coin-balance{display:flex;align-items:center;gap:8px}
.coin-icon{font-size:22px}
.coin-amount{font-size:24px;font-weight:700;color:var(--gold)}
.coin-label{font-size:13px;color:var(--w60)}
.coin-buy-btn{background:var(--gold);color:var(--bg);border:none;border-radius:8px;padding:9px 18px;font-size:13px;font-weight:700;cursor:pointer;transition:background .2s}
.coin-buy-btn:hover{background:#c9a22a}

/* Sub headers */
.sub-header{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.sub-header h2{font-family:var(--font-d);font-size:28px;font-weight:700}
.back-btn{background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--w60);padding:7px 14px;font-size:13px;cursor:pointer;transition:all .2s;white-space:nowrap}
.back-btn:hover{color:var(--white);border-color:var(--border-gold)}
.sub-desc{font-size:14px;color:var(--w60);margin-bottom:24px}
.game-coin-stake{font-size:13px;color:var(--gold);background:var(--gold-dim);border:1px solid var(--border-gold);border-radius:8px;padding:5px 12px;margin-left:auto}

/* Games lobby grid */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.game-lobby-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;cursor:pointer;transition:border-color .3s,transform .3s}
.game-lobby-card:hover{border-color:var(--border-gold);transform:translateY(-4px)}
.glc-banner{height:140px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.ludo-banner{background:linear-gradient(135deg,#1a0a0a,#2a1a0a)}
.snake-banner{background:linear-gradient(135deg,#0a1a0a,#0a1a2a)}
.tod-banner{background:linear-gradient(135deg,#1a0a1a,#2a0a1a)}
.glc-body{padding:18px}
.glc-title{font-size:18px;font-weight:700;margin-bottom:6px}
.glc-desc{font-size:13px;color:var(--w60);margin-bottom:12px;line-height:1.6}
.glc-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.gtag{font-size:11px;background:var(--w10);border-radius:6px;padding:3px 9px;color:var(--w60)}
.gtag.gold{background:var(--gold-dim);color:var(--gold)}
.gtag.hot{background:var(--orange-dim);color:var(--orange)}
.glc-btn{background:var(--gold);color:var(--bg);border:none;border-radius:8px;padding:9px 20px;font-size:13px;font-weight:700;cursor:pointer;width:100%;transition:background .2s}
.glc-btn:hover{background:#c9a22a}

/* Ludo board preview */
.ludo-preview-board{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:80px}
.lpb-cell{width:24px;height:24px;border-radius:4px;background:var(--border)}
.lpb-cell.red{background:#ef444488}
.lpb-cell.green{background:#22c55e88}
.lpb-cell.yellow{background:#eab30888}
.lpb-cell.blue{background:#0070ba88}
.lpb-center{width:24px;height:24px;background:var(--border-gold);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--gold)}

/* Snake preview */
.snake-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.sp-row{display:contents}
.sp-c{width:22px;height:22px;border-radius:3px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:10px}
.sp-c.dark{background:rgba(255,255,255,.12)}

/* Truth or Dare preview */
.tod-preview{display:flex;align-items:center;gap:12px}
.tod-card-prev{padding:8px 14px;border-radius:8px;font-size:12px;font-weight:700}
.tod-card-prev.truth{background:rgba(34,197,94,.2);color:#22c55e;border:1px solid rgba(34,197,94,.3)}
.tod-card-prev.dare{background:var(--orange-dim);color:var(--orange);border:1px solid rgba(232,93,38,.3)}
.tod-spin-arrow{font-size:20px;color:var(--gold)}

/* Game modes grid */
.game-modes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.gm-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:20px;cursor:pointer;transition:border-color .2s,transform .2s;position:relative}
.gm-card:hover{border-color:var(--border-gold);transform:translateY(-3px)}
.gm-icon{font-size:36px;margin-bottom:10px}
.gm-title{font-size:16px;font-weight:700;margin-bottom:6px}
.gm-desc{font-size:13px;color:var(--w60);margin-bottom:14px;line-height:1.6}
.gm-wager-row{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.wager-sel{background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--white);padding:6px 10px;font-size:13px;cursor:pointer;outline:none}
.wager-sel:focus{border-color:var(--gold)}
.gm-btn{background:var(--bg3);border:1px solid var(--border-gold);color:var(--gold);border-radius:8px;padding:9px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%;transition:all .2s}
.gm-btn:hover{background:var(--gold-dim)}

/* Coin shop */
.coin-packages{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:28px}
.coin-pkg{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:18px;text-align:center;cursor:pointer;transition:border-color .2s,transform .2s;position:relative}
.coin-pkg:hover{border-color:var(--border-gold);transform:translateY(-3px)}
.coin-pkg.popular{border-color:var(--border-gold);background:rgba(212,175,55,.05)}
.coin-pkg.vip{border-color:rgba(147,51,234,.4);background:rgba(147,51,234,.05)}
.cp-popular-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--bg);font-size:10px;font-weight:700;padding:3px 10px;border-radius:100px;white-space:nowrap}
.vip-badge{background:linear-gradient(90deg,#9333ea,#c084fc)!important;color:#fff!important}
.cp-emoji{font-size:28px;margin-bottom:8px}
.cp-coins{font-size:16px;font-weight:700;color:var(--gold);margin-bottom:4px}
.cp-price{font-size:13px;color:var(--w60);margin-bottom:4px}
.cp-tag{font-size:11px;color:var(--orange);margin-bottom:12px}
.coin-pkg button{background:var(--gold);color:var(--bg);border:none;border-radius:7px;padding:7px 18px;font-size:13px;font-weight:700;cursor:pointer;transition:background .2s}
.coin-pkg button:hover{background:#c9a22a}
.coin-payment-form{background:var(--bg3);border:1px solid var(--border-gold);border-radius:var(--rl);padding:28px;max-width:480px;margin-top:8px}
.coin-payment-form h3{font-size:18px;font-weight:700;margin-bottom:8px}
.cpf-summary{background:var(--gold-dim);border:1px solid var(--border-gold);border-radius:8px;padding:12px 16px;font-size:14px;color:var(--gold);margin-bottom:18px}

/* Ludo game layout */
.ludo-layout{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.ludo-info-panel{flex:1;min-width:200px;display:flex;flex-direction:column;gap:12px}
#ludoCanvas,#snakeCanvas{border-radius:var(--r);border:2px solid var(--border-gold);background:#111;flex-shrink:0;max-width:100%;height:auto}
.ludo-player-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:12px;display:flex;align-items:center;gap:10px}
.lp-color{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.red-dot{background:#ef4444}
.blue-dot{background:#3b82f6}
.green-dot{background:#22c55e}
.yellow-dot{background:#eab308}
.lp-details{flex:1}
.lp-name{font-size:13px;font-weight:600;margin-bottom:2px}
.lp-pieces{font-size:11px;margin-bottom:2px}
.lp-home{font-size:11px;color:var(--w60)}
.lp-turn-dot{width:10px;height:10px;border-radius:50%;background:transparent;transition:background .3s}
.lp-turn-dot.active{background:#22c55e;box-shadow:0 0 8px #22c55e}
.ludo-dice-area{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:16px;text-align:center}
.ludo-dice{font-size:44px;cursor:pointer;transition:transform .15s;display:inline-block;user-select:none}
.ludo-dice:hover{transform:scale(1.1)}
.ludo-dice.rolling{animation:rollDice .4s ease}
@keyframes rollDice{0%,100%{transform:rotate(0)}25%{transform:rotate(-20deg) scale(1.1)}75%{transform:rotate(20deg) scale(1.1)}}
.ludo-dice-val{font-size:18px;font-weight:700;color:var(--gold);margin:4px 0}
.ludo-msg{font-size:12px;color:var(--w60)}
.ludo-log{background:var(--bg);border-radius:var(--r);padding:10px;max-height:120px;overflow-y:auto;font-size:11px;color:var(--w60);line-height:1.8}

/* Snake & Ladder */
.snake-layout{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.snake-info-panel{flex:1;min-width:200px;display:flex;flex-direction:column;gap:12px}
.snake-player-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:12px;display:flex;align-items:center;gap:10px}
.snake-player-card.sp-you{border-color:var(--border-gold)}
.sp-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.sp-name{font-size:13px;font-weight:600;margin-bottom:2px}
.sp-pos{font-size:11px;color:var(--w60)}

/* Truth or Dare game */
.tod-modes{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.couples-card{border-color:rgba(232,93,38,.3);background:rgba(232,93,38,.04)}
.couples-card:hover{border-color:var(--orange)!important}
.age-gate-badge{position:absolute;top:10px;right:10px;background:var(--orange);color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px}
.tod-players-row{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:12px;color:var(--w60)}
.player-count-input{width:56px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--white);padding:5px 8px;text-align:center;font-size:13px;outline:none}
.tod-game-area{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start}
.tod-players-list{display:flex;flex-direction:column;gap:8px}
.tod-player-item{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;font-size:13px;transition:all .3s}
.tod-player-item.active-player{border-color:var(--gold);background:var(--gold-dim);color:var(--gold);font-weight:600}
.tod-spinner-area{text-align:center;padding:20px}
.tod-bottle-wrap{position:relative;display:inline-block;margin-bottom:16px}
.tod-bottle{font-size:56px;display:inline-block;transition:transform .05s;transform-origin:center}
.tod-spin-ring{position:absolute;inset:-8px;border:2px dashed var(--border-gold);border-radius:50%;opacity:.4}
.tod-current-player{font-size:15px;font-weight:600;color:var(--gold);margin-bottom:16px}
.tod-spin-btn{background:linear-gradient(135deg,var(--gold),var(--orange));color:var(--bg);border:none;border-radius:12px;padding:14px 32px;font-size:15px;font-weight:700;cursor:pointer;transition:transform .2s}
.tod-spin-btn:hover{transform:scale(1.04)}
.tod-spin-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.tod-challenge-area{margin-top:20px}
.tod-challenge-card{background:var(--bg3);border:1px solid var(--border-gold);border-radius:var(--rl);padding:24px;text-align:center}
.tod-choice-btns{display:flex;gap:14px;justify-content:center}
.tod-truth-btn{background:rgba(34,197,94,.15);color:#22c55e;border:2px solid rgba(34,197,94,.3);border-radius:12px;padding:14px 28px;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s;flex:1;max-width:160px}
.tod-truth-btn:hover{background:rgba(34,197,94,.25);transform:translateY(-2px)}
.tod-dare-btn{background:var(--orange-dim);color:var(--orange);border:2px solid rgba(232,93,38,.3);border-radius:12px;padding:14px 28px;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s;flex:1;max-width:160px}
.tod-dare-btn:hover{background:rgba(232,93,38,.2);transform:translateY(-2px)}
.tod-active-card{background:var(--bg3);border:1px solid var(--border-gold);border-radius:var(--rl);padding:28px;margin-top:16px;text-align:center}
.tac-type{font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700;margin-bottom:14px;padding:4px 14px;border-radius:100px;display:inline-block}
.tac-type.truth-type{background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.3)}
.tac-type.dare-type{background:var(--orange-dim);color:var(--orange);border:1px solid rgba(232,93,38,.3)}
.tac-text{font-family:var(--font-d);font-size:22px;font-weight:600;line-height:1.5;margin-bottom:24px;color:var(--white)}
.tac-btns{display:flex;gap:12px;justify-content:center}
.tac-skip{background:none;border:1px solid var(--border);color:var(--w60);border-radius:8px;padding:10px 20px;font-size:13px;cursor:pointer;transition:all .2s}
.tac-skip:hover{border-color:var(--border-gold);color:var(--white)}
.tac-done{background:var(--gold);color:var(--bg);border:none;border-radius:8px;padding:10px 24px;font-size:13px;font-weight:700;cursor:pointer;transition:background .2s}
.tac-done:hover{background:#c9a22a}
.tod-score-bar{display:flex;gap:24px;margin-top:20px;font-size:13px;color:var(--w60);flex-wrap:wrap}
.tod-score-bar strong{color:var(--gold)}

@media(max-width:768px){
  .ludo-layout,.snake-layout{flex-direction:column}
  #ludoCanvas,#snakeCanvas{width:100%;height:auto}
  .tod-game-area{grid-template-columns:1fr}
}

/* ══════════════════════════════
   LUDO ENHANCED STYLES
══════════════════════════════ */

/* Lobby tabs */
.ludo-shop-btn{background:var(--gold-dim);border:1px solid var(--border-gold);color:var(--gold);border-radius:8px;padding:7px 16px;font-size:13px;font-weight:600;cursor:pointer;margin-left:auto;transition:all .2s}
.ludo-shop-btn:hover{background:rgba(212,175,55,.25)}
.ludo-equipped-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:10px 16px;margin-bottom:20px;font-size:13px}
.leq-label{color:var(--w60);font-size:11px;letter-spacing:1px;text-transform:uppercase}
.leq-item{background:var(--bg);border:1px solid var(--border-gold);border-radius:6px;padding:4px 12px;font-size:12px;color:var(--gold)}
.ludo-mode-tabs{display:flex;gap:6px;margin-bottom:20px}
.lmt{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:8px 18px;font-size:13px;color:var(--w60);cursor:pointer;transition:all .2s}
.lmt.active,.lmt:hover{background:var(--gold-dim);border-color:var(--border-gold);color:var(--gold)}
.ludo-tab-panel{display:none}
.ludo-tab-panel.active{display:block}
.gm-mode-banner{height:80px;border-radius:10px 10px 0 0;display:flex;align-items:center;justify-content:center;margin:-20px -20px 14px}
.gm-tags-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}

/* Daily reward */
.daily-reward-card{background:linear-gradient(135deg,rgba(212,175,55,.1),rgba(232,93,38,.07));border:1px solid var(--border-gold);border-radius:var(--rl);padding:32px;max-width:560px;text-align:center}
.dr-icon{font-size:56px;margin-bottom:12px}
.daily-reward-card h3{font-family:var(--font-d);font-size:24px;margin-bottom:8px}
.daily-reward-card p{font-size:14px;color:var(--w60);margin-bottom:20px}
.dr-streak-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.dr-day{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:8px 12px;text-align:center;min-width:56px}
.dr-day.claimed{border-color:var(--gold);background:var(--gold-dim)}
.dr-day.today{border-color:var(--orange);background:var(--orange-dim);animation:pulseBorder 1.5s ease infinite}
@keyframes pulseBorder{0%,100%{box-shadow:0 0 0 0 rgba(232,93,38,.4)}50%{box-shadow:0 0 0 4px rgba(232,93,38,.1)}}
.dr-day-num{font-size:10px;color:var(--w60)}
.dr-day-coins{font-size:13px;font-weight:700;color:var(--gold)}

/* Stats grid */
.ludo-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.lstat-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:16px;text-align:center}
.lstat-val{font-size:28px;font-weight:700;color:var(--gold);margin-bottom:4px}
.lstat-label{font-size:12px;color:var(--w60)}

/* Setup */
.ludo-setup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.lsetup-section{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:20px}
.lsetup-section h3{font-size:15px;font-weight:600;margin-bottom:14px}
.wager-options{display:flex;gap:8px;flex-wrap:wrap}
.wager-opt{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:7px 14px;font-size:13px;cursor:pointer;transition:all .2s}
.wager-opt.active{background:var(--gold-dim);border-color:var(--border-gold);color:var(--gold);font-weight:600}
.wager-balance-note{font-size:12px;color:var(--w60);margin-top:8px}
.diff-options{display:flex;gap:8px}
.diff-opt{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px 16px;font-size:13px;cursor:pointer;transition:all .2s;flex:1;text-align:center}
.diff-opt.active{background:var(--gold-dim);border-color:var(--border-gold);color:var(--gold)}
.pu-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--w60);margin-bottom:8px;cursor:pointer}
.pu-toggle input{accent-color:var(--gold);width:16px;height:16px;cursor:pointer}
.player-config-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.player-config-row:last-child{border-bottom:none}
.pcr-color{width:16px;height:16px;border-radius:50%;flex-shrink:0}
.pcr-input{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--white);padding:6px 10px;font-size:13px;outline:none}
.pcr-input:focus{border-color:var(--gold)}
.pcr-type{background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--white);padding:6px 8px;font-size:12px;cursor:pointer;outline:none}

/* Shop */
.shop-coin-bal{display:flex;align-items:center;gap:6px;margin-left:auto;background:var(--gold-dim);border:1px solid var(--border-gold);border-radius:8px;padding:6px 14px}
.shop-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}
.shop-tab{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:8px 16px;font-size:13px;color:var(--w60);cursor:pointer;transition:all .2s}
.shop-tab.active,.shop-tab:hover{background:var(--gold-dim);border-color:var(--border-gold);color:var(--gold)}
.shop-panel{display:none}
.shop-panel.active{display:block}
.shop-items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.shop-item{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:0;overflow:hidden;transition:border-color .2s,transform .2s;cursor:pointer}
.shop-item:hover{border-color:var(--border-gold);transform:translateY(-3px)}
.shop-item.owned{border-color:rgba(34,197,94,.3)}
.shop-item.equipped{border-color:var(--gold);box-shadow:0 0 16px rgba(212,175,55,.15)}
.si-preview{height:100px;display:flex;align-items:center;justify-content:center;font-size:36px;position:relative}
.si-owned-badge{position:absolute;top:8px;right:8px;background:rgba(34,197,94,.9);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:100px}
.si-equipped-badge{position:absolute;top:8px;right:8px;background:var(--gold);color:var(--bg);font-size:10px;font-weight:700;padding:2px 8px;border-radius:100px}
.si-body{padding:12px}
.si-name{font-size:14px;font-weight:600;margin-bottom:4px}
.si-desc{font-size:12px;color:var(--w60);margin-bottom:10px}
.si-footer{display:flex;align-items:center;justify-content:space-between}
.si-price{font-size:13px;color:var(--gold);font-weight:700}
.si-price.free{color:#22c55e}
.si-btn{background:var(--gold);color:var(--bg);border:none;border-radius:6px;padding:5px 14px;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s}
.si-btn:hover{background:#c9a22a}
.si-btn.equip-btn{background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.3)}
.si-btn.equip-btn:hover{background:rgba(34,197,94,.25)}
.si-btn.equipped-btn{background:var(--gold-dim);color:var(--gold);border:1px solid var(--border-gold);cursor:default}
.si-rarity{font-size:10px;padding:2px 7px;border-radius:100px;margin-left:6px}
.rarity-common{background:rgba(255,255,255,.1);color:var(--w60)}
.rarity-rare{background:rgba(0,112,186,.15);color:#5ab4f0}
.rarity-epic{background:rgba(147,51,234,.15);color:#c084fc}
.rarity-legendary{background:rgba(212,175,55,.15);color:var(--gold)}

/* Game layout */
.ludo-game-header{display:flex;align-items:center;gap:12px;padding:10px 0 14px;border-bottom:1px solid var(--border);margin-bottom:14px}
.lgh-title{font-family:var(--font-d);font-size:22px;font-weight:700}
.lgh-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.lgh-timer{font-size:14px;font-weight:700;color:var(--orange);background:var(--orange-dim);border:1px solid rgba(232,93,38,.3);border-radius:8px;padding:5px 12px}
.turn-banner{background:var(--gold-dim);border:1px solid var(--border-gold);border-radius:8px;padding:8px 16px;font-size:13px;font-weight:600;color:var(--gold);text-align:center;margin-bottom:14px;transition:all .4s}
.turn-banner.cpu-turn{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.25);color:#60a5fa}
.turn-banner.p2-turn{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.25);color:#22c55e}
.turn-banner.p3-turn{background:rgba(234,179,8,.1);border-color:rgba(234,179,8,.25);color:#eab308}
.ludo-main-layout{display:grid;grid-template-columns:200px 1fr 200px;gap:20px;align-items:start}
.ludo-players-panel{display:flex;flex-direction:column;gap:10px}
.ludo-player-card2{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:12px;transition:border-color .3s,box-shadow .3s}
.ludo-player-card2.active-player{border-color:var(--gold);box-shadow:0 0 12px rgba(212,175,55,.2)}
.lpc-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.lpc-colorbar{width:4px;height:28px;border-radius:2px;flex-shrink:0}
.lpc-name{font-size:13px;font-weight:600;flex:1}
.lpc-badge{font-size:10px;background:var(--gold-dim);color:var(--gold);border-radius:6px;padding:2px 7px}
.lpc-stats{display:flex;gap:12px;font-size:11px;color:var(--w60)}
.lpc-tokens{font-size:16px;margin-top:6px;letter-spacing:2px}
.powerup-panel{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:12px}
.pp-label{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--w60);margin-bottom:8px}
.pp-slots{display:flex;gap:6px;flex-wrap:wrap}
.pp-slot{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:16px;cursor:pointer;transition:all .2s;position:relative}
.pp-slot:hover{border-color:var(--border-gold);transform:scale(1.05)}
.pp-slot .pp-count{position:absolute;top:-4px;right:-4px;background:var(--gold);color:var(--bg);font-size:9px;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.ludo-board-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px}
#ludoCanvas{border-radius:var(--r);border:2px solid var(--border-gold);cursor:pointer;max-width:100%;height:auto}
.ludo-dice-overlay{display:flex;align-items:center;gap:14px}
.ludo-dice-3d{width:60px;height:60px;background:linear-gradient(145deg,#2a1f0a,#1a1614);border:2px solid var(--border-gold);border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;box-shadow:0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1);user-select:none}
.ludo-dice-3d:hover{transform:scale(1.08);border-color:var(--gold)}
.ludo-dice-3d:active{transform:scale(.95)}
.ludo-dice-3d.rolling{animation:dice3d .5s ease}
@keyframes dice3d{0%{transform:rotateX(0) rotateY(0) scale(1)}25%{transform:rotateX(180deg) rotateY(90deg) scale(1.1)}75%{transform:rotateX(90deg) rotateY(270deg) scale(1.1)}100%{transform:rotateX(0) rotateY(0) scale(1)}}
.dice-face{font-size:28px;transition:all .1s}
.ludo-dice-val{font-size:16px;font-weight:700;color:var(--gold);min-width:40px}
.ludo-msg{font-size:13px;color:var(--w60)}
.ludo-right-panel{display:flex;flex-direction:column;gap:14px}
.lrp-section{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:12px}
.lrp-label{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--w60);margin-bottom:8px}
.standing-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12px}
.standing-rank{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.ludo-events{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto}
.event-row{font-size:11px;color:var(--w60);padding:3px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.ludo-log{background:var(--bg);border-radius:8px;padding:8px;max-height:100px;overflow-y:auto;font-size:11px;color:var(--w60);line-height:1.8}

/* Floating animations */
#floatingAnims{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.float-anim{position:absolute;font-size:24px;font-weight:700;pointer-events:none;animation:floatUp 1.4s ease forwards;z-index:10}
@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-80px) scale(1.4)}}

/* Capture overlay */
.capture-overlay{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;pointer-events:none}
.capture-msg{background:linear-gradient(135deg,var(--orange-dim),var(--gold-dim));border:2px solid var(--gold);border-radius:16px;padding:16px 32px;font-size:20px;font-weight:700;color:var(--white);animation:popIn .4s ease;box-shadow:0 20px 60px rgba(0,0,0,.6)}
@keyframes popIn{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}

/* Win overlay */
.win-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.win-card{background:var(--bg3);border:2px solid var(--gold);border-radius:var(--rl);padding:40px;text-align:center;max-width:400px;width:90%;animation:winEntrance .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes winEntrance{0%{transform:scale(.3) rotate(-10deg);opacity:0}100%{transform:scale(1) rotate(0deg);opacity:1}}
.win-trophy{font-size:72px;animation:trophyBounce 1s ease infinite alternate;display:block}
@keyframes trophyBounce{0%{transform:scale(1)}100%{transform:scale(1.08)}}
.win-title{font-family:var(--font-d);font-size:36px;font-weight:700;margin:12px 0 6px}
.win-subtitle{font-size:14px;color:var(--w60);margin-bottom:12px}
.win-coins{font-size:22px;color:var(--gold);font-weight:700;margin-bottom:4px}
.win-xp{font-size:14px;color:#22c55e;margin-bottom:24px}
.win-btns{display:flex;gap:12px;justify-content:center}

@media(max-width:900px){
  .ludo-main-layout{grid-template-columns:1fr}
  .ludo-players-panel,.ludo-right-panel{display:none}
}
@media(max-width:600px){
  #ludoCanvas{width:100%!important;height:auto!important}
}

/* ══════════════════════════════
   AUTH ENHANCED — SAVED ACCOUNTS + USERNAME
══════════════════════════════ */
.saved-accounts-label{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--w60);margin-bottom:10px}
.saved-accounts-grid{display:flex;gap:10px;flex-wrap:wrap}
.saved-acc-card{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .2s;min-width:180px}
.saved-acc-card:hover{border-color:var(--border-gold);background:var(--gold-dim)}
.sac-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--orange));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--bg);flex-shrink:0}
.sac-info{flex:1}
.sac-name{font-size:13px;font-weight:600}
.sac-username{font-size:11px;color:var(--gold)}
.sac-remove{background:none;border:none;color:var(--w30);font-size:14px;cursor:pointer;padding:2px;transition:color .2s}
.sac-remove:hover{color:var(--orange)}

.username-wrap{position:relative;display:flex;align-items:center}
.username-at{position:absolute;left:12px;color:var(--w60);font-size:15px;pointer-events:none;z-index:1}
.username-wrap input{padding-left:28px!important;width:100%}
.username-available{font-size:12px;margin-top:4px}
.username-available.avail{color:#22c55e}
.username-available.taken{color:var(--orange)}

/* ══════════════════════════════
   USER DROPDOWN ENHANCED
══════════════════════════════ */
.udrop-header{display:flex;gap:12px;align-items:center;padding:12px 14px 10px}
.udrop-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--orange));display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:var(--bg);flex-shrink:0}
.udrop-name{font-size:14px;font-weight:600;margin-bottom:1px}
.udrop-username{font-size:12px;color:var(--gold)}
.udrop-email{font-size:11px;color:var(--w60)}

/* ══════════════════════════════
   ACCOUNT SETTINGS MODAL
══════════════════════════════ */
.account-settings-card{max-width:680px;padding:28px 32px;max-height:90vh;overflow-y:auto}
.as-header{display:flex;gap:16px;align-items:center;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.as-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--orange));display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:var(--bg);flex-shrink:0}
.as-name{font-size:20px;font-weight:700;margin-bottom:3px}
.as-username{font-size:13px;color:var(--gold);margin-bottom:6px}
.as-badge{display:inline-block;font-size:11px;background:var(--gold-dim);color:var(--gold);border:1px solid var(--border-gold);border-radius:100px;padding:3px 10px}
.as-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:24px;border-bottom:1px solid var(--border);padding-bottom:16px}
.as-tab{background:none;border:none;color:var(--w60);padding:7px 14px;border-radius:8px;font-size:13px;cursor:pointer;transition:all .2s}
.as-tab.active,.as-tab:hover{background:var(--gold-dim);color:var(--gold)}
.as-panel{display:none}
.as-panel.active{display:block}
.as-section{margin-bottom:4px}
.as-section h4{font-size:15px;font-weight:600;margin-bottom:14px;color:var(--white)}
.as-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.as-form-grid .auth-field label{font-size:12px}

/* Toggle switch */
.toggle-switch{position:relative;display:inline-flex;width:44px;height:24px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.ts-slider{position:absolute;cursor:pointer;inset:0;background:var(--bg4);border-radius:24px;transition:background .3s;border:1px solid var(--border)}
.ts-slider::before{content:'';position:absolute;height:16px;width:16px;left:3px;top:3px;background:var(--w60);border-radius:50%;transition:transform .3s,background .3s}
.toggle-switch input:checked + .ts-slider{background:var(--gold-dim);border-color:var(--border-gold)}
.toggle-switch input:checked + .ts-slider::before{transform:translateX(20px);background:var(--gold)}

/* TFA rows */
.tfa-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}
.tfa-row:last-child{border-bottom:none}
.tfa-info .tfa-title{font-size:14px;font-weight:500;margin-bottom:2px}
.tfa-info .tfa-desc{font-size:12px;color:var(--w60)}

/* Sessions */
.session-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;display:flex;align-items:center;gap:12px}
.session-icon{font-size:22px}
.session-info{flex:1}
.session-device{font-size:13px;font-weight:500;margin-bottom:2px}
.session-time{font-size:11px;color:var(--w60)}
.session-badge{font-size:10px;font-weight:700;padding:3px 9px;border-radius:100px}
.session-badge.current{background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.25)}

/* Notification rows */
.notif-group-label{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--w60);margin-bottom:8px;margin-top:4px}
.notif-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:14px}
.notif-row:last-child{border-bottom:none}

/* Linked payments */
.linked-payment-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;display:flex;align-items:center;gap:12px;margin-bottom:10px;transition:border-color .2s}
.linked-payment-card:hover{border-color:var(--border)}
.lpc-logo{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.lpc-info{flex:1}
.lpc-type{font-size:14px;font-weight:600;margin-bottom:2px}
.lpc-detail{font-size:12px;color:var(--w60)}
.lpc-default-badge{font-size:10px;background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.25);border-radius:100px;padding:2px 8px;margin-left:6px}
.lpc-actions{display:flex;gap:6px}
.lpc-set-default{background:none;border:1px solid var(--border);border-radius:6px;color:var(--w60);font-size:11px;padding:4px 10px;cursor:pointer;transition:all .2s}
.lpc-set-default:hover{border-color:var(--border-gold);color:var(--gold)}
.lpc-remove{background:none;border:1px solid rgba(232,93,38,.2);border-radius:6px;color:var(--orange);font-size:11px;padding:4px 10px;cursor:pointer;transition:all .2s}
.lpc-remove:hover{background:var(--orange-dim)}
.add-payment-btn{background:var(--gold-dim);border:1px dashed var(--border-gold);color:var(--gold);border-radius:var(--r);padding:12px;font-size:14px;cursor:pointer;width:100%;transition:all .2s;margin-top:4px}
.add-payment-btn:hover{background:rgba(212,175,55,.2)}

/* Payment type grid */
.payment-type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.pt-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:14px 8px;text-align:center;cursor:pointer;transition:all .2s}
.pt-card:hover,.pt-card.selected{border-color:var(--border-gold);background:var(--gold-dim)}
.pt-logo{font-size:22px;height:28px;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.pt-name{font-size:11px;color:var(--w60)}
.payment-form-panel{background:var(--bg3);border:1px solid var(--border-gold);border-radius:var(--r);padding:20px;margin-top:4px;animation:fadeUp .3s ease}
.payment-form-panel h5{font-size:15px;font-weight:600;margin-bottom:16px}
.pp-oauth-note{font-size:12px;color:var(--w60);background:var(--bg);border-radius:8px;padding:8px 12px;margin:10px 0;border-left:3px solid var(--border-gold)}

@media(max-width:600px){
  .account-settings-card{padding:20px 16px}
  .as-form-grid{grid-template-columns:1fr}
  .as-form-grid [style*="grid-column"]{grid-column:1!important}
  .payment-type-grid{grid-template-columns:repeat(2,1fr)}
  .as-tabs{gap:4px}
  .as-tab{font-size:11px;padding:6px 10px}
}

/* ══════════════════════════════
   PROFILE MODAL ENHANCED
══════════════════════════════ */
.profile-modal-card{max-width:520px;padding:28px}
.pm-header{display:flex;gap:16px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.pm-header-info{flex:1}
.pm-username{font-size:13px;color:var(--gold);margin-bottom:3px}
.pm-bio{font-size:13px;color:var(--w60);margin-top:4px;line-height:1.5;font-style:italic}
.pm-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:20px}
.pm-stat{background:var(--bg);border-radius:var(--r);padding:10px 6px;text-align:center}
.pm-stat span{display:block;font-size:17px;font-weight:700;color:var(--gold)}
.pm-stat small{font-size:10px;color:var(--w60)}
.pm-payments-section{background:var(--bg);border-radius:var(--r);padding:14px;margin-bottom:18px}
.pm-payments-label{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--w60);margin-bottom:10px}
.pm-payment-pill{display:inline-flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--border);border-radius:100px;padding:4px 12px;font-size:12px;margin:3px;cursor:pointer;transition:border-color .2s}
.pm-payment-pill:hover{border-color:var(--border-gold)}
.pm-payment-pill.default-pill{border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.08)}
.pm-add-payment{background:none;border:1px dashed var(--border);border-radius:8px;color:var(--w60);font-size:12px;padding:7px 14px;cursor:pointer;margin-top:8px;width:100%;transition:all .2s}
.pm-add-payment:hover{border-color:var(--border-gold);color:var(--gold)}
.pm-edit h4{font-size:14px;font-weight:600;margin-bottom:12px}
.pm-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.pm-edit-grid label{display:block;font-size:12px;color:var(--w60);margin-bottom:5px}
.pm-edit-grid input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--white);padding:9px 12px;outline:none;font-size:13px;transition:border-color .2s}
.pm-edit-grid input:focus{border-color:var(--gold)}
.pm-edit-btns{display:flex;gap:10px;justify-content:flex-end}

/* ══════════════════════════════
   WALLET ENHANCED
══════════════════════════════ */
.wallet-top-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px;gap:12px;flex-wrap:wrap}
.wallet-settings-btn{background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--w60);font-size:13px;padding:8px 16px;cursor:pointer;transition:all .2s;white-space:nowrap}
.wallet-settings-btn:hover{border-color:var(--border-gold);color:var(--gold)}
.wbc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}
.wbc-chart-area{display:flex;gap:2px;align-items:flex-end;height:44px}
.wbc-bar{width:8px;background:var(--gold-dim);border-radius:2px;transition:height .6s ease}
.wbc-bar.this-month{background:var(--gold)}
.wbc-btns{display:flex;gap:10px;flex-wrap:wrap}
.wbc-btn{padding:10px 18px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .2s;flex:1;min-width:80px;text-align:center}
.wbc-btn.primary{background:var(--gold);color:var(--bg)}
.wbc-btn.primary:hover{background:#c9a22a;transform:translateY(-1px)}
.wbc-btn.ghost{background:var(--w10);color:var(--white);border:1px solid var(--border)}
.wbc-btn.ghost:hover{background:rgba(255,255,255,.15)}
.form-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.form-close-btn{background:none;border:1px solid var(--border);border-radius:8px;color:var(--w60);width:32px;height:32px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .2s}
.form-close-btn:hover{border-color:var(--orange);color:var(--orange)}
/* Recipient search */
.send-search-row{position:relative;margin-bottom:14px}
.send-input-wrap{position:relative}
.recipient-suggestions{position:absolute;top:100%;left:0;right:0;background:var(--bg3);border:1px solid var(--border-gold);border-radius:0 0 10px 10px;z-index:50;display:none;max-height:200px;overflow-y:auto}
.recipient-suggestions.open{display:block}
.rec-suggest-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .2s;border-bottom:1px solid var(--border)}
.rec-suggest-item:last-child{border-bottom:none}
.rec-suggest-item:hover{background:var(--gold-dim)}
.rsi-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--gold-dim);color:var(--gold);flex-shrink:0}
.rsi-info{flex:1}
.rsi-name{font-size:13px;font-weight:600}
.rsi-sub{font-size:11px;color:var(--w60)}
.recipient-preview{background:var(--gold-dim);border:1px solid var(--border-gold);border-radius:8px;padding:10px 14px;margin-top:8px;display:flex;align-items:center;gap:10px}
.rp-avatar{width:36px;height:36px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--bg)}
.rp-name{font-size:13px;font-weight:600;color:var(--gold)}
.rp-detail{font-size:11px;color:var(--w60)}
.fee-row{font-size:12px;color:var(--w60);margin-top:4px;background:var(--bg);border-radius:6px;padding:6px 10px}
.send-note-row{margin-top:12px}
.send-note-row label{display:block;font-size:13px;color:var(--w60);margin-bottom:6px}
.send-note-row input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--white);padding:10px 14px;outline:none;font-size:14px;transition:border-color .2s}
.send-note-row input:focus{border-color:var(--gold)}
/* Dynamic payment methods */
.payment-methods-dynamic{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;margin-bottom:8px}
.pmd-card{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:9px 14px;cursor:pointer;transition:all .2s;font-size:13px}
.pmd-card:hover{border-color:var(--border-gold)}
.pmd-card.selected{background:var(--gold-dim);border-color:var(--gold);color:var(--gold)}
.pmd-logo{font-size:16px}
.pmd-detail{font-size:11px;color:var(--w60);margin-top:1px}
.pmd-card.selected .pmd-detail{color:rgba(212,175,55,.7)}
.no-methods-notice{font-size:13px;color:var(--w60);background:var(--bg);border-radius:8px;padding:10px 14px;border:1px dashed var(--border)}
.no-methods-notice a{color:var(--gold)}
/* Converter */
.converter-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end;margin-bottom:14px}
.conv-swap-btn{background:var(--bg3);border:1px solid var(--border);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:all .2s;margin-bottom:2px}
.conv-swap-btn:hover{border-color:var(--border-gold);color:var(--gold);transform:rotate(180deg)}
.conv-rate-display{font-size:14px;color:var(--gold);background:var(--gold-dim);border-radius:8px;padding:10px 14px;margin-bottom:14px;text-align:center}
.conv-rates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.conv-rate-card{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:12px}
.conv-rate-card .from{color:var(--w60);margin-bottom:2px}
.conv-rate-card .to{font-size:14px;font-weight:700;color:var(--gold)}
/* Wallet section header */
.wallet-section-header{display:flex;align-items:center;justify-content:space-between;margin-top:28px;margin-bottom:12px}
.wallet-link-btn{background:var(--gold-dim);border:1px solid var(--border-gold);color:var(--gold);border-radius:8px;font-size:12px;font-weight:600;padding:6px 14px;cursor:pointer;transition:all .2s}
.wallet-link-btn:hover{background:rgba(212,175,55,.2)}
/* Spending summary */
.spending-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:8px}
.spend-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:14px}
.spend-icon{font-size:22px;margin-bottom:8px}
.spend-label{font-size:12px;color:var(--w60);margin-bottom:4px}
.spend-val{font-size:18px;font-weight:700;color:var(--white)}
.spend-sub{font-size:11px;color:var(--w60);margin-top:2px}
.spend-card.positive .spend-val{color:#22c55e}
.spend-card.negative .spend-val{color:var(--orange)}
/* Tx filters */
.tx-filters{display:flex;gap:8px;margin-bottom:14px}
.tx-filter{background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--w60);padding:6px 16px;font-size:13px;cursor:pointer;transition:all .2s}
.tx-filter.active{background:var(--gold-dim);border-color:var(--border-gold);color:var(--gold)}
/* Wallet linked methods */
.wlm-card{display:flex;align-items:center;gap:12px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;margin-bottom:8px;transition:border-color .2s}
.wlm-card:hover{border-color:var(--border-gold)}
.wlm-card.default-method{border-color:rgba(34,197,94,.25)}
.wlm-logo{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.wlm-info{flex:1}
.wlm-name{font-size:14px;font-weight:600}
.wlm-detail{font-size:12px;color:var(--w60)}
.wlm-badge{font-size:10px;background:rgba(34,197,94,.12);color:#22c55e;border:1px solid rgba(34,197,94,.2);border-radius:100px;padding:2px 8px;flex-shrink:0}

@media(max-width:600px){
  .pm-stats{grid-template-columns:repeat(3,1fr)}
  .pm-edit-grid{grid-template-columns:1fr}
  .converter-grid{grid-template-columns:1fr}
  .conv-swap-btn{transform:rotate(90deg);margin:0 auto}
}

/* TX item with icon */
.tx-item{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;display:flex;justify-content:space-between;align-items:center;transition:border-color .2s;margin-bottom:6px}
.tx-item:hover{border-color:var(--border)}
.tx-item-left{display:flex;align-items:center;gap:12px}
.tx-icon{font-size:20px;flex-shrink:0}
.tx-item-info strong{display:block;font-size:14px;margin-bottom:2px}
.tx-item-info small{font-size:12px;color:var(--w60)}

/* ══════════════════════════════
   MISSING CLASS FIXES
══════════════════════════════ */

/* phone-preview-inner — wraps landing hero phone content */
.phone-preview-inner{width:100%;display:flex;flex-direction:column;gap:12px}

/* hwc-left — left side of wallet card on home screen */
.hwc-left{flex:1;min-width:0}

/* powerup-toggles — container for setup power-up checkboxes */
.powerup-toggles{display:flex;flex-direction:column;gap:8px}

/* pm-edit-grid, pm-edit-btns — profile modal quick-edit layout */
.pm-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:4px}
.pm-edit-grid label{display:block;font-size:12px;color:var(--w60);margin-bottom:5px}
.pm-edit-grid input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;
  color:var(--white);padding:9px 12px;font-size:14px;outline:none;transition:border-color .2s}
.pm-edit-grid input:focus{border-color:var(--gold)}
.pm-edit-btns{display:flex;gap:10px;margin-top:14px;justify-content:flex-end}

/* pm-payments-section — linked payments row in profile modal */
.pm-payments-section{margin-bottom:18px}
.pm-payments-label{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--w60);margin-bottom:8px}
.pm-payment-pill{display:inline-flex;align-items:center;gap:4px;background:var(--bg3);
  border:1px solid var(--border);border-radius:100px;padding:4px 10px;font-size:11px;margin-right:5px;margin-bottom:4px}
.pm-payment-pill.default-pill{border-color:var(--border-gold);background:var(--gold-dim);color:var(--gold)}
.pm-add-payment{background:none;border:1px dashed var(--border-gold);color:var(--gold);
  border-radius:8px;padding:7px 14px;font-size:12px;cursor:pointer;transition:all .2s;margin-top:8px}
.pm-add-payment:hover{background:var(--gold-dim)}

/* Wallet screen linked methods */
.wlm-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);
  padding:12px 14px;display:flex;align-items:center;gap:10px;margin-bottom:8px;transition:border-color .2s}
.wlm-card.default-method{border-color:var(--border-gold)}
.no-methods-notice{font-size:13px;color:var(--w60);padding:12px 0}
.no-methods-notice a{color:var(--gold)}

/* Wallet spending summary */
.wallet-summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:20px}
.wsm-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:14px;text-align:center}
.wsm-val{font-size:18px;font-weight:700;color:var(--gold);margin-bottom:3px}
.wsm-label{font-size:11px;color:var(--w60)}

/* Saved accounts grid */
.saved-accounts-grid{display:flex;flex-direction:column;gap:8px}

@media(max-width:520px){
  .pm-edit-grid{grid-template-columns:1fr}
}

/* ══════════════════════════════
   PAYMENT METHOD DROPDOWN
══════════════════════════════ */
.pay-dropdown{position:relative;user-select:none}
.pay-dropdown-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--bg);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;cursor:pointer;transition:border-color .2s,box-shadow .2s;
  min-height:56px;
}
.pay-dropdown-trigger:hover{border-color:var(--border-gold)}
.pdd-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.pdd-logo{
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;transition:all .2s;
}
.pdd-name{font-size:14px;font-weight:600;margin-bottom:2px;display:flex;align-items:center;gap:6px}
.pdd-detail{font-size:12px;color:var(--w60)}
.pdd-arrow{font-size:13px;color:var(--w60);transition:transform .2s;flex-shrink:0}
.default-tag{
  font-size:10px;background:rgba(34,197,94,.12);color:#22c55e;
  border:1px solid rgba(34,197,94,.25);border-radius:100px;
  padding:1px 7px;font-weight:600;
}

/* Dropdown menu */
.pay-dropdown-menu{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--bg3);border:1px solid var(--border-gold);
  border-radius:12px;z-index:300;
  max-height:0;overflow:hidden;
  transition:max-height .3s cubic-bezier(.4,0,.2,1), opacity .2s;
  opacity:0;pointer-events:none;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.pay-dropdown-menu.open{
  max-height:360px;overflow-y:auto;opacity:1;pointer-events:all;
}
.pddm-section-label{
  font-size:10px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--w60);padding:10px 14px 4px;
}
.pddm-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;cursor:pointer;transition:background .15s;
  position:relative;
}
.pddm-item:hover{background:var(--w10)}
.pddm-item.selected{background:var(--gold-dim)}
.pddm-item.unlinked{opacity:.75}
.pddm-item.unlinked:hover{opacity:1}
.pddm-logo{
  width:34px;height:34px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;
}
.pddm-info{flex:1;min-width:0}
.pddm-name{font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pddm-detail{font-size:11px;color:var(--w60);margin-top:1px}
.pddm-check{
  color:var(--gold);font-size:14px;font-weight:700;
  width:22px;height:22px;border-radius:50%;
  background:var(--gold-dim);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.pddm-link-btn{
  background:none;border:1px solid var(--border-gold);color:var(--gold);
  border-radius:6px;padding:3px 10px;font-size:11px;cursor:pointer;
  flex-shrink:0;transition:all .2s;margin-left:4px;
}
.pddm-link-btn:hover{background:var(--gold-dim)}
.pddm-add-btn{
  display:flex;align-items:center;gap:8px;padding:11px 14px;
  font-size:13px;color:var(--gold);cursor:pointer;
  border-top:1px solid var(--border);transition:background .15s;
}
.pddm-add-btn:hover{background:var(--gold-dim)}
.pddm-add-btn span{
  width:22px;height:22px;border-radius:50%;background:var(--gold-dim);
  border:1px solid var(--border-gold);display:flex;align-items:center;
  justify-content:center;font-size:14px;font-weight:700;
}

/* Scrollbar styling for dropdown */
.pay-dropdown-menu::-webkit-scrollbar{width:4px}
.pay-dropdown-menu::-webkit-scrollbar-track{background:transparent}
.pay-dropdown-menu::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

/* Remove old pmd-card styles if present */
.pmd-card{display:none!important}

/* ── QUICK AMOUNT CHIPS ── */
.quick-amounts{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 4px}
.qa-chip{
  background:var(--bg);border:1px solid var(--border);border-radius:7px;
  padding:5px 12px;font-size:12px;font-weight:600;color:var(--w60);
  cursor:pointer;transition:all .2s;
}
.qa-chip:hover,.qa-chip.active{
  background:var(--gold-dim);border-color:var(--border-gold);color:var(--gold);
}
.qa-chip.qa-all{color:var(--orange);border-color:rgba(232,93,38,.3)}
.qa-chip.qa-all:hover{background:var(--orange-dim)}

/* ── PIN CONFIRM ROW ── */
.pin-confirm-row{
  background:rgba(212,175,55,.06);border:1px solid var(--border-gold);
  border-radius:var(--r);padding:14px;margin-top:12px;
  animation:fadeUp .3s ease;
}
.pin-confirm-row label{color:var(--gold);font-size:13px;font-weight:600}
.pin-input-wrap{margin-top:8px}
.pin-input-wrap input{
  background:var(--bg);border:1px solid var(--border-gold);
  border-radius:8px;padding:10px 14px;color:var(--white);
  font-size:18px;letter-spacing:6px;width:100%;max-width:200px;
  outline:none;text-align:center;
}
.pin-input-wrap input:focus{border-color:var(--gold)}

/* ── SUGG LABEL ── */
.sugg-label{
  font-size:10px;letter-spacing:1px;text-transform:uppercase;
  color:var(--w60);padding:8px 12px 4px;
}

/* ── WALLET CHART CARD ── */
.wallet-chart-card{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--r);padding:16px;margin-bottom:20px;
}
.wcc-title{font-size:13px;font-weight:600;color:var(--w60);margin-bottom:12px}

/* ══════════════════════════════
   LUDO CLUB — ENHANCED STYLES
══════════════════════════════ */

/* Player cards v2 */
.ludo-player-card2{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:10px;padding:10px 12px;margin-bottom:8px;
  transition:all .2s;
}
.ludo-player-card2.active-player{
  border-color:var(--border-gold);
  background:var(--gold-dim);
  box-shadow:0 0 12px rgba(212,175,55,.2);
}
.lpc-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.lpc-colorbar{width:4px;height:18px;border-radius:2px;flex-shrink:0}
.lpc-name{font-size:13px;font-weight:600;flex:1}
.lpc-badge{font-size:10px;background:var(--w10);border:1px solid var(--border);border-radius:4px;padding:1px 6px;color:var(--w60)}
.lpc-stats{display:flex;justify-content:space-between;font-size:11px;color:var(--w60);margin-bottom:4px}
.lpc-tokens{font-size:14px;letter-spacing:2px}
.lpp-section-label{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--w60);margin-bottom:6px}

/* Standing row */
.standing-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.standing-row:last-child{border-bottom:none}
.standing-rank{width:24px;height:24px;border-radius:6px;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* Event row */
.event-row{font-size:11px;color:var(--w60);padding:3px 0;border-bottom:1px solid rgba(255,255,255,.04)}

/* Turn banner */
.turn-banner{
  text-align:center;font-size:14px;font-weight:600;
  background:var(--gold-dim);border:1px solid var(--border-gold);
  border-radius:10px;padding:10px 16px;margin-bottom:14px;color:var(--gold);
  letter-spacing:.3px;
}
.turn-banner.cpu-turn{background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.25);color:#60a5fa}

/* Float animation */
.float-anim{
  position:absolute;font-size:16px;font-weight:700;color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
  animation:floatUp 1.4s ease forwards;pointer-events:none;
  white-space:nowrap;
}
@keyframes floatUp{
  0%  {transform:translateY(0) scale(.8);opacity:0}
  15% {transform:translateY(-8px) scale(1.1);opacity:1}
  80% {transform:translateY(-50px) scale(1);opacity:1}
  100%{transform:translateY(-80px) scale(.9);opacity:0}
}

/* Ludo board wrap */
.ludo-board-wrap{position:relative;flex-shrink:0}
.ludo-board-wrap canvas{display:block;max-width:100%;height:auto}

/* Dice overlay */
.ludo-dice-overlay{
  position:absolute;bottom:8px;right:8px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.ludo-dice-3d{
  width:58px;height:58px;background:linear-gradient(145deg,#fff,#e0e0e0);
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:32px;cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.5),inset 0 1px 2px rgba(255,255,255,.8);
  transition:transform .1s,box-shadow .1s;border:2px solid #ccc;
}
.ludo-dice-3d:hover{transform:scale(1.08);box-shadow:0 6px 18px rgba(0,0,0,.6)}
.ludo-dice-3d:active{transform:scale(.96)}
.ludo-dice-3d.rolling{animation:diceSpin .4s ease}
@keyframes diceSpin{
  0%{transform:rotateY(0) scale(1)}
  40%{transform:rotateY(180deg) scale(1.2)}
  100%{transform:rotateY(360deg) scale(1)}
}
.ludo-dice-val{
  font-size:22px;font-weight:700;color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.8);
  background:rgba(0,0,0,.5);border-radius:8px;padding:2px 10px;
}

/* Capture overlay */
.capture-overlay{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);z-index:800;animation:fadeIn .2s;
}
.capture-msg{
  font-size:28px;font-weight:700;color:#fff;
  background:rgba(239,68,68,.9);border-radius:16px;padding:20px 36px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);text-align:center;
}

/* Power-up slots */
.pp-slot{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--bg);border:1px solid var(--border);border-radius:8px;
  padding:6px 10px;font-size:18px;cursor:pointer;transition:all .2s;
  margin:3px;
}
.pp-slot:hover{border-color:var(--border-gold);background:var(--gold-dim);transform:scale(1.05)}
.pp-count{font-size:10px;background:var(--gold);color:var(--bg);border-radius:100px;padding:1px 5px;font-weight:700}

@media(max-width:900px){
  .ludo-main-layout{flex-direction:column;align-items:center}
  .ludo-players-panel,.ludo-right-panel{width:100%;max-width:540px}
  .ludo-board-wrap canvas{width:320px!important;height:320px!important}
}
@media(max-width:480px){
  .ludo-board-wrap canvas{width:280px!important;height:280px!important}
  .ludo-dice-3d{width:46px;height:46px;font-size:24px}
}

/* ══════════════════════════════
   ADVANCED UI — v2.0
══════════════════════════════ */

/* Nav action buttons */
.app-nav-actions{display:flex;align-items:center;gap:6px}
.nav-icon-btn{
  background:none;border:1px solid var(--border);border-radius:8px;
  color:var(--w60);font-size:16px;padding:6px 10px;cursor:pointer;
  transition:all .2s;position:relative;
}
.nav-icon-btn:hover{color:var(--white);border-color:var(--border-gold);background:var(--gold-dim)}

/* Notification badge */
.notif-badge{
  position:absolute;top:-4px;right:-4px;
  background:#ef4444;color:#fff;border-radius:100px;
  font-size:9px;font-weight:700;padding:1px 5px;
  min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;
}

/* Notification panel dropdown */
.notif-panel{
  position:absolute;top:calc(100% + 10px);right:0;width:360px;
  background:linear-gradient(145deg,#1a1614,#120f0c);
  border:1px solid rgba(212,175,55,.25);border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.7),0 0 0 1px rgba(212,175,55,.06);
  z-index:400;overflow:hidden;
  transform:translateY(-8px) scale(.97);opacity:0;pointer-events:none;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),opacity .2s ease;
}
.notif-panel[style*="display: block"],.notif-panel[style*="display:block"]{
  transform:translateY(0) scale(1);opacity:1;pointer-events:all;
}
.notif-panel-open{
  transform:translateY(0) scale(1) !important;opacity:1 !important;pointer-events:all !important;
}
.notif-item{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.04);transition:background .2s,transform .1s;cursor:pointer;position:relative}
.notif-item:hover{background:var(--w10)}
.notif-item.unread{background:rgba(212,175,55,.06)}
.notif-icon{font-size:22px;flex-shrink:0;margin-top:1px}
.notif-content{flex:1}
.notif-title{font-size:13px;font-weight:600;margin-bottom:2px}
.notif-body{font-size:12px;color:var(--w60);line-height:1.5}
.notif-time{font-size:10px;color:var(--w30);margin-top:4px}
.notif-empty{text-align:center;padding:24px;color:var(--w60);font-size:13px}

/* Online dot */
.online-dot{
  position:absolute;bottom:0;right:0;
  width:10px;height:10px;border-radius:50%;
  border:2px solid var(--bg2);
}

/* Global search results */
.gsr-item{display:flex;align-items:center;gap:12px;padding:12px 20px;cursor:pointer;transition:background .15s}
.gsr-item:hover{background:var(--w10)}
.gsr-icon{font-size:22px;flex-shrink:0}
.gsr-title{font-size:14px;font-weight:600;margin-bottom:2px}
.gsr-sub{font-size:12px;color:var(--w60)}
.gsr-empty{text-align:center;padding:20px;color:var(--w60);font-size:13px}

/* KYC badge */
.kyc-badge{font-size:11px;font-weight:600;border-radius:6px;padding:4px 10px;cursor:pointer;transition:opacity .2s}
.kyc-badge:hover{opacity:.85}

/* Smart suggestions */
.smart-suggestions{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.smart-tip{
  display:flex;align-items:center;gap:10px;
  background:var(--bg3);border:1px solid var(--border);border-radius:10px;
  padding:10px 14px;cursor:pointer;transition:all .2s;
}
.smart-tip:hover{border-color:var(--border-gold);background:var(--gold-dim)}
.smart-tip-icon{font-size:18px;flex-shrink:0}
.smart-tip-text{flex:1;font-size:13px;color:var(--w60)}
.smart-tip-arrow{font-size:14px;color:var(--gold)}

/* Achievements */
.ach-item{
  display:flex;align-items:center;gap:12px;padding:12px;
  border-radius:10px;border:1px solid var(--border);margin-bottom:8px;
  transition:all .2s;
}
.ach-item.earned{border-color:var(--border-gold);background:var(--gold-dim)}
.ach-item.locked{opacity:.6}
.ach-icon{font-size:28px;flex-shrink:0;width:44px;text-align:center}
.ach-info{flex:1}
.ach-title{font-size:14px;font-weight:600;margin-bottom:2px}
.ach-desc{font-size:12px;color:var(--w60)}
.ach-xp{font-size:12px;font-weight:700;color:var(--w60)}
.ach-xp.earned{color:var(--gold)}

/* Trend cards */
.trend-card{
  display:flex;align-items:flex-start;gap:12px;padding:14px;
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);
  cursor:pointer;transition:all .2s;margin-bottom:10px;
}
.trend-card:hover{border-color:var(--border-gold);transform:translateX(2px)}
.trend-icon-wrap{width:40px;height:40px;border-radius:10px;background:var(--gold-dim);border:1px solid var(--border-gold);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.trend-body{flex:1;min-width:0}
.trend-title{font-size:14px;font-weight:600;margin-bottom:3px}
.trend-text{font-size:12px;color:var(--w60);line-height:1.5}
.trend-time{font-size:10px;color:var(--w30);flex-shrink:0;margin-top:2px}

/* ── LIGHT MODE ── */
.light-mode{--bg:#f0ede8;--bg2:#e8e4de;--bg3:#ffffff;--bg4:#ede9e4;--border:rgba(0,0,0,.12);--border-gold:rgba(180,130,20,.3);--white:#1a1209;--w60:rgba(0,0,0,.55);--w30:rgba(0,0,0,.3);--w10:rgba(0,0,0,.07);--gold-dim:rgba(180,130,20,.1)}
.light-mode .app-nav{background:var(--bg2);border-color:rgba(0,0,0,.1)}
.light-mode .auth-card,.light-mode .modal-card,.light-mode .chart-card,.light-mode .pay-dropdown-menu,.light-mode .notif-panel{background:#fff;color:#1a1209}
.light-mode .pay-dropdown-trigger,.light-mode .search-input,.light-mode input,.light-mode select,.light-mode textarea{background:var(--bg2)!important;color:#1a1209!important}
.light-mode .ludo-dice-3d{background:linear-gradient(145deg,#e0e0e0,#f5f5f5)}

@media(max-width:520px){
  .app-nav-actions{gap:4px}
  .nav-icon-btn{padding:5px 8px;font-size:14px}
}

/* ── ADMIN PORTAL LINK ── */
.admin-portal-link{
  display:inline-flex;flex-direction:column;align-items:center;
  background:rgba(212,175,55,.08);border:1px solid var(--border-gold);
  border-radius:8px;padding:8px 20px;color:var(--gold);font-size:13px;
  font-weight:600;text-decoration:none;transition:all .2s;
}
.admin-portal-link:hover{background:var(--gold-dim);transform:translateY(-1px)}

/* ── LUDO DICE SELECTOR ── */
.dice-selector{
  display:flex;gap:6px;justify-content:center;flex-wrap:wrap;
  margin-bottom:10px;padding:10px;
  background:var(--bg3);border:1px solid var(--border);border-radius:10px;
}
.dice-face-btn{
  width:44px;height:44px;border-radius:8px;
  background:linear-gradient(145deg,#fff,#e0e0e0);
  border:2px solid #ccc;font-size:22px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;
  box-shadow:0 3px 8px rgba(0,0,0,.3);
}
.dice-face-btn:hover{transform:scale(1.1);border-color:var(--gold)}
.dice-face-btn.selected{border-color:#ffd700;box-shadow:0 0 12px rgba(255,215,0,.6);transform:scale(1.12)}
.dice-face-btn:disabled{opacity:.35;cursor:not-allowed;transform:none}

/* Piece selection panel */
.piece-select-panel{
  background:var(--bg3);border:1px solid var(--border-gold);border-radius:10px;
  padding:12px;margin-bottom:10px;text-align:center;
}
.piece-select-label{font-size:12px;color:var(--gold);margin-bottom:8px;letter-spacing:.5px;text-transform:uppercase}
.piece-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.piece-btn{
  width:44px;height:44px;border-radius:50%;border:2px solid var(--border);
  font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.piece-btn:hover{transform:scale(1.1)}
.piece-btn.can-move{border-color:#ffd700;box-shadow:0 0 10px rgba(255,215,0,.5);animation:piecePulse 1s infinite}
.piece-btn.disabled{opacity:.3;cursor:not-allowed}
.piece-btn.in-yard{opacity:.5}
.piece-btn.at-home{background:#ffd700!important;color:#000!important}
@keyframes piecePulse{0%,100%{box-shadow:0 0 8px rgba(255,215,0,.4)}50%{box-shadow:0 0 18px rgba(255,215,0,.9)}}

/* Snake dice selector */
.snake-dice-selector{
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  padding:12px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;
  margin-bottom:10px;
}
.snake-dice-btn{
  width:52px;height:52px;border-radius:10px;
  background:linear-gradient(145deg,#fff,#ddd);border:2px solid #bbb;
  font-size:26px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s;box-shadow:0 3px 8px rgba(0,0,0,.35);
}
.snake-dice-btn:hover:not(:disabled){transform:scale(1.08);border-color:var(--gold)}
.snake-dice-btn.selected{border-color:#ffd700;box-shadow:0 0 14px rgba(255,215,0,.7)}
.snake-dice-btn:disabled{opacity:.3;cursor:not-allowed}

/* Turn instruction banner */
.game-instruction{
  text-align:center;font-size:13px;font-weight:600;
  padding:8px 14px;border-radius:8px;margin-bottom:8px;
  background:rgba(212,175,55,.1);border:1px solid var(--border-gold);color:var(--gold);
}

/* ══════════════════════════════════════════════
   3D DICE — Snake & Ladder
══════════════════════════════════════════════ */
.dice-3d-scene{
  width:90px;height:90px;perspective:300px;
  margin:0 auto 8px;cursor:pointer;
}
.dice-3d-cube{
  width:80px;height:80px;position:relative;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.4,0,.2,1);
  margin:5px auto;
}
.dice-3d-cube:hover{transform:rotateX(5deg) rotateY(5deg)}
.dice-face{
  position:absolute;width:80px;height:80px;
  border-radius:12px;
  background:linear-gradient(145deg,#f0f0f0,#d0d0d0);
  border:2px solid #aaa;
  display:grid;padding:10px;gap:4px;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.8),inset 0 -2px 4px rgba(0,0,0,.2);
}
.dice-face span{
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#555,#111);
  box-shadow:0 1px 3px rgba(0,0,0,.5);
  place-self:center;
}
/* 6 faces positioning */
.dice-face:nth-child(1){transform:translateZ(40px)} /* front=1 */
.dice-face:nth-child(2){transform:rotateY(180deg) translateZ(40px)} /* back=6 */
.dice-face:nth-child(3){transform:rotateY(90deg) translateZ(40px)} /* right=2 */
.dice-face:nth-child(4){transform:rotateY(-90deg) translateZ(40px)} /* left=5 */
.dice-face:nth-child(5){transform:rotateX(90deg) translateZ(40px)} /* top=3 */
.dice-face:nth-child(6){transform:rotateX(-90deg) translateZ(40px)} /* bottom=4 */

/* Pip grid layouts */
.dice-1{place-items:center}
.dice-2{grid-template-columns:1fr 1fr;grid-template-rows:1fr;
  & span:first-child{align-self:start} & span:last-child{align-self:end}}
.dice-2 span:first-child{align-self:start;justify-self:start}
.dice-2 span:last-child{align-self:end;justify-self:end}
.dice-3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr;
  grid-template-areas:"a .""b b""c ."}
.dice-4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.dice-5{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr;
  grid-template-areas:"a b""c .""d e"}
.dice-6{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr}

/* Dice roll animations — 24 possible orientations */
@keyframes diceRoll{
  0%  {transform:rotateX(0) rotateY(0) rotateZ(0)}
  20% {transform:rotateX(360deg) rotateY(180deg) rotateZ(90deg)}
  40% {transform:rotateX(720deg) rotateY(360deg) rotateZ(180deg)}
  60% {transform:rotateX(540deg) rotateY(540deg) rotateZ(270deg)}
  80% {transform:rotateX(900deg) rotateY(720deg) rotateZ(360deg)}
  100%{transform:rotateX(var(--end-x)) rotateY(var(--end-y)) rotateZ(0deg)}
}
.dice-3d-cube.rolling{animation:diceRoll .8s ease forwards}
.dice-roll-label{
  text-align:center;font-size:13px;font-weight:700;color:var(--gold);
  min-height:20px;
}

/* PIP dice row (manual selection) */
.snake-pip-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:4px 0}
.pip-die{
  width:42px;height:42px;border-radius:8px;
  background:linear-gradient(145deg,#f5f5f5,#d8d8d8);
  border:2px solid #bbb;cursor:pointer;position:relative;
  box-shadow:0 3px 8px rgba(0,0,0,.3),inset 0 1px 2px rgba(255,255,255,.7);
  transition:all .2s;display:grid;padding:5px;gap:2px;
}
.pip-die:hover{transform:translateY(-2px) scale(1.08);border-color:var(--gold);box-shadow:0 6px 16px rgba(212,175,55,.4)}
.pip-die.selected{border-color:#ffd700;background:linear-gradient(145deg,#fffbe6,#ffeaa0);box-shadow:0 0 14px rgba(255,215,0,.8);transform:scale(1.12)}
.pip-die.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}
.pip-dot{
  width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#555,#111);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  place-self:center;
}
/* Pip positions */
.pip-dot.tl{grid-area:1/1}
.pip-dot.tr{grid-area:1/2}
.pip-dot.ml{grid-area:2/1}
.pip-dot.mr{grid-area:2/2}
.pip-dot.bl{grid-area:3/1}
.pip-dot.br{grid-area:3/2}
.pip-dot.center{grid-area:2/1/2/3;justify-self:center}

/* pip-die grid for 6 */
.pip-die{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr}

/* Player card enhanced */
.spc-avatar{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;
}
.spc-info{flex:1}
.snake-info-panel .snake-player-card{display:flex;align-items:center;gap:10px}

/* ══════════════════════════════════════════════
   3D SPINNING BOTTLE — Truth or Dare
══════════════════════════════════════════════ */
.tod-3d-scene{
  width:280px;height:240px;perspective:600px;
  margin:0 auto 16px;position:relative;
}
.tod-felt-mat{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:220px;height:24px;border-radius:50%;
  background:radial-gradient(ellipse,#1a4a1a,#0d2a0d);
  box-shadow:0 4px 20px rgba(0,0,0,.5);
}
.tod-bottle-container{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotateX(-20deg);
  transform-style:preserve-3d;
  width:30px;height:180px;
  transition:none;
}
.tod-bottle-container.spinning{
  animation:bottleSpin3d var(--spin-duration) cubic-bezier(.4,0,.1,1) forwards;
}
@keyframes bottleSpin3d{
  0%  {transform:translate(-50%,-50%) rotateX(-20deg) rotateZ(0deg)}
  100%{transform:translate(-50%,-50%) rotateX(-20deg) rotateZ(var(--spin-angle))}
}

.tod-bottle-3d{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:32px;height:140px;
  transform-style:preserve-3d;
}
.bottle-neck{
  width:14px;height:30px;
  background:linear-gradient(90deg,#1a6b1a,#4caf50,#2e7d32,#1a6b1a);
  border-radius:4px 4px 0 0;
  margin:0 auto;
  box-shadow:2px 0 6px rgba(0,0,0,.3),-2px 0 6px rgba(0,100,0,.2);
  position:relative;
  border-top:3px solid #8B4513;
}
.bottle-neck::before{
  content:'';position:absolute;top:0;left:2px;right:2px;height:60%;
  background:rgba(255,255,255,.25);border-radius:2px;
}
.bottle-body{
  width:32px;height:100px;
  background:linear-gradient(90deg,#0d4a0d,#2e8b2e,#4caf50 40%,#2e8b2e,#0d4a0d);
  border-radius:4px 4px 6px 6px;
  position:relative;overflow:hidden;
  box-shadow:3px 0 8px rgba(0,0,0,.4),-3px 0 8px rgba(0,100,0,.3);
}
.bottle-shine{
  position:absolute;top:8px;left:5px;width:8px;height:70px;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.1),transparent);
  border-radius:4px;
}
.bottle-liquid{
  position:absolute;bottom:0;left:0;right:0;height:70%;
  background:linear-gradient(180deg,rgba(100,255,100,.3),rgba(50,200,50,.5));
  border-radius:0 0 4px 4px;
}
.bottle-base{
  width:36px;height:10px;
  background:linear-gradient(90deg,#0d4a0d,#2e8b2e,#0d4a0d);
  border-radius:0 0 6px 6px;
  margin:0 auto;
  box-shadow:0 4px 8px rgba(0,0,0,.4);
}

/* TRUTH / DARE end labels on bottle */
.tod-end-label{
  position:absolute;left:50%;transform:translateX(-50%);
  width:70px;text-align:center;font-size:12px;font-weight:800;
  letter-spacing:1px;border-radius:6px;padding:4px 6px;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.truth-end{
  top:-28px;
  background:linear-gradient(135deg,#1a3db5,#3b82f6);
  color:#fff;
}
.dare-end{
  bottom:-28px;
  background:linear-gradient(135deg,#cc1f1f,#ef4444);
  color:#fff;
}

/* Sparkles */
.tod-sparkle{
  position:absolute;pointer-events:none;
  font-size:20px;
  animation:sparkleFloat 1.2s ease forwards;
}
@keyframes sparkleFloat{
  0%  {opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(0)}
}

/* Result label */
.tod-result-label{
  text-align:center;font-size:18px;font-weight:800;
  padding:10px 24px;border-radius:12px;margin-top:8px;
  animation:popIn .4s cubic-bezier(.34,1.56,.64,1);
}
.tod-result-label.truth{background:linear-gradient(135deg,#1a3db5,#3b82f6);color:#fff}
.tod-result-label.dare{background:linear-gradient(135deg,#cc1f1f,#ef4444);color:#fff}
@keyframes popIn{0%{transform:scale(0) rotate(-5deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}

/* spin button enhanced */
.tod-spin-btn{
  background:linear-gradient(135deg,#D4AF37,#c9a22a)!important;
  color:var(--bg)!important;font-weight:800!important;
  box-shadow:0 6px 20px rgba(212,175,55,.4)!important;
  font-size:15px!important;padding:12px 28px!important;
}
.tod-spin-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 8px 28px rgba(212,175,55,.6)!important}



/* ═══ SOCIAL LOGIN BUTTONS ═══ */
.social-login-row{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.social-login-btn{
  flex:1;min-width:90px;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 10px;border-radius:10px;font-size:12px;font-weight:600;
  cursor:pointer;border:none;transition:all .2s;white-space:nowrap;
}
.facebook-btn{background:#1877F2;color:#fff}
.facebook-btn:hover{background:#1565d8;transform:translateY(-1px);box-shadow:0 4px 14px rgba(24,119,242,.4)}
.twitter-btn{background:#000;color:#fff;border:1px solid #333}
.twitter-btn:hover{background:#111;transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.4)}
.tiktok-btn{background:#010101;color:#fff;border:1px solid #333;position:relative;overflow:hidden}
.tiktok-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#69C9D0 0%,transparent 40%,#EE1D52 100%);opacity:.15}
.tiktok-btn:hover{background:#111;transform:translateY(-1px);box-shadow:0 4px 14px rgba(238,29,82,.25)}
.social-login-btn:disabled{opacity:.6;cursor:wait;transform:none!important}
.social-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:socialSpin .5s linear infinite;flex-shrink:0}
@keyframes socialSpin{to{transform:rotate(360deg)}}

/* ═══ ONLINE MULTIPLAYER STYLES ═══ */
.online-card{border:1px solid rgba(0,102,204,.4)!important;position:relative;overflow:hidden}
.online-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,51,102,.15),rgba(0,102,204,.05));pointer-events:none}
.online-pulse-dot{
  position:absolute;top:10px;right:10px;width:10px;height:10px;
  border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 rgba(34,197,94,.6);
  animation:livePulse 1.6s infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}
  70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
.live-tag{background:rgba(34,197,94,.15)!important;color:#22c55e!important;border:1px solid rgba(34,197,94,.3)}

/* ═══ SOCIAL SHARE MODAL ═══ */
.share-modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:800;
  display:flex;align-items:flex-end;justify-content:center;
  animation:fadeIn .2s ease;
}
.share-sheet{
  background:var(--bg3);border-radius:20px 20px 0 0;width:100%;max-width:480px;
  padding:20px 20px 32px;animation:slideUp .3s cubic-bezier(.34,1.2,.64,1);
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.share-handle{width:40px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 18px}
.share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.share-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 8px;border-radius:12px;background:var(--bg);
  cursor:pointer;transition:all .2s;border:1px solid var(--border);
}
.share-item:hover{transform:translateY(-3px);border-color:var(--border-gold)}
.share-item-icon{font-size:26px;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.share-item-label{font-size:11px;color:var(--w60);font-weight:500}
.share-fb .share-item-icon{background:#1877F2}
.share-tt .share-item-icon{background:#000;border:1px solid #333}
.share-ig .share-item-icon{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.share-x  .share-item-icon{background:#000;border:1px solid #333}
.share-copy .share-item-icon{background:var(--bg3)}
.share-wa .share-item-icon{background:#25D366}
.share-native .share-item-icon{background:var(--bg3)}

/* Wager opts reuse */
.wager-opt{padding:8px 14px;border-radius:8px;background:var(--bg);border:1px solid var(--border);color:var(--w60);cursor:pointer;font-size:13px;font-weight:600;transition:all .15s}
.wager-opt.active{background:rgba(212,175,55,.15);border-color:var(--gold);color:var(--gold)}

/* ═══ LUDO GAME FIXES ═══ */
@keyframes floatUp {
  0%   { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
  100% { opacity:0; transform:translateX(-50%) translateY(-60px) scale(1.3); }
}

/* Dice overlay — big clickable roll button */
.ludo-dice-overlay {
  position:absolute;
  bottom:12px; right:12px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:pointer;transition:opacity .3s;
}
.ludo-dice-3d {
  width:64px;height:64px;border-radius:14px;
  background:linear-gradient(135deg,#fff,#e8e0d0);
  box-shadow:0 6px 20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.8);
  display:flex;align-items:center;justify-content:center;
  font-size:36px;
  cursor:pointer;transition:transform .1s,box-shadow .1s;
  border:2px solid rgba(0,0,0,.15);
}
.ludo-dice-3d:hover:not(:disabled) {
  transform:scale(1.08) translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.5);
}
.ludo-dice-3d:active { transform:scale(0.95); }
.ludo-dice-val {
  font-size:13px;font-weight:800;color:#ffd700;
  text-shadow:0 1px 4px rgba(0,0,0,.6);letter-spacing:.5px;
}

/* Turn banner */
.turn-banner {
  padding:10px 16px;
  border-radius:10px;
  margin-bottom:12px;
  font-size:13px;font-weight:700;
  border:1px solid;
  text-align:center;
  transition:all .3s;
}

/* Piece buttons */
.piece-btn {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:10px;padding:8px 6px;cursor:default;
  border:2px solid transparent;transition:all .2s;min-width:44px;
}
.piece-btn.can-move {
  cursor:pointer;border-color:rgba(255,255,255,.5);
  box-shadow:0 0 12px rgba(255,215,0,.4);
  animation:tokenPulse 1.2s ease infinite;
}
.piece-btn.can-move:hover { transform:scale(1.1); border-color:#ffd700; }
.piece-btn.selected { border-color:#fff;box-shadow:0 0 16px rgba(255,255,255,.5); }
.piece-btn.disabled { opacity:.35;cursor:not-allowed; }
.piece-btn.at-home  { opacity:.25;cursor:not-allowed; }

@keyframes tokenPulse {
  0%,100% { box-shadow:0 0 8px rgba(255,215,0,.4); }
  50%      { box-shadow:0 0 18px rgba(255,215,0,.8); }
}

/* Canvas cursor */
#ludoCanvas { cursor:pointer; }
.ludo-board-wrap { position:relative; }

/* ═══ DATE OF BIRTH FIELD ═══ */
.dob-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr;
  gap: 8px;
  margin-bottom: 4px;
}
.dob-row select {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  color: var(--white);
  padding: 10px 8px;
  font-size: 13px;
  outline: none;
  width: 100%;
  transition: border-color .2s;
  cursor: pointer;
}
.dob-row select:focus { border-color: var(--gold); }
.dob-row select.error { border-color: #ef4444; }

/* Age badge shown after valid DOB */
#signupDobOk {
  font-size: 11px;
  color: #22c55e;
  margin-top: 3px;
  padding-left: 2px;
}

/* Auth field error shake */
@keyframes shake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
.auth-field input.error,
.auth-field select.error {
  border-color: #ef4444 !important;
  animation: shake .35s ease;
}

/* ═══ LUDO RULES MODAL ═══ */
.rules-section {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.rules-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
}
.rules-section p {
  font-size: 13px;
  color: var(--w60);
  line-height: 1.6;
  margin: 0;
}
.rules-section ul {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}
.rules-section ul li {
  font-size: 13px;
  color: var(--w60);
  line-height: 1.7;
}
.rules-section ul li strong {
  color: var(--white);
}

/* ═══ SNAKE & LADDER DICE UI ═══ */
.snake-dice-display {
  font-size: 56px;
  text-align: center;
  line-height: 1;
  margin-bottom: 4px;
  transition: all .15s;
  user-select: none;
}
.snake-dice-result {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  margin-bottom: 10px;
  min-height: 20px;
}
.snake-roll-btn {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, var(--gold), #c9a22a);
  color: var(--bg);
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 4px 16px rgba(212,175,55,.3);
  letter-spacing: .3px;
}
.snake-roll-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212,175,55,.5);
}
.snake-roll-btn:active:not(:disabled) { transform: scale(.97); }
.snake-roll-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ═══ TOD ADVANCED FEATURES ═══ */
.tod-player-item {
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 8px;
  margin-bottom: 4px;
  transition: all .2s;
}
.tod-player-item.active-player {
  background: rgba(212,175,55,.1);
  border: 1px solid rgba(212,175,55,.3);
  color: var(--gold);
  font-weight: 600;
}
.tod-reactions button:hover { transform: scale(1.2); }
#todChallengeTimer {
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 6px 0;
  transition: color .3s;
}

/* ═══ SNAKE BONUS SQUARES ═══ */
.snake-bonus-indicator {
  position: absolute;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  pointer-events: none;
  animation: floatUp 1.5s ease forwards;
}

/* ═══ LUDO IMPROVEMENTS ═══ */
.piece-btn .piece-tooltip {
  font-size: 8px;
  color: #ffd700;
  margin-top: 2px;
  line-height: 1.2;
}
.ludo-dice-3d {
  transition: transform .15s, box-shadow .15s;
}
.ludo-dice-3d:hover {
  transform: scale(1.1) translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(212,175,55,.5) !important;
}

/* Active player card pulse */
.player-card.active-player {
  animation: playerPulse 2s ease infinite;
}
@keyframes playerPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
  50%      { box-shadow: 0 0 0 6px rgba(212,175,55,.2); }
}

/* ═══ DOB FORMAT TOGGLE ═══ */
#dobFmtBtn:hover {
  background: rgba(212,175,55,.15) !important;
}

/* ═══════════════════════════════════════════════════
   AFRIMATCH DATING APP — Full UI Styles
═══════════════════════════════════════════════════ */

/* Hub Dating Tab */
.afrimatch-tab { background: linear-gradient(135deg,rgba(212,175,55,.15),rgba(232,93,38,.12)) !important; color: var(--gold) !important; border: 1px solid var(--border-gold) !important; }
.afrimatch-tab.active { background: linear-gradient(135deg,rgba(212,175,55,.3),rgba(232,93,38,.2)) !important; }

/* Sections */
.dm-section { animation: fadeInUp .3s ease; }
@keyframes fadeInUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

/* Hero Landing */
.dm-hero { text-align:center; padding: 40px 20px; }
.dm-hero-icon { font-size: 64px; margin-bottom: 12px; animation: heartbeat 2s ease infinite; }
@keyframes heartbeat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
.dm-hero-title { font-size: 32px; font-weight: 900; background: linear-gradient(135deg,var(--gold),var(--orange)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 10px; }
.dm-hero-sub { font-size: 15px; color: var(--w60); line-height: 1.6; margin-bottom: 28px; }
.dm-btn-primary { background: linear-gradient(135deg,var(--gold),var(--orange)); color: #000; border: none; border-radius: 50px; padding: 14px 32px; font-size: 15px; font-weight: 800; cursor: pointer; transition: all .25s; box-shadow: 0 6px 24px rgba(212,175,55,.35); }
.dm-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(212,175,55,.5); }
.dm-btn-ghost { background: none; border: 1.5px solid var(--border); color: var(--w60); border-radius: 50px; padding: 11px 28px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; }
.dm-btn-ghost:hover { border-color: var(--border-gold); color: var(--white); }

/* Setup Wizard */
.dm-wizard { background: var(--bg3); border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px; max-width: 540px; margin: 0 auto; }
.dm-wizard-header { margin-bottom: 24px; }
.dm-wizard-title { font-size: 18px; font-weight: 800; color: var(--gold); margin-bottom: 12px; }
.dm-wizard-progress { display: flex; align-items: center; gap: 12px; }
.dm-prog-bar { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.dm-prog-fill { height: 100%; background: linear-gradient(90deg,var(--gold),var(--orange)); border-radius: 3px; transition: width .4s ease; }
.dm-prog-label { font-size: 12px; color: var(--w60); white-space: nowrap; }
.dm-step-title { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.dm-step-sub { font-size: 13px; color: var(--w60); margin-bottom: 16px; }
.dm-field { margin-bottom: 18px; }
.dm-field label { display: block; font-size: 12px; color: var(--w60); margin-bottom: 7px; letter-spacing: .3px; text-transform: uppercase; font-weight: 600; }
.dm-field input, .dm-field select, .dm-field textarea { width: 100%; background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px; padding: 11px 14px; color: var(--white); outline: none; font-size: 14px; font-family: inherit; transition: border-color .2s; }
.dm-field input:focus, .dm-field select:focus, .dm-field textarea:focus { border-color: var(--gold); }
.dm-field select option { background: var(--bg); }

/* Chips */
.dm-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.dm-chip { background: var(--bg2); border: 1.5px solid var(--border); color: var(--w60); border-radius: 50px; padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; }
.dm-chip:hover { border-color: var(--border-gold); color: var(--white); }
.dm-chip.selected { background: var(--gold-dim); border-color: var(--gold); color: var(--gold); }

/* Photo upload */
.dm-photo-upload { width: 160px; height: 160px; margin: 0 auto 16px; border: 2px dashed var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s; position: relative; overflow: hidden; }
.dm-photo-upload:hover { border-color: var(--border-gold); background: var(--gold-dim); }

/* Interests grid */
.dm-interests-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.dm-interest-item { background: var(--bg2); border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 12px; text-align: center; cursor: pointer; transition: all .2s; font-size: 13px; }
.dm-interest-item:hover { border-color: var(--border-gold); }
.dm-interest-item.selected { background: var(--gold-dim); border-color: var(--gold); color: var(--gold); }
.dm-interest-item .di-icon { font-size: 22px; margin-bottom: 4px; }

/* Wizard nav */
.dm-wizard-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }

/* ── Main App UI ── */
.dm-topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.dm-topbar-logo { font-size: 20px; font-weight: 900; background: linear-gradient(135deg,var(--gold),var(--orange)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.dm-topbar-actions { display: flex; gap: 6px; }
.dm-icon-btn { background: var(--bg3); border: 1px solid var(--border); color: var(--w60); border-radius: 10px; padding: 7px 12px; font-size: 15px; cursor: pointer; transition: all .2s; position: relative; }
.dm-icon-btn:hover { border-color: var(--border-gold); color: var(--gold); }
.dm-badge { background: var(--orange); color: #fff; border-radius: 50%; width: 16px; height: 16px; font-size: 9px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 3px; right: 3px; }

/* Sub-tabs */
.dm-sub-tabs { display: flex; gap: 4px; margin-bottom: 16px; background: var(--bg3); border-radius: 12px; padding: 4px; border: 1px solid var(--border); }
.dm-sub-tab { flex: 1; background: none; border: none; color: var(--w60); border-radius: 8px; padding: 9px 8px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s; white-space: nowrap; }
.dm-sub-tab.active { background: var(--gold-dim); color: var(--gold); border: 1px solid var(--border-gold); }
.dm-sub-panel { display: none; }
.dm-sub-panel.active { display: block; animation: fadeInUp .25s ease; }

/* ── Swipe Cards ── */
.dm-swipe-area { position: relative; height: 480px; display: flex; align-items: center; justify-content: center; }
.dm-card { position: absolute; width: 100%; max-width: 360px; background: var(--bg3); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; cursor: grab; user-select: none; transition: transform .15s ease, box-shadow .15s; box-shadow: 0 8px 32px rgba(0,0,0,.5); }
.dm-card:active { cursor: grabbing; }
.dm-card.swiping-right { border-color: var(--green) !important; box-shadow: 0 8px 40px rgba(34,197,94,.4) !important; }
.dm-card.swiping-left  { border-color: var(--red) !important; box-shadow: 0 8px 40px rgba(239,68,68,.4) !important; }
.dm-card-photo { width: 100%; height: 300px; object-fit: cover; display: block; background: var(--bg4); }
.dm-card-photo-placeholder { width: 100%; height: 300px; display: flex; align-items: center; justify-content: center; font-size: 80px; background: linear-gradient(135deg,var(--bg4),var(--bg3)); }
.dm-card-info { padding: 16px 18px 20px; }
.dm-card-name { font-size: 22px; font-weight: 800; margin-bottom: 2px; }
.dm-card-meta { font-size: 13px; color: var(--w60); margin-bottom: 10px; }
.dm-card-bio { font-size: 13px; color: var(--w80); line-height: 1.5; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dm-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dm-card-tag { background: var(--gold-dim); border: 1px solid var(--border-gold); color: var(--gold); border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: 600; }
.dm-card-overlay { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; pointer-events: none; }
.dm-stamp { font-size: 28px; font-weight: 900; border: 3px solid; border-radius: 8px; padding: 4px 10px; opacity: 0; transition: opacity .2s; transform: rotate(-20deg); }
.dm-stamp.like { color: var(--green); border-color: var(--green); transform: rotate(-20deg); }
.dm-stamp.pass { color: var(--red); border-color: var(--red); transform: rotate(20deg); }
.dm-card-compatibility { position: absolute; top: 12px; right: 14px; background: rgba(0,0,0,.65); border-radius: 20px; padding: 4px 10px; font-size: 12px; font-weight: 700; color: var(--gold); }
.dm-empty-state { text-align: center; padding: 40px 20px; color: var(--w60); }
.dm-empty-icon { font-size: 56px; margin-bottom: 12px; }

/* Swipe action buttons */
.dm-swipe-actions { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 16px; }
.dm-action-btn { border: none; border-radius: 50%; width: 60px; height: 60px; font-size: 24px; cursor: pointer; transition: all .2s; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.dm-action-btn.pass  { background: rgba(239,68,68,.15); border: 2px solid rgba(239,68,68,.4); }
.dm-action-btn.like  { background: rgba(34,197,94,.15); border: 2px solid rgba(34,197,94,.4); }
.dm-action-btn.boost { background: var(--gold-dim); border: 2px solid var(--border-gold); }
.dm-action-btn:hover { transform: scale(1.12); }
.dm-swipe-hint { text-align: center; font-size: 11px; color: var(--w30); margin-top: 10px; letter-spacing: .5px; }

/* Matches/Liked grid */
.dm-matches-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.dm-match-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; cursor: pointer; transition: all .2s; }
.dm-match-card:hover { border-color: var(--border-gold); transform: translateY(-2px); }
.dm-match-photo { width: 100%; height: 130px; object-fit: cover; background: var(--bg4); display: flex; align-items: center; justify-content: center; font-size: 50px; }
.dm-match-info { padding: 10px 12px; }
.dm-match-name { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.dm-match-meta { font-size: 11px; color: var(--w60); }
.dm-new-badge { background: var(--orange); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 10px; margin-left: 4px; }

/* Conversations list */
.dm-convo-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; cursor: pointer; transition: all .2s; }
.dm-convo-item:hover { border-color: var(--border-gold); }
.dm-convo-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--bg4); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; overflow: hidden; }
.dm-convo-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-convo-body { flex: 1; min-width: 0; }
.dm-convo-name { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.dm-convo-preview { font-size: 12px; color: var(--w60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-convo-time { font-size: 11px; color: var(--w30); white-space: nowrap; }
.dm-unread-dot { width: 8px; height: 8px; background: var(--gold); border-radius: 50%; flex-shrink: 0; }

/* Chat window */
.dm-chat-header { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.dm-chat-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--bg4); display: flex; align-items: center; justify-content: center; font-size: 20px; overflow: hidden; flex-shrink: 0; }
.dm-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-chat-messages { height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 0; margin-bottom: 14px; }
.dm-msg { max-width: 75%; padding: 10px 14px; border-radius: 16px; font-size: 13px; line-height: 1.5; animation: fadeInUp .2s ease; }
.dm-msg.mine { background: linear-gradient(135deg,var(--gold),var(--orange)); color: #000; border-radius: 16px 16px 4px 16px; align-self: flex-end; font-weight: 500; }
.dm-msg.theirs { background: var(--bg3); border: 1px solid var(--border); border-radius: 16px 16px 16px 4px; align-self: flex-start; }
.dm-msg-time { font-size: 10px; margin-top: 3px; opacity: .5; }
.dm-chat-input-row { display: flex; gap: 8px; }
.dm-chat-input-row input { flex: 1; background: var(--bg); border: 1.5px solid var(--border); border-radius: 24px; padding: 10px 16px; color: var(--white); outline: none; font-size: 13px; transition: border-color .2s; }
.dm-chat-input-row input:focus { border-color: var(--gold); }

/* Filters/My Profile Modal */
.dm-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 400; display: none; align-items: center; justify-content: center; padding: 20px; }
.dm-modal-overlay.open { display: flex; }
.dm-modal { background: var(--bg3); border: 1px solid var(--border-gold); border-radius: 18px; padding: 28px 24px; width: 100%; max-width: 460px; position: relative; }
.dm-modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none; color: var(--w60); font-size: 22px; cursor: pointer; }
.dm-modal-close:hover { color: var(--white); }

/* My Profile card */
.dm-profile-card { text-align: center; }
.dm-profile-photo { width: 100px; height: 100px; border-radius: 50%; margin: 0 auto 12px; border: 3px solid var(--gold); display: flex; align-items: center; justify-content: center; font-size: 44px; overflow: hidden; background: var(--bg4); }
.dm-profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.dm-profile-name { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.dm-profile-tagline { font-size: 13px; color: var(--w60); margin-bottom: 16px; }
.dm-profile-stats { display: flex; justify-content: center; gap: 24px; margin-bottom: 20px; }
.dm-profile-stat { text-align: center; }
.dm-profile-stat-val { font-size: 20px; font-weight: 800; color: var(--gold); }
.dm-profile-stat-label { font-size: 11px; color: var(--w60); }
.dm-info-row { display: flex; justify-content: space-between; font-size: 13px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.dm-info-row:last-child { border-bottom: none; }
.dm-info-label { color: var(--w60); }

/* Match popup */
.dm-match-popup { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 500; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 16px; animation: fadeInUp .4s ease; }
.dm-match-popup.show { display: flex; }
.dm-match-popup-title { font-size: 36px; font-weight: 900; background: linear-gradient(135deg,var(--gold),var(--orange)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.dm-match-popup-avatars { display: flex; align-items: center; gap: 12px; }
.dm-match-popup-avatar { width: 90px; height: 90px; border-radius: 50%; border: 3px solid var(--gold); overflow: hidden; background: var(--bg4); display: flex; align-items: center; justify-content: center; font-size: 42px; }
.dm-match-popup-heart { font-size: 42px; animation: heartbeat 1.5s ease infinite; }

/* Compatibility score ring */
.dm-compat-ring { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(var(--gold) 0%, var(--bg3) 0%); font-size: 11px; font-weight: 700; color: var(--gold); border: 2px solid var(--border-gold); }

@media (max-width: 480px) {
  .dm-card { max-width: 100%; }
  .dm-swipe-area { height: 420px; }
  .dm-card-photo, .dm-card-photo-placeholder { height: 240px; }
}

/* ═══ AIRTIME & DATA TOP-UP ═══ */
.airtime-net-btn { transition: all .2s; }
.airtime-net-btn:hover { border-color: var(--border-gold) !important; color: var(--gold) !important; }
.airtime-amt-btn.active { background: var(--gold-dim) !important; border-color: var(--gold) !important; color: var(--gold) !important; }
.data-bundle-btn { transition: all .2s; text-align: left; width: 100%; font-family: var(--font); }
.data-bundle-btn:hover { border-color: var(--border-gold) !important; background: var(--gold-dim) !important; }

/* ═══ EXCHANGE RATE GRID ═══ */
#exchangeGrid { padding: 8px 0; }
#exchangeGrid > div > div:hover { border-color: var(--border-gold) !important; transform: translateY(-2px); transition: all .2s; }

/* ═══ ONLINE MULTIPLAYER ═══ */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ol-panel { animation: fadeInUp .25s ease; }

/* ═══ WALLET TOP-UP TABS ═══ */
#topup-wallet-panel, #topup-airtime-panel, #topup-data-panel { animation: fadeInUp .2s ease; }

/* ═══ PAYPAL OAUTH POPUP ═══ */
.pp-oauth-btn:hover { background: #005ea6 !important; }

/* ═══ ADMIN DATING ═══ */
#p-dating .stat-card { min-width: 140px; }

/* ═══ FORCE PASSWORD OVERLAY ═══ */
#forcePassOverlay input:focus { border-color: #D4AF37 !important; }

/* ═══ REVAMPED SEND FORM ═══ */
.send-airtime-net-btn:hover { border-color: var(--border-gold) !important; color: var(--gold) !important; }
.send-airtime-amt-btn.active,
.send-airtime-amt-btn[style*="border-color: var(--gold)"] { background: var(--gold-dim) !important; border-color: var(--gold) !important; color: var(--gold) !important; }

/* Recipient suggestions dropdown */
.recipient-suggestions { 
  position: absolute; top: calc(100% + 2px); left: 0; right: 0; 
  background: var(--bg3); border: 1.5px solid var(--border-gold); 
  border-radius: 10px; z-index: 200; display: none; 
  max-height: 220px; overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.recipient-suggestions.open { display: block; }
.rec-suggest-item { 
  display: flex; align-items: center; gap: 10px; 
  padding: 10px 14px; cursor: pointer; transition: background .15s;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.rec-suggest-item:last-child { border-bottom: none; }
.rec-suggest-item:hover { background: rgba(212,175,55,.08); }
.rsi-avatar { 
  width: 34px; height: 34px; border-radius: 50%; 
  background: var(--gold-dim); color: var(--gold); 
  display: flex; align-items: center; justify-content: center; 
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.rsi-name { font-size: 13px; font-weight: 600; }
.rsi-sub  { font-size: 11px; color: var(--w60); }

/* Recipient preview card */
.recipient-preview, #recipientPreview {
  display: none;
  margin-top: 8px; padding: 10px 12px;
  background: var(--bg3); border: 1px solid var(--border-gold);
  border-radius: 10px; align-items: center; gap: 10px;
}
.recipient-preview.visible, #recipientPreview[style*="flex"] { display: flex !important; }
.rp-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: #000; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; flex-shrink: 0; }
.rp-name   { font-size: 13px; font-weight: 700; }
.rp-detail { font-size: 11px; color: var(--w60); }

/* Send form scroll fix */
#sendForm { max-height: 85vh; overflow-y: auto; }
#topupForm { max-height: 85vh; overflow-y: auto; }

/* ═══════════════════════════════════
   SELLER STORE & MARKET STYLES
═══════════════════════════════════ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
@media (max-width: 480px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Product card hover */
.product-card { transition: transform .2s, box-shadow .2s; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.4); }

/* Seller store category buttons */
.store-cat-btn { transition: all .15s; }
.store-cat-btn:hover { border-color: var(--border-gold) !important; color: var(--gold) !important; }

/* Listing image drop zone */
#listingImagePreview img,
#storeBannerPreview img { border-radius: 10px; }

/* Market tab transition */
#mkt-browse-panel,
#mkt-sellers-panel,
#mkt-mystore-panel { animation: fadeIn .2s ease; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════
   YOURSTYLE FEED
═══════════════════════════════════════ */
.style-post-card { animation: fadeSlideIn .3s ease; }

@keyframes fadeSlideIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:none; }
}

/* ═══════════════════════════════════════
   ADMIN MODAL
═══════════════════════════════════════ */
.adm-modal-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:9999;
}
.adm-modal-card {
  background:var(--bg2);border:1px solid var(--border);border-radius:16px;
  padding:24px;max-width:520px;width:95%;max-height:90vh;overflow-y:auto;
}
.adm-inp {
  background:var(--bg);border:1.5px solid var(--border);border-radius:8px;
  padding:9px 12px;color:var(--white);font-size:13px;outline:none;width:100%;
}
.adm-inp:focus { border-color:var(--gold); }
.adm-sel {
  background:var(--bg);border:1.5px solid var(--border);border-radius:8px;
  padding:9px 12px;color:var(--white);font-size:13px;outline:none;width:100%;
}
.lbl { display:block;font-size:11px;color:var(--w60);margin-bottom:4px;text-transform:uppercase;font-weight:600;letter-spacing:.4px; }
.btn-red { background:rgba(239,68,68,.12);color:#ef4444;border:1px solid rgba(239,68,68,.3); }
.btn-red:hover { background:rgba(239,68,68,.22); }

/* ── Notification badge pulse ── */
.notif-badge{
  position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;
  background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;
  border-radius:20px;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
  border:2px solid var(--bg2);
  animation:notifPulse 2s ease-in-out infinite;
}
@keyframes notifPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}
  50%{box-shadow:0 0 0 6px rgba(239,68,68,0)}
}
/* ── Admin live badge ── */
.admin-new-badge{
  display:inline-block;background:#22c55e;color:#000;
  border-radius:20px;padding:0 5px;font-size:10px;font-weight:700;margin-left:4px;
  animation:badgePop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes badgePop{from{transform:scale(0)}to{transform:scale(1)}}

/* ══════════════════════════════
   💬 MESSAGES SCREEN
══════════════════════════════ */
.msg-filter-tab{
  flex:1;padding:10px 6px;font-size:12px;font-weight:600;
  background:none;border:none;border-bottom:2px solid transparent;
  color:var(--w60);cursor:pointer;transition:all .2s;white-space:nowrap;
}
.msg-filter-tab:hover{color:var(--white)}
.msg-filter-tab.active{color:var(--gold);border-bottom-color:var(--gold)}
.msg-bubble{
  max-width:75%;padding:9px 13px;border-radius:18px;font-size:14px;
  line-height:1.45;word-break:break-word;position:relative;
}
.msg-bubble.mine{
  background:linear-gradient(135deg,var(--gold),var(--orange));
  color:#000;border-bottom-right-radius:4px;margin-left:auto;
}
.msg-bubble.theirs{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.08);
  border-bottom-left-radius:4px;
}
.msg-bubble img{max-width:220px;border-radius:12px;display:block;margin-top:6px;cursor:pointer}
.msg-convo-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;transition:background .15s;
}
.msg-convo-item:hover{background:rgba(255,255,255,.04)}
.msg-convo-item.unread-convo .mci-name{font-weight:800;color:var(--white)}
.msg-convo-item.unread-convo .mci-preview{color:rgba(255,255,255,.7)}
.mci-avatar{
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--orange));
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:700;color:#000;flex-shrink:0;position:relative;
}
.mci-online-dot{
  position:absolute;bottom:1px;right:1px;width:12px;height:12px;
  border-radius:50%;background:#22c55e;border:2px solid var(--bg2);
}
.mci-info{flex:1;min-width:0}
.mci-row1{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.mci-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.mci-time{font-size:11px;color:var(--w30);flex-shrink:0;margin-left:8px}
.mci-preview{font-size:12px;color:var(--w60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mci-unread-badge{
  background:var(--gold);color:#000;border-radius:50%;
  width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;flex-shrink:0;margin-left:6px;
}
/* DrinkUp game colors */
.du-action-popup-open{display:flex!important}

/* ══════════════════════════════════════════════════
   💬 MESSAGE THREAD — Complete styles
══════════════════════════════════════════════════ */
.msg-row{
  display:flex;align-items:flex-end;gap:8px;
  margin-bottom:2px;
}
.msg-row.mine{flex-direction:row-reverse;}
.msg-row.mine .msg-bubble{
  background:linear-gradient(135deg,#D4AF37,#E85D26);
  color:#000;border-bottom-right-radius:4px;
}
.msg-row.theirs .msg-bubble{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.08);
  border-bottom-left-radius:4px;
  color:#fff;
}
.msg-bubble-img{
  max-width:200px;max-height:200px;border-radius:10px;
  display:block;margin-top:4px;cursor:pointer;border:1px solid rgba(255,255,255,.1);
}
.msg-date-divider{
  text-align:center;font-size:11px;color:rgba(255,255,255,.3);
  margin:10px 0 6px;position:relative;
}
.msg-date-divider::before,.msg-date-divider::after{
  content:'';position:absolute;top:50%;width:35%;height:1px;
  background:rgba(255,255,255,.08);
}
.msg-date-divider::before{left:0}.msg-date-divider::after{right:0}
.msg-reaction-strip{display:flex;gap:3px;margin-top:2px;flex-wrap:wrap;}
.msg-reaction-pill{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
  border-radius:20px;padding:2px 7px;font-size:12px;cursor:pointer;
  transition:.2s;
}
.msg-reaction-pill:hover{background:rgba(255,255,255,.2);}
.msg-reaction-picker{
  position:absolute;background:#1a1614;border:1px solid rgba(212,175,55,.3);
  border-radius:12px;padding:8px 10px;display:flex;gap:6px;z-index:600;
  box-shadow:0 8px 30px rgba(0,0,0,.6);
}
.msg-reaction-picker span{font-size:20px;cursor:pointer;transition:.2s}
.msg-reaction-picker span:hover{transform:scale(1.3)}
/* Typing indicator */
.msg-typing{
  display:flex;align-items:center;gap:3px;padding:10px 14px;
}
.msg-typing span{
  width:7px;height:7px;border-radius:50%;background:var(--w60);
  animation:typingDot 1.4s infinite ease-in-out;
}
.msg-typing span:nth-child(2){animation-delay:.2s}
.msg-typing span:nth-child(3){animation-delay:.4s}
@keyframes typingDot{0%,80%,100%{transform:scale(0);opacity:.4}40%{transform:scale(1);opacity:1}}

/* ══════════════════════════════════════════════════
   🍹 DRINK UP BOARD — colors
══════════════════════════════════════════════════ */
.du-safe{background:#4B5563!important}
.du-action{background:#FF6B35!important}
.du-roll{background:#22C55E!important}


/* ═══════════════════════════════════════════════════════
   💬 FACEBOOK-STYLE MESSENGER — Complete UI
   ═══════════════════════════════════════════════════════ */

/* ── Conversation list items ── */
.fbmsg-convo-item {
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;cursor:pointer;transition:background .15s;
  position:relative;
}
.fbmsg-convo-item:hover { background:rgba(255,255,255,.05); }
.fbmsg-convo-item.fbmsg-unread { background:rgba(212,175,55,.04); }
.fbmsg-convo-item.fbmsg-unread:hover { background:rgba(212,175,55,.08); }
.fbmsg-convo-item + .fbmsg-convo-item { border-top:1px solid rgba(255,255,255,.04); }

/* ── Avatar ── */
.fbmsg-avatar-wrap { position:relative;flex-shrink:0; }
.fbmsg-avatar {
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:800;flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.fbmsg-avatar-sm { width:30px;height:30px;font-size:11px;border-radius:50%;display:flex;align-items:center;justify-content:center; }
.fbmsg-online-dot {
  position:absolute;bottom:1px;right:1px;
  width:13px;height:13px;border-radius:50%;
  background:#22c55e;border:2.5px solid var(--bg2);
}

/* ── Convo info ── */
.fbmsg-convo-info { flex:1;min-width:0; }
.fbmsg-convo-top  { display:flex;justify-content:space-between;align-items:center;margin-bottom:3px; }
.fbmsg-convo-name { font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;margin-right:8px; }
.fbmsg-convo-time { font-size:11px;color:rgba(255,255,255,.35);flex-shrink:0; }
.fbmsg-time-unread { color:var(--gold);font-weight:700; }
.fbmsg-convo-bottom { display:flex;align-items:center;gap:6px; }
.fbmsg-convo-preview { font-size:13px;color:rgba(255,255,255,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1; }
.fbmsg-unread-badge {
  background:var(--gold);color:#000;border-radius:50%;
  min-width:20px;height:20px;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;flex-shrink:0;
}
.fbmsg-unread .fbmsg-convo-name { font-weight:800;color:#fff; }
.fbmsg-unread .fbmsg-convo-preview { color:rgba(255,255,255,.7);font-weight:600; }

/* ── Message thread rows ── */
.fbmsg-row { display:flex;align-items:flex-end;gap:8px;padding:1px 12px;margin-bottom:1px; }
.fbmsg-row-mine   { flex-direction:row-reverse; }
.fbmsg-row-theirs { flex-direction:row; }

/* ── Bubble wrapper ── */
.fbmsg-bubble-wrap { display:flex;flex-direction:column;max-width:72%;gap:2px; }
.fbmsg-bubble-wrap-mine   { align-items:flex-end; }
.fbmsg-bubble-wrap-theirs { align-items:flex-start; }

/* ── Bubbles ── */
.fbmsg-bubble {
  padding:9px 14px;border-radius:20px;
  font-size:14px;line-height:1.48;word-break:break-word;
  cursor:pointer;transition:filter .15s;position:relative;
  max-width:100%;
}
.fbmsg-bubble:hover { filter:brightness(1.08); }
.fbmsg-bubble-mine {
  background:linear-gradient(135deg,#D4AF37 0%,#b8901f 100%);
  color:#000;border-bottom-right-radius:4px;
  box-shadow:0 2px 8px rgba(212,175,55,.25);
}
.fbmsg-bubble-theirs {
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.09);
  color:#fff;border-bottom-left-radius:4px;
}
.fbmsg-bubble-img {
  max-width:220px;max-height:220px;border-radius:14px;
  display:block;cursor:pointer;border:1px solid rgba(255,255,255,.08);
  transition:transform .2s;
}
.fbmsg-bubble-img:hover { transform:scale(1.02); }

/* ── Meta (time + ticks) ── */
.fbmsg-bubble-meta { font-size:10px;color:rgba(255,255,255,.3);padding:0 4px; }
.fbmsg-meta-mine   { text-align:right; }
.fbmsg-meta-theirs { text-align:left; }

/* ── Reactions ── */
.fbmsg-reacts-mine   { display:flex;gap:3px;justify-content:flex-end;flex-wrap:wrap;padding:0 4px; }
.fbmsg-reacts-theirs { display:flex;gap:3px;justify-content:flex-start;flex-wrap:wrap;padding:0 4px; }
.fbmsg-react-pill {
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
  border-radius:20px;padding:2px 7px;font-size:12px;cursor:pointer;transition:.2s;
}
.fbmsg-react-pill:hover { background:rgba(255,255,255,.18);transform:scale(1.1); }

/* ── Date separator ── */
.fbmsg-date-sep {
  text-align:center;font-size:11px;color:rgba(255,255,255,.3);
  margin:10px 0 6px;position:relative;letter-spacing:.3px;
}
.fbmsg-date-sep::before,.fbmsg-date-sep::after {
  content:'';position:absolute;top:50%;width:38%;height:1px;
  background:rgba(255,255,255,.07);
}
.fbmsg-date-sep::before{left:0}.fbmsg-date-sep::after{right:0}

/* ── Input row ── */
.fbmsg-input-row {
  display:flex;align-items:flex-end;gap:6px;
  padding:8px 12px;background:var(--bg2);
  border-top:1px solid rgba(255,255,255,.06);flex-shrink:0;
}
.fbmsg-input-btn {
  width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;
  font-size:16px;transition:.2s;flex-shrink:0;display:flex;align-items:center;justify-content:center;
}
.fbmsg-input-btn:hover { transform:scale(1.1); }

/* ── Filter tabs ── */
.msg-filter-tab {
  flex:1;padding:10px 6px;font-size:12px;font-weight:600;
  background:none;border:none;border-bottom:2px solid transparent;
  color:rgba(255,255,255,.45);cursor:pointer;transition:all .2s;white-space:nowrap;
}
.msg-filter-tab:hover { color:rgba(255,255,255,.8); }
.msg-filter-tab.active { color:var(--gold);border-bottom-color:var(--gold); }

/* ── Typing indicator ── */
.fbmsg-typing-wrap {
  display:none;align-items:center;gap:8px;padding:6px 16px 4px;
}
.fbmsg-typing-dots { display:flex;gap:3px;align-items:center; }
.fbmsg-typing-dots span {
  width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);
  animation:fbmsgTypeDot 1.4s infinite ease-in-out;
}
.fbmsg-typing-dots span:nth-child(2){animation-delay:.16s}
.fbmsg-typing-dots span:nth-child(3){animation-delay:.32s}
@keyframes fbmsgTypeDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}

/* ── Legacy compat ── */
.msg-bubble,.msg-bubble.mine,.msg-bubble.theirs { display:none; }
.mci-avatar,.mci-online-dot,.mci-info,.mci-name,.mci-preview,.mci-time,.mci-unread-badge,
.mci-row1,.mci-convo-item,.mci-convo-info { display:none; }