* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0b0e14; color: #eef1f7;
  font-family: 'Rajdhani', system-ui, sans-serif; user-select: none; }
#scene { position: fixed; inset: 0; }
#scene canvas { display: block; }
#scene.shake { animation: shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake { 10%,90% { transform: translate(-2px,1px); } 20%,80% { transform: translate(4px,-2px); }
  30%,50%,70% { transform: translate(-7px,3px); } 40%,60% { transform: translate(7px,-3px); } }
/* cinematic colour-grade: soft vignette + cool top / warm low light bias */
#grade { position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(125% 95% at 50% 38%, rgba(0,0,0,0) 52%, rgba(8,6,12,.34) 84%, rgba(5,4,9,.6) 100%),
    linear-gradient(180deg, rgba(40,60,90,.06) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(60,30,18,.07) 100%);
  mix-blend-mode: normal; }
.hidden { display: none !important; }
#labels { position: fixed; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
/* floating action popups */
.pop { position: absolute; transform: translate(-50%, -50%); font-family: 'Orbitron', sans-serif; font-weight: 800;
  font-size: 16px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.8); white-space: nowrap; pointer-events: none;
  animation: popup 1.1s ease-out forwards; }
@keyframes popup { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.7); } 18% { opacity: 1; transform: translate(-50%,-60%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
/* missions panel */
#missions { position: fixed; top: 64px; left: 12px; z-index: 7; width: 320px; max-width: 90vw;
  background: rgba(14,18,28,.95); border: 1px solid #2a3346; border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.6);
  transform: translateX(-360px); opacity: 0; transition: transform .25s ease, opacity .25s; pointer-events: none; }
#missions.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
#mission-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; font-family: 'Orbitron'; font-weight: 700;
  letter-spacing: 2px; font-size: 14px; color: #fff; border-bottom: 1px solid #1c2433; }
#mission-count { color: #37e6cb; font-size: 13px; }
#missions-x { margin-left: auto; background: none; border: none; color: #8b97ad; font-size: 20px; cursor: pointer; }
#mission-list { max-height: 62vh; overflow-y: auto; padding: 8px 12px 14px; }
.mrow { padding: 11px 4px; border-bottom: 1px solid #161d29; }
.mrow.done { opacity: .55; }
.mtop { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.mname { font-weight: 700; font-size: 15px; color: #eef1f7; }
.mrow.done .mname { color: #6fffa0; }
.mrew { font-family: 'Orbitron'; font-size: 11px; color: #ffd166; white-space: nowrap; }
.mdesc { font-size: 12.5px; color: #8b97ad; margin: 2px 0 7px; }
.mbar { height: 7px; background: #1a2230; border-radius: 6px; overflow: hidden; }
.mbar i { display: block; height: 100%; background: linear-gradient(90deg,#37e6cb,#6fe0ff); border-radius: 6px; transition: width .3s; }
.mrow.done .mbar i { background: #4ade80; }
.mprog { font-size: 11px; color: #6e7a90; margin-top: 4px; text-align: right; font-family: 'Orbitron'; }
.mkhint { margin-top: 12px; font-size: 12px; color: #6e7a90; text-align: center; }

/* ---------- level / rank chips ---------- */
.chip.lvl { gap: 8px; }
.chip.lvl label { color: #ffd166; font-weight: 700; } .chip.lvl b { color: #ffd166; }
.xpbar { width: 46px; height: 6px; background: #1a2230; border-radius: 4px; overflow: hidden; }
.xpbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#ffd166,#ff9d3c); transition: width .3s; }
.chip.rank svg { fill: none; stroke: #ffcf6f; } .chip.rank b { color: #ffe39a; }
#b-collect b { font-family: 'Orbitron'; color: #1d6a3a; margin-left: 4px; }

/* ---------- upgrades ---------- */
#upgrades, #rivals { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: rgba(4,6,10,.7); backdrop-filter: blur(4px); }
#upgrades-card, #rivals-card { width: 480px; max-width: 92vw; padding: 22px; position: relative;
  background: radial-gradient(circle at 50% 0%, #1a2230 0%, #0e1620 70%); border: 1px solid #2a3346; border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7); }
#up-x, #rivals-x { position: absolute; top: 10px; right: 14px; background: none; border: none; color: #8b97ad; font-size: 22px; cursor: pointer; }
#upgrades-head, #rivals-head { text-align: center; font-family: 'Orbitron'; font-weight: 700; font-size: 18px; letter-spacing: 3px; color: #ffd166; margin-bottom: 14px; }
#upgrades-head span { display: block; font-size: 11px; letter-spacing: 2px; color: #8b97ad; margin-top: 4px; }
.uprow { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid #1c2433; }
.upicon { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: rgba(255,209,102,.1); border: 1px solid #4a3f20; border-radius: 10px; color: #ffd166; }
.upinfo { flex: 1; display: flex; flex-direction: column; }
.upinfo b { font-size: 15px; } .upinfo b em { font-style: normal; color: #ffd166; font-size: 12px; }
.upinfo span { font-size: 12.5px; color: #8b97ad; }
.upbtn { background: #15202e; border: 1px solid #2a3346; color: #ffe39a; border-radius: 8px; padding: 9px 14px; cursor: pointer;
  font-family: 'Orbitron'; font-weight: 700; font-size: 13px; min-width: 90px; }
.upbtn:hover:not(:disabled) { border-color: #ffd166; } .upbtn:disabled { opacity: .4; cursor: default; }
#up-bal { text-align: center; margin-top: 14px; font-size: 14px; color: #8b97ad; } #up-bal b { color: #fff; font-family: 'Orbitron'; }

/* ---------- rivals leaderboard ---------- */
#rivals-head span { display: inline-block; margin-left: 8px; color: #37e6cb; font-size: 14px; }
#rivals-list { max-height: 56vh; overflow-y: auto; }
.rvrow { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; font-size: 15px; }
.rvrow:nth-child(even) { background: rgba(255,255,255,.02); }
.rvrow.you { background: rgba(55,230,203,.12); border: 1px solid #2f7a6a; }
.rvrow.lead .rvpos { color: #ffd166; }
.rvpos { width: 26px; font-family: 'Orbitron'; font-weight: 700; color: #8b97ad; text-align: center; }
.rvname { flex: 1; font-weight: 700; } .rvrow.you .rvname { color: #6ff5d8; }
.rvworth { font-family: 'Orbitron'; font-size: 14px; color: #ffe39a; }
#rivals-foot { text-align: center; margin-top: 12px; font-size: 12px; color: #6e7a90; }

/* ---------- $SPCX utility hub ---------- */
#chip-tok { cursor: pointer; } #chip-tok:hover { border-color: #6fe0ff; }
#boosts { position: fixed; top: 56px; left: 50%; transform: translateX(-50%); z-index: 6; display: none; gap: 7px; flex-wrap: wrap; justify-content: center; max-width: 90vw; }
.boost { background: rgba(20,28,40,.94); border: 1px solid #37506a; color: #aee3ff; border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 700; box-shadow: 0 3px 10px rgba(0,0,0,.4); }
#utility { position: fixed; inset: 0; z-index: 21; display: flex; align-items: center; justify-content: center;
  background: rgba(4,6,10,.72); backdrop-filter: blur(5px); }
#utility-card { width: 520px; max-width: 94vw; max-height: 92vh; overflow-y: auto; padding: 22px; position: relative;
  background: radial-gradient(circle at 50% 0%, #10202e 0%, #0a131c 72%); border: 1px solid #244055; border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7); }
#util-x { position: absolute; top: 10px; right: 14px; background: none; border: none; color: #8b97ad; font-size: 22px; cursor: pointer; }
#utility-head { text-align: center; font-family: 'Orbitron'; font-weight: 700; font-size: 19px; letter-spacing: 2px; color: #6fe0ff; }
#utility-head span { display: block; font-size: 11px; letter-spacing: 2px; color: #6fb0c8; margin-top: 4px; }
#util-balrow { text-align: center; margin: 12px 0 6px; font-size: 14px; color: #9fb0c6; } #util-balrow b { color: #fff; font-family: 'Orbitron'; }
.util-sec { margin: 18px 0 8px; font-family: 'Orbitron'; font-weight: 700; font-size: 13px; letter-spacing: 2px; color: #cfe0ff; border-top: 1px solid #1b2a38; padding-top: 12px; }
.util-sub { display: block; font-family: 'Rajdhani'; font-weight: 600; font-size: 12px; letter-spacing: 0; color: #6e7a90; margin-top: 2px; }
.ut-card { border: 1px solid #2a3346; border-radius: 12px; padding: 14px 16px; background: rgba(255,255,255,.02); }
.ut-tname { font-family: 'Orbitron'; font-weight: 900; font-size: 18px; }
.ut-perk { font-size: 14px; color: #cfe0ff; margin-top: 3px; }
.ut-bal { font-size: 12.5px; color: #8b97ad; margin-top: 8px; }
.ut-fee { font-size: 12.5px; color: #9fb0c6; margin-top: 6px; padding-top: 6px; border-top: 1px solid #1b2a38; } .ut-fee b { font-family: 'Orbitron'; }
.ut-next { font-size: 12.5px; color: #8b97ad; margin-top: 3px; }
#util-stake { display: flex; gap: 8px; flex-wrap: wrap; }
#stake-amt { flex: 1; min-width: 110px; background: #0d1620; border: 1px solid #2a3346; border-radius: 8px; color: #fff; padding: 9px 12px; font-family: 'Rajdhani'; font-weight: 700; font-size: 15px; }
.ustbtn { background: #13283a; border: 1px solid #2a4356; color: #aee3ff; border-radius: 8px; padding: 9px 14px; cursor: pointer; font-family: 'Orbitron'; font-weight: 700; font-size: 12.5px; }
.ustbtn:hover { border-color: #6fe0ff; } .ustbtn.ghost { background: #131a24; color: #9fb0c6; }
.pwrow { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid #16202c; }
.pwicon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 17px; color: #6fe0ff;
  background: rgba(111,224,255,.08); border: 1px solid #244055; border-radius: 9px; }
.pwinfo { flex: 1; display: flex; flex-direction: column; } .pwinfo b { font-size: 15px; } .pwinfo span { font-size: 12.5px; color: #8b97ad; }
.pwbtn { background: #13283a; border: 1px solid #2a4356; color: #aee3ff; border-radius: 8px; padding: 9px 13px; cursor: pointer; font-family: 'Orbitron'; font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.pwbtn:hover:not(:disabled) { border-color: #6fe0ff; } .pwbtn:disabled { opacity: .4; cursor: default; }

/* ---------- automated farm ---------- */
#farm { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: rgba(4,6,10,.7); backdrop-filter: blur(4px); }
#farm-card { width: 500px; max-width: 92vw; padding: 22px; position: relative;
  background: radial-gradient(circle at 50% 0%, #19281c 0%, #0d1610 70%); border: 1px solid #2c4636; border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7); }
#farm-x { position: absolute; top: 10px; right: 14px; background: none; border: none; color: #8b97ad; font-size: 22px; cursor: pointer; }
#farm-head { text-align: center; font-family: 'Orbitron'; font-weight: 700; font-size: 18px; letter-spacing: 2px; color: #6fe0a0; margin-bottom: 14px; }
#farm-head span { display: inline-block; margin-left: 8px; font-size: 13px; color: #8b97ad; letter-spacing: 1px; }
.farmrow { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-top: 1px solid #1c2a20; }
.farmrow.active { background: rgba(111,224,160,.08); border-radius: 10px; padding: 12px; }
.farminfo { flex: 1; display: flex; flex-direction: column; }
.farminfo b { font-size: 15px; } .farminfo b em { font-style: normal; color: #6fe0a0; font-size: 12px; }
.farminfo span { font-size: 12.5px; color: #8b97ad; }
.farmbtn { background: #15281c; border: 1px solid #2c4636; color: #b6f5cf; border-radius: 8px; padding: 9px 13px; cursor: pointer;
  font-family: 'Orbitron'; font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.farmbtn:hover:not(:disabled) { border-color: #6fe0a0; } .farmbtn:disabled { opacity: .4; cursor: default; }
.farmbtn.demo { background: #2a1717; border-color: #5a3030; color: #ffb6a6; }
#farm-bal { text-align: center; margin-top: 14px; font-size: 13px; color: #8b97ad; } #farm-bal b { color: #fff; font-family: 'Orbitron'; }
.farm-lab { background: rgba(13,22,16,.92); border-color: #2c4636; color: #6fe0a0; font-weight: 700; letter-spacing: 1px; }
.station-lab { background: rgba(22,17,10,.92); border-color: #4a3a24; color: #ffb066; font-weight: 700; letter-spacing: 1px; }

/* ---------- welcome back ---------- */
#welcome { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(4,6,10,.82); backdrop-filter: blur(6px); }
#welcome-card { width: 440px; max-width: 92vw; padding: 36px 30px; text-align: center; position: relative;
  background: radial-gradient(circle at 50% 0%, #15243a 0%, #0c141f 72%); border: 1px solid rgba(111,224,255,.3); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7); }
#wb-title { font-family: 'Orbitron'; font-weight: 900; font-size: 19px; letter-spacing: 3px; color: #fff; }
#wb-sub { font-size: 14px; color: #9fb0c6; margin: 8px 0 18px; }
#wb-amount { font-family: 'Orbitron'; font-weight: 900; font-size: 44px; color: #6fffa0; text-shadow: 0 0 24px rgba(74,222,128,.5); }
#wb-amount-label { font-size: 13px; color: #8b97ad; letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; }
#wb-bonus { margin-top: 14px; padding: 8px 14px; display: inline-block; border-radius: 999px; font-size: 13px;
  color: #ffd166; background: rgba(255,209,102,.1); border: 1px solid #4a3f20; }
#wb-streakrow { margin-top: 16px; font-size: 13px; color: #8b97ad; } #wb-streakrow b { color: #ffd166; font-family: 'Orbitron'; }
#wb-collect { margin-top: 22px; font-family: 'Orbitron'; font-weight: 700; font-size: 15px; letter-spacing: 2px; color: #08121a;
  background: linear-gradient(180deg,#6fe0ff,#2a9fd8); border: none; border-radius: 10px; padding: 14px 30px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(42,159,216,.4); }
#wb-collect:hover { transform: translateY(-2px); }

/* ---------- top HUD ---------- */
#topbar { position: fixed; top: 10px; left: 10px; right: 10px; z-index: 6; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; row-gap: 6px; }
.chip { display: flex; align-items: center; gap: 6px; background: rgba(18,22,32,.92); border: 1px solid #2a3346;
  border-radius: 11px; padding: 6px 10px; font-size: 13.5px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.chip svg { width: 17px; height: 17px; fill: #ffd166; stroke: #ffd166; stroke-width: 1.6; }
.chip label { color: #8b97ad; font-size: 13px; }
.chip b { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 14px; color: #fff; }
.chip.tok svg { fill: #6fe0ff; stroke: #6fe0ff; } .chip.tok b { color: #6fe0ff; }
.chip.drop svg { fill: #8a6fff; stroke: #8a6fff; } .chip.drop b { color: #c2b6ff; }
#chip-wallet { cursor: pointer; } #chip-wallet:hover { border-color: #8fd0ff; }
#chip-drop { cursor: pointer; transition: transform .08s, border-color .2s; }
#chip-drop:hover { transform: translateY(-1px); }
#chip-drop.ready { border-color: #4ade80; background: rgba(34,80,52,.92); animation: dropready 1.1s ease-in-out infinite; }
#chip-drop.ready svg { fill: #6fffa0; stroke: #6fffa0; }
#chip-drop.ready b { color: #8effb4; }
#chip-drop.ready label { color: #bff5d0; }
@keyframes dropready { 0%,100% { box-shadow: 0 0 0 rgba(74,222,128,0); } 50% { box-shadow: 0 0 18px rgba(74,222,128,.6); } }
#chip-health svg { fill: #4ade80; stroke: #4ade80; } #chip-health b { color: #fff; }
#chip-health.sick { border-color: #c2603a; animation: sickpulse 1.1s ease-in-out infinite; }
#chip-health.sick svg { fill: #ff7a4a; stroke: #ff7a4a; } #chip-health.sick b { color: #ff9a6a; }
@keyframes sickpulse { 0%,100% { box-shadow: 0 0 0 rgba(255,90,40,0); } 50% { box-shadow: 0 0 14px rgba(255,90,40,.5); } }
.chip .muted { color: #5e6a80; font-size: 12px; }
.spacer { flex: 1; }
.tbtn { display: flex; align-items: center; gap: 7px; background: #f3f1ea; color: #14110a; border: none;
  border-radius: 12px; padding: 8px 14px; font-family: 'Rajdhani'; font-weight: 700; font-size: 14px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.tbtn svg { width: 16px; height: 16px; fill: none; stroke: #14110a; stroke-width: 2; }
.tbtn:hover { background: #fff; }
.tbtn.icon { padding: 8px 10px; background: rgba(18,22,32,.92); border: 1px solid #2a3346; }
.tbtn.icon svg { fill: #cfe0ff; stroke: #cfe0ff; }
.tbtn.icon:hover { background: rgba(30,38,54,.95); }
.tbtn.icon.muted svg { fill: #6e7a90; stroke: #6e7a90; }
.tbtn.icon.muted #mute-wave { display: none; }

#hintbar { position: fixed; top: auto; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 5;
  animation: hintfade .6s ease 16s forwards;
  background: rgba(18,22,32,.9); border: 1px solid #2a3346; border-radius: 20px; padding: 7px 18px;
  font-size: 13px; color: #c7d0e0; }
#hintbar b { color: #fff; }
@keyframes hintfade { to { opacity: 0; visibility: hidden; } }

/* ---------- projected labels ---------- */
.lab { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; font-size: 12px; font-weight: 700;
  pointer-events: none; padding: 2px 8px; border-radius: 7px; box-shadow: 0 3px 10px rgba(0,0,0,.5); }
.lab.price { background: #caa53a; color: #211a06; }
.lab.sale { background: #2f7d3a; color: #eafff0; }
.lab.name { background: rgba(12,15,22,.92); color: #eef1f7; border: 1px solid #2a3346; }
.lab.name .lvl { display: block; font-size: 10px; color: #ff8a8a; margin-bottom: 1px; }
.lab.place { background: rgba(12,15,22,.92); color: #cfd7e6; border: 1px solid #2a3346; font-weight: 600; }

/* ---------- minimap ---------- */
#minimap { position: fixed; left: 14px; bottom: 36px; z-index: 6; border: 1px solid #2a3346; border-radius: 10px;
  background: #0e1420; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
#mlegend { position: fixed; left: 16px; bottom: 16px; z-index: 6; font-size: 11px; color: #8b97ad; display: flex; align-items: center; gap: 5px; }
.ml { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-left: 8px; }
.ml.you { background: #6fe0ff; } .ml.sale { background: #caa53a; } .ml.vac { background: #46b257; }
.ml.farm { background: #6fe0a0; } .ml.station { background: #ffb066; } .ml.ore { background: #37e6cb; }

/* ---------- plot panel ---------- */
#plot { position: fixed; right: 16px; bottom: 16px; z-index: 7; width: 290px;
  background: rgba(14,18,28,.96); border: 1px solid #2a3346; border-radius: 14px; padding: 16px 16px 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6); }
#plot-x { position: absolute; top: 10px; right: 12px; background: none; border: none; color: #8b97ad; font-size: 18px; cursor: pointer; }
#plot-title { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 18px; }
#plot-sub { font-size: 11px; letter-spacing: 2px; color: #ff9a6a; margin: 2px 0 12px; }
.prow { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; border-top: 1px solid #1c2433; }
.prow span { color: #8b97ad; } .prow b { color: #fff; }
.pact { width: 100%; margin-top: 12px; background: linear-gradient(180deg,#2f9d4a,#1f7d38); color: #fff; border: none;
  border-radius: 10px; padding: 13px; font-family: 'Orbitron'; font-weight: 700; font-size: 13px; cursor: pointer; }
.pact:hover { filter: brightness(1.1); }
.pact:disabled { background: #2a3346; color: #6e7993; cursor: not-allowed; }
#plot-note { font-size: 12px; color: #6e7993; text-align: center; margin-top: 8px; }

/* ---------- action hint ---------- */
#act-hint { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 9px;
  background: rgba(14,18,28,.95); border: 1px solid #2a3346; border-radius: 24px; padding: 8px 16px 8px 8px; font-size: 14px; }
.ak { background: #f3f1ea; color: #14110a; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron'; font-weight: 700; font-size: 12px; }
#toast { position: fixed; bottom: 150px; left: 50%; transform: translateX(-50%); z-index: 8;
  background: rgba(14,18,28,.96); border: 1px solid #6fe0ff; border-radius: 12px; padding: 10px 18px; font-size: 14px;
  opacity: 0; transition: opacity .25s; pointer-events: none; white-space: nowrap; }
#toast.show { opacity: 1; }

/* ---------- start ---------- */
#start { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  overflow-y: auto; padding: 24px 0;
  background: radial-gradient(circle at 50% 25%, #1a2030 0%, #0b0e14 60%, #060810 100%); }
#start-card { width: 480px; max-width: 92vw; text-align: center; padding: 34px 34px; margin: auto;
  background: rgba(16,20,30,.7); border: 1px solid rgba(111,224,255,.22); border-radius: 16px; backdrop-filter: blur(6px);
  box-shadow: 0 30px 80px rgba(0,0,0,.6); }
#start-title { font-family: 'Orbitron'; font-weight: 900; font-size: 38px; letter-spacing: 6px; color: #fff; text-shadow: 0 0 30px rgba(111,224,255,.35); }
#start-sub { font-size: 13px; letter-spacing: 5px; color: #6fe0ff; margin: 6px 0 18px; }
#start-desc { font-size: 16px; line-height: 1.6; color: #aeb8c9; margin-bottom: 18px; }
#start-drop { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 10px 18px;
  background: rgba(111,224,255,.07); border: 1px solid rgba(111,224,255,.25); border-radius: 999px; }
#start-drop span { font-size: 13px; letter-spacing: 1.5px; color: #8fb6cc; text-transform: uppercase; }
#start-drop b { font-family: 'Orbitron'; font-weight: 700; font-size: 18px; color: #6fe0ff;
  text-shadow: 0 0 14px rgba(111,224,255,.5); min-width: 64px; text-align: left; }
#char-builder { margin: 4px 0 20px; padding: 16px 16px 14px; border-radius: 14px;
  background: rgba(111,224,255,.05); border: 1px solid rgba(111,224,255,.18); }
#char-stage { display: flex; justify-content: center; align-items: flex-end; height: 132px;
  background: radial-gradient(ellipse at 50% 38%, rgba(111,224,255,.12), transparent 62%); border-radius: 10px; margin-bottom: 12px; }
#char-svg { height: 128px; width: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
#char-name { width: 100%; box-sizing: border-box; font-family: 'Orbitron'; font-weight: 700; font-size: 14px;
  letter-spacing: 1px; text-align: center; color: #eaf2ff; background: rgba(8,14,22,.6);
  border: 1px solid rgba(111,224,255,.28); border-radius: 9px; padding: 10px; margin-bottom: 12px; outline: none; }
#char-name::placeholder { color: #6a8294; letter-spacing: .5px; font-weight: 400; }
#char-name:focus { border-color: #6fe0ff; box-shadow: 0 0 0 2px rgba(111,224,255,.18); }
.char-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.char-row label { width: 56px; flex-shrink: 0; text-align: left; font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; color: #8fb6cc; }
.swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.swatches .sw { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(255,255,255,.18);
  transition: transform .12s, border-color .12s; }
.swatches .sw:hover { transform: scale(1.15); }
.swatches .sw.sel { border-color: #fff; box-shadow: 0 0 0 2px rgba(111,224,255,.6); transform: scale(1.12); }
#wallet-box { margin-bottom: 18px; }
#connect-wallet { font-family: 'Orbitron'; font-weight: 700; font-size: 13px; letter-spacing: 1px; color: #e9eefc;
  background: linear-gradient(180deg,#3a2b78,#2a1e5c); border: 1px solid #5b46b0; border-radius: 10px; padding: 12px 22px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(90,60,200,.35); transition: transform .06s, box-shadow .2s; }
#connect-wallet:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(120,90,240,.5); }
#connect-wallet.connected { background: linear-gradient(180deg,#1c3a2a,#16302a); border-color: #2f7a52; }
#wallet-status { margin-top: 12px; font-size: 13.5px; line-height: 1.5; }
.wstat { display: inline-block; padding: 7px 14px; border-radius: 999px; }
.wstat.hold { color: #8effb4; background: rgba(34,80,52,.45); border: 1px solid #2f7a52; }
.wstat.no { color: #ffb38a; background: rgba(80,44,28,.4); border: 1px solid #a05a36; }
.wstat.pre { color: #c2b6ff; background: rgba(60,46,120,.35); border: 1px solid #5b46b0; }
#x-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 9px 18px;
  font-family: 'Orbitron'; font-weight: 700; font-size: 13px; letter-spacing: .5px; color: #e9eefc;
  text-decoration: none; background: rgba(255,255,255,.05); border: 1px solid rgba(111,224,255,.25);
  border-radius: 999px; transition: transform .1s, box-shadow .2s, border-color .2s; }
#x-link:hover { transform: translateY(-1px); border-color: #6fe0ff; box-shadow: 0 6px 18px rgba(111,224,255,.25); color: #fff; }
#x-link svg { flex-shrink: 0; }
#start-fine { font-size: 12px; color: #6e7a90; margin-top: 16px; line-height: 1.5; }
.legacy-box { margin-bottom: 14px; padding: 13px 15px; border-radius: 12px;
  background: linear-gradient(160deg, rgba(255,209,102,.10), rgba(120,90,240,.08)); border: 1px solid rgba(255,209,102,.28); }
.legacy-box.ready { border-color: rgba(255,209,102,.6); box-shadow: 0 0 26px rgba(255,209,102,.18); }
.legacy-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.legacy-star { font-family: 'Orbitron'; font-weight: 900; font-size: 18px; color: #ffd166; text-shadow: 0 0 14px rgba(255,209,102,.5); }
.legacy-bonus { font-size: 12px; letter-spacing: 1px; color: #ffe6a8; text-transform: uppercase; }
.legacy-desc { font-size: 12.5px; line-height: 1.5; color: #b9c0cc; margin-bottom: 11px; }
.legacy-desc b { color: #ffd166; }
.legacy-btn { width: 100%; font-family: 'Orbitron'; font-weight: 700; font-size: 13px; letter-spacing: 1px; color: #1a1208;
  background: linear-gradient(180deg, #ffd877, #f5a93a); border: none; border-radius: 9px; padding: 11px; cursor: pointer;
  transition: transform .08s, box-shadow .2s; }
.legacy-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(245,169,58,.4); }
.legacy-btn:disabled { background: rgba(255,255,255,.06); color: #6e7a90; cursor: not-allowed; font-size: 11.5px; letter-spacing: .5px; }
.chip.wallet { cursor: default; }
.chip.wallet svg { fill: none; stroke: #b9a7ff; } .chip.wallet b { color: #c9bcff; }
.chip.wallet.hold { border-color: #2f7a52; background: rgba(22,48,38,.92); }
.chip.wallet.hold svg { stroke: #6effa6; } .chip.wallet.hold b { color: #8effb4; }
#start-btn { font-family: 'Orbitron'; font-weight: 700; font-size: 15px; letter-spacing: 2px; color: #08121a;
  background: linear-gradient(180deg,#6fe0ff,#2a9fd8); border: none; border-radius: 10px; padding: 15px 30px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(42,159,216,.4); transition: transform .06s; }
#start-btn:hover { transform: translateY(-2px); }

/* ---------- SpaceX Casino · Blackjack ---------- */
#casino { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: rgba(4,6,10,.72); backdrop-filter: blur(4px); }
#casino-card { width: 540px; max-width: 94vw; padding: 22px 24px 18px; position: relative;
  background: radial-gradient(circle at 50% 0%, #14302a 0%, #0e1620 60%, #0b0e14 100%);
  border: 1px solid #2a6a58; border-radius: 18px; box-shadow: 0 30px 90px rgba(0,0,0,.7), inset 0 1px 0 rgba(111,224,180,.12); }
#casino-x { position: absolute; top: 12px; right: 14px; background: none; border: none; color: #8b97ad; font-size: 22px; cursor: pointer; }
#casino-head { text-align: center; font-family: 'Orbitron'; font-weight: 700; font-size: 20px; letter-spacing: 3px; color: #ffd166;
  text-shadow: 0 0 18px rgba(255,209,102,.4); margin-bottom: 16px; }
#casino-head span { color: #6fe0b4; font-size: 12px; letter-spacing: 2px; }
.bj-seat { margin: 6px 0; }
.bj-label { font-size: 13px; letter-spacing: 2px; color: #8fb8a8; margin-bottom: 6px; }
.bj-label span { color: #fff; font-family: 'Orbitron'; }
.bj-cards { display: flex; gap: 8px; min-height: 78px; align-items: center; }
.card { width: 54px; height: 74px; border-radius: 7px; background: #f4f1e8; color: #14110a; position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center;
  font-family: 'Rajdhani'; font-weight: 700; font-size: 22px; flex-shrink: 0; animation: deal .25s ease; }
.card.red { color: #c2342e; } .card .r { position: absolute; top: 4px; left: 6px; font-size: 14px; }
.card .s { position: absolute; bottom: 2px; right: 6px; font-size: 16px; }
.card.back { background: linear-gradient(135deg,#1b3a5a,#0e2138); color: #6fe0ff; }
.card.back::after { content: '✦'; }
@keyframes deal { from { transform: translateY(-14px) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
#bj-msg { text-align: center; font-size: 16px; color: #eef1f7; min-height: 22px; margin: 10px 0; font-weight: 600; }
#bj-msg.win { color: #6fe0b4; } #bj-msg.lose { color: #ff8a8a; } #bj-msg.push { color: #ffd166; }
#bj-bet { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 12px 0 14px; font-size: 14px; color: #8b97ad; }
.bjchip { background: #15202e; border: 1px solid #2a3346; color: #cfd7e6; border-radius: 18px; padding: 6px 13px; cursor: pointer; font-family: 'Rajdhani'; font-weight: 700; }
.bjchip.sel { border-color: #ffd166; color: #ffd166; }
#bj-betval { color: #ffd166; font-family: 'Orbitron'; margin-left: 6px; }
#bj-actions { display: flex; gap: 10px; justify-content: center; }
.bjbtn { flex: 1; max-width: 150px; padding: 13px; border: 1px solid #2a3346; background: #15202e; color: #eef1f7;
  border-radius: 10px; font-family: 'Orbitron'; font-weight: 700; font-size: 13px; cursor: pointer; letter-spacing: 1px; }
.bjbtn.primary { background: linear-gradient(180deg,#2f9d6a,#1f7d4e); border-color: #4adf9a; }
.bjbtn:disabled { opacity: .4; cursor: not-allowed; }
#bj-cash { text-align: center; margin-top: 12px; font-size: 14px; color: #8b97ad; }
#bj-cash b { color: #fff; font-family: 'Orbitron'; }

.tbtn.alt { background: #15202e; color: #cfd7e6; } .tbtn.alt svg { stroke: #cfd7e6; } .tbtn.alt:hover { background: #1c2a3a; }
.pact.sell { background: #3a2330; border: 1px solid #a05060; margin-top: 8px; }
.pact.sell:hover { filter: brightness(1.15); }

/* ---------- Marketplace ---------- */
#market { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: rgba(4,6,10,.7); backdrop-filter: blur(4px); }
#market-card { width: 420px; max-width: 92vw; padding: 22px; position: relative;
  background: radial-gradient(circle at 50% 0%, #1a2230 0%, #0e1620 70%); border: 1px solid #2a3346; border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7); }
#market-x { position: absolute; top: 10px; right: 14px; background: none; border: none; color: #8b97ad; font-size: 22px; cursor: pointer; }
#market-head { text-align: center; font-family: 'Orbitron'; font-weight: 700; font-size: 18px; letter-spacing: 3px; color: #6fe0ff; margin-bottom: 16px; }
.mkrow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #1c2433; }
.mkrow span { flex: 1; font-size: 15px; } .mkrow em { font-style: normal; color: #ffd166; font-family: 'Orbitron'; font-size: 13px; }
.mkbtn { background: #15202e; border: 1px solid #2a3346; color: #eef1f7; border-radius: 8px; padding: 7px 13px; cursor: pointer; font-family: 'Rajdhani'; font-weight: 700; }
.mkbtn:hover { border-color: #6fe0ff; }
#market-bal { text-align: center; margin-top: 14px; font-size: 14px; color: #8b97ad; } #market-bal b { color: #fff; font-family: 'Orbitron'; }

/* ---------- planetary transit ---------- */
#travel { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: rgba(4,6,10,.7); backdrop-filter: blur(4px); }
#travel-card { width: 460px; max-width: 92vw; padding: 22px; position: relative;
  background: radial-gradient(circle at 50% 0%, #1a2230 0%, #0e1620 70%); border: 1px solid #2a3346; border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7); }
#travel-x { position: absolute; top: 10px; right: 14px; background: none; border: none; color: #8b97ad; font-size: 22px; cursor: pointer; }
#travel-head { text-align: center; font-family: 'Orbitron'; font-weight: 700; font-size: 18px; letter-spacing: 3px; color: #8fd0ff; margin-bottom: 6px; }
#travel-head span { display: block; color: #6fe0b4; font-size: 11px; letter-spacing: 2px; margin-top: 4px; }
#travel-list { margin-top: 12px; }
.trrow { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid #1c2433; }
.trname { flex: 1; font-size: 17px; font-weight: 700; display: flex; flex-direction: column; }
.trname em { font-style: normal; color: #8b97ad; font-size: 11px; letter-spacing: 1.5px; font-weight: 600; }
.trcost { font-family: 'Orbitron'; font-size: 14px; color: #ffd166; min-width: 64px; text-align: right; }
.trbtn { background: #15202e; border: 1px solid #2a3346; color: #eef1f7; border-radius: 8px; padding: 8px 14px; cursor: pointer;
  font-family: 'Rajdhani'; font-weight: 700; min-width: 116px; }
.trbtn:hover:not(:disabled) { border-color: #8fd0ff; background: #18283a; }
.trbtn:disabled { opacity: .45; cursor: default; }
.trrow.here { background: rgba(143,208,255,.06); border-radius: 10px; }
.trrow.here .trbtn { color: #8fd0ff; border-color: #335; }
#travel-bal { text-align: center; margin-top: 16px; font-size: 14px; color: #8b97ad; } #travel-bal b { color: #fff; font-family: 'Orbitron'; }

/* teleport FX */
#flash { position: fixed; inset: 0; z-index: 30; pointer-events: none; background: #cfeeff; opacity: 0; }
#flash.go { animation: tpflash .85s ease-out; }
@keyframes tpflash { 0% { opacity: 0; } 12% { opacity: .9; } 100% { opacity: 0; } }
#tp-banner { position: fixed; top: 36%; left: 50%; transform: translateX(-50%); z-index: 31; pointer-events: none;
  font-family: 'Orbitron'; font-weight: 900; font-size: 40px; letter-spacing: 5px; color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,.8); opacity: 0; text-align: center; white-space: nowrap; }
#tp-banner::after { content: attr(data-sub); display: block; font-size: 14px; letter-spacing: 4px; color: #8fd0ff; margin-top: 8px; }
#tp-banner.go { animation: tpbanner 2.4s ease-out; }
@keyframes tpbanner { 0% { opacity: 0; transform: translateX(-50%) scale(.92); } 16% { opacity: 1; } 68% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) scale(1.02); } }

/* ---------- Furnish home ---------- */
#furnish { position: fixed; left: 14px; top: 70px; z-index: 9; width: 210px;
  background: rgba(14,18,28,.95); border: 1px solid #2a3346; border-radius: 14px; padding: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6); }
#furnish-head { font-family: 'Orbitron'; font-weight: 700; font-size: 14px; letter-spacing: 2px; color: #6fe0ff;
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
#furnish-head button { background: none; border: none; color: #8b97ad; font-size: 18px; cursor: pointer; }
#furnish-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.fbtn { display: flex; align-items: center; justify-content: space-between; background: #15202e; border: 1px solid #2a3346;
  color: #eef1f7; border-radius: 9px; padding: 9px 11px; cursor: pointer; font-family: 'Rajdhani'; font-weight: 600; font-size: 14px; }
.fbtn em { font-style: normal; color: #ffd166; font-family: 'Orbitron'; font-size: 12px; }
.fbtn:hover { border-color: #6fe0ff; } .fbtn.sel { border-color: #37e6cb; box-shadow: 0 0 12px rgba(55,230,201,.35); }
.fbtn.cant { opacity: .45; }
#furnish-note { font-size: 12px; color: #6e7993; margin-top: 10px; line-height: 1.4; } #furnish-note b { color: #cfd7e6; }

@media (max-width: 1100px) { .chip label { display: none; } #hintbar { display: none; } }

/* ============================================================
   GLASS UI — Apple/visionOS-style frosted glass overhaul
   Appended last so it overrides the base surfaces. Layout untouched;
   only the look (translucency, blur, hairline edges, soft depth).
   ============================================================ */
:root { --glass-edge: rgba(255,255,255,.14); --glass-edge-soft: rgba(255,255,255,.08);
  --glass-hi: inset 0 1px 0 rgba(255,255,255,.16); --glass-shadow: 0 18px 55px rgba(0,0,0,.5); }

/* HUD chips — light, floating frosted pills */
.chip {
  background: rgba(22,28,40,.5);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-edge); border-radius: 13px;
  box-shadow: 0 6px 20px rgba(0,0,0,.32), var(--glass-hi); }
.boost {
  background: rgba(26,34,50,.5); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid var(--glass-edge-soft); box-shadow: 0 4px 14px rgba(0,0,0,.3), var(--glass-hi); }

/* Modal dimmers — deep, frosted backdrop */
#casino, #market, #travel { background: rgba(4,7,12,.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* All panel cards share one premium glass treatment */
#upgrades-card, #rivals-card, #utility-card, #farm-card, #welcome-card,
#casino-card, #market-card, #travel-card, #plot, #missions, #start-card {
  background: rgba(18,24,36,.55) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--glass-edge); border-radius: 20px;
  box-shadow: var(--glass-shadow), var(--glass-hi); }
/* keep each panel's signature accent tint as a faint top glow over the glass */
#upgrades-card { background: linear-gradient(180deg, rgba(255,209,102,.06), rgba(18,24,36,.55)) !important; }
#rivals-card   { background: linear-gradient(180deg, rgba(255,207,111,.06), rgba(18,24,36,.55)) !important; }
#utility-card  { background: linear-gradient(180deg, rgba(111,224,255,.07), rgba(16,22,34,.55)) !important; }
#farm-card     { background: linear-gradient(180deg, rgba(111,224,160,.06), rgba(14,22,30,.55)) !important; }
#travel-card   { background: linear-gradient(180deg, rgba(143,208,255,.06), rgba(16,22,34,.55)) !important; }
#market-card   { background: linear-gradient(180deg, rgba(111,224,255,.05), rgba(16,22,34,.55)) !important; }
#welcome-card  { background: linear-gradient(180deg, rgba(111,224,255,.08), rgba(14,20,32,.55)) !important; border-color: rgba(111,224,255,.28); }
#start-card    { background: rgba(16,22,34,.5) !important; border-radius: 22px; }

/* inner cards / rows pick up a subtle glass too */
.ut-card { background: rgba(255,255,255,.045); border: 1px solid var(--glass-edge-soft); border-radius: 14px; }
.uprow, .farmrow, .rvrow { border-radius: 12px; }

/* primary action buttons — frosted accent glass with crisp highlight */
.tbtn.icon { background: rgba(22,28,40,.5); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid var(--glass-edge); border-radius: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.3), var(--glass-hi); }
.tbtn.icon:hover { background: rgba(40,50,70,.6); }
.tbtn.alt { background: rgba(255,255,255,.06); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #e7edf7; border-radius: 11px; }
.tbtn.alt:hover { background: rgba(255,255,255,.12); }

/* action / minimap surfaces */
#act-hint { background: rgba(18,24,36,.5); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-edge); border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.35), var(--glass-hi); }
#minimap { border: 1px solid var(--glass-edge); border-radius: 16px; box-shadow: var(--glass-shadow), var(--glass-hi);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* the character-builder + drop pill on the start screen, glassed to match */
#char-builder { background: rgba(255,255,255,.04); border: 1px solid var(--glass-edge-soft);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 18px; }
#start-drop { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* district re-zone selector in the plot panel */
#plot-types { margin: 4px 0 10px; }
#plot-types .ptlabel { display: block; font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: #8b97ad; margin-bottom: 7px; }
#plot-types .ptrow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ptbtn { --pt: #6fb0ff; text-align: left; padding: 7px 9px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: #cfd7e6;
  display: flex; flex-direction: column; gap: 1px; transition: border-color .15s, background .15s; }
.ptbtn b { font-family: 'Orbitron'; font-weight: 700; font-size: 11.5px; color: var(--pt); }
.ptbtn span { font-size: 10px; color: #8b97ad; line-height: 1.25; }
.ptbtn:hover:not(:disabled) { background: rgba(255,255,255,.08); border-color: var(--pt); }
.ptbtn.sel { border-color: var(--pt); background: color-mix(in srgb, var(--pt) 16%, transparent); box-shadow: inset 0 0 0 1px var(--pt); }
.ptbtn:disabled { opacity: .5; cursor: default; }

/* tech-tree: locked tier-II upgrade rows */
.uprow.locked { opacity: .6; }
.uprow.locked .upicon { filter: grayscale(1); }
.uprow.locked .upbtn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #8b97ad; font-size: 11px; letter-spacing: .3px; }

/* start-screen logo */
#start-logo { display: block; width: 92px; height: 92px; margin: 0 auto 12px; border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 40px rgba(111,224,255,.25); image-rendering: pixelated; }

/* copyable contract-address pill on the start screen */
#ca-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 92%; margin: 2px auto 16px; padding: 7px 13px;
  font-family: 'Rajdhani', monospace; font-size: 12.5px; color: #cfe0ff; cursor: pointer;
  background: rgba(111,224,255,.06); border: 1px solid rgba(111,224,255,.28); border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .15s, transform .08s, background .15s; }
#ca-pill:hover { border-color: #6fe0ff; background: rgba(111,224,255,.12); transform: translateY(-1px); }
#ca-pill:active { transform: translateY(0); }
#ca-pill .ca-lbl { font-family: 'Orbitron'; font-weight: 700; font-size: 11px; letter-spacing: 1px; color: #6fe0ff; flex-shrink: 0; }
#ca-pill #ca-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .3px; }
#ca-pill svg { flex-shrink: 0; opacity: .7; }
#ca-pill.copied { border-color: #4ade80; color: #8af0ab; }
#ca-pill.copied .ca-lbl { color: #4ade80; }