*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--ink: #0e0905;--ink2: #1c1409;--ink3: #271c0e;--ink4: #342514;--gold: #c09040;--gold2: #e4c06a;--gdim: #6a4e20;--cream: #f0e6ca;--text: #e4d8bc;--text2: #9e8e6e;--text3: #5a4a32;--red: #7a1818;--green: #164a20;--b1: #3a2a16;--b2: #5a4228;--serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;--body: Georgia, "Times New Roman", serif;--mono: "Courier New", Courier, monospace}html,body,#root{height:100%}body{background:var(--ink);color:var(--text);font-family:var(--body);line-height:1.75;min-height:100vh;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%230e0905'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%23120c06' opacity='.4'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23120c06' opacity='.3'/%3E%3C/svg%3E")}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes shimmer{0%,to{opacity:.6}50%{opacity:1}}@keyframes glow{0%,to{box-shadow:0 0 10px #c0904030,inset 0 0 10px #c0904010}50%{box-shadow:0 0 24px #c0904060,inset 0 0 18px #c0904020}}.panel{background:var(--ink2);border:1px solid var(--b2);position:relative}.panel:after{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;border:1px solid var(--b1);pointer-events:none}.orn{display:flex;align-items:center;gap:.9rem;color:var(--gdim);-webkit-user-select:none;user-select:none}.orn:before,.orn:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--b2),transparent)}.btn-primary{display:inline-block;padding:.75rem 2.4rem;background:var(--gold);color:var(--ink);border:none;font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .2s,transform .1s;position:relative}.btn-primary:hover{background:var(--gold2)}.btn-primary:active{transform:scale(.97)}.btn-ghost{display:inline-block;padding:.7rem 2rem;background:transparent;color:var(--text2);border:1px solid var(--b2);font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,color .2s}.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}.start-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background-image:radial-gradient(ellipse at 50% 20%,#3a200840 0%,transparent 65%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%230e0905'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%23120c06' opacity='.4'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23120c06' opacity='.3'/%3E%3C/svg%3E")}.start-frame{max-width:580px;width:100%;border:1px solid var(--b2);position:relative;padding:3.5rem 3rem;animation:fadeUp .7s ease;text-align:center;background:var(--ink2)}.start-frame:before{content:"";position:absolute;top:6px;right:6px;bottom:6px;left:6px;border:1px solid var(--b1);pointer-events:none}.start-frame:after{content:"✦";position:absolute;top:14px;left:50%;transform:translate(-50%);color:var(--gdim);font-size:.6rem;letter-spacing:.05em}.start-corner{position:absolute;color:var(--gdim);font-size:.75rem;line-height:1}.start-corner.tl{top:12px;left:14px}.start-corner.tr{top:12px;right:14px}.start-corner.bl{bottom:12px;left:14px}.start-corner.br{bottom:12px;right:14px}.start-era{font-family:var(--mono);font-size:.68rem;letter-spacing:.35em;color:var(--gold);text-transform:uppercase;margin-bottom:1.4rem;opacity:.9}.start-title{font-family:var(--serif);font-size:clamp(2.8rem,7vw,4.8rem);font-weight:400;color:var(--cream);letter-spacing:.06em;line-height:1;text-shadow:0 2px 40px rgba(192,144,64,.2)}.start-sub{font-family:var(--body);font-size:1rem;color:var(--text2);font-style:italic;margin-top:.5rem}.start-rule{width:56px;height:1px;background:var(--gold);margin:2rem auto;opacity:.5}.start-desc{font-size:.95rem;color:var(--text2);line-height:1.85;margin-bottom:2rem;max-width:400px;margin-left:auto;margin-right:auto}.start-cities{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;margin-bottom:2.5rem}.start-city{font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;color:var(--text3);border:1px solid var(--b1);padding:.25rem .75rem;text-transform:uppercase}.start-hint{display:block;margin-top:.9rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;color:var(--text3)}.cs-overlay{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem;padding:2rem;background-image:radial-gradient(ellipse at 50% 30%,#2a1a0830 0%,transparent 70%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%230e0905'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%23120c06' opacity='.4'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23120c06' opacity='.3'/%3E%3C/svg%3E");animation:fadeIn .4s ease}.cs-heading{text-align:center}.cs-eyebrow{font-family:var(--mono);font-size:.65rem;letter-spacing:.3em;color:var(--gdim);text-transform:uppercase;margin-bottom:.8rem}.cs-title{font-family:var(--serif);font-size:2.2rem;font-weight:400;color:var(--cream);letter-spacing:.05em}.cs-ornrule{display:flex;align-items:center;gap:.75rem;margin-top:.9rem;color:var(--gdim);font-size:.6rem}.cs-ornrule:before,.cs-ornrule:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--b2),transparent)}.cs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;width:100%;max-width:900px}@media (max-width: 700px){.cs-grid{grid-template-columns:repeat(2,1fr)}}.cs-card{background:var(--ink2);border:1px solid var(--b1);border-left:3px solid var(--b1);padding:1.75rem 1.4rem 1.4rem;cursor:pointer;transition:border-color .25s,background .25s,transform .2s,box-shadow .25s;display:flex;flex-direction:column;gap:.5rem;position:relative;min-height:200px;outline:none}.cs-card:not(.cs-done):hover{background:var(--ink3);transform:translateY(-3px);box-shadow:0 8px 24px #00000080}.cs-card.cs-active{background:var(--ink3);border-top-color:var(--gold);border-right-color:var(--gold);border-bottom-color:var(--gold);transform:translateY(-4px);box-shadow:0 10px 30px #0009,0 0 0 1px var(--gold) 20;animation:glow 2s ease-in-out infinite}.cs-card.cs-done{opacity:.35;cursor:default;pointer-events:none}.cs-card-badge{position:absolute;top:.7rem;right:.8rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--gdim);text-transform:uppercase}.cs-card.cs-active .cs-card-badge{color:var(--gold)}.cs-card-year{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;color:var(--gdim);margin-bottom:.2rem}.cs-card.cs-active .cs-card-year{color:var(--gold2)}.cs-card-name{font-family:var(--serif);font-size:1.2rem;color:var(--text);font-weight:400;line-height:1.2;letter-spacing:.02em}.cs-card.cs-active .cs-card-name{color:var(--cream)}.cs-card-rule{width:24px;height:1px;background:var(--b2);margin:.3rem 0;transition:width .2s,background .2s}.cs-card.cs-active .cs-card-rule{width:36px;background:var(--gold)}.cs-card-sub{font-size:.8rem;color:var(--text3);line-height:1.5;font-style:italic;flex:1}.cs-card.cs-active .cs-card-sub{color:var(--text2)}.cs-card-char{display:flex;justify-content:center;margin-top:.75rem;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}.cs-card.cs-active .cs-card-char{opacity:1;transform:none}.cs-footer{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;justify-content:center}.cs-hint{font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;color:var(--text3)}.cs-confirm{background:var(--gold);color:var(--ink);border:none;padding:.7rem 2.2rem;font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .15s}.cs-confirm:hover{background:var(--gold2)}.cs-confirm:disabled{opacity:.3;cursor:default}.game-layout{min-height:100vh;display:flex;flex-direction:column}.game-header{background:var(--ink2);border-bottom:1px solid var(--b1);padding:.9rem 2rem;display:flex;align-items:center;gap:2rem;flex-wrap:wrap;position:sticky;top:0;z-index:10}.game-logo{font-family:var(--serif);font-size:1.05rem;letter-spacing:.08em;font-style:italic;color:var(--gold);white-space:nowrap}.game-main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:2.5rem 1.5rem 5rem}.progress-bar-container{flex:1;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}.chapter-dots{display:flex;gap:.5rem}.chapter-dot{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;padding:.2rem .55rem;border:1px solid var(--b1);color:var(--text3);transition:all .2s;white-space:nowrap}.chapter-dot.active{color:var(--gold);border-color:var(--gold)}.chapter-dot.done{color:var(--text2);border-color:var(--b2)}.progress-track{flex:1;min-width:60px;height:2px;background:var(--b1);overflow:hidden}.progress-fill{height:100%;background:var(--gold);transition:width .5s ease}.progress-label{font-family:var(--mono);font-size:.68rem;color:var(--text3);white-space:nowrap}.chapter-intro{width:100%;max-width:660px;animation:fadeUp .5s ease}.chapter-intro-content{background:var(--ink2);border:1px solid var(--b2);padding:2.75rem;position:relative;box-shadow:0 12px 50px #0009}.chapter-intro-content:before{content:"";position:absolute;top:6px;right:6px;bottom:6px;left:6px;border:1px solid var(--b1);pointer-events:none}.chapter-tag{font-family:var(--mono);font-size:.67rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem}.chapter-title{font-family:var(--serif);font-size:2.1rem;font-weight:400;color:var(--cream);line-height:1.15}.chapter-subtitle{font-size:.95rem;color:var(--text2);font-style:italic;margin-top:.4rem}.chapter-divider{width:40px;height:1px;background:var(--gold);margin:1.6rem 0;opacity:.6}.chapter-narrative{color:var(--text2);font-size:.95rem;line-height:1.9;margin-bottom:2.2rem;border-left:2px solid var(--b1);padding-left:1.3rem}.chapter-narrative p+p{margin-top:1rem}.scene{width:100%;max-width:720px;animation:fadeUp .4s ease}.scene-header{display:flex;align-items:center;gap:.9rem;margin-bottom:1.4rem}.character-portrait{width:52px;height:52px;border:1px solid var(--b2);background:var(--ink3);display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0}.character-name{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}.scene-narrative{background:var(--ink2);border:1px solid var(--b1);border-left:3px solid var(--gold);padding:1.3rem 1.6rem;margin-bottom:1.75rem;font-size:.95rem;color:var(--text2);line-height:1.9;font-style:italic;box-shadow:0 4px 20px #0000004d}.scene-narrative p+p{margin-top:.75rem}.question-block{margin-bottom:1.3rem}.question-text{font-family:var(--serif);font-size:1.08rem;color:var(--cream);margin-bottom:1.1rem;line-height:1.55}.options-grid{display:grid;gap:.5rem}.option-btn{display:flex;align-items:flex-start;gap:.8rem;width:100%;text-align:left;padding:.9rem 1.1rem;background:var(--ink2);border:1px solid var(--b1);font-family:var(--body);font-size:.93rem;color:var(--text2);cursor:pointer;transition:border-color .15s,background .15s,color .15s;line-height:1.55}.option-btn:hover:not(:disabled){border-color:var(--b2);background:var(--ink3);color:var(--text)}.option-btn.correct{border-color:#2a7a3a;background:#0a1e0e;color:#68d878}.option-btn.wrong{border-color:#7a2020;background:#1e0a0a;color:#d86868}.option-btn.selected{border-color:var(--b2)}.option-btn:disabled{cursor:default}.option-letter{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.06em;color:var(--gold);min-width:1.1rem;padding-top:.22rem;flex-shrink:0}.feedback-box{border:1px solid var(--b1);padding:1.3rem 1.6rem;background:var(--ink2);margin-top:.3rem;animation:fadeUp .3s ease}.feedback-box.feedback-correct{border-color:#2a7a3a}.feedback-box.feedback-wrong{border-color:#7a2020}.feedback-header{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.6rem}.feedback-correct .feedback-header{color:#68d878}.feedback-wrong .feedback-header{color:#d86868}.feedback-explanation{font-size:.92rem;color:var(--text2);line-height:1.8;margin-bottom:1.2rem}.end-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem}.end-content{max-width:560px;text-align:center;animation:fadeUp .6s ease}.end-tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:.8rem}.end-title{font-family:var(--serif);font-size:2.2rem;font-weight:400;color:var(--cream);margin-bottom:1rem}.end-rating{font-size:2rem;margin-bottom:.5rem}.end-rating-text{font-style:italic;color:var(--text2);margin-bottom:2rem;font-size:.95rem}.end-score-box{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.3rem;background:var(--ink2);border:1px solid var(--b2);padding:1.3rem 2.2rem;margin-bottom:2rem;justify-content:center}.end-score-number{font-family:var(--serif);font-size:3.2rem;font-weight:400;line-height:1;color:var(--gold)}.end-score-of{font-size:1.5rem;color:var(--text3)}.end-score-label{width:100%;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);text-align:center}.end-summary{text-align:left;background:var(--ink2);border:1px solid var(--b1);padding:1.6rem;margin-bottom:2rem}.end-summary h3{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text2);margin-bottom:1rem;font-weight:400}.end-summary ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}.end-summary li{font-size:.9rem;color:var(--text2);padding-left:1rem;border-left:2px solid var(--gold);line-height:1.6}@keyframes shake{0%,to{transform:none}20%{transform:translate(-7px)}40%{transform:translate(7px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.matching-board{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}@media (max-width: 520px){.matching-board{grid-template-columns:1fr}}.matching-col{display:flex;flex-direction:column;gap:.4rem}.matching-col-label{font-family:var(--mono);font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gdim);margin-bottom:.35rem}.matching-card{display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;padding:.7rem .95rem;background:var(--ink2);border:1px solid var(--b1);font-family:var(--body);font-size:.88rem;color:var(--text2);cursor:pointer;transition:border-color .15s,background .15s,color .15s,box-shadow .15s;line-height:1.4;min-height:46px}.matching-card:hover:not(:disabled):not(.mg-matched){border-color:var(--b2);background:var(--ink3);color:var(--text)}.matching-card.mg-selected{border-color:var(--gold);background:var(--ink3);color:var(--cream);box-shadow:0 0 0 1px #c0904030,inset 0 0 12px #c0904010}.matching-card.mg-active:hover:not(:disabled){border-color:var(--gold);background:var(--ink3)}.matching-card.mg-matched{border-color:#2a7a3a;background:#0a1e0e;color:#68d878;cursor:default;pointer-events:none}.matching-card.mg-wrong{border-color:#7a2020;color:#d86868;animation:shake .5s ease}.matching-card:disabled:not(.mg-matched){opacity:.45;cursor:default}.mg-check{font-size:.75rem;color:#68d878;flex-shrink:0}.matching-hint{font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;color:var(--text3);margin-bottom:1rem;padding:.45rem .8rem;border-left:2px solid var(--b1);transition:color .2s,border-color .2s}.matching-hint.active{color:var(--gold);border-color:var(--gold)}