@font-face{font-family:LocalSerif;src:local('Georgia')}*{box-sizing:border-box} :root{--ink:#233d35;--muted:#748077;--paper:#f6f4eb;--gold:#b48b49;--line:#dcded2;--green:#355b48}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 'Segoe UI',Arial,sans-serif}button{font:inherit;cursor:pointer;border:1px solid var(--line);background:#fffdf5;color:var(--ink);border-radius:9px;padding:9px 13px;transition:background .15s,transform .15s}button:hover{background:#e7ecdf}button:active{transform:translateY(1px)}button:focus-visible,canvas:focus-visible{outline:3px solid #bf964e;outline-offset:3px}button:disabled{opacity:.45;cursor:not-allowed}kbd{font:11px 'Segoe UI',sans-serif;border:1px solid #cbd1c5;border-radius:4px;padding:2px 5px;color:#68776a;background:#fafaf2}.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 28px;gap:16px}.brand{display:flex;align-items:center;gap:13px}.brand-mark{font-size:33px;color:var(--gold);line-height:1;border:1px solid #bba775;border-radius:50%;width:43px;height:43px;text-align:center;padding-top:3px}.eyebrow,.section-label{font-size:10px;letter-spacing:1.8px;font-weight:700;color:var(--muted)}h1{font:25px/1.2 LocalSerif,Georgia,serif;margin:3px 0 0}h2{font:36px/1.1 LocalSerif,Georgia,serif;letter-spacing:-1px;margin:14px 0}h3{font:22px/1.2 LocalSerif,Georgia,serif;margin:9px 0}.chapter{font-size:12px;color:#738072;display:flex;gap:12px;align-items:center}.dot{width:6px;height:6px;background:#8d9e67;border-radius:50%}.separator{color:#b9bfaf}.topbar nav{display:flex;gap:9px}.topbar nav kbd{margin-left:8px}.icon-button{width:38px;padding:8px}main{display:grid;grid-template-columns:302px minmax(0,1fr);height:calc(100dvh - 84px);min-height:550px}.sidebar{display:flex;flex-direction:column;padding:28px 25px 20px;border-right:1px solid var(--line);overflow:auto}.description{color:var(--muted);font-size:12px;margin:0 0 24px}.quest-card{background:#e9ede1;border:1px solid #d7decb;border-radius:12px;padding:18px}.quest-card p{font-size:12px;line-height:1.6;color:#637361;min-height:57px;margin:9px 0 15px}.primary{background:var(--green);border-color:var(--green);color:#f6f4e8;display:flex;align-items:center;justify-content:space-between;gap:20px}.primary:hover{background:#264a38}.quest-card .primary{width:100%;font-size:12px}.steps{list-style:none;margin:22px 0;padding:0}.steps li{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:12px;color:#8e9789}.steps li .step-dot{width:19px;height:19px;border:1px solid #cfd4c6;border-radius:50%;display:grid;place-items:center;font-size:10px;flex-shrink:0}.steps li.active{color:#2e513d;font-weight:600}.steps li.active .step-dot{background:#385c47;color:#fff;border-color:#385c47}.steps li.done{color:#6c805e}.steps li.done .step-dot{background:#e5eadb;border-color:#d6dfc8}.materials{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}.resource-grid{display:flex;gap:12px;margin-top:12px}.resource-grid>div{flex:1;display:grid;grid-template-columns:25px 1fr;background:#eeeee3;border-radius:8px;padding:9px}.resource-icon{grid-row:span 2;font-size:21px;color:#957848}.resource-grid strong{font-size:18px;line-height:1.1}.resource-grid small{font-size:10px;color:#84907d}.hero-card{display:flex;gap:10px;align-items:center;margin-top:22px}.avatar{height:32px;width:32px;background:#d7dece;border-radius:50%;display:grid;place-items:center;font:18px Georgia}.hero-card strong{display:block;font-size:11px}.hero-card small{display:block;font-size:10px;color:#899180}.scene{position:relative;overflow:hidden;background:#dce4d3;min-height:520px}canvas{width:100%;height:100%;display:block;touch-action:none;outline:none}.scene-top{position:absolute;top:20px;left:22px;right:22px;display:flex;justify-content:space-between;pointer-events:none;gap:10px}.location-pill{background:#f7f6ecdf;border:1px solid #cdd5c3;border-radius:20px;padding:7px 13px;font-size:11px}.prototype-pill{font-size:9px;letter-spacing:1.5px;color:#6e816b;align-self:center}.camera-controls{position:absolute;right:20px;bottom:85px;display:flex;background:#f8f8ec;border:1px solid #cdd5c3;border-radius:9px;overflow:hidden}.camera-controls button{border:0;border-radius:0;background:transparent;font-size:18px;width:35px;padding:4px}.bottom-guide{position:absolute;bottom:0;left:0;right:0;display:flex;gap:18px;align-items:center;padding:12px 20px;background:#f3f5e9e8;border-top:1px solid #ccd6c0;font-size:10px;color:#76806e}.bottom-guide button{margin-left:auto;font-size:10px;padding:4px 9px;background:transparent;border:0}.interaction{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);background:#223e33ed;color:#f5f3e7;padding:9px 15px;border-radius:9px;display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:12px;pointer-events:none;box-shadow:0 5px 20px #233d3520}.interaction kbd{background:#ffffff18;color:#e5eadc;border-color:#7c9076}.toast{position:absolute;top:64px;left:50%;transform:translateX(-50%) translateY(-10px);background:#fdf9e9f5;border:1px solid #d4c695;color:#556144;border-radius:8px;padding:10px 18px;font-size:12px;opacity:0;transition:.25s;pointer-events:none;max-width:85%;text-align:center;box-shadow:0 5px 25px #233d3510}.toast.visible{opacity:1;transform:translateX(-50%)}.modal-backdrop{position:fixed;inset:0;background:#203b355c;backdrop-filter:blur(5px);display:grid;place-items:center;z-index:20;padding:24px}.modal-backdrop[hidden]{display:none}.modal{position:relative;width:min(600px,100%);max-height:85dvh;overflow:auto;background:#f9f7ed;border:1px solid #ffffff80;border-radius:19px;padding:36px;box-shadow:0 30px 90px #17372a35}.modal h2{font-size:34px;margin:12px 0 18px}.modal p{color:#687264;line-height:1.8;font-size:14px}.modal-close{position:absolute;right:15px;top:14px;padding:1px 10px;border:0;background:transparent;font-size:25px}.modal-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.modal-actions button{flex:1;min-width:160px}.intro-symbol{font:72px/1 Georgia;color:#bd9854;margin:8px 0 18px}.modal .quote{border-left:2px solid #b49b62;padding-left:15px;font-family:Georgia;font-style:italic;font-size:18px;color:#53664b}.item-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.item-list span{background:#e9ecdf;padding:10px 12px;border-radius:6px;font-size:12px}.note{background:#eeecde;padding:12px 15px;border-radius:8px;font-size:12px;color:#7b7b62}.blueprint{display:flex;gap:15px;border:1px solid #ccd7c2;border-radius:9px;padding:14px;margin:12px 0}.blueprint b{display:block;font-size:14px}.blueprint small{display:block;color:#76836b;margin-top:6px}.blueprint-symbol{font-size:35px;color:#9b8558}.touch-controls{display:none}@media(max-width:1100px){.chapter{display:none}main{grid-template-columns:270px 1fr}.sidebar{padding:22px 20px}.scene-top{left:14px;right:14px}.prototype-pill{display:none}.bottom-guide{gap:7px;padding:10px;font-size:9px}.bottom-guide span:nth-child(2){display:none}}@media(max-height:770px) and (min-width:761px){.sidebar{padding-top:17px}.sidebar h2{font-size:29px;margin:10px 0}.description{margin-bottom:14px}.quest-card{padding:13px}.quest-card p{min-height:0;margin:8px 0 12px}.steps{margin:16px 0}.steps li{margin-bottom:8px}.hero-card{margin-top:13px}.materials{padding-top:10px}}@media(max-width:760px){.topbar{height:66px;padding:0 13px}.brand-mark{display:none}h1{font-size:21px}.brand .eyebrow{font-size:8px}.topbar nav button{font-size:11px;padding:7px}.topbar nav kbd{display:none}main{height:auto;min-height:calc(100dvh - 66px);display:flex;flex-direction:column}.sidebar{order:2;padding:17px;display:block}.sidebar>h2,.sidebar>.description,.sidebar>.section-label,.hero-card,.materials,.steps{display:none}.quest-card{padding:14px;display:grid;grid-template-columns:1fr auto;gap:0 12px}.quest-card .eyebrow,.quest-card h3,.quest-card p{grid-column:1}.quest-card h3{font-size:19px}.quest-card p{margin:5px 0;min-height:0}.quest-card .primary{grid-column:2;grid-row:1/4;align-self:center;max-width:135px}.scene{height:65dvh;min-height:420px;order:1}.scene-top{top:12px}.interaction{bottom:67px;font-size:10px}.bottom-guide{height:37px}.bottom-guide span{display:none}.camera-controls{bottom:115px;right:12px}.touch-controls{display:flex;position:absolute;bottom:45px;left:12px;gap:3px}.touch-controls button{padding:5px 9px;background:#faf8eada}.interaction{left:auto;right:12px;transform:none;bottom:78px}.modal{padding:25px}.modal h2{font-size:28px}.item-list{grid-template-columns:1fr}}
.camera-controls{bottom:72px;max-width:calc(100% - 24px);flex-wrap:wrap}.camera-controls button{min-width:30px}

.next-step{position:absolute;z-index:4;top:58px;left:14px;max-width:calc(100% - 28px);background:#fff9e8ed;border:1px solid #b59b65;box-shadow:0 2px 9px #18362633;text-align:left;font-size:13px;color:#294331}.next-step:hover{background:#fff4ca}

.audio-controls{position:absolute;z-index:4;top:103px;left:14px;display:flex;gap:5px}.audio-controls button{font-size:11px;padding:5px 8px;background:#f8f5e8df}.hero-speech{position:absolute;bottom:110px;left:50%;transform:translateX(-50%);z-index:5;background:#fbf6e8eb;color:#334a36;border-radius:9px;padding:8px 14px;opacity:0;pointer-events:none;transition:opacity .2s;max-width:85%;font-size:13px}.hero-speech.visible{opacity:1}

.audio-controls{top:auto;bottom:46px;left:14px;align-items:center;max-width:calc(100% - 28px);flex-wrap:wrap}.audio-controls input{width:95px;accent-color:#46634d}@media(max-width:760px){.audio-controls{bottom:155px}.audio-controls input{width:65px}}

.bottom-guide .audio-controls{position:static;display:flex;flex-wrap:nowrap;margin-left:auto;max-width:none;gap:4px}.bottom-guide .audio-controls button{font-size:10px;padding:3px 5px}.bottom-guide .audio-controls input{width:70px}.bottom-guide #restartBtn{margin-left:5px}@media(max-width:760px){.bottom-guide .audio-controls input{width:45px}.bottom-guide .audio-controls button{font-size:9px}}

.bottom-guide .audio-controls input{width:48px}.bottom-guide .audio-controls{flex-shrink:0}

.bottom-guide .audio-controls input{width:24px;min-width:24px}
.about-eras{padding-left:22px;color:#53664b;line-height:1.65;font-size:14px}.about-eras li{margin:0 0 12px}.about-eras b{display:block;color:#304b3c}
.topbar nav #aboutBtn{display:inline-flex;align-items:center;font-size:12px;padding:9px 12px;color:#52674d;text-decoration:none;border:1px solid #cdd5c3;border-radius:7px;background:#f8f8ec}.topbar nav #aboutBtn:hover{background:#e4eadb}
.game-logo{width:76px;height:52px;object-fit:contain;border-radius:5px}.brand-tagline{display:block;font-size:10px;color:#61715a;letter-spacing:.02em;margin-top:3px}@media(max-width:760px){.game-logo{display:none}.brand-tagline{font-size:8px}}
.resource-grid .resource-icon{display:block;width:54px;height:54px;background-image:url('assets/resource-icons-v1.png');background-size:200% 100%;background-repeat:no-repeat}.resource-grid .resource-wood{background-position:left center}.resource-grid .resource-stone{background-position:right center}
.game-logo{background:transparent;border:0;border-radius:0}
.topbar .brand{cursor:pointer;text-decoration:none;color:inherit}.topbar .brand:hover,.topbar .brand:focus-visible,.topbar nav a:hover{text-decoration:none}
.resource-grid{gap:8px}.resource-grid>div{grid-template-columns:44px minmax(0,1fr);column-gap:8px;align-items:center;min-width:0;padding:10px 8px}.resource-grid .resource-icon{width:44px;height:44px;grid-column:1;grid-row:1 / 3}.resource-grid strong{grid-column:2;grid-row:1;align-self:end;line-height:1.2}.resource-grid small{grid-column:2;grid-row:2;align-self:start;margin-top:3px;white-space:nowrap}
/* Readable sidebar: dark text; completed steps remain green. */
.sidebar>.section-label,.sidebar .materials>.section-label{color:#20251f;font-size:12px;letter-spacing:1px}
.sidebar .description{color:#252b24;font-size:14px;line-height:1.65}
.sidebar #saveStatus{color:#20251f;font-size:13px;line-height:1.5}
.sidebar .steps li{color:#252b24;font-size:14px;line-height:1.4}
.sidebar .steps li.active{color:#172019;font-weight:700}
.sidebar .steps li.done{color:#23713a}
.sidebar .steps li.done .step-dot{color:#23713a;border-color:#8ab394;background:#e4f0df}
.sidebar .resource-grid small{color:#242b23;font-size:12px}
.sidebar .resource-grid strong{color:#172019}
.sidebar .hero-card small{color:#30392e;font-size:12px}
.topbar .chapter,.topbar .chapter .separator,.topbar nav button,.topbar nav #aboutBtn,.brand-tagline,.location-pill,.prototype-pill,.sidebar .quest-card .eyebrow,.sidebar .quest-card p,.bottom-guide,.bottom-guide button,.bottom-guide .audio-controls button,.bottom-guide kbd{color:#161b17}
.topbar .chapter{font-size:13px}.brand-tagline{font-size:12px}.sidebar .quest-card p{font-size:14px;line-height:1.6}.sidebar .quest-card .eyebrow{font-size:12px}.bottom-guide{font-size:12px}.bottom-guide button,.bottom-guide .audio-controls button{font-size:12px}.bottom-guide kbd{font-size:11px}.location-pill{font-size:14px}
@media(min-width:1101px){.topbar{display:grid;grid-template-columns:274px minmax(0,1fr) auto;column-gap:16px}.topbar .brand{min-width:0;gap:10px}.topbar .brand>div{min-width:0}.topbar .brand-tagline{font-size:11px;white-space:normal}.topbar .chapter{justify-self:start;margin:0;white-space:nowrap}.topbar nav{justify-self:end}}