/* ============================================================
   REAL SAU FALS? — stiluri
   Identitate: fundal #100F0D · REAL #DFA83C · SINTETIC #8E7BFF
   Space Grotesk (titluri/UI) + IBM Plex Mono (etichete/cifre)
   ============================================================ */
:root{
  --bg:#100F0D; --surface:#1B1916; --surface2:#232019; --line:#33302A;
  --text:#EDE8DF; --dim:#948C7D;
  --real:#DFA83C; --real-dark:#4A3813;
  --sint:#8E7BFF; --sint-dark:#2C2455;
  --ok:#7BC47F; --err:#E06C5B;
  --fd:'Space Grotesk',system-ui,sans-serif;
  --fm:'IBM Plex Mono',ui-monospace,'Courier New',monospace;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--fd)}
button{cursor:pointer;font-family:var(--fd)}
button:focus-visible,input:focus-visible{outline:2px solid var(--real);outline-offset:2px}
input{font-family:var(--fd)}
a{color:var(--real)}
code{font-family:var(--fm);font-size:12px;background:var(--surface2);padding:2px 6px;border-radius:6px}

.wrap{max-width:440px;margin:0 auto;padding:28px 20px 60px}
.wrap.wide{max-width:760px}
.eyebrow{font-family:var(--fm);font-size:11px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase}
.mono{font-family:var(--fm)}
.row{display:flex;align-items:center;gap:12px}

.btn{font-weight:500;font-size:15px;padding:10px 18px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text);transition:border-color .15s,background .15s}
.btn:disabled{opacity:.4;cursor:default}
.btn.solid{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn.danger{border-color:var(--err);color:var(--err)}
.btn.big{width:100%;padding:17px;font-size:17px;border-radius:12px}

.card{padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.imgframe{width:100%;border-radius:14px;border:1px solid var(--line);background:var(--surface2);overflow:hidden}
.imgframe img{display:block;width:100%;height:auto;max-height:52vh;object-fit:contain;background:#000}

.votebtn{flex:1;padding:22px 10px;border-radius:16px;border:2px solid var(--line);background:var(--surface);color:var(--text);transition:border-color .15s,background .15s}
.votebtn .t{font-size:22px;font-weight:700;letter-spacing:.04em}
.votebtn .s{font-family:var(--fm);font-size:10px;color:var(--dim);margin-top:6px}
.votebtn.on-real{border-color:var(--real);color:var(--real);background:linear-gradient(180deg,var(--real-dark),var(--surface))}
.votebtn.on-sint{border-color:var(--sint);color:var(--sint);background:linear-gradient(180deg,var(--sint-dark),var(--surface))}

/* rândul de opțiuni: 2 alături, 4 în grilă 2×2 */
.optrow{flex-wrap:wrap}
.optrow .votebtn{flex:1 1 44%;min-width:132px}

/* grila de imagini a unei întrebări (pe telefon) */
.imgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.imgcell{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#000}
.imgcell img{display:block;width:100%;height:100%;aspect-ratio:3/2;object-fit:cover}
.imgcell .num{position:absolute;top:6px;left:6px;font-family:var(--fm);font-size:12px;font-weight:600;
  background:rgba(0,0,0,.66);color:#fff;border-radius:6px;padding:2px 8px}

/* cardurile paginii seriei */
.serie-card{transition:border-color .15s,transform .15s}
a.serie-card:hover{border-color:var(--real);transform:translateY(-1px)}

.certbtn{flex:1;padding:12px 8px;border-radius:10px;font-size:15px;font-weight:500;border:1px solid var(--line);background:transparent;color:var(--dim)}
.certbtn.on{border-color:var(--text);background:var(--surface2);color:var(--text)}

.dualbar{display:flex;height:34px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--surface2)}
.dualbar .r{background:linear-gradient(90deg,var(--real-dark),var(--real));transition:width .5s ease}
.dualbar .s{background:linear-gradient(90deg,var(--sint),var(--sint-dark));transition:width .5s ease}

.tabbtn{padding:8px 16px;border-radius:8px;border:none;font-family:var(--fm);font-size:13px;background:transparent;color:var(--dim)}
.tabbtn.on{background:var(--surface2);color:var(--text)}
.keybtn{flex:1;padding:8px 4px;border-radius:8px;font-family:var(--fm);font-size:12px;border:1px solid var(--line);background:transparent;color:var(--dim)}
.keybtn.on-real{border-color:var(--real);color:var(--real);background:var(--surface2)}
.keybtn.on-sintetic{border-color:var(--sint);color:var(--sint);background:var(--surface2)}
.keybtn.on-hibrid{border-color:var(--dim);color:var(--text);background:var(--surface2)}
.togglebtn{padding:9px 16px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--dim);font-family:var(--fm);font-size:13px}
.togglebtn.on{border-color:var(--real);color:var(--real);background:var(--surface2)}

input.txt{width:100%;padding:16px;font-size:17px;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--text)}
textarea.txt{width:100%;padding:12px 16px;font-size:15px;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--text);font-family:var(--fd);resize:vertical;min-height:64px}
input[type=checkbox]{accent-color:var(--real);width:16px;height:16px;flex-shrink:0}
.pulse{animation:pulse-soft 2.4s infinite}
@keyframes pulse-soft{0%,100%{opacity:1}50%{opacity:.45}}

/* indicator de conexiune */
.netpill{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-size:11px;color:var(--dim)}
.netpill .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.netpill.off .dot{background:var(--err);animation:pulse-soft 1.2s infinite}
.netpill.off{color:var(--err)}

/* ============================================================
   ECRAN DE PROIECȚIE — lizibil din fundul sălii
   ============================================================ */
.proj{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:4vh 4vw;overflow:hidden}
.proj .eyebrow{font-size:clamp(14px,1.8vw,26px);letter-spacing:.3em}
.proj-num{font-size:clamp(120px,42vh,560px);font-weight:700;line-height:.95}
.proj-den{font-size:clamp(28px,6vh,80px);color:var(--dim);font-weight:400}
.proj-title{font-size:clamp(40px,8vw,120px);font-weight:700;line-height:1.05}
.proj-sub{font-size:clamp(18px,2.6vw,40px);color:var(--dim);margin-top:2vh}
.proj-bar{width:min(84vw,1400px);margin-top:5vh}
.proj-bar .dualbar{height:clamp(40px,9vh,110px);border-radius:16px}
.proj-bar-labels{display:flex;justify-content:space-between;margin-top:1.6vh;
  font-family:var(--fm);font-size:clamp(20px,3.4vh,44px)}
.proj-slide{position:fixed;inset:0;background:#000;display:flex;align-items:center;justify-content:center}
.proj-slide img{max-width:100vw;max-height:100vh;width:auto;height:auto;display:block}
.proj-voteimg{max-width:92vw;max-height:66vh;width:auto;height:auto;display:block;
  border-radius:1.2vh;border:1px solid var(--line);background:#000;margin:2vh auto 0}
/* grila de imagini pe ecranul mare (întrebări cu mai multe imagini) */
.proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4vh;width:min(92vw,1500px);margin-top:1.6vh}
.proj-cell{position:relative;border-radius:1vh;overflow:hidden;border:1px solid var(--line);background:#000}
.proj-cell img{display:block;width:100%;height:100%;max-height:34vh;object-fit:cover}
.proj-cell .num{position:absolute;top:1vh;left:1vh;font-family:var(--fm);font-weight:600;
  font-size:clamp(18px,3.2vh,42px);background:rgba(0,0,0,.7);color:#fff;border-radius:1vh;padding:.2vh 1.4vh}

.proj-qr{background:#fff;border-radius:3vh;padding:2.2vh;line-height:0}
.proj-qr svg{width:min(66vh,80vw);height:min(66vh,80vw);display:block}
.proj-url{font-family:var(--fm);font-size:clamp(18px,3vh,40px);color:var(--text);margin-top:3vh;word-break:break-all}
.proj-net{position:fixed;top:14px;right:16px}
.proj-fs{position:fixed;bottom:14px;right:16px;background:none;border:1px solid var(--line);
  color:var(--dim);font-family:var(--fm);font-size:12px;padding:6px 12px;border-radius:8px;opacity:.6}
.proj-fs:hover{opacity:1}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* întrebare fără imagine, pe ecranul mare */
.proj-question{font-size:clamp(30px,6.2vh,84px);font-weight:700;line-height:1.15;
  max-width:min(88vw,1500px);margin-top:2vh;text-align:center}
/* explicația, după dezvăluirea unei întrebări */
.proj-explain{font-size:clamp(16px,2.5vh,32px);color:var(--dim);line-height:1.45;
  max-width:min(84vw,1400px);margin-top:2vh;text-align:center}