:root{color-scheme:dark;--gold:#ddbd77;--ink:#0d1720;--touchSize:66px;--touchOpacity:.82}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080e14;color:#f2ead7;font-family:Arial,sans-serif;touch-action:none;overscroll-behavior:none}button,input,select{font:inherit}button{cursor:pointer;color:#ede4cf;border:1px solid #58605d;background:#172832;padding:11px 20px;border-radius:4px;transition:background .15s, border-color .15s}button:hover,button:focus-visible{background:#2d4149;border-color:var(--gold);outline:2px solid transparent}button.primary{background:#d6b878;color:#18212a;border-color:#edcf8e;font-weight:bold}button:disabled{opacity:.38;cursor:default}#app{height:100%;max-width:1600px;margin:auto;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#hud{height:66px;flex-shrink:0;display:flex;align-items:center;gap:28px;padding:0 24px;background:#101b24;border-bottom:1px solid #536260}#hud small{font-size:9px;letter-spacing:2px;color:#9baeb1;display:block;margin-bottom:5px}#hud b{font-size:12px;letter-spacing:1px}.brand{font-family:Georgia,serif;font-size:30px;color:var(--gold);margin-right:auto}.brand span{font-size:17px}#hud button{padding:8px 12px}#viewport{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#0b121b}canvas{width:100%;height:100%;object-fit:contain;display:block}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#08121be8,#101b2477);overflow:auto;padding:22px}#overlay:empty{display:none}.panel{width:min(900px,100%);max-height:100%;overflow-y:auto;padding:24px 32px;background:#101c26f0;border:1px solid #50605d;box-shadow:0 15px 80px #0009;border-radius:8px;touch-action:pan-y}.hero{background:linear-gradient(90deg,#101c26f5,#101c26d9);max-width:790px}.eyebrow{font-size:10px;letter-spacing:4px;color:var(--gold);text-transform:uppercase;margin:0 0 16px}h1{font:clamp(29px,5vw,62px)/1.05 Georgia,serif;letter-spacing:-2px;margin:0 0 12px;color:#f4ecd5;text-shadow:0 3px 0 #172c35}h1 span{color:var(--gold)}h2{font:30px Georgia,serif;color:#eddbb0;margin:0 0 15px}h3{font:20px Georgia,serif;color:#e9d4a2}p{line-height:1.6;color:#bac9c9;margin:10px 0 18px}.menuGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-width:520px}.menuGrid button{text-align:left}.fine{font-size:11px;color:#8faaa9;line-height:1.5;margin-top:20px}.tag{color:#aecbc6;letter-spacing:2px;font-size:10px;border-left:2px solid var(--gold);padding-left:12px;margin:18px 0}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0}.row label{flex:1;min-width:180px;color:#c6d7d4}.row input[type=range]{max-width:220px;accent-color:var(--gold)}.row select{padding:10px;background:#1d303a;color:#fff;border:1px solid #526966}input[type=checkbox]{accent-color:var(--gold);width:20px;height:20px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.card{border:1px solid #47615f;padding:14px;border-radius:5px;background:#162830}.card.active{border-color:#e1bd71}.card p{font-size:13px}.map{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.map .node{border:1px solid #4c6565;border-radius:5px;padding:15px;font-size:13px}.node.current{background:#344947;border-color:var(--gold)}.node small{display:block;color:#b5c9c4;line-height:1.6;margin-top:10px}.node b{color:var(--gold);display:block;margin-bottom:9px;font:23px Georgia,serif}.tutorial{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.tutorial section{background:#192d36;padding:12px;border:1px solid #3b545b}.tutorial p{font-size:13px;margin:8px 0}.tutorial svg{width:100%;height:80px}kbd{background:#293d46;color:#f2dcae;padding:3px 6px;border-radius:3px;font:12px monospace}#toast{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);max-width:90%;text-align:center;background:#11242be8;border:1px solid #a38c58;padding:10px 18px;border-radius:4px;color:#ffe9ae;font-size:13px;pointer-events:none;opacity:0;transition:opacity .2s}#toast.show{opacity:1}#touch{height:95px;flex-shrink:0;display:none;justify-content:space-between;align-items:center;padding:5px 20px;background:#0c1922;border-top:1px solid #41595e;user-select:none;-webkit-user-select:none}#touch button{height:var(--touchSize);width:var(--touchSize);padding:0;opacity:var(--touchOpacity);border-radius:50%;font-size:15px;font-weight:bold;touch-action:none}.dpad,.actions{display:flex;gap:10px;align-items:center}.dpad>div{display:flex;gap:8px}.actions button:last-child{border-color:#d1a966;color:#ffdda2;background:#4c3927}.held{background:#52685e!important}.touchHint{font-size:9px;color:#8baaa6;letter-spacing:1px}#rotate{display:none;position:absolute;bottom:8px;background:#172a31e8;border:1px solid #927d50;padding:8px 12px;font-size:12px;text-align:center}table{width:100%;border-collapse:collapse;font-size:13px}td,th{padding:9px;text-align:left;border-bottom:1px solid #3a5055}a{color:#e6c989}@media(pointer:coarse){#touch{display:flex}}body.touch #touch{display:flex}@media(max-height:550px){#hud{height:45px;gap:18px;padding:0 12px}#hud small{font-size:8px;letter-spacing:1px;margin-bottom:2px}#hud b{font-size:10px}.brand{font-size:23px}#touch{height:78px}.panel{padding:16px 24px}#overlay{padding:12px}h1{font-size:38px}.hero .fine{margin-top:12px}.hero .tag{margin:12px 0}.hero p{margin:8px 0 10px}.menuGrid{grid-template-columns:repeat(4,1fr);max-width:none}.menuGrid button{padding:10px;font-size:12px}.eyebrow{margin-bottom:10px}}@media(max-width:650px){#hud{gap:10px;padding:0 8px}#hud .brand{display:none}#hud small{font-size:8px;letter-spacing:0}#hud b{font-size:9px;letter-spacing:0}#hud button{padding:7px}#hud>div:nth-child(2){margin-right:auto}.cards,.tutorial{grid-template-columns:1fr}.map{grid-template-columns:1fr 1fr}.touchHint{display:none}.panel{padding:18px}.menuGrid{grid-template-columns:1fr 1fr}}@media(orientation:portrait) and (pointer:coarse){#rotate{display:block}#touch{height:100px}.dpad,.actions{gap:4px}#touch button{width:52px;height:52px}.dpad>div{gap:4px}}