:root{
  --bg:#120a26; --bg2:#1d1240; --card:rgba(40,26,84,.72); --card2:rgba(58,38,118,.6);
  --line:rgba(170,140,255,.22); --text:#efe9ff; --muted:#a99cd0; --gold:#ffd36b; --mana:#7fd8ff;
  --accent:#9b6bff; --accent2:#5ad1ff; --good:#5be3a1; --bad:#ff6b8a; --r:14px;
  --shadow:0 6px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--text); font-size:15px; line-height:1.35;
  background:radial-gradient(1200px 700px at 20% -10%,#3a1f78 0%,transparent 60%),
             radial-gradient(900px 600px at 110% 10%,#123a6b 0%,transparent 55%),
             linear-gradient(180deg,var(--bg2),var(--bg));
  background-attachment:fixed; -webkit-tap-highlight-color:transparent; overflow-x:hidden;
}
body::before{ /* starfield */
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.55;z-index:0;
  background-image:radial-gradient(1.5px 1.5px at 10% 20%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 30% 70%,#fff 50%,transparent 51%),
  radial-gradient(1.2px 1.2px at 55% 35%,#dff 50%,transparent 51%),radial-gradient(1px 1px at 75% 80%,#fff 50%,transparent 51%),
  radial-gradient(1.6px 1.6px at 88% 15%,#ffe 50%,transparent 51%),radial-gradient(1px 1px at 45% 90%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 65% 55%,#fff 50%,transparent 51%),radial-gradient(1.3px 1.3px at 20% 50%,#eef 50%,transparent 51%);
  background-size:420px 420px;
}
#app{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:10px 12px 16px;}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;}
h2{font-family:Georgia,"Times New Roman",serif;font-size:19px;margin:0 0 10px;letter-spacing:.3px;color:#f6edff}
h3{font-size:14px;margin:16px 0 6px;color:var(--gold);text-transform:uppercase;letter-spacing:.8px}
.muted{color:var(--muted)} .tiny{font-size:12px} .hidden{display:none!important}

/* top bar */
.topbar{display:flex;align-items:center;gap:12px;padding:8px 14px;border-radius:var(--r);
  background:linear-gradient(90deg,rgba(60,35,130,.85),rgba(30,50,110,.8));border:1px solid var(--line);box-shadow:var(--shadow);position:sticky;top:6px;z-index:20;backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:8px;font-family:Georgia,serif;font-size:21px;font-weight:700;white-space:nowrap}
.brand-icon{font-size:24px;filter:drop-shadow(0 0 6px #b48bff)}
.brand-name{background:linear-gradient(90deg,#fff,#d9c4ff,#8fe3ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.resource{flex:1;text-align:center;min-width:0}
.mana-amount{font-size:28px;font-weight:800;color:var(--mana);text-shadow:0 0 14px rgba(127,216,255,.5);font-variant-numeric:tabular-nums;white-space:nowrap}
.mana-icon{font-size:20px;margin-right:6px;vertical-align:2px}
.mana-rate{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.buff-chip{margin-left:8px;padding:1px 8px;border-radius:99px;background:linear-gradient(90deg,#ff9f43,#ffd36b);color:#2a1400;font-weight:700;font-size:12px}
.top-actions{display:flex;gap:6px}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.06);font-size:18px}
.icon-btn:hover{background:rgba(255,255,255,.14)}

/* layout */
main{display:grid;gap:12px;margin-top:12px;
  grid-template-columns:300px minmax(0,1.15fr) minmax(0,1fr);
  grid-template-areas:"left gens tabs" "left gens panels";grid-template-rows:auto 1fr;align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:14px;backdrop-filter:blur(4px)}
.orb-col{grid-area:left;display:flex;flex-direction:column;align-items:center;gap:10px;position:sticky;top:84px}
.panel-gens{grid-area:gens}
#tabs{grid-area:tabs}
.panels{grid-area:panels;min-height:300px}
.panels .panel{display:none}
main[data-tab=upgrades] #panel-upgrades,main[data-tab=gens] #panel-upgrades,main[data-tab=ascend] #panel-ascend,
main[data-tab=achievements] #panel-achievements,main[data-tab=stats] #panel-stats,main[data-tab=settings] #panel-settings{display:block}
.tab-gens{display:none!important}

/* tabs */
.tabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(20,12,45,.7);border:1px solid var(--line)}
.tab{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 2px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:17px}
.tab span{font-size:11.5px;font-weight:600}
.tab:hover{background:rgba(255,255,255,.06);color:var(--text)}
main[data-tab=gens] .tab[data-tab=gens],main[data-tab=upgrades] .tab[data-tab=upgrades],main[data-tab=ascend] .tab[data-tab=ascend],
main[data-tab=achievements] .tab[data-tab=achievements],main[data-tab=stats] .tab[data-tab=stats],main[data-tab=settings] .tab[data-tab=settings]{background:linear-gradient(180deg,#6d45d8,#4b2ea8);color:#fff}
.dot{position:absolute;top:5px;right:calc(50% - 18px);width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}

/* tower + orb */
.tower-wrap{width:100%;max-width:240px}
#tower{width:100%;height:auto;display:block}
.orb{position:relative;width:170px;height:170px;border-radius:50%;border:0;padding:0;background:transparent;outline:none;transition:transform .06s}
.orb:focus-visible{box-shadow:0 0 0 3px var(--accent2)}
.orb-core{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffffff 0%,#c9f1ff 10%,#6fc8ff 32%,#6a3fe0 70%,#2a1170 100%);
  box-shadow:0 0 40px rgba(120,190,255,.6),inset -12px -16px 30px rgba(30,0,80,.6);animation:orbspin 8s linear infinite}
.orb-glow{position:absolute;inset:-18px;border-radius:50%;background:radial-gradient(circle,rgba(140,200,255,.35),transparent 65%);animation:pulse 2.4s ease-in-out infinite;pointer-events:none}
.orb-shine{position:absolute;left:24%;top:16%;width:26%;height:16%;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(3px);transform:rotate(-25deg)}
.orb:hover .orb-core{filter:brightness(1.1)}
.orb.pop{transform:scale(.93)}
@keyframes pulse{0%,100%{transform:scale(.95);opacity:.7}50%{transform:scale(1.06);opacity:1}}
@keyframes orbspin{from{filter:hue-rotate(0deg)}50%{filter:hue-rotate(25deg)}to{filter:hue-rotate(0deg)}}
.orb-caption{color:var(--muted);font-size:14px} .orb-caption b{color:var(--mana)}
.floor-card{width:100%;padding:10px;border-radius:12px;background:var(--card2);border:1px solid var(--line);text-align:center}
.floor-card .fname{font-family:Georgia,serif;font-weight:700;color:var(--gold)}
.floor-card .fdesc{font-size:12.5px;color:var(--muted);margin:3px 0 8px}

/* buttons */
.btn{border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:9px 14px;font-weight:700;
  background:linear-gradient(180deg,#7b54ec,#5634c4);box-shadow:0 3px 0 #2d1a73;transition:transform .05s,filter .1s}
.btn:hover{filter:brightness(1.12)} .btn:active{transform:translateY(2px);box-shadow:0 1px 0 #2d1a73}
.btn:disabled,.btn.off{filter:grayscale(.7) brightness(.7);cursor:not-allowed}
.btn.small{padding:6px 11px;font-size:13px}
.btn.gold{background:linear-gradient(180deg,#ffd36b,#e09a20);color:#2b1700;box-shadow:0 3px 0 #8a5a00}
.btn.danger{background:linear-gradient(180deg,#e2556f,#a32541);box-shadow:0 3px 0 #5e1022}
.btn.wide{width:100%}
.row-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.file-btn input{display:none}
textarea{width:100%;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.3);color:var(--text);padding:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;resize:vertical}
.setting-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}

/* generators */
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.panel-head h2{margin:0}
.buy-amt{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.buy-amt button{border:0;background:transparent;color:var(--muted);padding:5px 10px;font-weight:700;font-size:13px}
.buy-amt button.on{background:var(--accent);color:#fff}
.floor-label{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--gold);margin:12px 2px 6px;display:flex;align-items:center;gap:8px}
.floor-label::after{content:"";flex:1;height:1px;background:var(--line)}
.gen{display:grid;grid-template-columns:46px 1fr auto;gap:10px;align-items:center;padding:8px 10px;margin-bottom:6px;border-radius:12px;
  background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--line);transition:border-color .2s,background .2s}
.gen.can{border-color:rgba(127,216,255,.55);background:linear-gradient(90deg,rgba(127,216,255,.10),rgba(155,107,255,.06))}
.gen.locked{opacity:.45;filter:grayscale(.6)}
.gen-icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:26px;background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.18),rgba(0,0,0,.15));position:relative}
.gen-owned{position:absolute;right:-6px;bottom:-6px;min-width:22px;padding:0 5px;height:20px;border-radius:10px;background:var(--gold);color:#2b1700;font-size:12px;font-weight:800;display:grid;place-items:center}
.gen-name{font-weight:700}
.gen-sub{font-size:12px;color:var(--muted)}
.gen-buy{min-width:104px;text-align:center;line-height:1.1}
.gen-buy small{display:block;font-size:11px;font-weight:600;opacity:.85}

/* upgrades */
.upg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.upg{display:flex;flex-direction:column;gap:4px;text-align:left;padding:9px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.upg.can{border-color:rgba(255,211,107,.7);background:linear-gradient(180deg,rgba(255,211,107,.14),rgba(255,255,255,.03))}
.upg .u-top{display:flex;gap:6px;align-items:center;font-weight:700;font-size:13px}
.upg .u-ico{font-size:20px}
.upg .u-desc{font-size:12px;color:var(--muted);flex:1}
.upg .u-cost{font-size:13px;font-weight:700;color:var(--mana)}
.upg:not(.can) .u-cost{color:var(--bad)}

/* ascend */
.asc-box{padding:12px;border-radius:12px;background:linear-gradient(135deg,rgba(255,211,107,.12),rgba(155,107,255,.12));border:1px solid rgba(255,211,107,.35);margin-bottom:10px}
.asc-big{font-size:26px;font-weight:800;color:var(--gold)}
.perk{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;padding:8px;border-radius:10px;border:1px solid var(--line);margin-bottom:6px;background:rgba(255,255,255,.03)}
.perk.owned{border-color:rgba(91,227,161,.5);background:rgba(91,227,161,.08)}
.perk .p-ico{font-size:22px;text-align:center}
.perk .p-name{font-weight:700;font-size:13.5px}
.perk .p-desc{font-size:12px;color:var(--muted)}

/* achievements & stats */
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.ach{padding:9px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.18);text-align:center}
.ach .a-ico{font-size:26px;filter:grayscale(1) brightness(.5)}
.ach .a-name{font-weight:700;font-size:13px;margin-top:2px}
.ach .a-desc{font-size:11.5px;color:var(--muted)}
.ach.got{border-color:rgba(255,211,107,.55);background:linear-gradient(180deg,rgba(255,211,107,.14),rgba(0,0,0,.1))}
.ach.got .a-ico{filter:none}
.stats-table{width:100%;border-collapse:collapse;font-size:14px}
.stats-table td{padding:6px 4px;border-bottom:1px solid var(--line)}
.stats-table td:last-child{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;color:var(--mana)}

/* fx */
#fx-layer{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.float-num{position:absolute;font-weight:800;color:#bff0ff;text-shadow:0 0 8px #4fb6ff,0 2px 0 #20104a;font-size:20px;animation:floatup 1s ease-out forwards;white-space:nowrap;transform:translate(-50%,-50%)}
.float-num.big{color:var(--gold);text-shadow:0 0 10px #ff9f43,0 2px 0 #3b1d00;font-size:26px}
@keyframes floatup{0%{opacity:1;margin-top:0}100%{opacity:0;margin-top:-80px}}
.spark{position:absolute;width:7px;height:7px;border-radius:50%;background:#bfeaff;box-shadow:0 0 8px #6fc8ff;animation:spark .6s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.bump{animation:bump .25s}
@keyframes bump{50%{transform:scale(1.06)}}
.wisp{position:fixed;z-index:40;font-size:40px;border:0;background:transparent;padding:6px;filter:drop-shadow(0 0 12px #ffe27a) drop-shadow(0 0 22px #ff9fe6);animation:wispbob 1.2s ease-in-out infinite;transition:left 12s linear}
@keyframes wispbob{50%{transform:translateY(-14px) rotate(8deg)}}

/* toasts & modal */
#toasts{position:fixed;right:12px;bottom:12px;z-index:60;display:flex;flex-direction:column;gap:8px;max-width:300px}
.toast{background:linear-gradient(90deg,#3d2590,#283d8f);border:1px solid rgba(255,211,107,.55);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow);font-size:13.5px;animation:toastin .3s ease-out}
.toast b{color:var(--gold)}
@keyframes toastin{from{transform:translateX(30px);opacity:0}}
.modal{position:fixed;inset:0;z-index:70;background:rgba(8,4,20,.7);display:grid;place-items:center;padding:16px;backdrop-filter:blur(3px)}
.modal-box{max-width:420px;width:100%;background:linear-gradient(180deg,#2e1d66,#1c1442);border:1px solid rgba(255,211,107,.45);border-radius:18px;padding:20px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:toastin .25s}
.modal-box h2{font-size:22px}
.modal-box .big{font-size:30px;font-weight:800;color:var(--mana);margin:8px 0}
.modal-box .row-btns{justify-content:center;margin-top:14px}

/* ad slots: empty by default (no layout impact). Add ?showads=1 to preview reserved space. */
.ad-slot:empty{display:none}
body.show-ads .ad-slot{display:flex!important;align-items:center;justify-content:center;border:2px dashed rgba(255,211,107,.5);border-radius:10px;color:rgba(255,211,107,.8);font-size:12px;background:rgba(0,0,0,.2)}
body.show-ads .ad-slot::before{content:"AD SLOT · " attr(data-ad-slot)}
body.show-ads .ad-slot-top,body.show-ads .ad-slot-bottom{min-height:90px;margin-top:12px}
body.show-ads .ad-slot-side{width:100%;min-height:250px}
.footer{text-align:center;color:var(--muted);font-size:12px;margin-top:14px;opacity:.7}

/* responsive */
@media (max-width:1100px){ main{grid-template-columns:260px minmax(0,1fr) minmax(0,1fr)} .orb{width:150px;height:150px} }
@media (max-width:860px){
  #app{padding:6px 8px 12px}
  .topbar{padding:6px 10px;gap:8px;top:4px}
  .brand-name{display:none}
  .mana-amount{font-size:23px}
  main{grid-template-columns:minmax(0,1fr);grid-template-areas:"left" "tabs" "gens" "panels";gap:8px;margin-top:8px}
  .orb-col{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;padding:10px;gap:8px 14px}
  .tower-wrap{max-width:96px;order:0}
  .orb{width:124px;height:124px;order:1}
  .orb-caption{width:100%;text-align:center;order:2}
  .floor-card{order:3;padding:8px}
  .ad-slot-side{display:none!important}
  #tabs{position:sticky;top:64px;z-index:15}
  .tab-gens{display:flex!important}
  .panel-gens{display:none}
  main[data-tab=gens] .panel-gens{display:block}
  main[data-tab=gens] .panels{display:none}
  main[data-tab=gens] #panel-upgrades{display:none}
  .panels{min-height:0}
  .gen{grid-template-columns:40px 1fr auto;padding:7px 8px;gap:8px}
  .gen-icon{width:40px;height:40px;font-size:22px}
  .gen-buy{min-width:92px}
  .upg-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  #toasts{left:12px;right:12px;max-width:none}
}
@media (prefers-reduced-motion:reduce){ .orb-core,.orb-glow,.wisp{animation:none} }

/* footer link */
.footer a{color:#cdb8ff;text-decoration:none;border-bottom:1px dotted rgba(205,184,255,.5)}
.footer a:hover{color:#fff}

/* embed mode (?embed=1 or inside an iframe): the parent sizes the iframe to our height, so no inner scrolling,
   no page chrome, and popups are positioned near the player's last tap instead of the (very tall) viewport. */
body.embed{background-attachment:scroll}
body.embed #app{padding-top:6px;padding-bottom:8px}
body.embed .brand,body.embed .footer-text{display:none}
body.embed .topbar{position:relative;top:0}
body.embed .orb-col{position:relative;top:0}
body.embed #tabs{position:relative;top:0}
body.embed .footer{margin-top:8px;opacity:.85}
body.embed .modal{position:absolute;display:block;padding:0 16px}
body.embed .modal-box{margin-left:auto;margin-right:auto}
body.embed #toasts{position:absolute;bottom:auto;top:12px}