:root{--panel:rgba(14,20,34,.82);--line:rgba(255,255,255,.14);--txt:#eef3ff;--mut:#a9b6cf;--acc:#4da3ff;--ok:#38c172}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0b1020;color:var(--txt);font:13px/1.35 Inter,system-ui,Segoe UI,Arial,sans-serif;overflow:hidden}
body.embed-mode,body.embed-mode #app{height:100vh;height:100dvh}
#app{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden}
#c{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.hud{position:absolute;pointer-events:none;z-index:3}
.hud *{pointer-events:auto}
.glass{background:var(--panel);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(6px);box-shadow:0 6px 24px rgba(0,0,0,.35)}
#brand{left:10px;top:8px;display:flex;gap:10px;align-items:center;text-shadow:0 2px 6px #000}
#emb{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:26px;border:2px solid rgba(255,255,255,.55);box-shadow:0 0 14px rgba(0,0,0,.5)}
#ttl{font-size:21px;font-weight:800;line-height:1.05;letter-spacing:.2px}
#sub{font-size:12px;color:#dfe8fa}
#chips{right:58px;top:10px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:62%}
.chip{padding:5px 9px;border-radius:9px;font-weight:700;white-space:nowrap;background:var(--panel);border:1px solid var(--line);display:flex;gap:5px;align-items:center;font-size:13px}
#topbtns{right:8px;top:8px;display:flex;flex-direction:column;gap:6px}
.ibtn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--txt);font-size:16px;cursor:pointer;display:grid;place-items:center}
.ibtn:hover,.ibtn.on{background:rgba(77,163,255,.35)}
#menu{left:8px;top:84px;display:flex;flex-direction:column;gap:4px;padding:5px}
.mb{width:60px;padding:6px 2px 4px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--txt);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:10.5px}
.mb b{font-size:20px;font-weight:400;line-height:1.1}
.mb:hover{background:rgba(255,255,255,.1)}
.mb.on{background:linear-gradient(#3a86e0,#2a5fb0);border-color:#7db8ff}
#panel{left:78px;top:84px;width:240px;max-height:55vh;overflow:auto;padding:10px;display:none}
#panel h4{margin:0 0 6px;font-size:14px}
#panel p{margin:4px 0;color:var(--mut)}
#panel button.act,.btn{display:block;width:100%;margin:5px 0;padding:7px 9px;border-radius:8px;border:1px solid var(--line);background:rgba(77,163,255,.25);color:var(--txt);cursor:pointer;text-align:left;font:inherit}
#panel button.act:hover,.btn:hover{background:rgba(77,163,255,.5)}
#panel button.act[disabled]{opacity:.45;cursor:not-allowed}
#panel .row{display:flex;justify-content:space-between;gap:8px}
#panel canvas{width:100%;height:80px;background:rgba(0,0,0,.25);border-radius:6px}
#obj{right:8px;top:calc(50% - 120px);width:214px;padding:8px 10px}
#obj h3{margin:0 0 6px;font-size:14px;display:flex;justify-content:space-between;cursor:pointer}
#obj ul{list-style:none;margin:0;padding:0}
#obj li{display:flex;gap:7px;align-items:flex-start;padding:3px 0;font-size:12px;color:#e6edfb}
#obj li i{flex:0 0 15px;height:15px;margin-top:1px;border:1.5px solid #8fa0bf;border-radius:3px;display:grid;place-items:center;font-style:normal;font-size:11px;color:#fff}
#obj li.d{color:#9fe3b9}
#obj li.d i{background:var(--ok);border-color:var(--ok)}
#bar{left:50%;bottom:8px;transform:translateX(-50%);display:flex;gap:4px;padding:5px;max-width:calc(100% - 270px);overflow-x:auto}
.bi{min-width:74px;padding:4px 4px 3px;border-radius:9px;border:1px solid transparent;background:rgba(255,255,255,.04);color:var(--txt);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:11px}
.bi img,.bi b{width:46px;height:46px;object-fit:contain;display:grid;place-items:center;font-size:28px;font-weight:400}
.bi small{color:var(--mut);font-size:9.5px}
.bi:hover{background:rgba(255,255,255,.12)}
.bi.on{background:rgba(77,163,255,.35);border-color:#7db8ff}
.bi.lock{opacity:.4}
.bi.bad small{color:#ff8a80}
#mini{left:8px;bottom:8px;width:108px;height:108px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(8,14,28,.7);overflow:hidden}
#mini canvas{display:block;width:100%;height:100%}
#extra{left:126px;bottom:10px}
.vit{display:grid;grid-template-columns:repeat(2,150px);gap:3px 12px;padding:6px 10px;font-size:11px}
.vit div{display:flex;flex-direction:column}
.vit i{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.15);overflow:hidden;margin-top:2px}
.vit u{display:block;height:100%;background:#4cd964;text-decoration:none}
#toast{left:50%;top:104px;transform:translateX(-50%);padding:8px 14px;border-radius:10px;background:rgba(10,16,30,.92);border:1px solid var(--line);display:none;max-width:70%;text-align:center}
#help{left:50%;top:58px;transform:translateX(-50%);color:#fff;text-shadow:0 1px 4px #000;font-size:12px;padding:3px 10px;border-radius:8px;background:rgba(0,0,0,.35);max-width:60%;text-align:center}
#touch{left:12px;bottom:130px;display:none;gap:6px;flex-direction:column}
#touch .pad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:3px}
#touch button{border-radius:10px;border:1px solid var(--line);background:rgba(14,20,34,.7);color:#fff;font-size:18px;touch-action:none}
#tacts{right:12px;bottom:120px;display:none;flex-direction:column;gap:6px}
#tacts button{width:48px;height:44px;border-radius:10px;border:1px solid var(--line);background:rgba(14,20,34,.7);color:#fff;font-size:12px;touch-action:none}
.modal{position:absolute;inset:0;z-index:10;background:rgba(5,8,16,.78);display:none;align-items:center;justify-content:center;padding:12px}
.modal.on{display:flex}
.modal .box{max-width:980px;width:100%;max-height:92%;overflow:auto;padding:14px}
.modal h2{margin:0 0 8px;font-size:18px;display:flex;justify-content:space-between}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sci h3{margin:10px 0 3px;font-size:14px}
.sci p,.sci li{color:#cfd9ee;margin:3px 0}
.sci code{background:rgba(255,255,255,.1);padding:1px 4px;border-radius:4px}
.ok{color:#7be0a0}.bad{color:#ff8a80}
#chips.ctr{left:50%;right:auto;top:12px;transform:translateX(-50%)}
@media (max-width:700px){
 #chips.ctr{top:52px;max-width:96%}#help{display:none}#panel{max-height:34vh}#extra{bottom:96px}
 #ttl{font-size:15px}#sub{display:none}#emb{width:36px;height:36px;font-size:19px}
 #chips{top:50px;right:50px;max-width:calc(100% - 60px);gap:3px}.chip{padding:3px 6px;font-size:11px}
 #menu{top:96px}.mb{width:46px;font-size:0}.mb b{font-size:18px}
 #obj{top:auto;bottom:100px;width:180px;right:6px}#obj.min ul{display:none}
 #bar{max-width:calc(100% - 12px)}.bi{min-width:60px}.bi img,.bi b{width:36px;height:36px}
 #mini{width:70px;height:70px;bottom:92px}#extra{bottom:92px;left:84px}.vit{grid-template-columns:repeat(2,100px)}
 #panel{left:60px;width:200px}#help{bottom:100px;max-width:90%;font-size:11px}
 #touch,#tacts{display:flex}#touch{bottom:170px}#tacts{bottom:170px;right:6px;left:auto}
 .gal{grid-template-columns:repeat(2,1fr)}
}

.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{position:relative;aspect-ratio:16/9;border-radius:12px;border:2px solid var(--line);cursor:pointer;color:#fff;padding:0;overflow:hidden;background:#10192e;display:block}
.tile canvas{position:absolute;inset:0;width:100%;height:100%}
.tile:hover,.tile.on{border-color:#7db8ff;box-shadow:0 0 0 2px rgba(125,184,255,.35)}
.tile .tt{position:absolute;left:8px;top:6px;text-align:left;font:900 clamp(11px,2.3vw,19px)/1 Inter,system-ui;text-shadow:0 2px 6px #000;letter-spacing:.3px}
.tile .tt b{display:block}.tile .tt span{display:block;font-weight:800;margin-top:2px}
.tile .tc{position:absolute;right:6px;top:6px;display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.tile .tc em{font-style:normal;font-weight:700;font-size:clamp(9px,1.6vw,12px);padding:2px 7px;border-radius:7px;background:rgba(10,18,34,.78);border:1px solid var(--line)}
.tile i{position:absolute;left:8px;bottom:6px;font-style:normal;font-size:clamp(14px,3vw,24px)}
#photoBtns{right:12px;bottom:12px;display:none;gap:8px;flex-direction:column;width:170px}
body.photo .hud{display:none!important}body.photo #photoBtns{display:flex!important}
#panel hr{border:0;border-top:1px solid var(--line);margin:6px 0}
#panel button.act small{opacity:.7;margin-left:4px}
.modal.sci li.ok{color:#9fe3b9}.modal.sci li.bad{color:#ff8a80}
.modal .box.glass.sci{max-width:760px}

#panel button.act.half{display:inline-block;width:calc(50% - 3px);text-align:center}
#panel button.act.half+button.act.half{margin-left:6px}
@media(max-width:700px){#obj{top:112px;bottom:auto;right:8px;width:148px}#extra{left:122px;right:6px;bottom:8px}.vit{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 8px;padding:5px 7px;font-size:10px}#railbtns{flex-wrap:wrap}#railbtns .btn{padding:4px 7px;margin:0}#help{display:none}#bar{max-width:calc(100% - 16px)}.tile .tc em{padding:1px 4px}}
.tile .tt span{filter:brightness(1.6) saturate(1.2)}