*{box-sizing:border-box}
:root{
  --bg:#0b1020; --bg2:#0e1530; --card:#121a3a; --ui:#1a2559; --text:#e8ecff;
  --accent:#7aa2ff; --ok:#4ee28a; --warn:#ffd15c; --danger:#ff6b6b; --rv:#7efff5; --gold:#ffda79;
}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;color:var(--text);background:linear-gradient(160deg,var(--bg),var(--bg2)) fixed}
#app{display:flex;flex-direction:column;height:100%}
.topbar,.bottombar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(0,0,0,0.25);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.06)}
.bottombar{border-top:1px solid rgba(255,255,255,.06);gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.portal-icon{font-size:22px}
.title{font-size:16px}
.currencies{display:flex;gap:16px;flex-wrap:wrap}
.currency{background:var(--card);padding:6px 10px;border-radius:12px;box-shadow:0 4px 12px #0004}
.currency .label{opacity:.7;margin-right:6px}
.actions button{margin-left:8px}
.main{display:grid;grid-template-columns:1.5fr 1fr;gap:12px;padding:12px;flex:1;min-height:0}
.era-scene{background:var(--card);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 24px #0005}
.era-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.energy-wrap{display:flex;align-items:center;gap:10px}
.energy-bar{width:240px;height:12px;background:#0003;border-radius:8px;overflow:hidden;border:1px solid #fff2}
#energyFill{height:100%;width:50%;background:linear-gradient(90deg,#46f0c1,#2ec9ff)}
.scene-canvas{position:relative;background:linear-gradient(#0e1530,#101b3f);border-radius:12px;flex:1;min-height:220px;overflow:hidden;padding:10px}
.portal{position:absolute;left:12px;bottom:12px;font-size:32px;filter:drop-shadow(0 6px 12px #00f8)}
#touristStream{position:absolute;left:60px;bottom:12px;display:flex;gap:4px;align-items:flex-end}
#eraDecor{position:absolute;right:12px;bottom:10px;font-size:20px;opacity:.9}
.upgrades{background:var(--card);border-radius:16px;padding:12px;box-shadow:0 10px 24px #0005;overflow:auto}
.upgrade-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.card{background:var(--ui);padding:10px;border-radius:14px;box-shadow:0 6px 16px #0006;display:flex;flex-direction:column;gap:6px}
.card .title{font-weight:700}
.card .desc{opacity:.8;font-size:13px}
.card .row{display:flex;align-items:center;justify-content:space-between;gap:8px}
button{border:none;background:#334; color:var(--text); padding:8px 10px;border-radius:12px;cursor:pointer;transition:.15s;box-shadow:0 2px 8px #0003}
button:hover{transform:translateY(-1px)}
button:disabled{opacity:.4;cursor:not-allowed}
button.primary{background:linear-gradient(180deg,#3d5cff,#1a42ff)}
button.rv{background:linear-gradient(180deg,#21e3d5,#1fb8f3);color:#0b1430}
button.gold{background:linear-gradient(180deg,#ffd36e,#ffb703);color:#2a1c00}
button.ghost{background:#0000;border:1px solid #fff3}
button.danger{background:linear-gradient(180deg,#ff7b7b,#ff5555)}
.bottombar .left{display:flex;gap:8px;flex-wrap:wrap}
.bottombar .right{display:flex;gap:12px;align-items:center}
.chest{background:var(--card);padding:8px 12px;border-radius:12px;box-shadow:0 6px 16px #0006;display:flex;align-items:center;gap:8px}
.modal{position:fixed;inset:0;background:#0008;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10}
.panel{position:fixed;inset:auto 10% 10% 10%;top:10%;background:var(--card);border:1px solid #fff2;border-radius:16px;padding:12px;box-shadow:0 20px 40px #0008;z-index:11;display:flex;flex-direction:column;gap:10px}
.panel.small{left:calc(50% - 220px);right:auto;width:440px}
.panel-header{display:flex;align-items:center;justify-content:space-between}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;overflow:auto}
.collections{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.collection{background:var(--ui);padding:10px;border-radius:12px}
.collection-items{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
.item{aspect-ratio:1;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#0003;border:1px dashed #fff3;font-size:20px}
.item.obtained{background:#2a5; border:1px solid #6fdcaa}
.quest-list{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow:auto}
.quest{background:var(--ui);padding:10px;border-radius:12px;display:flex;justify-content:space-between;align-items:center}
.progress{height:8px;background:#0003;border-radius:8px;overflow:hidden}
.progress>div{height:100%;background:linear-gradient(90deg,#4ee28a,#7aa2ff);width:0%}
.hidden{display:none !important}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#000c;padding:10px 14px;border-radius:12px;border:1px solid #fff2;box-shadow:0 10px 28px #0009}
.small{opacity:.7;font-size:12px}
.badge{padding:2px 6px;border-radius:8px;background:#0005;border:1px solid #fff2;font-size:12px}