@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   Paheli In Hindi — Warm & Bright UI
   Font: Mukta (supports Hindi + Latin)
   ============================================================ */

/* ── Global Mukta Font Override ── */
html,
body, h1, h2, h3, h4, h5, h6,
p, a, span, div, button, input,
textarea, select, label, li,
.navbar, .nav-link, .btn,
.form-control, .dropdown-item,
.card, .badge, .alert,
.accordion-button, .list-group-item {
  font-family: 'Mukta', sans-serif !important;
}

:root {
  --orange:      #f97316;
  --orange-dk:   #ea580c;
  --orange-lt:   #fff7ed;
  --yellow:      #fbbf24;
  --yellow-lt:   #fffbeb;
  --green:       #22c55e;
  --green-lt:    #f0fdf4;
  --blue:        #3b82f6;
  --blue-lt:     #eff6ff;
  --purple:      #8b5cf6;
  --purple-lt:   #f5f3ff;
  --red:         #ef4444;
  --red-lt:      #fef2f2;
  --teal:        #14b8a6;
  --teal-lt:     #f0fdfa;

  --bg:          #f8f7f4;
  --surface:     #ffffff;
  --border:      #e8e4de;
  --border-dark: #d4cfc7;

  --text-1:      #1c1917;
  --text-2:      #57534e;
  --text-3:      #a8a29e;

  --nav-bg:      #ffffff;
  --hero-bg:     linear-gradient(135deg, #fff5eb 0%, #fffbf7 40%, #f0f9ff 100%);

  --radius:      12px;
  --radius-lg:   20px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow:      0 4px 12px rgba(0,0,0,.1),  0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:   0 10px 30px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  --shadow-xl:   0 20px 50px rgba(0,0,0,.15);
  --tr:          all 0.22s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  font-size:19px;
}

body{
  font-family:'Mukta',sans-serif;
  background:var(--bg);
  color:var(--text-1);
  line-height:1.7;
  overflow-x:hidden;
}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#f1ede8}
::-webkit-scrollbar-thumb{background:var(--orange);border-radius:3px}

a{color:var(--orange-dk);text-decoration:none;transition:var(--tr)}
a:hover{color:var(--orange)}
h1,h2,h3,h4,h5,h6{line-height:1.3;color:var(--text-1);font-weight:700}

/* ═══════════════════════════════════
   NAVBAR
═══════════════════════════════════ */
#mainNav{
  background:var(--nav-bg) !important;
  border-bottom:2px solid var(--orange);
  box-shadow:0 2px 8px rgba(249,115,22,.12);
  padding:.65rem 0;
  position:sticky;top:0;z-index:1000;
}
.navbar-brand .site-name{
  font-weight:800;font-size:1.3rem;letter-spacing:-.5px;
  color:var(--orange-dk);
}
.logo-icon{font-size:1.6rem}

.navbar-nav .nav-link{
  color:var(--text-2)!important;font-size:.875rem;font-weight:600;
  border-radius:8px;padding:.45rem .85rem!important;transition:var(--tr);
}
.navbar-nav .nav-link:hover{color:var(--orange-dk)!important;background:var(--orange-lt)}

.dropdown-menu{
  background:var(--surface)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow-lg)!important;
  padding:.5rem;min-width:220px;
}
.dropdown-item{
  color:var(--text-2)!important;border-radius:8px;
  padding:.48rem .75rem;font-size:.875rem;transition:var(--tr);
}
.dropdown-item:hover{background:var(--orange-lt)!important;color:var(--orange-dk)!important}

/* Search */
.search-form{position:relative}
.search-form .form-control{
  background:var(--bg)!important;border:2px solid var(--border)!important;
  color:var(--text-1)!important;border-radius:50px 0 0 50px!important;font-size:.875rem;
}
.search-form .form-control:focus{border-color:var(--orange)!important;box-shadow:0 0 0 3px rgba(249,115,22,.12)!important;outline:none;background:var(--surface)!important}
.search-form .form-control::placeholder{color:var(--text-3)}
.search-form .btn{
  background:var(--orange)!important;border:none!important;
  border-radius:0 50px 50px 0!important;color:#fff!important;font-weight:700;
  padding:.5rem 1.1rem;transition:var(--tr);
}
.search-form .btn:hover{background:var(--orange-dk)!important;transform:scale(1.02)}

.autocomplete-dropdown{
  position:absolute;top:100%;left:0;right:40px;
  background:var(--surface);border:1px solid var(--border);border-radius:0 0 12px 12px;
  box-shadow:var(--shadow-lg);z-index:1050;max-height:280px;overflow-y:auto;
}
.autocomplete-dropdown a{display:block;padding:.55rem 1rem;color:var(--text-2);font-size:.875rem;border-bottom:1px solid var(--border);transition:var(--tr)}
.autocomplete-dropdown a:hover{background:var(--orange-lt);color:var(--orange-dk)}

/* ═══════════════════════════════════
   HERO
═══════════════════════════════════ */
.hero-section{
  background:var(--hero-bg);
  border-bottom:1px solid var(--border);
  padding:4.5rem 0 4rem;
  position:relative;overflow:hidden;
}
.hero-section::before{
  content:'';position:absolute;top:-80px;right:-80px;
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(249,115,22,.12) 0%,transparent 70%);
  border-radius:50%;
}
.hero-section::after{
  content:'';position:absolute;bottom:-60px;left:-60px;
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(59,130,246,.08) 0%,transparent 70%);
  border-radius:50%;
}

.hero-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--surface);border:2px solid var(--border);
  border-radius:50px;padding:.3rem .9rem;font-size:.78rem;font-weight:700;
  color:var(--orange-dk);margin-bottom:1.25rem;box-shadow:var(--shadow-sm);
}
.hero-badge .dot{width:7px;height:7px;background:var(--orange);border-radius:50%;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

.hero-title{
  font-size:clamp(2rem,5vw,3.5rem);font-weight:800;
  line-height:1.15;letter-spacing:-1px;color:var(--text-1);margin-bottom:1rem;
}
.hero-title .highlight{
  background:linear-gradient(135deg,var(--orange),#f59e0b);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-tagline{font-size:1.05rem;color:var(--text-2);margin-bottom:1.75rem;max-width:480px}

.hero-search{position:relative;max-width:520px;margin-bottom:1.5rem}
.hero-search input{
  width:100%;padding:.9rem 1.4rem;padding-right:120px;
  background:var(--surface);border:2px solid var(--border-dark);
  border-radius:50px;color:var(--text-1);font-size:.95rem;font-family:inherit;
  transition:var(--tr);box-shadow:var(--shadow-sm);
}
.hero-search input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(249,115,22,.12),var(--shadow)}
.hero-search input::placeholder{color:var(--text-3)}
.hero-search button{
  position:absolute;right:5px;top:5px;bottom:5px;
  padding:0 1.4rem;background:var(--orange);
  border:none;border-radius:50px;color:#fff;font-weight:700;font-size:.875rem;
  cursor:pointer;transition:var(--tr);font-family:inherit;
}
.hero-search button:hover{background:var(--orange-dk);box-shadow:0 4px 12px rgba(249,115,22,.4)}

.hero-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.hero-tag{
  padding:.3rem .8rem;border-radius:50px;font-size:.76rem;font-weight:600;
  background:var(--surface);border:1.5px solid var(--border-dark);color:var(--text-2);
  transition:var(--tr);display:inline-block;
}
.hero-tag:hover{background:var(--orange-lt);border-color:var(--orange);color:var(--orange-dk)}

.hero-stats{display:flex;gap:2rem;flex-wrap:wrap;margin-top:2rem;padding-top:1.75rem;border-top:1px solid var(--border)}
.hero-stat .num{font-size:1.65rem;font-weight:800;color:var(--orange-dk);line-height:1}
.hero-stat .lbl{font-size:.76rem;color:var(--text-3);margin-top:.15rem;text-transform:uppercase;letter-spacing:.6px;font-weight:600}

/* Today Card */
.today-card{
  background:var(--surface);border:2px solid var(--border-dark);
  border-radius:var(--radius-lg);padding:1.75rem;
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.today-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--orange),var(--yellow));
}
.today-label{
  font-size:.78rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--orange);margin-bottom:.85rem;display:flex;align-items:center;gap:.4rem;
}
.today-question{font-size:1.05rem;font-weight:600;color:var(--text-1);margin-bottom:1.25rem;line-height:1.6}
.btn-orange{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.65rem 1.4rem;background:var(--orange);
  border:none;border-radius:50px;color:#fff;font-weight:700;font-size:.875rem;
  transition:var(--tr);cursor:pointer;font-family:inherit;text-decoration:none;
}
.btn-orange:hover{color:#fff;background:var(--orange-dk);transform:translateY(-2px);box-shadow:0 6px 20px rgba(249,115,22,.35)}

/* ═══════════════════════════════════
   SECTIONS
═══════════════════════════════════ */
.section-title{
  font-size:1.5rem;font-weight:800;letter-spacing:-.3px;
  display:inline-flex;align-items:center;gap:.5rem;color:var(--text-1);
}
.section-sub{font-size:.85rem;color:var(--text-3);margin-top:.25rem}
.section-link{font-size:.82rem;font-weight:700;color:var(--orange);transition:var(--tr)}
.section-link:hover{color:var(--orange-dk)}
.section-divider{height:1px;background:var(--border);margin:2.5rem 0}

/* ═══════════════════════════════════
   CATEGORY CARDS
═══════════════════════════════════ */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:.85rem}

/* Each card gets a unique warm color pair */
.cat-card{
  background:var(--surface);border:2px solid var(--border);
  border-radius:var(--radius);padding:1.1rem .75rem;text-align:center;
  transition:var(--tr);display:block;text-decoration:none;
}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--card-color,var(--orange))}
.cat-card:hover .cat-icon{transform:scale(1.25) rotate(-8deg)}
.cat-icon{font-size:2rem;display:block;margin-bottom:.5rem;transition:var(--tr)}
.cat-name{font-size:.85rem;font-weight:700;color:var(--text-1);line-height:1.3;margin-bottom:.25rem}
.cat-count{font-size:.74rem;color:var(--card-color,var(--orange));font-weight:700}

/* Color variants per category */
.cat-card:nth-child(1){--card-color:#f97316}
.cat-card:nth-child(2){--card-color:#22c55e}
.cat-card:nth-child(3){--card-color:#f59e0b}
.cat-card:nth-child(4){--card-color:#3b82f6}
.cat-card:nth-child(5){--card-color:#ef4444}
.cat-card:nth-child(6){--card-color:#8b5cf6}
.cat-card:nth-child(7){--card-color:#06b6d4}
.cat-card:nth-child(8){--card-color:#ec4899}
.cat-card:nth-child(9){--card-color:#14b8a6}
.cat-card:nth-child(10){--card-color:#f97316}
.cat-card:nth-child(11){--card-color:#6366f1}
.cat-card:nth-child(12){--card-color:#d97706}
.cat-card:hover {
  background: color-mix(in srgb, var(--card-color, var(--orange)) 10%, var(--surface)) !important;
}

/* ═══════════════════════════════════
   PAHELI CARDS
═══════════════════════════════════ */
.paheli-card{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius);padding:1.35rem;transition:var(--tr);
  display:flex;flex-direction:column;height:100%;box-shadow:var(--shadow-sm);
}
.paheli-card:hover{border-color:var(--border-dark);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.paheli-card-title a{
  color:var(--text-1);font-size:1.15rem;font-weight:700;
  display:block;margin-bottom:.5rem;transition:var(--tr);line-height:1.45;
}
.paheli-card:hover .paheli-card-title a{color:var(--orange-dk)}
.paheli-card-text{color:var(--text-2);font-size:.95rem;flex-grow:1;line-height:1.6}
.paheli-card-footer{
  display:flex;align-items:center;gap:.65rem;margin-top:.85rem;
  padding-top:.75rem;border-top:1px solid var(--border);
  font-size:.82rem;color:var(--text-3);font-weight:500;
}

/* Badges */
.badge-cat{
  font-size:.75rem;font-weight:700;padding:.22rem .65rem;border-radius:50px;
  background:var(--orange-lt);color:var(--orange-dk);border:1px solid #fed7aa;display:inline-block;
}
.badge-diff{font-size:.75rem;font-weight:700;padding:.22rem .65rem;border-radius:50px;display:inline-block}
.diff-easy    {background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
.diff-medium  {background:#fffbeb;color:#b45309;border:1px solid #fde68a}
.diff-hard    {background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.diff-very_hard{background:#f5f3ff;color:#6d28d9;border:1px solid #ddd6fe}

/* ═══════════════════════════════════
   SIDEBAR WIDGETS
═══════════════════════════════════ */
.widget{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:1.25rem;box-shadow:var(--shadow-sm)}
.widget-hd{
  padding:.8rem 1.1rem;font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:.8px;
  background:var(--orange-lt);border-bottom:1.5px solid var(--border);
  color:var(--orange-dk);display:flex;align-items:center;gap:.4rem;
}
.widget-item{
  display:flex;align-items:center;gap:.65rem;
  padding:.58rem 1.1rem;border-bottom:1px solid var(--border);
  color:var(--text-2);font-size:.9rem;transition:var(--tr);text-decoration:none;
}
.widget-item:hover{background:var(--orange-lt);color:var(--orange-dk);padding-left:1.35rem}
.widget-item .rk{
  width:22px;height:22px;border-radius:50%;
  background:var(--orange-lt);font-size:.76rem;font-weight:800;
  color:var(--orange-dk);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.widget-item .vw{margin-left:auto;font-size:.78rem;color:var(--text-3);white-space:nowrap}

.tag-cloud{padding:.85rem 1.1rem;display:flex;flex-wrap:wrap;gap:.4rem}
.tag-pill{
  padding:.28rem .72rem;border-radius:50px;font-size:.82rem;font-weight:600;
  background:var(--bg);border:1.5px solid var(--border);
  color:var(--text-2);transition:var(--tr);display:inline-block;
}
.tag-pill:hover{background:var(--orange-lt);border-color:var(--orange);color:var(--orange-dk);transform:scale(1.05)}

.quick-links{padding:.75rem 1.1rem;display:flex;flex-direction:column;gap:.25rem}
.quick-link{
  display:flex;align-items:center;gap:.5rem;padding:.42rem .6rem;
  border-radius:8px;font-size:.9rem;color:var(--text-2);transition:var(--tr);
}
.quick-link:hover{background:var(--orange-lt);color:var(--orange-dk);padding-left:.85rem}
.quick-link::before{content:'→';color:var(--orange);font-weight:700;font-size:.9rem}

/* ═══════════════════════════════════
   FAQ
═══════════════════════════════════ */
.faq-item{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius);margin-bottom:.6rem;overflow:hidden;transition:var(--tr);box-shadow:var(--shadow-sm);
}
.faq-item:hover{border-color:var(--border-dark);box-shadow:var(--shadow)}
.faq-btn{
  width:100%;text-align:left;background:none;border:none;
  padding:.95rem 1.35rem;color:var(--text-1);font-weight:700;font-size:1rem;
  display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:inherit;transition:var(--tr);
}
.faq-btn:hover{color:var(--orange-dk)}
.faq-icon{
  width:26px;height:26px;border-radius:50%;background:var(--orange-lt);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:.85rem;color:var(--orange);font-weight:700;transition:var(--tr);
}
.faq-btn[aria-expanded="true"] .faq-icon{background:var(--orange);color:#fff;transform:rotate(45deg)}
.faq-body{padding:0 1.35rem 1rem;color:var(--text-2);font-size:.98rem;line-height:1.7}

/* ═══════════════════════════════════
   FOOTER
═══════════════════════════════════ */
footer{
  background:#fff;border-top:2px solid var(--orange);
  padding:3.5rem 0 1.5rem;
}
.footer-brand{font-size:1.25rem;font-weight:800;color:var(--orange-dk)}
.footer-sub{color:var(--text-3);font-size:.92rem;margin-top:.35rem}
.footer-heading{color:var(--text-2);font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:.85rem}
.footer-link{display:block;color:var(--text-3);font-size:.92rem;padding:.18rem 0;transition:var(--tr)}
.footer-link:hover{color:var(--orange-dk);padding-left:.35rem}
.footer-bottom{border-top:1px solid var(--border);margin-top:2rem;padding-top:1.25rem;font-size:.88rem;color:var(--text-3)}

.social-btn{
  width:34px;height:34px;border-radius:50%;
  background:var(--orange-lt);border:1.5px solid #fed7aa;
  color:var(--orange-dk);display:inline-flex;align-items:center;justify-content:center;font-size:.875rem;transition:var(--tr);
}
.social-btn:hover{background:var(--orange);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(249,115,22,.3)}

/* ═══════════════════════════════════
   MISC
═══════════════════════════════════ */
.alert{border-radius:var(--radius)!important}
.alert-success{background:#f0fdf4!important;border-color:#bbf7d0!important;color:#15803d!important}
.alert-danger {background:#fef2f2!important;border-color:#fecaca!important;color:#dc2626!important}
.alert-warning{background:#fffbeb!important;border-color:#fde68a!important;color:#b45309!important}

.breadcrumb-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:.55rem 0}
.breadcrumb{margin:0;background:none}
.breadcrumb-item a{color:var(--text-3);font-size:.9rem}
.breadcrumb-item a:hover{color:var(--orange)}
.breadcrumb-item.active{color:var(--text-2);font-size:.9rem}
.breadcrumb-item+.breadcrumb-item::before{color:var(--text-3)}

.pagination{gap:.2rem}
.page-link{background:var(--surface)!important;border:1.5px solid var(--border)!important;color:var(--text-2)!important;border-radius:8px!important;transition:var(--tr);font-weight:600}
.page-link:hover{background:var(--orange-lt)!important;color:var(--orange-dk)!important;border-color:var(--orange)!important}
.page-item.active .page-link{background:var(--orange)!important;border-color:var(--orange)!important;color:#fff!important}

#backToTop{
  width:42px;height:42px;border-radius:50%;background:var(--orange);
  border:none;color:#fff;position:fixed;bottom:1.75rem;right:1.75rem;z-index:999;
  display:none;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 4px 16px rgba(249,115,22,.4);transition:var(--tr);
}
#backToTop.visible{display:flex!important}
#backToTop:hover{background:var(--orange-dk);transform:translateY(-3px);box-shadow:0 8px 24px rgba(249,115,22,.5)}

.ad-zone{background:var(--surface);border:1.5px dashed var(--border-dark);min-height:90px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius)}
.ad-mobile-sticky{position:fixed;bottom:0;left:0;right:0;z-index:900;background:var(--surface);border-top:1px solid var(--border);text-align:center;padding:4px 0}

img.lazy{opacity:0;transition:opacity .3s}
img.lazy.loaded{opacity:1}

/* ═══════════════════════════════════
   RESPONSIVE
═══════════════════════════════════ */
@media(max-width:991px){
  .hero-section{padding:3.5rem 0 3rem}
  .cat-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
}
@media(max-width:767px){
  .hero-title{font-size:2rem}
  .hero-tagline{font-size:.95rem}
  .hero-stats{gap:1.25rem;padding-top:1.25rem}
  .hero-stat .num{font-size:1.4rem}
  .section-title{font-size:1.3rem}
  .cat-grid{grid-template-columns:repeat(4,1fr);gap:.55rem}
  .cat-card{padding:.9rem .5rem}
  .cat-icon{font-size:1.6rem}
}
@media(max-width:480px){
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .hero-stats{gap:.85rem}
}
@media print{
  body{background:#fff}
  #mainNav,footer,.ad-zone,#backToTop{display:none!important}
}

/* ============================================================
   Brain Games Hub Homepage Card (Premium)
   ============================================================ */
.games-hub-card {
  background: var(--surface) !important;
  border: 2px solid var(--border-dark) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow) !important;
}

.games-hub-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #22c55e, #8b5cf6, #f97316, #3b82f6);
}

.game-btn-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none !important;
  transition: var(--tr);
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Specific theme highlights for each game on hover */
.game-btn-card.game-hangman:hover {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.04);
}
.game-btn-card.game-quiz:hover {
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.04);
}
.game-btn-card.game-wordsearch:hover {
  border-color: #f97316;
  background: rgba(249, 115, 22, 0.04);
}
.game-btn-card.game-memory:hover {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.04);
}

.game-btn-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.game-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  transition: var(--tr);
}

.game-btn-card:hover .game-icon-wrap {
  transform: scale(1.1) rotate(6deg);
}

.game-main-info {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-grow: 1;
}

.game-info {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.game-title {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-1);
  transition: var(--tr);
}

.game-btn-card.game-hangman:hover .game-title { color: #22c55e; }
.game-btn-card.game-quiz:hover .game-title { color: #8b5cf6; }
.game-btn-card.game-wordsearch:hover .game-title { color: #f97316; }
.game-btn-card.game-memory:hover .game-title { color: #3b82f6; }

.game-desc {
  font-size: 0.8rem;
  color: var(--text-3);
  font-weight: 500;
}

.game-play-badge {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.25rem 0.6rem;
  border-radius: 50px;
  background: var(--border-dark);
  color: var(--text-2);
  transition: var(--tr);
  white-space: nowrap;
}

.game-hangman:hover .game-play-badge { background: #22c55e; color: #fff; }
.game-quiz:hover .game-play-badge { background: #8b5cf6; color: #fff; }
.game-wordsearch:hover .game-play-badge { background: #f97316; color: #fff; }
.game-memory:hover .game-play-badge { background: #3b82f6; color: #fff; }

/* ═══════════════════════════════════
   PREMIUM CUSTOM INTERFACES
   ═══════════════════════════════════ */

/* Gradient text */
.grad-text {
  background: linear-gradient(135deg, var(--orange), var(--yellow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* Premium Card */
.premium-card {
  background: var(--surface) !important;
  border: 2px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow) !important;
  position: relative;
  overflow: hidden;
  transition: var(--tr);
}
.premium-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--orange), var(--yellow));
}
.premium-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--border-dark) !important;
}

/* Navbar Login Button */
.nav-login-btn {
  background: var(--orange) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 50px;
  padding: .4rem 1.25rem !important;
  transition: var(--tr);
  display: inline-block;
  text-decoration: none;
}
.nav-login-btn:hover {
  background: var(--orange-dk) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
}

/* Theme Toggle Button */
.theme-toggle-btn {
  background: var(--orange-lt);
  border: 1.5px solid var(--border-dark);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--tr);
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle-btn:hover {
  background: var(--orange);
  border-color: var(--orange);
  transform: scale(1.08) rotate(15deg);
}

/* Outline Orange Button */
.btn-outline-orange {
  color: var(--orange-dk) !important;
  border: 2px solid var(--orange) !important;
  background: transparent !important;
  border-radius: 50px;
  font-weight: 700;
  padding: .5rem 1.25rem;
  transition: var(--tr);
}
.btn-outline-orange:hover {
  background: var(--orange-lt) !important;
  border-color: var(--orange-dk) !important;
  color: var(--orange-dk) !important;
  transform: translateY(-1px);
}

/* Navbar toggler hover and transition */
.navbar-toggler {
  transition: var(--tr) !important;
}
.navbar-toggler:hover {
  color: var(--orange-dk) !important;
  transform: scale(1.05);
}