:root{--bg:#f5f0e8;--bg2:#ede8dd;--bg3:#e0d9cc;--panel:#fff;--panel2:#faf8f4;--border:#d4cbb8;--border2:#b8ad98;--text:#2c2416;--text2:#5c4f38;--text3:#9c8c72;--gold:#b8860b;--gold2:#d4a017;--goldbg:#b8860b1a;--teal:#0d7a5f;--tealbg:#0d7a5f1a;--purple:#6b3fa0;--purplebg:#6b3fa01a;--blue:#1a5fa8;--bluebg:#1a5fa81a;--red:#c0392b;--redbg:#c0392b1a;--green:#27ae60;--greenbg:#27ae601a;--shadow:0 4px 24px #2c24161f;--shadow2:0 8px 40px #2c24162e;--r:14px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);width:100%;height:100%;overflow:hidden}body{color:var(--text);-webkit-user-select:none;user-select:none;font-family:Lato,sans-serif}.screen{z-index:10;opacity:0;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;padding:16px;transition:opacity .4s;display:flex;position:fixed;inset:0;overflow:hidden auto}.screen.active{opacity:1;pointer-events:all}.bg-pattern{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.bg-circle{opacity:.04;border-radius:50%;position:absolute}#intro{background:linear-gradient(160deg,#f9f5ec 0%,#ede5d0 100%)}.intro-zero{color:#0000;-webkit-text-stroke:2px var(--gold);text-shadow:4px 6px #b8860b26;font-family:Playfair Display,serif;font-size:clamp(7rem,22vw,14rem);font-weight:900;line-height:1;animation:4s ease-in-out infinite zero-breathe}@keyframes zero-breathe{0%,to{-webkit-text-stroke-color:#b8860b99}50%{-webkit-text-stroke-color:var(--gold);text-shadow:4px 6px #b8860b40,0 0 60px #b8860b1a}}.intro-title{letter-spacing:.04em;color:var(--text);text-align:center;margin-bottom:6px;font-family:Playfair Display,serif;font-size:clamp(1.4rem,5vw,2.4rem);font-weight:900}.intro-sub{color:var(--text2);text-align:center;margin-bottom:32px;font-size:clamp(.9rem,2.5vw,1.1rem);font-style:italic}.intro-badges{flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:28px;display:flex}.intro-badge{border:1.5px solid var(--border2);background:var(--panel);color:var(--text2);letter-spacing:.05em;border-radius:30px;padding:6px 14px;font-size:.75rem;font-weight:700}@keyframes fade-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.btn{cursor:pointer;letter-spacing:.04em;border:none;border-radius:40px;justify-content:center;align-items:center;gap:8px;font-family:Lato,sans-serif;font-weight:700;transition:transform .2s,box-shadow .2s,filter .2s;display:inline-flex}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#fff;padding:14px 36px;font-size:1rem;box-shadow:0 4px 20px #b8860b59}.btn-gold:hover{box-shadow:0 8px 32px #b8860b80}.btn-teal{background:linear-gradient(135deg,var(--teal),#17a380);color:#fff;padding:11px 28px;font-size:.9rem;box-shadow:0 4px 16px #0d7a5f4d}.btn-ghost{background:var(--panel);border:1.5px solid var(--border);color:var(--text2);padding:9px 22px;font-size:.85rem}.btn-ghost:hover{border-color:var(--border2);background:var(--bg2)}.btn-sm{padding:7px 16px;font-size:.78rem}.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}.card-warm{background:linear-gradient(135deg,#fffdf7,#fff8ec);border-color:#d4cbb8}#era-screen{background:linear-gradient(160deg,#f5f0e8 0%,#ede5d0 100%);padding-top:70px}.era-title{color:var(--text);text-align:center;margin-bottom:4px;font-family:Playfair Display,serif;font-size:clamp(1.4rem,4vw,2rem);font-weight:900}.era-sub{color:var(--text2);text-align:center;margin-bottom:22px;font-size:.95rem;font-style:italic}.era-grid{grid-template-columns:repeat(2,1fr);gap:14px;width:100%;max-width:580px;display:grid}.era-card{cursor:pointer;text-align:center;background:var(--panel);border:2px solid;border-radius:16px;padding:20px 16px;transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden}.era-card:hover:not(.locked){box-shadow:var(--shadow2);transform:translateY(-5px)}.era-card.locked{opacity:.45;cursor:not-allowed;filter:grayscale(.5)}.era-1{background:linear-gradient(135deg,#fffdf7,#fff9ed);border-color:#b8860b66}.era-2{background:linear-gradient(135deg,#f5fdf9,#eaf7f2);border-color:#0d7a5f59}.era-3{background:linear-gradient(135deg,#faf6ff,#f3eeff);border-color:#6b3fa059}.era-4{background:linear-gradient(135deg,#f5f9ff,#eaf0ff);border-color:#1a5fa859}.era-icon{margin-bottom:8px;font-size:2.4rem;display:block}.era-name{margin-bottom:3px;font-family:Playfair Display,serif;font-size:1rem;font-weight:700}.era-period{color:var(--text3);margin-bottom:7px;font-size:.72rem;font-style:italic}.era-desc{color:var(--text2);font-size:.78rem;line-height:1.45}.era-prog{background:var(--bg3);border-radius:4px;height:4px;margin-top:10px;overflow:hidden}.era-prog-fill{border-radius:4px;height:100%;transition:width .6s}.era-1 .era-prog-fill{background:linear-gradient(90deg,var(--gold),var(--gold2))}.era-2 .era-prog-fill{background:linear-gradient(90deg,var(--teal),#17a380)}.era-3 .era-prog-fill{background:linear-gradient(90deg,var(--purple),#9b59b6)}.era-4 .era-prog-fill{background:linear-gradient(90deg,var(--blue),#3498db)}.era-lock{opacity:.5;font-size:1rem;position:absolute;top:10px;right:12px}.era-done-badge{background:var(--greenbg);border:1px solid var(--green);color:var(--green);border-radius:20px;padding:2px 8px;font-size:.65rem;font-weight:700;position:absolute;top:10px;right:12px}#scene-screen{background:var(--bg);padding:0}.scene-canvas{opacity:.5;width:100%;height:100%;position:absolute;inset:0}.scene-overlay{background:linear-gradient(#f5f0e84d 0%,#f5f0e8d9 60%,#f5f0e8 100%);position:absolute;inset:0}.scene-content{z-index:5;flex-direction:column;gap:12px;width:100%;max-width:640px;height:100%;margin:auto;padding:16px;display:flex;position:relative}.scene-era-badge{letter-spacing:.1em;border:1.5px solid;border-radius:30px;align-self:flex-start;align-items:center;gap:8px;margin-top:12px;padding:5px 16px;font-family:Lato,sans-serif;font-size:.72rem;font-weight:700;display:inline-flex}.scene-chapter{color:var(--text);font-family:Playfair Display,serif;font-size:clamp(1.1rem,4vw,1.7rem);font-weight:900}.story-box{background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow2);border-radius:16px;margin-top:auto;padding:18px}.story-narrator{letter-spacing:.2em;text-transform:uppercase;color:var(--text3);margin-bottom:6px;font-size:.65rem;font-weight:700}.story-text{color:var(--text);min-height:60px;font-size:clamp(.9rem,2.5vw,1.05rem);line-height:1.75}.story-cursor{background:var(--gold);vertical-align:middle;width:2px;height:1em;margin-left:2px;animation:.7s step-end infinite blink;display:inline-block}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.story-btns{justify-content:flex-end;gap:8px;margin-top:12px;display:flex}.scene-sim-area{flex:1;justify-content:center;align-items:center;max-height:260px;padding:8px 0;display:flex;overflow-y:auto}.sim-container{flex-direction:column;gap:10px;width:100%;max-width:520px;display:flex}.sim-title{letter-spacing:.08em;color:var(--gold);text-align:center;text-transform:uppercase;margin-bottom:2px;font-family:Playfair Display,serif;font-size:.82rem;font-weight:700}.clay-tablet{letter-spacing:8px;text-align:center;background:linear-gradient(135deg,#f5e8d0,#e8d4b0,#f5e8d0);border:2.5px solid #c4a060;border-radius:12px;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;min-height:66px;padding:16px;font-size:1.8rem;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 2px 8px #643c0026}.clay-btn{color:var(--gold);cursor:pointer;background:#b8860b1f;border:1.5px solid #b8860b66;border-radius:10px;padding:7px 14px;font-family:Lato,sans-serif;font-size:1.2rem;font-weight:700;transition:all .2s}.clay-btn:hover{background:#b8860b38;transform:scale(1.05)}.tablet-value{color:var(--gold);font-family:Playfair Display,serif;font-size:1.8rem;font-weight:900}.gap-warning{color:var(--red);text-align:center;font-size:.78rem;font-style:italic;animation:.3s fade-up}.sim-input{border:1.5px solid var(--border);background:var(--panel);width:80px;color:var(--text);text-align:center;border-radius:8px;padding:7px;font-family:Playfair Display,serif;font-size:1rem;font-weight:700}.place-grid{grid-template-columns:repeat(4,1fr);gap:8px;width:100%;display:grid}.place-col{background:var(--bg2);border:1px solid var(--border);text-align:center;border-radius:10px;padding:8px 6px}.place-header{color:var(--text3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px;font-size:.62rem;font-weight:700}.place-power{color:var(--teal);margin-bottom:3px;font-size:.75rem;font-weight:700}.place-digit{font-family:Playfair Display,serif;font-size:1.8rem;font-weight:900;line-height:1;transition:all .3s}.place-digit.zero{color:var(--text3)}.place-digit.nonzero{color:var(--gold)}.place-contrib{color:var(--text3);margin-top:3px;font-size:.68rem}.bit-box{cursor:pointer;border:2px solid;border-radius:8px;justify-content:center;align-items:center;width:42px;height:42px;font-family:Playfair Display,serif;font-size:1.2rem;font-weight:900;transition:all .2s;display:flex}.bit-box.on{background:var(--tealbg);border-color:var(--teal);color:var(--teal);box-shadow:0 0 12px #0d7a5f33}.bit-box.off{background:var(--bg2);border-color:var(--border);color:var(--text3)}.alg-term{border:2px solid;border-radius:8px;padding:7px 12px;font-family:Playfair Display,serif;font-size:1rem;font-weight:700}.alg-op{color:var(--text3);font-size:1.2rem;font-weight:900}.alg-zero{background:var(--tealbg);border-color:var(--teal);color:var(--teal)}.alg-num{background:var(--goldbg);border-color:var(--gold);color:var(--gold)}.alg-result{background:var(--purplebg);border-color:var(--purple);color:var(--purple)}.alg-undefined{background:var(--redbg);border-color:var(--red);color:var(--red)}#quiz-screen{background:linear-gradient(160deg,#f5f0e8,#ede5d0);padding-top:70px}.quiz-inner{flex-direction:column;gap:14px;width:100%;max-width:560px;display:flex}.quiz-hud{border-radius:12px;align-items:center;gap:10px;padding:10px 14px;display:flex}.quiz-era-tag{letter-spacing:.1em;text-transform:uppercase;font-family:Lato,sans-serif;font-size:.72rem;font-weight:700}.quiz-xp{color:var(--gold);margin-left:auto;font-family:Playfair Display,serif;font-size:.85rem;font-weight:700}.quiz-combo{color:var(--red);font-size:.78rem;font-weight:700}.quiz-q{color:var(--text);background:var(--panel2);border:1px solid var(--border);text-align:center;border-radius:12px;padding:18px;font-family:Playfair Display,serif;font-size:clamp(1rem,3vw,1.15rem);font-style:italic;line-height:1.6}.quiz-opts{grid-template-columns:1fr 1fr;gap:8px;display:grid}.quiz-opt{border:1.5px solid var(--border);background:var(--panel);cursor:pointer;color:var(--text);text-align:left;border-radius:10px;padding:12px 14px;font-family:Lato,sans-serif;font-size:.88rem;line-height:1.4;transition:all .2s}.quiz-opt:hover{background:var(--bg2);border-color:var(--border2);transform:scale(1.02)}.quiz-opt.correct{background:var(--greenbg)!important;border-color:var(--green)!important;color:var(--green)!important}.quiz-opt.wrong{background:var(--redbg)!important;border-color:var(--red)!important;color:var(--red)!important}.quiz-progress{background:var(--bg3);border-radius:4px;height:4px;overflow:hidden}.quiz-progress-fill{border-radius:4px;height:100%;transition:width .5s}.quiz-fact-box{color:var(--text2);background:var(--goldbg);border:1px solid #b8860b40;border-radius:10px;padding:12px 14px;font-size:.84rem;font-style:italic;line-height:1.6;display:none}#drag-screen{background:linear-gradient(160deg,#f0f5f8,#e5ecf5);padding-top:70px}.drag-inner{flex-direction:column;gap:14px;width:100%;max-width:600px;display:flex}.drag-title{color:var(--text);text-align:center;font-family:Playfair Display,serif;font-size:1.5rem;font-weight:900}.drag-subtitle{color:var(--text2);text-align:center;font-size:.9rem;font-style:italic}.drag-items{background:var(--panel);border:1px solid var(--border);border-radius:12px;flex-wrap:wrap;justify-content:center;gap:8px;min-height:70px;padding:14px;display:flex}.drag-item{cursor:grab;background:var(--panel);-webkit-user-select:none;user-select:none;border:2px solid;border-radius:30px;padding:9px 16px;font-size:.88rem;font-weight:700;transition:all .2s}.drag-item:active{cursor:grabbing;box-shadow:var(--shadow2);transform:scale(1.06)}.drag-item.dragging{opacity:.5}.drop-zones{flex-direction:column;gap:8px;display:flex}.drop-zone-row{align-items:center;gap:10px;display:flex}.drop-zone-label{color:var(--text2);text-align:right;min-width:90px;font-size:.78rem;font-style:italic;font-weight:700}.drop-zone{border:2px dashed var(--border2);background:var(--bg2);border-radius:10px;flex-wrap:wrap;flex:1;align-items:center;gap:6px;min-height:46px;padding:6px;transition:all .2s;display:flex}.drop-zone.drag-over{border-color:var(--teal);background:var(--tealbg)}.drop-zone.correct-zone{border-color:var(--green);background:var(--greenbg);border-style:solid}.drop-zone.wrong-zone{border-color:var(--red);background:var(--redbg);border-style:solid}.drag-result{text-align:center;border-radius:10px;padding:12px;font-size:.9rem;font-weight:700;display:none}.drag-result.correct-msg{background:var(--greenbg);color:var(--green);border:1px solid var(--green)}.drag-result.wrong-msg{background:var(--redbg);color:var(--red);border:1px solid var(--red)}#memory-screen{background:linear-gradient(160deg,#f5eef8,#ede0f5);padding-top:70px}.memory-inner{flex-direction:column;gap:14px;width:100%;max-width:580px;display:flex}.memory-title{color:var(--text);text-align:center;font-family:Playfair Display,serif;font-size:1.5rem;font-weight:900}.memory-subtitle{color:var(--text2);text-align:center;font-size:.9rem;font-style:italic}.memory-stats{justify-content:center;gap:16px;display:flex}.memory-stat{text-align:center}.memory-stat-val{color:var(--purple);font-family:Playfair Display,serif;font-size:1.4rem;font-weight:900}.memory-stat-lbl{color:var(--text3);text-transform:uppercase;letter-spacing:.08em;font-size:.68rem}.memory-grid{grid-template-columns:repeat(4,1fr);gap:8px;width:100%;display:grid}.mem-card{aspect-ratio:1;cursor:pointer;transform-style:preserve-3d;border-radius:10px;transition:transform .4s;position:relative}.mem-card.flipped,.mem-card.matched{transform:rotateY(180deg)}.mem-card-front,.mem-card-back{backface-visibility:hidden;border-radius:10px;justify-content:center;align-items:center;padding:4px;display:flex;position:absolute;inset:0}.mem-card-front{background:var(--panel);border:2px solid var(--border);color:var(--text3);font-size:1.6rem}.mem-card-back{background:linear-gradient(135deg,var(--purplebg),#f3eeff);border:2px solid var(--purple);color:var(--purple);text-align:center;padding:6px;font-size:.65rem;font-weight:700;line-height:1.3;transform:rotateY(180deg)}.mem-card.matched .mem-card-back{background:var(--greenbg);border-color:var(--green);color:var(--green)}.mem-card.matched .mem-card-front{background:var(--greenbg);border-color:var(--green)}.memory-win{text-align:center;background:var(--greenbg);border:2px solid var(--green);border-radius:14px;padding:20px;display:none}#timeline-screen{background:linear-gradient(160deg,#f8f5e8,#f5edd0);padding-top:70px}.timeline-inner{flex-direction:column;gap:14px;width:100%;max-width:600px;display:flex}.timeline-title{color:var(--text);text-align:center;font-family:Playfair Display,serif;font-size:1.5rem;font-weight:900}.timeline-subtitle{color:var(--text2);text-align:center;font-size:.9rem;font-style:italic}.timeline-list{flex-direction:column;gap:8px;display:flex}.timeline-item{border:2px solid var(--border);background:var(--panel);cursor:grab;border-radius:10px;align-items:center;gap:12px;padding:12px 14px;transition:all .2s;display:flex}.timeline-item:active{cursor:grabbing;box-shadow:var(--shadow2)}.timeline-item.dragging-tl{opacity:.4;transform:scale(.97)}.timeline-item.drag-over-tl{border-color:var(--gold);background:var(--goldbg)}.timeline-num{color:var(--text3);text-align:center;min-width:28px;font-family:Playfair Display,serif;font-size:1.3rem;font-weight:900}.timeline-icon{text-align:center;min-width:36px;font-size:1.6rem}.timeline-info{flex:1}.timeline-name{color:var(--text);margin-bottom:2px;font-size:.92rem;font-weight:700}.timeline-desc{color:var(--text2);font-size:.77rem}.timeline-item.correct-tl{border-color:var(--green);background:var(--greenbg)}.timeline-item.wrong-tl{border-color:var(--red);background:var(--redbg)}.timeline-check-btn{padding:11px 28px;font-size:.9rem}.timeline-result{text-align:center;border-radius:10px;padding:12px;font-size:.92rem;font-weight:700;display:none}#complete-screen{background:linear-gradient(160deg,#f5f0e8,#ede5d0)}.complete-inner{text-align:center;flex-direction:column;align-items:center;gap:16px;max-width:500px;display:flex}.complete-symbol{font-size:5rem;animation:1.5s ease-in-out infinite complete-bounce}@keyframes complete-bounce{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}.complete-title{color:var(--text);font-family:Playfair Display,serif;font-size:clamp(1.4rem,5vw,2.2rem);font-weight:900}.complete-msg{color:var(--text2);max-width:420px;font-size:1rem;font-style:italic;line-height:1.7}.xp-burst{color:var(--teal);font-family:Playfair Display,serif;font-size:2rem;font-weight:900}#hud-bar{z-index:200;border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#f5f0e8f2;align-items:center;gap:10px;padding:10px 16px;transition:transform .4s;display:flex;position:fixed;top:0;left:0;right:0;transform:translateY(-110%)}#hud-bar.show{transform:translateY(0)}#hud-back-btn{cursor:pointer;color:var(--text2);background:0 0;border:none;border-radius:6px;padding:4px 8px;font-size:1.2rem;transition:all .15s}#hud-back-btn:hover{color:var(--text);background:var(--bg2)}#hud-title-txt{color:var(--text2);letter-spacing:.04em;flex:1;font-family:Lato,sans-serif;font-size:.82rem;font-weight:700}#hud-xp-txt{color:var(--gold);font-family:Playfair Display,serif;font-size:.82rem;font-weight:700}#hud-xp-bar{background:var(--bg3);border-radius:4px;width:80px;height:5px;overflow:hidden}#hud-xp-fill{background:linear-gradient(90deg,var(--gold),var(--gold2));border-radius:4px;height:100%;transition:width .5s}.xp-pop{color:var(--teal);pointer-events:none;z-index:700;font-family:Playfair Display,serif;font-size:.9rem;font-weight:700;animation:1.4s forwards xp-fly;position:fixed}@keyframes xp-fly{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-55px)scale(1.3)}}.spark{pointer-events:none;z-index:800;animation:spark-fly var(--dur,1s) ease forwards;border-radius:50%;position:fixed}@keyframes spark-fly{0%{opacity:1;transform:translate(0)scale(1)}to{opacity:0;transform:translate(var(--dx,0px),var(--dy,-60px)) scale(0)}}@keyframes conf-fall{0%{opacity:1;transform:translateY(-10px)rotate(0)}to{opacity:0;transform:translateY(110vh)rotate(720deg)}}.game-type-screen{background:linear-gradient(160deg,#f0f5f2,#e5f0ea)}.game-type-grid{grid-template-columns:repeat(2,1fr);gap:12px;width:100%;max-width:480px;display:grid}.game-type-card{border:2px solid var(--border);background:var(--panel);cursor:pointer;text-align:center;border-radius:14px;padding:18px 14px;transition:all .25s}.game-type-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}.game-type-icon{margin-bottom:8px;font-size:2.4rem}.game-type-name{color:var(--text);margin-bottom:4px;font-family:Playfair Display,serif;font-size:1rem;font-weight:700}.game-type-desc{color:var(--text2);font-size:.75rem;line-height:1.4}@media (width<=480px){.era-grid{grid-template-columns:1fr 1fr}.quiz-opts{grid-template-columns:1fr}.memory-grid{grid-template-columns:repeat(4,1fr)}.bit-box{width:34px;height:34px}.game-type-grid{grid-template-columns:1fr 1fr}}@media (width<=360px){.era-grid{grid-template-columns:1fr}.memory-grid{grid-template-columns:repeat(3,1fr)}.game-type-grid{grid-template-columns:1fr}}.therm-tube{border:2px solid var(--border);background:var(--bg2);border-radius:20px;width:22px;height:130px;position:relative;overflow:hidden}.therm-fill{border-radius:0 0 18px 18px;transition:height .3s,background .3s;position:absolute;bottom:0;left:0;right:0}.therm-bulb{border:2px solid var(--border);border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;margin-top:4px;font-size:1rem;display:flex}