body[data-screen="intro"],body[data-screen="guide"]{background:#e3ebd7}body[data-screen="intro"] header,body[data-screen="guide"] header{background:#f7f8edb3;height:72px;border-bottom:1px solid #d2ddc5}body[data-screen="intro"] main,body[data-screen="guide"] main{max-width:none;padding:0}.welcome-screen,.tutorial-screen{min-height:calc(100svh - 72px);position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;padding:42px 24px}.welcome-landscape{position:absolute;inset:0;z-index:-2;pointer-events:none;background:#d5e3c7}.welcome-landscape svg{height:100%;width:100%;opacity:.6}.welcome-screen:after,.tutorial-screen:after{content:'';position:absolute;inset:0;background:linear-gradient(#eff4e2c4,#e9f1dfb3 55%,#dbe7cc75);z-index:-1}.welcome-content{text-align:center;width:min(100%,640px);position:relative;padding:10px 0}.welcome-emblem{display:grid;place-items:center;width:68px;height:68px;border:1px solid #587b4c;border-radius:50%;margin:0 auto 25px;font-family:Arial,sans-serif;color:#426e45;font-size:27px;box-shadow:0 0 0 6px #f5f7e68a}.welcome-content .eyebrow{color:#6b8251;letter-spacing:5px;font-size:13px;margin:0 0 14px}.welcome-content h1{font-family:'Be Vietnam Pro',sans-serif;font-size:clamp(24px,3.4vw,40px);font-weight:800;color:#244b35;line-height:1.3;margin:0}.welcome-subtitle{font-size:13px;color:#667d57;line-height:1.8;margin:16px 0 32px}.name-panel{width:min(100%,440px);margin:auto;padding:30px 32px 26px;border-radius:18px;border:1px solid #fffdf1;background:#fffdf0e8;box-shadow:0 18px 60px #3553311a,0 2px 10px #35533108;display:flex;flex-direction:column;gap:15px}.name-panel label{font-size:18px;font-weight:700;color:#2e5139}.name-panel input{padding:17px 14px;border:1px solid #c8d4b7;border-radius:9px;text-align:center;background:#fffef8;font-size:16px;min-width:0;color:#22412c}.name-panel input::placeholder{color:#9da78e;font-size:14px}.name-panel .primary{background:#315b3e;letter-spacing:1px;padding:17px}.name-panel .primary span,.start-game span{margin-left:20px}.name-panel small{font-size:10px;color:#8a957c;line-height:1.6}.welcome-meta{display:flex;justify-content:center;align-items:center;gap:20px;margin:28px 0 0;font-size:11px;color:#617a50}.welcome-meta i{color:#a7b288;font-size:10px}.tutorial-screen{padding:38px 28px 25px}.tutorial-screen .welcome-landscape{filter:blur(5px);transform:scale(1.025)}.tutorial-screen:after{background:#eef2e1c9}.tutorial-content{max-width:1100px;width:100%;text-align:center}.tutorial-content>.eyebrow{font-size:10px;color:#778b5e;letter-spacing:2px}.tutorial-content h1{font-family:inherit;font-weight:800;font-size:34px;margin:0 0 12px;color:#2a4f36}.tutorial-intro{color:#7e8e6e;font-size:13px;margin:0 0 28px;line-height:1.7}.lesson-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}.lesson-cards article{position:relative;background:#fffef3ec;border:1px solid #fffef6;border-radius:18px;padding:24px 23px;box-shadow:0 10px 28px #3a5f2f0c}.lesson-number{display:inline-flex;background:#e5edda;color:#6b8457;font-weight:700;letter-spacing:1px;font-size:11px;padding:6px 9px;border-radius:6px}.lesson-cards svg{width:100%;height:155px;display:block;margin:4px 0 12px}.lesson-cards h3{font-size:16px;color:#36533b;margin:0 0 12px}.lesson-cards p{color:#7b8870;font-size:12px;line-height:1.9;margin:0}.lesson-cards b{color:#566f48;font-weight:600}.lesson-cards small{display:block;margin-top:12px;font-size:10px;line-height:1.7;color:#9a9e88}.tutorial-finish{margin:24px auto 22px}.tutorial-finish>p{font-size:12px;color:#62784f;margin:0 0 14px}.journey-legend{display:flex;align-items:center;justify-content:center;gap:14px}.journey-legend span{font-size:10px;color:#677c54;display:flex;gap:6px;align-items:center}.journey-legend i{display:block;width:20px;height:5px;border-radius:5px}.journey-legend>b{font-size:12px;color:#a3b28e;font-weight:400}.start-game{min-width:255px;letter-spacing:2px;background:#315b3e;font-size:14px;padding:18px 28px;box-shadow:0 6px 16px #355e3221}.tutorial-timing{font-size:10px;color:#829372;margin:13px 0 2px}.tutorial-content>.quiet{font-size:11px;color:#7e9070}.tutorial-note{font-size:9px;color:#8a987e;line-height:1.8;margin:8px 0 0}#guide{max-width:1000px}#guide h2{text-align:center;font-family:inherit;font-size:24px;margin-bottom:25px}#guide .lesson-cards article{border:1px solid #e3e9d7;padding:15px}#guide .lesson-cards svg{height:120px}#guide .lesson-cards h3{font-size:14px}#guide .lesson-cards p{font-size:11px}#guide>.close-guide{display:block;margin:20px auto 0}.era{background:#edf0e8e8;border-color:#d8dfd2;transition:background .4s}.era-complete{background:color-mix(in srgb,var(--stage-color) 37%,#f5f4e6 63%);border-color:color-mix(in srgb,var(--stage-color) 65%,white)}.era h3{color:#677065}.era-complete h3{color:#2d4931}.board-slot{border-color:#b8c0b2;background:#fbfcf6;color:#728168}.board-slot.main-slot{min-height:66px;width:100%}.board-slot.sub-slot{min-height:42px;width:86%;padding:6px 9px;font-size:11px}.era:last-child .board-slot.main-slot{min-height:60px}.era:last-child .board-slot.sub-slot{min-height:40px}.board-slot.filled:not(.stage-filled){background:#f9fbf1;border:1px solid #b7c3ad;color:#556449}.board-slot.stage-filled:not(.trend-slot){border-color:color-mix(in srgb,var(--stage-color) 60%,white);background:#fffef2;color:#294932;animation:slot-fit .3s ease-out}.trend-slot:not(.stage-filled) svg{filter:grayscale(1);opacity:.65}.trend-slot.stage-filled{border:0;background:transparent;box-shadow:none;width:118px;max-height:58px;padding:0}.trend-slot.stage-filled svg{width:100%;height:50px;filter:drop-shadow(0 2px 1px #fffdf2)}.trend-slot.stage-filled svg path{stroke:var(--stage-color)}.trend-slot.stage-filled svg path:last-child{stroke:none;fill:var(--stage-color)}.stage-line.line-complete{animation:line-reveal .5s ease-out}.all-complete .timeline{filter:drop-shadow(0 0 3px #e9ed8b)}.instruction-bar .step-badge{font-size:21px}.board-landscape{opacity:.35}.historical-board{height:445px}.era-complete .board-slot{box-shadow:0 2px 6px #35512c12}@keyframes slot-fit{from{transform:scale(.95);opacity:.7}to{transform:scale(1);opacity:1}}@keyframes line-reveal{from{opacity:.25;stroke-width:2}to{opacity:1;stroke-width:6}}@media(max-width:800px){.lesson-cards{gap:12px}.lesson-cards article{padding:17px 15px}.lesson-cards svg{height:125px}.lesson-cards h3{font-size:14px}.lesson-cards p{font-size:11px}.tutorial-content h1{font-size:28px}.tutorial-screen{padding:28px 18px}.tutorial-intro{font-size:12px}.welcome-screen{padding:30px 20px}.welcome-subtitle{font-size:12px}.name-panel{padding:25px}.historical-board{height:430px}}@media(max-width:600px){.lesson-cards{grid-template-columns:1fr}.lesson-cards article{display:grid;grid-template-columns:100px 1fr;column-gap:14px;align-items:start;padding:19px}.lesson-cards .lesson-number{grid-column:1;justify-self:start}.lesson-cards svg{grid-column:1;grid-row:2/5;height:94px;margin:0}.lesson-cards h3{grid-column:2;grid-row:1;margin:5px 0 9px}.lesson-cards p{grid-column:2;grid-row:2;font-size:11px;line-height:1.8}.lesson-cards small{grid-column:2;grid-row:3;font-size:9px;margin-top:7px}.tutorial-content h1{font-size:25px}.tutorial-screen{padding:28px 14px}.tutorial-intro{margin-bottom:20px}.tutorial-finish>p{font-size:11px}.tutorial-note{font-size:9px}.welcome-emblem{width:56px;height:56px;margin-bottom:20px}.welcome-content h1{font-size:24px}.name-panel label{font-size:16px}.name-panel{padding:24px 20px}.welcome-meta{font-size:10px;gap:12px}.historical-board{height:430px}#guide{padding:30px 18px}#guide .lesson-cards svg{height:80px}}
.trend-slots{bottom:15px}.board-arrows:empty:after{content:"Đã ghép đủ 4 thẻ mũi tên";grid-column:1/-1;min-height:112px;display:grid;place-items:center;color:#899879;font-size:12px;border:1px dashed #cbd5b7;border-radius:8px}
.board-slot,.board-content .card,.answer-row{white-space:pre-line}.board-arrows .arrow-card{height:135px;padding:6px 4px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center}.board-arrows .arrow-card svg{height:90px;width:100%;min-width:0}.arrow-caption{font-size:10px;line-height:1.4;font-weight:700;color:#365344;white-space:normal}.trend-slot svg{height:58px;width:90px}.trend-slot{max-height:68px}.trend-slot.stage-filled{width:130px;max-height:80px}.trend-slot.stage-filled svg{height:78px;width:120px}.board-content .card{min-height:65px}.board-arrows:empty:after{min-height:135px}@media(max-width:620px){.board-arrows .arrow-card{height:115px}.board-arrows .arrow-card svg{height:75px}.arrow-caption{font-size:9px}}
.era-complete{background:color-mix(in srgb,var(--stage-color) 85%,#f5f4e6 15%)}.era-complete h3{color:#173c24}.all-complete .timeline{filter:none}