/* ═══════════════════════════════════════════════════════════
   GAMES PREMIUM — ToolHub 5D
   Premium gaming UI inspired by Ludo King & top mobile games
   ═══════════════════════════════════════════════════════════ */

/* ── KEYFRAMES ── */
@keyframes gp-pulse       { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.08);opacity:.85} }
@keyframes gp-glow-pulse  { 0%,100%{box-shadow:0 0 12px var(--glow),0 0 24px var(--glow)} 50%{box-shadow:0 0 24px var(--glow),0 0 48px var(--glow),0 0 72px var(--glow)} }
@keyframes gp-float       { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes gp-spin-slow   { to{transform:rotate(360deg)} }
@keyframes gp-shimmer     { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes gp-bounce-in   { 0%{transform:scale(0);opacity:0} 60%{transform:scale(1.15)} 80%{transform:scale(0.95)} 100%{transform:scale(1);opacity:1} }
@keyframes gp-slide-up    { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes gp-fade-in     { from{opacity:0} to{opacity:1} }
@keyframes gp-confetti-fall { 0%{transform:translateY(-20px) rotate(0deg);opacity:1} 100%{transform:translateY(100vh) rotate(720deg);opacity:0} }
@keyframes gp-trophy-bounce { 0%,100%{transform:rotate(-10deg) scale(1)} 50%{transform:rotate(10deg) scale(1.15)} }
@keyframes gp-victory-text  { 0%{transform:scale(0) rotate(-10deg);opacity:0} 70%{transform:scale(1.1) rotate(2deg)} 100%{transform:scale(1) rotate(0deg);opacity:1} }
@keyframes gp-ring-rotate   { to{transform:rotate(360deg)} }
@keyframes gp-dice-shake    { 0%,100%{transform:rotate(0deg) scale(1)} 15%{transform:rotate(-15deg) scale(1.1)} 30%{transform:rotate(15deg) scale(1.15)} 45%{transform:rotate(-10deg) scale(1.1)} 60%{transform:rotate(10deg) scale(1.12)} 75%{transform:rotate(-5deg) scale(1.05)} 90%{transform:rotate(5deg) scale(1.02)} }
@keyframes gp-token-move    { 0%{transform:translateY(0) scale(1)} 50%{transform:translateY(-12px) scale(1.1)} 100%{transform:translateY(0) scale(1)} }
@keyframes gp-invalid       { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
@keyframes gp-capture       { 0%{transform:scale(1)} 30%{transform:scale(1.4)} 60%{transform:scale(0.8)} 100%{transform:scale(0)} }
@keyframes gp-card-shine    { 0%{background-position:-150% 0} 100%{background-position:250% 0} }
@keyframes gp-turn-arrow    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }
@keyframes gp-active-border { 0%,100%{opacity:.7} 50%{opacity:1} }
@keyframes gp-sparkle       { 0%,100%{opacity:0;transform:scale(0)} 50%{opacity:1;transform:scale(1)} }
@keyframes gp-gradient-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes gp-ripple        { to{transform:scale(4);opacity:0} }
@keyframes gp-hero-float    { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-12px) rotate(1deg)} }

/* ══════════════════════════════════════
   GAMES PAGE — HERO BANNER
   ══════════════════════════════════════ */
.gp-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg,#0f0c29,#302b63,#24243e);
  border-radius: 24px; padding: 2.5rem 2rem; margin-bottom: 2rem;
  border: 1px solid rgba(139,92,246,.35);
  box-shadow: 0 0 60px rgba(99,102,241,.2),inset 0 1px 0 rgba(255,255,255,.08);
}
.gp-hero::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 70% 50%,rgba(139,92,246,.25) 0%,transparent 60%),
              radial-gradient(ellipse at 10% 80%,rgba(236,72,153,.18) 0%,transparent 50%);
}
.gp-hero-content { position:relative; z-index:1; }
.gp-hero-tag {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(139,92,246,.25); border:1px solid rgba(139,92,246,.4);
  border-radius:99px; padding:3px 12px; font-size:.72rem; font-weight:700;
  color:#c4b5fd; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.8rem;
}
.gp-hero h1 {
  font-family:var(--font-display); font-size:clamp(1.4rem,4vw,2.2rem);
  font-weight:800; color:#fff; margin-bottom:.5rem; line-height:1.2;
  background:linear-gradient(135deg,#fff 30%,#c4b5fd);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.gp-hero p { color:rgba(255,255,255,.65); font-size:.9rem; margin-bottom:1.2rem; }
.gp-hero-emoji {
  position:absolute; right:2rem; top:50%; transform:translateY(-50%);
  font-size:5rem; opacity:.35; animation:gp-hero-float 4s ease-in-out infinite;
  pointer-events:none;
}
.gp-hero-stats {
  display:flex; gap:1.5rem; flex-wrap:wrap;
}
.gp-hero-stat {
  display:flex; flex-direction:column;
}
.gp-hero-stat strong { font-size:1.3rem; font-weight:800; color:#fff; font-family:var(--font-display); }
.gp-hero-stat span { font-size:.7rem; color:rgba(255,255,255,.5); letter-spacing:.06em; text-transform:uppercase; }

/* ══════════════════════════════════════
   SECTION HEADERS
   ══════════════════════════════════════ */
.gp-section-head {
  display:flex; align-items:center; justify-content:space-between;
  margin:2rem 0 1rem;
}
.gp-section-title {
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-display); font-size:1rem; font-weight:800;
  color:var(--text); letter-spacing:.03em;
}
.gp-section-title .badge {
  font-size:.6rem; padding:2px 8px; border-radius:99px;
  background:var(--grad-games); color:#fff; font-weight:700; letter-spacing:.05em;
}
.gp-view-all {
  font-size:.78rem; color:var(--indigo); font-weight:600;
  display:flex; align-items:center; gap:4px; cursor:pointer;
  padding:4px 12px; border-radius:99px; border:1px solid rgba(99,102,241,.2);
  transition:all .2s; background:transparent;
}
.gp-view-all:hover { background:rgba(99,102,241,.1); border-color:var(--indigo); }

/* ══════════════════════════════════════
   SEARCH & FILTER BAR
   ══════════════════════════════════════ */
.gp-search-bar {
  display:flex; gap:.6rem; margin-bottom:1.2rem; flex-wrap:wrap;
}
.gp-search-input {
  flex:1; min-width:200px; padding:.65rem 1rem .65rem 2.8rem;
  background:var(--glass2); border:1.5px solid var(--border);
  border-radius:99px; color:var(--text); font-size:.88rem;
  transition:all .25s;
}
.gp-search-input:focus { border-color:var(--indigo); box-shadow:0 0 0 3px rgba(99,102,241,.12); outline:none; }
.gp-search-wrap { position:relative; flex:1; }
.gp-search-wrap::before { content:'🔍'; position:absolute; left:.9rem; top:50%; transform:translateY(-50%); font-size:.85rem; }
.gp-filter-chips { display:flex; gap:.5rem; flex-wrap:wrap; }
.gp-chip {
  padding:.38rem .9rem; border-radius:99px; font-size:.75rem; font-weight:600;
  border:1.5px solid var(--border); background:var(--glass2); color:var(--text2);
  cursor:pointer; transition:all .2s; white-space:nowrap;
}
.gp-chip.active, .gp-chip:hover {
  background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(139,92,246,.2));
  border-color:var(--indigo); color:var(--text);
}
.gp-chip.active { background:var(--indigo); color:#fff; border-color:var(--indigo); }

/* ══════════════════════════════════════
   PREMIUM GAME CARDS
   ══════════════════════════════════════ */
.games-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:1rem;
}
.game-card {
  position:relative; overflow:hidden;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:1.4rem 1rem 1rem;
  cursor:pointer; text-align:center;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,border-color .3s;
  display:flex; flex-direction:column; gap:8px; align-items:center;
}
/* Gradient border on hover via pseudo */
.game-card::before {
  content:''; position:absolute; inset:0; border-radius:20px;
  background:linear-gradient(135deg,var(--indigo),#8b5cf6,#ec4899);
  z-index:0; opacity:0; transition:opacity .35s;
  padding:1px; mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude; -webkit-mask-composite:xor;
}
/* Shine sweep effect */
.game-card::after {
  content:''; position:absolute; top:0; left:-150%;
  width:100%; height:100%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.08) 50%,transparent 100%);
  transition:left .5s ease; z-index:1;
}
.game-card:hover::after { left:150%; }
.game-card:hover { transform:translateY(-8px) scale(1.02); border-color:transparent; }
.game-card:hover::before { opacity:1; }
.game-card:hover { box-shadow:0 16px 40px rgba(99,102,241,.25),0 0 0 1px rgba(99,102,241,.3); }

.game-card > * { position:relative; z-index:2; }

.game-card-icon {
  font-size:2.6rem; line-height:1;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.game-card:hover .game-card-icon { transform:scale(1.2) translateY(-4px); }

.game-card-name { font-weight:800; font-size:.88rem; color:var(--text); }
.game-card-desc { font-size:.7rem; color:var(--text3); line-height:1.4; }

/* Category + rating row */
.game-card-meta {
  display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; justify-content:center;
}
.game-card-cat {
  font-size:.6rem; font-weight:700; padding:2px 7px; border-radius:99px;
  background:rgba(99,102,241,.15); color:var(--indigo); letter-spacing:.04em;
}
.game-card-rating {
  font-size:.7rem; color:#f59e0b; font-weight:700; display:flex; align-items:center; gap:2px;
}

.game-card-btn {
  padding:7px 20px;
  background:var(--grad-games);
  color:white; border-radius:99px; font-size:.78rem; font-weight:700;
  box-shadow:0 0 14px rgba(249,115,22,.3); transition:all .25s;
  position:relative; overflow:hidden;
}
.game-card-btn::after {
  content:''; position:absolute; inset:0; border-radius:99px;
  background:rgba(255,255,255,.15); transform:scaleX(0); transform-origin:left;
  transition:transform .3s;
}
.game-card-btn:hover::after { transform:scaleX(1); }
.game-card-btn:hover { transform:scale(1.06); box-shadow:0 0 24px rgba(249,115,22,.5); }

/* Ripple on click */
.gp-ripple {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,.3); transform:scale(0);
  animation:gp-ripple .6s linear; pointer-events:none; z-index:10;
}

/* ── Difficulty badge ── */
.game-diff {
  position:absolute; top:.55rem; right:.55rem;
  font-size:.56rem; font-weight:800; padding:2px 7px; border-radius:99px;
  text-transform:uppercase; letter-spacing:.05em; z-index:3;
}
.game-diff.easy   { background:rgba(34,197,94,.2);  color:#22c55e; }
.game-diff.medium { background:rgba(245,158,11,.2); color:#f59e0b; }
.game-diff.hard   { background:rgba(239,68,68,.2);  color:#ef4444; }

/* ── Players badge ── */
.game-players {
  position:absolute; top:.55rem; left:.55rem;
  font-size:.6rem; font-weight:700; color:rgba(255,255,255,.7);
  background:rgba(0,0,0,.4); border-radius:99px; padding:2px 7px; z-index:3;
}

/* ══════════════════════════════════════
   CATEGORIES ROW
   ══════════════════════════════════════ */
.gp-cats {
  display:flex; gap:.6rem; overflow-x:auto; padding-bottom:.5rem;
  margin-bottom:1.5rem; scrollbar-width:none;
}
.gp-cats::-webkit-scrollbar { display:none; }
.gp-cat-pill {
  flex-shrink:0; display:flex; flex-direction:column; align-items:center;
  gap:.3rem; padding:.6rem 1rem; border-radius:16px; cursor:pointer;
  background:var(--glass2); border:1px solid var(--border);
  transition:all .25s; min-width:60px;
}
.gp-cat-pill:hover, .gp-cat-pill.active {
  background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(139,92,246,.2));
  border-color:var(--indigo); transform:translateY(-3px);
}
.gp-cat-pill span:first-child { font-size:1.3rem; }
.gp-cat-pill span:last-child { font-size:.62rem; font-weight:600; color:var(--text2); white-space:nowrap; }

/* ══════════════════════════════════════
   FEATURED / TRENDING ROW
   ══════════════════════════════════════ */
.gp-featured-row {
  display:flex; gap:1rem; overflow-x:auto; padding-bottom:.5rem;
  scrollbar-width:none; margin-bottom:.5rem;
}
.gp-featured-row::-webkit-scrollbar { display:none; }
.gp-featured-card {
  flex-shrink:0; width:200px; border-radius:20px; overflow:hidden;
  cursor:pointer; position:relative; transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.gp-featured-card:hover { transform:translateY(-6px) scale(1.02); }
.gp-featured-bg {
  height:120px; display:flex; align-items:center; justify-content:center;
  font-size:3.5rem; position:relative; overflow:hidden;
}
.gp-featured-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.7));
}
.gp-featured-info {
  padding:.65rem .8rem .7rem;
  background:var(--card); border:1px solid var(--border);
  border-top:none; border-radius:0 0 20px 20px;
}
.gp-featured-name { font-weight:800; font-size:.82rem; }
.gp-featured-plays { font-size:.66rem; color:var(--text3); }
.gp-trending-badge {
  position:absolute; top:.5rem; right:.5rem; z-index:1;
  font-size:.58rem; font-weight:800; padding:2px 8px; border-radius:99px;
  background:linear-gradient(135deg,#f59e0b,#ef4444); color:#fff;
  letter-spacing:.05em;
}

/* ══════════════════════════════════════
   DAILY CHALLENGE BANNER
   ══════════════════════════════════════ */
.gp-daily {
  background:linear-gradient(135deg,#1a1a4e,#312e81);
  border:1px solid rgba(99,102,241,.35); border-radius:20px;
  padding:1.2rem 1.4rem; margin-bottom:1.5rem;
  display:flex; align-items:center; gap:1rem; cursor:pointer;
  transition:transform .25s; position:relative; overflow:hidden;
}
.gp-daily::before {
  content:''; position:absolute; right:-30px; top:-30px;
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,.3),transparent 70%);
}
.gp-daily:hover { transform:translateY(-3px); }
.gp-daily-icon { font-size:2.2rem; flex-shrink:0; }
.gp-daily-info { flex:1; }
.gp-daily-label { font-size:.65rem; font-weight:700; color:#a5b4fc; letter-spacing:.08em; text-transform:uppercase; }
.gp-daily-title { font-weight:800; color:#fff; font-size:.95rem; }
.gp-daily-desc { font-size:.75rem; color:rgba(255,255,255,.55); }
.gp-daily-timer { text-align:right; flex-shrink:0; }
.gp-daily-timer .time { font-family:var(--font-display); font-size:1.1rem; font-weight:800; color:#c4b5fd; }
.gp-daily-timer .tlabel { font-size:.62rem; color:rgba(255,255,255,.4); }

/* ══════════════════════════════════════
   GAME VIEW — PREMIUM HEADER
   ══════════════════════════════════════ */
.game-view-header {
  display:flex; align-items:center; gap:.75rem; margin-bottom:1rem;
}
.game-back-btn {
  padding:8px 14px; background:var(--glass2); border:1.5px solid var(--border);
  color:var(--text); border-radius:99px; font-size:.82rem; font-weight:600;
  transition:all .2s; display:flex; align-items:center; gap:5px;
}
.game-back-btn:hover { border-color:var(--indigo); background:rgba(99,102,241,.1); transform:translateX(-2px); }

/* ══════════════════════════════════════
   LUDO PREMIUM CONTAINER
   ══════════════════════════════════════ */
#ludo-premium-wrap {
  background: linear-gradient(160deg,#0d0821,#1a0533,#0d1544);
  border-radius:20px; overflow:hidden;
  border:1px solid rgba(139,92,246,.3);
}

/* Setup screen */
.ludo-setup-premium {
  text-align:center; padding:2rem 1.5rem;
}
.ludo-setup-icon {
  font-size:4rem; margin-bottom:.8rem;
  display:inline-block; animation:gp-float 3s ease-in-out infinite;
}
.ludo-setup-title {
  font-family:var(--font-display); font-size:1.5rem; font-weight:800;
  background:linear-gradient(135deg,#ffd700,#ff9a00);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:.3rem;
}
.ludo-setup-sub { color:rgba(255,255,255,.55); font-size:.85rem; margin-bottom:1.5rem; }
.ludo-player-btns { display:flex; gap:.8rem; justify-content:center; margin-bottom:1.5rem; flex-wrap:wrap; }
.ludo-player-btn {
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  padding:.9rem 1.5rem; border-radius:16px; cursor:pointer;
  background:rgba(255,215,0,.08); border:1.5px solid rgba(255,215,0,.25);
  color:#fff; transition:all .25s; min-width:80px;
}
.ludo-player-btn:hover {
  background:rgba(255,215,0,.18); border-color:#ffd700;
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 8px 24px rgba(255,215,0,.25);
}
.ludo-player-btn strong { font-size:1.5rem; font-weight:800; font-family:var(--font-display); color:#ffd700; }
.ludo-player-btn span { font-size:.75rem; color:rgba(255,255,255,.65); }
.ludo-rules {
  background:rgba(255,215,0,.05); border:1px solid rgba(255,215,0,.15);
  border-radius:14px; padding:.9rem 1rem; text-align:left; max-width:300px; margin:0 auto;
  font-size:.78rem; color:rgba(255,255,255,.6); line-height:1.7;
}
.ludo-rules b { color:#ffd700; }

/* ── Status bar ── */
#ludo-status {
  text-align:center; font-weight:800; font-size:.92rem;
  padding:.6rem 1rem; margin-bottom:.3rem;
  background:rgba(255,215,0,.06); border-bottom:1px solid rgba(255,215,0,.1);
  letter-spacing:.02em; transition:color .3s;
}

/* ── Board area ── */
.ludo-board-area {
  display:flex; justify-content:center; padding:.8rem;
}
#ludo-canvas {
  border-radius:14px; touch-action:none; display:block;
  max-width:100%; width:min(100%,400px);
  box-shadow:0 0 40px rgba(99,102,241,.2),0 0 80px rgba(139,92,246,.1);
}

/* ── Dice + Roll area ── */
.ludo-controls {
  display:flex; align-items:center; justify-content:center;
  gap:1rem; padding:.8rem 1rem; flex-wrap:wrap;
}
#ludo-dice-canvas {
  border-radius:12px; cursor:pointer;
  border:2px solid #ffd700;
  transition:transform .15s, box-shadow .15s;
  flex-shrink:0;
  box-shadow:0 0 12px rgba(255,215,0,.3);
}
#ludo-dice-canvas:hover {
  transform:scale(1.08);
  box-shadow:0 0 24px rgba(255,215,0,.5);
}
#ludo-dice-canvas.rolling {
  animation:gp-dice-shake .5s ease-in-out;
}
#ludo-roll-btn {
  font-size:1rem; padding:.55rem 1.6rem;
  background:linear-gradient(135deg,#ffd700,#f59e0b);
  color:#111; font-weight:800; min-height:48px;
  box-shadow:0 0 20px rgba(255,215,0,.4);
  transition:all .2s; border-radius:99px;
}
#ludo-roll-btn:hover {
  transform:scale(1.06);
  box-shadow:0 0 32px rgba(255,215,0,.6);
}
#ludo-roll-btn:disabled {
  opacity:.5; transform:none; cursor:not-allowed;
}

/* ── Player panels (ludo-info) ── */
#ludo-info {
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:.5rem; padding:.6rem .8rem; margin:0;
}
.ludo-player-panel {
  flex:1; min-width:70px; max-width:120px;
  border-radius:14px; padding:.5rem .6rem; text-align:center;
  border:2px solid transparent; transition:all .3s;
  position:relative; overflow:hidden;
}
.ludo-player-panel::before {
  content:''; position:absolute; inset:-1px; border-radius:14px;
  background:inherit; z-index:0;
}
.ludo-player-panel.active {
  border-color:rgba(255,215,0,.8) !important;
  box-shadow:0 0 20px var(--player-color, rgba(255,215,0,.4));
  animation:gp-glow-pulse 1.5s ease-in-out infinite;
  --glow: var(--player-color, rgba(255,215,0,.4));
}
.ludo-panel-name { font-size:.72rem; font-weight:800; color:#fff; }
.ludo-panel-tokens { font-size:.65rem; color:rgba(255,255,255,.7); }
.ludo-panel-dice { font-size:1.1rem; }
.ludo-panel-turn { font-size:.58rem; color:#ffd700; font-weight:700; letter-spacing:.06em; }

/* ── Turn arrow floating ── */
.ludo-turn-arrow {
  display:inline-block; color:#ffd700; margin-left:.3rem;
  animation:gp-turn-arrow 1s ease-in-out infinite;
}

/* ── Move log ── */
.ludo-log-wrap {
  margin:.4rem .6rem .6rem; background:rgba(0,0,0,.3);
  border-radius:12px; padding:.5rem .7rem;
}
.ludo-log-title { font-size:.65rem; font-weight:800; color:#ffd700; margin-bottom:.3rem; letter-spacing:.06em; }
#ludo-move-log { max-height:100px; overflow-y:auto; font-size:.72rem; }
#ludo-move-log::-webkit-scrollbar { width:3px; }
#ludo-move-log::-webkit-scrollbar-thumb { background:rgba(255,215,0,.3); border-radius:99px; }
.ludo-log-entry {
  display:flex; align-items:center; gap:.4rem; padding:.2rem 0;
  border-bottom:1px solid rgba(255,255,255,.05); color:rgba(255,255,255,.6);
}
.ludo-log-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ── Victory overlay ── */
.ludo-victory {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.85); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  animation:gp-fade-in .4s ease;
}
.ludo-victory-box {
  text-align:center; padding:2.5rem 2rem; border-radius:28px;
  background:linear-gradient(160deg,#1a1a4e,#2d1b69);
  border:1px solid rgba(255,215,0,.4); max-width:340px; width:90%;
  animation:gp-bounce-in .5s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 0 60px rgba(255,215,0,.2),0 0 120px rgba(139,92,246,.2);
}
.ludo-victory-trophy {
  font-size:4rem; margin-bottom:.5rem;
  display:block; animation:gp-trophy-bounce 1.2s ease-in-out infinite;
}
.ludo-victory-title {
  font-family:var(--font-display); font-size:1.6rem; font-weight:800;
  background:linear-gradient(135deg,#ffd700,#ff9a00);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:.3rem; animation:gp-victory-text .6s .3s cubic-bezier(.34,1.56,.64,1) both;
}
.ludo-victory-sub { color:rgba(255,255,255,.65); font-size:.88rem; margin-bottom:1.2rem; }
.ludo-victory-btn {
  padding:.65rem 1.8rem; border-radius:99px;
  background:linear-gradient(135deg,#ffd700,#f59e0b);
  color:#111; font-weight:800; font-size:.95rem;
  box-shadow:0 0 24px rgba(255,215,0,.4); transition:all .2s;
}
.ludo-victory-btn:hover { transform:scale(1.05); box-shadow:0 0 40px rgba(255,215,0,.6); }

/* ── Confetti ── */
.gp-confetti-piece {
  position:fixed; top:-20px; border-radius:3px;
  animation:gp-confetti-fall linear forwards;
  pointer-events:none; z-index:10000;
}

/* ── Invalid move shake ── */
.ludo-invalid { animation:gp-invalid .4s ease; }

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */
@media (max-width:640px) {
  .games-grid { grid-template-columns:repeat(2,1fr); gap:.7rem; }
  .game-card { padding:1.1rem .8rem .9rem; }
  .game-card-icon { font-size:2.2rem; }
  .game-card-name { font-size:.8rem; }
  .game-card-desc { display:none; }
  .gp-hero { padding:1.5rem 1rem; }
  .gp-hero-emoji { display:none; }
  .gp-featured-card { width:160px; }
  .ludo-player-panel { min-width:60px; padding:.4rem; }
}
@media (max-width:400px) {
  .games-grid { grid-template-columns:repeat(2,1fr); }
}

/* ══════════════════════════════════════
   LIGHT MODE ADJUSTMENTS
   ══════════════════════════════════════ */
[data-theme="light"] .gp-hero {
  background:linear-gradient(135deg,#1e1b4b,#312e81,#4c1d95);
}
[data-theme="light"] .game-card {
  background:rgba(255,255,255,.95);
  box-shadow:0 2px 16px rgba(0,0,0,.06);
}
[data-theme="light"] #ludo-premium-wrap {
  background:linear-gradient(160deg,#1a0533,#2d1b69,#1a2a4e);
}

/* ══════════════════════════════════════
   SKELETON LOADERS
   ══════════════════════════════════════ */
.gp-skeleton {
  background:linear-gradient(90deg,var(--glass2) 25%,rgba(255,255,255,.04) 50%,var(--glass2) 75%);
  background-size:200% 100%;
  animation:gp-shimmer 1.4s infinite; border-radius:8px;
}

/* ══════════════════════════════════════
   MICRO INTERACTIONS
   ══════════════════════════════════════ */
.game-card:active { transform:translateY(-2px) scale(0.98); }
.game-card-btn:active { transform:scale(0.95); }
#ludo-roll-btn:active { transform:scale(0.95); }

/* Scroll reveal animation */
.gp-reveal {
  animation:gp-slide-up .4s ease both;
}
.gp-reveal:nth-child(2) { animation-delay:.05s; }
.gp-reveal:nth-child(3) { animation-delay:.1s; }
.gp-reveal:nth-child(4) { animation-delay:.15s; }
.gp-reveal:nth-child(5) { animation-delay:.2s; }
.gp-reveal:nth-child(6) { animation-delay:.25s; }

/* Hidden when filtered out */
.game-card.gp-hidden {
  display:none;
}

/* ── Status transition ── */
#ludo-status {
  transition: color .3s, transform .2s, text-shadow .3s;
}

/* ── Ludo canvas transitions via CSS class ── */
#ludo-canvas { transition: box-shadow .3s; }

/* ── Game back btn in game-view ── */
.game-view-header h1 {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 800;
  background: var(--grad-main);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ══════════════════════════════════════
   TIC TAC TOE PREMIUM UI
   ══════════════════════════════════════ */

/* ── Keyframes for TTT ── */
@keyframes ttt-pop    { 0%{transform:scale(0) rotate(-15deg);opacity:0} 70%{transform:scale(1.15) rotate(3deg)} 100%{transform:scale(1) rotate(0);opacity:1} }
@keyframes ttt-wiggle { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
@keyframes ttt-glow-x { 0%,100%{box-shadow:0 0 8px rgba(129,140,248,.4)} 50%{box-shadow:0 0 20px rgba(129,140,248,.8)} }
@keyframes ttt-glow-o { 0%,100%{box-shadow:0 0 8px rgba(236,72,153,.4)} 50%{box-shadow:0 0 20px rgba(236,72,153,.8)} }
@keyframes ttt-slide-in { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes ttt-pulse-turn { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }

.ttt-premium-wrap {
  padding: 0;
  overflow: hidden;
}

/* ── Setup ── */
#ttt-setup {
  animation: ttt-slide-in .35s ease;
}
.ttt-setup-group {
  margin-bottom: 1rem;
}
.ttt-setup-label {
  font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text3); margin-bottom: .45rem;
}
.ttt-toggle-row {
  display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
}
.ttt-toggle-btn {
  padding: .45rem 1rem; border-radius: 99px; font-size: .8rem; font-weight: 700;
  border: 1.5px solid var(--border); background: var(--glass2); color: var(--text2);
  cursor: pointer; transition: all .2s;
}
.ttt-toggle-btn:hover {
  border-color: var(--indigo); color: var(--text);
}
.ttt-toggle-btn.active {
  background: var(--indigo); border-color: var(--indigo); color: #fff;
  box-shadow: 0 0 14px rgba(99,102,241,.4);
}
.ttt-start-btn {
  margin-top: .6rem; padding: .65rem 2.5rem; border-radius: 99px;
  background: linear-gradient(135deg,#6366f1,#8b5cf6); color: #fff;
  font-weight: 800; font-size: .95rem; box-shadow: 0 0 20px rgba(99,102,241,.4);
  transition: all .2s; display: inline-block;
}
.ttt-start-btn:hover { transform: scale(1.06); box-shadow: 0 0 30px rgba(99,102,241,.6); }

/* ── Scoreboard ── */
.ttt-scoreboard {
  display: flex; align-items: stretch; gap: 0;
  background: var(--glass2); border-bottom: 1px solid var(--border);
}
.ttt-score-card {
  flex: 1; text-align: center; padding: .75rem .5rem;
  transition: all .3s; border-right: 1px solid var(--border);
}
.ttt-score-card.active-card {
  background: rgba(99,102,241,.08);
  animation: ttt-pulse-turn 1.2s ease-in-out infinite;
}
.ttt-score-card:last-child { border-right: none; }
.ttt-score-symbol {
  font-size: 1.4rem; font-weight: 900; line-height: 1; margin-bottom: .1rem;
}
.ttt-score-symbol.x { color: #818cf8; text-shadow: 0 0 10px rgba(129,140,248,.6); }
.ttt-score-symbol.o { color: #ec4899; text-shadow: 0 0 10px rgba(236,72,153,.6); }
.ttt-score-name { font-size: .65rem; color: var(--text3); font-weight: 600; margin-bottom: .3rem; }
.ttt-score-val { font-size: 1.6rem; font-weight: 900; font-family: var(--font-display); color: var(--text); line-height: 1; }
.ttt-score-sub { font-size: .58rem; color: var(--text3); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ttt-score-streak { font-size: .62rem; color: #f59e0b; font-weight: 700; min-height: .9rem; margin-top: .15rem; }
.ttt-score-middle {
  flex: 0 0 80px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: .75rem .3rem; border-right: 1px solid var(--border);
}
.ttt-score-draws-val { font-size: 1.3rem; font-weight: 900; color: var(--text2); font-family: var(--font-display); }
.ttt-turn-indicator {
  margin-top: .4rem; display: flex; gap: .25rem; align-items: center;
  font-size: .72rem; font-weight: 800; padding: .2rem .5rem; border-radius: 99px;
  background: rgba(255,255,255,.06); transition: all .3s;
}
.ttt-turn-indicator.ttt-turn-x { color: #818cf8; }
.ttt-turn-indicator.ttt-turn-o { color: #ec4899; }

/* ── Status bar ── */
.ttt-status-bar {
  text-align: center; padding: .5rem 1rem; font-weight: 700; font-size: .88rem;
  min-height: 2rem; transition: all .3s; letter-spacing: .02em;
}
.ttt-status-x { color: #818cf8; text-shadow: 0 0 8px rgba(129,140,248,.4); }
.ttt-status-o { color: #ec4899; text-shadow: 0 0 8px rgba(236,72,153,.4); }
.ttt-status-win { color: #ffd700; font-size: 1rem; text-shadow: 0 0 12px rgba(255,215,0,.5); }
.ttt-status-draw { color: var(--text2); }
.ttt-status-ai { color: #10b981; }

/* ── Board ── */
.ttt-board-wrap {
  position: relative; padding: 1rem 1.2rem .8rem; display: flex; justify-content: center;
}
.ttt-board {
  display: grid; gap: 8px;
  width: min(100%, 300px); aspect-ratio: 1;
  position: relative; z-index: 1;
}
.ttt-board-4 { width: min(100%, 340px); }
.ttt-win-canvas {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  margin: 1rem 1.2rem .8rem;
  width: calc(100% - 2.4rem); height: calc(100% - 1.8rem);
}

.ttt-cell {
  border-radius: 14px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-size: 2.2rem; font-weight: 900;
  border: 2px solid var(--border); background: var(--glass2);
  transition: all .2s cubic-bezier(.34,1.56,.64,1); position: relative; overflow: hidden;
  aspect-ratio: 1;
}
.ttt-board-4 .ttt-cell { font-size: 1.7rem; border-radius: 10px; }
.ttt-cell.empty:hover {
  border-color: var(--indigo); background: rgba(99,102,241,.08);
  transform: scale(1.05);
}
.ttt-cell.ttt-x { color: #818cf8; border-color: rgba(129,140,248,.4); background: rgba(129,140,248,.08); }
.ttt-cell.ttt-o { color: #ec4899; border-color: rgba(236,72,153,.4); background: rgba(236,72,153,.08); }
.ttt-cell.ttt-x.ttt-win-cell { background: rgba(129,140,248,.2); border-color: #818cf8; animation: ttt-glow-x 1s ease-in-out infinite; }
.ttt-cell.ttt-o.ttt-win-cell { background: rgba(236,72,153,.2); border-color: #ec4899; animation: ttt-glow-o 1s ease-in-out infinite; }
.ttt-cell.ttt-pop { animation: ttt-pop .3s cubic-bezier(.34,1.56,.64,1); }

.ttt-cell::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255,255,255,.1); opacity: 0; transition: opacity .15s;
}
.ttt-cell:active::after { opacity: 1; }

/* ── Controls ── */
.ttt-controls {
  display: flex; gap: .6rem; padding: .75rem 1rem 1rem; justify-content: center; flex-wrap: wrap;
}
.ttt-ctrl-btn {
  padding: .42rem .9rem; border-radius: 99px; font-size: .78rem; font-weight: 700;
  border: 1.5px solid var(--border); background: var(--glass2); color: var(--text2);
  cursor: pointer; transition: all .2s;
}
.ttt-ctrl-btn:hover { border-color: var(--indigo); color: var(--text); background: rgba(99,102,241,.1); }

/* ── Responsive ── */
@media (max-width:400px) {
  .ttt-cell { font-size: 1.8rem; border-radius: 10px; }
  .ttt-board-4 .ttt-cell { font-size: 1.4rem; }
  .ttt-score-middle { flex: 0 0 64px; }
}

/* ══════════════════════════════════════
   LUDO PREMIUM DICE ANIMATION
   ══════════════════════════════════════ */
@keyframes ludo-dice-to-player { 
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  40%  { transform: translate(var(--dx,0),var(--dy,-20px)) scale(1.15); }
  100% { transform: translate(var(--dx,0),var(--dy,0)) scale(1); opacity: 1; }
}
@keyframes ludo-dice-roll-realistic {
  0%   { transform: rotate(0deg) scale(1); filter: blur(0px); }
  15%  { transform: rotate(-20deg) scale(1.12); filter: blur(1px); }
  30%  { transform: rotate(25deg) scale(1.18); filter: blur(2px); }
  45%  { transform: rotate(-15deg) scale(1.14); filter: blur(1.5px); }
  60%  { transform: rotate(18deg) scale(1.1); filter: blur(1px); }
  75%  { transform: rotate(-8deg) scale(1.05); filter: blur(.5px); }
  88%  { transform: rotate(4deg) scale(1.02); filter: blur(0); }
  100% { transform: rotate(0deg) scale(1); filter: blur(0); }
}
@keyframes ludo-token-bounce-move {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-14px) scale(1.12); }
  60%  { transform: translateY(-4px) scale(1.05); }
  80%  { transform: translateY(-8px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes ludo-capture-burst {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.5); opacity: .6; }
  100% { transform: scale(0); opacity: 0; }
}
@keyframes ludo-home-sparkle {
  0%,100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1) rotate(180deg); }
}
@keyframes ludo-active-border-flow {
  0%   { border-color: #ffd700; box-shadow: 0 0 12px #ffd70055; }
  50%  { border-color: #ff9a00; box-shadow: 0 0 24px #ff9a0088; }
  100% { border-color: #ffd700; box-shadow: 0 0 12px #ffd70055; }
}

#ludo-dice-canvas.rolling-realistic {
  animation: ludo-dice-roll-realistic .5s ease-out;
}

.ludo-token-moving {
  animation: ludo-token-bounce-move .4s cubic-bezier(.34,1.56,.64,1);
}


/* ══════════════════════════════════════
   LUDO KING — PHYSICAL DICE IN PLAYER PANELS
   ══════════════════════════════════════ */

/* Player panels grid */
.ludo-panels-grid {
  display: flex;
  gap: .45rem;
  padding: .5rem .6rem .35rem;
  justify-content: center;
  flex-wrap: wrap;
  position: relative; /* so slot-relative positioning works */
}

/* Each player panel */
.ludo-player-panel {
  flex: 1;
  min-width: 70px;
  max-width: 110px;
  border-radius: 14px;
  padding: .45rem .4rem .5rem;
  text-align: center;
  border: 2px solid transparent;
  transition: border-color .35s, box-shadow .35s, transform .3s;
  position: relative;
  overflow: visible; /* dice slot can overflow slightly */
}

.ludo-player-panel.active {
  border-color: rgba(255,215,0,.85) !important;
  box-shadow: 0 0 18px var(--player-color, rgba(255,215,0,.4));
  transform: translateY(-2px);
}

/* Dice slot — sits at TOP CENTER of each panel */
.ludo-dice-slot {
  position: absolute;
  top: -34px;          /* sits just above the panel */
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* The floating dice canvas — default state (in slot) */
.ludo-floating-dice {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px;
  cursor: pointer;
  border: 2.5px solid #ffd700;
  box-shadow: 0 0 14px rgba(255,215,0,.45);
  flex-shrink: 0;
  transition: box-shadow .3s, transform .15s;
  display: block;
}
.ludo-floating-dice:hover {
  box-shadow: 0 0 28px rgba(255,215,0,.75);
  transform: scale(1.08);
}

/* When dice lives inside a slot */
.ludo-dice-in-slot {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
}

/* Shake animation for realistic roll feel */
@keyframes ludo-dice-shake-realistic {
  0%   { transform: rotate(0deg) scale(1); }
  10%  { transform: rotate(-18deg) scale(1.1) translateX(-2px); }
  22%  { transform: rotate(22deg) scale(1.18) translateX(2px); }
  34%  { transform: rotate(-14deg) scale(1.13) translateX(-1px); }
  46%  { transform: rotate(16deg) scale(1.1); }
  58%  { transform: rotate(-8deg) scale(1.06); }
  70%  { transform: rotate(6deg) scale(1.03); }
  84%  { transform: rotate(-3deg) scale(1.01); }
  100% { transform: rotate(0deg) scale(1); }
}
.ludo-dice-shaking {
  animation: ludo-dice-shake-realistic .58s cubic-bezier(.36,.07,.19,.97) !important;
}

/* Panel avatar */
.ludo-panel-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .25rem;
  margin-top: 24px; /* space below dice slot */
}
.ludo-panel-name {
  font-size: .7rem; font-weight: 800; color: #fff; margin-bottom: .15rem;
}
.ludo-panel-tokens {
  font-size: .62rem; color: rgba(255,255,255,.75); letter-spacing: .01em;
}
.ludo-panel-turn {
  font-size: .55rem; color: #ffd700; font-weight: 800;
  letter-spacing: .06em; margin-top: .2rem;
}
.ludo-turn-arrow {
  display: inline-block; color: #ffd700;
  animation: gp-turn-arrow 1s ease-in-out infinite;
}

/* Extra top padding on board area to make room for dice slots */
.ludo-board-area {
  padding-top: .3rem;
}

/* Roll button area */
#ludo-roll-btn:disabled {
  opacity: .45; cursor: not-allowed; transform: none !important;
}

/* Responsive: smaller panels on mobile */
@media (max-width: 400px) {
  .ludo-player-panel { min-width: 58px; padding: .35rem .3rem .4rem; }
  .ludo-panels-grid  { gap: .3rem; padding: .4rem .4rem .3rem; }
  .ludo-dice-slot    { top: -30px; width: 44px; height: 44px; }
  .ludo-floating-dice { width: 44px !important; height: 44px !important; }
  .ludo-panel-avatar { margin-top: 18px; }
}