:root {
  --bg: #0d1017; --panel: #161b26; --panel2: #1d2433; --line: #2a3347;
  --txt: #e6e9f2; --mut: #8b94ab; --acc: #ffb020; --good: #4ade80; --bad: #f87171;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: radial-gradient(1200px 600px at 50% -10%, #1b2236 0%, var(--bg) 60%) fixed;
  color: var(--txt);
  font: 14px/1.4 "Segoe UI", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}
button, select, input { font: inherit; color: inherit; }
#app { max-width: 1280px; margin: 0 auto; padding: 12px; }
.mut { color: var(--mut); } .small { font-size: 12px; }
h1 { margin: 0; font-size: 22px; letter-spacing: .3px; white-space: nowrap; }
h1 span { color: var(--acc); }
h2 { margin: 0 0 6px; font-size: 16px; }

/* ---------- header ---------- */
.top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
.moneybox { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px 16px; min-width: 190px; }
.money { font-size: 26px; font-weight: 800; color: var(--good); font-variant-numeric: tabular-nums; line-height: 1.1; }
.rate { font-size: 12px; color: var(--mut); }
.ctrls { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lbl { color: var(--mut); font-size: 12px; }
.btn {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px;
  cursor: pointer; transition: .12s;
}
.btn:hover:not(:disabled) { border-color: #4a5a85; background: #25304a; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.on { background: #3b2f10; border-color: var(--acc); color: var(--acc); }
.btn.danger:hover:not(:disabled) { border-color: var(--bad); background: #3a1f24; }
.btn.buy { background: #17321f; border-color: #2f6b43; }
.btn.buy:hover:not(:disabled) { background: #1e4a2d; border-color: var(--good); }
.btn.buy.poor { background: var(--panel2); border-color: var(--line); }

/* ---------- panels ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.grid2 { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }

/* ---------- factory stage ---------- */
#stageWrap { width: 100%; overflow: hidden; position: relative; border-radius: 8px; background: linear-gradient(#10141d, #0d1118); }
#stage { position: relative; width: 1200px; height: 215px; transform-origin: 0 0; }
.belt {
  position: absolute; left: 0; top: 100px; width: 1110px; height: 64px;
  background-color: #262b36;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 3px, transparent 3px 28px);
  border-top: 5px solid #11151c; border-bottom: 5px solid #11151c;
  animation: beltmove var(--beltdur, .5s) linear infinite;
}
@keyframes beltmove { to { background-position-x: 28px; } }
.rollers { position: absolute; top: 96px; width: 14px; height: 72px; background: linear-gradient(90deg,#3a414f,#20252f); border-radius: 7px; }
.hopper {
  position: absolute; left: 0; top: 18px; width: 78px; height: 74px; text-align: center; font-size: 11px; color: var(--mut);
  border: 2px dashed #3a4560; border-radius: 10px; padding-top: 6px;
}
.hopper b { display: block; font-size: 24px; }
.router {
  position: absolute; left: 1118px; top: 52px; width: 76px; height: 116px; text-align: center; font-size: 11px;
  border: 2px solid #3a4560; border-radius: 10px; background: #141a26; padding: 4px;
}
.router .rt { margin-top: 4px; padding: 4px 2px; border-radius: 6px; background: #1c2535; }
.router .rt.hot { background: #3b2f10; color: var(--acc); }
.router small { display: block; color: var(--mut); font-size: 10px; line-height: 1.15; }

.mach {
  position: absolute; top: 8px; width: 132px; height: 88px; border: 2px solid var(--mc); border-radius: 10px;
  background: linear-gradient(#273047, #19202f); text-align: center; padding-top: 3px; box-shadow: 0 4px 14px #0008;
}
.mach::before, .mach::after { content: ""; position: absolute; top: 100%; width: 6px; height: 14px; background: var(--mc); opacity: .8; }
.mach::before { left: 14px; } .mach::after { right: 14px; }
.mach .mi { font-size: 24px; line-height: 1.1; display: inline-block; }
.mach .mn { font-size: 12px; font-weight: 700; color: var(--mc); }
.mach .mt { font-size: 11px; color: var(--mut); }
.mach .bar { position: absolute; left: 8px; right: 8px; bottom: 6px; height: 6px; background: #0a0d13; border-radius: 3px; overflow: hidden; }
.mach .bar i { display: block; height: 100%; width: 0; background: var(--mc); }
.mach.active { box-shadow: 0 0 18px var(--mc); }
.mach.active .mi { animation: work .35s ease-in-out infinite alternate; }
@keyframes work { to { transform: translateY(-3px) rotate(-8deg) scale(1.1); } }
.mach.locked { filter: grayscale(.9); opacity: .8; }
.mach .unlock {
  position: absolute; inset: 0; border: 0; border-radius: 8px; background: rgba(8,10,16,.82); color: #fff; cursor: pointer; z-index: 6;
  font-size: 12px; line-height: 1.25;
}
.mach .unlock b { display: block; font-size: 14px; color: var(--acc); }
.mach .unlock.poor b { color: var(--mut); }
.mach .unlock:hover { background: rgba(30,40,64,.9); }
.mach:not(.locked) .unlock { display: none; }

.floatt {
  position: absolute; z-index: 20; font-weight: 800; font-size: 14px; text-shadow: 0 2px 4px #000, 0 0 6px #000;
  pointer-events: none; white-space: nowrap; transform: translateX(-50%); animation: floatup 1.5s ease-out forwards;
}
@keyframes floatup { from { opacity: 1; margin-top: 0; } 70% { opacity: 1; } to { opacity: 0; margin-top: -44px; } }

/* ---------- item boxes ---------- */
.it { position: absolute; top: 110px; left: 0; width: 44px; height: 44px; z-index: 5; will-change: transform; }
.box {
  position: relative; width: 100%; height: 100%; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1; user-select: none;
}
.box.lg { width: 58px; height: 58px; font-size: 31px; border-radius: 10px; }
.box.sm { width: 32px; height: 32px; font-size: 17px; border-radius: 6px; }
.box.ingot { background: #8c919b; border: 2px solid #b5bac3; box-shadow: inset 0 -4px 0 #6d727c; }
.box.weapon {
  background: linear-gradient(145deg, #2d3649, #1a2030);
  border: 2px solid var(--rc, #6b7385);
  box-shadow: 0 0 var(--glow, 0px) var(--rc, transparent);
}
.box.weapon.ultra { animation: ultra 3s linear infinite; }
@keyframes ultra { to { filter: hue-rotate(360deg); } }
.box .grade {
  position: absolute; right: -5px; bottom: -6px; font-size: 10px; font-weight: 800; padding: 0 3px; border-radius: 4px;
  background: #000d; color: var(--qc, #fff); border: 1px solid #0006; white-space: nowrap; z-index: 4;
}
.box.lg .grade { font-size: 12px; } .box.sm .grade { font-size: 8px; right: -4px; bottom: -5px; }
.box .eic { position: absolute; left: -4px; top: -7px; font-size: 10px; display: flex; z-index: 4; text-shadow: 0 0 3px #000; }
.box.lg .eic { font-size: 12px; } .box.sm .eic { display: none; }
.box.plated { border-color: var(--pc); background: linear-gradient(145deg, #3a4358, #202738); box-shadow: 0 0 var(--glow, 0px) var(--rc, transparent), inset 0 0 9px var(--pc); }
.box.plated::after {
  content: ""; position: absolute; inset: 0; border-radius: 7px; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.6) 50%, transparent 68%);
  background-size: 260% 100%; animation: shine 2.4s linear infinite;
}
.box.plated.prism { border-color: #ff7ad9; animation: ultra 2.5s linear infinite; }
@keyframes shine { from { background-position: 160% 0; } to { background-position: -60% 0; } }
.box svg { width: 62%; height: 62%; }

/* enchant fx (animation on the box itself) */
.box.fx-lightning { animation: zap 1.2s steps(1) infinite; }
@keyframes zap { 0%,100% { filter: none; } 8% { filter: brightness(2.2) saturate(.4); } 12% { filter: none; } 46% { filter: none; } 50% { filter: brightness(1.9); } 54% { filter: none; } }
.box.fx-fire { animation: fire .5s ease-in-out infinite alternate; }
@keyframes fire { from { filter: drop-shadow(0 0 3px #ff8a00); } to { filter: drop-shadow(0 -2px 8px #ff3b00); } }
.box.fx-ice { animation: ice 2s ease-in-out infinite alternate; }
@keyframes ice { from { filter: drop-shadow(0 0 2px #9fe8ff); } to { filter: drop-shadow(0 0 8px #d6f6ff) brightness(1.15); } }
.box.fx-poison { animation: ice 1.2s ease-in-out infinite alternate; --pz: 1; filter: drop-shadow(0 0 5px #6bff3a); }
.box.fx-holy, .box.fx-fortune { animation: fire 1s ease-in-out infinite alternate; filter: drop-shadow(0 0 6px gold); }
.box.fx-dark { animation: dark 1.6s ease-in-out infinite alternate; }
@keyframes dark { from { filter: drop-shadow(0 0 3px #7a2cff) brightness(.9); } to { filter: drop-shadow(0 0 9px #a24bff) brightness(.75); } }
.box.fx-cosmic, .box.fx-fun { animation: ultra 2.8s linear infinite; }
.box.fx-speed, .box.fx-wind { animation: wob .25s linear infinite; }
@keyframes wob { 0%,100% { transform: translateX(0); } 50% { transform: translateX(1.5px); } }
.box.fx-water { animation: ice 1.4s ease-in-out infinite alternate; filter: drop-shadow(0 0 4px #3aa0ff); }
.box.fx-nature { filter: drop-shadow(0 0 4px #5fd35f); }
.box.fx-earth { filter: drop-shadow(0 0 3px #a0723a); }
.box.fx-phys { filter: drop-shadow(0 0 3px #c9d3e0); }

.fxp { position: absolute; pointer-events: none; font-size: 11px; opacity: 0; z-index: 3; animation: fxrise 1.7s ease-out infinite; }
@keyframes fxrise { 0% { opacity: 0; transform: translateY(8px) scale(.7); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px) scale(1.1); } }
.box.sm .fxp, .box.static .fxp { display: none; }

/* ---------- selling ---------- */
.subhead { display: flex; justify-content: space-between; color: var(--mut); font-size: 12px; margin-bottom: 6px; }
.lblsm { color: var(--mut); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; margin: 8px 0 4px; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.slot { position: relative; display: flex; align-items: center; gap: 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; min-height: 52px; }
.slot .sinfo { flex: 1; min-width: 0; }
.slot .sname { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .sval { font-size: 11px; color: var(--good); }
.slot .sbar { height: 6px; background: #0a0d13; border-radius: 3px; overflow: hidden; margin-top: 3px; }
.slot .sbar i { display: block; height: 100%; width: 0; background: var(--good); }
.slot.idle { opacity: .55; }
.slot.zap { animation: slotzap .5s steps(1); }
@keyframes slotzap { 0% { background: #5a5410; } 50% { background: #fff6; } 100% { background: var(--panel2); } }
.queue { display: flex; flex-wrap: wrap; gap: 8px; min-height: 40px; padding: 4px 4px 8px; }
.queue .more { align-self: center; color: var(--mut); font-size: 12px; }
.feed { list-style: none; margin: 0; padding: 0; font-size: 12px; max-height: 150px; overflow: hidden; }
.feed li { display: flex; gap: 6px; padding: 2px 0; border-bottom: 1px solid #ffffff0d; }
.feed li span.fv { margin-left: auto; color: var(--good); font-weight: 700; }
.feed li.proc span.fv { color: var(--acc); }
.feed .fn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- route panel ---------- */
.chk { display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 8px 0; font-weight: 600; }
.chk.inl { margin: 0; font-weight: 400; }
.chk input { width: 16px; height: 16px; accent-color: var(--acc); }
.routerow { display: flex; align-items: center; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.rlab { width: 112px; color: var(--mut); font-size: 13px; }
input[type=number], input[type=text] { background: #10141d; color: var(--txt); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
select, input[type=search] { background: #10141d; border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; min-width: 0; }
select { max-width: 170px; } select.narrow { width: 72px; }
.prev { font-weight: 800; padding-left: 4px; }
.odds { background: #11161f; border: 1px dashed var(--line); border-radius: 8px; padding: 8px 10px; margin: 10px 0; font-size: 13px; }
.routefoot { display: flex; justify-content: space-between; align-items: center; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 10px; padding-bottom: 8px; flex-wrap: wrap; }
.tab { background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 6px 14px; cursor: pointer; color: var(--mut); }
.tab:hover { color: var(--txt); }
.tab.on { background: var(--panel2); border-color: var(--line); color: var(--txt); }
.badge { background: var(--acc); color: #000; border-radius: 9px; padding: 0 6px; font-size: 11px; font-weight: 800; margin-left: 4px; }
.tabpane { display: none; } .tabpane.on { display: block; }

/* ---------- upgrades ---------- */
.upsec { margin-bottom: 14px; }
.upsec h3 { margin: 0 0 6px; font-size: 14px; color: var(--acc); }
.upgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.ucard { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.ucard.lock { opacity: .45; }
.ucard .uh { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.ucard .un { font-weight: 700; }
.ucard .ul { font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; }
.ucard .ud { font-size: 12px; color: var(--mut); }
.ucard .ue { font-size: 12px; color: #9cc4ff; }
.ucard .ub { display: flex; gap: 6px; margin-top: 4px; }
.ucard .ub .btn { flex: 1; padding: 5px 6px; font-size: 13px; }
.ucard .ub .btn.max { flex: 0 0 auto; }
.ucard .lvbar { height: 4px; background: #0a0d13; border-radius: 2px; overflow: hidden; }
.ucard .lvbar i { display: block; height: 100%; background: var(--acc); }
.stcard { border-width: 2px; }
.stcard .un { font-size: 15px; }

/* ---------- bank ---------- */
.bankbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.bankbar input[type=search] { flex: 1; min-width: 180px; }
.bankgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin: 8px 0; }
.bcard { position: relative; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 4px 6px; text-align: center; cursor: pointer; }
.bcard:hover { border-color: #5a6ca0; transform: translateY(-1px); }
.bcard .box { margin: 0 auto 6px; }
.bcard .bn { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 3px; }
.bcard .br { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 3px; }
.bcard .bv { font-size: 11px; color: var(--good); }
.bcard .star { position: absolute; right: 4px; top: 2px; font-size: 12px; }
.empty { color: var(--mut); text-align: center; padding: 24px 8px; grid-column: 1 / -1; }

/* ---------- codex / stats ---------- */
.cdxsec { margin-bottom: 16px; }
.cdxsec h3 { margin: 0 0 6px; font-size: 14px; }
.cdxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
.cdxgrid.wide { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.cdxgrid.tiny { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.cdx { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdx.no { opacity: .35; }
.cdx .dots { float: right; letter-spacing: -1px; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.stat { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.stat .sk { color: var(--mut); font-size: 12px; } .stat .sv { font-size: 18px; font-weight: 700; }

/* ---------- tooltip / modal / toast ---------- */
.tooltip {
  position: fixed; z-index: 100; max-width: 300px; background: #0b0e15f2; border: 1px solid #44527a; border-radius: 10px;
  padding: 8px 10px; font-size: 12px; pointer-events: none; box-shadow: 0 8px 24px #000a;
}
.tooltip[hidden], .modal[hidden] { display: none; }
.tt-name { font-size: 14px; font-weight: 800; } .tt-sub { color: var(--mut); margin-bottom: 4px; }
.tt-line { margin: 1px 0; } .tt-val { margin-top: 4px; color: var(--good); font-weight: 700; }
.modal { position: fixed; inset: 0; background: #000b; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 12px; }
.mbox { background: var(--panel); border: 1px solid #44527a; border-radius: 14px; padding: 16px; max-width: 460px; width: 100%; max-height: 90vh; overflow: auto; }
.mbox h3 { margin: 0 0 8px; }
.mbox textarea { width: 100%; height: 130px; background: #0b0e15; color: var(--txt); border: 1px solid var(--line); border-radius: 8px; padding: 6px; font-family: monospace; font-size: 11px; }
.mrow { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.mhead { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.toasts { position: fixed; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 300; pointer-events: none; }
.toast { background: #101522f0; border: 1px solid #44527a; border-radius: 8px; padding: 8px 12px; animation: toast 3.6s forwards; max-width: 340px; }
@keyframes toast { 0% { opacity: 0; transform: translateY(10px); } 8%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.foot { text-align: center; color: var(--mut); font-size: 12px; padding: 10px; }

/* =====================================================================
   Part 2 additions: armor, ultimate, arenas, ascender, rebirth, mobile
   ===================================================================== */
body.noscroll { overflow: hidden; }
.btn, .tab, .bcard, .acard, .lslot, .prow { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.rpbox { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; line-height: 1.15; }
.rpbox span { font-weight: 800; color: #c4a1ff; display: block; }
.rpbox small { color: var(--mut); font-size: 11px; }
.chute { position: absolute; font-size: 11px; color: var(--mut); border: 1px dashed #3a4560; border-radius: 6px; padding: 2px 8px; }
.box .kmark { position: absolute; left: -4px; bottom: -6px; font-size: 9px; z-index: 4; text-shadow: 0 0 3px #000; }
.box.sm .kmark, .box .ultm { display: none; }
.box.ult { border-color: #ffd24a; box-shadow: 0 0 12px #ffd24a, inset 0 0 8px #ffd24a88; }
.box.ult .ultm { display: block; position: absolute; right: -4px; top: -7px; font-size: 12px; color: #ffd24a; z-index: 5; text-shadow: 0 0 4px #000; }
.box.sm.ult .ultm { display: none; }
.box.ingot svg { width: 72%; height: 72%; }
.mrow.wrap { flex-wrap: wrap; }
.range { width: 100%; accent-color: var(--acc); margin-top: 6px; }

/* stats grid in tooltips / cards */
.stg { display: grid; grid-template-columns: auto auto; gap: 1px 14px; margin-top: 6px; padding-top: 6px; border-top: 1px solid #ffffff14; font-size: 12px; }
.stg .stk { color: var(--mut); white-space: nowrap; }
.stg .stv { text-align: right; font-variant-numeric: tabular-nums; }
.stg .arrow { color: var(--mut); }

/* bank extras */
.bcard.locked { opacity: .65; }
.bcard .lockm { position: absolute; left: 4px; top: 2px; font-size: 12px; }
.bcard.sel { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc) inset; background: #2c2412; }
.bankgrid.selmode .bcard { cursor: crosshair; }
.bcard { content-visibility: auto; contain-intrinsic-size: 112px 130px; }
.selbar { position: sticky; top: 0; z-index: 20; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #221c0d; border: 1px solid var(--acc); border-radius: 10px; padding: 6px 10px; margin: 6px 0; }
.selbar[hidden], .ucard[hidden] { display: none; }
.selbar span { margin-right: auto; font-weight: 700; color: var(--acc); }
.clrow { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.clrow label { width: 130px; color: var(--mut); font-size: 13px; flex: none; }
.clrow select, .clrow input[type=number] { flex: 1; min-width: 0; max-width: none; background: #10141d; border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; }

/* picker */
.psearch { width: 100%; margin-bottom: 8px; }
.picker { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.prow { display: flex; align-items: center; gap: 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; cursor: pointer; }
.prow:hover { border-color: #5a6ca0; }
.pinfo { flex: 1; min-width: 0; }
.pn { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps { font-size: 12px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppw { color: var(--good); font-weight: 700; font-size: 13px; }

/* arenas */
.loadout { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.lh { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.lh h3, .ah3 { margin: 0; font-size: 15px; } .ah3 { margin: 14px 0 4px; }
.lbl2 { font-size: 12px; color: var(--acc); font-weight: 700; margin: 8px 0 4px; text-transform: uppercase; letter-spacing: .5px; }
.lrow { display: flex; flex-wrap: wrap; gap: 8px; }
.lslot { width: 84px; text-align: center; background: #10141d; border: 1px dashed #3a4560; border-radius: 10px; padding: 6px 2px; cursor: pointer; }
.lslot.full { border-style: solid; border-color: var(--line); }
.lslot:hover { border-color: var(--acc); }
.lslot .box { margin: 0 auto; }
.lempty { width: 58px; height: 58px; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--mut); }
.lname { font-size: 11px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 3px; }
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin-top: 10px; }
.chip { background: #10141d; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; font-size: 12px; display: flex; justify-content: space-between; gap: 6px; }
.chip b { color: var(--good); }
.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.acard { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(160deg, var(--a1), var(--a2)); }
.acard.lock { filter: grayscale(.8) brightness(.7); }
.acard.done { border-color: #3d8a5a; }
.ah { display: flex; gap: 10px; align-items: center; }
.aic { font-size: 30px; } .an { font-weight: 800; text-shadow: 0 1px 3px #000; } .as { font-size: 12px; color: #dfe6f5; }
.aen { display: flex; gap: 6px; font-size: 22px; } .aen .boss { margin-left: auto; filter: drop-shadow(0 0 5px #ff4a4a); }
.astats { font-size: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; background: #0007; border-radius: 8px; padding: 6px 8px; }
.astats b { color: #ffd24a; }
.arenawrap { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #000; }
#arenaCanvas { display: block; width: 100%; aspect-ratio: 8 / 5; }
.arenares { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #000a; padding: 10px; }
.arenares[hidden] { display: none; }
.rbox { background: #141a28; border: 2px solid var(--line); border-radius: 14px; padding: 16px 20px; text-align: center; max-width: 420px; }
.rbox.win { border-color: var(--good); } .rbox.lose { border-color: var(--bad); }
.rt1 { font-size: 24px; font-weight: 800; margin-bottom: 6px; } .rl { margin: 3px 0; }
.arenabar { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.arenainfo { flex: 1; font-size: 13px; color: var(--mut); min-width: 200px; }

/* ascender / transcender / rebirth */
.lockpanel, .trbox.empty { text-align: center; padding: 28px 10px; }
.bigic { font-size: 38px; }
.ascgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ascslot { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ascslot.empty { align-items: center; justify-content: center; min-height: 150px; border-style: dashed; }
.ahead { display: flex; gap: 10px; align-items: center; }
.seg { display: flex; gap: 6px; } .seg .btn { flex: 1; padding: 5px 4px; font-size: 13px; }
.ascslot select { max-width: none; width: 100%; }
.ainfo { font-size: 13px; background: #10141d; border-radius: 8px; padding: 6px 8px; min-height: 64px; }
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.dcard { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.dh { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 2px; }
.lvbar { height: 4px; background: #0a0d13; border-radius: 2px; overflow: hidden; margin: 4px 0; }
.lvbar i { display: block; height: 100%; background: var(--acc); }
.trbox { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; max-width: 520px; }
.trhead { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.rbtop { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.rbcard { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.rbn { font-size: 18px; font-weight: 800; margin-bottom: 6px; } .rbl { margin: 4px 0; font-size: 13px; } .rbl.ok { color: var(--good); }
.rbp { font-size: 30px; font-weight: 800; color: #c4a1ff; margin-top: 8px; } .rbp small { font-size: 12px; color: var(--mut); }
.bar2 { height: 8px; background: #0a0d13; border-radius: 4px; overflow: hidden; margin: 8px 0; } .bar2 i { display: block; height: 100%; background: #c4a1ff; }
.btn.big { width: 100%; padding: 10px; font-size: 16px; }

/* ---------- phones & small tablets ---------- */
/* "mobile" is a body class set by the layout setting (auto = under 760px wide) */
body.mobile #app { padding: 8px; }
body.mobile h1 { font-size: 18px; white-space: normal; flex: 1 1 100%; }
body.mobile .top { gap: 8px; }
body.mobile #stage.compact .mach .mn { font-size: 16px; } body.mobile #stage.compact .mach .mt { font-size: 14px; } body.mobile #stage.compact .mach .mi { font-size: 30px; }
body.mobile #stage.compact .hopper, body.mobile #stage.compact .router, body.mobile #stage.compact .chute { font-size: 14px; }
body.mobile #stage.compact .router small { font-size: 12px; }
body.mobile #stage.compact .unlock { font-size: 15px; } body.mobile #stage.compact .unlock b { font-size: 18px; }
body.mobile .moneybox { min-width: 0; flex: 1; padding: 4px 12px; } body.mobile .money { font-size: 22px; }
body.mobile .rpbox { padding: 4px 10px; }
body.mobile .ctrls { margin-left: 0; width: 100%; gap: 5px; }
body.mobile .ctrls .lbl { display: none; }
body.mobile .btn { padding: 8px 12px; min-height: 38px; }
body.mobile .btn.small { min-height: 32px; padding: 5px 10px; }
body.mobile .panel { padding: 8px; border-radius: 10px; margin-bottom: 8px; }
body.mobile .grid2 { gap: 8px; grid-template-columns: 1fr; }
body.mobile .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -4px; margin-right: -4px; padding: 0 4px 8px; }
body.mobile .tabs::-webkit-scrollbar { display: none; }
body.mobile .tab { white-space: nowrap; flex: none; padding: 8px 12px; }
body.mobile .upgrid, body.mobile .ascgrid, body.mobile .agrid, body.mobile .mups { grid-template-columns: 1fr; }
body.mobile .dgrid { grid-template-columns: 1fr 1fr; }
body.mobile .bankgrid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
body.mobile .bankbar { gap: 6px; } body.mobile .bankbar > select, body.mobile .bankbar > input { flex: 1 1 45%; max-width: none; }
body.mobile .rlab { width: 100%; }
body.mobile select { max-width: none; flex: 1; }
body.mobile .slots { grid-template-columns: 1fr 1fr; }
body.mobile .lslot { width: 74px; }
body.mobile .astats { grid-template-columns: 1fr 1fr; }
body.mobile .mbox { padding: 12px; border-radius: 12px; max-height: 92vh; }
body.mobile .clrow label { width: 100px; }
body.mobile .tooltip { display: none; }
body.mobile .toasts { left: 8px; right: 8px; bottom: 8px; } body.mobile .toast { max-width: none; }
body.mobile .stg { font-size: 12px; }
body.mobile .dsel { grid-template-columns: 1fr 1fr; }
body.xs .chips { grid-template-columns: 1fr 1fr; }
body.xs .slot { padding: 4px 6px; min-height: 44px; gap: 6px; }
body.xs .slot .sname { font-size: 11px; }

/* =====================================================================
   Part 3: pristine, gems, machine info, difficulty, menus, settings
   ===================================================================== */
.gold { color: #ffd24a; font-weight: 800; text-shadow: 0 0 8px #ffb02088; background: linear-gradient(90deg, #ffe58a, #ffb020, #ffe58a); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: goldflow 3s linear infinite; }
@keyframes goldflow { to { background-position: 200% 0; } }
.box.prist { border-color: #ffd24a; box-shadow: 0 0 10px #ffd24acc, inset 0 0 6px #ffd24a66; }
.box.prist::before { content: "✦"; position: absolute; left: 50%; top: -9px; transform: translateX(-50%); color: #ffd24a; font-size: 11px; z-index: 6; text-shadow: 0 0 6px #ffb020; }
.box.sm.prist::before { display: none; }
.gdots { position: absolute; left: 2px; bottom: -5px; display: flex; gap: 2px; z-index: 5; }
.gdots i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid #fff9; display: block; box-shadow: 0 0 4px currentColor; }
.box.sm .gdots { display: none; }
.gemtag { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--gc); }
.lowfx *, .lowfx *::before, .lowfx *::after { animation: none !important; }
.lowfx .fxp { display: none; }
.lowfx .box { filter: none !important; }

.hopper.clk, .mach.clk { cursor: pointer; }
.hopper.clk:hover { border-color: var(--acc); color: var(--txt); }
.resb { font-size: 10px; color: #ffd24a; margin-left: 3px; font-weight: 800; }
.resb[hidden] { display: none; }
.hopper .resb { position: absolute; right: 4px; top: 2px; }
.resb2 { font-size: 12px; font-weight: 800; color: var(--mut); }
.resb2.on { color: #ffd24a; }
.gh { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.gh h3 { margin: 0; } .gsp { flex: 1; }
.btn.small { padding: 3px 10px; font-size: 12px; }
.btn.resbtn { animation: pulseg 1.4s ease-in-out infinite; }
@keyframes pulseg { 50% { box-shadow: 0 0 14px #4ade80; } }
.btn.resbtn[hidden] { display: none; }

.minfo .mihead { display: flex; gap: 12px; align-items: center; border-bottom: 2px solid var(--mc, var(--line)); padding-bottom: 8px; margin-bottom: 6px; }
.mbig { font-size: 38px; }
.mbox:has(.minfo) { max-width: 560px; }
.mups { display: grid; grid-template-columns: 1fr; gap: 6px; }
.mup { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.mup .mh { display: flex; justify-content: space-between; } .mup .ud { font-size: 12px; color: var(--mut); } .mup .ue { font-size: 12px; color: #9cc4ff; }
.mup .ub { display: flex; gap: 6px; margin-top: 4px; } .mup .ub .btn { flex: 1; padding: 5px; font-size: 13px; } .mup .ub .max { flex: 0 0 auto; }
.capbox { background: #10141d; border: 1px dashed var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13px; }
.resbox { margin-top: 10px; background: #10141d; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.resbox.ready { border-color: var(--good); background: #0f2418; }
.mi-grid { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; font-size: 13px; background: #10141d; border-radius: 8px; padding: 6px 10px; }
.mi-grid .mk { color: var(--mut); } .mi-grid .mv { text-align: right; font-variant-numeric: tabular-nums; }
.pills { display: flex; flex-wrap: wrap; gap: 4px; } .pill { border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; font-size: 11px; background: #10141d; }

.diffbar { margin-bottom: 10px; }
.dsel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dbtn { display: flex; flex-direction: column; align-items: center; gap: 1px; border-color: color-mix(in srgb, var(--dc) 40%, var(--line)); }
.dbtn small { font-size: 10px; color: var(--mut); white-space: nowrap; }
.dbtn.on { background: color-mix(in srgb, var(--dc) 22%, #10141d); border-color: var(--dc); color: var(--dc); font-weight: 800; }
.ddots { margin-left: auto; display: flex; gap: 3px; }
.dd { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--dc); opacity: .55; display: block; } .dd.on { background: var(--dc); opacity: 1; box-shadow: 0 0 6px var(--dc); }
.gemdrop { background: #0006; border-radius: 8px; padding: 6px; margin: 6px 0; }

.ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-top: 8px; }
.gcard { display: flex; align-items: center; gap: 10px; background: var(--panel2); border: 1px solid color-mix(in srgb, var(--gc) 50%, var(--line)); border-radius: 10px; padding: 8px 10px; }
.gic svg { filter: drop-shadow(0 0 6px var(--gc)); }
.ginfo { flex: 1; min-width: 0; } .gn { font-weight: 700; color: var(--gc); } .gd { font-size: 12px; color: var(--mut); } .gv { font-size: 11px; color: var(--good); }
.socks { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.sock { width: 78px; text-align: center; border: 1px dashed #3a4560; border-radius: 10px; padding: 8px 2px; color: var(--mut); }
.sock.full { border: 1px solid var(--gc); color: var(--gc); cursor: pointer; background: #10141d; } .sock small { display: block; font-size: 10px; }
.sock span { font-size: 28px; display: block; }

.menulist { display: grid; gap: 8px; margin: 10px 0; } .menulist .btn { text-align: left; padding: 10px 14px; }
.resetbox { background: #2a1013; border: 1px solid var(--bad); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.resetbox[hidden] { display: none; }
.resetbox input { background: #10141d; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.setsec { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 8px 0; background: #121724; }
.setsec h4 { margin: 0 0 6px; font-size: 14px; }
.setrow { display: flex; align-items: center; gap: 10px; margin: 6px 0; } .setrow label { width: 110px; color: var(--mut); font-size: 13px; flex: none; } .setrow select { flex: 1; max-width: none; }
.featlist { list-style: none; margin: 4px 0; padding: 0; font-size: 12.5px; } .featlist li { padding: 1px 0; } .featlist li.off { color: var(--mut); }
.fps { position: fixed; left: 8px; top: 8px; z-index: 400; background: #000a; border: 1px solid #44527a; color: #8ff0a4; font: 700 11px monospace; padding: 2px 6px; border-radius: 6px; pointer-events: none; }
.fps[hidden] { display: none; }
.ctrls #btnSettings { padding: 6px 10px; font-size: 16px; }

/* pop-ups: confirm, resurrect, sell all, cleanup, select */
.askbody { font-size: 14px; } .askbody p { margin: 6px 0; } .warn { color: #fbbf24; background: #2a2208; border: 1px solid #6b5a14; border-radius: 8px; padding: 6px 8px; }
.radio { display: flex; align-items: center; gap: 8px; margin: 6px 0; cursor: pointer; } .radio input { accent-color: var(--acc); width: 16px; height: 16px; }
.protbox { background: #10141d; border: 1px dashed var(--line); border-radius: 8px; padding: 6px 10px; margin: 8px 0; display: flex; flex-direction: column; gap: 2px; }
.clrule { display: flex; align-items: center; gap: 8px; margin: 4px 0; flex-wrap: wrap; } .clrule select, .clrule input[type=number] { flex: 1; min-width: 120px; max-width: none; }
.clrule select:disabled, .clrule input:disabled { opacity: .4; }
.clrow input[type=number] { max-width: 90px; flex: none; }
.clsample { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-height: 0; margin-bottom: 4px; }
.selhint { flex: 1 1 100%; font-size: 13px; color: #f6d98a; }
.bcard.sel::after { content: "✔"; position: absolute; right: 4px; top: 2px; background: var(--acc); color: #000; font-weight: 900; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 13px; z-index: 8; }
.bankgrid.selmode .bcard:not(.sel) { opacity: .8; }
.resp { text-align: center; } .resbig { font-size: 46px; line-height: 1; }
.resflow { display: flex; justify-content: center; align-items: center; gap: 14px; font-size: 26px; font-weight: 800; margin: 6px 0 10px; }
.resfrom { color: var(--mut); } .resto { color: #ffd24a; text-shadow: 0 0 10px #ffb02088; } .resflow .arrow { color: var(--mut); }
.rsbox { text-align: left; border-radius: 10px; padding: 8px 12px; margin: 6px 0; font-size: 13px; }
.rsbox.good { background: #0f2418; border: 1px solid #2f6b43; } .rsbox.bad { background: #241812; border: 1px solid #6b4a2f; }
.rsh { font-weight: 800; margin-bottom: 4px; } .rsrow { display: flex; justify-content: space-between; padding: 1px 0; } .gold-ish { color: #ffd24a; font-weight: 700; }
.resp .mrow { justify-content: center; }
.faRow { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 12px 0; flex-wrap: wrap; }
.faslot { width: 120px; text-align: center; background: #10141d; border: 2px dashed #4a3a8a; border-radius: 14px; padding: 12px 4px; cursor: pointer; }
.faslot:hover { border-color: #c4a1ff; box-shadow: 0 0 14px #7c3aed66; } .faslot .box { margin: 0 auto 6px; }
.faplus { font-size: 34px; animation: work .8s ease-in-out infinite alternate; }