/* Drill Baron — v3 skin: brass-and-glass HUD, glossy buttons, embossed cards. Loaded after style.css and style2.css. */
:root {
  --panel: #0f121a; --panel2: #151926; --card: #1b2134; --card2: #263049; --line: #2c3654; --line2: #42507a;
  --brass: #d9a441; --brass2: #8f6417;
  --gloss-gold: linear-gradient(180deg, #ffe88a 0%, #ffc43d 46%, #f2900f 100%);
  --gloss-cyan: linear-gradient(180deg, #a9fff2 0%, #4fe8d2 46%, #1aa896 100%);
  --gloss-core: linear-gradient(180deg, #ffd9a0 0%, #ffa23d 46%, #d9680a 100%);
  --plate: radial-gradient(circle at 35% 26%, #4a5880 0%, #232c47 62%, #161c30 100%);
}
body { background: #07090d; }

/* ── panel frame ── */
#panel {
  background: radial-gradient(130% 55% at 50% 0%, #1b2236 0%, rgba(27, 34, 54, 0) 70%), linear-gradient(180deg, #12161f, #0d1017);
  border-left: 2px solid #050709; box-shadow: -12px 0 32px rgba(0, 0, 0, .5), inset 1px 0 0 rgba(255, 215, 130, .14);
  position: relative; z-index: 2;
}
@media (max-aspect-ratio: 1/1) { #panel { border-left: 0; border-top: 2px solid #050709; box-shadow: 0 -10px 28px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 215, 130, .14); } }
.tab-body { padding: 12px 10px 16px; gap: 9px; }
.tab-body::-webkit-scrollbar { width: 10px; }
.tab-body::-webkit-scrollbar-track { background: rgba(0, 0, 0, .25); }
.tab-body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #5a6a99, #3a4670); border-radius: 6px; border: 2px solid #0d1017; }

/* ── tabs ── */
#tabs {
  padding: 8px 6px 0; gap: 4px; background: linear-gradient(180deg, #202843, #131827); border-bottom: 2px solid #06080c;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06); position: relative; z-index: 1;
}
.tab {
  border: 0; border-radius: 12px 12px 0 0; padding: 8px 1px 8px; gap: 4px; color: #8590ad; font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0)); transition: color .15s, background .15s;
}
.tab svg { width: 25px; height: 25px; transition: transform .15s, filter .15s; }
.tab:hover { color: #e6ebf8; background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .01)); }
.tab:hover svg { transform: translateY(-1px); }
.tab.on {
  color: #fff; border-bottom: 0; background: linear-gradient(180deg, rgba(255, 196, 61, .3), rgba(255, 196, 61, .06) 80%);
  box-shadow: inset 0 3px 0 var(--gold), 0 -8px 22px rgba(255, 196, 61, .14);
}
.tab.on svg { color: #ffd45e; filter: drop-shadow(0 0 7px rgba(255, 196, 61, .7)); }
.badge { background: linear-gradient(180deg, #ff7a86, #e0263c); box-shadow: 0 2px 6px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .5); top: 2px; }

/* ── cards and rows ── */
.card, .row, .site, .mus-sec, .autobar, .tro, .art {
  background: linear-gradient(180deg, #232b45 0%, #181d30 100%); border: 1px solid #323f64;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .38), 0 8px 16px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.card, .row { border-radius: 16px; }
.card { padding: 13px 13px; }
.card .h { font: 900 21px/1.1 var(--display); letter-spacing: .4px; }
.card .desc { color: #dbe1f1; }
.row { padding: 9px 10px; gap: 11px; transition: transform .1s, border-color .15s; }
.row:hover { border-color: #4d5d8c; }
.row > .ic.big, .site .site-ic {
  padding: 5px; border-radius: 16px; background: var(--plate); border: 1px solid #4a5a88;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -6px 12px rgba(0, 0, 0, .25), 0 3px 7px rgba(0, 0, 0, .45);
  filter: none; width: 54px; height: 54px;
}
.row .ico { background: var(--plate); border: 1px solid #4a5a88; }
.row .nm { font: 900 17px/1.15 var(--display); letter-spacing: .3px; }
.row .own { min-width: 24px; padding: 1px 8px; border-radius: 9px; text-align: center; background: var(--gloss-gold); color: #2a1800; font: 900 15px/1.25 var(--display); box-shadow: 0 2px 0 #a85f06; }
.row .own:empty { display: none; }
.row .sub { color: #a7b0c8; font-size: 12.5px; }
.row.locked { opacity: .5; }
.row.locked > .ic, .row.locked > .ico { filter: grayscale(1) brightness(.6); }
.row.pulse { border-color: var(--gold); }

/* ── buy buttons ── */
.buy {
  min-width: 100px; padding: 8px 11px; border-radius: 13px; border: 2px solid #3a4568; color: #7e88a6;
  background: linear-gradient(180deg, #2a3350, #1a2036); box-shadow: 0 3px 0 #0a0d16, inset 0 1px 0 rgba(255, 255, 255, .08);
}
.buy .q { font-size: 10.5px; letter-spacing: .6px; opacity: .8; }
.buy .c { font: 900 18px/1.05 var(--display); letter-spacing: .3px; }
.buy.ok, .buyall:not(:disabled), .btn.gold {
  background: var(--gloss-gold); border-color: #ffeaa6; color: #3a2000; text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  box-shadow: 0 4px 0 #a85f06, 0 8px 14px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -3px 6px rgba(190, 100, 0, .35);
}
.buy.gem.ok { background: var(--gloss-cyan); border-color: #c9fff7; color: #032a24; box-shadow: 0 4px 0 #0f6d60, 0 8px 14px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -3px 6px rgba(0, 120, 100, .35); }
.buy.core.ok { background: var(--gloss-core); border-color: #ffe0b8; color: #351700; box-shadow: 0 4px 0 #8f4806, 0 8px 14px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 6px rgba(170, 80, 0, .35); }
.buy.ok:hover, .btn.gold:hover { filter: brightness(1.07); }
.buy.ok:active, .btn:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 #a85f06, inset 0 2px 0 rgba(255, 255, 255, .5); }
.buyall { border-radius: 13px; padding: 12px; border: 2px solid #3a4568; background: linear-gradient(180deg, #2a3350, #1a2036); color: #7e88a6; box-shadow: 0 3px 0 #0a0d16; font: 900 18px var(--display); }
.btn { border-radius: 14px; padding: 12px 16px; border: 2px solid #46537c; background: linear-gradient(180deg, #313c5d, #1e2540); box-shadow: 0 4px 0 #0a0d16, inset 0 1px 0 rgba(255, 255, 255, .1); font: 900 18px/1.1 var(--display); }
.btn.ad { background: linear-gradient(180deg, #7fd0ff, #2c8de6 55%, #1769c0); border-color: #bfe6ff; box-shadow: 0 4px 0 #0f4a8c, 0 8px 14px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .55); }
.btn.danger { background: linear-gradient(180deg, rgba(255, 93, 108, .22), rgba(255, 93, 108, .08)); }
.btn:disabled { opacity: .5; }

/* ── amount selector, sub navigation ── */
.amt, .subnav, .seg { background: #0b0e16; border: 1px solid #263050; border-radius: 14px; padding: 4px; box-shadow: inset 0 2px 7px rgba(0, 0, 0, .55); }
.amt button, .subnav button, .seg button { border-radius: 10px; color: #8a94b2; font-weight: 800; transition: color .12s, background .12s; }
.amt button:hover, .subnav button:hover, .seg button:hover { color: #fff; }
.amt button.on, .subnav button.on, .seg button.on {
  background: var(--gloss-gold); color: #2e1a00; box-shadow: 0 2px 0 #a85f06, inset 0 1px 0 rgba(255, 255, 255, .6); text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}
.branches button { border-radius: 12px; background: linear-gradient(180deg, #232b45, #181d30); border: 1px solid #323f64; box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.branches button.on { border-color: var(--gold); background: linear-gradient(180deg, rgba(255, 196, 61, .26), #1c2236); box-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 14px rgba(255, 196, 61, .2); }

/* ── HUD over the scene ── */
.card-hud {
  background: linear-gradient(180deg, rgba(52, 40, 26, .88), rgba(17, 13, 12, .9)); border: 1px solid rgba(255, 207, 110, .45); border-radius: 18px; padding: 9px 14px 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 238, 190, .24), inset 0 -2px 0 rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
}
.money { min-width: 176px; }
.m-top { display: flex; align-items: center; gap: 10px; }
.m-ico { width: 42px; height: 42px; flex: none; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .55)); animation: coinBob 3.4s ease-in-out infinite; }
@keyframes coinBob { 50% { transform: translateY(-2px) rotate(-5deg); } }
.m-txt { min-width: 0; }
.cash {
  font: 900 34px/1 var(--display); letter-spacing: .5px; text-shadow: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5));
  background: linear-gradient(180deg, #fff6c4 0%, #ffc43d 55%, #f08a0c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.rate { color: #ffe6a0; font: 800 16px/1.2 var(--display); letter-spacing: .4px; margin-top: 3px; }
.rate::before { content: '▲'; font-size: 9px; color: #7dff9b; margin-right: 5px; vertical-align: 2px; }
.gems { margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .1); font: 900 19px/1 var(--display); }
.cur { padding: 3px 9px 3px 5px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .1); margin-right: 8px; gap: 5px; }
.cur .ci { width: 22px; height: 22px; }
.depthc { min-width: 214px; padding-bottom: 11px; }
.drow { gap: 9px; align-items: center; }
.d-ico { width: 32px; height: 32px; flex: none; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.depth { font: 900 31px/1 var(--display); color: #fff; letter-spacing: .4px; text-shadow: 0 3px 0 rgba(0, 0, 0, .5); }
.speed { color: #ffd98a; font: 800 14px/1 var(--display); background: rgba(0, 0, 0, .35); border-radius: 8px; padding: 3px 7px; }
.speed:empty { display: none; }
.ore-ico { width: 26px; height: 26px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); }
.sname { font: 800 15px/1.1 var(--display); letter-spacing: .4px; color: #fff3d2; text-transform: uppercase; }
.sbar { height: 10px; border-radius: 6px; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7); margin: 7px 0 4px; }
.sbar i { position: relative; overflow: hidden; border-radius: 5px; background: linear-gradient(180deg, #ffe58a, #ff9a1f); box-shadow: 0 0 10px rgba(255, 170, 40, .55); transition: width .25s linear; }
.sbar i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); transform: translateX(-120%); animation: shimmer 2.6s ease-in-out infinite; }
@keyframes shimmer { 60%, 100% { transform: translateX(120%); } }
.snext { color: #c5b99a; font-size: 11.5px; }
.site-chip { background: linear-gradient(180deg, rgba(255, 196, 61, .28), rgba(255, 196, 61, .1)); border-color: rgba(255, 207, 110, .6); color: #ffeab0; font-weight: 800; }

.chip {
  border-radius: 14px; padding: 6px 12px; min-width: 164px; font: 800 14px/1 var(--display); letter-spacing: .4px;
  background: linear-gradient(180deg, rgba(34, 36, 54, .94), rgba(13, 15, 24, .94)); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.chip b { font: 900 16px/1 var(--display); }
.chip.od { box-shadow: 0 5px 14px rgba(0, 0, 0, .45), 0 0 16px rgba(255, 106, 31, .35), inset 0 1px 0 rgba(255, 255, 255, .12); }

/* ── ability buttons ── */
.actions { gap: 10px; }
.act {
  width: 100px; height: 90px; border-radius: 22px; border: 2px solid rgba(255, 255, 255, .22); padding: 6px 6px 7px; gap: 3px;
  background: linear-gradient(180deg, #3d4560, #1c2236 58%, #121623);
  box-shadow: 0 5px 0 #070910, 0 11px 22px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .25);
  transition: transform .08s, box-shadow .08s;
}
.act:active { transform: translateY(3px); box-shadow: 0 2px 0 #070910, 0 6px 14px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .2); }
.act .ai { width: 46px; height: 46px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)); }
.act .lbl { font: 900 14.5px/1 var(--display); letter-spacing: .9px; text-shadow: 0 2px 0 rgba(0, 0, 0, .55); }
.act .sub { font: 800 12px/1 var(--display); color: #b9c1da; }
.act.od { border-color: rgba(255, 150, 60, .85); background: linear-gradient(180deg, #6a3a1a, #2d180c 60%, #1c100a); }
.act.od.ready { background: linear-gradient(180deg, #ffa947, #d4510f 62%, #8d2f06); border-color: #ffd29a; }
.act.od.ready .lbl { color: #fff3dc; }
.act.od.ready .sub { color: #ffe3bd; }
.act.od.active { background: linear-gradient(180deg, #ffd26a, #f08a1a 62%, #b24a08); border-color: #fff1c4; }
.act.od.active .lbl, .act.od.active .sub { color: #3a1c00; text-shadow: none; }
.act.dyn { border-color: rgba(255, 90, 60, .8); background: linear-gradient(180deg, #5f2420, #2a1210 60%, #1a0c0b); }
.act.dyn.ready { background: linear-gradient(180deg, #ff7a5c, #c8261a 62%, #7d0f0a); border-color: #ffc2b4; }
.act.dyn.ready .lbl { color: #fff0ec; }
.act.dyn.ready .sub { color: #ffd2c8; }
.act.turbo { border-color: rgba(90, 185, 255, .85); background: linear-gradient(180deg, #1f4f86, #12284a 60%, #0c1a30); }
.act.turbo .lbl { color: #d4ecff; }
.act .ring { opacity: .8; mix-blend-mode: screen; }
.adtag { background: linear-gradient(180deg, #5cb8ff, #1f7fd6); border-radius: 6px; padding: 2px 6px; box-shadow: 0 1px 0 rgba(0, 0, 0, .4); }

.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .22); background: linear-gradient(180deg, #3b4360, #161b2c); box-shadow: 0 4px 0 #070910, 0 8px 16px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .22); }
.icon-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #070910; }

.toast {
  background: linear-gradient(180deg, rgba(37, 44, 70, .97), rgba(18, 22, 38, .97)); border: 1px solid #46547f; border-left: 5px solid var(--gold); border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1); padding: 9px 15px; font-size: 13.5px;
}
.toast.art { border-left-color: var(--violet); } .toast.gem { border-left-color: var(--gem); } .toast.ach { border-left-color: #ffc43d; } .toast.warn { border-left-color: var(--bad); } .toast.info { border-left-color: var(--ad); }
.toast .toast-ic { width: 38px; height: 38px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.hint { background: var(--gloss-gold); border: 2px solid #ffeaa6; color: #3a2000; border-radius: 16px; box-shadow: 0 6px 0 #a85f06, 0 12px 24px rgba(0, 0, 0, .4), inset 0 2px 0 rgba(255, 255, 255, .55); }
.prep-card { border-radius: 22px; background: linear-gradient(180deg, #272f4b, #151a2b); border: 2px solid #4a5780; box-shadow: 0 20px 50px rgba(0, 0, 0, .6), inset 0 2px 0 rgba(255, 255, 255, .12); }
.banner .b1 { font-size: clamp(34px, 6.4vw, 64px); }

/* ── modals ── */
.modal { background: radial-gradient(circle at 50% 38%, rgba(40, 32, 64, .55), rgba(3, 4, 8, .86)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.mcard {
  background: linear-gradient(180deg, #283050 0%, #171c2f 100%); border: 2px solid #4d5b88; border-radius: 24px; padding: 22px 20px 18px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .7), inset 0 2px 0 rgba(255, 255, 255, .14), inset 0 0 50px rgba(255, 196, 61, .05);
}
.mcard::before { content: ''; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, transparent, #ffc43d, transparent); opacity: .8; }
.mcard h2 { font: 900 33px/1.05 var(--display); letter-spacing: .5px; text-shadow: 0 3px 0 rgba(0, 0, 0, .45); }
.mcard h3 { color: #b7c0d9; }
.mcard .lede { color: #d9dfef; }
.m-big { text-shadow: 0 3px 0 rgba(0, 0, 0, .4); }
.m-ic .ic.xl { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)) drop-shadow(0 0 16px rgba(255, 196, 61, .25)); animation: coinBob 3.4s ease-in-out infinite; }
.x { border-radius: 50%; background: linear-gradient(180deg, #3d4666, #232a44); border: 1px solid #55638f; color: #cfd6ea; }
.stats div, .day { background: linear-gradient(180deg, #232b45, #181d30); border: 1px solid #323f64; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }

/* ── drill tab ── */
.drill-head { gap: 14px; }
.drill-head .ic.xl { width: 74px; height: 74px; padding: 6px; border-radius: 20px; background: var(--plate); border: 1px solid #4a5a88; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 10px rgba(0, 0, 0, .45); }
.card.drill .buy.wide { padding: 11px 16px; }

/* ── lab, museum, trophies ── */
.site { border-radius: 16px; }
.site.sel { border-color: var(--gold); background: linear-gradient(180deg, rgba(255, 196, 61, .2), #181d30); box-shadow: 0 3px 0 rgba(0, 0, 0, .38), 0 0 20px rgba(255, 196, 61, .24); }
.mus-sec { border-radius: 16px; }
.mus-sec.full { border-color: rgba(255, 196, 61, .6); box-shadow: 0 3px 0 rgba(0, 0, 0, .38), 0 0 18px rgba(255, 196, 61, .14); }
.art { border-radius: 12px; }
.art.found.r-e { box-shadow: 0 0 16px rgba(190, 110, 255, .3); }
.tro { border-radius: 14px; }
.tro.got { border-color: rgba(255, 196, 61, .6); background: linear-gradient(180deg, rgba(255, 196, 61, .2), #181d30); }
.nrow.maxed { border-color: rgba(255, 196, 61, .6); }
.autobar { border-radius: 14px; }
.atg { background: linear-gradient(180deg, #232b45, #181d30); }
.atg.on { background: linear-gradient(180deg, rgba(89, 224, 143, .22), rgba(89, 224, 143, .06)); box-shadow: 0 0 12px rgba(89, 224, 143, .18); }

/* ── loading ── */
#loading { background: radial-gradient(circle at 50% 36%, #3a2610 0%, #12131a 62%, #07080c 100%); }
.logo { font-size: 64px; text-shadow: 0 5px 0 rgba(0, 0, 0, .5), 0 0 40px rgba(255, 196, 61, .4); }

@media (max-width: 480px), (max-height: 560px) {
  .cash { font-size: 27px; } .depth { font-size: 24px; } .rate { font-size: 14px; }
  .m-ico { width: 32px; height: 32px; } .d-ico { width: 25px; height: 25px; }
  .money { min-width: 0; } .depthc { min-width: 0; }
  .act { width: 80px; height: 72px; border-radius: 18px; } .act .ai { width: 34px; height: 34px; } .act .lbl { font-size: 12.5px; }
  .tab svg { width: 22px; height: 22px; } .tab { font-size: 10.5px; }
  .row > .ic.big { width: 46px; height: 46px; }
  .buy { min-width: 84px; padding: 6px 8px; } .buy .c { font-size: 16px; }
  .icon-btn { width: 38px; height: 38px; }
}

/* ═══ HUD v4: currency pill, goal chip, centred depth meter, turbo bar in the menu ═══ */
.hud-left { left: 12px; top: 12px; gap: 8px; align-items: flex-start; }
.card-hud.money { position: relative; padding: 6px 20px 6px 58px; min-width: 200px; min-height: 54px; border-radius: 999px; }
.money .m-top { display: block; }
.money .m-ico { position: absolute; left: -6px; top: 50%; width: 60px; height: 60px; transform: translateY(-50%); animation: coinBob2 3.4s ease-in-out infinite; }
@keyframes coinBob2 { 50% { translate: 0 -2px; rotate: -6deg; } }
.money .cash { font-size: 31px; }
.money .rate { font-size: 14px; margin-top: 1px; }
.money .gems { margin: 6px 0 0; padding: 6px 0 0; }
.goal {
  display: flex; align-items: center; gap: 9px; max-width: 290px; padding: 6px 14px 6px 8px; border-radius: 999px; text-align: left; color: #fff;
  background: linear-gradient(180deg, rgba(34, 40, 62, .9), rgba(14, 17, 28, .92)); border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.goal .gl-ic { width: 34px; height: 34px; flex: none; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); }
.goal .gl-mid { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.goal .gl-t { font: 800 14px/1.1 var(--display); letter-spacing: .35px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; color: #ffeec2; }
.goal .gl-bar { display: block; height: 7px; border-radius: 4px; background: rgba(0, 0, 0, .55); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7); overflow: hidden; }
.goal .gl-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(180deg, #8ff7ea, #22b9a6); transition: width .3s; }
.goal.ready { border-color: var(--gold); animation: goalPulse 1.4s ease-in-out infinite; }
.goal.ready .gl-bar i { background: linear-gradient(180deg, #ffe58a, #ff9a1f); }
@keyframes goalPulse { 50% { box-shadow: 0 6px 16px rgba(0, 0, 0, .45), 0 0 18px rgba(255, 196, 61, .55); } }

.turbo-bar {
  flex: none; display: flex; align-items: center; gap: 10px; margin: 8px 10px 0; padding: 6px 12px 6px 8px; border-radius: 14px; text-align: left; color: #e8f4ff;
  background: linear-gradient(180deg, #2b6bb5, #173a6b 70%, #12294c); border: 2px solid rgba(140, 205, 255, .7);
  box-shadow: 0 4px 0 #0a1a33, 0 8px 16px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .28);
}
.turbo-bar:active { transform: translateY(2px); box-shadow: 0 2px 0 #0a1a33; }
.turbo-bar .ai { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.turbo-bar .tb-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.turbo-bar .lbl { font: 900 17px/1 var(--display); letter-spacing: .6px; text-transform: uppercase; }
.turbo-bar .sub { font: 700 12px/1.1 var(--display); color: #b9d9f7; margin-top: 2px; }
.turbo-bar .adtag { background: rgba(0, 0, 0, .38); }

@media (min-width: 1300px) and (min-aspect-ratio: 1/1) {
  .depthc { right: auto; left: 50%; top: 10px; transform: translateX(-50%); min-width: 330px; max-width: 46%; text-align: center; }
  .drow, .srow { justify-content: center; }
  .sbtns { top: 12px; right: 12px; bottom: auto; }
  .toasts { top: 132px; }
}
@media (max-width: 480px), (max-height: 560px) {
  .card-hud.money { padding-left: 46px; min-width: 150px; min-height: 44px; }
  .money .m-ico { width: 46px; height: 46px; left: -5px; }
  .money .cash { font-size: 24px; }
  .goal { max-width: 220px; padding: 4px 10px 4px 6px; } .goal .gl-ic { width: 26px; height: 26px; } .goal .gl-t { font-size: 12px; }
  .turbo-bar { margin: 6px 8px 0; } .turbo-bar .lbl { font-size: 15px; }
}

/* toasts: the "art" class is shared with the museum cards, keep the card rules out of toasts */
.toast.art { min-height: 0; text-align: left; padding: 9px 15px; }
.toast .ic.toast-ic { width: 38px; height: 38px; margin: 0; }
.toasts { z-index: 3; }
@media (max-width: 480px), (max-height: 560px) {
  .toasts { top: 62px; width: 96%; gap: 4px; }
  .toast, .toast.art { padding: 5px 10px; font-size: 12px; border-radius: 11px; }
  .toast .ic.toast-ic { width: 28px; height: 28px; }
}
.tab span { font-size: 10.5px; }

.tab-body > * { flex-shrink: 0; }

/* ═══ v5 layout: a rail with four big buttons, each opening a translucent side drawer ═══ */
#stage { flex: 1 1 auto; min-width: 0; }
#rail {
  flex: 0 0 132px; position: relative; z-index: 4; display: flex; flex-direction: column; gap: 12px; padding: 14px 12px;
  background: linear-gradient(180deg, rgba(22, 28, 48, .8), rgba(9, 12, 20, .88)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-left: 1px solid rgba(255, 215, 130, .28); box-shadow: -10px 0 30px rgba(0, 0, 0, .4);
}
.rbtn {
  --c1: #ffd45e; --c2: #d9760a; position: relative; flex: 1 1 0; min-height: 0; max-height: 176px; padding: 6px 4px; border-radius: 22px; color: #fff;
  border: 2px solid rgba(255, 255, 255, .3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(180deg, var(--c1), var(--c2)); box-shadow: 0 6px 0 rgba(0, 0, 0, .45), 0 12px 22px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .4);
  transition: transform .12s, filter .12s, box-shadow .12s;
}
.rbtn:hover { filter: brightness(1.08); transform: translateY(-2px); }
.rbtn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.rbtn .ric { width: 60px; height: 60px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .5)); }
.rbtn .rl { font: 900 17px/1 var(--display); letter-spacing: .8px; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0, 0, 0, .5); pointer-events: none; }
.rbtn.on { outline: 3px solid #fff7d0; outline-offset: 2px; filter: brightness(1.12); }
.rbtn .badge { top: -7px; right: -7px; left: auto; }
.r-prod { --c1: #ffd45e; --c2: #d9760a; } .r-research { --c1: #6cc4ff; --c2: #1c5fb5; } .r-collect { --c1: #c9a0ff; --c2: #6b3fc4; } .r-rebirth { --c1: #ff9a6a; --c2: #c8381a; }

#drawer {
  position: absolute; top: 70px; bottom: 14px; right: 146px; z-index: 3; width: min(440px, calc(100vw - 132px - 40px - 300px)); min-width: 300px;
  display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; border: 1.5px solid rgba(255, 215, 130, .4);
  background: linear-gradient(180deg, rgba(40, 52, 88, .72) 0%, rgba(14, 20, 36, .78) 100%); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .16);
  transform: translateX(calc(100% + 40px)); opacity: 0; pointer-events: none; transition: transform .3s cubic-bezier(.2, .85, .25, 1), opacity .22s;
}
#drawer.open { transform: none; opacity: 1; pointer-events: auto; }
.dr-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px 4px 18px; }
.dr-title {
  flex: 1; font: 900 25px/1 var(--display); letter-spacing: .9px; text-transform: uppercase;
  background: linear-gradient(180deg, #fff6c4, #ffc43d); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45));
}
.dr-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); background: rgba(0, 0, 0, .32); color: #dfe5f5; font-size: 22px; line-height: 1; }
#tabs { display: flex; gap: 6px; padding: 4px 12px 8px; background: none; border: 0; box-shadow: none; }
#tabs[hidden] { display: none !important; }
.tab { flex: 1; flex-direction: row; justify-content: center; gap: 7px; padding: 9px 6px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .3); color: #aab4cf; font: 800 14px/1 var(--display); letter-spacing: .5px; text-transform: uppercase; box-shadow: none; }
.tab span { font-size: inherit; }
.tab svg { width: 20px; height: 20px; }
.tab.on { background: linear-gradient(180deg, #ffe58a, #f5a01a); border-color: #ffeaa6; color: #2e1a00; box-shadow: 0 3px 0 #a85f06, inset 0 1px 0 rgba(255, 255, 255, .6); }
.tab.on svg { color: #2e1a00; filter: none; }
.tab-body { padding: 8px 12px 16px; }
.turbo-bar { margin: 4px 12px 0; }
/* inside the drawer everything is a little see-through */
#drawer .card, #drawer .row, #drawer .site, #drawer .mus-sec, #drawer .autobar, #drawer .tro, #drawer .art, #drawer .day, #drawer .stats div {
  background: linear-gradient(180deg, rgba(52, 66, 108, .5), rgba(24, 30, 54, .55)); border-color: rgba(160, 180, 240, .28);
}
#drawer .amt, #drawer .subnav, #drawer .seg { background: rgba(5, 8, 16, .42); border-color: rgba(160, 180, 240, .22); }
#drawer .row.locked, #drawer .site.locked { opacity: .6; }

@media (max-aspect-ratio: 1/1) {
  #app { flex-direction: column; }
  #stage { flex: 1 1 auto; min-height: 0; }
  #drawer { position: relative; order: 2; top: auto; bottom: auto; right: auto; width: auto; min-width: 0; flex: 0 0 46vh; margin: 0 6px; border-radius: 20px 20px 0 0; border-bottom: 0; transform: none; opacity: 1; pointer-events: auto; display: none; }
  #drawer.open { display: flex; }
  #rail { order: 3; flex: 0 0 auto; flex-direction: row; gap: 8px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); border-left: 0; border-top: 1px solid rgba(255, 215, 130, .28); box-shadow: 0 -8px 24px rgba(0, 0, 0, .4); }
  .rbtn { max-height: none; height: 74px; gap: 2px; border-radius: 16px; }
  .rbtn .ric { width: 38px; height: 38px; } .rbtn .rl { font-size: 12px; letter-spacing: .4px; }
  .toasts { top: 60px; }
}
@media (max-height: 560px) and (min-aspect-ratio: 1/1) {
  #rail { flex-basis: 104px; padding: 8px 8px; gap: 8px; }
  .rbtn { border-radius: 16px; } .rbtn .ric { width: 40px; height: 40px; } .rbtn .rl { font-size: 13px; }
  #drawer { top: 8px; bottom: 8px; right: 112px; width: min(330px, calc(100vw - 104px - 24px - 240px)); min-width: 260px; }
}

.tri-ic { display: flex; align-items: flex-end; gap: 2px; width: 74px; height: 74px; padding: 6px; border-radius: 20px; background: var(--plate); border: 1px solid #4a5a88; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 10px rgba(0, 0, 0, .45); }
.tri-ic .ic { width: 20px; height: 40px; object-fit: contain; }
.tri-ic .ic:nth-child(2) { height: 48px; margin-bottom: 4px; }

/* ═══ v6: rail floats over the scene (no black bar), drawer on the left ═══ */
@media (min-aspect-ratio: 1/1) {
  #rail { position: absolute; top: 0; right: 0; bottom: 0; width: 132px; justify-content: center; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; }
  .rbtn { pointer-events: auto; }
  #drawer { left: 14px; right: auto; top: 128px; bottom: 14px; transform: translateX(calc(-100% - 40px)); }
  #drawer.open { transform: none; }
  .sbtns { top: 12px; right: 146px; bottom: auto; }
}
@media (max-width: 1299px) and (min-aspect-ratio: 1/1) {
  .depthc { right: 150px; }
}
@media (max-height: 560px) and (min-aspect-ratio: 1/1) {
  #rail { width: 104px; }
  #drawer { left: 8px; top: 100px; bottom: 8px; }
  .sbtns { right: 118px; }
  .depthc { right: 124px; }
}
@media (max-aspect-ratio: 1/1) {
  #rail { background: linear-gradient(180deg, rgba(14, 18, 30, .5), rgba(8, 10, 18, .7)); }
}

/* ═══ v7: sound/settings sit right above the four buttons, the drawer starts under the quest and the boosts ═══ */
@media (min-aspect-ratio: 1/1) {
  #rail { padding-top: 70px; }
  .sbtns { top: 12px; right: 12px; bottom: auto; width: 108px; justify-content: space-evenly; gap: 0; }
}
@media (max-height: 560px) and (min-aspect-ratio: 1/1) {
  #rail { padding-top: 58px; }
  .sbtns { right: 8px; width: 88px; }
}

/* ═══ v8: quest chip to the right of the money pill, boosts centred at the very bottom ═══ */
.boosts { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; max-width: 56%; pointer-events: none; z-index: 2; }
.boosts .chip { min-width: 120px; padding: 6px 12px; gap: 8px; }
@media (min-aspect-ratio: 1/1) {
  .hud-left { flex-direction: row; align-items: center; gap: 10px; }
  .goal { max-width: 220px; }
}
@media (max-aspect-ratio: 1/1), (max-width: 480px) {
  .boosts { bottom: 92px; max-width: 94%; }
  .boosts .chip { min-width: 0; }
}

/* the ability buttons move next to the rail so the left drawer never hides them */
@media (min-aspect-ratio: 1/1) {
  .actions { left: auto; right: 150px; bottom: 14px; justify-content: flex-end; max-width: calc(100% - 700px); }
}
@media (max-height: 560px) and (min-aspect-ratio: 1/1) {
  .actions { right: 118px; }
}

/* a slightly narrower drawer */
@media (min-aspect-ratio: 1/1) {
  #drawer { width: min(375px, calc(100vw - 132px - 40px - 300px)); }
}
@media (max-height: 560px) and (min-aspect-ratio: 1/1) {
  #drawer { width: min(300px, calc(100vw - 104px - 24px - 240px)); }
}

.goal.flash { animation: goalFlash .9s ease-out; }
@keyframes goalFlash { 0% { box-shadow: 0 0 0 0 rgba(255, 220, 90, .9); transform: scale(1.12); } 100% { box-shadow: 0 0 0 22px rgba(255, 220, 90, 0); transform: scale(1); } }

/* ═══ v9: phones — compact HUD, drawer gets more room ═══ */
@media (max-height: 560px) and (min-aspect-ratio: 1/1) {
  .card-hud.money { display: flex; align-items: center; gap: 10px; padding-right: 14px; }
  .money .gems { margin: 0; padding: 0 0 0 10px; border-top: 0; border-left: 1px solid rgba(255, 255, 255, .18); }
  .goal { max-width: 190px; }
  .tab-body { padding: 6px 10px 12px; }
  .dr-head { padding-top: 6px; } .dr-title { font-size: 21px; }
  .rbtn .rl { font-size: 12px; }
}
@media (max-aspect-ratio: 1/1) {
  .goal { max-width: calc(50% - 30px); }
  #drawer { flex-basis: 42vh; }
  .depthc .snext { display: none; }
}
@media (max-aspect-ratio: 1/1) {
  .goal { max-width: 58%; }
  .depth { white-space: nowrap; }
}
@media (max-width: 400px) and (max-aspect-ratio: 1/1) {
  .depthc .speed { display: none; }
  .depthc { min-width: 0; }
  .money .cash { font-size: 22px; }
}