/* QuizVortex Games CSS — Mobile-First v19 */

/* ── Base ── */
*,*::before,*::after{box-sizing:border-box}
.game-page{margin-top:var(--nav-h);min-height:calc(100vh - var(--nav-h));display:flex;flex-direction:column;overflow-x:hidden}

/* ── Hero ── */
.g-hero{position:relative;overflow:hidden;text-align:center;padding:4rem 1rem 2.5rem;color:#fff}
.g-hero::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.04'%3E%3Cpath d='M20 20h4v4h-4zM0 0h4v4H0z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none}
.g-hero-inner{position:relative;z-index:1;max-width:640px;margin:0 auto}
.g-hero-icon{font-size:clamp(2.5rem,8vw,4rem);margin-bottom:.6rem;display:block;filter:drop-shadow(0 3px 10px rgba(0,0,0,.25))}
.g-hero h1{font-size:clamp(1.6rem,5vw,2.8rem);margin-bottom:.4rem;text-shadow:0 2px 6px rgba(0,0,0,.2);word-break:break-word}
.g-hero p{opacity:.9;font-size:clamp(.85rem,2.5vw,1rem);max-width:480px;margin:0 auto}
.g-badge{display:inline-block;background:rgba(255,255,255,.2);border-radius:50px;padding:.25rem .85rem;font-size:.75rem;font-weight:600;margin-bottom:.65rem;backdrop-filter:blur(4px)}
.g-hero-pills{display:flex;justify-content:center;gap:.4rem;margin-top:.75rem;flex-wrap:wrap}
.g-pill{background:rgba(255,255,255,.15);border-radius:50px;padding:.2rem .75rem;font-size:.75rem;font-weight:600}

/* ── Game Container ── */
.g-container{flex:1;display:flex;flex-direction:column;max-width:660px;margin:0 auto;width:100%;padding:1rem .85rem 2rem}

/* ── Start Card ── */
.g-start{background:var(--bg-card);border-radius:var(--radius-lg);padding:1.5rem 1.25rem;box-shadow:var(--shadow-lg);border:1px solid var(--border)}
.g-start-icon{font-size:2.8rem;text-align:center;margin-bottom:.85rem;display:block}
.g-start h2{text-align:center;margin-bottom:.35rem;font-size:1.2rem}
.g-start-desc{text-align:center;color:var(--text-muted);margin-bottom:1.25rem;font-size:.875rem;line-height:1.55}
.g-start-btn{width:100%;padding:.9rem;font-size:.95rem;font-weight:700;border:none;border-radius:var(--radius-sm);color:#fff;cursor:pointer;transition:all .2s;margin-top:.85rem;min-height:48px}

/* ── Options ── */
.g-opts{display:grid;gap:.6rem;margin-bottom:.85rem}
.g-opts-2{grid-template-columns:1fr 1fr}
.g-opt{background:var(--bg-alt);border:2px solid var(--border);border-radius:var(--radius-sm);padding:.8rem .95rem;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .15s;text-align:left;display:flex;align-items:center;gap:.55rem;min-height:48px;word-break:break-word;overflow-wrap:break-word}
.g-opt:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.g-opt.correct{border-color:#059669!important;background:linear-gradient(135deg,#d1fae5,#a7f3d0)!important;color:#065f46!important}
.g-opt.wrong{border-color:#dc2626!important;background:linear-gradient(135deg,#fee2e2,#fecaca)!important;color:#991b1b!important}
.g-opt:disabled{cursor:not-allowed;transform:none}
.g-opt-letter{width:26px;height:26px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:700;flex-shrink:0}
.g-opt.correct .g-opt-letter{background:#059669;color:#fff}
.g-opt.wrong .g-opt-letter{background:#dc2626;color:#fff}

/* ── Feedback ── */
.g-feedback{padding:.85rem 1rem;border-radius:var(--radius-sm);font-weight:600;display:none;line-height:1.55;margin-bottom:.65rem;font-size:.875rem;word-break:break-word}
.g-feedback.correct{background:#d1fae5;color:#065f46;border-left:3px solid #059669}
.g-feedback.wrong{background:#fee2e2;color:#991b1b;border-left:3px solid #dc2626}
.g-feedback .fb-exp{font-weight:400;font-size:.82rem;margin-top:.3rem;opacity:.9}

/* ── Top bar ── */
.g-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:.85rem;gap:.4rem;flex-wrap:wrap}
.g-pill-stat{background:var(--bg-card);border:1px solid var(--border);border-radius:50px;padding:.3rem .8rem;font-size:.78rem;font-weight:700;display:flex;align-items:center;gap:.3rem;box-shadow:var(--shadow-sm)}
.g-progress{height:5px;background:var(--bg-alt);border-radius:50px;margin-bottom:1rem;overflow:hidden}
.g-progress-fill{height:100%;border-radius:50px;transition:width .4s ease}
.g-timer-bar{height:4px;background:var(--bg-alt);border-radius:50px;margin-bottom:1rem;overflow:hidden}
.g-timer-fill{height:100%;border-radius:50px;transition:width 1s linear}
.g-timer-fill.warn{background:linear-gradient(90deg,#f97316,#dc2626)!important}

/* ── Question Card ── */
.g-qcard{background:var(--bg-card);border-radius:var(--radius-lg);padding:1.25rem 1.1rem 1rem;box-shadow:var(--shadow);border:2px solid var(--border);margin-bottom:.85rem;transition:border-color .3s;word-break:break-word;overflow-wrap:break-word}
.g-qcard.correct-border{border-color:#059669}
.g-qcard.wrong-border{border-color:#dc2626}
.g-qnum{font-size:.68rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.4rem}
.g-qtag{display:inline-block;border-radius:50px;padding:.15rem .6rem;font-size:.7rem;font-weight:600;margin-bottom:.5rem}
.g-qtext{font-size:clamp(.9rem,2.5vw,1.1rem);font-weight:700;line-height:1.5;color:var(--text)}
.g-qemoji{font-size:clamp(2rem,8vw,3.5rem);text-align:center;margin:.65rem 0;display:block}

/* ── Next Button ── */
.g-next{width:100%;padding:.8rem;font-size:.9rem;font-weight:700;border:none;border-radius:var(--radius-sm);color:#fff;cursor:pointer;transition:all .2s;display:none;background:var(--primary);min-height:48px}

/* ── Result ── */
.g-result{display:none;background:var(--bg-card);border-radius:var(--radius-lg);padding:1.5rem 1.25rem;box-shadow:var(--shadow-lg);text-align:center;border:1px solid var(--border)}
.g-result-icon{font-size:3rem;margin-bottom:.65rem}
.g-result-score{font-size:2.5rem;font-weight:900;margin:.4rem 0}
.g-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1rem 0}
.g-result-box{background:var(--bg-alt);border-radius:var(--radius-sm);padding:.75rem .4rem}
.g-result-num{font-size:1.3rem;font-weight:800;color:var(--primary)}
.g-result-lbl{font-size:.68rem;color:var(--text-muted);margin-top:.1rem}
.g-share-btn{border:none;border-radius:var(--radius-sm);padding:.8rem 1.5rem;font-size:.9rem;font-weight:700;color:#fff;cursor:pointer;margin:.3rem;transition:all .15s;display:block;width:100%}
.g-replay-btn{background:var(--bg-alt);border:2px solid var(--border);border-radius:var(--radius-sm);padding:.8rem 1.25rem;font-size:.9rem;font-weight:600;cursor:pointer;margin:.3rem;display:block;width:100%;transition:all .15s}

/* ── SEO Article ── */
.g-article{max-width:700px;margin:2rem auto 0;padding:0 .85rem 4rem;word-break:break-word;overflow-wrap:break-word}
.g-article h2{font-size:1.15rem;margin:1.75rem 0 .6rem;color:var(--text)}
.g-article h3{font-size:1rem;margin:1.25rem 0 .45rem;color:var(--text)}
.g-article p{margin-bottom:.9rem;color:var(--text-secondary);line-height:1.75;font-size:.9rem}
.g-tips{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem;margin:1.25rem 0}
.g-tip{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.9rem;box-shadow:var(--shadow-sm)}
.g-tip-icon{font-size:1.4rem;margin-bottom:.35rem}
.g-tip-title{font-weight:700;font-size:.85rem;margin-bottom:.2rem}
.g-tip-desc{font-size:.78rem;color:var(--text-muted);line-height:1.5}

/* ── FAQ ── */
.g-faq-item,.faq-item{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:.5rem;overflow:hidden}
.g-faq-q,.faq-q{padding:.85rem 1rem;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .15s;font-size:.875rem;gap:.5rem}
.g-faq-q:hover,.faq-q:hover{background:var(--bg-alt)}
.g-faq-a,.faq-a{padding:0 1rem .85rem;color:var(--text-secondary);display:none;line-height:1.7;font-size:.85rem}
.g-faq-item.open .g-faq-a,.faq-item.open .faq-a{display:block}
.g-faq-arrow,.faq-arrow{transition:transform .2s;font-size:.7rem;flex-shrink:0}
.g-faq-item.open .g-faq-arrow,.faq-item.open .faq-arrow{transform:rotate(180deg)}

/* ── Category Selector ── */
.g-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.55rem;margin:1rem 0}
.g-cat{background:var(--bg-alt);border:2px solid var(--border);border-radius:var(--radius-sm);padding:.75rem .5rem;cursor:pointer;transition:all .15s;text-align:center}
.g-cat:hover,.g-cat.active{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.g-cat-icon{font-size:1.4rem;margin-bottom:.25rem}
.g-cat-name{font-size:.72rem;font-weight:600}
.g-diff{display:flex;gap:.4rem;justify-content:center;margin:.65rem 0;flex-wrap:wrap}
.g-diff-btn{padding:.35rem .85rem;border-radius:50px;border:2px solid var(--border);background:var(--bg-alt);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s}

/* ── VS Cards ── */
.g-vs-wrap{position:relative;margin-bottom:.85rem;overflow:hidden}
.g-vs-cards{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.g-vs-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;z-index:2;box-shadow:var(--shadow)}
.g-vs-card{background:var(--bg-card);border:3px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem .85rem;text-align:center;cursor:pointer;transition:all .2s;box-shadow:var(--shadow-sm);word-break:break-word}
.g-vs-card:hover:not(.disabled){transform:translateY(-3px);box-shadow:var(--shadow)}
.g-vs-card.correct{border-color:#059669;background:#d1fae5}
.g-vs-card.wrong{border-color:#dc2626;background:#fee2e2}
.g-vs-card.disabled{cursor:not-allowed;transform:none}
.g-vs-emoji{font-size:clamp(1.8rem,5vw,2.5rem);margin-bottom:.5rem}
.g-vs-name{font-weight:700;font-size:clamp(.8rem,2vw,.95rem);line-height:1.3}
.g-vs-value{font-size:.78rem;color:var(--text-muted);margin-top:.35rem;display:none;font-weight:700}
.g-vs-card.correct .g-vs-value{display:block;color:#059669}
.g-vs-card.wrong .g-vs-value{display:block;color:#dc2626}

/* ── Sudoku ── */
.g-sudoku-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:1px;background:#444;border:2.5px solid #444;border-radius:6px;overflow:hidden;user-select:none;touch-action:manipulation;width:100%;max-width:360px;margin:0 auto}
.g-sudoku-cell{aspect-ratio:1;background:var(--bg-card);display:flex;align-items:center;justify-content:center;font-size:clamp(.7rem,3vw,1.2rem);font-weight:700;cursor:pointer;transition:background .1s;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.g-sudoku-cell:nth-child(3n):not(:nth-child(9n)){border-right:2px solid #666}
.g-sudoku-cell:nth-child(n+19):nth-child(-n+27),.g-sudoku-cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid #666}
.g-sudoku-cell.given{background:var(--bg-alt);color:var(--text);font-weight:800}
.g-sudoku-cell.selected{background:rgba(91,94,244,.2)!important}
.g-sudoku-cell.highlight{background:rgba(91,94,244,.07)}
.g-sudoku-cell.error{color:#dc2626!important;background:#fee2e2!important}
[data-theme="dark"] .g-sudoku-cell{background:#1a1a2e;border-color:#2a2a48}
[data-theme="dark"] .g-sudoku-cell.given{background:#0f0f20}
[data-theme="dark"] .g-sudoku-grid{background:#555;border-color:#555}
.g-numpad{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;margin:.65rem 0}
.g-numkey{padding:.65rem .4rem;border-radius:var(--radius-sm);border:2px solid var(--border);background:var(--bg-alt);font-size:.95rem;font-weight:700;cursor:pointer;transition:all .15s;text-align:center;touch-action:manipulation;min-height:48px}
.g-numkey:hover{border-color:var(--primary);background:rgba(91,94,244,.08)}
.g-numkey.erase{background:rgba(220,38,38,.07);border-color:rgba(220,38,38,.3);color:#dc2626}
.g-sudoku-actions{display:flex;gap:.5rem;margin-top:.5rem}
.g-sudoku-btn{flex:1;padding:.65rem .4rem;border-radius:var(--radius-sm);border:2px solid var(--border);background:var(--bg-alt);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s;min-height:44px}
.g-sudoku-btn.primary{background:#059669;color:#fff;border-color:#059669}

/* ── Touch: no hover flicker ── */
@media (hover:none) and (pointer:coarse){
  .g-opt:hover,.g-vs-card:hover,.g-start-btn:hover,.g-next:hover{transform:none!important;box-shadow:none!important}
  .g-opt,.g-vs-card,.g-start-btn,.g-next,.g-numkey,.g-sudoku-btn,.g-share-btn,.g-replay-btn{-webkit-tap-highlight-color:transparent}
}

/* ── Tablet tweaks ── */
@media (min-width:601px) and (max-width:900px){
  .g-container{padding:1.25rem 1.25rem 2.5rem}
  .g-start{padding:1.75rem}
  .g-qcard{padding:1.5rem 1.25rem}
}

/* ── Desktop ── */
@media (min-width:901px){
  .g-hero{padding:3rem 1.25rem 2.5rem}
  .g-container{padding:1.5rem 1.25rem 3rem}
  .g-start{padding:2rem 1.75rem}
  .g-qcard{padding:1.5rem 1.5rem 1.25rem}
  .g-result{padding:2rem 1.75rem}
  .g-share-btn,.g-replay-btn{display:inline-block;width:auto}
  .g-article{padding:0 1.25rem 5rem}
  .g-article h2{font-size:1.45rem}
  .g-article p{font-size:.93rem}
}