/* ============================================================
   EkoBilgi — Stylesheet
   ============================================================ */
:root {
    --green: #10b981; --green-d: #059669; --green-glow: rgba(16,185,129,.4);
    --blue: #3b82f6; --blue-l: #60a5fa;
    --amber: #f59e0b; --amber-l: #fbbf24;
    --rose: #f43f5e; --rose-l: #fb7185;
    --purple: #a855f7; --purple-l: #c084fc;
    --teal: #14b8a6;
    --bg: #f8fafc; --bg2: #e2e8f0; --card: #ffffff;
    --border: rgba(0,0,0,.08); --text: #1e293b; --dim: #64748b; --sub: #475569;
    --font: 'Outfit', system-ui, sans-serif; --radius: 16px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);overflow:hidden;height:100vh;width:100vw;user-select:none}

/* === SCREENS === */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;transition:opacity .4s,visibility .4s;padding:20px 0}
.screen.hidden{opacity:0;visibility:hidden;pointer-events:none}
.screen.active{opacity:1;visibility:visible}

/* === BUTTONS === */
.btn{font-family:var(--font);font-size:1rem;font-weight:700;padding:14px 32px;border:none;border-radius:14px;cursor:pointer;transition:all .2s}
.btn-go{background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;box-shadow:0 4px 18px var(--green-glow)}
.btn-go:hover{transform:translateY(-2px);box-shadow:0 8px 28px var(--green-glow)}
.btn-outline{background:transparent;color:var(--sub);border:1px solid var(--border)}
.btn-outline:hover{background:var(--card);color:var(--text)}

/* === TITLE SCREEN === */
#title-screen{background:linear-gradient(180deg,#e0f2fe,#dcfce7,#fefce8)}
.title-wrap{text-align:center;animation:fadeUp .7s ease;max-width:750px;padding:1rem;margin:auto}
.title-emoji{font-size:4rem;margin-bottom:.3rem;animation:bounce 2.5s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.title-wrap h1{font-size:3.8rem;font-weight:900;background:linear-gradient(135deg,var(--green),var(--teal),var(--amber));background-size:200%;animation:shimmer 4s linear infinite;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
@keyframes shimmer{0%{background-position:200%}100%{background-position:-200%}}
.subtitle{font-size:1.4rem;font-weight:300;color:var(--sub);letter-spacing:5px;text-transform:uppercase;margin-bottom:.5rem}
.desc{color:var(--dim);font-size:.95rem;margin-bottom:2rem}

/* Mode Cards */
.mode-cards{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.mode-card{background:var(--card);border:1.5px solid var(--border);border-radius:20px;padding:1.8rem 1.5rem;width:200px;cursor:pointer;transition:all .3s;text-align:center;position:relative;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.05)}
.mode-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:0;transition:opacity .3s}
.mode-card:hover{transform:translateY(-6px);border-color:var(--green);box-shadow:0 12px 24px rgba(0,0,0,.15)}
.mode-card:hover::before{opacity:1}
.mc-sort::before{background:linear-gradient(90deg,var(--green),var(--teal))}
.mc-memory::before{background:linear-gradient(90deg,var(--blue),var(--purple))}
.mc-quiz::before{background:linear-gradient(90deg,var(--amber),var(--rose))}
.mc-icon{font-size:2.8rem;margin-bottom:.5rem}
.mode-card h3{font-size:1.1rem;margin-bottom:.4rem}
.mode-card p{font-size:.82rem;color:var(--sub);line-height:1.4;margin-bottom:.8rem}
.mc-badge{font-size:.75rem;color:var(--dim);background:rgba(0,0,0,.05);padding:4px 12px;border-radius:99px}

/* === HUD === */
.game-hud{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:center;gap:24px;padding:12px 20px;background:linear-gradient(180deg,rgba(255,255,255,.9),transparent)}
.hud-item{display:flex;align-items:center;gap:5px;font-size:.9rem}
.hud-val{font-weight:800;font-size:1.1rem}
.hud-sub{font-size:.75rem;color:var(--dim)}
.score-color{color:var(--amber-l)}
.combo-color{color:var(--purple-l)}

/* === SORT GAME === */
#sort-screen{background:linear-gradient(180deg,#dcfce7,#fefce8)}
.sort-area{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding-bottom:120px}
.sort-species{text-align:center;animation:popIn .35s ease}
@keyframes popIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.sort-emoji{font-size:6rem;margin-bottom:.5rem;filter:drop-shadow(0 4px 20px rgba(0,0,0,.3))}
.sort-name{font-size:1.5rem;font-weight:700}
.sort-feedback{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3rem;font-weight:900;pointer-events:none;z-index:40;animation:fbPop .6s ease forwards}
.sort-feedback.hidden{display:none}
.sort-feedback.fb-correct{color:var(--green)}
.sort-feedback.fb-wrong{color:var(--rose)}
@keyframes fbPop{0%{opacity:1;transform:translate(-50%,-50%) scale(.5)}50%{transform:translate(-50%,-50%) scale(1.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(1) translateY(-30px)}}
.sort-buttons{position:fixed;bottom:0;left:0;right:0;display:flex;gap:12px;padding:20px;justify-content:center;background:linear-gradient(0deg,rgba(255,255,255,.8),transparent)}
.sort-btn{font-family:var(--font);font-size:1.05rem;font-weight:700;padding:18px 28px;border:2px solid var(--border);border-radius:16px;background:var(--card);color:var(--text);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:8px;min-width:140px;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.05)}
.sort-btn:hover{transform:scale(1.05)}
.sort-btn:active{transform:scale(.95)}
.sb-producer{border-color:rgba(34,197,94,.3)}.sb-producer:hover{background:rgba(34,197,94,.12);border-color:var(--green)}
.sb-consumer{border-color:rgba(59,130,246,.3)}.sb-consumer:hover{background:rgba(59,130,246,.12);border-color:var(--blue)}
.sb-decomposer{border-color:rgba(168,85,247,.3)}.sb-decomposer:hover{background:rgba(168,85,247,.12);border-color:var(--purple)}

/* === MEMORY GAME === */
#memory-screen{background:linear-gradient(180deg,#e0f2fe,#ede9fe);flex-direction:column;padding-top:60px}
.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:420px;width:90%;margin:auto}
.mem-card{aspect-ratio:1;border-radius:14px;cursor:pointer;perspective:600px;position:relative}
.mem-card-inner{width:100%;height:100%;position:relative;transition:transform .5s;transform-style:preserve-3d}
.mem-card.flipped .mem-card-inner{transform:rotateY(180deg)}
.mem-card.matched .mem-card-inner{transform:rotateY(180deg)}
.mem-card.matched{opacity:.7;pointer-events:none}
.mem-face,.mem-back{position:absolute;inset:0;border-radius:14px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden}
.mem-back{background:linear-gradient(135deg,#e2e8f0,#cbd5e1);border:2px solid var(--border);font-size:1.8rem;color:var(--sub)}
.mem-face{background:#fff;border:2px solid rgba(96,165,250,.5);transform:rotateY(180deg);font-size:2.5rem;box-shadow:0 4px 10px rgba(0,0,0,.05)}
.mem-card.matched .mem-face{border-color:var(--green);box-shadow:0 0 15px var(--green-glow)}
.mem-fact{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.95);border:1px solid var(--border);border-radius:14px;padding:12px 20px;max-width:400px;width:90%;text-align:center;font-size:1rem;color:var(--text);backdrop-filter:blur(8px);animation:fadeUp .3s ease;z-index:35;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.mem-fact.hidden{display:none}

/* === QUIZ === */
#quiz-screen{background:linear-gradient(180deg,#fefce8,#ffedd5);flex-direction:column;padding-top:60px}
.quiz-area{max-width:550px;width:90%;margin:auto;animation:fadeUp .4s ease}
.quiz-timer-bar{height:6px;background:rgba(0,0,0,.1);border-radius:3px;margin-bottom:1.5rem;overflow:hidden}
.quiz-timer-fill{height:100%;width:100%;background:linear-gradient(90deg,var(--green),var(--amber));border-radius:3px;transition:width .1s linear}
.q-text{font-size:1.2rem;font-weight:600;text-align:center;margin-bottom:1.3rem;line-height:1.5}
.q-options{display:flex;flex-direction:column;gap:10px}
.q-opt{font-family:var(--font);font-size:1rem;font-weight:500;padding:14px 20px;border-radius:12px;border:2px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;text-align:left;transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,.03)}
.q-opt:hover{border-color:var(--blue);background:rgba(96,165,250,.06)}
.q-opt.correct{border-color:var(--green)!important;background:rgba(34,197,94,.1)!important;color:var(--green)!important}
.q-opt.wrong{border-color:var(--rose)!important;background:rgba(251,113,133,.08)!important;color:var(--rose)!important}
.q-opt:disabled{pointer-events:none;opacity:.4}.q-opt.correct:disabled,.q-opt.wrong:disabled{opacity:1}
.q-result{text-align:center;margin-top:1rem;animation:fadeUp .3s ease}
.q-result.hidden{display:none}
.q-result-icon{font-size:3rem;margin-bottom:.3rem}
.q-result p{margin-bottom:.5rem}
.q-explanation{font-size:.95rem;color:var(--sub);background:rgba(0,0,0,.03);padding:12px 16px;border-radius:10px;text-align:left;line-height:1.5;margin-bottom:1rem;border:1px solid var(--border)}

/* === RESULTS === */
#result-screen{background:linear-gradient(180deg,#e0f2fe,#dcfce7);z-index:50}
.result-wrap{text-align:center;animation:fadeUp .6s ease;max-width:480px;width:90%;margin:auto}
.res-icon{font-size:4.5rem;animation:bounce 2.5s ease-in-out infinite;margin-bottom:.3rem}
.result-wrap h2{font-size:2rem;margin-bottom:.3rem}
.res-sub{color:var(--sub);margin-bottom:1.5rem}
.res-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:1.2rem}
.rs{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:.8rem;text-align:center;box-shadow:0 4px 10px rgba(0,0,0,.03)}
.rs-icon{font-size:1.3rem}
.rs-val{font-size:1.6rem;font-weight:800;color:var(--amber-l);display:block;margin:2px 0}
.rs-label{font-size:.7rem;color:var(--dim);text-transform:uppercase;letter-spacing:1px}
.res-achievements{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:1.5rem}
.ra{padding:5px 12px;border-radius:99px;font-size:.82rem;font-weight:600}
.ra.yes{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);color:var(--green)}
.ra.no{background:var(--bg);border:1px solid var(--border);color:#64748b}
.res-buttons{display:flex;gap:12px;justify-content:center}

/* === ANIMATIONS === */
.shake{animation:shake .3s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}

/* === RESPONSIVE === */
@media(max-width:640px){
    .title-wrap h1{font-size:2.2rem}
    .subtitle{font-size:1.1rem;letter-spacing:3px}
    .desc{font-size:.85rem;margin-bottom:1rem}
    .mode-cards{flex-direction:column;align-items:center;gap:12px}
    .mode-card{width:90%;padding:1.2rem 1rem}
    .mc-icon{font-size:2.2rem;margin-bottom:.2rem}
    .mode-card h3{font-size:1.05rem;margin-bottom:.2rem}
    .mode-card p{font-size:.75rem;margin-bottom:.5rem}
    .sort-emoji{font-size:4.5rem}
    .sort-btn{padding:14px 18px;font-size:.95rem;min-width:100px}
    .memory-grid{max-width:340px;gap:8px}
}