/* ════════════════════════════════════════════════════
   RiddleQuest — Dark Mystical Theme
   Fonts: Cinzel Decorative (display) · Crimson Pro (body) · Share Tech Mono (code)
════════════════════════════════════════════════════ */

:root {
    --bg0:        #06080f;
    --bg1:        #0a0d18;
    --bg2:        #0f1221;
    --bg3:        #141828;
    --card:       #111520;
    --border:     rgba(255,255,255,.07);
    --border2:    rgba(255,255,255,.12);
    --text1:      #e8e4d8;
    --text2:      #a89f8c;
    --text3:      #5a5448;
    --gold:       #c9a84c;
    --gold2:      #e8c870;
    --accent1:    #7c3aed;
    --accent2:    #38bdf8;
    --error:      #ef4444;
    --success:    #22c55e;
    --font-display: 'Cinzel Decorative', serif;
    --font-body:    'Crimson Pro', Georgia, serif;
    --font-mono:    'Share Tech Mono', 'Courier New', monospace;
    --shadow:     0 8px 32px rgba(0,0,0,.7);
    --glow-gold:  0 0 20px rgba(201,168,76,.3);
    --glow-purple:0 0 20px rgba(124,58,237,.3);
    --radius:     10px;
    --radius-lg:  16px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    background: var(--bg0);
    color: var(--text1);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    min-height: 100vh;
    overflow-x: hidden;
}
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold2); }
h1,h2,h3 { font-family: var(--font-display); letter-spacing: .03em; }

/* ── Particles background ── */
#particles {
    position: fixed; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% -10%, rgba(124,58,237,.15) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(201,168,76,.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 80% at 0% 50%, rgba(56,189,248,.05) 0%, transparent 60%);
    pointer-events: none;
    animation: bgPulse 8s ease-in-out infinite alternate;
}
@keyframes bgPulse {
    from { opacity: .7; }
    to   { opacity: 1;  }
}

/* ── Navbar ── */
.navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; gap: 1.5rem;
    padding: .75rem 2rem;
    background: rgba(6,8,15,.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
.brand { display:flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-size:1.1rem; color:var(--gold) !important; }
.brand-icon { font-size:1.4rem; }
.nav-links { display:flex; align-items:center; gap:1.25rem; margin-left:auto; }
.nav-links a { font-size:.88rem; color:var(--text2); transition:color .2s; }
.nav-links a:hover { color:var(--gold); }
.nav-cta { background:var(--accent1); color:#fff !important; padding:.3rem .8rem; border-radius:6px; }
.nav-cta:hover { background:#6d28d9; color:#fff !important; }
.nav-btn-logout { background:transparent; border:1px solid var(--border2); color:var(--text3); padding:.28rem .7rem; border-radius:5px; cursor:pointer; font-size:.85rem; transition:.2s; }
.nav-btn-logout:hover { border-color:var(--error); color:var(--error); }
.nav-user { font-size:.8rem; color:var(--text3); font-family:var(--font-mono); }
.audio-btn { background:transparent; border:none; font-size:1.1rem; cursor:pointer; opacity:.5; transition:.2s; }
.audio-btn:hover { opacity:1; }

/* ── Main ── */
main { padding-top: 64px; position: relative; z-index: 1; min-height: calc(100vh - 64px); }

/* ── Footer ── */
.site-footer { text-align:center; padding:2rem; color:var(--text3); font-size:.82rem; border-top:1px solid var(--border); margin-top:4rem; }
.site-footer a { color:var(--text3); }
.site-footer a:hover { color:var(--gold); }

/* ════ HERO ════ */
.hero { position:relative; min-height:calc(100vh - 64px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem 1.5rem; text-align:center; overflow:hidden; }
.hero-glow { position:absolute; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle, rgba(124,58,237,.12) 0%, transparent 70%); top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; }
.hero-content { position:relative; z-index:1; max-width:700px; }
.hero-sub { font-size:.85rem; letter-spacing:.2em; color:var(--text3); margin-bottom:1rem; font-family:var(--font-mono); }
.hero-title { font-size:clamp(2.5rem,8vw,5.5rem); line-height:1.1; margin-bottom:1.25rem; text-shadow:var(--glow-gold); }
.hero-title .gold { color:var(--gold); }
.hero-desc { font-size:1.15rem; color:var(--text2); margin-bottom:2.5rem; max-width:480px; margin-inline:auto; }
.hero-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:3rem; }
.hero-stats { display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; }
.stat { text-align:center; }
.stat-num { display:block; font-family:var(--font-display); font-size:1.8rem; color:var(--gold); }
.stat-lbl { font-size:.78rem; color:var(--text3); letter-spacing:.1em; }
.puzzle-types-preview { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin-top:3rem; position:relative;z-index:1; }
.pt-item { background:rgba(255,255,255,.04); border:1px solid var(--border); padding:.4rem .9rem; border-radius:20px; font-size:.82rem; color:var(--text2); transition:.2s; }
.pt-item:hover { border-color:var(--gold); color:var(--gold); }

/* ════ BUTTONS ════ */
.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.65rem 1.5rem; border-radius:7px; font-family:var(--font-display); font-size:.85rem; letter-spacing:.05em; cursor:pointer; transition:.2s; border:1px solid transparent; }
.btn-primary { background:var(--accent1); color:#fff; border-color:var(--accent1); }
.btn-primary:hover { background:#6d28d9; color:#fff; }
.btn-ghost { background:transparent; color:var(--text2); border-color:var(--border2); }
.btn-ghost:hover { border-color:var(--gold); color:var(--gold); }
.btn-sm { padding:.35rem .9rem; font-size:.78rem; }
.w-full { width:100%; justify-content:center; }

/* ════ AUTH ════ */
.auth-page { display:flex; justify-content:center; align-items:center; padding:3rem 1.5rem; min-height:calc(100vh - 120px); }
.auth-card { background:var(--card); border:1px solid var(--border2); border-radius:var(--radius-lg); padding:2.5rem 2rem; width:100%; max-width:420px; box-shadow:var(--shadow); }
.auth-symbol { font-size:2.5rem; text-align:center; margin-bottom:.75rem; }
.auth-title { font-size:1.6rem; text-align:center; color:var(--gold); margin-bottom:.25rem; }
.auth-sub { text-align:center; color:var(--text3); font-size:.88rem; margin-bottom:1.75rem; }
.auth-switch { text-align:center; margin-top:1.25rem; font-size:.88rem; color:var(--text3); }
.form-group { margin-bottom:1.1rem; }
.form-group label { display:block; font-size:.85rem; color:var(--text2); margin-bottom:.35rem; }
.form-control { width:100%; background:rgba(255,255,255,.04); border:1px solid var(--border2); border-radius:6px; padding:.65rem .9rem; color:var(--text1); font-size:.95rem; font-family:var(--font-body); outline:none; transition:.2s; }
.form-control:focus { border-color:var(--accent1); box-shadow:0 0 0 3px rgba(124,58,237,.2); }
.form-check { display:flex; align-items:center; gap:.5rem; margin-bottom:1.1rem; font-size:.88rem; color:var(--text2); }
.alert { padding:.75rem 1rem; border-radius:6px; font-size:.88rem; margin-bottom:1rem; }
.alert-error { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:#fca5a5; }
.alert-success { background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3); color:#86efac; }

/* ════ DASHBOARD ════ */
.dashboard { max-width:760px; margin:0 auto; padding:3rem 1.5rem; }
.dashboard-header { margin-bottom:2.5rem; }
.dashboard-header h1 { font-size:1.8rem; }
.text-muted { color:var(--text3); font-size:.9rem; margin-top:.3rem; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; }
.stat-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem 1.25rem; text-align:center; }
.stat-icon { font-size:1.8rem; margin-bottom:.5rem; }
.stat-val { font-family:var(--font-display); font-size:1.6rem; color:var(--gold); }
.stat-label { font-size:.8rem; color:var(--text3); margin-top:.25rem; }
.progress-bar { height:4px; background:rgba(255,255,255,.08); border-radius:2px; margin-top:.75rem; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg, var(--accent1), var(--gold)); border-radius:2px; transition:width .5s ease; }

/* ════ PUZZLE ════ */
.puzzle-page { max-width:760px; margin:0 auto; padding:2.5rem 1.5rem; }
.puzzle-header { text-align:center; margin-bottom:2rem; }
.puzzle-breadcrumb { font-size:.78rem; margin-bottom:.5rem; }
.puzzle-num { font-family:var(--font-mono); font-size:.8rem; color:var(--gold); letter-spacing:.15em; margin-bottom:.5rem; }
.puzzle-title { font-size:clamp(1.4rem,4vw,2rem); color:var(--text1); margin-bottom:.5rem; }
.puzzle-desc { color:var(--text2); font-size:.95rem; }
.puzzle-meta { display:flex; gap:1.25rem; justify-content:center; font-size:.8rem; color:var(--text3); margin-top:.5rem; font-family:var(--font-mono); flex-wrap:wrap; }
.puzzle-card { background:var(--card); border:1px solid var(--border2); border-radius:var(--radius-lg); padding:2rem; box-shadow:var(--shadow); }
.puzzle-hint { background:rgba(201,168,76,.06); border:1px solid rgba(201,168,76,.2); border-radius:7px; padding:.85rem 1.1rem; color:var(--gold); font-size:.9rem; margin-bottom:1.25rem; font-style:italic; }
.puzzle-type-area { margin-bottom:1rem; }

/* Hint/Fill blank */
.hint-fill-block { background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:8px; padding:1.5rem; text-align:center; }
.hint-sentence { font-size:1.3rem; color:var(--text1); font-family:var(--font-display); letter-spacing:.02em; }

/* Answer row */
.answer-row { display:flex; gap:.6rem; align-items:stretch; }
.answer-input { flex:1; background:rgba(255,255,255,.04); border:1px solid var(--border2); border-radius:7px; padding:.75rem 1rem; color:var(--text1); font-size:1rem; font-family:var(--font-body); outline:none; transition:.2s; }
.answer-input:focus { border-color:var(--accent1); box-shadow:0 0 0 3px rgba(124,58,237,.2); }
.answer-submit { background:var(--accent1); color:#fff; border:none; border-radius:7px; padding:0 1.25rem; font-size:1.1rem; cursor:pointer; transition:.2s; }
.answer-submit:hover { background:#6d28d9; transform:scale(1.05); }

/* Code block */
.code-block { background:#060a0f; border:1px solid rgba(56,189,248,.2); border-radius:7px; padding:1.25rem; font-family:var(--font-mono); font-size:.88rem; color:var(--accent2); white-space:pre-wrap; overflow-x:auto; }

/* Audio player */
.audio-player { display:flex; align-items:center; gap:.75rem; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:8px; padding:.75rem 1rem; }
.audio-player audio { color-scheme:dark; }

/* Escape game */
.escape-scene { }
.room-label { font-family:var(--font-mono); font-size:.75rem; color:var(--text3); margin-bottom:.5rem; letter-spacing:.1em; }
.screen-mock { background:#0a0f0a; border:2px solid #1a2a1a; border-radius:8px; min-height:200px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.screen-lock { display:flex; flex-direction:column; align-items:center; gap:.65rem; padding:1.5rem; }
.screen-lock-icon { font-size:2rem; }
.pin-input { background:#111; border:1px solid #2a3a2a; border-radius:5px; padding:.4rem .6rem; color:#0f0; font-family:var(--font-mono); font-size:1.1rem; text-align:center; width:8rem; letter-spacing:.25em; outline:none; }
.screen-unlocked { padding:1.25rem; }
.file-content { background:#080c08; border:1px solid #1a2a1a; border-radius:5px; padding:.75rem 1rem; font-family:var(--font-mono); color:#0f0; font-size:1.1rem; text-align:center; letter-spacing:.15em; min-width:140px; }
.escape-env { background:#0a0c14; border:1px solid #1e2a3a; border-radius:6px; padding:1rem; font-size:.82rem; color:#7a8a9a; line-height:1.8; min-height:160px; }

/* Color puzzle */
.color-puzzle-wrap { display:flex; flex-direction:column; gap:.75rem; }
.color-image { max-width:100%; border-radius:7px; border:1px solid var(--border); }
.color-controls { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; font-size:.82rem; color:var(--text2); }
.color-controls input[type=range] { accent-color:var(--gold); }
.color-tip { font-size:.78rem; color:var(--text3); }

/* Math trick */
.math-problem { background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:8px; padding:1.5rem; text-align:center; }
.math-eq { font-family:var(--font-mono); font-size:1.4rem; color:var(--text1); }

/* Room / hidden object */
.room-container { background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:8px; padding:1.5rem; display:flex; gap:1.5rem; flex-wrap:wrap; min-height:120px; position:relative; }
.room-obj { font-size:2rem; cursor:pointer; transition:transform .2s; position:relative; user-select:none; }
.room-obj:hover { transform:scale(1.2); }
.room-obj.hidden { display:none; }
.room-tip { position:absolute; bottom:110%; left:50%; transform:translateX(-50%); background:#1a2035; border:1px solid var(--border2); border-radius:5px; padding:.35rem .65rem; font-size:.75rem; color:var(--text2); white-space:nowrap; z-index:10; pointer-events:none; }

/* Code hint box */
.code-hint-box { background:rgba(56,189,248,.05); border:1px solid rgba(56,189,248,.2); border-radius:7px; padding:1rem 1.25rem; }
.code-hint-box p { color:var(--accent2); font-size:.9rem; }
kbd { background:rgba(255,255,255,.1); border:1px solid var(--border2); padding:.15rem .45rem; border-radius:3px; font-family:var(--font-mono); font-size:.82rem; }

/* Leaderboard */
.leaderboard-page { max-width:800px; margin:0 auto; padding:3rem 1.5rem; }
.page-header { margin-bottom:2.5rem; }
.page-header h1 { font-size:1.9rem; margin-bottom:.3rem; }
.lb-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.lb-table th { text-align:left; padding:.65rem 1rem; color:var(--text3); font-family:var(--font-mono); font-size:.75rem; letter-spacing:.1em; border-bottom:1px solid var(--border); }
.lb-table td { padding:.7rem 1rem; border-bottom:1px solid rgba(255,255,255,.04); }
.lb-table tr:hover td { background:rgba(255,255,255,.02); }
.lb-me td { background:rgba(124,58,237,.08) !important; }
.lb-top1 td { color:var(--gold2); }
.lb-top2 td { color:#c0c0c0; }
.lb-top3 td { color:#cd7f32; }
.lb-rank { font-family:var(--font-mono); font-size:1rem; }
.lb-score { color:var(--gold); font-family:var(--font-display); }
.lb-time { font-family:var(--font-mono); color:var(--text3); font-size:.82rem; }
.lb-you { font-size:.75rem; color:var(--accent1); margin-left:.35rem; }

/* Completed */
.completed-page { display:flex; justify-content:center; align-items:center; min-height:calc(100vh - 130px); padding:2rem; }
.completed-card { background:var(--card); border:1px solid var(--border2); border-radius:var(--radius-lg); padding:3rem 2rem; text-align:center; max-width:480px; box-shadow:var(--shadow), var(--glow-gold); }
.completed-icon { font-size:4rem; margin-bottom:1rem; animation:float 3s ease-in-out infinite; }
.completed-title { font-size:2rem; color:var(--gold); margin-bottom:.75rem; }
.completed-sub { color:var(--text2); }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* bg-puzzle overlay */
.bg-puzzle { background-size:cover; background-position:center; background-attachment:fixed; }
.bg-puzzle::before { content:''; position:fixed; inset:0; background:rgba(6,8,15,.75); z-index:0; }
.bg-puzzle > * { position:relative; z-index:1; }

/* Responsive */
@media(max-width:600px) {
    .navbar { padding:.6rem 1rem; gap:.75rem; }
    .nav-links { gap:.75rem; }
    .puzzle-card { padding:1.25rem; }
    .auth-card { padding:1.75rem 1.25rem; }
}

/* ── Completed page animations ── */
@keyframes iconFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes iconPulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ── Mobil Responsive ─────────────────────────────── */
@media (max-width: 768px) {
    .navbar { padding: .75rem 1rem; flex-wrap: wrap; gap: .5rem; }
    .brand-text { font-size: 1rem; }
    .nav-links { gap: .5rem; font-size: .82rem; flex-wrap: wrap; }
    .nav-links a { padding: .2rem .4rem; }
    .nav-user { display: none; }

    .hero-title { font-size: clamp(2rem, 10vw, 4rem); }
    .hero-sub { font-size: .85rem; }
    .hero-desc { font-size: .9rem; }
    .hero-btns { flex-direction: column; align-items: center; gap: .75rem; }
    .hero-stats { gap: 1.5rem; }
    .stat-num { font-size: 2rem; }

    .puzzle-types-preview { gap: .4rem; padding: .75rem; }
    .pt-item { font-size: .75rem; padding: .3rem .6rem; }

    .puzzle-page { padding: 1rem .75rem; }
    .puzzle-card { padding: 1.25rem 1rem; }
    .puzzle-title { font-size: 1.2rem; }
    .puzzle-meta { font-size: .75rem; flex-wrap: wrap; gap: .3rem; }
    .answer-row { flex-direction: column; }
    .answer-input { width: 100%; }
    .answer-submit { width: 100%; padding: .75rem; }

    .auth-card { padding: 1.5rem 1.25rem; margin: 1rem; }
    .auth-title { font-size: 1.4rem; }

    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
    .stat-card { padding: 1rem; }

    .lb-table { font-size: .78rem; }
    .lb-table th, .lb-table td { padding: .5rem .4rem; }

    .dashboard { padding: 1.5rem 1rem; }
    .dashboard-header h1 { font-size: 1.4rem; }

    .completed-card { padding: 2rem 1.25rem; }
    .completed-title { font-size: 1.6rem; }

    .escape-room-overlay { padding: 1rem; gap: 1rem; }
    .screen-mock { padding: 1rem; }
    .pin-input { font-size: 1rem; }

    .code-block { font-size: .78rem; padding: .75rem; }
    .color-puzzle-wrap img { max-height: 200px; }

    .audio-btn { font-size: 1rem; padding: .3rem .5rem; }
}

@media (max-width: 480px) {
    .hero-title { font-size: clamp(1.8rem, 12vw, 3rem); }
    .hero-stats { gap: 1rem; }
    .stat-num { font-size: 1.6rem; }
    .stat-lbl { font-size: .65rem; }
    .nav-links { font-size: .75rem; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
}