:root{--ink:#29241d;--paper:#f7f3e9;--gold:#aa7628;--muted:#6e675d;--panel:rgba(250,247,239,.88);--line:rgba(59,48,34,.2)}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#b9d5df;color:var(--ink);font-family:Arial,sans-serif}
button,a{font:inherit;color:inherit}
#app,#scene{position:fixed;inset:0;width:100%;height:100%}
#app{background:linear-gradient(#8fc5dc 0%,#c9dde1 48%,#ead9b9 100%)}
#scene{display:block;touch-action:none}
header{position:fixed;z-index:30;inset:0 0 auto;height:74px;padding:0 30px;display:flex;align-items:center;justify-content:space-between;background:rgba(248,244,234,.92);border-bottom:1px solid var(--line);box-shadow:0 8px 28px #42515d1c;backdrop-filter:blur(12px)}
.brand{font-size:22px;font-weight:950;letter-spacing:-1px;color:#24211c;text-decoration:none}
.title{text-align:center}
.title small,.intro small,.levels>small,.fact>small,.history small{font-size:8px;letter-spacing:2.1px;font-weight:900;color:var(--gold)}
.title h1{margin:5px 0 0;font:500 24px/1 Georgia,serif}
.tools{display:flex;gap:7px}
.tools button{width:39px;height:39px;border:1px solid var(--line);background:#fff9;cursor:pointer}
.tools button:hover{border-color:var(--gold);color:var(--gold)}

.intro{position:fixed;z-index:22;left:30px;top:106px;width:298px;padding:20px 21px 22px;border-left:3px solid var(--gold);background:var(--panel);box-shadow:0 18px 52px #3a45532b;backdrop-filter:blur(13px)}
.intro h2{margin:10px 0 12px;font:500 34px/1.04 Georgia,serif}
.intro p{margin:0 0 17px;color:var(--muted);font-size:11px;line-height:1.58}
.intro button{height:39px;padding:0 14px;border:1px solid #9e6c22;background:#b98535;color:#fff;display:flex;align-items:center;gap:16px;font-size:7px;letter-spacing:1px;font-weight:950;cursor:pointer;box-shadow:0 8px 18px #80591e2c}
.intro button i{font-size:14px}
.intro button.opened{background:#fff;color:#96651f}

.levels{position:fixed;z-index:24;right:25px;top:103px;width:226px;padding:14px 15px;background:var(--panel);box-shadow:0 18px 52px #3a455329;backdrop-filter:blur(13px)}
.levels>small{display:block;text-align:right;margin-bottom:8px}
.levels button{width:100%;padding:9px 2px;border:0;border-top:1px solid var(--line);background:transparent;display:grid;grid-template-columns:31px 1fr;gap:8px;text-align:left;cursor:pointer;opacity:.48;transition:.25s}
.levels button.active,.levels button:hover{opacity:1;color:#91601d;transform:translateX(-4px)}
.levels i{font:italic 15px Georgia,serif}
.levels span{display:flex;flex-direction:column}
.levels b{font-size:10px}
.levels em{margin-top:2px;color:#8e877c;font:italic 9px Georgia,serif}

.fact{position:fixed;z-index:21;left:30px;bottom:128px;width:298px;padding:16px 18px;background:var(--panel);box-shadow:0 15px 45px #3a455326;backdrop-filter:blur(12px)}
.fact h3{margin:7px 0 7px;font:italic 22px/1.08 Georgia,serif}
.fact p{margin:0;color:var(--muted);font-size:10px;line-height:1.52}
.source{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);color:#91897c;font-size:7px;line-height:1.45}
.history{position:fixed;z-index:25;left:50%;bottom:22px;transform:translateX(-50%);width:520px;padding:12px 15px 13px;background:rgba(250,247,239,.92);border:1px solid #fff8;box-shadow:0 16px 45px #39465135;backdrop-filter:blur(13px)}
.history>div{display:flex;justify-content:space-between}
.history b{font-size:8px;letter-spacing:1px;color:#96651f}
.history nav{display:grid;grid-template-columns:repeat(2,1fr);margin-top:9px;border:1px solid var(--line)}
.history nav button{height:28px;border:0;border-right:1px solid var(--line);background:#ffffff57;color:#777168;font-size:8px;cursor:pointer}
.history nav button:last-child{border:0}
.history nav button.active{background:#b98535;color:#fff;font-weight:900}
.history p{margin:8px 0 0;color:#777066;font-size:8px;text-align:center}
.legend{position:fixed;z-index:15;left:29px;bottom:18px;display:flex;gap:14px;color:#514b43;font-size:7px;text-shadow:0 1px 2px #fff}
.legend span{display:flex;align-items:center;gap:5px}
.legend i{width:7px;height:7px;border-radius:50%}
.stone{background:#c9b184}
.wood{background:#71401f}
.bronze{background:#a56725}
.gesture{position:fixed;z-index:15;left:29px;bottom:6px;color:#5d574f;font-size:7px}
.credits{position:fixed;z-index:15;right:25px;bottom:9px;color:#625c53;font-size:7px}
.credits a{color:#7d5317;text-decoration:none}
#ring{position:fixed;z-index:23;right:25px;bottom:62px;height:36px;padding:0 14px;border:1px solid #9d6a20;background:rgba(255,250,241,.9);color:#87591a;font-size:7px;letter-spacing:.9px;font-weight:900;cursor:pointer;box-shadow:0 9px 25px #46515d2b}
#ring i{margin-right:7px}
#ring.active{background:#b98535;color:#fff}

#loader{position:fixed;z-index:100;inset:0;background:#f3eee2;color:#2a251e;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.65s opacity}
#loader.done{opacity:0;pointer-events:none}
#loader>b{font-size:25px}
#loader>span{margin:13px 0 18px;font:italic 22px Georgia,serif}
#loader>i{width:230px;height:2px;background:#4b3e2920}
#loader em{display:block;width:0;height:100%;background:var(--gold);transition:.2s}
@media(max-width:980px){.levels{display:none}
.intro{left:14px;top:92px;width:280px}
.fact{left:14px;bottom:124px;width:280px}
.credits{display:none}
.history{width:430px}
.legend,.gesture{display:none}
}
@media(max-width:640px){header{height:64px;padding:0 11px}
.brand{font-size:18px}
.title small{display:none}
.title h1{font-size:16px}
.tools button{width:34px;height:34px}
.intro{top:75px;left:8px;width:calc(100% - 16px);padding:10px 13px}
.intro h2{font-size:21px;margin:5px 0}
.intro p{display:none}
.intro button{position:absolute;right:8px;top:9px;height:34px}
.fact{left:8px;bottom:148px;width:calc(100% - 16px);padding:10px 13px}
.fact h3{font-size:18px;margin:5px 0}
.fact p,.source{display:none}
.history{left:8px;right:8px;bottom:10px;transform:none;width:auto}
.history p{height:18px}
.history>div small{display:none}
#ring{right:8px;bottom:124px;height:32px}
}