/* ══════════════════════════════════════
   RESET & BASE
══════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;border-radius:0!important;}
:root{
  /* ── BITCOIN (intocable) ── */
  --btc:#F7931A;

  /* ── TOBACCO/MAHOGANY PALETTE ── */
  --accent:#B59E7D;
  --accent2:#73534C;
  --gold:#B59E7D;
  --gold2:#CEC1A8;

  /* ── FONDOS ── */
  --darker:#1A0F0A;
  --dark:#260F08;
  --darkest:#05050F;
  --surface:#2E1810;
  --surface2:#3A2018;

  /* ── TEXTO ── */
  --text:#F1EADA;
  --text-muted:#CEC1A8;
  --text-dim:#AAA396;

  /* ── BORDES ── */
  --border:rgba(181,158,125,0.28);
  --border2:rgba(206,193,168,0.35);

  /* ── SEMÁNTICOS ── */
  --green:#5D8679;
  --red:#C0392B;
  --blue:#2980B9;

  /* ── GLOWS ── */
  --glow-r:rgba(181,158,125,0.35);

  /* ── LEGACY ── */
  --pw:264px;
  --crimson:#B59E7D;
  --crimson2:#73534C;
}

/* ── LIGHT MODE ── */
html.light{
  --btc:#D4720A;
  --accent:#584738;
  --accent2:#3D2B1F;
  --gold:#584738;
  --gold2:#3D2B1F;
  --darker:#F1EADA;
  --dark:#E8DCC8;
  --darkest:#D8CCB8;
  --surface:#FBF5EC;
  --surface2:#F0E6D2;
  --text:#1A0C06;
  --text-muted:#3D2B1F;
  --text-dim:#73534C;
  --border:rgba(61,43,31,0.22);
  --border2:rgba(88,71,56,0.3);
  --green:#2D6B50;
  --red:#B03020;
  --blue:#1A5276;
  --glow-r:rgba(61,43,31,0.15);
  --crimson:#584738;
  --crimson2:#3D2B1F;
}
html,body{height:100%;overflow:hidden;}
body{background:var(--darker);color:var(--text);transition:background 0.35s ease,color 0.35s ease;font-family:'VT323',monospace;display:flex;flex-direction:column;}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.07) 2px,rgba(0,0,0,0.07) 4px);
  opacity:1;transition:opacity 0.35s ease;}
html.light body::after{opacity:0;}
.px{font-family:'Press Start 2P',monospace;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:var(--darker);}
::-webkit-scrollbar-thumb{background:var(--btc);}

/* ══════════════════════════════════════
   NAVBAR
══════════════════════════════════════ */
#nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;height:44px;
  background:var(--dark);
  border-bottom:3px solid var(--accent2);
  box-shadow:0 2px 12px var(--glow-r);
  flex-shrink:0;overflow:hidden;
  backdrop-filter:blur(8px);
  transition:background 0.35s ease,border-color 0.35s ease;
}
html.light #nav{box-shadow:0 2px 8px var(--glow-r);}
#nav a{color:var(--text-muted);text-decoration:none;display:flex;align-items:center;gap:8px;}
#nav a:hover{color:var(--btc);}

/* ══════════════════════════════════════
   MAIN 3-COL
══════════════════════════════════════ */
#main{flex:1;display:flex;overflow:hidden;min-height:0;transition:filter .3s;}
body.exam-open #main,body.exam-open #nav{
  filter:blur(4px) brightness(0.35) saturate(0.4);pointer-events:none;
}

/* ══════════════════════════════════════
   SIDE PANELS
══════════════════════════════════════ */
.panel{width:var(--pw);min-width:var(--pw);background:var(--dark);
  display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;}
#pl{border-right:4px solid var(--accent2);}
#pr{border-left:4px solid var(--accent2);}
.ph{padding:10px 14px;border-bottom:4px solid var(--accent2);flex-shrink:0;}

/* ══════════════════════════════════════
   TABS (left panel)
══════════════════════════════════════ */
.tabs{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;flex-shrink:0;}
.tab{padding:8px 2px;text-align:center;cursor:pointer;font-family:'Press Start 2P',monospace;
  font-size:7px;border-bottom:4px solid var(--accent2);border-right:4px solid var(--accent2);
  color:var(--text-dim);background:var(--dark);transition:all .1s;
  display:flex;flex-direction:column;align-items:center;gap:3px;}
.tab:last-child{border-right:none;}
.tab.on{color:var(--btc);border-bottom-color:var(--btc);background:var(--dark);}
.tab:hover:not(.on){color:var(--text-muted);background:rgba(255,255,255,0.02);}
.tab .ti{font-size:14px;}
.tc{display:none;flex:1;flex-direction:column;overflow:hidden;}
.tc.on{display:flex;}

/* ══════════════════════════════════════
   DATA CARDS
══════════════════════════════════════ */
.cards-list{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;}
.dc{background:var(--darker);border-left:4px solid var(--btc);padding:10px 12px;
  position:relative;cursor:pointer;transition:all .15s;
  border-bottom:1px solid rgba(247,147,26,0.15);}
.dc:hover{background:rgba(247,147,26,0.05);}
.dc.red{border-left-color:var(--red);}
.dc.blue{border-left-color:var(--blue);}
.dc.green{border-left-color:var(--green);}
.dc-badge{display:inline-block;background:var(--red);color:var(--text);
  font-family:'Press Start 2P',monospace;font-size:6px;padding:2px 5px;
  border:2px solid var(--accent2);margin-bottom:6px;animation:blink 1.5s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.dc p{font-size:17px;color:var(--text);line-height:1.4;}
.dc .dc-meta{font-size:12px;color:var(--text-dim);margin-top:4px;}
.dc .dc-more{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--btc);margin-top:6px;display:inline-block;}
.dc-expand{display:none;margin-top:10px;border-top:1px solid rgba(255,255,255,0.08);padding-top:10px;}
.dc-expand.on{display:block;}
.dc-expand p{font-size:16px;color:var(--text-muted);line-height:1.5;}
.dc-expand .dc-src{font-size:12px;color:var(--text-dim);margin-top:6px;}
.pbar-wrap{margin-top:10px;display:flex;flex-direction:column;gap:5px;}
.pbar-row{display:flex;align-items:center;gap:6px;}
.pbar-lbl{font-family:'Press Start 2P',monospace;font-size:6px;width:52px;}
.pbar-track{flex:1;height:10px;background:var(--surface);border:1px solid var(--border);}
.pbar-fill{height:100%;transition:width .6s;}
.pbar-val{font-family:'Press Start 2P',monospace;font-size:6px;width:28px;text-align:right;}
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:20px;text-align:center;color:var(--text-dim);}
.empty .ei{font-size:28px;opacity:.4;}
.empty p{font-family:'Press Start 2P',monospace;font-size:7px;line-height:2;}

/* ══════════════════════════════════════
   NOTES TAB
══════════════════════════════════════ */
.notes-wrap{flex:1;display:flex;flex-direction:column;padding:10px;gap:8px;overflow:hidden;}
.ntarea{font-family:'VT323',monospace;font-size:17px;background:var(--darker);
  border:2px solid var(--border);color:var(--text);padding:8px;resize:none;height:88px;outline:none;}
.ntarea:focus{border-color:var(--btc);}
.ntarea::placeholder{color:var(--text-dim);}
.nt-meta{display:flex;justify-content:space-between;align-items:center;}
.nt-cc{font-size:13px;color:var(--text-dim);}
.btn-save{font-family:'Press Start 2P',monospace;font-size:7px;background:var(--btc);
  color:var(--darker);border:none;padding:6px 10px;cursor:pointer;box-shadow:2px 2px 0 var(--darkest);transition:all .1s;}
.btn-save:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 #000;}
.btn-save.saved{background:var(--green);}
.nt-divider{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--text-dim);text-align:center;}
.nt-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;}
.nt-item{background:var(--darker);border-left:2px solid var(--btc);
  padding:8px 28px 8px 10px;position:relative;animation:slideIn .3s ease;}
@keyframes slideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.nt-item p{font-size:16px;color:var(--text);line-height:1.4;}
.nt-item .ntm{font-size:12px;color:var(--text-dim);margin-top:3px;}
.nt-del{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:13px;}
.nt-del:hover{color:var(--red);}

/* ══════════════════════════════════════
   GLOSSARY TAB
══════════════════════════════════════ */
.glo-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.glo-search-wrap{padding:8px 10px;border-bottom:2px solid var(--border);flex-shrink:0;}
.glo-search{font-family:'Press Start 2P',monospace;font-size:8px;background:var(--darker);
  border:2px solid var(--border);color:var(--text);padding:7px 10px;width:100%;outline:none;}
.glo-search:focus{border-color:var(--btc);}
.glo-count{font-size:12px;color:var(--text-dim);padding:4px 10px;flex-shrink:0;}
.glo-list{flex:1;overflow-y:auto;min-height:0;}
.glo-item{border-bottom:2px solid var(--border);}
.glo-hdr{display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;cursor:pointer;transition:background .1s;}
.glo-hdr:hover{background:rgba(255,255,255,0.03);}
.glo-hdr.on{background:rgba(247,147,26,0.06);}
.glo-dot{width:8px;height:8px;margin-right:8px;flex-shrink:0;}
.glo-term{font-family:'Press Start 2P',monospace;font-size:8px;flex:1;}
.glo-arrow{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--btc);transition:transform .2s;}
.glo-hdr.on .glo-arrow{transform:rotate(180deg);}
.glo-body{display:none;padding:10px 12px 14px;background:var(--surface);}
.glo-body.on{display:block;}
.glo-def{font-size:17px;color:var(--text);line-height:1.5;}
.glo-eg{font-size:15px;color:var(--text-muted);margin-top:6px;}
.glo-eg::before{content:'🇲🇽 ';}
.glo-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
.glo-tag{font-family:'Press Start 2P',monospace;font-size:6px;border:1px solid var(--btc);
  color:var(--btc);padding:3px 6px;cursor:pointer;transition:all .1s;}
.glo-tag:hover{background:var(--btc);color:var(--darker);}

/* ══════════════════════════════════════
   BADGES TAB
══════════════════════════════════════ */
.log-wrap{flex:1;overflow-y:auto;padding:10px;}
.log-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.log-card{background:var(--darker);border:2px solid var(--border);padding:12px 8px;
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;}
.log-card.unlock{border-color:var(--btc);background:rgba(247,147,26,0.06);}
.log-card.lock{filter:grayscale(1);opacity:.4;}
.log-icon{font-size:24px;}
.log-name{font-family:'Press Start 2P',monospace;font-size:6px;color:var(--btc);line-height:1.6;}
.log-card.lock .log-name{color:var(--text-dim);}
.log-desc{font-size:13px;color:var(--text-muted);line-height:1.4;}
.log-prog-text{font-size:13px;color:var(--text-dim);margin-top:10px;text-align:center;}
.log-prog-bar{height:6px;background:var(--surface);margin-top:6px;border:1px solid var(--border);}
.log-prog-fill{height:100%;background:var(--btc);}

/* ══════════════════════════════════════
   CENTER COLUMN
══════════════════════════════════════ */
#center{flex:1;display:flex;flex-direction:column;align-items:center;
  padding:12px;gap:8px;overflow:hidden;min-width:0;}
.prog-row{width:100%;max-width:740px;flex-shrink:0;display:flex;align-items:center;gap:10px;}
.prog-ch{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--text-muted);white-space:nowrap;}
.prog-bar-wrap{flex:1;height:14px;background:var(--darkest);border:3px solid var(--accent2);
  box-shadow:0 0 0 1px rgba(255,255,255,0.06);}
.prog-fill{height:100%;background:var(--btc);
  box-shadow:inset 0 3px 0 rgba(255,255,255,0.25);transition:width .5s;}
.prog-pct{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--btc);white-space:nowrap;}
.prog-time{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--text-dim);white-space:nowrap;}

/* Game frame */
#gframe{width:100%;max-width:740px;flex:1;background:var(--darkest);border:4px solid var(--darkest);
  box-shadow:6px 6px 0 var(--darkest);position:relative;overflow:hidden;min-height:0;}
#gbg{position:absolute;inset:0;
  background:linear-gradient(rgba(0,0,0,0.15),rgba(0,0,0,0.15)),
  url('https://lh3.googleusercontent.com/aida-public/AB6AXuCiwiip-WumG8KLrwUDh-Lh8NHG2Tm-iO6OLVzIqR3fm2JRcIFvHQms4wCrhYRxIC1cgQLEM-l4PFFtDArLSog2jzRMg_qK5WH5qPSyCNKxEQu7xMuBzctvpg_K5LSoINDSumb3CevhelS48EnfILeFGOWc-iUFZkxFm0xREXC3ts_HMIKbSdjN4UF6zy60D-V8tnVOnYaA4Zgrw8vYwP7HAcCgwQsxTXy-n2HA27hjq-Z1Z_5LLD4IYJq3XTv2fkZ_kpWyhDj_ZBrh')
  center/cover no-repeat;}

/* BTC ticker inside game */
#gticker{position:absolute;top:0;left:0;right:0;background:var(--dark);
  border-bottom:3px solid var(--btc);padding:4px 12px;
  display:flex;align-items:center;gap:8px;z-index:10;font-size:13px;}
.tdot{width:5px;height:5px;background:var(--green);animation:pulse 1s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Choice buttons */
#cbox{position:absolute;bottom:112px;left:10px;right:10px;
  display:none;flex-direction:column;gap:5px;z-index:22;}
.copt{font-family:'Press Start 2P',monospace;font-size:7px;
  background:var(--surface);border:2px solid var(--border);color:var(--text-muted);
  padding:9px 12px;cursor:pointer;text-align:left;
  box-shadow:3px 3px 0 #000;transition:all .1s;}
.copt:hover{border-color:var(--btc);color:#F2F2F2;background:rgba(247,147,26,.25);transform:translateX(4px);}

/* Dialog box */
#dlg{position:absolute;bottom:0;left:0;right:0;
  background:var(--dark);border-top:4px solid var(--accent);
  box-shadow:0 0 0 4px var(--darkest);padding:14px 16px 10px;z-index:20;cursor:pointer;}
#spk{position:absolute;top:-18px;left:14px;font-family:'Press Start 2P',monospace;
  font-size:8px;background:var(--accent);color:var(--darker);padding:4px 10px;border:3px solid var(--darker);}
#dtxt{font-size:21px;color:var(--text);line-height:1.45;min-height:50px;}
.cur{display:inline-block;width:10px;height:13px;background:var(--btc);
  margin-left:3px;animation:curblink .8s step-end infinite;vertical-align:middle;}
@keyframes curblink{0%,100%{opacity:1}50%{opacity:0}}
#dhint{position:absolute;bottom:8px;right:12px;font-size:12px;color:var(--text-dim);
  animation:hint 2s ease-in-out infinite;}
@keyframes hint{0%,100%{opacity:.4}50%{opacity:1}}

/* Nav controls */
.nav-ctrl{width:100%;max-width:740px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;gap:20px;}
.nb{font-family:'Press Start 2P',monospace;font-size:8px;background:none;border:none;
  cursor:pointer;color:var(--text-dim);transition:color .15s;padding:4px;}
.nb:hover{color:var(--btc);}
.nb.primary{color:var(--btc);}
.dots{display:flex;gap:6px;align-items:center;}
.dot{width:9px;height:9px;background:var(--surface);transition:background .2s;flex-shrink:0;}
.dot.a{background:var(--btc);}
.dot.d{background:var(--green);}

/* ══════════════════════════════════════
   RIGHT PANEL — POLAROIDS
══════════════════════════════════════ */
.pol-scroll{flex:1;overflow-y:auto;padding:16px 12px;
  display:flex;flex-direction:column;align-items:center;gap:16px;}
.pol{width:168px;background:var(--surface);padding:8px 8px 24px;position:relative;
  transition:transform .25s,box-shadow .25s;flex-shrink:0;}
.pol-img{width:100%;aspect-ratio:1/1;overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;}
.pol-scene-css{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:36px;}
.pol-caption{font-family:'Press Start 2P',monospace;font-size:7px;
  text-align:center;margin-top:8px;color:var(--text-dim);line-height:1.6;}
.pol-badge{position:absolute;top:4px;right:4px;font-family:'Press Start 2P',monospace;
  font-size:6px;padding:3px 6px;border:2px solid var(--accent2);}
.pol-badge.cur{background:var(--btc);color:var(--darker);animation:blink 1.5s ease-in-out infinite;}
.pol-badge.done{background:var(--green);color:var(--text);}
.pol.locked{filter:grayscale(1);opacity:.45;cursor:not-allowed;}
.pol.locked .pol-img::after{content:'🔒';position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;font-size:28px;background:rgba(0,0,0,0.5);}
.pol.current{box-shadow:0 0 0 3px var(--btc),0 0 20px rgba(247,147,26,.4),4px 4px 0 #000;}
.pol.done{filter:saturate(.75);cursor:pointer;box-shadow:3px 3px 0 #000;}
.pol.done:hover,.pol.current:hover{transform:rotate(0deg) translateY(-4px)!important;}
.pol:nth-child(1){transform:rotate(-2deg);}
.pol:nth-child(2){transform:rotate(2.5deg);}
.pol:nth-child(3){transform:rotate(-1deg);}
.pol:nth-child(4){transform:rotate(1.5deg);}
.pol:nth-child(5){transform:rotate(-2.5deg);}
.pol:nth-child(6){transform:rotate(1deg);}
.pr-summary{border-top:4px solid var(--accent2);padding:10px 12px;flex-shrink:0;}
.pr-txt{font-size:15px;color:var(--text-muted);margin-bottom:6px;}
.pr-bar{height:6px;background:var(--surface);border:1px solid var(--border);}
.pr-fill{height:100%;background:var(--btc);transition:width .5s;}
.pr-donut{display:flex;align-items:center;gap:10px;margin-top:8px;}

/* ══════════════════════════════════════
   MOBILE
══════════════════════════════════════ */
#mob-tabs{display:none;height:52px;background:var(--darkest);border-top:4px solid var(--accent2);flex-shrink:0;}
.mob-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;cursor:pointer;font-family:'Press Start 2P',monospace;font-size:6px;color:var(--text-dim);}
.mob-tab.on{color:var(--btc);}
.mob-tab .mti{font-size:18px;}
#drawer{display:none;position:fixed;bottom:52px;left:0;right:0;height:50vh;
  background:var(--dark);border-top:4px solid var(--btc);z-index:200;
  flex-direction:column;overflow:hidden;box-shadow:0 -6px 20px rgba(0,0,0,0.5);}
#drawer.open{display:flex;}
.drawer-handle{width:40px;height:4px;background:var(--accent2);margin:8px auto;flex-shrink:0;}
#mob-fab-l{display:none;position:fixed;bottom:70px;left:12px;width:44px;height:44px;
  background:var(--btc);border:3px solid var(--accent2);align-items:center;justify-content:center;
  cursor:pointer;box-shadow:3px 3px 0 #000;z-index:150;font-size:18px;}
@media(max-width:1100px){#pl{display:none;}#mob-fab-l{display:flex;}}
@media(max-width:768px){#pr{display:none;}#mob-tabs{display:flex;}#mob-fab-l{display:none!important;}#center{padding:6px;gap:6px;}}
@media(min-width:1101px){#mob-fab-l{display:none!important;}#drawer{display:none!important;}}

/* ══════════════════════════════════════
   EXAM MODAL BACKDROP
══════════════════════════════════════ */
#examBackdrop{
  display:none;position:fixed;inset:0;z-index:500;
  background:var(--darker);
  align-items:center;justify-content:center;
}
#examBackdrop.open{display:flex;}

/* ══════════════════════════════════════
   EXAM MODAL
══════════════════════════════════════ */
#examModal{
  position:relative;width:640px;max-width:calc(100vw - 24px);
  max-height:90vh;overflow-y:auto;background:var(--dark);
  border:4px solid var(--btc);
  box-shadow:8px 8px 0 #000,0 0 40px rgba(247,147,26,0.3);
  z-index:10;display:flex;flex-direction:column;
  animation:modalPop .28s ease-out;
}
@keyframes modalPop{from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}}
@keyframes shake{0%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}100%{transform:translateX(0)}}
.shaking{animation:shake .4s ease;}

/* Scanline overlay inside backdrop */
#examBackdrop::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.12) 2px,rgba(0,0,0,0.12) 4px);
}

/* Modal header */
#examHeader{
  background:var(--darkest);border-bottom:4px solid var(--accent2);
  padding:12px 18px;display:flex;align-items:center;
  justify-content:space-between;flex-shrink:0;
}
.exam-title-col{display:flex;flex-direction:column;gap:5px;}
.exam-lives{display:flex;gap:6px;align-items:center;}
.heart{font-size:17px;transition:all .4s;filter:drop-shadow(0 2px 0 rgba(0,0,0,0.8));}
.heart.lost{filter:grayscale(1);opacity:.25;transform:scale(0.8);}
.btn-skip{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--text-dim);
  background:none;border:none;cursor:pointer;transition:color .15s;}
.btn-skip:hover{color:var(--text-muted);}

/* Progress bar */
#examProg{height:8px;background:var(--darkest);border-bottom:2px solid var(--border);flex-shrink:0;}
#examProgFill{height:100%;background:var(--btc);transition:width .4s;}

/* Question zone */
#examBody{padding:20px 20px 0;flex-shrink:0;}

/* Don Memo hint */
.exam-hint{display:flex;align-items:center;gap:14px;
  background:rgba(0,0,0,0.4);border-left:4px solid var(--btc);
  padding:10px 14px;margin-bottom:18px;}
#hintCanvas{width:40px;height:50px;flex-shrink:0;image-rendering:pixelated;}
.hint-txt{font-size:19px;color:var(--text-muted);line-height:1.4;font-style:italic;}

/* Question */
.q-badge{display:inline-block;background:rgba(247,147,26,0.15);
  border:1px solid rgba(247,147,26,0.35);font-family:'Press Start 2P',monospace;
  font-size:7px;color:var(--btc);padding:3px 8px;margin-bottom:10px;}
#qText{font-size:25px;color:var(--text);line-height:1.4;margin-bottom:18px;}
#qText .hi{color:var(--btc);}

/* Answer buttons */
#answersWrap{display:flex;flex-direction:column;gap:8px;padding-bottom:16px;}
.ans-btn{display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;background:var(--darker);border:2px solid var(--border);
  cursor:pointer;transition:all .1s;text-align:left;width:100%;}
.ans-btn:hover:not([disabled]){border-color:var(--btc);background:rgba(247,147,26,0.05);transform:translateX(3px);}
.ans-btn:hover:not([disabled]) .ans-letter{background:var(--btc);color:var(--darker);}
.ans-left{display:flex;align-items:center;gap:14px;}
.ans-letter{width:30px;height:30px;background:var(--surface);border:1px solid var(--border);
  font-family:'Press Start 2P',monospace;font-size:8px;color:var(--btc);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .1s;}
.ans-text{font-size:21px;color:var(--text);}
.ans-icon{font-size:16px;flex-shrink:0;}

/* Answer states */
.ans-btn.correct{border-color:var(--green);background:rgba(22,160,133,0.12);}
.ans-btn.correct .ans-letter{background:var(--green);color:var(--text);border-color:var(--green);}
.ans-btn.correct .ans-text{color:var(--green);}
.ans-btn.correct .ans-icon::after{content:'✓';color:var(--green);}
.ans-btn.wrong{border-color:var(--red);background:rgba(192,57,43,0.12);}
.ans-btn.wrong .ans-letter{background:var(--red);color:var(--text);border-color:var(--red);}
.ans-btn.wrong .ans-text{color:var(--red);}
.ans-btn.wrong .ans-icon::after{content:'✗';color:var(--red);}
.ans-btn.dim{opacity:.28;pointer-events:none;}
.ans-btn[disabled]{cursor:not-allowed;}

/* ══════════════════════════════════════
   FEEDBACK STRIP
══════════════════════════════════════ */
#examFeedback{
  display:none;padding:14px 18px;border-top:3px solid var(--green);
  background:rgba(22,160,133,0.12);
  flex-shrink:0;
}
#examFeedback.wrong-fb{border-top-color:var(--red);background:rgba(192,57,43,0.08);}
#examFeedback.show{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  animation:fbSlide .22s ease;
}
@keyframes fbSlide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fb-left{flex:1;}
.fb-title{font-family:'Press Start 2P',monospace;font-size:10px;margin-bottom:6px;}
.fb-title.ok{color:var(--green);}
.fb-title.bad{color:var(--red);}
.fb-exp{font-size:18px;color:var(--text-muted);line-height:1.4;}
.fb-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.fb-sats{background:rgba(212,160,23,0.15);border:2px solid rgba(212,160,23,0.5);
  padding:5px 12px;font-family:'Press Start 2P',monospace;font-size:9px;color:var(--gold);}
.fb-life{background:rgba(192,57,43,0.15);border:2px solid rgba(192,57,43,0.5);
  padding:5px 12px;font-family:'Press Start 2P',monospace;font-size:9px;color:var(--red);}
.btn-cont{font-family:'Press Start 2P',monospace;font-size:8px;background:var(--btc);
  color:var(--darker);border:none;padding:11px 18px;cursor:pointer;
  box-shadow:4px 4px 0 #000;transition:all .1s;white-space:nowrap;}
.btn-cont:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--darkest);}
.btn-cont:active{transform:translate(4px,4px);box-shadow:none;}

/* ══════════════════════════════════════
   RESULTS SCREEN
══════════════════════════════════════ */
#examResults{display:none;padding:24px 20px;flex-shrink:0;}
#examResults.show{display:block;}
.res-score{text-align:center;margin-bottom:18px;}
.res-icons{display:flex;justify-content:center;gap:6px;margin:12px 0;}
.res-icon{width:24px;height:24px;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:bold;}
.res-icon.ok{background:var(--green);color:var(--text);}
.res-icon.bad{background:var(--red);color:var(--text);}
.res-stats{display:grid;grid-template-columns:1fr 1fr 1fr;border:2px solid var(--border);margin:14px 0;}
.res-stat{padding:10px 6px;text-align:center;border-right:1px solid var(--border);}
.res-stat:last-child{border-right:none;}
.res-stat-lbl{font-family:'Press Start 2P',monospace;font-size:6px;color:var(--text-dim);margin-bottom:4px;}
.res-stat-val{font-size:20px;color:var(--text);}
.res-msg{text-align:center;margin:14px 0;}
.res-badge-wrap{display:flex;justify-content:center;margin:14px 0;}
.res-badge{width:200px;padding:20px;text-align:center;
  border:3px solid var(--btc);background:rgba(247,147,26,0.07);
  box-shadow:0 0 20px rgba(247,147,26,0.25);
  animation:badgePop .5s ease .3s both;}
@keyframes badgePop{from{transform:scale(0);opacity:0}60%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}
.res-badge.locked{filter:grayscale(1);opacity:.5;box-shadow:none;border-color:var(--text-dim);animation:none;}
.res-badge-icon{font-size:42px;margin-bottom:8px;}
.res-badge-lbl{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--text-muted);margin-bottom:4px;}
.res-badge-name{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--btc);margin-bottom:6px;line-height:1.6;}
.res-badge.locked .res-badge-name{color:var(--text-dim);}
.res-badge-desc{font-size:15px;color:var(--text-muted);}
.res-actions{display:flex;justify-content:center;gap:12px;margin:14px 0;flex-wrap:wrap;}
.btn-rp{font-family:'Press Start 2P',monospace;font-size:8px;background:var(--btc);
  color:var(--darker);border:none;padding:12px 20px;cursor:pointer;
  box-shadow:4px 4px 0 #000;transition:all .1s;}
.btn-rp:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--darkest);}
.btn-rs{font-family:'Press Start 2P',monospace;font-size:7px;background:transparent;
  border:2px solid var(--border);color:var(--text-muted);padding:10px 16px;cursor:pointer;transition:all .1s;}
.btn-rs:hover{border-color:var(--btc);color:var(--btc);}
.res-rev-toggle{text-align:center;margin-top:6px;}
.btn-rev{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--text-dim);
  background:none;border:none;cursor:pointer;transition:color .15s;}
.btn-rev:hover{color:var(--text-muted);}
.res-review{display:none;margin-top:12px;border-top:2px solid var(--border);padding-top:12px;}
.res-review.open{display:block;}
.rri{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);align-items:flex-start;}
.rri-n{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--text-dim);white-space:nowrap;margin-top:3px;}
.rri-n.ok{color:var(--green);}
.rri-n.bad{color:var(--red);}
.rri-q{font-size:16px;color:var(--text-muted);line-height:1.4;}
.rri-a{font-size:14px;margin-top:3px;}

/* ══════════════════════════════════════
   GAME OVER
══════════════════════════════════════ */
#gameOver{display:none;position:absolute;inset:0;background:var(--darker);
  z-index:20;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;padding:32px;text-align:center;}
#gameOver.show{display:flex;}

/* ══════════════════════════════════════
   MOBILE MODAL
══════════════════════════════════════ */
@media(max-width:768px){
  #examModal{
    position:fixed;bottom:0;left:0;right:0;width:100%;max-width:100%;
    max-height:92vh;border-bottom:none;
    animation:modalSlide .3s ease-out;
  }
  @keyframes modalSlide{from{transform:translateY(100%);}to{transform:translateY(0);}}
}

/* ══ EJERCICIOS ══ */
#exOverlay{position:absolute;inset:0;background:var(--darker);z-index:30;display:none;flex-direction:column;overflow-y:auto;}
#exOverlay.on{display:flex;}
.ex-wrap{padding:20px 18px;flex:1;}
.ex-head{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--btc);margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.ex-body{display:flex;flex-direction:column;gap:14px;}
.ex-section{background:var(--darker);border-left:4px solid var(--btc);padding:12px 14px;}
.ex-section.red{border-left-color:var(--red);}
.ex-section.green{border-left-color:var(--green);}
.ex-lbl{font-family:'Press Start 2P',monospace;font-size:6px;color:var(--text-dim);margin-bottom:6px;}
.ex-big{font-family:'VT323',monospace;font-size:clamp(28px,5vw,38px);line-height:1;}
.ex-mxn{color:var(--btc);}
.ex-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.ex-inp{font-family:'Press Start 2P',monospace;font-size:9px;background:var(--darkest);border:2px solid var(--border);color:var(--text);padding:8px 10px;width:130px;outline:none;}
.ex-inp:focus{border-color:var(--btc);}
.ex-unit{font-size:16px;color:var(--text-dim);font-family:'VT323',monospace;}
.ex-slider{-webkit-appearance:none;width:160px;height:6px;background:var(--surface);outline:none;cursor:pointer;}
.ex-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--btc);cursor:pointer;}
.ex-slider-val{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--btc);min-width:34px;}
.ex-vs{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ex-card{background:var(--darkest);border:2px solid var(--border);padding:10px;}
.ex-card .ex-lbl{margin-bottom:4px;}
.ex-val{font-family:'VT323',monospace;font-size:clamp(22px,4vw,30px);line-height:1.1;}
.ex-val.good{color:var(--green);}
.ex-val.bad{color:var(--red);}
.ex-sub{font-family:'VT323',monospace;font-size:14px;color:var(--text-dim);margin-top:2px;}
.ex-note{font-family:'VT323',monospace;font-size:15px;color:var(--text-dim);margin-top:4px;}
.btn-done{font-family:'Press Start 2P',monospace;font-size:7px;background:var(--btc);color:var(--darker);border:none;padding:10px 20px;cursor:pointer;box-shadow:3px 3px 0 #000;display:block;margin-top:14px;}
.btn-done:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--darkest);}

/* ══ TRIVIA RÁPIDA ══ */
/* triviaOverlay now inline fixed */

.tri-head{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--btc);margin-bottom:16px;text-align:center;}
.tri-q{font-family:'VT323',monospace;font-size:clamp(20px,4vw,26px);color:var(--text);margin-bottom:16px;text-align:center;line-height:1.4;}
.tri-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:420px;margin-bottom:12px;}
.tri-btn{font-family:'Press Start 2P',monospace;font-size:7px;background:var(--dark);border:3px solid var(--border);color:var(--text-muted);padding:10px 8px;cursor:pointer;text-align:left;line-height:1.5;width:100%;}
.tri-btn:hover{border-color:var(--btc);color:var(--text);}
.tri-btn.correct{background:rgba(22,160,133,.2);border-color:var(--green);color:var(--green);}
.tri-btn.wrong{background:rgba(192,57,43,.2);border-color:var(--red);color:var(--red);}
.tri-fb{font-family:'VT323',monospace;font-size:18px;color:var(--text-muted);text-align:center;min-height:40px;padding:4px 0;}
.tri-score{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--text-dim);text-align:center;}


/* ══ AUDIO PANEL ══ */
#audioPanel{position:absolute;top:40px;right:8px;z-index:50;background:var(--darkest);
  border:3px solid var(--border);padding:12px 14px;display:none;min-width:200px;box-shadow:4px 4px 0 #000;}
#audioPanel.on{display:block;}
#audioBtn{position:absolute;top:8px;right:8px;z-index:51;background:var(--darker);border:2px solid var(--border);
  color:var(--text-dim);padding:4px 8px;cursor:pointer;font-family:'Press Start 2P',monospace;font-size:6px;
  transition:all .15s;}
#audioBtn:hover,#audioBtn.active{border-color:var(--btc);color:var(--btc);}
.au-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.au-lbl{font-family:'Press Start 2P',monospace;font-size:6px;color:var(--text-dim);min-width:60px;}
.au-slider{-webkit-appearance:none;width:100px;height:4px;background:var(--surface);outline:none;cursor:pointer;}
.au-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--btc);cursor:pointer;}
.au-mute{font-family:'Press Start 2P',monospace;font-size:6px;background:transparent;border:2px solid var(--border);
  color:var(--text-dim);padding:4px 8px;cursor:pointer;}
.au-mute:hover,.au-mute.on{border-color:var(--red);color:var(--red);}
.au-scene{font-family:'Press Start 2P',monospace;font-size:5px;color:var(--text-dim);margin-top:4px;
  padding-top:6px;border-top:1px solid var(--border);line-height:1.8;}
.au-scene span{color:var(--text-dim);}


/* ══ SKIP BADGE ══ */
.skip-badge{position:absolute;top:52px;right:12px;z-index:35;background:rgba(247,147,26,.15);border:1px solid rgba(247,147,26,.3);color:var(--btc);font-family:'Press Start 2P',monospace;font-size:5px;padding:3px 6px;cursor:pointer;display:none;}
.skip-badge.vis{display:block;}
.skip-badge:hover{background:rgba(247,147,26,.3);}

/* ══ BTC TICKER ══ */
.tdot{width:6px;height:6px;background:var(--red);animation:tickerPulse 2s infinite;}
@keyframes tickerPulse{0%,100%{background:var(--red)}50%{background:var(--green)}}
#tP.flash{color:var(--text)!important;transition:none!important;}

@keyframes rpgFadeOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.04)}}
@keyframes introBlink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes introFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:1}}
/* ── MODO CLARO — speaker name legible ── */
html.light #spk {
  color: #3D2B1F;
}