:root {
  --bg:#151a2e; --bg2:#1d2340; --card:#232a4a; --card2:#2b3358; --line:#343d68;
  --ink:#f3f1ff; --muted:#a7a9cf; --amber:#ffb84d; --gold:#ffd34d; --teal:#3ee6c4; --pink:#ff5c8a;
  --green:#3ddc84; --red:#ff5b57; --purple:#8b6cff;
  color-scheme: dark;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent }
[hidden] { display:none !important }
html, body { height:100%; margin:0; background:#0c1020; color:var(--ink); font:600 15px/1.35 Nunito, system-ui, sans-serif; overscroll-behavior:none }
body { display:flex; justify-content:center }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0 }
#app { position:relative; width:100%; max-width:440px; height:100%; background:var(--bg); display:flex; flex-direction:column; overflow:hidden; user-select:none; -webkit-user-select:none }

/* HUD */
.hud { display:flex; align-items:center; gap:8px; padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px; background:linear-gradient(180deg,#10142a,#151a2e); border-bottom:1px solid #222a4d; z-index:5 }
.me { display:flex; align-items:center; gap:8px; flex:1; min-width:0; text-align:left }
.ava { width:38px; height:38px; border-radius:12px; background:var(--card2); display:grid; place-items:center; overflow:hidden; flex:none; box-shadow:inset 0 0 0 2px #3a4479 }
.ava img { width:40px; height:40px; object-fit:contain; margin-top:4px }
.me-txt { display:flex; flex-direction:column; gap:4px; min-width:0 }
.rank { font:400 15px 'Lilita One', sans-serif; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.repbar { width:82px; height:6px; border-radius:6px; background:#2c3462; overflow:hidden }
.repbar i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--teal),#7ff5df); border-radius:6px; transition:width .4s }
.stat { display:flex; align-items:center; gap:6px; background:var(--card); border-radius:999px; padding:6px 11px; font-weight:900; font-variant-numeric:tabular-nums; box-shadow:inset 0 0 0 1px #343d68 }
.energy { flex-direction:column; gap:1px; padding:5px 10px; border-radius:12px }
.energy small { font-size:10px; color:var(--muted); font-weight:800; line-height:1 }
.pips { display:flex; gap:3px }
.pips i { width:9px; height:13px; border-radius:3px; background:#3a4270 }
.pips i.on { background:linear-gradient(180deg,#7dfde3,var(--teal)); box-shadow:0 0 6px rgba(62,230,196,.55) }
.icon { width:34px; height:34px; border-radius:10px; background:var(--card); font-size:16px }
.ico.coin { width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#fff3b0,#ffd34d 45%,#d99a1c); box-shadow:inset 0 0 0 2px #b9800f, 0 1px 0 #7a5208; flex:none; display:inline-block }

/* screens */
#screens { flex:1; position:relative; overflow:hidden }
.screen { position:absolute; inset:0; overflow-y:auto; padding:0 12px 18px; display:none; scrollbar-width:none }
.screen::-webkit-scrollbar { display:none }
.screen.active { display:block }
.hideout { position:relative; height:250px; margin:0 -12px; background:url(assets/bg_hideout.webp) center 38%/cover; overflow:hidden }
.hideout::after { content:''; position:absolute; inset:auto 0 0 0; height:90px; background:linear-gradient(180deg,transparent,var(--bg)) }
.hero-art { position:absolute; left:50%; bottom:6px; height:210px; transform:translateX(-50%); z-index:2; animation:bob 2.6s ease-in-out infinite; filter:drop-shadow(0 8px 10px rgba(0,0,0,.45)) }
@keyframes bob { 0%,100% { transform:translateX(-50%) translateY(0) } 50% { transform:translateX(-50%) translateY(-5px) } }
.fence { position:absolute; left:12px; top:12px; z-index:3; display:flex; align-items:center; gap:6px; padding:7px 10px; border-radius:14px; background:rgba(16,20,42,.82); box-shadow:inset 0 0 0 1px #3a4479; font-weight:900; font-variant-numeric:tabular-nums }
.fence small { display:block; font-size:10px; color:var(--muted); font-weight:800 }
.fence.ready { box-shadow:inset 0 0 0 2px var(--gold), 0 0 14px rgba(255,211,77,.35); animation:pulse 1.6s ease-in-out infinite }
@keyframes pulse { 50% { transform:scale(1.04) } }
.trust-chip { position:absolute; right:12px; top:12px; z-index:3; padding:7px 10px; border-radius:14px; background:rgba(16,20,42,.82); box-shadow:inset 0 0 0 1px #3a4479; font-weight:900; font-size:13px }
.trust-chip small { display:block; font-size:10px; color:var(--muted); font-weight:800 }
.sect-h { display:flex; align-items:baseline; justify-content:space-between; margin:6px 2px 8px }
.sect-h span { font:400 19px 'Lilita One', sans-serif; letter-spacing:.02em }
.sect-h small { color:var(--muted); font-size:12px; font-weight:800 }
.targets { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px }
.tcard { position:relative; background:var(--card); border-radius:18px; padding:8px 10px 10px; text-align:left; box-shadow:inset 0 0 0 1px var(--line), 0 3px 0 #10142a; transition:transform .08s }
.tcard:active { transform:translateY(2px) }
.tcard img { width:100%; aspect-ratio:1/0.78; object-fit:cover; border-radius:12px; display:block; background:#1a2146 }
.tcard .tn { font:400 16px 'Lilita One', sans-serif; margin-top:6px; letter-spacing:.02em }
.tcard .tm { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); font-weight:800; margin-top:2px }
.tcard .tm b { color:var(--gold) }
.tcard .stars { color:var(--amber); letter-spacing:1px }
.tcard.locked { filter:grayscale(.85) brightness(.7) }
.tcard.locked::after { content:attr(data-lock); position:absolute; inset:8px 10px auto 10px; aspect-ratio:1/0.78; display:grid; place-items:center; background:rgba(10,13,28,.55); border-radius:12px; font:400 15px 'Lilita One'; color:#fff; text-align:center; padding:0 8px }
.crewjob { background:linear-gradient(135deg,#3b2a6e,#23306a); border-radius:20px; padding:12px; box-shadow:inset 0 0 0 1px #5a4aa8, 0 3px 0 #10142a; display:grid; grid-template-columns:86px 1fr; gap:12px; align-items:center }
.crewjob img { width:86px; height:86px; border-radius:14px; object-fit:cover }
.crewjob .cj-t { font:400 19px 'Lilita One'; letter-spacing:.02em }
.crewjob .cj-s { font-size:12.5px; color:#cfc8ff; margin:2px 0 8px }
.crewjob .cj-faces { display:flex; margin:0 0 8px }
.crewjob .cj-faces img { width:30px; height:30px; border-radius:50%; background:#2b2f5e; box-shadow:0 0 0 2px #3b2a6e; margin-right:-6px; object-fit:cover }
.crewjob.cooldown { filter:saturate(.6) }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:14px; padding:12px 16px; font:400 17px 'Lilita One', sans-serif; letter-spacing:.03em; color:#1b1300; background:linear-gradient(180deg,#ffe07a,var(--amber)); box-shadow:0 4px 0 #b06d12; transition:transform .06s, box-shadow .06s }
.btn:active { transform:translateY(3px); box-shadow:0 1px 0 #b06d12 }
.btn.teal { color:#032a22; background:linear-gradient(180deg,#8affea,var(--teal)); box-shadow:0 4px 0 #1d8f78 }
.btn.pink { color:#2d0613; background:linear-gradient(180deg,#ff9ab6,var(--pink)); box-shadow:0 4px 0 #b02a54 }
.btn.green { color:#04210f; background:linear-gradient(180deg,#8cf5b6,var(--green)); box-shadow:0 4px 0 #1f8a4c }
.btn.red { color:#2c0403; background:linear-gradient(180deg,#ff9d99,var(--red)); box-shadow:0 4px 0 #a52a26 }
.btn.ghost { color:var(--ink); background:var(--card2); box-shadow:0 3px 0 #10142a, inset 0 0 0 1px var(--line) }
.btn[disabled] { filter:grayscale(1) brightness(.7); pointer-events:none }
.btn.wide { width:100%; margin-top:12px }
.btn.sm { padding:8px 12px; font-size:15px; border-radius:12px }

/* nav */
.nav { display:grid; grid-template-columns:repeat(5,1fr); padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px)); background:#10142a; border-top:1px solid #222a4d; z-index:5 }
.nav button { display:flex; flex-direction:column; align-items:center; gap:1px; padding:5px 0; border-radius:12px; font-size:11px; font-weight:900; color:var(--muted) }
.nav button span { font-size:20px; line-height:1.1 }
.nav button.on { color:var(--ink); background:var(--card) }

/* gear */
.page-h { font:400 24px 'Lilita One'; letter-spacing:.02em; margin:14px 2px 2px; display:flex; align-items:center; gap:8px }
.page-h.small { font-size:19px; margin-top:18px }
.page-sub { color:var(--muted); margin:0 2px 12px; font-size:13.5px }
.demo { font:800 10px Nunito; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); border:1px solid currentColor; border-radius:6px; padding:2px 5px }
.gear { display:grid; gap:10px }
.gitem { display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center; background:var(--card); border-radius:16px; padding:10px 12px; box-shadow:inset 0 0 0 1px var(--line) }
.gicon { width:52px; height:52px; border-radius:14px; background:var(--card2); display:grid; place-items:center; font-size:28px }
.gname { font:400 17px 'Lilita One'; letter-spacing:.02em }
.glv { display:flex; gap:3px; margin:3px 0 }
.glv i { width:14px; height:6px; border-radius:3px; background:#3a4270 }
.glv i.on { background:var(--teal) }
.gfx { font-size:12px; color:var(--muted); font-weight:800 }

/* rep / crew */
.trustcard { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; background:var(--card); border-radius:18px; padding:14px; box-shadow:inset 0 0 0 1px var(--line) }
.tring { width:86px; height:86px; border-radius:50%; display:grid; place-items:center; font:400 30px 'Lilita One' }
.tlabel { font:400 20px 'Lilita One'; letter-spacing:.02em }
.tsub { color:var(--muted); font-size:13px; margin-top:2px }
.how { margin-top:12px; background:var(--bg2); border-radius:16px; padding:12px 14px; display:grid; gap:7px; font-size:13.5px }
.how-h { font:400 16px 'Lilita One'; letter-spacing:.02em }
.how-row { display:grid; grid-template-columns:118px 1fr; gap:8px; color:var(--muted) }
.how-row b { color:var(--ink) } .how-row b.g { color:var(--green) } .how-row b.r { color:var(--red) }
.history { display:grid; gap:8px }
.hrow { display:grid; grid-template-columns:1fr auto; gap:6px; background:var(--card); border-radius:14px; padding:10px 12px; font-size:13px; box-shadow:inset 0 0 0 1px var(--line) }
.hrow .hs { color:var(--muted); font-size:12px }
.hrow .hv { font-weight:900; text-align:right }
.empty { color:var(--muted); font-size:13px; padding:10px 2px }

/* top */
.seg { display:flex; gap:6px; background:var(--bg2); border-radius:14px; padding:4px; margin:10px 0 }
.seg button { flex:1; padding:8px 0; border-radius:10px; font-weight:900; font-size:12.5px; color:var(--muted) }
.seg button.on { background:var(--card2); color:var(--ink) }
.board { display:grid; gap:6px }
.brow { display:grid; grid-template-columns:28px 34px 1fr auto; gap:10px; align-items:center; background:var(--card); border-radius:14px; padding:8px 12px; font-size:14px }
.brow.you { box-shadow:inset 0 0 0 2px var(--amber) }
.brow .bn { font-weight:900; color:var(--muted); text-align:center }
.brow img { width:34px; height:34px; border-radius:50%; background:var(--card2); object-fit:cover }
.brow .bv { font-weight:900; font-variant-numeric:tabular-nums }

/* heist run */
.run { position:absolute; inset:0; z-index:20; background:#000; touch-action:none }
#cv { position:absolute; inset:0; width:100%; height:100%; display:block }
.run-top { position:absolute; left:0; right:0; top:0; display:flex; align-items:center; gap:10px; padding:calc(10px + env(safe-area-inset-top,0px)) 12px 0; pointer-events:none }
.run-quit { pointer-events:auto; width:34px; height:34px; border-radius:10px; background:rgba(10,13,28,.7); font-size:15px }
.phase { flex:1; text-align:center; font:400 20px 'Lilita One'; letter-spacing:.06em; text-shadow:0 2px 0 rgba(0,0,0,.6) }
.strikes { display:flex; gap:5px; padding:6px 8px; border-radius:12px; background:rgba(10,13,28,.7) }
.strikes i { width:14px; height:14px; border-radius:50%; background:#384068; box-shadow:inset 0 0 0 2px #4a5384 }
.strikes i.on { background:radial-gradient(circle at 40% 35%,#ffb3b0,var(--red)); box-shadow:0 0 10px var(--red) }
.run-haul { position:absolute; left:50%; top:calc(56px + env(safe-area-inset-top,0px)); transform:translateX(-50%); display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:rgba(10,13,28,.72); font-weight:900; font-size:17px; font-variant-numeric:tabular-nums; pointer-events:none }
.tip { position:absolute; left:16px; right:16px; bottom:calc(22px + env(safe-area-inset-bottom,0px)); text-align:center; font-weight:900; font-size:15px; padding:10px 12px; border-radius:14px; background:rgba(10,13,28,.75); pointer-events:none; transition:opacity .3s }
.tip:empty { opacity:0 }
.banner { position:absolute; left:0; right:0; top:38%; text-align:center; font:400 44px 'Lilita One'; letter-spacing:.04em; color:#fff; text-shadow:0 4px 0 rgba(0,0,0,.55), 0 0 30px rgba(255,184,77,.5); pointer-events:none; animation:pop .5s cubic-bezier(.2,1.6,.4,1) }
.banner small { display:block; font:900 15px Nunito; letter-spacing:.02em; color:var(--muted); margin-top:4px; text-shadow:none }
.banner.bad { color:var(--red); text-shadow:0 4px 0 rgba(0,0,0,.55), 0 0 30px rgba(255,91,87,.6) }
@keyframes pop { from { transform:scale(.4); opacity:0 } to { transform:scale(1); opacity:1 } }

/* modal */
.modal { position:absolute; inset:0; z-index:40; background:rgba(6,8,18,.66); display:flex; align-items:flex-end; animation:fade .2s }
@keyframes fade { from { opacity:0 } }
.sheet { width:100%; max-height:92%; overflow-y:auto; background:var(--bg2); border-radius:24px 24px 0 0; padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px)); box-shadow:0 -1px 0 #39427a; animation:up .28s cubic-bezier(.2,1,.3,1) }
@keyframes up { from { transform:translateY(40px); opacity:.4 } }
.sh-t { font:400 26px 'Lilita One'; letter-spacing:.03em; text-align:center }
.sh-s { color:var(--muted); text-align:center; font-size:13.5px; margin:2px 0 10px }
.res-big { display:flex; justify-content:center; align-items:center; gap:10px; font:400 46px 'Lilita One'; color:var(--gold); margin:4px 0 }
.res-big .ico.coin { width:34px; height:34px }
.res-lines { display:grid; gap:6px; background:var(--card); border-radius:14px; padding:10px 12px; font-size:14px; margin:8px 0 12px }
.res-lines div { display:flex; justify-content:space-between }
.res-lines b { font-variant-numeric:tabular-nums }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.stamp { text-align:center; font:400 34px 'Lilita One'; letter-spacing:.06em; margin-top:2px }
.stamp.good { color:var(--green) } .stamp.bad { color:var(--red) }
.res-art { display:block; height:120px; margin:0 auto -6px }

/* crew sheet */
.slots { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0 }
.slot { position:relative; background:var(--card); border-radius:16px; padding:10px; min-height:132px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:4px; box-shadow:inset 0 0 0 1px var(--line) }
.slot img { width:58px; height:58px; border-radius:50%; background:var(--card2); object-fit:cover }
.slot .sn { font:400 15px 'Lilita One'; letter-spacing:.02em }
.slot .st { font-size:11.5px; color:var(--muted); font-weight:800 }
.slot .tag { position:absolute; top:7px; right:7px; font-size:9.5px; font-weight:900; letter-spacing:.06em; padding:2px 6px; border-radius:6px; background:var(--teal); color:#032a22 }
.slot .tag.bot { background:#4a5384; color:#dfe2ff }
.slot.empty { box-shadow:inset 0 0 0 2px #3a4479; background:transparent; border:2px dashed #3a4479 }
.slot .sb { display:grid; gap:6px; width:100%; margin-top:4px }
.slot .lk { font-size:10.5px; color:var(--amber); text-decoration:underline; font-weight:800 }
.searching { animation:blink 1s infinite }
@keyframes blink { 50% { opacity:.4 } }
.vault-total { text-align:center; margin:6px 0 2px; font:400 44px 'Lilita One'; color:var(--gold) }
.vault-sub { text-align:center; color:var(--muted); font-size:13px }
.choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0 6px }
.choices .btn { padding:16px 8px; font-size:22px; flex-direction:column; gap:0 }
.choices .btn small { font:900 11.5px Nunito; letter-spacing:0; opacity:.85 }
.ctimer { height:6px; border-radius:6px; background:#2c3462; overflow:hidden; margin-top:6px }
.ctimer i { display:block; height:100%; background:var(--amber); width:100% }
.reveal { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:12px 0 }
.rcard { perspective:600px; height:132px }
.rcard .in { position:relative; width:100%; height:100%; transition:transform .55s; transform-style:preserve-3d }
.rcard.flip .in { transform:rotateY(180deg) }
.rcard .f, .rcard .b { position:absolute; inset:0; border-radius:14px; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px; text-align:center; background:var(--card); box-shadow:inset 0 0 0 1px var(--line) }
.rcard .b { transform:rotateY(180deg) }
.rcard img { width:44px; height:44px; border-radius:50%; object-fit:cover; background:var(--card2) }
.rcard .rn { font:400 13px 'Lilita One'; letter-spacing:.02em }
.rcard .rt { font-size:10.5px; color:var(--muted); font-weight:800 }
.rcard .rc { font:400 17px 'Lilita One'; letter-spacing:.04em }
.rcard .b.split { background:linear-gradient(180deg,#1f5a3d,#173b2c); box-shadow:inset 0 0 0 2px var(--green) }
.rcard .b.grab { background:linear-gradient(180deg,#6a2323,#3e1717); box-shadow:inset 0 0 0 2px var(--red) }
.rcard .b.split .rc { color:var(--green) } .rcard .b.grab .rc { color:var(--red) }
.rcard .rv { font-weight:900; font-size:12.5px; color:var(--gold) }
.tgpost { margin:10px 0 0; background:#0f1426; border-radius:14px; padding:10px 12px; font-size:13px; box-shadow:inset 0 0 0 1px #2b3358 }
.tgpost .tgh { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); font-weight:900; margin-bottom:4px }
.tgpost .tgh i { width:18px; height:18px; border-radius:50%; background:url(assets/hero_head.png) center/cover, var(--card2) }
.outcome { text-align:center; font:400 26px 'Lilita One'; letter-spacing:.03em; margin-top:4px }
.outcome.good { color:var(--green) } .outcome.bad { color:var(--red) } .outcome.mid { color:var(--amber) }
.deltas { display:flex; justify-content:center; gap:14px; font-weight:900; margin:4px 0 2px; font-size:14px }
.deltas .up { color:var(--green) } .deltas .down { color:var(--red) }

/* toast */
.toast { position:absolute; left:50%; top:calc(64px + env(safe-area-inset-top,0px)); transform:translateX(-50%); z-index:60; max-width:88%; padding:10px 14px; border-radius:14px; background:rgba(16,20,42,.94); box-shadow:inset 0 0 0 1px #3a4479; font-weight:800; font-size:13.5px; text-align:center; animation:fade .2s }

@media (min-width:480px) { body { background:radial-gradient(circle at 50% 20%,#232a52,#0b0e1d 70%) } #app { box-shadow:0 0 60px rgba(0,0,0,.6) } }

/* v0.2: rival vaults, vault tab, defenses, gifts */
.rivals { display:grid; gap:8px; margin-bottom:16px }
.rival { display:grid; grid-template-columns:48px 1fr auto; gap:10px; align-items:center; background:var(--card); border-radius:16px; padding:10px 12px; box-shadow:inset 0 0 0 1px var(--line), 0 3px 0 #10142a; text-align:left; width:100% }
.rival.revenge { box-shadow:inset 0 0 0 2px var(--red), 0 3px 0 #10142a }
.rival.cool { filter:saturate(.4) brightness(.75) }
.rival img.av { width:48px; height:48px; border-radius:50%; background:var(--card2); object-fit:cover }
.rival .rn { font:400 16px 'Lilita One'; letter-spacing:.02em; display:flex; align-items:center; gap:6px }
.rival .rn .rtag { font:900 9.5px Nunito; letter-spacing:.06em; padding:2px 6px; border-radius:6px; background:var(--red); color:#2c0403 }
.rival .rs { font-size:12px; color:var(--muted); font-weight:800 }
.rival .rs b { color:var(--gold) }
.defs { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px }
.defs span { display:inline-flex; align-items:center; gap:3px; background:var(--bg2); border-radius:8px; padding:2px 6px 2px 3px; font-size:11px; font-weight:900; color:#dfe2ff }
.defs img { width:18px; height:18px; object-fit:contain }
.rival .go { text-align:center; font-size:11px; color:var(--muted); font-weight:800 }
.vaultcard { position:relative; margin:12px 0 4px; border-radius:22px; overflow:hidden; background:linear-gradient(180deg,rgba(21,26,46,.2),rgba(21,26,46,.95) 70%), url(assets/bg_vault.webp) center 42%/cover; padding:110px 14px 14px; box-shadow:inset 0 0 0 1px #3a4479 }
.vaultcard .vt { font:400 15px 'Lilita One'; letter-spacing:.06em; color:#cfd3ff }
.vaultcard .vb { display:flex; align-items:center; gap:10px; font:400 40px 'Lilita One'; color:var(--gold) }
.vaultcard .vb .ico.coin { width:30px; height:30px }
.vaultcard .vr { font-size:13px; font-weight:800; color:var(--teal); margin-bottom:10px }
.vaultcard .vr b { color:#fff }
.vrow { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px }
.vrow .btn { padding:10px 6px; font-size:14px }
.interest { display:flex; align-items:center; justify-content:space-between; gap:10px; background:rgba(16,20,42,.85); border-radius:14px; padding:8px 8px 8px 12px; margin-bottom:10px; font-weight:900 }
.interest small { display:block; font-size:11px; color:var(--muted) }
.gifts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.gslot { background:var(--card); border-radius:16px; padding:10px 6px; text-align:center; box-shadow:inset 0 0 0 1px var(--line); min-height:96px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px }
.gslot.empty { background:transparent; border:2px dashed #3a4479; box-shadow:none; color:var(--muted); font-size:12px; font-weight:800 }
.gslot .ge { font-size:34px; line-height:1.1 }
.gslot .gn { font:400 13px 'Lilita One'; letter-spacing:.02em }
.gslot .gb { font-size:11px; font-weight:900; color:var(--teal) }
.gicon img { width:44px; height:44px; object-fit:contain }
.dp { font:900 12px Nunito; color:#032a22; background:var(--teal); border-radius:8px; padding:2px 8px; letter-spacing:.02em }
.gpick { display:grid; gap:8px; margin:10px 0 }
.gopt { display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; background:var(--card); border-radius:14px; padding:8px 12px; text-align:left; box-shadow:inset 0 0 0 1px var(--line) }
.gopt .ge { font-size:30px; text-align:center }
.gopt .rar { font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.06em }
.gopt.used { opacity:.45 }
.run-haul small { font-size:12px; color:var(--muted); font-weight:900 }
.report { display:grid; gap:6px; margin:8px 0 12px }
.report div { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; background:var(--card); border-radius:12px; padding:8px 10px; font-size:13px }
.report img { width:30px; height:30px; border-radius:50%; object-fit:cover }
.report b.ok { color:var(--green) } .report b.bad { color:var(--red) }

.goal { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--bg2); border-radius:12px; padding:8px 10px 8px 12px; margin:0 0 10px; font-size:13px; font-weight:800 }
.rival .rn .rtag.bot { background:#4a5384; color:#dfe2ff }

.missions { background:var(--card); border-radius:18px; padding:10px 12px; margin:4px 0 14px; box-shadow:inset 0 0 0 1px var(--line) }
.missions .mh { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px }
.missions .mh span { font:400 17px 'Lilita One'; letter-spacing:.02em }
.missions .mh small { color:var(--muted); font-size:11.5px; font-weight:800 }
.mrow { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:7px 0; border-top:1px solid #2c3462 }
.mrow b { font-size:13.5px } .mrow small { display:block; color:var(--muted); font-size:11.5px; font-weight:800 }
.mrow.claimed { opacity:.55 }
.mbar { display:block; width:64px; height:8px; border-radius:6px; background:#2c3462; overflow:hidden }
.mbar i { display:block; height:100%; background:var(--teal) }
.mck { color:var(--green); font-weight:900; font-size:18px }
.mfoot { font-size:11.5px; color:var(--amber); font-weight:800; margin-top:4px }

/* Grid Hack */
.hackcard { background:linear-gradient(135deg,#123a46,#1d2a5a); border-radius:20px; padding:12px; box-shadow:inset 0 0 0 1px #2f6e7a, 0 3px 0 #10142a; display:grid; grid-template-columns:86px 1fr; gap:12px; align-items:center; margin-bottom:16px }
.hackcard .hc-art { width:86px; height:86px; border-radius:14px; background:#0d1f2b; display:grid; grid-template-columns:repeat(6,1fr); gap:2px; padding:8px }
.hackcard .hc-art i { border-radius:3px }
.hackcard.locked { filter:saturate(.5) brightness(.8) }
.hack { position:absolute; inset:0; z-index:20; background:#0c1020; touch-action:none }
#hcv { position:absolute; inset:0; width:100%; height:100%; display:block }
.hack-credit { position:absolute; left:0; right:0; bottom:calc(4px + env(safe-area-inset-bottom,0px)); text-align:center; font-size:9.5px; color:#5d6390; pointer-events:none }