:root {
  /* ═══ AFHAMNI — Full Dark Navy Theme ═══ */
  --primary:#0EA5E9;          /* sky blue (main accent for interactive) */
  --primary-dark:#0B1F35;     /* deep navy */
  --primary-darker:#071525;   /* darkest navy */
  --primary2:#38BDF8;         /* lighter sky for hover */
  --primary-dim:rgba(14,165,233,0.12);

  --secondary:#FF6B35;        /* hot orange (CTA accent) */
  --secondary-dark:#E55A24;
  --secondary-light:#FFA374;
  --secondary-dim:rgba(255,107,53,0.14);

  /* Dark navy backgrounds everywhere */
  --background:#0E2238;       /* main page bg — navy */
  --card-bg:#16314D;
  --card-name-bg:#0B1F35;
  --card-name-text:#FF6B35;

  /* surfaces — navy shades (darker → lighter) */
  --s1:#16314D;              /* cards / panels */
  --s2:#1C3A5A;              /* inputs / secondary surfaces */
  --s3:#244668;              /* hover surfaces */
  --bg:var(--background);

  /* borders — light on dark */
  --border:rgba(255,255,255,0.08);
  --border2:rgba(255,255,255,0.16);
  --primary-deep:var(--primary-dark);

  --gold:#FF6B35;
  --gold-deep:#E55A24;
  --secondary2:#E55A24;

  --green:#22C55E;
  --red:#F87171;
  --purple:#A78BFA;
  --muted:#8BA3BC;            /* muted text on dark */
  --text:#EAF2FA;             /* main text — near white */
  --text2:#B8CADD;            /* secondary text */

  /* refined radii */
  --r:12px;
  --r2:18px;
  --r3:24px;

  /* shadow system — deeper for dark bg */
  --sh-sm:0 1px 3px rgba(0,0,0,0.25);
  --sh-md:0 4px 16px rgba(0,0,0,0.3);
  --sh-lg:0 12px 32px rgba(0,0,0,0.4);
  --sh-xl:0 20px 50px rgba(0,0,0,0.5);
  --sh-orange:0 6px 20px rgba(255,107,53,0.4);
  --sh-sky:0 6px 20px rgba(14,165,233,0.4);

  /* spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-8:48px;

  /* transitions */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
html{background:var(--background);} /* prevent white flash */
body{
  font-family:'Cairo',sans-serif;
  background:var(--background);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Page load: fade in smoothly */
@keyframes pageFadeIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}
.screen.active{
  animation:pageFadeIn .35s ease forwards;
}

/* Smooth content appearance per element */
@keyframes slideUp{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:translateY(0);}
}
.sj-hero-title{animation:slideUp .5s ease .1s both;}
.sj-hero-sub{animation:slideUp .5s ease .2s both;}
.sj-hero-ctas{animation:slideUp .5s ease .3s both;}
.sj-section-title{animation:slideUp .4s ease .2s both;}
.sj-games-grid{animation:slideUp .5s ease .35s both;}
.coming-soon-divider{animation:slideUp .4s ease .45s both;}
.coming-soon-grid{animation:slideUp .4s ease .5s both;}

.screen{display:none;background:var(--background);}
.screen.active{display:flex;flex-direction:column;background:var(--background);}

/* ════════════════ TOP NAV ════════════════ */
.app-nav{
  display:flex;align-items:center;gap:10px;padding:12px 24px;
  background:var(--background);
  border-bottom:1px solid rgba(255,255,255,0.08);
  position:sticky;top:0;z-index:50;
}
.nav-logo{font-size:1.35rem;font-weight:900;color:#fff;letter-spacing:-.5px;}
.nav-spacer{flex:1;}

/* MINI SHOP BAR — wallet + buy button combo */
.shop-mini{
  display:flex;align-items:center;background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.14);border-radius:100px;
  overflow:hidden;transition:all .2s var(--ease);
  backdrop-filter:blur(8px);
}
.shop-mini:hover{border-color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.14);}
.shop-mini-wallet{
  display:flex;align-items:center;gap:6px;
  padding:8px 16px;color:#fff;font-size:.88rem;font-weight:800;
  cursor:pointer;
}
.shop-mini-wallet .sm-icon{font-size:1.05rem;}
.shop-mini-wallet .sm-num{font-size:1.08rem;font-weight:900;color:var(--secondary-light);}
.shop-mini-wallet .sm-lbl{font-size:.78rem;color:rgba(255,255,255,0.75);font-weight:700;}
.shop-mini-divider{width:1px;height:22px;background:rgba(255,255,255,0.18);}
.shop-mini-buy{
  display:flex;align-items:center;gap:5px;
  padding:8px 16px;background:var(--secondary);color:#fff;
  font-size:.82rem;font-weight:800;cursor:pointer;transition:all .2s var(--ease);
  font-family:'Cairo',sans-serif;border:none;
}
.shop-mini-buy:hover{background:var(--secondary-dark);}

.nav-user{
  background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.14);border-radius:100px;
  padding:5px 16px 5px 5px;font-size:.82rem;font-weight:700;color:#fff;
  display:flex;align-items:center;gap:8px;cursor:pointer;transition:all .2s var(--ease);
}
.nav-user:hover{border-color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.14);}
.nav-user-avatar{
  width:28px;height:28px;border-radius:50%;background:var(--secondary);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:.82rem;
}
.nav-admin-btn{
  background:rgba(255,255,255,0.12);color:#fff;
  border:1px solid rgba(255,255,255,0.16);border-radius:100px;padding:8px 16px;
  font-family:'Cairo',sans-serif;font-size:.8rem;font-weight:800;
  cursor:pointer;transition:all .2s var(--ease);
}
.nav-admin-btn:hover{background:rgba(255,255,255,0.2);}

/* User dropdown */
.user-menu{
  position:fixed;top:64px;left:24px;background:var(--s1);
  border:1px solid var(--border2);border-radius:var(--r2);
  min-width:210px;box-shadow:var(--sh-xl);
  z-index:1000;padding:8px;display:none;
}
.user-menu.show{display:block;animation:slideDown .2s var(--ease);}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
.user-menu-item{
  padding:12px 14px;border-radius:10px;cursor:pointer;
  font-size:.92rem;font-weight:800;color:var(--primary-dark);
  display:flex;align-items:center;gap:8px;transition:all .15s var(--ease);
  text-align:right;
}
.user-menu-item:hover{background:var(--secondary);color:#fff;}
.user-menu-item.danger{color:var(--red);}
.user-menu-item.danger:hover{color:#fff;background:var(--red);}

/* Wallet dropdown menu */
.wallet-menu{
  position:fixed;top:64px;left:24px;background:var(--s1);
  border:1px solid var(--border2);border-radius:16px;
  min-width:200px;box-shadow:var(--sh-xl);
  z-index:1000;padding:14px;display:none;
}
.wallet-menu.show{display:block;animation:slideDown .2s var(--ease);}
.wallet-menu-balance{
  display:flex;flex-direction:column;gap:4px;
  padding:6px 8px 14px;border-bottom:1px solid var(--border);margin-bottom:12px;
}
.wallet-menu-balance .wm-lbl{font-size:.78rem;color:var(--muted);font-weight:700;}
.wallet-menu-balance .wm-num{font-size:1.5rem;font-weight:900;color:var(--text);}
.wallet-menu-balance .wm-num b{color:var(--secondary);}
.wallet-menu-charge{
  width:100%;background:var(--secondary);color:#fff;border:none;
  border-radius:11px;padding:13px;font-family:'Cairo',sans-serif;
  font-size:.95rem;font-weight:900;cursor:pointer;transition:all .2s var(--ease);
}
.wallet-menu-charge:hover{background:var(--secondary-dark);transform:translateY(-1px);}
.user-menu-item.highlight-charge{
  background:var(--secondary-dim);color:var(--secondary);font-weight:900;
}
.user-menu-item.highlight-charge:hover{background:var(--secondary);color:#fff;}
.user-menu-divider{height:1px;background:var(--border);margin:5px 0;}

@media(max-width:600px){
  .app-nav{padding:10px 16px;}
  .shop-mini-wallet .sm-lbl{display:none;}
  .nav-user span:not(.nav-user-avatar){display:none;}
  .nav-admin-btn{padding:8px 12px;font-size:.72rem;}
  .user-menu{top:58px;left:12px;}
}

/* ════════════════ AUTH ════════════════ */
#auth{
  min-height:100vh;align-items:center;justify-content:center;padding:30px 20px;
  background:radial-gradient(ellipse 80% 50% at 50% -5%,rgba(30,58,95,.08) 0%,transparent 65%);
}
.auth-card{
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r3);
  padding:40px 34px;width:100%;max-width:410px;
  box-shadow:var(--sh-xl);
}
.auth-logo{
  text-align:center;font-size:2.6rem;font-weight:900;letter-spacing:-2px;margin-bottom:6px;
  background:linear-gradient(135deg,var(--primary-deep) 20%,var(--primary) 60%,var(--secondary) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.auth-sub{text-align:center;color:var(--muted);font-size:.88rem;margin-bottom:28px;}

.auth-tabs{
  display:flex;background:var(--s2);border-radius:12px;padding:4px;margin-bottom:24px;
}
.auth-tab{
  flex:1;background:none;border:none;padding:10px;border-radius:9px;
  color:var(--muted);font-family:'Cairo',sans-serif;font-size:.9rem;font-weight:800;
  cursor:pointer;transition:all .2s var(--ease);
}
.auth-tab.act{background:var(--s1);color:var(--text);box-shadow:var(--sh-sm);}

.field{margin-bottom:16px;}
.field label{display:block;font-size:.8rem;color:var(--text2);font-weight:800;margin-bottom:7px;}
.field input,.field textarea,.field select{
  width:100%;background:var(--s2);border:1.5px solid transparent;border-radius:12px;
  padding:13px 16px;color:var(--text);font-family:'Cairo',sans-serif;
  font-size:.95rem;font-weight:600;outline:none;transition:all .2s var(--ease);text-align:right;
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--primary);background:var(--s1);
  box-shadow:0 0 0 4px var(--primary-dim);
}
.field input::placeholder{color:var(--muted);}
.field textarea{resize:vertical;min-height:70px;font-weight:700;}
.field-help{font-size:.76rem;color:var(--muted);margin-top:5px;}

.btn-primary{
  width:100%;background:var(--primary);color:#fff;border:none;border-radius:12px;
  padding:14px;font-family:'Cairo',sans-serif;font-size:1rem;font-weight:900;
  cursor:pointer;transition:all .2s var(--ease);
  box-shadow:var(--sh-sm);
}
.btn-primary:hover{background:var(--primary2);transform:translateY(-1px);box-shadow:var(--sh-md);}
.btn-primary:active{transform:translateY(0);}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none;}

/* ════════════════ HOME (Logged in) ════════════════ */
#home{
  min-height:100vh;
  padding:0;
  gap:0;
  background:var(--background);
}
#home.active{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.home-content{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:36px;padding:20px;
  background:radial-gradient(ellipse 80% 50% at 50% -5%,rgba(30,58,95,.06) 0%,transparent 65%);
}
.welcome{text-align:center;}
.welcome-greeting{font-size:1rem;color:var(--muted);margin-bottom:6px;}
.welcome-name{font-size:clamp(1.8rem,5vw,2.6rem);font-weight:900;}
.home-grid{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.home-card{
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r2);
  padding:32px 36px;cursor:pointer;transition:all .25s;
  text-align:center;min-width:230px;position:relative;overflow:hidden;
}
.home-card:hover{transform:translateY(-5px);border-color:rgba(30,58,95,.3);box-shadow:0 18px 50px rgba(30,58,95,.12);}
.home-card .ci{font-size:2.5rem;margin-bottom:12px;display:block;}
.home-card h2{font-size:1.3rem;font-weight:800;margin-bottom:6px;}
.home-card p{color:var(--text2);font-size:.85rem;line-height:1.5;}

.home-card.coming-soon{
  cursor:not-allowed;
  background:linear-gradient(135deg,var(--s2),var(--s1));
  position:relative;
}
.home-card.coming-soon::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(30,58,95,.03) 10px,rgba(30,58,95,.03) 20px);
  pointer-events:none;border-radius:var(--r2);
}
.home-card.coming-soon:hover{transform:none;border-color:var(--border);box-shadow:none;}
.home-card.coming-soon .ci{opacity:.5;}
.home-card.coming-soon h2{color:var(--text2);}

.badge-soon{
  display:inline-block;margin-top:10px;
  background:var(--secondary-dim);color:var(--primary-deep);
  border:1px solid rgba(255,107,53,.3);
  border-radius:100px;padding:3px 12px;font-size:.72rem;font-weight:800;
}

/* Four games layout */
.home-grid.four-games{
  display:grid;
  grid-template-columns:repeat(2,minmax(220px,260px));
  gap:14px;
}
.home-grid.four-games .home-card{
  min-width:0;padding:24px 22px;
}
.home-grid.four-games .home-card .ci{font-size:2.2rem;}
.home-grid.four-games .home-card h2{font-size:1.15rem;}
.home-grid.four-games .home-card p{font-size:.78rem;}

/* Game status badges */
.game-status{
  display:inline-block;margin-top:10px;
  border-radius:100px;padding:3px 11px;font-size:.7rem;font-weight:800;
  border:1px solid transparent;
}
.game-status.free{
  background:rgba(16,185,129,.1);color:var(--green);
  border-color:rgba(16,185,129,.3);
}
.game-status.locked{
  background:rgba(239,68,68,.08);color:var(--red);
  border-color:rgba(239,68,68,.25);
}
.game-status.paid{
  background:var(--primary-dim);color:var(--primary);
  border-color:rgba(30,58,95,.3);
}
.game-status.resume{
  background:linear-gradient(135deg,rgba(255,107,53,.2),rgba(30,58,95,.18));
  color:var(--primary-deep);
  border-color:var(--primary);
  font-weight:900;
}
/* When game-status sits on a card as a corner badge, override margins */
.game-status.sj-card-status{
  margin-top:0;
  background:var(--primary-dark)!important;
  color:var(--secondary)!important;
  border-color:transparent;
}
.game-status.sj-card-status.free{
  background:#10b981!important;color:#fff!important;
}
.game-status.sj-card-status.locked{
  background:var(--red)!important;color:#fff!important;
}

/* Home stats banner */
.home-stats{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r);
  padding:14px 18px;max-width:600px;width:100%;
  box-shadow:0 4px 16px rgba(30,58,95,.05);
}
.hs-item{flex:1;min-width:90px;text-align:center;padding:6px;}
.hs-num{
  font-size:1.6rem;font-weight:900;color:var(--primary);line-height:1;margin-bottom:4px;
}
.hs-label{font-size:.72rem;color:var(--muted);font-weight:700;}

@media(max-width:560px){
  .home-grid.four-games{grid-template-columns:1fr;}
}
.home-card .badge-free{
  display:inline-block;margin-top:10px;background:var(--primary-dim);color:var(--primary);
  border:1px solid rgba(30,58,95,.25);border-radius:100px;padding:3px 12px;font-size:.72rem;font-weight:800;
}
.home-card .badge-locked{
  display:inline-block;margin-top:10px;background:rgba(240,80,80,.1);color:var(--red);
  border:1px solid rgba(240,80,80,.25);border-radius:100px;padding:3px 12px;font-size:.72rem;font-weight:800;
}

/* ════════════════ STORE ════════════════ */
#store{min-height:100vh;padding:24px 20px 60px;max-width:900px;margin:0 auto;}
.store-hero{
  background:linear-gradient(135deg,var(--primary-dim),var(--secondary-dim));
  border:1px solid var(--border);border-radius:var(--r2);
  padding:32px 28px;margin-bottom:28px;text-align:center;
}
.store-hero h1{font-size:2rem;font-weight:900;margin-bottom:10px;}
.store-hero p{color:var(--text2);font-size:1rem;}

.packages-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;
}
.pkg-card{
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r3);
  padding:28px 26px;position:relative;overflow:hidden;transition:all .28s var(--ease-bounce);
  box-shadow:var(--sh-sm);
}
.pkg-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);}
.pkg-card.featured{
  border-color:var(--secondary);
  background:linear-gradient(180deg,rgba(255,107,53,.06),transparent 60%);
  box-shadow:var(--sh-md);
}
.pkg-card.featured::before{
  content:'الأكثر مبيعاً';position:absolute;top:16px;left:16px;
  background:var(--secondary);color:#fff;border-radius:100px;
  padding:4px 14px;font-size:.7rem;font-weight:900;
  box-shadow:var(--sh-orange);
}
.pkg-icon{font-size:2.6rem;margin-bottom:14px;}
.pkg-name{font-size:1.35rem;font-weight:900;margin-bottom:4px;}
.pkg-desc{color:var(--muted);font-size:.85rem;margin-bottom:20px;}
.pkg-price{display:flex;align-items:baseline;gap:6px;margin-bottom:20px;}
.pkg-price-num{font-size:2.4rem;font-weight:900;color:var(--primary);}
.pkg-price-cur{font-size:1rem;color:var(--muted);font-weight:700;}
.pkg-features{list-style:none;margin-bottom:22px;}
.pkg-features li{padding:7px 0;font-size:.88rem;color:var(--text2);
  display:flex;align-items:center;gap:8px;}
.pkg-features li::before{content:'✓';color:var(--green);font-weight:900;}
.btn-buy{
  width:100%;background:var(--primary);color:#fff;border:none;border-radius:12px;
  padding:14px;font-family:'Cairo',sans-serif;font-size:.98rem;font-weight:900;
  cursor:pointer;transition:all .2s var(--ease);box-shadow:var(--sh-sm);
}
.btn-buy:hover{background:var(--primary2);transform:translateY(-1px);box-shadow:var(--sh-md);}
.btn-buy:active{transform:translateY(0);}
.featured .btn-buy{background:var(--secondary);box-shadow:var(--sh-orange);}
.featured .btn-buy:hover{background:var(--secondary-dark);}

.coupon-section{
  margin-top:28px;background:var(--s1);border:1px solid var(--border);
  border-radius:var(--r);padding:20px;
}
.coupon-section h3{font-size:1rem;font-weight:800;margin-bottom:6px;}
.coupon-section p{color:var(--muted);font-size:.82rem;margin-bottom:14px;}
.coupon-row{display:flex;gap:8px;}
.coupon-row input{flex:1;background:var(--s2);border:1.5px solid var(--border);
  border-radius:10px;padding:11px 14px;color:var(--text);font-family:'Cairo',sans-serif;
  font-size:.95rem;font-weight:700;outline:none;text-align:right;}
.coupon-row input:focus{border-color:var(--primary);}
.btn-coupon{
  background:var(--secondary);color:#fff;border:none;border-radius:10px;
  padding:0 22px;font-family:'Cairo',sans-serif;font-size:.9rem;font-weight:900;
  cursor:pointer;transition:all .2s;
}
.btn-coupon:hover{background:var(--secondary-dark);}

/* ═══════ STORE: empty state + discount preview ═══════ */
.store-empty{
  grid-column:1/-1;
  text-align:center;
  padding:60px 24px;
  background:var(--s1);
  border:2px dashed var(--border2);
  border-radius:var(--r2);
}
.store-empty-icon{font-size:4rem;margin-bottom:12px;opacity:.6;}
.store-empty-title{
  font-size:1.3rem;font-weight:900;color:var(--primary-dark);
  margin-bottom:6px;
}
.store-empty-desc{color:var(--muted);font-size:.92rem;}

.pkg-discount-line{
  display:flex;align-items:center;gap:10px;margin-bottom:6px;
}
.pkg-orig-price{
  text-decoration:line-through;color:var(--muted);
  font-size:.95rem;font-weight:700;
}
.pkg-discount-badge{
  background:#10b981;color:#fff;
  padding:2px 10px;border-radius:100px;
  font-size:.72rem;font-weight:900;
}

.pkg-featured-badge{
  position:absolute;top:14px;left:14px;
  background:var(--secondary);color:#fff;border-radius:100px;
  padding:3px 12px;font-size:.7rem;font-weight:800;
  z-index:2;
}
/* Override original ::before that was generating duplicate badge */
.pkg-card.featured::before{content:none!important;}

/* Applied coupon display */
.coupon-applied{
  background:linear-gradient(135deg,#10b981,#059669);
  color:#fff;border-radius:14px;padding:16px 18px;
}
.coupon-applied-header{
  display:flex;align-items:center;gap:12px;margin-bottom:8px;
}
.coupon-applied-icon{
  width:32px;height:32px;border-radius:50%;
  background:var(--s1);color:#059669;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:1.1rem;
  flex-shrink:0;
}
.coupon-applied-title{
  font-size:.78rem;font-weight:700;opacity:.9;
}
.coupon-applied-code{
  font-size:1.15rem;font-weight:900;letter-spacing:1px;
  font-family:monospace;
}
.coupon-remove-btn{
  background:rgba(0,0,0,.2);color:#fff;border:none;
  padding:6px 14px;border-radius:10px;
  font-family:'Cairo',sans-serif;font-size:.8rem;font-weight:800;
  cursor:pointer;transition:all .2s;margin-right:auto;
}
.coupon-remove-btn:hover{background:rgba(0,0,0,.35);}
.coupon-applied-info{
  font-size:.88rem;font-weight:700;
  background:rgba(255,255,255,.15);
  padding:8px 14px;border-radius:10px;
}

/* ════════════════ SHARED ════════════════ */
.top-bar{display:flex;align-items:center;gap:14px;margin-bottom:28px;flex-wrap:wrap;}
.btn-back{background:var(--s1);border:1px solid var(--border);border-radius:10px;padding:10px 18px;
  color:var(--text2);font-family:'Cairo',sans-serif;font-size:.92rem;font-weight:700;cursor:pointer;transition:all .2s;}
.btn-back:hover{color:var(--text);border-color:var(--border2);}
.page-ttl{font-size:1.5rem;font-weight:900;}
.page-desc{color:var(--muted);font-size:.82rem;margin-top:2px;}
.spacer{flex:1;}

/* ════════════════ SETUP ════════════════ */
#setup{
  min-height:100vh;
  padding:0 0 120px 0;
  width:100%;
  background:var(--background);
}
#setup.active{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.setup-inner-wrap{
  max-width:1100px;
  width:100%;
  margin:0 auto;
  padding:24px 20px;
}

.teams-row{display:flex;gap:14px;margin-bottom:24px;flex-wrap:wrap;}
.team-box{flex:1;min-width:220px;background:transparent;border:none;
  padding:0;position:relative;
}
.team-box label{display:block;font-size:.95rem;color:var(--text);font-weight:900;letter-spacing:.5px;margin-bottom:10px;text-align:center;}

/* Pill-shaped input — long oval with 3 placeholder dots */
.team-input-wrap{
  position:relative;
  background:var(--s1);
  border:3px solid var(--primary);
  border-radius:100px;
  padding:0;
  overflow:hidden;
  transition:all .2s;
  box-shadow:0 4px 14px rgba(30,58,95,0.12);
}
.team-box.t1 .team-input-wrap{border-color:var(--primary);}
.team-box.t2 .team-input-wrap{border-color:var(--secondary);}
.team-input-wrap:focus-within{
  transform:scale(1.02);
  box-shadow:0 6px 20px rgba(30,58,95,0.25);
}
.team-box input{
  width:100%;background:none;border:none;outline:none;color:var(--text);
  font-family:'Cairo',sans-serif;font-size:1.2rem;font-weight:800;text-align:center;
  padding:16px 24px;
  letter-spacing:-.3px;
}
/* 3 transparent dots as placeholder */
.team-box input::placeholder{
  color:var(--muted);
  opacity:.4;
  font-weight:700;
  letter-spacing:2px;
}

/* Old avatar styles — hidden now */
.team-avatar,.team-avatar-dots{display:none!important;}

@media(max-width:500px){
  .team-box input{font-size:1rem;padding:14px 20px;}
}

.sel-row{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.sel-badge{background:var(--s2);border:1px solid var(--border);border-radius:100px;
  padding:4px 14px;font-size:.85rem;font-weight:800;}
.sel-badge span{color:var(--primary);}
.sel-hint{color:var(--muted);font-size:.8rem;}

.cat-group{margin-bottom:22px;}
.cg-hd{display:flex;align-items:center;gap:10px;margin-bottom:11px;}
.cg-icon{font-size:1.15rem;}
.cg-name{font-size:1.05rem;font-weight:900;color:var(--text);}
.cg-cnt{font-size:.72rem;color:var(--primary);background:var(--primary-dim);border-radius:100px;padding:3px 11px;font-weight:800;}

/* === Category Tabs (sticky at top of setup) === */
.setup-tabs-wrap{
  position:sticky;
  top:0;
  z-index:30;
  background:var(--background);
  padding:10px 0;
  margin-bottom:20px;
  border-bottom:2px solid var(--border);
}
.setup-tabs{
  display:flex;gap:8px;
  overflow-x:auto;
  padding:6px 4px;
  scrollbar-width:thin;
  scrollbar-color:var(--primary) transparent;
}
.setup-tabs::-webkit-scrollbar{height:6px;}
.setup-tabs::-webkit-scrollbar-thumb{background:var(--primary);border-radius:100px;}
.setup-tabs::-webkit-scrollbar-track{background:transparent;}

.setup-tab{
  display:flex;align-items:center;gap:8px;
  background:var(--s1);
  border:1px solid var(--border);
  border-radius:100px;
  padding:10px 20px;
  font-family:'Cairo',sans-serif;
  font-size:.92rem;font-weight:800;
  color:var(--text);
  cursor:pointer;
  transition:all .2s var(--ease);
  white-space:nowrap;
  flex-shrink:0;
  box-shadow:var(--sh-sm);
}
.setup-tab:hover{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:var(--sh-md);
}
.setup-tab .tab-icon{font-size:1.25rem;}
.setup-tab .tab-name{font-weight:900;}
.setup-tab .tab-count{
  background:var(--secondary-dim);
  color:var(--secondary);
  border-radius:100px;
  padding:2px 9px;
  font-size:.72rem;font-weight:900;
}
.setup-tab:hover .tab-count{
  background:var(--secondary);
  color:#fff;
}

/* Each category section */
.cat-section{
  margin-bottom:32px;
  padding:24px;
  background:var(--s1);
  border-radius:var(--r3);
  border:1px solid var(--border);
  transition:all .4s var(--ease);
  box-shadow:var(--sh-sm);
}
.cat-section.highlight{
  border-color:var(--secondary);
  box-shadow:var(--sh-orange);
}
.cat-section-hd{
  display:flex;align-items:center;gap:14px;
  margin-bottom:22px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}
.cat-big-icon{
  font-size:2.6rem;
  width:60px;height:60px;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary-dim);
  border-radius:14px;
  flex-shrink:0;
}
.cat-big-info{flex:1;}
.cat-big-name{
  font-size:1.3rem;font-weight:900;color:var(--text);
  margin-bottom:2px;
}
.cat-big-meta{
  font-size:.85rem;color:var(--muted);font-weight:700;
}

/* === Setup empty state === */
.setup-empty{
  text-align:center;
  padding:60px 24px;
  background:var(--s1);
  border:2px dashed var(--border2);
  border-radius:var(--r2);
}
.setup-empty-icon{font-size:4rem;margin-bottom:12px;opacity:.6;}
.setup-empty-title{
  font-size:1.3rem;font-weight:900;color:var(--primary-dark);
  margin-bottom:6px;
}
.setup-empty-desc{color:var(--muted);font-size:.92rem;}

/* === Sub-Category Cards (Sin Jeem professional style) === */
.sub-cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:18px;
}

.sub-card{
  position:relative;
  background:var(--s1);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:visible;
  cursor:pointer;
  transition:all .3s var(--ease-bounce);
  user-select:none;
  display:flex;
  flex-direction:column;
  box-shadow:var(--sh-sm);
}

.sub-card:hover:not(.invalid){
  transform:translateY(-10px) scale(1.04) rotate(-1.5deg);
  box-shadow:var(--sh-xl);
  z-index:5;
}
.sub-card:hover:not(.invalid) .sub-card-badge{
  transform:translateX(-50%) scale(1.1) translateY(-3px);
}
.sub-card:hover:not(.invalid) .sub-card-image{
  transform:scale(1.05);
}

.sub-card.selected{
  transform:translateY(-4px) scale(1.02);
}
.sub-card.selected .sub-card-name-bar{
  background:var(--secondary);
}
.sub-card.selected::after{
  content:'';
  position:absolute;inset:-3px;
  border:3px solid var(--secondary);
  border-radius:18px;
  pointer-events:none;
  box-shadow:var(--sh-orange);
}

.sub-card.invalid{
  opacity:0.55;
  cursor:not-allowed;
}
.sub-card.invalid:hover{transform:none;}

/* Info button (top right - blue circle like Sin Jeem) */
.sub-card-ibtn{
  position:absolute;
  top:8px;right:8px;
  width:28px;height:28px;
  background:#2563eb;
  color:#fff;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;font-weight:900;font-style:italic;
  z-index:6;
  border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}

/* "Games remaining" badge (top - red ribbon with star, Sin Jeem style) */
.sub-card-badge{
  position:absolute;
  top:-8px;left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg,#dc2626,#b91c1c);
  color:#fff;
  padding:5px 16px 5px 16px;
  border-radius:8px;
  font-size:.72rem;font-weight:900;
  z-index:7;
  white-space:nowrap;
  box-shadow:0 3px 10px rgba(220,38,38,0.5);
  transition:transform .3s var(--ease-bounce);
}
.sub-card-badge::before,
.sub-card-badge::after{
  content:'✦';
  font-size:.6rem;
  margin:0 3px;
  opacity:.9;
}

/* Check overlay when selected */
.sub-card-check{
  position:absolute;
  top:8px;left:8px;
  width:30px;height:30px;
  background:var(--secondary);
  color:#fff;
  border-radius:50%;
  display:none;
  align-items:center;justify-content:center;
  font-size:1rem;font-weight:900;
  z-index:8;
  border:3px solid #fff;
  box-shadow:0 4px 12px rgba(255,107,53,0.6);
}
.sub-card.selected .sub-card-check{display:flex;animation:popIn .3s ease;}
@keyframes popIn{from{transform:scale(0);}to{transform:scale(1);}}

/* Image area — big and prominent */
.sub-card-image{
  width:100%;
  aspect-ratio:1.15/1;
  background:linear-gradient(135deg,#dbeafe,#eff6ff);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  position:relative;
  border-radius:14px 14px 0 0;
  transition:transform .3s var(--ease);
}
.sub-card-image img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.sub-card-fallback{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:3.5rem;
  background:linear-gradient(135deg,#dbeafe,#bfdbfe);
}

/* Name bar — colored ribbon at bottom (Sin Jeem signature) */
.sub-card-name-bar{
  background:linear-gradient(135deg,var(--secondary),var(--secondary-dark));
  color:#fff;
  padding:11px 12px;
  text-align:center;
  border-radius:0 0 14px 14px;
  transition:background .2s;
}
.sub-card-name{
  font-size:1rem;
  font-weight:900;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#fff;
}

/* "Coming soon" overlay for invalid subs */
.sub-card-notready-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:flex;align-items:center;justify-content:center;
  border-radius:14px;
  z-index:5;
}
.sub-card-notready-tag{
  background:#1f2937;
  color:#fff;
  padding:7px 18px;
  border-radius:100px;
  font-size:.82rem;font-weight:900;
  border:2px solid rgba(255,255,255,0.3);
}

/* Mobile: 2 columns */
@media(max-width:600px){
  .sub-cards-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .sub-card-fallback{font-size:2.4rem;}
  .sub-card-name{font-size:.85rem;}
  .sub-card-name-bar{padding:9px 6px;}
  .sub-card-badge{font-size:.62rem;padding:4px 9px;}
  .sub-card-ibtn{width:24px;height:24px;font-size:.8rem;top:6px;right:6px;}
  /* lighter hover on touch — no rotate jitter */
  .sub-card:hover:not(.invalid){transform:translateY(-4px) scale(1.02);}
}

/* Tiny phones */
@media(max-width:380px){
  .sub-cards-grid{gap:10px;}
  .sub-card-name{font-size:.78rem;}
  .sub-card-badge{font-size:.58rem;padding:3px 7px;}
  .cat-section{padding:16px 12px;}
}

/* Desktop: 4-5 columns */
@media(min-width:900px){
  .sub-cards-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px;}
}

/* Legacy chip styles kept for fallback */
.subs{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  background:var(--s1);border:1.5px solid var(--border);border-radius:100px;
  padding:8px 14px;color:var(--text2);font-family:'Cairo',sans-serif;font-size:.85rem;font-weight:700;
  cursor:pointer;transition:all .18s;user-select:none;display:inline-flex;align-items:center;gap:5px;
}
.chip:hover{border-color:rgba(30,58,95,.4);color:var(--text);}
.chip.on{background:var(--primary-dim);border-color:var(--primary);color:var(--primary);}
.chip .ck{display:none;}
.chip.on .ck{display:inline;}

.sticky-bot{position:fixed;bottom:0;left:0;right:0;
  background:linear-gradient(to top,var(--bg) 50%,transparent);padding:18px;text-align:center;pointer-events:none;z-index:50;}
.sticky-bot button{pointer-events:all;}
.btn-go{
  background:var(--primary);color:#fff;border:none;border-radius:14px;padding:15px 52px;
  font-family:'Cairo',sans-serif;font-size:1.05rem;font-weight:900;cursor:pointer;transition:all .2s;
  box-shadow:0 4px 24px rgba(30,58,95,.3);
}
.btn-go:hover{background:var(--primary2);transform:scale(1.03);}
.btn-go:disabled{opacity:.3;cursor:not-allowed;transform:none;box-shadow:none;}

/* ════════════════ ADMIN PANEL ════════════════ */
#admin{min-height:100vh;}
.admin-layout{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 60px);}

.admin-sidebar{
  background:var(--s1);border-left:1px solid var(--border);
  padding:20px 14px;display:flex;flex-direction:column;gap:4px;
}
.admin-sidebar-hd{
  font-size:.68rem;font-weight:800;color:var(--muted);
  letter-spacing:1.5px;padding:8px 12px;margin-top:6px;
}
.admin-nav-item{
  background:none;border:none;padding:11px 14px;border-radius:10px;
  color:var(--text2);font-family:'Cairo',sans-serif;font-size:.9rem;font-weight:700;
  cursor:pointer;transition:all .18s var(--ease);text-align:right;
  display:flex;align-items:center;gap:10px;position:relative;
}
.admin-nav-item:hover{background:var(--s2);color:var(--text);}
.admin-nav-item.act{background:var(--primary);color:#fff;box-shadow:var(--sh-sm);}
.admin-nav-item.act .nav-icon{filter:brightness(1.5);}
.admin-nav-item .nav-icon{font-size:1.1rem;width:22px;text-align:center;}

.admin-content{padding:28px;overflow-y:auto;}
.admin-page{display:none;}
.admin-page.act{display:block;animation:pageFadeIn .3s var(--ease);}

.admin-page-hd{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;flex-wrap:wrap;gap:12px;
}
.admin-page-ttl{font-size:1.6rem;font-weight:900;letter-spacing:-.5px;}
.admin-page-sub{color:var(--muted);font-size:.88rem;margin-top:3px;}

/* Stat cards */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:28px;}
.stat-card{
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r2);
  padding:20px 22px;position:relative;overflow:hidden;
  transition:all .2s var(--ease);box-shadow:var(--sh-sm);
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md);}
.stat-icon{font-size:1.5rem;margin-bottom:10px;}
.stat-label{font-size:.78rem;color:var(--muted);font-weight:700;margin-bottom:5px;}
.stat-value{font-size:2.1rem;font-weight:900;line-height:1;}
.stat-value.primary{color:var(--primary);}
.stat-value.secondary{color:var(--secondary);}
.stat-value.green{color:var(--green);}
.stat-value.purple{color:var(--purple);}
.stat-trend{font-size:.78rem;color:var(--green);margin-top:6px;font-weight:700;}

.dash-row{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:24px;}
@media(max-width:900px){.dash-row{grid-template-columns:1fr;}}

.panel{
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r2);
  padding:22px;box-shadow:var(--sh-sm);
}
.panel-hd{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;
}
.panel-ttl{font-size:1.05rem;font-weight:900;}

/* Bar chart */
.bar-chart{display:flex;flex-direction:column;gap:10px;}
.bar-row{display:flex;align-items:center;gap:10px;}
.bar-label{font-size:.85rem;font-weight:700;min-width:120px;color:var(--text2);}
.bar-track{flex:1;background:var(--s2);border-radius:100px;height:24px;overflow:hidden;position:relative;}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary2));border-radius:100px;transition:width .8s ease;}
.bar-value{font-size:.85rem;font-weight:800;color:var(--primary);min-width:50px;text-align:left;}

/* Recent activity */
.activity-list{display:flex;flex-direction:column;gap:8px;}
.activity-item{
  display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;
  background:var(--s2);font-size:.85rem;
}
.activity-icon{
  width:32px;height:32px;border-radius:50%;background:var(--primary-dim);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;
}
.activity-text{flex:1;font-weight:600;}
.activity-text strong{color:var(--text);font-weight:800;}
.activity-time{font-size:.72rem;color:var(--muted);font-weight:600;}

/* Tables */
.tbl-wrap{background:var(--s1);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;}
.tbl{width:100%;border-collapse:collapse;}
.tbl th{
  background:var(--s2);padding:11px 14px;text-align:right;font-size:.78rem;
  font-weight:800;color:var(--muted);letter-spacing:.5px;border-bottom:1px solid var(--border);
}
.tbl td{
  padding:13px 14px;border-bottom:1px solid var(--border);font-size:.88rem;font-weight:700;
}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr:hover{background:var(--s2);}

.code-pill{
  background:var(--s2);border:1px solid var(--border);border-radius:8px;
  padding:3px 10px;font-family:monospace;font-size:.85rem;font-weight:800;
  color:var(--secondary);letter-spacing:.5px;
}
.status-pill{
  display:inline-block;border-radius:100px;padding:2px 10px;font-size:.72rem;font-weight:800;
}
.status-pill.active{background:rgba(62,207,142,.12);color:var(--green);border:1px solid rgba(62,207,142,.3);}
.status-pill.expired{background:rgba(240,80,80,.12);color:var(--red);border:1px solid rgba(240,80,80,.3);}
.status-pill.used{background:var(--s3);color:var(--muted);}

.row-actions{display:flex;gap:4px;}
.icon-btn{
  background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:.95rem;padding:4px 7px;border-radius:5px;transition:all .15s;
}
.icon-btn:hover{color:var(--text);background:var(--s3);}
.icon-btn.danger:hover{color:var(--red);}

/* Toolbar */
.toolbar{
  display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center;
}
.toolbar input{
  background:var(--s1);border:1.5px solid var(--border);border-radius:10px;
  padding:9px 14px;color:var(--text);font-family:'Cairo',sans-serif;
  font-size:.88rem;font-weight:600;outline:none;text-align:right;
}
.toolbar input:focus{border-color:var(--primary);}

.btn-add{
  background:var(--primary);color:#fff;border:none;border-radius:11px;
  padding:10px 20px;font-family:'Cairo',sans-serif;font-size:.88rem;font-weight:800;
  cursor:pointer;transition:all .2s var(--ease);display:inline-flex;align-items:center;gap:5px;
  box-shadow:var(--sh-sm);
}
.btn-add:hover{background:var(--primary2);transform:translateY(-1px);box-shadow:var(--sh-md);}
.btn-add:active{transform:translateY(0);}

/* Permissions checkboxes */
.perm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.perm-item{
  background:var(--s2);border:1.5px solid var(--border);border-radius:10px;
  padding:11px 14px;cursor:pointer;transition:all .15s;
  display:flex;align-items:center;gap:10px;
}
.perm-item:hover{border-color:var(--border2);}
.perm-item.checked{background:var(--primary-dim);border-color:var(--primary);}
.perm-cbx{
  width:18px;height:18px;border:1.5px solid var(--muted);border-radius:5px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  color:var(--primary);font-size:.85rem;font-weight:900;
}
.perm-item.checked .perm-cbx{border-color:var(--primary);background:var(--primary);color:#fff;}
.perm-label{font-size:.85rem;font-weight:700;}

/* ════════════════ ADMIN: QUESTIONS (categories editor) ════════════════ */
.adm-grid{display:grid;grid-template-columns:280px 1fr;gap:14px;}
@media(max-width:900px){.adm-grid{grid-template-columns:1fr;}}

.adm-side{
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r);
  padding:14px;max-height:calc(100vh - 200px);overflow-y:auto;
}
.adm-side-hd{font-size:.72rem;color:var(--muted);font-weight:800;letter-spacing:1.5px;margin-bottom:10px;padding:0 4px;}
.adm-main-cat{margin-bottom:14px;}
.amc-head{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;font-size:.88rem;font-weight:800;color:var(--text2);}
.amc-name{flex:1;font-size:.9rem;}
.amc-actions{display:flex;gap:4px;opacity:0;transition:opacity .2s;}
.amc-head:hover .amc-actions{opacity:1;}
.subs-list{padding-right:14px;}
.sub-item{
  display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:8px;cursor:pointer;
  font-size:.85rem;font-weight:700;color:var(--text2);transition:all .15s;border:1px solid transparent;
}
.sub-item:hover{background:var(--s2);color:var(--text);}
.sub-item.active{background:var(--primary-dim);color:var(--primary);border-color:rgba(30,58,95,.3);}
.sub-item .si-icon{font-size:1rem;}
.sub-item .si-name{flex:1;}
.sub-item .si-actions{display:flex;gap:2px;opacity:0;transition:opacity .15s;}
.sub-item:hover .si-actions,.sub-item.active .si-actions{opacity:1;}
.sub-item .si-count{font-size:.7rem;color:var(--muted);background:var(--s3);padding:1px 7px;border-radius:100px;font-weight:700;}
.sub-item .si-plays{font-size:.7rem;color:var(--secondary);background:rgba(255,107,53,.15);padding:1px 7px;border-radius:100px;font-weight:700;}

.adm-add-btn{
  width:100%;background:transparent;border:1.5px dashed var(--border2);border-radius:8px;
  padding:8px;color:var(--muted);font-family:'Cairo',sans-serif;font-size:.82rem;font-weight:700;
  cursor:pointer;transition:all .2s;margin-top:6px;
}
.adm-add-btn:hover{border-color:var(--primary);color:var(--primary);}

.adm-detail{
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:24px;min-height:500px;
}
.adm-detail-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:400px;color:var(--muted);text-align:center;gap:10px;}
.adm-detail-empty .big-icon{font-size:3rem;opacity:.5;}
.adm-detail-hd{display:flex;align-items:center;gap:10px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.adm-detail-hd.is-hidden{opacity:.85;}
.adm-detail-hd.is-hidden .ad-icon,
.adm-detail-hd.is-hidden .ad-name{opacity:.6;}
.hidden-badge{
  display:inline-block;background:#a90000;color:#fff;
  padding:2px 10px;border-radius:100px;
  font-size:.7rem;font-weight:900;margin-right:8px;
}
.btn-toggle-vis{
  background:var(--secondary);color:#fff;border:none;
  padding:8px 18px;border-radius:10px;
  font-family:'Cairo',sans-serif;font-size:.85rem;font-weight:800;
  cursor:pointer;transition:all .15s;
  margin-right:auto;
}
.btn-toggle-vis:hover{background:var(--secondary-dark);transform:scale(.97);}
.btn-toggle-vis.is-hidden-btn{background:var(--primary);}
.btn-toggle-vis.is-hidden-btn:hover{background:var(--primary-dark);}
.sub-item.is-hidden-sub{opacity:.55;}
.sub-item.is-hidden-sub .si-name{color:#a90000;}
.ad-icon{font-size:1.6rem;}
.ad-info{flex:1;}
.ad-cat{font-size:.72rem;color:var(--muted);font-weight:700;letter-spacing:1px;}
.ad-name{font-size:1.3rem;font-weight:800;margin-top:2px;}
.ad-stats{display:flex;gap:10px;align-items:center;}
.ad-stat{font-size:.78rem;color:var(--muted);background:var(--s2);padding:5px 10px;border-radius:8px;font-weight:700;}
.ad-stat strong{color:var(--text);font-weight:900;margin-right:3px;}

.pts-tabs{display:flex;gap:4px;margin-bottom:18px;flex-wrap:wrap;background:var(--s2);padding:4px;border-radius:10px;}
.pts-tab{flex:1;background:none;border:none;padding:9px 12px;border-radius:7px;
  color:var(--muted);font-family:'Cairo',sans-serif;font-size:.82rem;font-weight:800;
  cursor:pointer;transition:all .15s;white-space:nowrap;}
.pts-tab:hover{color:var(--text);}
.pts-tab.act{background:var(--s1);color:var(--text);box-shadow:0 1px 6px rgba(30,58,95,.1);}
.pts-tab .pt-cnt{display:inline-block;margin-right:5px;font-size:.7rem;
  background:var(--s3);color:var(--text2);padding:1px 7px;border-radius:100px;font-weight:700;}
.pts-tab.act .pt-cnt{background:var(--primary);color:#fff;}

.qs-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.q-card{background:var(--s2);border:1px solid var(--border);border-radius:var(--r);
  padding:14px 16px;display:flex;gap:10px;align-items:flex-start;}
.q-num{background:var(--primary-dim);color:var(--primary);border-radius:7px;
  padding:3px 9px;font-size:.75rem;font-weight:800;min-width:30px;text-align:center;flex-shrink:0;}
.q-content{flex:1;min-width:0;}
.q-text{font-size:.95rem;font-weight:700;line-height:1.5;margin-bottom:6px;}
.q-ans{font-size:.85rem;color:var(--green);font-weight:600;}
.q-ans .q-lbl{color:var(--muted);font-weight:700;}
.q-hint{font-size:.78rem;color:var(--secondary);margin-top:4px;font-weight:600;}
.q-actions{display:flex;flex-direction:column;gap:4px;flex-shrink:0;}

.q-empty{text-align:center;padding:28px;color:var(--muted);font-size:.88rem;
  background:var(--s2);border:1.5px dashed var(--border2);border-radius:var(--r);}

/* Sub-category image upload section */
.sub-image-section{
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r);
  padding:16px;margin-bottom:16px;
}
.sis-header{margin-bottom:14px;}
.sis-title{font-size:.95rem;font-weight:800;color:var(--text);}
.sis-content{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
.sis-preview{flex-shrink:0;}
.sis-img{
  width:120px;height:80px;object-fit:cover;border-radius:10px;
  border:2px solid var(--border);
}
.sis-img-empty{
  width:120px;height:80px;display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;background:var(--s2);border-radius:10px;border:2px dashed var(--border2);
}
.sis-controls{display:flex;flex-direction:column;gap:8px;flex:1;min-width:160px;}
.btn-upload-img,.btn-remove-img{
  background:var(--primary);color:#fff;border:none;border-radius:8px;
  padding:10px 18px;font-family:'Cairo',sans-serif;font-size:.88rem;font-weight:800;
  cursor:pointer;transition:all .2s;
}
.btn-upload-img:hover{background:var(--primary2);}
.btn-remove-img{
  background:var(--s2);color:var(--red);border:1px solid rgba(239,68,68,.3);
}
.btn-remove-img:hover{background:rgba(239,68,68,.08);}
.sis-tip{font-size:.72rem;color:var(--muted);font-weight:600;}

/* Question dialog image upload */
.img-upload-row{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--s2);border-radius:10px;padding:12px;
  flex-wrap:wrap;
}
.img-preview-small{
  width:100px;height:100px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--s1);border:2px dashed var(--border2);border-radius:10px;
  overflow:hidden;
  position:relative;
}
/* Aspect-aware preview - matches the actual display ratio */
.img-preview-small.img-aspect-cat{
  width:140px;height:100px; /* 1.4:1 - matches subcategory cards */
}
.img-preview-small.img-aspect-q{
  width:120px;height:90px; /* 4:3 - matches question display */
}
.img-preview-small.img-aspect-game{
  width:100px;height:100px; /* 1:1 - matches game card icon */
}
.img-preview-small img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.img-empty-icon{font-size:2.3rem;color:var(--muted);}
.img-upload-controls{flex:1;min-width:160px;display:flex;flex-direction:column;gap:6px;}
.img-upload-controls .btn-img-upload,
.img-upload-controls .btn-img-remove{
  font-family:'Cairo',sans-serif;font-size:.82rem;font-weight:800;
  padding:8px 14px;border-radius:8px;cursor:pointer;border:none;
  transition:all .2s;
}
.btn-img-upload{background:var(--primary);color:#fff;}
.btn-img-upload:hover{background:var(--primary2);}
.btn-img-remove{
  background:var(--s1);color:var(--red);border:1px solid rgba(239,68,68,.3);
}
.btn-img-remove:hover{background:rgba(239,68,68,.08);}
.img-tip{font-size:.7rem;color:var(--muted);font-weight:600;}

/* Image specifications table */
.img-spec{
  background:var(--s1);
  border-right:3px solid var(--primary);
  border-radius:6px;
  padding:8px 10px;
  margin-top:4px;
}
.img-spec-row{
  font-size:.78rem;
  color:var(--text2);
  font-weight:700;
  margin-bottom:3px;
}
.img-spec-row:last-child{margin-bottom:0;}
.img-spec-row strong{color:var(--primary-dark);font-weight:900;}
.img-spec-row.img-spec-note{
  margin-top:6px;padding-top:6px;
  border-top:1px solid var(--border);
  color:var(--secondary);
  font-size:.72rem;
}

/* === Game card image (replaces emoji when admin uploads) === */
.game-card-img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.sj-card-icon img.game-card-img{
  border-radius:0; /* Fills the icon container fully */
}

/* === Games customization page (admin) === */
.games-customize-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
  gap:18px;
}
.game-customize-card{
  background:var(--s1);
  border:2px solid var(--border);
  border-radius:14px;
  padding:18px;
}
.gcc-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:2px solid var(--border);
}
.gcc-header h3{
  margin:0;font-size:1.1rem;font-weight:900;
  color:var(--primary-dark);
}
.gcc-status{
  font-size:.7rem;padding:4px 12px;border-radius:100px;
  font-weight:900;
}
.gcc-status.active{background:rgba(16,185,129,0.15);color:#059669;}
.gcc-status.inactive{background:rgba(156,163,175,0.2);color:#6b7280;}

.gcc-preview{
  margin-bottom:16px;
}
.gcc-preview-label{
  font-size:.72rem;color:var(--muted);
  font-weight:800;margin-bottom:6px;
  text-transform:uppercase;letter-spacing:1px;
}
.gcc-preview-card{
  max-width:200px;margin:0 auto;
  pointer-events:none;
}
.gcc-preview-card .sj-card-icon{
  height:130px!important;
  font-size:3.5rem!important;
}
.gcc-preview-card .sj-card-name{
  font-size:.92rem!important;
  padding:10px!important;
}

/* Sub-category analytics panel */
.sub-analytics{
  background:linear-gradient(135deg,var(--primary-dim),var(--secondary-dim));
  border:1px solid rgba(30,58,95,.15);
  border-radius:var(--r);padding:18px;margin-bottom:18px;
}
.sa-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;flex-wrap:wrap;gap:6px;}
.sa-title{font-size:1rem;font-weight:900;color:var(--primary-deep);}
.sa-sub{font-size:.78rem;color:var(--text2);font-weight:600;}

.sa-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;
}
.sa-card{
  background:var(--s1);border:1.5px solid var(--border);border-radius:10px;
  padding:14px 10px;text-align:center;position:relative;overflow:hidden;
  transition:transform .2s;
}
.sa-card:hover{transform:translateY(-2px);}
.sa-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
.sa-card.free::before{background:var(--green);}
.sa-card.paid::before{background:var(--primary);}
.sa-card.coupon::before{background:var(--secondary);}
.sa-card.total::before{background:linear-gradient(90deg,var(--primary),var(--secondary));}
.sa-icon{font-size:1.4rem;margin-bottom:4px;}
.sa-num{font-size:1.7rem;font-weight:900;line-height:1;color:var(--text);}
.sa-card.free .sa-num{color:var(--green);}
.sa-card.paid .sa-num{color:var(--primary);}
.sa-card.coupon .sa-num{color:var(--secondary);}
.sa-card.total .sa-num{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sa-label{font-size:.7rem;color:var(--muted);font-weight:700;margin-top:4px;}
.sa-pct{font-size:.72rem;color:var(--text2);font-weight:800;margin-top:4px;
  background:var(--s2);border-radius:100px;padding:1px 8px;display:inline-block;}

.sa-coupons{
  background:var(--s1);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;
}
.sa-coupons-title{font-size:.85rem;font-weight:800;color:var(--text);margin-bottom:10px;}
.sa-coupons-list{display:flex;flex-direction:column;gap:6px;}
.sa-coupon-row{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--s2);border-radius:8px;padding:7px 12px;
}
.sa-coupon-count{font-size:.85rem;color:var(--text2);font-weight:700;}
.sa-coupon-count strong{color:var(--primary);font-size:1.05rem;font-weight:900;margin-left:3px;}

.sa-coupons-empty{
  text-align:center;padding:14px;color:var(--muted);
  font-size:.82rem;font-weight:700;background:var(--s1);
  border:1px dashed var(--border2);border-radius:10px;
}

@media(max-width:700px){
  .sa-grid{grid-template-columns:repeat(2,1fr);}
}

.btn-add-q{width:100%;background:var(--primary-dim);border:1.5px dashed var(--primary);
  border-radius:var(--r);padding:14px;color:var(--primary);
  font-family:'Cairo',sans-serif;font-size:.95rem;font-weight:800;cursor:pointer;transition:all .2s;}
.btn-add-q:hover{background:rgba(30,58,95,.18);}

/* ════════════════ DIALOG ════════════════ */
.dlg-overlay{
  position:fixed;inset:0;background:rgba(31,23,51,.55);backdrop-filter:blur(10px);
  z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.dlg-overlay.open{opacity:1;pointer-events:all;}
.dlg{
  background:var(--s1);border:1px solid var(--border2);border-radius:20px;padding:28px;
  max-width:560px;width:100%;
  transform:scale(.95);transition:transform .25s cubic-bezier(.34,1.56,.64,1);
  max-height:90vh;overflow-y:auto;
}
.dlg-overlay.open .dlg{transform:scale(1);}
.dlg h3{font-size:1.2rem;font-weight:900;margin-bottom:6px;}
.dlg .dlg-sub{color:var(--muted);font-size:.85rem;margin-bottom:18px;}
.icon-grid{display:flex;flex-wrap:wrap;gap:6px;max-height:160px;overflow-y:auto;
  background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:10px;}
.icon-opt{width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:var(--s1);border:1.5px solid var(--border);border-radius:8px;cursor:pointer;
  font-size:1.2rem;transition:all .15s;}
.icon-opt:hover{border-color:var(--primary);}
.icon-opt.sel{border-color:var(--primary);background:var(--primary-dim);}
.dlg-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;}
.btn-cancel{background:var(--s2);border:1px solid var(--border);border-radius:10px;
  padding:11px 20px;color:var(--text2);font-family:'Cairo',sans-serif;
  font-size:.9rem;font-weight:700;cursor:pointer;transition:all .2s;}
.btn-cancel:hover{color:var(--text);border-color:var(--border2);}
.btn-save{background:var(--primary);color:#fff;border:none;border-radius:10px;
  padding:11px 28px;font-family:'Cairo',sans-serif;
  font-size:.95rem;font-weight:900;cursor:pointer;transition:all .2s;}
.btn-save:hover{background:var(--primary2);}

/* ════════════════ GAME ════════════════ */
/* ═══════════════ GAME SCREEN — ASBQHOM HEADER & FOOTER ═══════════════ */
#game,#keyword-game,#liar-game,#rapid-game{
  background:var(--background);
  height:100vh;
  display:none;flex-direction:column;
  overflow:hidden;
}
#game.active,#keyword-game.active,#liar-game.active,#rapid-game.active{display:flex;}

/* Top game bar with title in center, back+end on right, exit on left */
.game-topbar{
  display:flex;align-items:center;gap:10px;
  padding:12px 20px;
  background:var(--primary);
  border-bottom:3px solid var(--primary-dark);
  flex-wrap:wrap;
}
.gtb-btn{
  background:var(--primary-dark);
  border:none;color:var(--secondary);
  padding:8px 18px;border-radius:14px;
  font-family:'Cairo',sans-serif;font-size:.9rem;font-weight:800;
  cursor:pointer;transition:all .2s;
  display:inline-flex;align-items:center;gap:6px;
}
.gtb-btn:hover{background:var(--primary-darker);transform:translateY(-1px);}
.gtb-btn-end{
  background:#a90000;color:#fff;
}
.gtb-btn-end:hover{background:#7a0000;}
.gtb-title{
  flex:1;text-align:center;
  font-size:1.1rem;font-weight:900;color:#fff;
  letter-spacing:-.3px;
}
.gtb-logo{
  font-size:1.4rem;font-weight:900;color:var(--secondary);
  letter-spacing:-1px;
  text-shadow:1px 2px 0 rgba(0,0,0,0.2);
}
.gtb-spacer{flex:1;}

/* ═══════════════ VERTICAL SIDE HUD (right side, split top/bottom) ═══════════════ */
.side-hud{
  position:fixed;
  top:0;right:0;bottom:0;
  width:170px;
  background:var(--primary);
  border-left:3px solid var(--primary-dark);
  display:none; /* hidden by default */
  flex-direction:column;
  z-index:110; /* above .qs-screen (100) so it stays visible during question */
  padding:12px 10px;
  gap:10px;
}
/* Show side-hud only when the afham game screen is active */
#game.active .side-hud{
  display:flex;
}
.side-hud-team{
  flex:1;
  background:var(--primary-dark);
  border-radius:14px;
  padding:12px 10px;
  display:flex;flex-direction:column;gap:8px;
  align-items:stretch;
  transition:all .3s;
}
.side-hud-team.act{
  background:var(--secondary);
  box-shadow:0 4px 16px rgba(255,107,53,0.4);
  transform:scale(1.02);
}
.side-hud-team-name{
  font-size:.9rem;font-weight:900;color:#fff;
  text-align:center;
  padding:6px 4px;
  background:var(--primary-darker);
  border-radius:10px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.side-hud-team.act .side-hud-team-name{
  color:#fff;background:var(--primary-dark);
}
.side-hud-score-row{
  display:flex;align-items:center;gap:4px;
}
.side-hud-pts-btn{
  width:28px;height:28px;border-radius:8px;
  background:var(--primary-darker);border:none;
  color:#fff;cursor:pointer;
  font-size:1.1rem;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
  flex-shrink:0;
}
.side-hud-pts-btn:hover{background:var(--primary);transform:scale(.92);}
.side-hud-team.act .side-hud-pts-btn{background:var(--primary-dark);color:#fff;}
.side-hud-team.act .side-hud-pts-btn:hover{background:var(--primary-darker);}
.side-hud-pts{
  flex:1;text-align:center;
  font-size:1.4rem;font-weight:900;
  color:#fff;
  background:var(--primary-darker);
  border-radius:8px;padding:6px 4px;
  min-width:0;
}
.side-hud-team.act .side-hud-pts{color:#fff;background:var(--primary-dark);}

.side-hud-tools{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;
}
.side-hud-tool{
  aspect-ratio:1;
  border-radius:50%;
  background:var(--primary-darker);
  border:1px solid rgba(255,255,255,0.15);
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;
  transition:all .2s;
  padding:0;
}
.side-hud-tool:hover:not([disabled]){background:var(--primary);transform:scale(1.1);}
.side-hud-tool[disabled]{opacity:.3;cursor:not-allowed;}
.side-hud-team.act .side-hud-tool{
  background:rgba(0,0,0,0.12);color:var(--primary-dark);
  border-color:rgba(0,0,0,0.1);
}
.side-hud-team.act .side-hud-tool:hover:not([disabled]){background:rgba(0,0,0,0.22);}

.side-hud-logo-block{
  background:var(--primary-darker);
  border:2px solid var(--secondary);
  border-radius:14px;
  padding:10px 8px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.side-hud-logo-text{
  font-size:1.1rem;font-weight:900;
  color:var(--secondary);
  letter-spacing:-.5px;
  text-shadow:1px 1px 0 rgba(0,0,0,0.3);
}
.side-hud-turn-label{
  font-size:.7rem;font-weight:800;
  color:#fff;opacity:.85;
  text-align:center;
  line-height:1.3;
}
.side-hud-turn-name{
  font-size:.85rem;font-weight:900;
  color:var(--primary-dark);
  background:var(--secondary);
  padding:4px 10px;border-radius:8px;
  margin-top:3px;
  max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Shift game content so it doesn't go under the right HUD */
#game{padding-right:180px;}
.qs-screen{padding-right:180px;}

/* Tablets */
@media(max-width:1024px){
  .side-hud{width:155px;padding:10px 8px;gap:8px;}
  #game{padding-right:155px;}
  .qs-screen{padding-right:155px;}
  .side-hud-pts{font-size:1.25rem;}
  .side-hud-logo-text{font-size:1rem;}
}
/* Small tablets / large phones */
@media(max-width:820px){
  .side-hud{width:135px;padding:8px 6px;gap:6px;}
  #game{padding-right:135px;}
  .qs-screen{padding-right:135px;}
  .side-hud-team-name{font-size:.78rem;padding:5px 2px;}
  .side-hud-pts{font-size:1.1rem;padding:4px 2px;}
  .side-hud-pts-btn{width:24px;height:24px;font-size:.9rem;}
  .side-hud-tool{font-size:.78rem;}
  .side-hud-logo-text{font-size:.92rem;}
  .side-hud-turn-label{font-size:.65rem;}
  .side-hud-turn-name{font-size:.75rem;padding:3px 6px;}
}
/* Phones */
@media(max-width:600px){
  .side-hud{width:108px;padding:6px 4px;gap:5px;}
  #game{padding-right:108px;}
  .qs-screen{padding-right:108px;}
  .side-hud-team{padding:8px 6px;gap:5px;border-radius:10px;}
  .side-hud-team-name{font-size:.7rem;padding:4px 2px;}
  .side-hud-pts{font-size:1rem;padding:3px 2px;}
  .side-hud-pts-btn{width:20px;height:20px;font-size:.8rem;border-radius:6px;}
  .side-hud-tools{gap:3px;}
  .side-hud-tool{font-size:.7rem;}
  .side-hud-logo-block{padding:6px 4px;gap:3px;}
  .side-hud-logo-text{font-size:.82rem;}
  .side-hud-turn-label{font-size:.6rem;}
  .side-hud-turn-name{font-size:.68rem;padding:2px 4px;}
}

/* OLD bottom HUD — hide */
.game-hud{display:none;}

@media(max-width:600px){
  .game-topbar{padding:8px 10px;gap:5px;}
  .gtb-btn{padding:6px 10px;font-size:.75rem;border-radius:10px;}
  .gtb-title{font-size:.85rem;}
  .gtb-logo{font-size:1rem;}
}

/* Confirm dialog */
.confirm-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.6);
  z-index:200;display:none;align-items:center;justify-content:center;
  padding:20px;
}
.confirm-overlay.open{display:flex;animation:qsFadeIn .2s ease;}
.confirm-box{
  background:var(--primary-dark);border-radius:20px;
  padding:30px;max-width:420px;width:100%;text-align:center;
  border:3px solid var(--primary);
}
.confirm-title{
  font-size:1.3rem;font-weight:900;color:#fff;margin-bottom:10px;
}
.confirm-msg{
  font-size:.95rem;color:var(--secondary);margin-bottom:24px;font-weight:600;
}
.confirm-actions{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
}
.confirm-btn{
  padding:12px 28px;border:none;border-radius:14px;
  font-family:'Cairo',sans-serif;font-size:1rem;font-weight:900;
  cursor:pointer;transition:all .2s;
}
.confirm-btn-yes{background:#a90000;color:#fff;}
.confirm-btn-yes:hover{background:#7a0000;transform:scale(1.04);}
.confirm-btn-no{background:var(--primary);color:#fff;}
.confirm-btn-no:hover{background:var(--primary2);}

/* Admin code dialog */
.confirm-icon-warn{
  font-size:3rem;margin-bottom:8px;line-height:1;
}
.admin-code-input-wrap{
  margin:18px 0 24px;
}
#adminCodeInput:focus{
  border-color:#fff!important;
  box-shadow:0 0 0 4px rgba(255,107,53,0.3);
}
#adminCodeInput::placeholder{
  color:rgba(255,255,255,0.3);
}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%,60%{transform:translateX(-8px);}
  40%,80%{transform:translateX(8px);}
}

/* Resume / new-game dialog */
.resume-box{
  background:var(--primary-dark);border-radius:24px;
  padding:32px 28px;max-width:480px;width:100%;text-align:center;
  border:3px solid var(--primary);
  animation:qsPhaseIn .3s cubic-bezier(.34,1.56,.64,1);
}
.resume-icon{
  font-size:3rem;margin-bottom:8px;
}
.resume-title{
  font-size:1.4rem;font-weight:900;color:#fff;margin-bottom:6px;
}
.resume-sub{
  font-size:.9rem;color:var(--secondary);margin-bottom:22px;font-weight:700;
}
.resume-dot{margin:0 6px;opacity:.6;}

.resume-scores{
  display:flex;align-items:center;justify-content:center;gap:14px;
  background:var(--primary-darker);
  border-radius:16px;padding:14px;
  margin-bottom:22px;
}
.resume-team{
  flex:1;display:flex;flex-direction:column;gap:6px;
}
.resume-team-name{
  font-size:.8rem;font-weight:700;color:var(--secondary);
  opacity:.85;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.resume-team-score{
  font-size:2rem;font-weight:900;color:#fff;line-height:1;
}
.resume-vs{
  font-size:.8rem;font-weight:900;color:var(--secondary);
  opacity:.6;letter-spacing:1px;
}

.resume-actions{
  display:flex;flex-direction:column;gap:10px;margin-bottom:12px;
}
.resume-btn{
  padding:14px 22px;border:none;border-radius:14px;
  font-family:'Cairo',sans-serif;font-size:1.05rem;font-weight:900;
  cursor:pointer;transition:all .2s;
}
.resume-btn-continue{
  background:var(--secondary);color:var(--primary-dark);
}
.resume-btn-continue:hover{
  background:var(--secondary-light);transform:scale(1.03);
}
.resume-btn-new{
  background:var(--primary);color:#fff;
  border:2px solid var(--primary);
}
.resume-btn-new:hover{
  background:var(--primary2);
}

.resume-cancel{
  background:transparent;border:none;
  color:var(--secondary);opacity:.7;cursor:pointer;
  font-family:'Cairo',sans-serif;font-size:.85rem;font-weight:700;
  padding:6px 16px;
  transition:opacity .2s;
}
.resume-cancel:hover{opacity:1;text-decoration:underline;}

/* OLD score-strip kept for back-compat — hidden */
.score-strip{display:none;}
.sc-tile,.sc-emoji,.sc-name,.sc-pts,.turn-pill{}

/* ═══════════════ BOARD — ASBQHOM STYLE ═══════════════ */
.board{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,1fr); /* exactly 2 rows */
  gap:14px;
  padding:14px;
  flex:1;
  min-height:0; /* allow children to shrink */
  width:100%;
}
.cat-card{
  display:grid;grid-template-columns:1fr 2fr 1fr;
  align-items:stretch;
  background:var(--primary);
  border:4px solid var(--primary);
  border-radius:16px;
  overflow:hidden;
  min-height:0;
  width:100%;
}
/* Hide old top/bottom name strips since we put name overlay on image */
.cat-name-top,.cat-name-bottom{display:none;}

.cat-cells{
  display:contents; /* let children flow into the card grid */
}
.cat-col-points{
  display:flex;flex-direction:column;gap:3px;padding:0;
  min-height:0;
}
.cat-col-points .cell{flex:1;min-height:0;}

.cell{
  background:var(--s1);
  border:none;
  font-family:'Cairo',sans-serif;
  font-size:clamp(.85rem,1.3vw,1.25rem);
  font-weight:900;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
  color:var(--primary-dark);
  padding:0;
  letter-spacing:.5px;
}
.cell:hover:not([disabled]){
  background:var(--secondary);
  color:#fff;
  transform:scale(0.97);
}
.cell[disabled]{cursor:default;}
.cell.dT1{
  background:var(--s1);color:var(--primary-dark);
  opacity:0.3;
}
.cell.dT2{
  background:var(--s1);color:var(--primary-dark);
  opacity:0.3;
}
.cell.dX{
  background:var(--s1);color:var(--primary-dark);
  opacity:0.3;
}
.cell.empty{opacity:0.3;cursor:not-allowed;}
/* Already-answered cell — clearly marked */
.cell.done{
  background:var(--primary-darker)!important;
  color:var(--secondary)!important;
  opacity:.55;
  cursor:not-allowed;
  font-size:1.4rem;
}
.cell.done:hover{transform:none;background:var(--primary-darker)!important;filter:none;}

.cat-center{
  position:relative;
  overflow:hidden;
  background:var(--s1);
  display:flex;align-items:stretch;justify-content:center;
  min-width:0;
}
.cat-img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.cat-img-fallback{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:clamp(2rem,4vw,3.5rem);
  background:var(--secondary);
}
/* Category name strip absolute at bottom of image */
.cat-name-strip{
  position:absolute;left:0;right:0;bottom:0;
  background:var(--primary-dark);
  border-top:3px solid var(--secondary);
  color:#fff;
  font-weight:900;
  text-align:center;
  padding:6px 8px;
  font-size:clamp(.7rem,1.1vw,.95rem);
  letter-spacing:-.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Tablets — keep 3x2 but reduce padding */
@media(max-width:1024px){
  .board{gap:10px;padding:10px;}
  .cat-card{border-width:3px;border-radius:14px;}
}
/* Smaller tablets — still 3x2, smaller */
@media(max-width:820px){
  .board{gap:8px;padding:8px;}
}
/* Phones (portrait) — switch to 2 columns × 3 rows */
@media(max-width:600px){
  .board{
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:repeat(3,1fr);
    gap:8px;padding:8px;
  }
  .cat-card{border-width:3px;border-radius:12px;}
  .cell{font-size:.85rem;}
  .cat-name-strip{font-size:.65rem;padding:4px 4px;border-top-width:2px;}
}
/* Very small phones — single column */
@media(max-width:400px){
  .board{
    grid-template-columns:1fr;
    grid-template-rows:repeat(6,minmax(110px,1fr));
    gap:8px;
  }
}

/* ═══════════════ FULLSCREEN QUESTION SCREEN ═══════════════ */
.qs-screen{
  position:fixed;inset:0;
  background:var(--primary-darker);
  z-index:100;display:none;flex-direction:column;
  color:#fff;
}
.qs-screen.open{display:flex;animation:qsFadeIn .25s ease;}
@keyframes qsFadeIn{from{opacity:0}to{opacity:1}}

.qs-topbar{
  display:flex;align-items:center;gap:10px;padding:14px 24px;
  background:var(--primary);
  border-bottom:3px solid var(--primary-dark);
  flex-wrap:wrap;
}
.qs-btn-exit{
  background:var(--primary-dark);border:none;
  color:var(--secondary);padding:9px 22px;border-radius:14px;
  font-family:'Cairo',sans-serif;font-size:.95rem;font-weight:800;
  cursor:pointer;transition:all .2s;
}
.qs-btn-exit:hover{background:var(--primary-darker);transform:scale(1.03);}
.qs-timer-box{
  display:flex;align-items:center;gap:8px;
  background:var(--primary-dark);padding:8px 16px;border-radius:14px;
  border:none;
}
.qs-timer-btn{
  background:transparent;border:none;color:var(--secondary);cursor:pointer;
  font-size:.95rem;padding:0;
}
.qs-timer{
  font-family:'Cairo',monospace;font-size:1.15rem;font-weight:900;
  color:var(--secondary);letter-spacing:1px;direction:ltr;
}
.qs-cat-pill{
  background:var(--primary-dark);padding:8px 20px;border-radius:14px;
  font-size:.95rem;font-weight:800;color:var(--secondary);
  margin-right:auto;
}
.qs-pts-pill{
  background:var(--primary-dark);color:var(--secondary);padding:8px 22px;border-radius:14px;
  font-size:.95rem;font-weight:900;
}

.qs-body{
  flex:1;display:flex;flex-direction:column;
  padding:40px 24px;overflow-y:auto;
  background:var(--primary-darker);
}
.qs-phase{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  max-width:900px;margin:0 auto;width:100%;
  animation:qsPhaseIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes qsPhaseIn{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}
.qs-question-text{
  font-size:clamp(1.6rem,4vw,2.6rem);font-weight:800;
  text-align:center;line-height:1.4;margin-bottom:28px;
  color:#fff;letter-spacing:-.3px;
}
.qs-image-wrap{
  margin:0 auto 28px;max-width:520px;width:100%;
  background:var(--s1);border-radius:14px;padding:16px;
  box-shadow:0 8px 30px rgba(0,0,0,.4);
}
.qs-image{
  width:100%;height:auto;max-height:340px;object-fit:contain;
  display:block;border-radius:8px;
}

.qs-lifelines{
  display:none; /* Tools moved to bottom HUD */
}
.qs-ll-team{
  display:flex;gap:6px;align-items:center;
  background:var(--primary-dark);padding:10px 16px;border-radius:16px;
}
.qs-ll-name{
  font-size:.85rem;font-weight:800;color:var(--secondary);
  padding:0 10px 0 4px;
}
.mll-btn{
  background:var(--primary);border:none;
  color:#fff;width:38px;height:38px;border-radius:50%;
  font-size:1.1rem;cursor:pointer;transition:all .2s;
}
.mll-btn:hover:not([disabled]){background:var(--primary2);transform:scale(1.1);}
.mll-btn[disabled]{opacity:.4;cursor:not-allowed;}

.qs-hint-box{
  background:var(--primary-dark);
  border:none;
  border-radius:14px;padding:14px 22px;margin:14px auto;max-width:600px;
  color:var(--secondary);font-weight:700;text-align:center;
  display:none;
}
.qs-hint-box.show{display:block;animation:qsPhaseIn .3s ease;}

.qs-actions{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px;
}
.qs-actions-bottom{margin-top:28px;}
.qs-btn-reveal{
  background:var(--primary);
  color:#fff;border:none;padding:16px 44px;border-radius:18px;
  font-family:'Cairo',sans-serif;font-size:1.15rem;font-weight:900;
  cursor:pointer;transition:all .2s;
  box-shadow:0 6px 22px rgba(0,0,0,.3);
}
.qs-btn-reveal:hover{transform:scale(1.04);background:var(--primary2);}
.qs-btn-back{
  background:var(--primary-dark);border:none;
  color:var(--secondary);padding:13px 32px;border-radius:14px;
  font-family:'Cairo',sans-serif;font-size:1rem;font-weight:800;
  cursor:pointer;transition:all .2s;
}
.qs-btn-back:hover{background:var(--primary-darker);}

.qs-answer-label{
  font-size:.95rem;font-weight:800;letter-spacing:2px;
  color:var(--secondary);text-align:center;margin-bottom:12px;
}
.qs-answer-text{
  font-size:clamp(2rem,5vw,3.4rem);font-weight:900;
  text-align:center;color:#fff;
  margin-bottom:22px;line-height:1.3;
}
.qs-award{
  background:var(--primary-dark);
  border-radius:20px;padding:22px;margin:18px auto;
  max-width:620px;width:100%;
}
.qs-award-label{
  font-size:1.05rem;font-weight:800;color:var(--secondary);text-align:center;margin-bottom:16px;
}
.qs-award-buttons{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;
}
.qs-aw-btn{
  padding:15px 14px;border:none;border-radius:14px;
  font-family:'Cairo',sans-serif;font-size:1rem;font-weight:900;
  cursor:pointer;transition:all .2s;color:#fff;
  background:var(--primary);
}
.qs-aw-btn:hover{transform:scale(1.04);background:var(--primary2);}
.qs-aw-t1{}
.qs-aw-t2{}
.qs-aw-none{background:var(--primary-darker);}
.qs-aw-none:hover{background:#1f2611;}

@media(max-width:600px){
  .qs-topbar{padding:10px 14px;gap:6px;}
  .qs-cat-pill{font-size:.8rem;padding:6px 14px;}
  .qs-pts-pill{font-size:.85rem;padding:6px 16px;}
  .qs-question-text{font-size:1.4rem;}
  .qs-answer-text{font-size:1.8rem;}
  .qs-award-buttons{grid-template-columns:1fr;}
  .qs-lifelines{gap:10px;}
}

/* old overlay (kept for back-compat — will be removed) */
.overlay{position:fixed;inset:0;background:rgba(31,23,51,.6);backdrop-filter:blur(14px);
  z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .25s;}
.overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--s1);border:1px solid var(--border2);border-radius:24px;padding:30px;
  max-width:620px;width:100%;
  transform:scale(.95) translateY(14px);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.overlay.open .modal{transform:scale(1) translateY(0);}
.diff-strip{height:3px;border-radius:100px;margin-bottom:20px;}
.ds0{background:#10b981;}
.ds1{background:#f59e0b;}
.ds2{background:#ef4444;}
.m-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.pts-pill{border-radius:100px;padding:5px 14px;font-size:.85rem;font-weight:800;}
.pp0{background:rgba(126,207,160,.12);color:#7ecfa0;border:1px solid rgba(126,207,160,.25);}
.pp1{background:rgba(168,200,96,.12);color:#a8c860;border:1px solid rgba(168,200,96,.25);}
.pp2{background:rgba(212,184,64,.12);color:#d4b840;border:1px solid rgba(212,184,64,.25);}
.pp3{background:rgba(212,128,64,.12);color:#d48040;border:1px solid rgba(212,128,64,.25);}
.pp4{background:rgba(212,80,80,.12);color:#d45050;border:1px solid rgba(212,80,80,.25);}
.pp5{background:rgba(176,80,212,.12);color:#b050d4;border:1px solid rgba(176,80,212,.25);}
.cat-tag{font-size:.8rem;color:var(--muted);font-weight:700;}
.diff-lbl{font-size:.7rem;font-weight:800;color:var(--muted);letter-spacing:1px;margin-bottom:14px;}
.modal-q{font-size:clamp(1.2rem,3.2vw,1.6rem);font-weight:800;line-height:1.5;margin-bottom:20px;min-height:48px;}

.modal-ll{display:flex;gap:10px;margin-bottom:16px;
  padding:11px;background:var(--s2);border:1px solid var(--border);border-radius:var(--r);}
.mll-team-col{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0;}
.mll-team-col .ll-tlbl{font-size:.65rem;color:var(--muted);font-weight:800;letter-spacing:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mll-row{display:flex;gap:4px;}
.mll-btn{flex:1;background:var(--s1);border:1px solid var(--border);border-radius:7px;
  padding:7px 4px;color:var(--text2);font-family:'Cairo',sans-serif;
  font-size:.7rem;font-weight:700;cursor:pointer;transition:all .15s;text-align:center;line-height:1.3;}
.mll-btn:hover:not([disabled]){background:var(--primary-dim);border-color:var(--primary);color:var(--primary);}
.mll-btn[disabled]{opacity:.2;cursor:not-allowed;text-decoration:line-through;}
.mll-sep{width:1px;background:var(--border);}

.hint-box{background:rgba(255,107,53,.1);border:1px solid rgba(255,107,53,.25);
  border-radius:var(--r);padding:11px 14px;margin-bottom:14px;
  font-size:.88rem;font-weight:700;color:var(--secondary);display:none;}
.hint-box.show{display:block;}
.ans-box{background:var(--s2);border:1px solid var(--border);border-radius:var(--r);
  padding:18px;margin-bottom:16px;min-height:60px;
  display:flex;align-items:center;justify-content:center;text-align:center;}
.ans-ph{color:var(--muted);font-size:.88rem;font-weight:600;}
.ans-val{font-size:1.3rem;font-weight:900;color:var(--green);display:none;}

.award-wrap{display:none;flex-direction:column;gap:10px;margin-bottom:16px;}
.award-wrap.show{display:flex;}
.award-lbl{font-size:.78rem;color:var(--muted);font-weight:700;letter-spacing:1px;text-align:center;}
.award-btns{display:flex;gap:10px;}
.ba{flex:1;border:2px solid transparent;border-radius:var(--r);padding:13px;
  font-family:'Cairo',sans-serif;font-size:.92rem;font-weight:800;cursor:pointer;transition:all .2s;text-align:center;}
.ba-t1{background:var(--primary-dim);border-color:rgba(30,58,95,.3);color:var(--primary);}
.ba-t1:hover{background:rgba(30,58,95,.2);border-color:var(--primary);}
.ba-t2{background:var(--secondary-dim);border-color:rgba(255,107,53,.35);color:var(--secondary);}
.ba-t2:hover{background:rgba(255,107,53,.25);border-color:var(--secondary);}
.ba-skip{background:var(--s2);border-color:var(--border);color:var(--muted);max-width:110px;font-size:.85rem;}
.ba-skip:hover{background:var(--s3);}

.m-foot{display:flex;gap:10px;}
.btn-cls{background:var(--s2);border:1px solid var(--border);border-radius:var(--r);padding:13px 16px;
  color:var(--muted);font-family:'Cairo',sans-serif;font-size:.88rem;font-weight:700;cursor:pointer;transition:all .2s;}
.btn-cls:hover{border-color:var(--border2);color:var(--text2);}
.btn-rev{background:var(--primary);color:#fff;border:none;border-radius:var(--r);padding:13px 28px;
  font-family:'Cairo',sans-serif;font-size:.95rem;font-weight:900;cursor:pointer;transition:all .2s;flex:1;}
.btn-rev:hover{background:var(--primary2);}
.btn-rev:disabled{opacity:.3;cursor:not-allowed;}

#results{
  min-height:100vh;align-items:center;justify-content:center;
  padding:30px 16px;text-align:center;position:relative;overflow:hidden;
  background:var(--background);
}
#results.active{
  display:flex!important;
  flex-direction:column!important;
}
.confetti-canvas{
  position:absolute;inset:0;pointer-events:none;z-index:1;
}
.results-content{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  gap:0;width:100%;max-width:520px;
}

/* Winner spotlight — BIG */
.winner-spotlight{
  display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(135deg,var(--primary-dim) 0%,var(--secondary-dim) 100%);
  border:3px solid var(--primary);
  border-radius:24px;padding:32px 28px 26px;width:100%;
  position:relative;
  box-shadow:0 20px 60px rgba(30,58,95,.25);
  animation:winnerEntry .8s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes winnerEntry{
  0%{opacity:0;transform:scale(.7) translateY(40px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}
.winner-spotlight::before,.winner-spotlight::after{
  content:'✨';position:absolute;font-size:2rem;
  animation:sparkle 2s ease-in-out infinite;
}
.winner-spotlight::before{top:14px;right:18px;animation-delay:0s;}
.winner-spotlight::after{bottom:14px;left:18px;animation-delay:1s;}
@keyframes sparkle{
  0%,100%{opacity:.3;transform:scale(.9) rotate(0);}
  50%{opacity:1;transform:scale(1.2) rotate(15deg);}
}

.win-trophy-big{
  font-size:5rem;line-height:1;margin-bottom:10px;
  animation:trophyBounce 1.5s ease-in-out infinite alternate;
}
@keyframes trophyBounce{
  from{transform:translateY(0) scale(1);}
  to{transform:translateY(-12px) scale(1.05);}
}
.win-label{
  font-size:.95rem;font-weight:800;color:var(--primary-deep);
  letter-spacing:2px;margin-bottom:6px;
}
.win-team-name{
  font-size:clamp(1.7rem,5vw,2.4rem);font-weight:900;
  color:var(--primary);letter-spacing:-1px;margin-bottom:14px;line-height:1.1;
}
.win-score-display{
  font-size:clamp(3.5rem,12vw,5.5rem);font-weight:900;line-height:1;
  background:linear-gradient(135deg,var(--primary) 30%,var(--secondary) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.win-score-label{
  font-size:.85rem;font-weight:700;color:var(--primary-deep);
  letter-spacing:1.5px;margin-top:4px;
}

/* VS divider */
.vs-divider{
  width:36px;height:36px;border-radius:50%;
  background:var(--s1);border:2px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:900;color:var(--muted);
  margin:-18px 0;position:relative;z-index:3;
  box-shadow:0 4px 14px rgba(30,58,95,.1);
}

/* Loser card — smaller */
.loser-card{
  display:flex;flex-direction:column;align-items:center;
  background:var(--s1);border:1.5px solid var(--border);
  border-radius:18px;padding:18px 24px;width:75%;max-width:380px;
  opacity:.85;
  animation:loserEntry .8s ease .3s both;
}
@keyframes loserEntry{
  0%{opacity:0;transform:translateY(20px);}
  100%{opacity:.85;transform:translateY(0);}
}
.lose-label{
  font-size:.7rem;font-weight:800;color:var(--muted);
  letter-spacing:2px;margin-bottom:4px;
}
.lose-team-name{
  font-size:1.15rem;font-weight:800;color:var(--text2);margin-bottom:8px;
}
.lose-score{
  font-size:2.2rem;font-weight:900;color:var(--text2);line-height:1;
}
.lose-score-label{
  font-size:.72rem;font-weight:700;color:var(--muted);
  letter-spacing:1px;margin-top:2px;
}

/* Tie display */
.tie-display{
  display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(135deg,var(--s1),var(--s2));
  border:2px solid var(--secondary);border-radius:24px;
  padding:30px 28px;width:100%;
  animation:winnerEntry .8s cubic-bezier(.34,1.56,.64,1) both;
}
.tie-icon{font-size:5rem;margin-bottom:10px;}
.tie-text{
  font-size:clamp(1.8rem,5vw,2.4rem);font-weight:900;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:14px;
}
.tie-teams{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;}
.tie-team-box{
  background:var(--s2);border-radius:12px;padding:12px 20px;
}
.tie-team-box .ttn{font-size:.85rem;color:var(--muted);font-weight:700;margin-bottom:4px;}
.tie-team-box .tts{font-size:1.8rem;font-weight:900;color:var(--primary);}

/* Game info pill */
.game-info-pill{
  background:var(--s1);border:1px solid var(--border);
  border-radius:100px;padding:7px 18px;
  font-size:.82rem;font-weight:700;color:var(--text2);
  margin-top:24px;
}
.game-info-pill strong{color:var(--primary);font-weight:900;}

/* Action buttons */
.results-actions{
  display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;justify-content:center;
}
.btn-share{
  background:linear-gradient(135deg,var(--primary),var(--primary-deep));
  color:#fff;border:none;border-radius:14px;padding:13px 26px;
  font-family:'Cairo',sans-serif;font-size:.95rem;font-weight:900;
  cursor:pointer;transition:all .2s;
  box-shadow:0 4px 18px rgba(30,58,95,.3);
}
.btn-share:hover{transform:scale(1.04);box-shadow:0 6px 22px rgba(30,58,95,.4);}
.btn-replay{
  background:var(--s1);border:1.5px solid var(--border2);border-radius:14px;
  padding:13px 26px;color:var(--text);font-family:'Cairo',sans-serif;
  font-size:.95rem;font-weight:800;cursor:pointer;transition:all .2s;
}
.btn-replay:hover{border-color:var(--primary);color:var(--primary);}

/* Share card (rendered for screenshot) */
.share-card{
  width:540px;padding:40px 36px;
  background:linear-gradient(135deg,#7c3aed 0%,#9d5cf5 50%,#a78bfa 100%);
  border-radius:28px;color:#fff;text-align:center;
  font-family:'Cairo',sans-serif;
}
.share-card-logo{font-size:2rem;font-weight:900;margin-bottom:6px;letter-spacing:-1px;}
.share-card-sub{font-size:.85rem;opacity:.85;margin-bottom:24px;letter-spacing:2px;}
.share-card-trophy{font-size:5rem;margin-bottom:8px;}
.share-card-winner-label{font-size:.85rem;opacity:.85;letter-spacing:2px;font-weight:800;}
.share-card-winner-name{font-size:2.5rem;font-weight:900;margin:6px 0 16px;letter-spacing:-1px;}
.share-card-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin-bottom:18px;}
.share-card-team{background:rgba(255,255,255,.15);border-radius:14px;padding:14px;backdrop-filter:blur(6px);}
.share-card-team.winner{background:rgba(255,255,255,.3);border:2px solid rgba(255,255,255,.5);}
.share-card-team-name{font-size:.95rem;font-weight:800;margin-bottom:4px;}
.share-card-team-score{font-size:2rem;font-weight:900;}
.share-card-vs-divider{font-size:1.1rem;font-weight:900;opacity:.7;}
.share-card-game-name{
  background:rgba(0,0,0,.2);border-radius:100px;padding:6px 16px;
  display:inline-block;font-size:.85rem;font-weight:800;letter-spacing:1px;
}

@media(max-width:480px){
  .winner-spotlight{padding:24px 18px 20px;}
  .win-trophy-big{font-size:4rem;}
  .loser-card{width:85%;padding:14px 18px;}
  .results-actions{flex-direction:column;width:100%;}
  .results-actions button{width:100%;}
}

/* Email confirmation overlay */
.email-confirm-overlay{
  position:fixed;inset:0;background:rgba(31,23,51,.7);backdrop-filter:blur(10px);
  z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;
  animation:fadeIn .3s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.email-confirm-card{
  background:var(--s1);border:2px solid var(--primary);border-radius:24px;
  padding:36px 28px;max-width:440px;width:100%;text-align:center;
  box-shadow:0 20px 60px rgba(30,58,95,.3);
  animation:popIn .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn{
  from{opacity:0;transform:scale(.85) translateY(20px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.ec-icon{font-size:5rem;margin-bottom:12px;animation:bounce 1.5s ease-in-out infinite alternate;}
@keyframes bounce{from{transform:translateY(0)}to{transform:translateY(-8px)}}
.email-confirm-card h2{font-size:1.5rem;font-weight:900;color:var(--primary-deep);margin-bottom:14px;}
.email-confirm-card p{font-size:.95rem;color:var(--text2);margin-bottom:8px;line-height:1.5;}
.ec-email{
  background:var(--primary-dim);color:var(--primary-deep);
  border:1px solid rgba(30,58,95,.3);border-radius:12px;
  padding:11px 18px;font-size:.95rem;font-weight:800;
  margin:8px 0 14px;direction:ltr;
  word-break:break-all;
}
.ec-note{font-size:.9rem;color:var(--text2);margin:8px 0;}
.ec-tip{
  background:var(--secondary-dim);color:var(--primary-deep);
  border-radius:10px;padding:10px 14px;font-size:.82rem;
  margin:14px 0 18px;line-height:1.5;
}
.ec-buttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.ec-buttons .btn-primary,.ec-buttons .btn-secondary{
  padding:11px 22px;border-radius:12px;font-family:'Cairo',sans-serif;
  font-size:.92rem;font-weight:800;cursor:pointer;border:none;transition:all .2s;
}
.ec-buttons .btn-primary{background:var(--primary);color:#fff;}
.ec-buttons .btn-primary:hover{background:var(--primary2);}
.ec-buttons .btn-secondary{background:var(--s2);color:var(--text2);border:1px solid var(--border);}
.ec-buttons .btn-secondary:hover{background:var(--s3);color:var(--primary);}


/* ════════════════════════════════════════════════
   SIN-JEEM STYLE — Saudi green + gold theme
═════════════════════════════════════════════════ */
.sj-nav{
  background:var(--background);
  border-bottom:1px solid rgba(255,255,255,0.08);
  position:sticky;top:0;z-index:50;
}
.sj-nav-inner{
  display:flex;align-items:center;gap:14px;padding:14px 32px;
  max-width:1400px;margin:0 auto;
  min-height:60px;
}
.sj-logo{
  font-size:1.7rem;font-weight:900;color:var(--secondary);
  letter-spacing:-1px;
  display:flex;align-items:center;gap:8px;
  text-shadow:1px 2px 0 rgba(0,0,0,0.2);
}
.sj-logo-dot{font-size:1.1rem;}

/* Login button — dark olive pill, beige text */
.sj-login-btn{
  background:var(--primary-dark);color:var(--secondary);
  border:none;
  border-radius:14px;padding:10px 28px;
  font-family:'Cairo',sans-serif;font-size:1rem;font-weight:800;
  cursor:pointer;transition:all .2s;
  display:flex;align-items:center;gap:6px;
}
.sj-login-btn:hover{
  background:var(--primary-darker);
  transform:scale(1.04);
}

.sj-user-area{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

.auth-back-btn{
  position:absolute;top:20px;right:20px;
  background:var(--primary-dark);
  border:none;
  border-radius:14px;padding:8px 18px;
  font-family:'Cairo',sans-serif;font-size:.85rem;font-weight:800;
  color:var(--secondary);cursor:pointer;transition:all .2s;
  z-index:10;
}
.auth-back-btn:hover{
  background:var(--primary-darker);
}

/* Hero — olive background, huge title with white+dark-shadow */
.sj-hero{
  background:var(--background);
  position:relative;overflow:hidden;
  padding:80px 24px 50px;
  text-align:center;
  color:#fff;
  margin-bottom:0;
}
.sj-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% -10%,rgba(14,165,233,0.14) 0%,transparent 60%);
  pointer-events:none;
}
.sj-hero-content{position:relative;z-index:2;max-width:760px;margin:0 auto;}
.sj-hero-title{
  font-size:clamp(3.5rem,9vw,5.5rem);
  font-weight:900;margin-bottom:36px;
  letter-spacing:-2px;line-height:1;
  color:#fff;
  text-shadow:0 4px 24px rgba(0,0,0,0.25);
}
.sj-hero-sub{
  font-size:clamp(1rem,2.4vw,1.25rem);font-weight:700;
  margin-bottom:8px;color:#fff;line-height:1.6;opacity:.92;
}
.sj-hero-instr{
  font-size:clamp(.9rem,2vw,1.05rem);font-weight:800;
  color:var(--secondary-light);margin-top:6px;margin-bottom:32px;
}

/* Hero CTAs */
.sj-hero-ctas{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  margin-top:28px;
}
.sj-hero-cta{
  background:var(--secondary);
  color:#fff;
  border:none;
  padding:15px 38px;
  border-radius:14px;
  font-family:'Cairo',sans-serif;font-size:1.05rem;font-weight:900;
  cursor:pointer;transition:all .25s var(--ease-bounce);
  min-width:170px;
  box-shadow:var(--sh-orange);
}
.sj-hero-cta:hover{
  background:var(--secondary-dark);
  transform:translateY(-2px) scale(1.02);
}
.sj-hero-cta:active{transform:translateY(0);}
.sj-hero-cta + .sj-hero-cta{
  background:rgba(255,255,255,0.12);
  color:#fff;
  border:1px solid rgba(255,255,255,0.2);
  box-shadow:none;
  backdrop-filter:blur(8px);
}
.sj-hero-cta + .sj-hero-cta:hover{
  background:rgba(255,255,255,0.2);
}

/* Section title (pill style) */
.sj-section-title{
  display:flex;justify-content:center;align-items:center;
  margin:44px 0 30px;
}
.sj-section-title span{
  background:var(--s1);color:var(--text);
  border:1px solid var(--border2);
  border-radius:100px;padding:11px 32px;
  font-size:1.02rem;font-weight:900;
  box-shadow:var(--sh-sm);
}

/* Game cards — Asbqhom style: olive frame + beige body */
.sj-games-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
  max-width:760px;
  width:100%;
  margin:0 auto 30px;
  padding:0 24px;
}

/* Coming soon divider — more elegant */
.coming-soon-divider{
  display:flex;align-items:center;justify-content:center;
  margin:50px auto 24px;
  max-width:760px;
  padding:0 24px;
  position:relative;
}
.coming-soon-divider::before,
.coming-soon-divider::after{
  content:'';flex:1;height:2px;
  background:linear-gradient(90deg,transparent,rgba(13,37,64,0.2),transparent);
}
.coming-soon-divider span{
  padding:8px 24px;
  background:var(--primary-dark);
  color:#fff;
  font-size:.95rem;font-weight:900;
  letter-spacing:2px;
  border-radius:100px;
  box-shadow:0 4px 12px rgba(13,37,64,0.2);
}

/* Coming soon cards: cleaner, less gray */
.coming-soon-grid{margin-bottom:50px;}
.sj-game-card.coming-soon{
  background:#e5e7eb!important;
  border-color:#9ca3af!important;
  cursor:not-allowed;
  opacity:.9;
  position:relative;
}
.sj-game-card.coming-soon:hover{
  transform:none;
  box-shadow:none;
  opacity:1;
}
.sj-game-card.coming-soon::after{
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,0.4);
  z-index:1;pointer-events:none;
}
.sj-game-card.coming-soon .sj-card-icon{
  background:var(--s1);
  opacity:.6;
}
.sj-game-card.coming-soon .sj-card-name{
  background:#6b7280;
  color:#fff;
  border-top:3px solid #9ca3af;
}
.coming-soon-badge{
  position:absolute;
  top:14px;left:14px;
  background:var(--primary-dark);color:#fff;
  padding:6px 16px;border-radius:100px;
  font-size:.78rem;font-weight:900;
  z-index:5;
  letter-spacing:1px;
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
}

/* Cleaner game cards (active) */
.sj-game-card{
  position:relative;
  background:var(--s1);
  border:1px solid var(--border);
  border-radius:22px;
  padding:0;cursor:pointer;
  overflow:hidden;
  transition:all .28s var(--ease-bounce);
  box-shadow:var(--sh-md);
}
.sj-game-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--sh-xl);
}
.sj-card-icon{
  display:flex;align-items:center;justify-content:center;
  height:170px;font-size:5.5rem;
  background:linear-gradient(160deg,var(--s2) 0%,var(--s1) 100%);
  position:relative;
}
.sj-card-icon::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:var(--secondary);
  transform:scaleX(0);transform-origin:center;
  transition:transform .3s var(--ease);
}
.sj-game-card:hover .sj-card-icon::after{transform:scaleX(1);}
.sj-card-name{
  background:var(--primary-dark);color:#fff;
  padding:16px 14px;text-align:center;
  font-size:1.15rem;font-weight:900;
  letter-spacing:-.3px;
}

/* Desktop: bigger and more spacious */
@media(min-width:900px){
  .sj-games-grid{
    max-width:780px;
    gap:36px;
  }
  .sj-card-icon{
    height:220px;
    font-size:7rem;
  }
  .sj-card-name{
    font-size:1.4rem;
    padding:20px 14px;
  }
  .coming-soon-divider{max-width:780px;}
}

/* Big desktop screens - cards stay big, NOT 4 columns */
@media(min-width:1200px){
  .sj-games-grid{
    max-width:860px;
    gap:40px;
  }
  .sj-card-icon{
    height:240px;
    font-size:7.5rem;
  }
}

/* Mobile: smaller */
@media(max-width:600px){
  .sj-games-grid{gap:14px;padding:0 14px;}
  .sj-card-icon{height:130px;font-size:4rem;}
  .sj-card-name{font-size:1rem;padding:13px 10px;}
  .coming-soon-divider{margin:36px auto 18px;}
  .coming-soon-divider span{font-size:.85rem;padding:6px 18px;}
}

.sj-card-status{display:none !important;}

/* Welcome (kept simpler and centered) */
.welcome{display:none;}

/* ═══════════════ PASSWORD EYE TOGGLE ═══════════════ */
.pass-wrap{position:relative;}
.pass-wrap input{padding-left:48px!important;}
.pass-eye{
  position:absolute;left:8px;top:50%;
  transform:translateY(-50%);
  background:transparent;border:none;
  color:var(--primary);cursor:pointer;
  width:36px;height:36px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.pass-eye:hover{background:var(--primary-dim);color:var(--primary-dark);}

/* Forgot password */
.forgot-pass-row{
  text-align:center;margin-top:16px;
}
.forgot-pass-link{
  background:none;border:none;
  color:var(--primary);cursor:pointer;
  font-family:'Cairo',sans-serif;
  font-size:.9rem;font-weight:800;
  padding:8px 14px;border-radius:8px;
  transition:all .2s;
  text-decoration:underline;
}
.forgot-pass-link:hover{color:var(--secondary);background:var(--primary-dim);}

/* ═══════════════ LEGAL FOOTER ═══════════════ */
.legal-footer{
  background:var(--primary-dark);color:var(--secondary);
  padding:40px 24px 20px;margin-top:60px;
  border-top:4px solid var(--primary);
}
.lf-container{max-width:1100px;margin:0 auto;}
.lf-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:30px;margin-bottom:30px;
}
.lf-col{display:flex;flex-direction:column;gap:8px;}
.lf-logo{
  font-size:1.6rem;font-weight:900;color:#fff;
  letter-spacing:-1px;margin-bottom:4px;
}
.lf-desc{color:var(--secondary);opacity:.85;font-size:.85rem;line-height:1.6;}
.lf-title{
  font-size:.95rem;font-weight:900;color:#fff;
  margin-bottom:8px;
}
.lf-link{
  background:none;border:none;color:var(--secondary);
  font-family:'Cairo',sans-serif;font-size:.85rem;font-weight:600;
  text-align:right;cursor:pointer;padding:4px 0;
  transition:color .2s;width:fit-content;
}
.lf-link:hover{color:#fff;text-decoration:underline;}
.lf-info{
  font-size:.82rem;color:var(--secondary);opacity:.9;
  line-height:1.7;
}
.lf-bottom{
  text-align:center;padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.1);
  font-size:.8rem;color:var(--secondary);opacity:.7;
}
@media(max-width:700px){
  .lf-grid{grid-template-columns:1fr;gap:24px;}
  .legal-footer{padding:30px 18px 16px;}
}

/* Legal modal */
/* === Floating selected categories panel === */
.sel-float{
  position:fixed;
  top:50%;left:16px;transform:translateY(-50%) translateX(-120%);
  width:200px;max-height:70vh;
  background:var(--s1);
  border:1px solid var(--border2);
  border-radius:18px;
  box-shadow:var(--sh-xl);
  z-index:40;
  padding:14px;
  transition:transform .35s var(--ease-bounce);
  display:flex;flex-direction:column;
}
.sel-float.show{transform:translateY(-50%) translateX(0);}
.sel-float-hd{
  display:flex;align-items:center;justify-content:space-between;
  font-weight:900;font-size:.95rem;color:var(--text);
  padding-bottom:10px;margin-bottom:10px;
  border-bottom:1px solid var(--border);
}
.sel-float-count b{color:var(--secondary);font-size:1.1rem;}
.sel-float-list{overflow-y:auto;display:flex;flex-direction:column;gap:7px;}
.sel-float-item{
  display:flex;align-items:center;gap:8px;
  background:var(--s2);border-radius:10px;padding:8px 10px;
  animation:sffIn .3s var(--ease-bounce);
}
@keyframes sffIn{from{opacity:0;transform:translateX(-12px);}to{opacity:1;transform:translateX(0);}}
.sff-num{
  width:22px;height:22px;flex-shrink:0;
  background:var(--secondary);color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:900;
}
.sff-name{flex:1;font-size:.82rem;font-weight:800;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sff-remove{
  width:20px;height:20px;flex-shrink:0;border:none;cursor:pointer;
  background:rgba(248,113,113,0.15);color:var(--red);border-radius:6px;
  font-size:.7rem;font-weight:900;font-family:'Cairo',sans-serif;
  transition:all .15s;
}
.sff-remove:hover{background:var(--red);color:#fff;}

/* On mobile/tablet: hide the floating panel (uses sticky bar instead) */
@media(max-width:1100px){
  .sel-float{display:none;}
}

.legal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.7);
  z-index:200;display:none;align-items:center;justify-content:center;
  padding:20px;
}
.legal-overlay.open{display:flex;animation:qsFadeIn .2s ease;}
.legal-modal{
  background:var(--s1);border-radius:20px;
  max-width:760px;width:100%;max-height:85vh;
  overflow-y:auto;padding:36px 28px 28px;
  position:relative;
  border:3px solid var(--primary);
}
.legal-close{
  position:absolute;top:14px;left:14px;
  width:36px;height:36px;border-radius:50%;
  background:var(--primary-dark);color:#fff;
  border:none;cursor:pointer;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.legal-close:hover{background:var(--primary-darker);transform:scale(1.1);}
.legal-content{color:var(--text);line-height:1.85;}
.legal-content h2{
  color:var(--primary-dark);font-size:1.6rem;margin-bottom:6px;
  border-bottom:3px solid var(--secondary);
  padding-bottom:10px;margin-bottom:18px;
}
.legal-content h3{
  color:var(--primary);font-size:1.1rem;margin-top:18px;margin-bottom:6px;
}
.legal-content p,.legal-content li{
  font-size:.95rem;color:var(--text2);margin-bottom:8px;
}
.legal-content ul{padding-right:22px;margin-bottom:12px;}
.legal-content strong{color:var(--text);font-weight:800;}

/* === Subcategory Info dialog === */
.ssi-head{font-size:1.4rem;font-weight:900;color:var(--text);margin-bottom:18px;text-align:center;}
.ssi-desc{
  background:var(--s2);border-radius:12px;padding:14px 16px;margin-bottom:16px;
  font-size:.92rem;line-height:1.7;color:var(--text2);font-weight:600;
}
.ssi-summary{display:flex;justify-content:center;margin-bottom:20px;}
.ssi-total{
  background:var(--primary-dim);border:1px solid var(--border2);border-radius:16px;
  padding:18px 36px;text-align:center;
}
.ssi-total-num{display:block;font-size:2.6rem;font-weight:900;color:var(--primary);line-height:1;}
.ssi-total-lbl{font-size:.85rem;color:var(--muted);font-weight:700;}
.ssi-levels{background:var(--s2);border-radius:14px;padding:16px 18px;margin-bottom:16px;}
.ssi-levels-title{font-size:.88rem;font-weight:800;color:var(--text2);margin-bottom:12px;}
.ssi-level{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--border);
}
.ssi-level:last-child{border-bottom:none;}
.ssi-pts{
  background:var(--secondary);color:#fff;border-radius:8px;
  padding:4px 14px;font-weight:900;font-size:.9rem;
}
.ssi-level-count{font-weight:800;color:var(--text);}
.ssi-empty{color:var(--muted);text-align:center;padding:14px;}
.ssi-note{font-size:.82rem;color:var(--muted);text-align:center;font-weight:700;line-height:1.6;}

@media(max-width:600px){
  .sj-nav-inner{padding:10px 16px;}
  .sj-logo{font-size:1.4rem;}
  .sj-hero{padding:50px 18px 30px;}
  .sj-card-icon{height:120px;font-size:3.5rem;}
  .sj-games-grid{grid-template-columns:repeat(2,1fr);gap:14px;padding:0 16px;}
  .sj-card-name{font-size:.88rem;padding:10px 8px;}
  .sj-hero-ctas{gap:10px;}
  .sj-hero-cta{min-width:140px;padding:13px 28px;font-size:.98rem;}
  .sj-section-title{margin:32px 0 22px;}
  .setup-tabs{padding:0 14px;}
  .teams-row{flex-direction:column;gap:12px;}
  .cat-section{padding:18px 14px;margin-bottom:24px;}
}

/* Tiny phones — games stack nicer */
@media(max-width:380px){
  .sj-games-grid{gap:10px;padding:0 12px;}
  .sj-hero-cta{min-width:120px;padding:12px 22px;font-size:.92rem;}
  .sj-hero-ctas{flex-direction:column;align-items:center;}
  .sj-hero-cta{width:100%;max-width:240px;}
}


.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--s1);border:1px solid var(--border2);border-radius:14px;
  padding:13px 24px;font-weight:800;font-size:.9rem;z-index:9999;
  box-shadow:var(--sh-lg);
  transition:transform .35s var(--ease-bounce);pointer-events:none;white-space:nowrap;}
.toast.show{transform:translateX(-50%) translateY(0);}
.toast.ok{color:var(--green);}
.toast.err{color:var(--red);}
.toast.info{color:var(--primary);}

@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
.bump{animation:bump .4s ease;}

@media(max-width:760px){
  .board{grid-template-columns:repeat(3,1fr);}
  .score-strip{grid-template-columns:1fr 1fr;}
  .turn-pill{display:none;}
  .admin-layout{grid-template-columns:1fr;}
  .admin-sidebar{flex-direction:row;overflow-x:auto;padding:8px;}
  .admin-sidebar-hd{display:none;}
  .admin-nav-item{flex-shrink:0;}
}
@media(max-width:480px){
  .board{grid-template-columns:repeat(2,1fr);}
  .modal{padding:20px;}
  .award-btns{flex-direction:column;}
  .modal-ll{flex-direction:column;}
  .mll-sep{display:none;}
  .perm-grid{grid-template-columns:1fr;}
}
/* ════════════════ NEW GAMES — SHARED ════════════════ */
.rules-box{
  background:var(--secondary-dim);border:1px solid rgba(255,107,53,.25);
  border-radius:var(--r);padding:16px 18px;margin-bottom:22px;
}
.rules-box h4{font-size:.95rem;font-weight:800;margin-bottom:8px;color:var(--primary-deep);}
.rules-box ul{list-style:none;}
.rules-box li{
  font-size:.85rem;color:var(--text2);padding:4px 0;line-height:1.5;
  display:flex;align-items:flex-start;gap:8px;font-weight:600;
}
.rules-box li::before{content:'•';color:var(--primary);font-weight:900;margin-top:-2px;}

/* ── KEYWORD GAME ── */
.kw-game-wrap{
  min-height:100vh;display:flex;flex-direction:column;
  padding:16px;gap:14px;max-width:700px;margin:0 auto;width:100%;
}
.kw-header{
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r);
  padding:16px;display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;
}
.kw-team-info{text-align:center;}
.kw-team-label{font-size:.7rem;color:var(--muted);font-weight:800;letter-spacing:1px;}
.kw-team-name{font-size:1.2rem;font-weight:900;color:var(--primary);margin-top:2px;}
.kw-round-info{font-size:.78rem;color:var(--text2);margin-top:4px;font-weight:700;}
.kw-timer-circle{position:relative;width:120px;height:120px;}
.kw-timer-num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;font-weight:900;color:var(--primary);
}
#kw-timer-arc{transition:stroke-dashoffset 1s linear,stroke .3s;}
.kw-timer-box.warning #kw-timer-arc{stroke:var(--secondary);}
.kw-timer-box.warning .kw-timer-num{color:var(--secondary);}
.kw-timer-box.danger #kw-timer-arc{stroke:var(--red);}
.kw-timer-box.danger .kw-timer-num{color:var(--red);animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.kw-scores{display:flex;flex-direction:column;gap:6px;}
.kw-score-row{
  background:var(--s2);border-radius:8px;padding:8px 12px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:.85rem;font-weight:700;
}
.kw-score-row strong{font-size:1.3rem;color:var(--primary);font-weight:900;}

.kw-word-area{
  flex:1;background:var(--s1);border:1px solid var(--border);border-radius:var(--r2);
  padding:30px;display:flex;align-items:center;justify-content:center;text-align:center;
}
.kw-pre-round{display:flex;flex-direction:column;gap:18px;align-items:center;}
.kw-pre-icon{font-size:4rem;}
.kw-pre-text{font-size:1.4rem;font-weight:900;}
.kw-pre-sub{font-size:.9rem;color:var(--muted);font-weight:600;margin-bottom:10px;}

.kw-word-display{display:flex;flex-direction:column;gap:18px;align-items:center;width:100%;}
.kw-word-label{font-size:.78rem;color:var(--muted);font-weight:800;letter-spacing:2px;}
.kw-word{
  font-size:clamp(2.5rem,8vw,4rem);font-weight:900;color:var(--primary);
  letter-spacing:-2px;line-height:1;
}
.kw-forbidden-label{font-size:.78rem;color:var(--red);font-weight:800;margin-top:14px;letter-spacing:1px;}
.kw-forbidden{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
}
.kw-forbidden span{
  background:rgba(239,68,68,.08);color:var(--red);
  border:1px solid rgba(239,68,68,.2);border-radius:100px;
  padding:5px 12px;font-size:.85rem;font-weight:700;
}

.kw-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.kw-action-btn{
  border:none;border-radius:var(--r);padding:18px;
  font-family:'Cairo',sans-serif;font-size:1.05rem;font-weight:900;
  cursor:pointer;transition:all .2s;
}
.kw-action-btn.skip{background:rgba(239,68,68,.1);color:var(--red);border:2px solid rgba(239,68,68,.3);}
.kw-action-btn.skip:hover{background:rgba(239,68,68,.2);}
.kw-action-btn.correct{background:rgba(16,185,129,.12);color:var(--green);border:2px solid rgba(16,185,129,.35);}
.kw-action-btn.correct:hover{background:rgba(16,185,129,.22);}

/* ── LIAR GAME ── */
.lr-wrap{
  min-height:100vh;padding:20px;max-width:700px;margin:0 auto;width:100%;
  display:flex;flex-direction:column;gap:18px;
}
.lr-header{text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center;}
.lr-round-badge{
  background:var(--secondary-dim);color:var(--primary-deep);
  border:1px solid rgba(255,107,53,.3);border-radius:100px;
  padding:5px 16px;font-size:.85rem;font-weight:800;
}
.lr-current-team{font-size:1.3rem;font-weight:900;color:var(--primary);margin-top:2px;}

.lr-scores{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.lr-score-card{
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r);
  padding:14px 18px;text-align:center;position:relative;overflow:hidden;
}
.lr-score-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;}
.lr-score-card.t1::before{background:var(--primary);}
.lr-score-card.t2::before{background:var(--secondary);}
.lr-score-name{font-size:.78rem;color:var(--muted);font-weight:700;margin-bottom:4px;}
.lr-score-num{font-size:2rem;font-weight:900;line-height:1;}
.lr-score-card.t1 .lr-score-num{color:var(--primary);}
.lr-score-card.t2 .lr-score-num{color:var(--secondary);}

.lr-statements-wrap{
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r2);
  padding:24px;flex:1;
}
.lr-question-label{font-size:.85rem;color:var(--muted);font-weight:700;text-align:center;margin-bottom:8px;}
.lr-topic{
  font-size:1.15rem;font-weight:800;text-align:center;margin-bottom:20px;
  color:var(--primary-deep);
}
.lr-statements{display:flex;flex-direction:column;gap:10px;}
.lr-statement{
  background:var(--s2);border:2px solid var(--border);border-radius:var(--r);
  padding:16px 18px;cursor:pointer;transition:all .2s;
  display:flex;align-items:flex-start;gap:12px;
  font-family:'Cairo',sans-serif;font-size:.95rem;font-weight:700;text-align:right;line-height:1.5;
  color:var(--text);
}
.lr-statement:hover:not(:disabled){border-color:var(--primary);background:var(--primary-dim);}
.lr-statement:disabled{cursor:default;}
.lr-statement.true{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.4);color:var(--green);}
.lr-statement.lie{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.4);color:var(--red);}
.lr-st-num{
  background:var(--s3);border-radius:50%;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.85rem;
  color:var(--text);flex-shrink:0;
}
.lr-statement.true .lr-st-num{background:var(--green);color:#fff;}
.lr-statement.lie .lr-st-num{background:var(--red);color:#fff;}

.lr-reveal{
  background:var(--s1);border-radius:var(--r);padding:20px;text-align:center;
  display:flex;flex-direction:column;gap:14px;align-items:center;
}
.lr-result{font-size:1.2rem;font-weight:900;}
.lr-result.correct{color:var(--green);}
.lr-result.wrong{color:var(--red);}

/* ── RAPID GAME ── */
.rp-wrap{
  min-height:100vh;padding:20px;max-width:700px;margin:0 auto;width:100%;
  display:flex;flex-direction:column;gap:16px;
}
.rp-header{text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center;}
.rp-round-badge{
  background:var(--secondary-dim);color:var(--primary-deep);
  border:1px solid rgba(255,107,53,.3);border-radius:100px;
  padding:5px 16px;font-size:.85rem;font-weight:800;
}
.rp-current-team{font-size:1.4rem;font-weight:900;color:var(--primary);}

.rp-scores{display:flex;gap:10px;}
.rp-score-card{
  flex:1;background:var(--s1);border:1px solid var(--border);border-radius:var(--r);
  padding:12px 18px;display:flex;justify-content:space-between;align-items:center;
  position:relative;overflow:hidden;
}
.rp-score-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;}
.rp-score-card.t1::before{background:var(--primary);}
.rp-score-card.t2::before{background:var(--secondary);}
.rp-score-card span{font-size:.85rem;font-weight:700;color:var(--text2);}
.rp-score-card strong{font-size:1.5rem;font-weight:900;}
.rp-score-card.t1 strong{color:var(--primary);}
.rp-score-card.t2 strong{color:var(--secondary);}

.rp-prompt-area{
  flex:1;background:var(--s1);border:1px solid var(--border);border-radius:var(--r2);
  padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:18px;min-height:300px;
}
.rp-pre{display:flex;flex-direction:column;gap:18px;align-items:center;}
.rp-icon{font-size:4rem;}
.rp-pre-text{font-size:1.3rem;font-weight:800;}

.rp-prompt{
  font-size:clamp(1.4rem,4vw,2rem);font-weight:900;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1.4;margin-bottom:8px;
}

.rp-timer-big{
  font-size:5rem;font-weight:900;color:var(--primary);line-height:1;
  text-shadow:0 4px 20px rgba(30,58,95,.2);
}
.rp-timer-big.warning{color:var(--secondary);}
.rp-timer-big.danger{color:var(--red);animation:pulse 0.8s infinite;}

.rp-counter{font-size:1rem;color:var(--text2);font-weight:700;}
.rp-counter strong{color:var(--primary);font-size:1.4rem;font-weight:900;margin-right:6px;}

.rp-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:400px;}
.rp-btn{
  border:none;border-radius:var(--r);padding:16px;
  font-family:'Cairo',sans-serif;font-size:1rem;font-weight:900;
  cursor:pointer;transition:all .2s;
}
.rp-btn.correct{background:var(--green);color:#fff;}
.rp-btn.correct:hover{background:#0ea272;}
.rp-btn.skip{background:var(--s2);color:var(--text2);border:1px solid var(--border);}
.rp-btn.skip:hover{background:var(--s3);}

.rp-done-text{font-size:1.4rem;font-weight:900;}
.rp-done-score{font-size:1.1rem;color:var(--primary);font-weight:800;}

/* ── KEYWORD GAME — REVISED (mime/charades + barcode) ── */
.kw-top-info{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r);
  padding:12px 16px;
}
.kw-round-pill{
  background:var(--primary-dim);color:var(--primary);
  border:1px solid rgba(30,58,95,.3);border-radius:100px;
  padding:5px 14px;font-size:.85rem;font-weight:800;
}
.kw-scores-mini{display:flex;gap:10px;flex:1;justify-content:flex-end;}
.kw-mini-score{
  background:var(--s2);border-radius:8px;padding:6px 12px;
  font-size:.82rem;font-weight:700;display:flex;align-items:center;gap:8px;
}
.kw-mini-score.t1{border-right:3px solid var(--primary);}
.kw-mini-score.t2{border-right:3px solid var(--secondary);}
.kw-mini-score strong{font-size:1.1rem;font-weight:900;}
.kw-mini-score.t1 strong{color:var(--primary);}
.kw-mini-score.t2 strong{color:var(--secondary);}

.kw-stage{
  flex:1;background:var(--s1);border:1px solid var(--border);border-radius:var(--r2);
  padding:24px;display:flex;align-items:center;justify-content:center;text-align:center;min-height:400px;
}

.kw-secret-badge{
  background:var(--secondary-dim);color:var(--primary-deep);
  border:1px solid rgba(255,107,53,.4);border-radius:100px;
  padding:5px 14px;font-size:.78rem;font-weight:800;margin-bottom:14px;
}

.kw-team-turn-display{
  font-size:1.1rem;font-weight:700;color:var(--text2);margin-bottom:6px;
}
.kw-team-turn-display strong{color:var(--primary);font-weight:900;font-size:1.3rem;}

.kw-word-fallback{
  width:100%;max-width:340px;background:var(--s2);
  border:1px dashed var(--border2);border-radius:var(--r);
  padding:8px 14px;margin-bottom:10px;
}
.kw-word-fallback summary{
  cursor:pointer;font-size:.82rem;font-weight:700;color:var(--muted);
  list-style:none;padding:4px 0;text-align:center;
}
.kw-word-fallback summary::-webkit-details-marker{display:none;}
.kw-word-fallback[open] summary{color:var(--primary);margin-bottom:8px;}
.kw-word-fallback .kw-word-card{margin-top:6px;padding:14px 18px;}
.kw-word-fallback .kw-word{font-size:1.8rem;}

.kw-ready-btn{
  background:var(--green) !important;
  box-shadow:0 4px 20px rgba(16,185,129,.3) !important;
  font-size:1.1rem !important;
  padding:16px 40px !important;
}
.kw-ready-btn:hover{background:#0ea272 !important;}

.kw-word-card{
  background:linear-gradient(135deg,var(--primary-dim),var(--secondary-dim));
  border:2px solid var(--primary);border-radius:var(--r);
  padding:24px 30px;margin-bottom:18px;
}
.kw-word-card .kw-word-label{font-size:.78rem;color:var(--text2);font-weight:800;letter-spacing:1.5px;margin-bottom:8px;}
.kw-word-card .kw-word{
  font-size:clamp(2rem,7vw,3.2rem);font-weight:900;color:var(--primary-deep);
  letter-spacing:-1px;line-height:1;
}

.kw-barcode-box{
  background:var(--s2);border:1.5px dashed var(--border2);border-radius:var(--r);
  padding:18px;margin-bottom:14px;
}
.kw-barcode-label{font-size:.78rem;color:var(--muted);font-weight:800;letter-spacing:1px;margin-bottom:10px;}
.kw-barcode-placeholder{
  background:var(--s1);border:1px solid var(--border);border-radius:8px;
  padding:14px;display:flex;flex-direction:column;align-items:center;gap:8px;
}
.kw-barcode-stripes{
  display:flex;align-items:center;height:60px;gap:2px;
}
.kw-barcode-stripes span{
  background:#1f1733;display:inline-block;height:100%;
}
.kw-barcode-stripes span:nth-child(1){width:3px;}
.kw-barcode-stripes span:nth-child(2){width:1px;}
.kw-barcode-stripes span:nth-child(3){width:4px;}
.kw-barcode-stripes span:nth-child(4){width:2px;}
.kw-barcode-stripes span:nth-child(5){width:1px;}
.kw-barcode-stripes span:nth-child(6){width:5px;}
.kw-barcode-stripes span:nth-child(7){width:2px;}
.kw-barcode-stripes span:nth-child(8){width:3px;}
.kw-barcode-stripes span:nth-child(9){width:1px;}
.kw-barcode-stripes span:nth-child(10){width:4px;}
.kw-barcode-stripes span:nth-child(11){width:2px;}
.kw-barcode-stripes span:nth-child(12){width:5px;}
.kw-barcode-stripes span:nth-child(13){width:1px;}
.kw-barcode-stripes span:nth-child(14){width:3px;}
.kw-barcode-stripes span:nth-child(15){width:2px;}
.kw-barcode-stripes span:nth-child(16){width:4px;}
.kw-barcode-stripes span:nth-child(17){width:1px;}
.kw-barcode-stripes span:nth-child(18){width:3px;}
.kw-barcode-hint{font-size:.7rem;color:var(--muted);font-style:italic;}

.kw-warning{
  background:rgba(239,68,68,.08);color:var(--red);
  border:1px solid rgba(239,68,68,.2);border-radius:8px;
  padding:8px 14px;font-size:.85rem;font-weight:800;margin-bottom:18px;
}

.kw-pre-round{display:flex;flex-direction:column;gap:14px;align-items:center;}
.kw-pre-icon{font-size:4rem;}
.kw-pre-text{font-size:1.3rem;font-weight:800;}
.kw-pre-text strong{color:var(--primary);}
.kw-pre-sub{font-size:.85rem;color:var(--muted);font-weight:600;line-height:1.5;}

.kw-active{display:flex;flex-direction:column;gap:18px;align-items:center;width:100%;}
.kw-active-team{font-size:1rem;color:var(--text2);font-weight:700;}
.kw-active-team span{color:var(--primary);font-weight:900;}
.kw-active-hint{font-size:.95rem;color:var(--text2);font-weight:700;text-align:center;padding:0 10px;}

.kw-timer-box-big{position:relative;}
.kw-timer-circle-big{position:relative;width:200px;height:200px;}
.kw-timer-num-big{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:4.5rem;font-weight:900;color:var(--primary);
}
#kw-timer-arc{transition:stroke-dashoffset 1s linear,stroke .3s;}
.kw-timer-box-big.warning #kw-timer-arc{stroke:var(--secondary);}
.kw-timer-box-big.warning .kw-timer-num-big{color:var(--secondary);}
.kw-timer-box-big.danger #kw-timer-arc{stroke:var(--red);}
.kw-timer-box-big.danger .kw-timer-num-big{color:var(--red);animation:pulse 1s infinite;}

.kw-end-btn{
  background:var(--primary);color:#fff;border:none;border-radius:var(--r);
  padding:16px 32px;font-family:'Cairo',sans-serif;font-size:1.05rem;font-weight:900;
  cursor:pointer;transition:all .2s;margin-top:8px;
}
.kw-end-btn:hover{background:var(--primary2);}

.kw-award{display:flex;flex-direction:column;gap:14px;align-items:center;width:100%;}
.kw-award-icon{font-size:4rem;}
.kw-award-question{font-size:1.3rem;font-weight:900;}
.kw-word-reveal{
  background:var(--secondary-dim);color:var(--primary-deep);
  border-radius:var(--r);padding:11px 18px;font-size:1rem;font-weight:700;
}
.kw-word-reveal strong{color:var(--primary);font-weight:900;}
.kw-award-buttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%;}
.kw-award-buttons .ba{flex:1;min-width:130px;}

/* ── LIAR GAME — REVISED (variable lie count) ── */
.lr-statement{
  background:var(--s2);border:2px solid var(--border);border-radius:var(--r);
  padding:14px 16px;cursor:default;transition:all .2s;
  display:flex;align-items:flex-start;gap:10px;
  font-family:'Cairo',sans-serif;font-size:.92rem;font-weight:700;text-align:right;line-height:1.5;
  color:var(--text);width:100%;
}
.lr-statement.selectable{cursor:pointer;}
.lr-statement.selectable:hover{border-color:var(--primary);background:var(--primary-dim);}
.lr-statement.picked{
  background:rgba(255,169,66,.1);border-color:var(--secondary);color:var(--primary-deep);
}

.lr-guess-count,.lr-pick-lies{
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r);
  padding:18px;text-align:center;
}
.lr-guess-label{font-size:1rem;font-weight:800;margin-bottom:14px;}
.lr-count-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.lr-count-btn{
  background:var(--s2);border:2px solid var(--border);border-radius:var(--r);
  padding:18px 10px;cursor:pointer;transition:all .2s;
  font-family:'Cairo',sans-serif;color:var(--text);
}
.lr-count-btn:hover{border-color:var(--primary);background:var(--primary-dim);transform:translateY(-2px);}
.lr-count-num{font-size:2.5rem;font-weight:900;color:var(--primary);line-height:1;margin-bottom:4px;}
.lr-count-text{font-size:.82rem;color:var(--text2);font-weight:700;}

.lr-selected-info{font-size:.95rem;font-weight:800;margin-bottom:14px;}
.lr-selected-info strong{color:var(--primary);}

.lr-explanation{
  background:var(--secondary-dim);color:var(--primary-deep);
  border-radius:var(--r);padding:12px 16px;font-size:.92rem;font-weight:700;line-height:1.5;
  margin:8px 0;
}

/* ── RAPID GAME — REVISED (bidding) ── */
.rp-bid-phase{display:flex;flex-direction:column;gap:16px;align-items:center;width:100%;max-width:500px;margin:0 auto;}

.rp-bid-info{font-size:.95rem;color:var(--text2);font-weight:700;}

.rp-current-bid{
  background:linear-gradient(135deg,var(--primary-dim),var(--secondary-dim));
  border:2px solid var(--primary);border-radius:var(--r);
  padding:18px 24px;width:100%;text-align:center;
}
.rp-bid-label{font-size:.78rem;color:var(--text2);font-weight:800;letter-spacing:1px;margin-bottom:6px;}
.rp-bid-num{font-size:3.5rem;font-weight:900;color:var(--primary-deep);line-height:1;margin-bottom:4px;}
.rp-bid-team{font-size:.92rem;color:var(--text2);font-weight:700;}

.rp-bid-input{display:flex;flex-direction:column;gap:10px;align-items:center;width:100%;}
.rp-bid-input label{font-size:.85rem;color:var(--muted);font-weight:700;}
.rp-bid-controls{display:flex;align-items:center;gap:10px;}
.rp-bid-adj{
  width:44px;height:44px;background:var(--s2);border:1.5px solid var(--border);
  border-radius:50%;font-size:1.4rem;font-weight:900;cursor:pointer;
  color:var(--primary);transition:all .15s;
}
.rp-bid-adj:hover{background:var(--primary-dim);border-color:var(--primary);}
#rp-bid-input{
  width:90px;text-align:center;background:var(--s2);border:1.5px solid var(--border);
  border-radius:10px;padding:10px;color:var(--text);font-family:'Cairo',sans-serif;
  font-size:1.5rem;font-weight:900;outline:none;
}
#rp-bid-input:focus{border-color:var(--primary);}

.rp-bid-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;}
.rp-team-bid{
  border:2px solid;border-radius:var(--r);padding:14px 12px;
  font-family:'Cairo',sans-serif;cursor:pointer;transition:all .2s;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:transparent;
}
.rp-team-bid.t1{border-color:var(--primary);color:var(--primary);background:var(--primary-dim);}
.rp-team-bid.t1:hover{background:rgba(30,58,95,.2);}
.rp-team-bid.t2{border-color:var(--secondary);color:var(--primary-deep);background:var(--secondary-dim);}
.rp-team-bid.t2:hover{background:rgba(255,107,53,.25);}
.rp-team-bid:disabled{opacity:.4;cursor:not-allowed;}
.rp-team-name-bid{font-size:1.05rem;font-weight:900;}
.rp-team-bid span:last-child{font-size:.78rem;font-weight:700;opacity:.85;}

.rp-confirm-btn{
  background:var(--green);color:#fff;border:none;border-radius:var(--r);
  padding:16px 32px;font-family:'Cairo',sans-serif;font-size:1.1rem;font-weight:900;
  cursor:pointer;transition:all .2s;width:100%;
  box-shadow:0 4px 20px rgba(16,185,129,.3);
  animation:pulse-btn 1.5s ease-in-out infinite;
}
@keyframes pulse-btn{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.rp-confirm-btn:hover{background:#0ea272;animation:none;}

.rp-active-team{
  background:var(--primary-dim);color:var(--primary);
  border-radius:100px;padding:6px 18px;font-size:1rem;font-weight:900;
}
.rp-active-prompt{
  font-size:1.3rem;font-weight:800;color:var(--text);text-align:center;line-height:1.4;
}
.rp-active-target{
  background:var(--secondary-dim);color:var(--primary-deep);
  border-radius:8px;padding:8px 14px;font-size:.92rem;font-weight:700;
}
.rp-active-target strong{color:var(--primary);font-weight:900;font-size:1.1rem;margin:0 4px;}

.rp-counter{font-size:1rem;color:var(--text2);font-weight:700;display:flex;align-items:center;gap:5px;}
.rp-count-label{font-size:.85rem;}
.rp-counter strong{color:var(--primary);font-size:1.6rem;font-weight:900;}
.rp-count-target{color:var(--muted);font-size:1rem;}
.rp-count-of{color:var(--text2);font-weight:800;}

.rp-done-icon{font-size:4rem;margin-bottom:8px;}

/* Tiebreaker animation */
.tiebreaker-overlay{
  position:fixed;inset:0;
  background:linear-gradient(135deg,rgba(30,58,95,.95),rgba(239,68,68,.9));
  z-index:9000;display:none;align-items:center;justify-content:center;
}
.tiebreaker-overlay.show{display:flex;animation:tb-fade .6s ease;}
@keyframes tb-fade{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.tb-content{text-align:center;color:#fff;}
.tb-flames{font-size:6rem;margin-bottom:12px;animation:tb-shake .5s ease infinite alternate;}
@keyframes tb-shake{from{transform:rotate(-10deg) scale(1)}to{transform:rotate(10deg) scale(1.1)}}
.tb-text{font-size:clamp(2.5rem,8vw,4.5rem);font-weight:900;letter-spacing:-2px;margin-bottom:10px;
  text-shadow:0 4px 20px rgba(0,0,0,.3);}
.tb-sub{font-size:1.2rem;font-weight:700;opacity:.9;}

@media(max-width:600px){
  .kw-scores-mini{justify-content:flex-start;width:100%;}
  .lr-count-buttons{grid-template-columns:1fr;}
  .lr-count-btn{display:flex;align-items:center;gap:14px;padding:14px;}
  .lr-count-num{font-size:1.8rem;margin:0;}
}



/* ═══════════════════════════════════════════════
   إضافات: قائمة المختارة المحسّنة + شاشة التحميل
═══════════════════════════════════════════════ */
.sel-float{
  background:linear-gradient(165deg,#1C3A5A 0%,#0B1F35 100%);
  border:1.5px solid rgba(14,165,233,.5);
  box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04) inset;
}
/* عند تحريكها يدوياً: نلغي transform ونتحكم بـ left/top، والإظهار بالشفافية */
.sel-float.custom-pos{transform:none;visibility:hidden;opacity:0;transition:opacity .25s ease;}
.sel-float.custom-pos.show{visibility:visible;opacity:1;}
.sel-float-hd{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;gap:8px;}
.sel-float-hd:active{cursor:grabbing;}
.sff-drag-dots{color:var(--muted);font-size:1.05rem;}
.sff-collapse{
  background:var(--s3);border:none;color:var(--text);
  width:26px;height:26px;border-radius:8px;cursor:pointer;
  font-family:'Cairo',sans-serif;font-size:.9rem;font-weight:900;
  display:flex;align-items:center;justify-content:center;
}
.sff-collapse:hover{background:var(--primary);color:#fff;}
.sel-float.collapsed .sel-float-list{display:none;}
.sel-float.collapsed .sel-float-hd{padding-bottom:0;margin-bottom:0;border-bottom:none;}

.page-loading{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:70px 20px;color:var(--text2);
}
.page-loading-spinner{
  width:48px;height:48px;border-radius:50%;
  border:4px solid var(--s3);border-top-color:var(--primary);
  animation:pgSpin .8s linear infinite;
}
.page-loading-text{font-weight:800;font-size:1rem;}
@keyframes pgSpin{to{transform:rotate(360deg);}}