/* =============================================================
   InGenius — Arcade Premium Theme
   Dark background · Neon accents · Bebas Neue display type
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');

/* ---- Variables ---- */
:root {
    --neon-pink:   #ff2d78;
    --neon-blue:   #00d4ff;
    --neon-yellow: #ffe029;
    --neon-green:  #00ff9d;
    --deep:        #0a0514;
    --deep2:       #110920;
    --deep3:       #1a0f2e;
    --card-bg:     rgba(255,255,255,0.04);
    --card-border: rgba(255,255,255,0.1);
    --text:        #f0eaff;
    --muted:       rgba(240,234,255,0.55);
    --display:     'Bebas Neue', sans-serif;
    --body:        'DM Sans', 'Segoe UI', sans-serif;

    /* Legacy compat vars used by old PHP */
    --primary-color:       #46178f;
    --secondary-color:     #5b21b6;
    --accent-color:        #7c3aed;
    --secondary-color-e21: #e21b3c;
    --accent-gold:         #ffe029;
    --success-color:       #00ff9d;
    --danger-color:        #ff2d78;
    --warning-color:       #ffe029;
    --info-color:          #00d4ff;
    --light-bg:            #1a0f2e;
    --dark-text:           #f0eaff;
    --white:               #ffffff;
    --border-color:        rgba(255,255,255,0.12);
    --answer-red:    #e21b3c;
    --answer-blue:   #1368ce;
    --answer-yellow: #ffa602;
    --answer-green:  #26890d;
}

/* ---- Reset ---- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

/* ---- Base ---- */
body {
    font-family: var(--body);
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--text);
    background: var(--deep);
    cursor: default;
}

/* Scanline overlay */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: 9999;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 3px,
        rgba(0,0,0,0.055) 3px, rgba(0,0,0,0.055) 4px
    );
}

/* Animated grid background on body */
body::after {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(0,212,255,0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,212,255,0.055) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridDrift 22s linear infinite;
}
@keyframes gridDrift { from{transform:translateY(0)} to{transform:translateY(60px)} }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--deep2); }
::-webkit-scrollbar-thumb { background: var(--neon-pink); border-radius: 3px; }

/* =====================================================================
   NAVBAR (keeps class names navbar / navbar-content / logo / nav-links
   / hamburger / nav-overlay so navbar.php works unchanged)
   ===================================================================== */
.navbar {
    position: fixed; top:0; left:0; right:0; z-index: 1000;
    background: rgba(10,5,20,0.88);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,45,120,0.22);
    transition: all 0.3s ease;
}
.navbar.scrolled {
    background: rgba(10,5,20,0.97);
    border-bottom-color: rgba(255,45,120,0.45);
    box-shadow: 0 4px 40px rgba(255,45,120,0.14);
}
.navbar-content {
    max-width: 1200px; margin:0 auto;
    padding: 0.9rem 2rem;
    display: flex; justify-content: space-between; align-items: center;
}
.logo {
    font-family: var(--display);
    font-size: 2rem; letter-spacing: 0.05em;
    color: white; text-decoration: none;
    position: relative; z-index: 1001;
    transition: all 0.3s ease; line-height: 1;
}
.logo span {
    color: var(--neon-yellow);
    text-shadow: 0 0 20px rgba(255,224,41,0.55);
    -webkit-text-fill-color: var(--neon-yellow);
    background: none;
}
.logo:hover { transform: scale(1.05); filter: drop-shadow(0 0 10px rgba(255,224,41,0.5)); }

.nav-links { display:flex; list-style:none; gap:0.25rem; margin:0; padding:0; align-items:center; }
.nav-links li a {
    color: rgba(240,234,255,0.72); text-decoration: none;
    font-weight: 500; font-size: 0.9rem;
    padding: 0.45rem 0.9rem; border-radius: 8px;
    transition: all 0.2s ease; position: relative; display: inline-block;
}
.nav-links li a::after { display: none; }
.nav-links li a:hover { color: white; background: rgba(255,255,255,0.08); transform: none; }

/* Last nav link (logout/register) gets neon pill treatment */
.nav-links li:last-child a {
    background: var(--neon-pink); color: white;
    font-weight: 700; border-radius: 8px;
    box-shadow: 0 0 18px rgba(255,45,120,0.4);
}
.nav-links li:last-child a:hover {
    filter: brightness(1.1); box-shadow: 0 0 28px rgba(255,45,120,0.65);
    transform: translateY(-1px);
}

/* Hamburger */
.hamburger { display:none; flex-direction:column; cursor:pointer; padding:0.5rem; z-index:1002; position:relative; }
.hamburger span { width:26px; height:2px; background:var(--neon-yellow); margin:3px 0; transition:all 0.3s ease; border-radius:2px; }
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(6px,6px); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(6px,-6px); }

.nav-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:999; opacity:0; transition:opacity 0.3s ease; }
.nav-overlay.active { display:block; opacity:1; }

@media (max-width: 768px) {
    .navbar-content { padding: 0.9rem 1.25rem; }
    .hamburger { display: flex; }
    .nav-links {
        display: none;
        position: fixed; top:0; right:-100%; height:100vh; width:280px; max-width:85vw;
        background: linear-gradient(160deg, var(--deep2), var(--deep3));
        border-left: 1px solid rgba(255,45,120,0.25);
        flex-direction: column; padding: 5rem 1.75rem 2rem; gap:0.5rem;
        transition: right 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);
        box-shadow: -5px 0 40px rgba(0,0,0,0.5); align-items:flex-start;
        overflow-y: auto; z-index: 1000;
    }
    .nav-links.active { display:flex; right:0; }
    .nav-links li { width:100%; }
    .nav-links li a { display:block; width:100%; padding:0.9rem 1rem; font-size:1rem; border:1px solid transparent; color:rgba(240,234,255,0.8); }
    .nav-links li a:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,45,120,0.3); color:white; transform:none; }
    .nav-links li:last-child a { text-align:center; margin-top:0.5rem; }
}

/* =====================================================================
   LAYOUT
   ===================================================================== */
.container {
    max-width: 1200px; margin: 0 auto;
    padding: 2rem 1.5rem;
    padding-top: calc(72px + 2rem);
    position: relative; z-index: 1;
}
.grid { display:grid; gap:1.25rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.mt-2{margin-top:1rem;} .mt-3{margin-top:1.5rem;} .mt-4{margin-top:2rem;}
.mb-2{margin-bottom:1rem;}
.text-center { text-align:center; }
.hidden { display:none !important; }
.white { color:white; }
.gold  { color:var(--neon-yellow); }
@media (min-width:769px) { .on-mobile { display:none !important; } }
@media (max-width:768px) { .hide-mobile { display:none !important; } }

/* =====================================================================
   CARDS
   ===================================================================== */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px; padding: 2rem;
    position: relative; overflow: hidden;
    backdrop-filter: blur(10px);
}
.card::before {
    content: '';
    position: absolute; top:0; left:0; right:0; height:2px;
    background: linear-gradient(90deg, var(--neon-pink), var(--neon-yellow), var(--neon-blue));
}
.card-header {
    font-family: var(--display);
    font-size: 1.5rem; letter-spacing: 0.04em;
    color: white; margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; gap: 0.5rem;
}
.card-header i { color: var(--neon-yellow); }

/* Game cards on dashboard */
.game-card {
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: 14px; overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.game-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
    border-color: rgba(255,45,120,0.35);
}
.game-card-banner {
    height: 4px;
    background: linear-gradient(90deg, var(--neon-pink), var(--neon-yellow), var(--neon-blue));
}
.game-card-body { padding: 1.25rem 1.5rem 1.5rem; }
.game-card-title { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 0.4rem; }
.game-card-description { font-size: 0.88rem; color: var(--muted); margin-bottom: 0.75rem; line-height: 1.4; }
.game-card-meta { display:flex; gap:0.65rem; margin-bottom:1rem; flex-wrap:wrap; }
.game-card-meta span {
    background: rgba(255,224,41,0.1); color: var(--neon-yellow);
    border: 1px solid rgba(255,224,41,0.25);
    padding: 2px 10px; border-radius: 99px; font-weight: 600; font-size: 0.78rem;
}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1.5rem; border-radius: 10px;
    font-size: 0.95rem; font-weight: 700;
    cursor: pointer; border: none; text-decoration: none;
    transition: all 0.15s ease; white-space: nowrap;
    font-family: var(--body); position: relative; top: 0;
}
.btn-primary {
    background: var(--neon-pink); color: white;
    box-shadow: 0 4px 0 #8b004e, 0 6px 20px rgba(255,45,120,0.35);
}
.btn-primary:hover {
    top: -2px;
    box-shadow: 0 6px 0 #8b004e, 0 10px 28px rgba(255,45,120,0.5);
    filter: brightness(1.08);
}
.btn-primary:active { top: 3px; box-shadow: 0 1px 0 #8b004e; }

.btn-secondary {
    background: transparent; color: var(--neon-blue);
    border: 2px solid var(--neon-blue);
    box-shadow: none;
}
.btn-secondary:hover {
    background: var(--neon-blue); color: var(--deep);
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(0,212,255,0.4);
}
.btn-danger {
    background: var(--neon-pink); color: white;
    box-shadow: 0 4px 0 #8b004e;
}
.btn-danger:hover { filter: brightness(1.1); top: -1px; }
.btn-large { padding: 1rem 2rem; font-size: 1.1rem; border-radius: 12px; }
.btn:disabled { opacity:0.4; cursor:not-allowed; transform:none !important; box-shadow:none !important; top:0 !important; }

/* =====================================================================
   FORMS
   ===================================================================== */
.form-group { margin-bottom: 1.25rem; }
.form-group label {
    display: block; margin-bottom: 0.4rem;
    font-weight: 600; color: var(--muted); font-size: 0.88rem;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.form-group label i { color: var(--neon-yellow); margin-right: 0.3rem; }
.form-control {
    width: 100%; padding: 0.8rem 1rem;
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 10px; font-size: 1rem;
    font-family: var(--body); color: var(--text);
    transition: all 0.2s ease; outline: none;
}
.form-control::placeholder { color: rgba(240,234,255,0.28); }
.form-control:focus {
    border-color: var(--neon-blue);
    background: rgba(0,212,255,0.06);
    box-shadow: 0 0 0 3px rgba(0,212,255,0.12);
    color: white;
}
select.form-control option { background: var(--deep2); color: var(--text); }

/* =====================================================================
   TABLES
   ===================================================================== */
.table-container { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; }
th {
    padding: 0.85rem 1rem; text-align:left;
    border-bottom: 1px solid rgba(255,45,120,0.3);
    color: var(--neon-pink); font-size:0.8rem;
    text-transform:uppercase; letter-spacing:0.08em; font-weight:700;
}
td { padding: 0.85rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--text); font-size:0.9rem; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,0.03); }

/* =====================================================================
   BADGES
   ===================================================================== */
.badge { display:inline-block; padding:3px 10px; border-radius:99px; font-size:0.75rem; font-weight:700; }
.badge-success { background:rgba(0,255,157,0.12); color:var(--neon-green); border:1px solid rgba(0,255,157,0.3); }
.badge-danger  { background:rgba(255,45,120,0.12); color:var(--neon-pink);  border:1px solid rgba(255,45,120,0.3); }
.badge-warning { background:rgba(255,224,41,0.12); color:var(--neon-yellow);border:1px solid rgba(255,224,41,0.3); }
.badge-info    { background:rgba(0,212,255,0.12);  color:var(--neon-blue);  border:1px solid rgba(0,212,255,0.3); }
.badge-primary { background:rgba(255,45,120,0.12); color:var(--neon-pink);  border:1px solid rgba(255,45,120,0.25); }

/* =====================================================================
   HERO (index.php keeps .parallax-hero / .hero-content)
   ===================================================================== */
.parallax-hero {
    min-height: 100vh; position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
}
.hero-content {
    position:relative; z-index:10;
    text-align:center; color:white;
    max-width:860px; padding:120px 2rem 3rem;
}
.hero-content h1 {
    font-family: var(--display);
    font-size: clamp(5rem, 14vw, 9rem);
    line-height: 0.88; letter-spacing: 0.03em; margin-bottom: 0.75rem;
}
.hero-content h1 .white-text { color:white; display:block; -webkit-text-fill-color:white; }
.hero-content h1 .gradient-text {
    display: block;
    background: linear-gradient(90deg, var(--neon-pink) 0%, var(--neon-yellow) 50%, var(--neon-blue) 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: titleShimmer 4s ease-in-out infinite;
}
@keyframes titleShimmer { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.hero-subtitle {
    font-size: clamp(1.1rem,2.5vw,1.4rem); font-weight:500;
    color:rgba(240,234,255,0.85); margin-bottom:0.75rem;
}
.hero-tagline { font-size:1.05rem; color:var(--muted); line-height:1.6; margin-bottom:2rem; }
.hero-title-wrapper { display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:0.5rem; }
.hero-title-wrapper img { width:80px; filter:drop-shadow(0 0 16px rgba(255,224,41,0.5)); animation:brainyFloat 4s ease-in-out infinite; }
@keyframes brainyFloat { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-12px) rotate(3deg)} }

/* Join section inside hero */
.join-section {
    background: rgba(10,5,20,0.75);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-top: 2px solid var(--neon-pink);
    border-radius: 20px; padding: 2rem;
    max-width: 420px; margin: 0 auto;
    /* override old white version */
    background-image: none !important;
    animation: none;
}
.join-section h2 {
    font-family: var(--display); font-size: 1.6rem; letter-spacing:0.06em;
    color: white; text-align:center; margin-bottom:1.25rem;
    -webkit-text-fill-color: white; background:none;
}
.join-section h2 i { color:var(--neon-yellow); margin-right:0.3rem; }
.code-input {
    text-align:center; font-size:2rem; letter-spacing:0.45em; font-weight:700;
    text-transform:uppercase;
    background: rgba(255,255,255,0.06) !important;
    border: 1.5px solid var(--neon-yellow) !important;
    color: var(--neon-yellow) !important;
    border-radius: 12px !important;
}
.code-input:focus {
    background: rgba(255,224,41,0.08) !important;
    box-shadow: 0 0 0 3px rgba(255,224,41,0.18) !important;
    transform: none;
}
.code-input::placeholder { color:rgba(255,224,41,0.3) !important; }

/* Glow blobs behind hero */
.hero-glow-pink  { position:absolute; width:500px;height:500px; border-radius:50%; background:rgba(255,45,120,0.15);  filter:blur(80px); top:-120px; left:-140px; pointer-events:none; z-index:1; animation:gf1 12s ease-in-out infinite; }
.hero-glow-blue  { position:absolute; width:420px;height:420px; border-radius:50%; background:rgba(0,212,255,0.12);   filter:blur(80px); bottom:-80px; right:-100px; pointer-events:none; z-index:1; animation:gf2 14s ease-in-out infinite; }
.hero-glow-yellow{ position:absolute; width:300px;height:300px; border-radius:50%; background:rgba(255,224,41,0.09); filter:blur(80px); top:40%;left:60%; pointer-events:none; z-index:1; animation:gf3 10s ease-in-out infinite; }
@keyframes gf1{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-30px)}}
@keyframes gf2{0%,100%{transform:translate(0,0)}50%{transform:translate(-25px,25px)}}
@keyframes gf3{0%,100%{transform:translate(0,0)}50%{transform:translate(15px,-50px)}}

/* Stats/feature sections on landing (now dark) */
.stats-section {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border); border-radius:20px;
    padding:3rem; margin:3rem 0; text-align:center;
    position:relative; overflow:hidden;
}
.stats-section::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background: linear-gradient(90deg,var(--neon-pink),var(--neon-yellow),var(--neon-blue));
}
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.5rem; margin-top:2rem; }
.stat-item {
    padding:1.5rem; border-radius:14px;
    background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07);
    transition:transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.stat-item:hover { transform:translateY(-6px); border-color:rgba(255,45,120,0.35); box-shadow:0 12px 40px rgba(0,0,0,0.4); }
.stat-number { font-size:3rem; display:block; }
.stat-label { font-size:0.95rem; color:var(--muted); font-weight:600; margin-top:0.5rem; }

.feature-card {
    background: var(--card-bg); border:1px solid var(--card-border);
    border-radius:18px; padding:2rem;
    transition:all 0.3s ease; position:relative; overflow:hidden;
}
.feature-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background: linear-gradient(90deg,var(--neon-pink),var(--neon-yellow),var(--neon-blue));
}
.feature-card:hover { transform:translateY(-6px); border-color:rgba(255,45,120,0.35); box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.feature-icon { font-size:3rem; display:block; text-align:center; margin-bottom:1rem; }
.feature-card h3 {
    font-family: var(--display); font-size:1.8rem; letter-spacing:0.04em;
    color: var(--neon-pink); margin-bottom:1rem; text-align:center;
    -webkit-text-fill-color: var(--neon-pink); background:none;
}
.feature-list { list-style:none; padding:0; margin:1rem 0; }
.feature-list li {
    padding:0.6rem 0 0.6rem 1.75rem; position:relative;
    color:var(--muted); font-size:0.92rem;
    border-bottom:1px solid rgba(255,255,255,0.05);
}
.feature-list li:last-child { border-bottom:none; }
.feature-list li::before { content:"✦"; position:absolute; left:0; color:var(--neon-yellow); font-size:0.75rem; top:0.65rem; }

.cta-section {
    text-align:center; padding:4rem 2rem;
    background: linear-gradient(135deg, var(--deep3), var(--deep2));
    border:1px solid rgba(255,224,41,0.18); border-radius:24px; margin:3rem 0;
    position:relative; overflow:hidden;
}
.cta-section::before {
    content:''; position:absolute; inset:0;
    background: radial-gradient(ellipse at center, rgba(255,224,41,0.055) 0%, transparent 65%);
}
.cta-section h2 {
    font-family: var(--display); font-size:clamp(2.2rem,5vw,3.5rem);
    letter-spacing:0.04em; color:white; margin-bottom:0.75rem;
    -webkit-text-fill-color: white; background:none; position:relative;
}

/* =====================================================================
   ANSWER BUTTONS (player-game.php)
   ===================================================================== */
.answer-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.5rem; }
.answer-btn {
    position:relative; display:flex; align-items:center; gap:1rem;
    padding:1.25rem 1.5rem; border-radius:14px; border:none;
    cursor:pointer; font-size:1.05rem; font-weight:700;
    font-family: var(--body);
    color:white; text-align:left;
    transition:transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
    min-height: 80px; user-select:none;
}
.answer-btn:hover:not(:disabled) { transform:translateY(-3px); filter:brightness(1.1); }
.answer-btn:active:not(:disabled) { transform:translateY(2px); }
.answer-btn:disabled { cursor:not-allowed; }
.answer-btn.ans-red    { background:#e21b3c; box-shadow:0 4px 0 #900f22; }
.answer-btn.ans-blue   { background:#1368ce; box-shadow:0 4px 0 #0a3d85; }
.answer-btn.ans-yellow { background:#d97706; box-shadow:0 4px 0 #8a4a00; }
.answer-btn.ans-green  { background:#16a34a; box-shadow:0 4px 0 #0a5c28; }
.answer-btn:hover.ans-red    { box-shadow:0 6px 0 #900f22, 0 8px 24px rgba(226,27,60,0.5); }
.answer-btn:hover.ans-blue   { box-shadow:0 6px 0 #0a3d85, 0 8px 24px rgba(19,104,206,0.5); }
.answer-btn:hover.ans-yellow { box-shadow:0 6px 0 #8a4a00, 0 8px 24px rgba(217,119,6,0.5); }
.answer-btn:hover.ans-green  { box-shadow:0 6px 0 #0a5c28, 0 8px 24px rgba(22,163,74,0.5); }
.answer-btn .ans-shape {
    width:42px; height:42px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem; background:rgba(0,0,0,0.18); border-radius:8px;
}
.answer-btn .ans-text { flex:1; line-height:1.3; }
.answer-btn.state-selected { animation:selectedPulse 0.3s ease; }
.answer-btn.state-correct  { background:#16a34a !important; box-shadow:0 4px 0 #0a5c28, 0 0 28px rgba(22,163,74,0.6) !important; animation:correctFlash 0.5s ease; }
.answer-btn.state-wrong    { background:#374151 !important; box-shadow:none !important; filter:brightness(0.55) saturate(0) !important; transform:none !important; }
.answer-btn.state-timeout  { background:#1f2937 !important; box-shadow:none !important; opacity:0.45; }
@keyframes selectedPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
@keyframes correctFlash  { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.4)} }

/* =====================================================================
   TIMER
   ===================================================================== */
.question-timer-wrap { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.timer-circle { width:64px; height:64px; flex-shrink:0; position:relative; display:flex; align-items:center; justify-content:center; }
.timer-circle svg { position:absolute; top:0; left:0; transform:rotate(-90deg); }
.timer-circle-bg { fill:none; stroke:rgba(255,255,255,0.15); stroke-width:5; }
.timer-circle-fg { fill:none; stroke:var(--neon-yellow); stroke-width:5; stroke-linecap:round; transition:stroke-dashoffset 1s linear, stroke 0.5s ease; }
.timer-number { font-family:var(--display); font-size:1.5rem; letter-spacing:0.02em; color:var(--neon-yellow); position:relative; z-index:1; }
.timer-bar-wrap { flex:1; background:rgba(255,255,255,0.12); border-radius:99px; height:10px; overflow:hidden; }
.timer-bar-fill { height:100%; border-radius:99px; background:var(--neon-yellow); transition:width 1s linear, background 0.5s ease; }

/* =====================================================================
   QUESTION DISPLAY
   ===================================================================== */
.question-card {
    background: rgba(255,255,255,0.05); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.12); border-radius:18px;
    padding:2rem; margin-bottom:1.5rem; position:relative; overflow:hidden;
}
.question-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background: linear-gradient(90deg,var(--neon-pink),var(--neon-yellow),var(--neon-blue));
}
.question-progress { font-size:0.78rem; font-weight:700; color:var(--muted); margin-bottom:0.85rem; text-transform:uppercase; letter-spacing:0.1em; }
.question-progress-bar { background:rgba(255,255,255,0.1); border-radius:99px; height:5px; margin-bottom:1.1rem; overflow:hidden; }
.question-progress-fill { height:100%; background:linear-gradient(90deg,var(--neon-pink),var(--neon-yellow)); border-radius:99px; transition:width 0.5s ease; }
.question-text { font-size:clamp(1.2rem,2.8vw,1.75rem); font-weight:700; color:white; line-height:1.4; }

/* =====================================================================
   FEEDBACK SCREEN
   ===================================================================== */
.feedback-screen {
    text-align:center; padding:3rem 2rem;
    background: rgba(255,255,255,0.04); backdrop-filter:blur(10px);
    border-radius:18px; border:1px solid rgba(255,255,255,0.1);
    position:relative; overflow:hidden;
}
.feedback-screen::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background: linear-gradient(90deg,var(--neon-pink),var(--neon-yellow),var(--neon-blue));
}
.feedback-icon { font-size:5rem; margin-bottom:1rem; display:block; animation:popIn 0.4s cubic-bezier(0.68,-0.55,0.27,1.55); }
@keyframes popIn { 0%{transform:scale(0)} 80%{transform:scale(1.15)} 100%{transform:scale(1)} }
.feedback-label { font-family:var(--display); font-size:2.5rem; letter-spacing:0.05em; margin-bottom:0.5rem; color:white; }
.feedback-points { font-size:1.5rem; font-weight:700; color:var(--neon-yellow); margin-bottom:0.5rem; }
.feedback-streak { font-size:1rem; color:var(--neon-green); }
.feedback-waiting { font-size:0.9rem; color:var(--muted); margin-top:1.5rem; }

/* =====================================================================
   PLAYER INFO BAR
   ===================================================================== */
.player-info-bar {
    display:flex; align-items:center; justify-content:space-between;
    background: rgba(255,255,255,0.05); backdrop-filter:blur(10px);
    border-radius:14px; padding:0.85rem 1.25rem; margin-bottom:1.5rem;
    border:1px solid rgba(255,255,255,0.1); flex-wrap:wrap; gap:0.5rem;
}
.player-nickname { font-family:var(--display); font-size:1.2rem; letter-spacing:0.04em; color:var(--neon-yellow); }
.player-rank { font-size:0.82rem; color:var(--muted); }
.player-score-display { font-family:var(--display); font-size:1.8rem; letter-spacing:0.04em; color:var(--neon-yellow); }
.player-progress-text { font-size:0.82rem; color:var(--muted); text-align:right; }

/* All-answered banner */
.all-answered-banner {
    position:fixed; top:85px; left:50%; transform:translateX(-50%);
    background: linear-gradient(135deg, #059669, #10b981); color:white;
    padding:0.8rem 2rem; border-radius:12px;
    box-shadow: 0 8px 32px rgba(16,185,129,0.4);
    z-index:9999; font-weight:700; font-size:0.95rem; white-space:nowrap;
    animation:slideDown 0.4s ease; display:none;
    border:1px solid rgba(0,255,157,0.3);
}
.all-answered-banner.show { display:block; }
@keyframes slideDown { from{top:-60px;opacity:0} to{top:85px;opacity:1} }

/* =====================================================================
   LOBBY
   ===================================================================== */
.lobby-card { max-width:720px; margin:0 auto; }
.lobby-code-section {
    background: var(--deep3); border:1px solid rgba(255,45,120,0.3);
    padding:2rem; border-radius:14px; margin:1.5rem 0; text-align:center;
    position:relative; overflow:hidden;
}
.lobby-code-section::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background: linear-gradient(90deg,var(--neon-pink),var(--neon-yellow));
}
.lobby-code-section .join-url { font-size:1rem; color:var(--muted); margin-bottom:0.4rem; }
.lobby-code-section .join-url strong { color:var(--neon-blue); }
.lobby-code-section .code-label { font-size:0.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.1em; margin-top:1rem; margin-bottom:0.4rem; }
.lobby-code-display {
    font-family: var(--display);
    font-size:clamp(3rem,10vw,5rem); letter-spacing:0.35em;
    color: var(--neon-yellow);
    text-shadow: 0 0 30px rgba(255,224,41,0.5);
}
.lobby-player-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:0.75rem; margin-top:1rem; }
.lobby-player-chip {
    background: rgba(255,45,120,0.1); border:1px solid rgba(255,45,120,0.25);
    border-radius:10px; padding:0.7rem 0.5rem;
    font-weight:700; font-size:0.88rem; text-align:center; color:var(--text);
    animation:chipPop 0.3s cubic-bezier(0.68,-0.55,0.27,1.55);
}
@keyframes chipPop { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }

/* =====================================================================
   HOST GAME
   ===================================================================== */
.host-stats-bar { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.5rem; }
.host-stat {
    background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
    border-radius:12px; padding:1rem; text-align:center;
}
.host-stat-value { font-family:var(--display); font-size:2.2rem; letter-spacing:0.04em; color:var(--neon-yellow); }
.host-stat-label { font-size:0.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-top:0.2rem; }

.admin-correct-highlight {
    border:2px solid var(--neon-green) !important;
    box-shadow: 0 0 20px rgba(0,255,157,0.35) !important;
    animation: correctGlow 2s ease-in-out infinite;
}
@keyframes correctGlow { 0%,100%{box-shadow:0 0 10px rgba(0,255,157,0.2)} 50%{box-shadow:0 0 30px rgba(0,255,157,0.5)} }

/* =====================================================================
   PLAYER WAITING
   ===================================================================== */
.waiting-screen { text-align:center; max-width:560px; margin:0 auto; padding-top:2rem; }
.waiting-screen h1 { font-family:var(--display); font-size:2.5rem; letter-spacing:0.05em; color:var(--neon-yellow); margin-bottom:0.5rem; }
.waiting-game-title { font-size:1.4rem; font-weight:700; color:white; margin-bottom:1.5rem; }
.waiting-pulse {
    width:100px; height:100px; margin:2rem auto;
    border-radius:50%;
    background: rgba(255,45,120,0.1); border:2px solid rgba(255,45,120,0.3);
    display:flex; align-items:center; justify-content:center;
    animation:waitPulse 2s ease-in-out infinite;
    overflow:hidden;
}
.waiting-pulse img { width:70px; filter:drop-shadow(0 0 12px rgba(255,224,41,0.5)); animation:brainyBob 3s ease-in-out infinite; }
.waiting-pulse .brainy-emoji { font-size:2.5rem; }
@keyframes waitPulse { 0%,100%{transform:scale(1);box-shadow:0 0 0 rgba(255,45,120,0)} 50%{transform:scale(1.06);box-shadow:0 0 30px rgba(255,45,120,0.3)} }
@keyframes brainyBob  { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-8px) rotate(5deg)} }

.player-count-bubble {
    display:inline-flex; align-items:center; gap:0.5rem;
    background: rgba(0,212,255,0.1); border:1px solid rgba(0,212,255,0.25);
    border-radius:99px; padding:0.5rem 1.25rem;
    font-size:1rem; color:var(--neon-blue); font-weight:700; margin-bottom:1.5rem;
}
.waiting-players-grid { display:flex; flex-wrap:wrap; gap:0.6rem; justify-content:center; margin-top:1rem; }
.waiting-player-chip {
    background: rgba(255,45,120,0.1); border:1px solid rgba(255,45,120,0.2);
    border-radius:8px; padding:0.4rem 0.9rem;
    font-size:0.88rem; color:var(--text); font-weight:600;
    animation:chipPop 0.3s ease;
}

/* =====================================================================
   RESULTS / LEADERBOARD
   ===================================================================== */
.podium { display:flex; align-items:flex-end; justify-content:center; gap:1rem; margin:2rem 0; }
.podium-place { text-align:center; }
.podium-avatar {
    width:64px; height:64px; border-radius:50%;
    margin:0 auto 0.5rem; display:flex; align-items:center; justify-content:center;
    font-family:var(--display); font-size:1.5rem; letter-spacing:0.02em; color:white;
}
.podium-place-1 .podium-avatar { background:linear-gradient(135deg,#f59e0b,#d97706); width:80px; height:80px; font-size:1.8rem; box-shadow:0 0 24px rgba(245,158,11,0.5); }
.podium-place-2 .podium-avatar { background:linear-gradient(135deg,#94a3b8,#64748b); }
.podium-place-3 .podium-avatar { background:linear-gradient(135deg,#b45309,#92400e); }
.podium-bar { width:90px; border-radius:10px 10px 0 0; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); border-bottom:none; }
.podium-place-1 .podium-bar { height:100px; border-color:rgba(245,158,11,0.3); background:rgba(245,158,11,0.1); }
.podium-place-2 .podium-bar { height:72px; }
.podium-place-3 .podium-bar { height:52px; }
.podium-name { font-size:0.82rem; font-weight:700; color:var(--text); margin-top:0.4rem; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.podium-score { font-size:0.78rem; color:var(--muted); }

.leaderboard-row {
    display:flex; align-items:center; gap:1rem;
    background: rgba(255,255,255,0.04); border-radius:12px;
    padding:0.85rem 1.25rem; margin-bottom:0.5rem;
    border:1px solid rgba(255,255,255,0.08);
    transition: border-color 0.2s, background 0.2s;
}
.leaderboard-row:hover { border-color:rgba(255,45,120,0.25); background:rgba(255,255,255,0.06); }
.lb-rank { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:1rem; letter-spacing:0.02em; color:white; flex-shrink:0; }
.lb-rank.top1 { background:linear-gradient(135deg,#f59e0b,#d97706); box-shadow:0 0 12px rgba(245,158,11,0.4); }
.lb-rank.top2 { background:linear-gradient(135deg,#94a3b8,#64748b); }
.lb-rank.top3 { background:linear-gradient(135deg,#b45309,#92400e); }
.lb-name { flex:1; font-weight:700; color:var(--text); }
.lb-score { font-family:var(--display); font-size:1.2rem; letter-spacing:0.04em; color:var(--neon-yellow); }
.lb-correct { font-size:0.82rem; color:var(--muted); }
.lb-you { background:rgba(255,224,41,0.07) !important; border-color:rgba(255,224,41,0.25) !important; }

/* =====================================================================
   PAGE HEADINGS (dashboard, etc.)
   ===================================================================== */
h1.page-title, .page-heading {
    font-family: var(--display);
    letter-spacing: 0.04em; color:white;
}

/* Inline heading overrides so PHP pages with style="" still look right */
h1[style*="color:white"], h1[style*="color: white"] {
    font-family: var(--display) !important;
    letter-spacing: 0.04em;
}

/* =====================================================================
   LANDING HERO TICKER (used in index.php)
   ===================================================================== */
.ticker { background:var(--neon-yellow); color:var(--deep); font-family:var(--display); font-size:1rem; letter-spacing:0.12em; overflow:hidden; white-space:nowrap; padding:0.55rem 0; }
.ticker-inner { display:inline-block; animation:tickScroll 22s linear infinite; }
@keyframes tickScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* =====================================================================
   UTILITY
   ===================================================================== */
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity:1; transform:none; }
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeSlideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* =====================================================================
   MOBILE
   ===================================================================== */
@media (max-width:768px) {
    .container { padding:1rem; padding-top:calc(68px + 1rem); }
    .card { padding:1.25rem; }
    .answer-grid { grid-template-columns:1fr; }
    .answer-btn { min-height:64px; font-size:0.95rem; }
    .host-stats-bar { grid-template-columns:1fr 1fr; }
    .join-section { padding:1.5rem 1.25rem; }
    .code-input { font-size:1.6rem !important; letter-spacing:0.3em !important; }
    .hero-content h1 { font-size:clamp(4rem,16vw,6rem); }
    .podium-bar { width:70px; }
    .podium-place-1 .podium-bar{height:80px;} .podium-place-2 .podium-bar{height:56px;} .podium-place-3 .podium-bar{height:40px;}
    .stats-section { padding:2rem 1.25rem; }
    .feature-card { padding:1.5rem; }
    table { font-size:0.82rem; }
    th, td { padding:0.65rem 0.75rem; }
}
@media (max-width:480px) {
    .answer-btn .ans-shape { width:32px; height:32px; font-size:1.1rem; }
    .lobby-code-display { letter-spacing:0.2em; }
    .grid-2, .grid-3 { grid-template-columns:1fr; }
}