:root {
  --bg: #0a0d12; --panel: #131820; --panel2: #1a202b; --line: #263040; --text: #e8eef6; --dim: #8693a6;
  --accent: #3ee6ff; --accent2: #a46bff; --gold: #ffd34a; --good: #5fd16b; --bad: #ff4d5e; --blue: #4aa3ff;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bot: env(safe-area-inset-bottom, 0px);
  --r: 12px; --gap: 8px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #05070a; color: var(--text); font: 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overscroll-behavior: none; user-select: none; -webkit-user-select: none; }
input, textarea { user-select: text; -webkit-user-select: text; font-family: inherit; }
button { font-family: inherit; color: inherit; }
#app { display: flex; flex-direction: column; height: 100%; max-width: 480px; margin: 0 auto; background: var(--bg); position: relative; }
@media (min-width: 640px) { body { display: flex; align-items: center; justify-content: center; } #app { height: min(920px, 96vh); width: 440px; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 20px 80px #000, 0 0 0 6px #0f141c; } }

#top { display: flex; align-items: center; gap: 6px; padding: calc(8px + var(--safe-top)) 10px 8px; background: linear-gradient(#10151d, var(--bg)); border-bottom: 1px solid var(--line); }
.res { flex: 1; min-width: 0; display: flex; gap: 4px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.res::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 26px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px 0 6px; font-weight: 700; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chip small { color: var(--dim); font-weight: 600; font-size: 10px; }
#chatBtn { flex: none; position: relative; width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); display: flex; align-items: center; justify-content: center; }
#chatBtn svg { width: 19px; height: 19px; fill: var(--accent); }
.badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.hidden { display: none !important; }

#screen { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 12px 18px; -webkit-overflow-scrolling: touch; }
#nav { display: grid; grid-template-columns: repeat(7, 1fr); background: #0d1118; border-top: 1px solid var(--line); padding-bottom: var(--safe-bot); }
#nav button { background: none; border: 0; color: var(--dim); padding: 8px 0 7px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; min-width: 0; font-weight: 700; position: relative; }
#nav button svg { width: 22px; height: 22px; fill: currentColor; }
#nav button.on { color: var(--accent); }
#nav button.on::before { content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: var(--accent); border-radius: 2px; box-shadow: 0 0 8px var(--accent); }
#nav button .dot { position: absolute; top: 5px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }

h2 { font-size: 17px; margin: 10px 0 6px; }
h3 { font-size: 12px; margin: 14px 0 6px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 6px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; margin: var(--gap) 0; }
.row { display: flex; gap: var(--gap); align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.top { align-items: flex-start; }
.col { display: flex; flex-direction: column; gap: 6px; }
.grow { flex: 1; min-width: 0; }
.dim { color: var(--dim); }
.small { font-size: 12px; }
.tiny { font-size: 10.5px; }
.right { text-align: right; }
.center { text-align: center; }
.good { color: var(--good); } .bad { color: var(--bad); } .gold { color: var(--gold); } .acc { color: var(--accent); }
.title { font-size: 16px; font-weight: 800; }

.btn { display: inline-block; vertical-align: middle; min-height: 38px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-weight: 700; font-size: 14px; cursor: pointer; line-height: 1.15; text-align: center; }
.btn:active { transform: translateY(1px); filter: brightness(1.2); }
.btn .ic { color: inherit !important; margin: 0 1px; }
.btn.primary { background: linear-gradient(135deg, #46ecff, #2aa6d8); border-color: #6ff1ff; color: #021018; }
.btn.violet { background: linear-gradient(135deg, #b58bff, #7a46e0); border-color: #c4a2ff; color: #0d0420; }
.btn.green { background: linear-gradient(135deg, #6fe07a, #2fa83c); border-color: #8ef096; color: #04140a; }
.btn.red { background: linear-gradient(135deg, #ff6a78, #c8283a); border-color: #ff8a96; color: #1e0408; }
.btn.small { min-height: 30px; padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn.big { min-height: 56px; padding: 14px 16px; font-size: 18px; border-radius: 14px; width: 100%; letter-spacing: .04em; }
.btn.wide { width: 100%; }
.btn:disabled, .btn.off { opacity: .4; pointer-events: none; }
.btn .sub { display: block; font-size: 10.5px; font-weight: 600; opacity: .85; }
.stack { display: flex; flex-direction: column; gap: 6px; }

.tabs { display: flex; gap: 4px; margin: 0 0 10px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 1 0 auto; background: var(--panel); border: 1px solid var(--line); color: var(--dim); border-radius: 10px; padding: 8px 10px; font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.tabs button.on { color: var(--text); border-color: var(--accent); background: #0f2a33; }
canvas.scene { width: 100%; display: block; border-radius: var(--r); border: 1px solid var(--line); background: #000; }

.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.grid.g4 { grid-template-columns: repeat(4, 1fr); }
.cell { position: relative; aspect-ratio: 1; border-radius: 10px; }
.cell img { width: 100%; height: 100%; display: block; }
.cell.sel { outline: 3px solid var(--gold); outline-offset: 1px; }
.cell .badge { top: -4px; left: -4px; right: auto; background: var(--good); color: #000; min-width: 14px; height: 14px; font-size: 9px; }
.cell .badge.down { background: var(--bad); color: #fff; }
.cell .lbl { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font-size: 9.5px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.stat { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed #202836; font-size: 12.5px; }
.stats2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.bar { height: 6px; background: #000; border-radius: 3px; overflow: hidden; }
.bar > div { height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent)); }
.list .item { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.list .item:last-child { border: 0; }
.avatar { width: 42px; height: 42px; border-radius: 10px; flex: none; background: #0b0d12; }
.trust { display: inline-block; font-size: 10.5px; font-weight: 800; border-radius: 6px; padding: 1px 6px; }
.trust.ok { background: #12331b; color: var(--good); }
.trust.bad, .trust.fraud { background: #3a1418; color: var(--bad); }
.trust.unknown { background: #222a35; color: var(--dim); }
.online { width: 8px; height: 8px; border-radius: 50%; background: var(--good); display: inline-block; box-shadow: 0 0 6px var(--good); }
.pill { display: inline-flex; align-items: center; gap: 3px; background: #1f2733; border-radius: 6px; padding: 2px 7px; font-size: 11px; font-weight: 700; margin: 2px 3px 2px 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12.5px; }
.kv > :nth-child(odd) { color: var(--dim); }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; word-break: break-all; user-select: text; }
.timer { font-variant-numeric: tabular-nums; }
.ic { width: 1.1em; height: 1.1em; vertical-align: -0.18em; display: inline-block; flex: none; }

.chatbox { height: 46vh; overflow-y: auto; background: #080b10; border-radius: 10px; padding: 8px; border: 1px solid var(--line); }
.chatbox .m { margin: 4px 0; font-size: 13px; word-wrap: break-word; user-select: text; }
.chatbox .m b { color: var(--accent); }
.chatbox .m .tag { color: var(--gold); font-weight: 800; margin-right: 3px; }
.chatbox .m.me { text-align: right; }
.chatbox .m.me span.txt { background: #123040; }
.chatbox .m span.txt { display: inline-block; background: #18202b; padding: 5px 9px; border-radius: 10px; max-width: 85%; text-align: left; }
input[type=text], input[type=password], input[type=number], textarea { width: 100%; background: #080b10; color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; font-size: 14px; outline: none; }
input:focus, textarea:focus { border-color: var(--accent); }
input[type=range] { width: 100%; accent-color: var(--accent); }
input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; }

#modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.sheet { background: var(--panel); border: 1px solid var(--line); border-radius: 20px 20px 0 0; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; padding: 16px 14px calc(18px + var(--safe-bot)); animation: up .18s ease-out; }
.sheet h2:first-child { margin-top: 0; }
@keyframes up { from { transform: translateY(40px); opacity: .5; } }
#toasts { position: fixed; top: calc(58px + var(--safe-top)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 60; }
.toast { background: #1a222ef0; border: 1px solid var(--line); padding: 7px 13px; border-radius: 12px; font-weight: 700; font-size: 13px; max-width: 86%; animation: up .2s; box-shadow: 0 6px 20px #0008; }
.toast.bad { border-color: var(--bad); } .toast.good { border-color: var(--good); }
.rar { font-weight: 800; }

.results { display: flex; flex-direction: column; gap: 7px; }
.res-item { display: flex; gap: 10px; align-items: center; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; }
.res-item img { width: 56px; height: 56px; flex: none; }
.res-item .acts { display: flex; flex-direction: column; gap: 5px; width: 78px; flex: none; }
.banner { background: linear-gradient(100deg, #0f2a33, #161b26); border: 1px solid #1f5866; border-radius: var(--r); padding: 10px 12px; display: flex; align-items: center; gap: 10px; margin: var(--gap) 0; }
.banner.violet { background: linear-gradient(100deg, #24163d, #161b26); border-color: #4a2e80; }
.lb { width: 100%; border-collapse: collapse; }
.lb td { padding: 7px 4px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
.log { max-height: 220px; overflow-y: auto; font-size: 12px; }
.log div { padding: 3px 0; border-bottom: 1px solid #151b24; }
.log .warn { color: #ffb531; } .log .bad { color: var(--bad); } .log .good { color: var(--good); }
.onboard { padding: 4px 4px 20px; }
.logo { text-align: center; font-size: 34px; font-weight: 900; letter-spacing: .08em; background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 6px 0 2px; }
.skel { opacity: .55; }

/* customization */
.opt-row { margin: 10px 0 4px; }
.opt-row .lab { font-size: 11px; font-weight: 800; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; }
.chips { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; font-size: 12px; font-weight: 700; color: var(--dim); }
.chips button.on { border-color: var(--accent); color: var(--text); background: #0f2a33; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.swatch.on { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.hue { height: 14px; border-radius: 7px; background: linear-gradient(90deg, hsl(0,70%,50%), hsl(60,70%,50%), hsl(120,70%,50%), hsl(180,70%,50%), hsl(240,70%,50%), hsl(300,70%,50%), hsl(360,70%,50%)); -webkit-appearance: none; appearance: none; }
.hue::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid #000; }

/* packs */
.pack { display: flex; gap: 12px; align-items: center; }
.pack-art { width: 64px; height: 84px; border-radius: 10px; flex: none; position: relative; overflow: hidden; border: 1px solid #ffffff30; }
.pack-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, #ffffff40 45%, transparent 60%); animation: shine 2.6s infinite; }
@keyframes shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.reveal { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; perspective: 800px; margin: 10px 0; }
.card { width: 76px; height: 104px; position: relative; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.3,1.2); cursor: pointer; }
.card.flip { transform: rotateY(180deg); }
.card .face { position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px; }
.card .back { background: repeating-linear-gradient(45deg, #142030, #142030 6px, #101824 6px, #101824 12px); border: 2px solid #2c4660; }
.card .back::after { content: ''; width: 30px; height: 30px; transform: rotate(45deg); border: 3px solid var(--accent); border-radius: 4px; box-shadow: 0 0 12px var(--accent); }
.card .front { background: #10151d; border: 2px solid var(--line); transform: rotateY(180deg); }
.card .front img { width: 56px; height: 56px; }
.card .front .nm { font-size: 9.5px; font-weight: 800; text-align: center; line-height: 1.1; }
.card.hi .front { box-shadow: 0 0 18px var(--glow, #fff); }

/* world & surges */
.map { width: 100%; height: 330px; border-radius: var(--r); border: 1px solid var(--line); display: block; }
.milestones { display: flex; flex-direction: column; gap: 6px; }
.ms { display: flex; align-items: center; gap: 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.ms .num { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 12px; background: #1f2733; flex: none; }
.ms.reached .num { background: var(--accent); color: #021018; }
.ms.claimed { opacity: .55; }
.party-slot { display: flex; align-items: center; gap: 8px; background: var(--panel2); border: 1px dashed var(--line); border-radius: 10px; padding: 8px; min-height: 58px; }
.party-slot.filled { border-style: solid; }

/* ---------- mobile fit: true viewport height, no sideways scroll, no input zoom ---------- */
html, body { overflow: hidden; }
#app { height: 100vh; height: 100dvh; }
@media (min-width: 640px) { #app { height: min(920px, 96vh); } }
#screen { overscroll-behavior: contain; }
#screen > *, .panel, .row, .grid, .stack { max-width: 100%; }
input[type=text], input[type=password], input[type=number], textarea { font-size: 16px; }
img, canvas { max-width: 100%; }
.title, b { overflow-wrap: anywhere; }
@media (max-width: 380px) {
  #screen { padding: 8px 8px 16px; }
  .panel { padding: 10px; }
  .grid { gap: 5px; }
  .chip { height: 24px; font-size: 11px; padding: 0 6px 0 4px; }
  #nav button span { font-size: 9px; }
  .btn.big { font-size: 16px; min-height: 50px; }
  .tabs button { padding: 7px 8px; font-size: 12px; }
}

/* ---------- chat bubble overlay: small, bottom-left, above the nav ---------- */
#chatPeek { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(70px + var(--safe-bot)); width: min(440px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 4px; pointer-events: none; z-index: 40; }
.peek { pointer-events: auto; align-self: flex-start; max-width: 88%; background: rgba(14,20,28,.88); border: 1px solid #1f5866; border-radius: 12px; padding: 6px 10px; font-size: 12px; line-height: 1.3; box-shadow: 0 4px 14px #0007; animation: peekIn .2s ease-out; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .5s, transform .5s; }
.peek b { color: var(--accent); margin-right: 4px; }
.peek-ch { font-size: 9px; font-weight: 900; letter-spacing: .06em; color: #021018; background: var(--accent); border-radius: 4px; padding: 0 4px; margin-right: 4px; }
.peek.out { opacity: 0; transform: translateY(6px); }
@keyframes peekIn { from { opacity: 0; transform: translateY(8px); } }

/* ---------- lucky: slot reels ---------- */
.reel { width: 76px; height: 86px; border-radius: 14px; background: #080b10; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 900; text-shadow: 0 0 14px currentColor; }
.reel.spin { animation: reelShake .08s infinite; border-color: var(--accent2); }
@keyframes reelShake { 50% { transform: translateY(3px); } }

/* ---------- daily: streak row ---------- */
.streak { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 10px; }
.sday { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 5px 2px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sday .ic { width: 18px; height: 18px; }
.sday.got { border-color: var(--good); background: #12331b; }
.sday.next { border-color: var(--accent); box-shadow: 0 0 10px #3ee6ff66; }

/* ---------- floating bonus node (optional rewarded ad) ---------- */
#adNode { position: fixed; right: 12px; width: 46px; height: 46px; z-index: 35; cursor: pointer; animation: adFloat 3s ease-in-out infinite;
  background: radial-gradient(circle at 40% 35%, #fff 0 8%, #3ee6ff 20%, #7a46e0 60%, transparent 62%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); filter: drop-shadow(0 0 12px #3ee6ff); }
@keyframes adFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(8deg); } }
@media (min-width: 640px) { #adNode { right: calc(50% - 210px); } }
.btn.primary .good, .btn.primary .dim { color: #063a20 !important; } .btn.primary .bad { color: #6a0812 !important; }

/* press feedback: a button lights up only while it's being pressed */
.btn.tap:active, .btn.tap.pressed { background: linear-gradient(135deg, #46ecff, #2aa6d8); border-color: #6ff1ff; color: #021018; }

/* quest tracker: one slim line above the nav */
#questBar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #0f1a24; border-top: 1px solid #1f5866; font-size: 12px; cursor: pointer; }
#questBar .qn { font-weight: 800; color: var(--accent); white-space: nowrap; }
#questBar .qd { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
#questBar.done { background: linear-gradient(90deg, #12331b, #0f1a24); border-top-color: var(--good); }
.attr-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.attr-row:last-child { border: 0; }
.attr-row .pts { width: 34px; text-align: center; font-weight: 900; font-size: 16px; }
.pips { display: inline-flex; gap: 3px; } .pips i { width: 10px; height: 10px; border-radius: 3px; background: #1f2733; display: inline-block; } .pips i.on { background: var(--gold); }

/* ---------- mobile fit pass: nothing hides off the edge ---------- */
/* option chips and sub-tabs wrap onto extra lines instead of running off-screen */
.chips { flex-wrap: wrap; overflow: visible; }
.chips button { flex: 0 1 auto; }
.tabs { flex-wrap: wrap; overflow: visible; }
.tabs button { flex: 1 1 auto; min-width: 0; padding: 7px 8px; }
/* the resource bar wraps so every currency stays visible */
.res { flex-wrap: wrap; overflow: visible; row-gap: 4px; }
#top { align-items: flex-start; }
/* anything genuinely wider than the screen scrolls inside its own box (drag with finger or mouse) */
.hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; cursor: grab; }
.hscroll.dragging { cursor: grabbing; user-select: none; }
.panel, .banner, .ms, .item, .res-item { min-width: 0; max-width: 100%; }
.sheet { min-width: 0; max-width: min(480px, 100%); }
.sheet table { max-width: 100%; }
.kv > * { min-width: 0; overflow-wrap: anywhere; }
.btn { max-width: 100%; white-space: normal; }
.stack .btn { text-align: left; }
.reel { width: min(76px, 26vw); height: min(86px, 28vw); }

/* crack options: themed switch + rarity dropdown */
.opts { margin-top: 8px; padding: 4px 12px; }
.optrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.optrow + .optrow { border-top: 1px solid var(--line); }
.switch { flex: none; position: relative; width: 46px; height: 26px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); cursor: pointer; padding: 0; transition: background .15s, border-color .15s; }
.switch span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--dim); transition: transform .15s, background .15s; }
.switch.on { background: #0f2a33; border-color: var(--accent); }
.switch.on span { transform: translateX(20px); background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.dd { position: relative; flex: none; }
.dd-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 8px 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); font-weight: 700; font-size: 13px; cursor: pointer; }
.dd-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--dim); stroke-width: 2.4; transition: transform .15s; }
.dd-btn.open { border-color: var(--accent); }
.dd-btn.open svg { transform: rotate(180deg); }
.dd-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 190px; max-height: 300px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px; box-shadow: 0 10px 30px #000a; }
.dd-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; font-weight: 700; font-size: 13px; text-align: left; cursor: pointer; }
.dd-menu button:active, .dd-menu button.on { background: #0f2a33; }
.dd-menu button.on { box-shadow: inset 2px 0 0 var(--accent); }
.rdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* skins */
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); gap: 6px; }
.skin-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px; text-align: center; cursor: pointer; border-top: 3px solid var(--rc); }
.skin-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 14px #3ee6ff44; }
.skin-card.locked { cursor: default; opacity: .75; }
.skin-prev { width: 84px; height: 84px; display: block; margin: 0 auto 4px; }

.chip.autochip { border-color: var(--good); color: var(--good); cursor: pointer; animation: pulseChip 1.4s ease-in-out infinite; }
@keyframes pulseChip { 50% { box-shadow: 0 0 10px #5fd16b66; } }

/* landing: logo over a drifting node network, then the login form */
.landing { position: relative; min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 10px 6px 24px; }
#landingFx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.land-brand { position: relative; text-align: center; margin: 4vh 0 22px; }
.logo.big { font-size: 46px; letter-spacing: .14em; filter: drop-shadow(0 0 18px #3ee6ff40); animation: logoGlow 5s ease-in-out infinite; }
@keyframes logoGlow { 50% { filter: drop-shadow(0 0 26px #a46bff55); } }
.tagline { color: var(--dim); font-size: 12px; letter-spacing: .32em; text-transform: uppercase; margin-top: 2px; }
.land-form { position: relative; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 10px 40px #0008; }
.land-form input { width: 100%; }

/* hub wars */
.warcal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 4px; }
.warcal .wd { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 6px 2px; text-align: center; min-width: 0; }
.warcal .wd b { display: block; font-size: 12px; }
.warcal .wd span { display: block; font-size: 9px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.warcal .wd.on { border-color: var(--accent); background: #0f2a33; }
.warcal .wd.past { opacity: .45; }
.kv3 { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 14px; }
.kv3 > b { text-align: right; font-variant-numeric: tabular-nums; }
.panel.alert { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad) inset; animation: pulseChip 1.4s ease-in-out infinite; }
.banner.green { border-color: var(--good); color: var(--good); justify-content: center; }
.banner.red { border-color: var(--bad); color: var(--bad); justify-content: center; }

/* ===== v15 layout: home arena + gear + node; menus over it; chunky game styling on the neon theme ===== */
.ol, .gtile b, .sideico span, .ncount, .gtile .plus { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 0 #000; }
/* chunky 3D buttons */
.btn { border-width: 1px 1px 4px; border-bottom-color: rgba(0,0,0,.55); border-radius: 12px; font-weight: 800; letter-spacing: .01em; transition: transform .05s; }
.btn:active, .btn.pressed { transform: translateY(2px); border-bottom-width: 2px; margin-bottom: 2px; }
.btn.primary, .btn.green, .btn.violet, .btn.red { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 0 1px #000; }
.btn.big { font-size: 18px; letter-spacing: .06em; }
/* header: profile card + currency chips */
#chatBtn { display: none; }
#top { gap: 8px; align-items: flex-start; }
#profile { flex: none; display: flex; align-items: center; gap: 7px; background: linear-gradient(135deg, #131c28, #0d1219); border: 1px solid #23415a; border-radius: 14px; padding: 4px 10px 4px 4px; cursor: pointer; box-shadow: 0 3px 0 #000a; }
#profile canvas { width: 40px; height: 40px; border-radius: 10px; background: #0a1018; border: 1px solid #2a4a63; }
#profile .pname { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
#profile .pname b { font-size: 13px; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#profile .pname span { font-size: 13px; font-weight: 900; color: var(--gold); display: flex; align-items: center; gap: 3px; }
#top .res { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
/* home */
#app.home #screen { padding: 0 0 12px; }
.arena { position: relative; }
.arena > div[id^="slot-"] canvas.scene { border-radius: 0; border-left: 0; border-right: 0; }
.arena .side { position: absolute; top: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.arena .side.left { left: 8px; } .arena .side.right { right: 8px; }
.sideico { position: relative; width: 50px; display: flex; flex-direction: column; align-items: center; gap: 1px; background: none; border: 0; padding: 0; cursor: pointer; }
.sideico > svg, .sideico > span.ic { width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #23364a, #0d1520); border: 2px solid #2c5f79; box-shadow: 0 0 12px #3ee6ff33, 0 3px 0 #000a; box-sizing: border-box; }
.sideico.gold > svg { border-color: #b8901e; box-shadow: 0 0 14px #ffd34a55, 0 3px 0 #000a; }
.sideico span { font-size: 11px; font-weight: 900; color: #fff; white-space: nowrap; }
.sideico .sdot { position: absolute; top: 0; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--bad); border: 2px solid #0a0d12; }
.arena .progs { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; z-index: 2; }
.arena .progs img { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #c9a33a; background: #141a24; box-shadow: 0 3px 0 #000a; }
.qpill { display: flex; align-items: center; gap: 8px; margin: 8px 10px 0; padding: 7px 12px; border-radius: 12px; background: #0f1a24; border: 1px solid #1f5866; font-size: 12.5px; cursor: pointer; }
.qpill b { color: var(--accent); white-space: nowrap; }
.qpill span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.qpill em { font-style: normal; font-weight: 900; color: var(--accent); }
.qpill.done { border-color: var(--good); background: linear-gradient(90deg, #12331b, #0f1a24); } .qpill.done em { color: var(--good); }
.gearbox { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin: 10px 10px 0; }
.gtile { position: relative; aspect-ratio: 1; border-radius: 12px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rc, #4a5566) 45%, #0b0f16), #0b0f16 80%); border: 2px solid var(--rc, #2a3342); box-shadow: inset 0 0 14px color-mix(in srgb, var(--rc, #000) 40%, transparent), 0 3px 0 #000a; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gtile img { width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 2px 2px #000a); }
.gtile b { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 900; color: #fff; }
.gtile .plus { position: absolute; top: 3px; right: 5px; font-style: normal; font-size: 11px; font-weight: 900; color: var(--gold); }
.gtile.empty { --rc: #2a3342; opacity: .7; } .gtile.empty b { font-size: 10px; color: var(--dim); }
.gtile.wide { grid-column: span 2; aspect-ratio: auto; }
.gtile.wide img { width: auto; height: 70%; }
.crackbar { display: grid; grid-template-columns: 118px 1fr; gap: 10px; margin: 10px 10px 0; align-items: stretch; }
.nodebtn { position: relative; border-radius: 16px; overflow: hidden; border: 2px solid #3a6a86; box-shadow: 0 0 18px #3ee6ff33, 0 4px 0 #000a; cursor: pointer; }
.nodebtn canvas.scene { border: 0; border-radius: 0; }
.nodebtn.off { filter: grayscale(.7) brightness(.7); }
.ncount { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; justify-content: center; align-items: center; gap: 2px; font-weight: 900; font-size: 14px; color: #fff; }
.crackcol { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.crackcol .btn.big { min-height: 48px; }
/* menus: sub-tabs along the bottom as a segmented bar */
#subbar { padding: 6px 8px; background: #0b0f15; border-top: 1px solid var(--line); }
#subbar .tabs { margin: 0; background: #151c27; border: 1px solid #263244; border-radius: 14px; padding: 3px; gap: 3px; }
#subbar .tabs button { border: 0; background: none; border-radius: 11px; padding: 9px 8px; font-size: 13px; color: #c8d2df; }
#subbar .tabs button.on { background: linear-gradient(180deg, #46ecff, #2a9ed0); color: #fff; text-shadow: 0 1px 0 #0008; box-shadow: 0 3px 0 #0c5a7a; }
/* chat strip: always visible above the nav */
#chatStrip { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: #0e131b; border-top: 1px solid var(--line); cursor: pointer; position: relative; min-height: 40px; }
#chatStrip > svg { width: 22px; height: 22px; fill: var(--accent); flex: none; }
#chatStrip .cl { flex: 1; min-width: 0; font-size: 12px; line-height: 1.35; color: #c9d4e2; }
#chatStrip .cl div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chatStrip .cl b { color: var(--accent); }
#chatStrip .badge { position: static; font-style: normal; }
/* nav: five big icons; the open menu becomes a red ✕ */
#nav { grid-template-columns: repeat(5, 1fr); }
#nav button svg { width: 26px; height: 26px; }
#nav button.on::before { display: none; }
#nav button.on svg { display: none; }
#nav button.on::after { content: '✕'; order: -1; width: 38px; height: 38px; margin-top: -10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff7a86, #c8283a); border: 3px solid #0a0d12; color: #fff; font-size: 19px; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 #000a, 0 0 14px #ff4d5e66; }
#nav button.on span { color: var(--bad); }
.arena .side { top: 44px; gap: 4px; }
.sideico { width: 44px; }
.sideico > svg, .sideico > span.ic { width: 34px; height: 34px; padding: 7px; }
.sideico span { font-size: 10px; }
#subbar .tabs { flex-wrap: nowrap; overflow-x: auto; }
#subbar .tabs button { flex: 1 0 auto; padding: 9px 10px; font-size: 12.5px; }
/* the crack zone: gold node you tap, green rig, purple flux, blue auto & settings */
.crackzone { margin: 10px 10px 0; display: flex; flex-direction: column; gap: 8px; }
.rigbtn { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.rigbtn .sub { display: inline; margin: 0; font-size: 14px; }
.crackzone .nodebtn { border: 3px solid #e2b23a; background: radial-gradient(circle at 50% 40%, #3a2c08, #0d0b06); box-shadow: 0 0 22px #ffd34a44, inset 0 0 30px #ffd34a22, 0 4px 0 #000a; }
.crackzone .nodebtn:active { transform: translateY(2px); }
.crackzone .nodebtn canvas.scene { opacity: .95; }
.nlabel { position: absolute; top: 8px; left: 0; right: 0; text-align: center; font-weight: 900; font-size: 18px; letter-spacing: .08em; color: #ffe08a; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 12px #ffd34a88; pointer-events: none; }
.crackzone .ncount { font-size: 16px; bottom: 8px; color: #ffe08a; }
.crackrow { display: flex; gap: 8px; }
.btn.blue { background: linear-gradient(135deg, #4aa3ff, #2563c8); border-color: #7cbcff; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.45); min-width: 64px; }
.btn.blue.on { box-shadow: 0 0 0 2px #fff inset, 0 0 14px #4aa3ff99; }
/* casino */
.casino .reel { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: #0b0f16; border: 2px solid #3a2f63; border-radius: 12px; }
.casino .reel .ic { width: 38px; height: 38px; }
.coin { width: 96px; height: 96px; margin: 10px auto; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1a8, #e2b23a 55%, #8a6512); border: 4px solid #6b4c0a; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 900; color: #6b4c0a; box-shadow: 0 6px 0 #000a, 0 0 22px #ffd34a55; }
.coin.flip { animation: coinflip .9s ease-in-out; }
@keyframes coinflip { 0% { transform: rotateY(0) translateY(0); } 50% { transform: rotateY(900deg) translateY(-30px); } 100% { transform: rotateY(1800deg) translateY(0); } }
.die { width: 58px; height: 58px; background: #f2f4f8; border-radius: 12px; display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px; gap: 2px; box-shadow: 0 4px 0 #9aa3b0; }
.die i { border-radius: 50%; } .die i.on { background: #12161e; }
/* account */
.avgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.avpick { width: 100%; aspect-ratio: 1; border-radius: 14px; border: 2px solid var(--line); cursor: pointer; background: #0d1520; }
.avpick.on { border-color: var(--accent); box-shadow: 0 0 12px #3ee6ff66; }
#profile .pname em { font-style: normal; font-size: 10px; font-weight: 800; color: var(--accent2); max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* style */
.chipbtn { background: var(--panel2); border: 1px solid var(--line); color: var(--dim); border-radius: 7px; font-size: 10px; font-weight: 800; padding: 2px 6px; margin-left: 6px; }
.chipbtn.on { color: var(--text); border-color: var(--accent); }
input.hue.idle { opacity: .35; }
.skin-card.prev { box-shadow: 0 0 0 2px var(--accent2), 0 0 14px #a46bff66; }
.skinbar { margin-top: 8px; }
/* declutter */
.arena .side { top: 40px; gap: 8px; }
.sideico { width: 40px; }
.sideico > svg { width: 32px; height: 32px; padding: 7px; }
.arena .progs { left: 50%; right: auto; transform: translateX(-50%); bottom: 6px; gap: 5px; }
.arena .progs img { width: 28px; height: 28px; border-width: 1.5px; }
.qpill { margin: 6px 10px 0; padding: 5px 10px; font-size: 12px; }
.gearbox { grid-auto-rows: 62px; gap: 6px; margin: 8px 10px 0; }
.gtile { aspect-ratio: auto; height: 62px; border-radius: 11px; }
.gtile img { width: 44px; height: 44px; margin-top: -8px; }
.gtile b { font-size: 12px; bottom: 2px; }
.gtile.wide { height: 62px; }
.gtile.wide img { width: 44px; height: 44px; }
.crackzone { margin: 8px 10px 0; gap: 6px; }
.rigbtn { min-height: 38px; padding: 4px 14px; font-size: 15px; }
.crackzone .nodebtn { border-width: 2px; }
.nlabel { top: 5px; font-size: 15px; }
.crackzone .ncount { font-size: 14px; bottom: 4px; }
.crackrow .btn { min-height: 38px; padding: 6px 10px; font-size: 14px; }
.crackrow .btn .sub { display: inline; margin-left: 6px; }
/* home fills the screen: the arena grows, gear + node sit down on the chat strip */
#app.home #screen { display: flex; flex-direction: column; padding-bottom: 8px; }
#app.home .arena { flex: 1 1 auto; min-height: 190px; display: flex; flex-direction: column; }
#app.home .arena > div[id^="slot-"] { flex: 1 1 auto; height: auto !important; min-height: 0; }
#app.home .arena canvas.scene { height: 100% !important; }
#app.home .lower { flex: none; }
.m .watch { min-height: 26px; padding: 3px 10px; font-size: 12px; margin-left: 6px; vertical-align: middle; }
/* chat lines: avatar, clan tag, name */
.chatbox .m { display: flex; gap: 7px; align-items: flex-start; }
.chatbox .m.me { flex-direction: row-reverse; text-align: right; }
.chatbox .m .cav { width: 30px; height: 30px; flex: none; border-radius: 9px; border: 1px solid var(--line); background: #0d1520; cursor: pointer; }
.chatbox .m .mb { min-width: 0; max-width: 85%; }
.chatbox .m .mh { font-size: 11.5px; margin-bottom: 2px; }
.chatbox .m.me .mh { text-align: right; }
.chatbox .m span.txt { max-width: 100%; }
.rcard { display: flex; gap: 8px; align-items: center; margin-top: 4px; padding: 8px; border-radius: 12px; background: linear-gradient(135deg, #1b1630, #121820); border: 1px solid #4a2e80; text-align: left; }
.rcard img { width: 36px; height: 36px; border-radius: 8px; }
.btn.armed { background: linear-gradient(135deg, #ffb531, #d07b10); border-color: #ffd27a; }
/* loading screen while the game boots */
#boot { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; transition: opacity .35s; }
#boot.done { opacity: 0; pointer-events: none; }
.bootbar { width: 160px; height: 4px; border-radius: 4px; background: #1a2230; overflow: hidden; }
.bootbar i { display: block; width: 40%; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 4px; animation: bootbar 1.1s ease-in-out infinite; }
@keyframes bootbar { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
/* legal */
.legal h1 { font-size: 20px; margin: 0 0 2px; } .legal h2 { font-size: 15px; margin: 16px 0 4px; color: var(--accent); }
.legal p, .legal li { font-size: 13px; line-height: 1.55; color: #c9d4e2; } .legal .upd { color: var(--dim); font-size: 12px; }
.legal-links { text-align: center; font-size: 12px; margin-top: 12px; color: var(--dim); }
.legal-links a { color: var(--dim); text-decoration: underline; cursor: pointer; margin: 0 6px; }
.agree { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: #c9d4e2; margin-top: 12px; }
.agree a { color: var(--accent); text-decoration: underline; cursor: pointer; }
/* v17 games */
.ladder .rungs { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; }
.rung { display: grid; grid-template-columns: 54px 1fr 50px; align-items: center; padding: 8px 12px; border-radius: 10px; background: #111824; border: 1px solid #23324a; }
.rung b { font-size: 16px; font-weight: 900; color: #ff9a6a; } .rung span { font-weight: 800; } .rung em { font-style: normal; font-size: 11px; color: var(--dim); text-align: right; }
.rung.next { border-color: #ff6a3a; box-shadow: 0 0 12px #ff6a3a55; }
.rung.done { opacity: .45; } .rung.on { background: linear-gradient(90deg, #3a1608, #111824); border-color: #ffb531; box-shadow: 0 0 16px #ffb53177; }
.scard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px auto; max-width: 260px; padding: 10px; border-radius: 14px; background: linear-gradient(135deg, #2a2f3a, #161b24); border: 2px dashed #5a6578; }
.stile { aspect-ratio: 1; border-radius: 10px; background: repeating-linear-gradient(45deg, #b9c2cf, #b9c2cf 6px, #9aa4b3 6px, #9aa4b3 12px); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px #ffffff33; transition: transform .1s; }
.stile:active { transform: scale(.95); }
.stile.open { background: #0d131c; cursor: default; box-shadow: inset 0 0 0 1px #2a3546; } .stile .ic { width: 32px; height: 32px; }
.stile.hit { box-shadow: 0 0 0 2px #ffd34a, 0 0 14px #ffd34a88; }
.dud { color: #5a6578; font-size: 24px; }
.dcards { display: flex; gap: 12px; justify-content: center; margin: 14px 0; perspective: 600px; }
.dcard { width: 86px; height: 120px; position: relative; transform-style: preserve-3d; transition: transform .5s; cursor: pointer; }
.dcard.open { transform: rotateY(180deg); cursor: default; }
.dcard > div { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; }
.dback { background: repeating-linear-gradient(135deg, #1b2a3d, #1b2a3d 8px, #13202f 8px, #13202f 16px); border: 2px solid #3ee6ff; color: #3ee6ff; font-size: 34px; font-weight: 900; text-shadow: 0 0 10px #3ee6ff; }
.dfront { transform: rotateY(180deg); background: #0d131c; border: 2px solid #2a3546; } .dfront .ic { width: 40px; height: 40px; }
.dcard.mine .dfront { border-color: #ffd34a; box-shadow: 0 0 16px #ffd34a66; }
.dfront { flex-direction: column; gap: 6px; } .dfront span { font-size: 11px; font-weight: 800; color: var(--dim); }
/* mastery bar on gear tiles */
.gtile .mbar { position: absolute; left: 6px; right: 6px; bottom: 2px; height: 3px; border-radius: 3px; background: #0006; overflow: hidden; }
.gtile .mbar i { display: block; height: 100%; background: linear-gradient(90deg, #3ee6ff, #a46bff); }
.gtile .mlv { position: absolute; top: 3px; left: 5px; font-style: normal; font-size: 9px; font-weight: 900; color: #a46bff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.gtile b { bottom: 6px; }
/* emoji + chat cosmetics */
.emo { width: 1.35em; height: 1.35em; vertical-align: -0.3em; display: inline-block; }
.emobtn { min-height: 40px; padding: 4px 8px; } .emobtn .emo { width: 22px; height: 22px; }
.emobox { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 8px; margin-top: 8px; max-height: 220px; overflow-y: auto; }
.emokit { margin-bottom: 6px; } .emokit.locked { opacity: .45; }
.emorow { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.emorow button { background: none; border: 1px solid transparent; border-radius: 8px; padding: 3px; cursor: pointer; } .emorow button:active { border-color: var(--accent); }
.emorow .emo { width: 28px; height: 28px; }
.cosgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.cos { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.cos.on { border-color: var(--accent); box-shadow: 0 0 10px #3ee6ff44; }
.cprev { min-height: 34px; display: flex; align-items: center; justify-content: center; }
.cprev .emo { width: 24px; height: 24px; }
.cprev .txt { display: inline-block; background: #18202b; padding: 5px 10px; border-radius: 10px; font-size: 13px; }
/* bubbles */
.txt.bub_neon { background: #061a22 !important; border: 1px solid #3ee6ff; box-shadow: 0 0 10px #3ee6ff66, inset 0 0 6px #3ee6ff33; }
.txt.bub_gold { background: linear-gradient(135deg, #4a3608, #2a1e04) !important; border: 1px solid #ffd34a; color: #fff3c4; box-shadow: 0 0 10px #ffd34a44; }
.txt.bub_glitch { background: #1a0d14 !important; border: 1px solid #ff4d6d; box-shadow: 2px 0 0 #3ee6ff, -2px 0 0 #ff4d6d; }
.txt.bub_holo { background: linear-gradient(120deg, #3ee6ff33, #a46bff44, #ff4d6d33, #ffd34a33) !important; background-size: 300% 300% !important; animation: holo 4s ease infinite; border: 1px solid #e8d7ff88; }
@keyframes holo { 50% { background-position: 100% 50%; } }
.txt.bub_ember { background: linear-gradient(180deg, #3a1608, #1a0a04) !important; border: 1px solid #ff7a2a; box-shadow: 0 0 10px #ff7a2a55; }
/* name colours */
.name_cyan { color: #3ee6ff !important; } .name_gold { color: #ffd34a !important; text-shadow: 0 0 6px #ffd34a66; } .name_violet { color: #b58bff !important; }
.name_rainbow { background: linear-gradient(90deg, #ff4d6d, #ffd34a, #5fd16b, #3ee6ff, #a46bff); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.name_fire { background: linear-gradient(90deg, #ffd34a, #ff7a2a, #ff4d6d); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
/* effects */
.txt.fx_sparkle { position: relative; } .txt.fx_sparkle::after { content: '✦'; position: absolute; top: -6px; right: -6px; font-size: 10px; color: #ffd34a; animation: spark 1.6s ease-in-out infinite; }
@keyframes spark { 50% { transform: scale(1.5) rotate(40deg); opacity: .5; } }
.txt.fx_glitch { animation: gl 2.4s steps(1) infinite; } @keyframes gl { 0%, 92% { text-shadow: none; } 93% { text-shadow: 2px 0 #ff4d6d, -2px 0 #3ee6ff; } 96% { text-shadow: -2px 0 #ff4d6d, 2px 0 #3ee6ff; } }
.txt.fx_pulse { animation: pulseglow 2s ease-in-out infinite; } @keyframes pulseglow { 50% { box-shadow: 0 0 16px #a46bff99; } }
/* arcade */
.circ { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; max-width: 320px; margin: 6px auto; }
.ct { position: relative; aspect-ratio: 1; background: #0d131c; border: 1px solid #23324a; border-radius: 8px; cursor: pointer; }
.ct svg { width: 100%; height: 100%; } .ct path { stroke: #3a4a62; stroke-width: 8; stroke-linecap: round; fill: none; } .ct circle { fill: #3a4a62; }
.ct.lit path { stroke: #3ee6ff; filter: drop-shadow(0 0 3px #3ee6ff); } .ct.lit circle { fill: #3ee6ff; }
.ct .bn { position: absolute; right: 4px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: #ffd34a; box-shadow: 0 0 6px #ffd34a; }
.ct .src, .ct .dst { position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 3px; }
.ct .src { left: -6px; background: #5fd16b; box-shadow: 0 0 8px #5fd16b; } .ct .dst { right: -6px; background: #a46bff; box-shadow: 0 0 8px #a46bff; }
.vrows { display: flex; flex-direction: column; gap: 5px; margin: 8px 0; }
.vrow { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 5px; border-radius: 10px; background: #0d131c; }
.vrow.cur { border: 1px dashed #3ee6ff; } .vslot { width: 22px; height: 22px; border-radius: 6px; background: #1a2230; display: inline-block; }
.clue { margin-left: 10px; font-size: 13px; }
.vpal { display: flex; justify-content: center; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.vpal button { background: #131a25; border: 1px solid #263244; border-radius: 10px; padding: 6px; cursor: pointer; }
.mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; max-width: 300px; margin: 8px auto; }
.mcard { aspect-ratio: 1; border-radius: 10px; background: repeating-linear-gradient(135deg, #1b2a3d, #1b2a3d 7px, #13202f 7px, #13202f 14px); border: 2px solid #2c5f79; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.mcard.open { background: #0d131c; cursor: default; } .mcard.found { border-color: #5fd16b; box-shadow: 0 0 8px #5fd16b55; }
.mcard .m2 { position: absolute; bottom: 5px; width: 12px; height: 3px; border-radius: 2px; background: #fff; }
/* fit to screen */
#screen > *, #sheet > * { zoom: var(--fz, 1); }
/* currency on one row */
#top { align-items: center; gap: 6px; }
#top .res { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; flex-wrap: nowrap; overflow: visible; }
#top .res .chip { min-width: 0; height: 24px; padding: 0 4px 0 3px; gap: 2px; font-size: 10.5px; justify-content: flex-start; position: relative; overflow: visible; }
#top .res .chip .ic { width: 13px; height: 13px; flex: none; }
#top .res .chip small { position: absolute; left: 0; right: 0; top: 100%; margin-top: 1px; text-align: center; font-size: 8.5px; white-space: nowrap; }
/* slimmer bottom */
#subbar { padding: 4px 6px; }
#subbar .tabs button { padding: 7px 9px; font-size: 12px; }
#chatStrip { min-height: 32px; padding: 3px 10px; }
#chatStrip .cl { font-size: 11.5px; line-height: 1.25; }
#nav button { padding: 5px 0 4px; gap: 2px; }
#nav button svg { width: 22px; height: 22px; }
#nav button.on::after { width: 32px; height: 32px; margin-top: -8px; }
/* in-screen sections and pages */
.mtabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 0 8px; padding: 2px 0; }
.mtabs::-webkit-scrollbar { display: none; }
.mtabs button { flex: none; background: #131a25; border: 1px solid #263244; color: #aeb9c8; border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
.mtabs button i { font-style: normal; }
.mtabs button.on { background: #0e2a36; border-color: var(--accent); color: #fff; box-shadow: 0 0 8px #3ee6ff44; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px; }
.pager .btn { min-width: 44px; font-size: 16px; }
.supgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.supgrid .panel { padding: 8px; }
.cosgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cos { padding: 6px 4px; gap: 4px; min-width: 0; }
.cos b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cprev { min-height: 30px; max-width: 100%; overflow: hidden; }
.cprev .emo { width: 22px; height: 22px; }
.emo[viewBox="0 0 8 8"] { shape-rendering: crispEdges; }
.ttlprev { font-style: normal; font-size: 11px; font-weight: 800; color: #ffd34a; background: #2a2208; border: 1px solid #5a4a14; border-radius: 6px; padding: 3px 6px; white-space: nowrap; }
.fprev { display: inline-block; width: 30px; height: 30px; border-radius: 9px; background: #0a1018; border: 2px solid #2a4a63; }
/* frames: profile, chat avatars and shop previews */
.frame_neon { border: 2px solid #3ee6ff !important; box-shadow: 0 0 8px #3ee6ff99; }
.frame_gold { border: 2px solid #ffd34a !important; box-shadow: 0 0 8px #ffd34a88, inset 0 0 4px #ffd34a55; }
.frame_glitch { border: 2px solid #fff !important; box-shadow: 2px 0 0 #ff4d6d, -2px 0 0 #3ee6ff; }
.frame_prism { border: 2px solid #ff4d6d !important; animation: prismb 3s linear infinite; }
@keyframes prismb { 0% { border-color: #ff4d6d; box-shadow: 0 0 8px #ff4d6d; } 25% { border-color: #ffd34a; box-shadow: 0 0 8px #ffd34a; } 50% { border-color: #5fd16b; box-shadow: 0 0 8px #5fd16b; } 75% { border-color: #3ee6ff; box-shadow: 0 0 8px #3ee6ff; } 100% { border-color: #a46bff; box-shadow: 0 0 8px #a46bff; } }
.frame_ember { border: 2px solid #ff7a2a !important; box-shadow: 0 0 10px #ff7a2a99, 0 -3px 8px #ffd34a55; }
.frame_void { border: 2px solid #6b3bd6 !important; animation: voidb 2.2s ease-in-out infinite; }
@keyframes voidb { 50% { box-shadow: 0 0 14px #a46bffcc, inset 0 0 8px #000; } }
/* v19 bubbles */
.txt.bub_ice { background: linear-gradient(180deg, #e8f9ff22, #0c2236) !important; border: 1px solid #9fe8ff; box-shadow: 0 0 8px #9fe8ff55; }
.txt.bub_toxic { background: #0f1f08 !important; border: 1px solid #8cff3a; box-shadow: 0 0 10px #8cff3a55; color: #e6ffd0; }
.txt.bub_royal { background: linear-gradient(135deg, #2a0f4a, #12062a) !important; border: 1px solid #ffd34a; box-shadow: 0 0 0 1px #6b3bd6, 0 0 10px #a46bff66; }
.txt.bub_circuit { background: #06141a !important; border: 1px solid #5fd16b; background-image: linear-gradient(90deg, #5fd16b22 1px, transparent 1px), linear-gradient(#5fd16b22 1px, transparent 1px) !important; background-size: 8px 8px !important; }
.txt.bub_void { background: radial-gradient(circle at 30% 30%, #2a1650, #05030c) !important; border: 1px solid #6b3bd6; animation: voidb 2.2s ease-in-out infinite; }
.txt.bub_candy { background: linear-gradient(135deg, #ff8fc8, #ffb3d9) !important; border: 1px solid #fff; color: #3a0a22 !important; }
/* v19 name colours */
.name_ice { color: #9fe8ff !important; text-shadow: 0 0 6px #9fe8ff88; } .name_toxic { color: #8cff3a !important; text-shadow: 0 0 6px #8cff3a66; } .name_rose { color: #ff8fc8 !important; }
.name_sunset { background: linear-gradient(90deg, #ff4d6d, #ff9a6a, #ffd34a); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.name_aurora { background: linear-gradient(90deg, #3ee6ff, #5fd16b, #a46bff, #3ee6ff); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: aur 4s linear infinite; }
@keyframes aur { to { background-position: 300% 0; } }
.name_chrome { background: linear-gradient(180deg, #ffffff, #8a97a8 55%, #e8eef6); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
/* v19 effects */
.txt.fx_wave { animation: wavey 1.8s ease-in-out infinite; } @keyframes wavey { 25% { transform: translateY(-2px) rotate(-1deg); } 75% { transform: translateY(2px) rotate(1deg); } }
.txt.fx_scan { background-image: repeating-linear-gradient(180deg, #ffffff10 0 1px, transparent 1px 3px) !important; }
.txt.fx_flare { animation: flare 2.4s ease-in-out infinite; } @keyframes flare { 50% { box-shadow: 0 0 14px #ff9a6aaa, 0 0 3px #ffd34a; } }
/* currency: 3 x 2 block beside the profile, same height as the profile card */
#top .res { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px 4px; align-self: center; }
#top .res .chip { height: 22px; font-size: 11px; padding: 0 5px 0 4px; }
#top .res .chip small { position: static; margin: 0 0 0 auto; font-size: 8.5px; text-align: right; }
/* circuit board stays inside its panel */
.circ { width: 100%; max-width: 300px; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 0 6px; box-sizing: border-box; }
.ct { min-width: 0; overflow: visible; }
.ct svg { display: block; width: 100%; height: 100%; }
.ct .src { left: -5px; } .ct .dst { right: -5px; }
/* v20 hacks */
.wins { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 0 0 6px; }
.wins span { font-size: 10.5px; font-weight: 700; background: #0d131c; border: 1px solid #23324a; border-radius: 999px; padding: 2px 7px; color: #c9d4e2; }
.dfg { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; max-width: 250px; margin: 8px auto; }
.db { aspect-ratio: 1; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 900; color: #fff; cursor: pointer;
  background: linear-gradient(160deg, hsl(var(--h), 70%, 50%), hsl(var(--h), 70%, 32%)); box-shadow: 0 4px 0 hsl(var(--h), 60%, 20%); text-shadow: 0 2px 0 #0006; }
.db.ok { outline: 2px solid #5fd16b; } .db.gap { background: #0a0f16; box-shadow: inset 0 2px 6px #000; cursor: default; }
.grd { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; max-width: 270px; margin: 8px auto; }
.gn { aspect-ratio: 1; border-radius: 50%; background: #131a25; border: 2px solid #263244; cursor: pointer; }
.gn.on { background: radial-gradient(circle at 40% 35%, #e8fbff, #3ee6ff 45%, #1d7fa8); border-color: #9ff3ff; box-shadow: 0 0 10px #3ee6ff; }
.swp { display: grid; grid-template-columns: repeat(var(--w), minmax(0, 1fr)); gap: 3px; max-width: 300px; margin: 8px auto; }
.sc { aspect-ratio: 1; border-radius: 6px; background: linear-gradient(160deg, #2a3a52, #1b2638); border: 1px solid #34486a; cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; }
.sc.open { background: #0b1017; border-color: #172030; cursor: default; }
.sc.fl::after { content: ''; width: 45%; height: 45%; background: #ff9a6a; clip-path: polygon(0 0, 100% 35%, 0 70%); }
.sc.trap { background: #2a0d14; border-color: #ff4d6d; } .sc.trap::after { content: ''; width: 46%; height: 46%; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 8px #ff4d6d; }
.sc.hit { background: #ff4d6d55; }
.sc.n1 { color: #3ee6ff; } .sc.n2 { color: #5fd16b; } .sc.n3 { color: #ffd34a; } .sc.n4 { color: #ff9a6a; } .sc.n5, .sc.n6, .sc.n7, .sc.n8 { color: #ff4d6d; }
/* home: smaller lower block sitting lower, more room for the arena */
#app.home #screen { padding-bottom: 2px; }
#app.home .lower { zoom: .85; }
#app.home .lower .gtile { height: 56px; }
#app.home .lower .crackzone { margin-top: 6px; gap: 5px; }
/* tab rows fit the screen: section chips wrap, bottom sub-tabs share the width */
.mtabs { flex-wrap: wrap; overflow: visible; justify-content: center; gap: 4px; }
.mtabs button { padding: 5px 9px; font-size: 11.5px; }
#subbar .tabs { flex-wrap: wrap; overflow: visible; }
#subbar .tabs button { flex: 1 1 auto; min-width: 0; padding: 7px 5px; font-size: 11.5px; white-space: nowrap; }
/* recruitment card styles */
.rcprev { font-size: 10px; font-weight: 800; padding: 6px 8px !important; margin: 0 !important; gap: 4px !important; color: #fff; }
.rcprev i { width: 10px; height: 10px; border-radius: 3px; background: #a46bff; }
.rcard.rc_neon { background: #061a22; border-color: #3ee6ff; box-shadow: 0 0 10px #3ee6ff55, inset 0 0 8px #3ee6ff22; }
.rcard.rc_gold { background: linear-gradient(135deg, #4a3608, #1e1604); border-color: #ffd34a; box-shadow: 0 0 10px #ffd34a44; }
.rcard.rc_glitch { background: #1a0d14; border-color: #fff; box-shadow: 3px 0 0 #ff4d6d, -3px 0 0 #3ee6ff; }
.rcard.rc_ember { background: linear-gradient(180deg, #3a1608, #140804); border-color: #ff7a2a; box-shadow: 0 0 12px #ff7a2a55; }
.rcard.rc_holo { background: linear-gradient(120deg, #3ee6ff33, #a46bff44, #ff4d6d33, #ffd34a33); background-size: 300% 300%; animation: holo 4s ease infinite; border-color: #e8d7ff; }
.rcard.rc_void { background: radial-gradient(circle at 20% 30%, #2a1650, #05030c); border-color: #6b3bd6; animation: voidb 2.2s ease-in-out infinite; }
.rcard.rc_banner { background: linear-gradient(90deg, #12324a, #0d1219 70%); border-color: #3a7fb0; border-left-width: 5px; }
.rcard.rc_circuit { background: #06141a; border-color: #5fd16b; background-image: linear-gradient(90deg, #5fd16b22 1px, transparent 1px), linear-gradient(#5fd16b22 1px, transparent 1px); background-size: 9px 9px; }
.rcard.rc_crown { background: linear-gradient(135deg, #2a0f4a, #12062a); border-color: #ffd34a; box-shadow: 0 0 0 1px #6b3bd6, 0 0 12px #a46bff66; }
.rcard.rc_aurora { background: linear-gradient(90deg, #0b3a3a, #1a1a4a, #0b3a2a); background-size: 300% 100%; animation: aur 5s linear infinite; border-color: #5fd16b; }
.rcard.rc_legend { background: linear-gradient(135deg, #3a2a08, #2a0f4a 60%, #08283a); border: 2px solid #ffd34a; animation: prismb 3s linear infinite; }
/* v22: home bytes + mount tiles, sound sliders */
.gtile.pets .pmini { display: flex; justify-content: center; align-items: center; gap: 0; margin-top: -10px; }
.gtile.pets .pmini img { width: 28px; height: 28px; margin: 0 -4px; filter: drop-shadow(0 2px 2px #000a); }
.gtile.mnt canvas.mntico { width: 46px; height: 46px; margin-top: -8px; }
.vrow2 { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.vrow2 + .vrow2 { border-top: 1px solid var(--line); }
.vrow2 span { min-width: 58px; font-weight: 700; }
input.vol { flex: 1; min-width: 0; accent-color: #3ee6ff; height: 28px; }
input.vol:disabled { opacity: .35; }
#subbar .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
#subbar .tabs::-webkit-scrollbar { display: none; }
#subbar .tabs button { flex: 1 1 auto; padding: 7px 3px; font-size: 11px; letter-spacing: -.2px; }
.mntbig { width: 110px; height: 110px; border-radius: 14px; background: #080b10; flex: none; }

/* ---------- inbox, welcome back, next-upgrade hint ---------- */
#ibBtn { flex: none; position: relative; width: 30px; height: 30px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); display: flex; align-items: center; justify-content: center; padding: 0; align-self: center; }
#ibBtn svg { width: 17px; height: 17px; fill: var(--gold); }
#ibBtn .badge { top: -6px; right: -6px; min-width: 16px; height: 16px; font-size: 10px; }
.ibh { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.ibh svg { width: 18px; height: 18px; fill: var(--gold); }
.iblist { display: flex; flex-direction: column; gap: 5px; }
.ibrow { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; min-width: 0; }
.ibrow b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ibrow .btn { flex: none; min-width: 64px; }
.ibic { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--panel2); display: flex; align-items: center; justify-content: center; }
.ibic .ic { width: 17px; height: 17px; }
.wb { display: flex; flex-direction: column; gap: 8px; }
.wbtop { text-align: center; padding-top: 2px; }
.wbtop .title { font-size: 20px; letter-spacing: .04em; }
.wbrew { background: radial-gradient(circle at 50% 0, #3a2f0c, var(--panel) 70%); border: 1px solid #6b5514; border-radius: 12px; padding: 8px; text-align: center; }
.wbchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 5px; }
.wbchip { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; font-size: 15px; background: #0b0f16; border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px 3px 6px; }
.wbchip .ic { width: 16px; height: 16px; }
.wbrows, .wbnews { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px 10px; }
.wbr, .wbn { display: flex; align-items: center; gap: 7px; padding: 4px 0; font-size: 13px; min-width: 0; }
.wbr + .wbr, .wbn + .wbn { border-top: 1px solid var(--line); }
.wbr .ic, .wbn .ic { width: 16px; height: 16px; flex: none; }
.wbn .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbnews { cursor: pointer; }
.wbbest { display: flex; align-items: center; gap: 8px; border: 1px dashed #3ee6ff88; border-radius: 12px; padding: 7px 10px; background: #0f1a24; }
.wbbest b { font-size: 13px; }
.hintp { animation: ibPulse 1.8s ease-in-out infinite; }
.gtile.hintp::after { content: '▲'; position: absolute; top: 2px; right: 4px; font-size: 10px; color: var(--good); text-shadow: 0 1px 0 #000; }
.sideico.hintp > svg { animation: ibPulse 1.8s ease-in-out infinite; border-color: #5fd16b; }
.sideico.hintp { animation: none; }
@keyframes ibPulse { 0%, 100% { box-shadow: 0 0 0 0 #5fd16b00, 0 3px 0 #000a; } 50% { box-shadow: 0 0 0 3px #5fd16b66, 0 0 14px #5fd16b88, 0 3px 0 #000a; } }
@media (prefers-reduced-motion: reduce) { .hintp, .sideico.hintp > svg { animation: none; box-shadow: 0 0 0 2px #5fd16b88; } }

/* v23 Signal Pass */
.passhd { margin-top: 0; }
.passhd .btn .sub { display: flex; align-items: center; justify-content: center; gap: 2px; }
.ptrack { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; font-size: 11px; font-weight: 800; color: #8a96a6; padding: 0 2px 3px; text-align: center; }
.plist { display: flex; flex-direction: column; gap: 5px; }
.prow { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: stretch; }
.pnum { display: flex; align-items: center; justify-content: center; border-radius: 9px; background: #131a25; border: 1px solid #263244; font-size: 13px; color: #8a96a6; }
.prow.on .pnum { background: #0e2a36; border-color: var(--accent); color: #fff; }
.pcell { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 6px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); min-height: 48px; box-sizing: border-box; }
.pcell.p { background: linear-gradient(135deg, #2a2208, #161b26); border-color: #5a4a14; }
.pcell.ready { border-color: var(--accent); box-shadow: 0 0 8px #3ee6ff44; }
.pcell.got { opacity: .55; }
.pcell .btn.small { padding: 5px 7px; font-size: 11px; flex: none; }
.prw { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; min-width: 0; font-size: 12px; font-weight: 800; }
.prw .rw { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.prw .rw .ic { width: 14px; height: 14px; }
.prw .txt { display: inline-block; background: #18202b; padding: 3px 7px; border-radius: 9px; font-size: 11px; }
.prw .ttlprev { font-size: 10px; padding: 2px 4px; white-space: normal; }
.fprev.sm { width: 22px; height: 22px; border-radius: 7px; }
.pfoot { justify-content: center; gap: 10px; margin: 2px 0 4px; }
.pfoot .pager { margin-top: 6px; }
.pity { margin-top: 2px; }
.deal s { text-decoration: line-through; margin-right: 2px; }
.arena .side:has(> :nth-child(3)) { gap: 2px; }
.arena .side:has(> :nth-child(3)) .sideico > svg { width: 32px; height: 32px; padding: 6px; }
/* v23 season cosmetics */
.txt.bub_pst { background: #0b1118 !important; border: 1px solid #cfefff; background-image: repeating-linear-gradient(0deg, #ffffff0d 0 1px, transparent 1px 2px), repeating-linear-gradient(90deg, #3ee6ff12 0 1px, transparent 1px 3px) !important; box-shadow: 0 0 8px #cfefff44; }
.txt.bub_ptd { background: linear-gradient(180deg, #0b3a52, #06182a) !important; border: 1px solid #3ec9d6; box-shadow: inset 0 -6px 8px #3ec9d633, 0 0 8px #3ec9d644; }
.txt.bub_psl { background: radial-gradient(circle at 30% 20%, #6a3a08, #2a1404) !important; border: 1px solid #ffb531; box-shadow: 0 0 10px #ffb53166; color: #fff0cc; }
.txt.bub_pph { background: linear-gradient(120deg, #2a0f3a, #0f1a3a) !important; border: 1px solid #d36bff; box-shadow: 2px 2px 0 #d36bff55, -2px -2px 0 #3ee6ff44; }
.name_pst { color: #e6f8ff !important; text-shadow: 0 0 4px #3ee6ff, 1px 0 #ffffff55; animation: pstf 3s steps(1) infinite; }
@keyframes pstf { 0%, 90% { opacity: 1; } 92% { opacity: .5; } 94% { opacity: 1; } 96% { opacity: .7; } }
.name_ptd { background: linear-gradient(90deg, #3ec9d6, #2a7bff, #3ec9d6); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: aur 5s linear infinite; }
.name_psl { background: linear-gradient(90deg, #ffe14a, #ff9a2a, #ffe14a); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: aur 3s linear infinite; }
.name_pph { color: #e2a6ff !important; text-shadow: 2px 0 #3ee6ff88, -2px 0 #ff4d6d88; }
.frame_pst { border: 2px dashed #cfefff !important; box-shadow: 0 0 8px #3ee6ff88; }
.frame_ptd { border: 2px solid #3ec9d6 !important; box-shadow: 0 0 0 2px #0b3a52, 0 0 10px #3ec9d688; }
.frame_psl { border: 2px solid #ffb531 !important; animation: pslb 2.4s ease-in-out infinite; }
@keyframes pslb { 50% { box-shadow: 0 0 14px #ffb531cc, 0 0 4px #ffe14a; } }
.frame_pph { border: 2px solid #d36bff !important; box-shadow: 3px 0 0 #3ee6ff88, -3px 0 0 #ff4d6d88; }
.txt.fx_pst { animation: gl 1.8s steps(1) infinite; }
.txt.fx_ptd { animation: tide 3s ease-in-out infinite; } @keyframes tide { 50% { transform: translateX(2px); box-shadow: 0 3px 10px #3ec9d688; } }
.txt.fx_psl { animation: flare 1.8s ease-in-out infinite; }
.txt.fx_pph { animation: phase 2.6s ease-in-out infinite; } @keyframes phase { 50% { opacity: .55; text-shadow: 3px 0 #d36bff, -3px 0 #3ee6ff; } }
.liveav { gap: 10px; } .liveav canvas.avpick { width: 46px; height: 46px; flex: none; cursor: default; }
.pill.beacons { color: #ff9a6a; font-weight: 800; margin-bottom: 4px; }
.sumlv { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; }
.sumlv > i { flex: 1; height: 6px; border-radius: 4px; background: #1a2230; overflow: hidden; }
.sumlv > i > i { display: block; height: 100%; background: linear-gradient(90deg, #3ee6ff, #a46bff); }
.sumlv span { color: var(--dim); font-size: 11px; }
/* gear: compact header so the inventory fits */
.gearhead { gap: 8px; align-items: center; }
.gearhead .gportrait { width: 34%; height: 150px; border-radius: 12px; border: 1px solid var(--line); flex: none; }
.gearhead .slots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
/* animated emoji: 12 motions × 6 effects */
.emo-w { display: inline-block; position: relative; vertical-align: -0.25em; line-height: 0; }
.emo-w > svg { display: block; transform-origin: 50% 60%; animation: var(--ea) var(--ed, 2s) ease-in-out infinite; }
.ea0 { --ea: emBounce; } .ea1 { --ea: emWiggle; } .ea2 { --ea: emPulse; } .ea3 { --ea: emSpin; } .ea4 { --ea: emFloat; } .ea5 { --ea: emShake; }
.ea6 { --ea: emSwing; } .ea7 { --ea: emJelly; } .ea8 { --ea: emFlip; } .ea9 { --ea: emBeat; } .ea10 { --ea: emHop; } .ea11 { --ea: emTilt; }
.ea3 > svg { animation-timing-function: linear; }
@keyframes emBounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-18%); } 60% { transform: translateY(0) scale(1.06, .94); } }
@keyframes emWiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes emPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@keyframes emSpin { 0%, 70% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes emFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12%) rotate(3deg); } }
@keyframes emShake { 0%, 60%, 100% { transform: translateX(0); } 65%, 75%, 85% { transform: translateX(-8%); } 70%, 80%, 90% { transform: translateX(8%); } }
@keyframes emSwing { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(-14deg); } }
@keyframes emJelly { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.18, .84); } 50% { transform: scale(.88, 1.12); } 70% { transform: scale(1.06, .95); } }
@keyframes emFlip { 0%, 60%, 100% { transform: scaleX(1); } 80% { transform: scaleX(-1); } }
@keyframes emBeat { 0%, 30%, 60%, 100% { transform: scale(1); } 15%, 45% { transform: scale(1.2); } }
@keyframes emHop { 0%, 50%, 100% { transform: translateY(0); } 20% { transform: translateY(-22%) rotate(-8deg); } 35% { transform: translateY(0) rotate(0); } }
@keyframes emTilt { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(-10deg) scale(1.08); } }
/* effects */
.ef0 > svg { filter: drop-shadow(0 0 3px rgba(62, 230, 255, .75)); }
.ef1::after { content: ''; position: absolute; top: -12%; right: -14%; width: 32%; height: 32%; background: #fff6c4; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: emSpark var(--ed, 2s) ease-in-out infinite; }
.ef2 { overflow: hidden; border-radius: 30%; } .ef2::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%); transform: translateX(-120%); animation: emShine calc(var(--ed, 2s) * 1.5) ease-in-out infinite; }
.ef3::before { content: ''; position: absolute; width: 18%; height: 18%; border-radius: 50%; background: #ffd34a; box-shadow: 0 0 4px #ffd34a; top: 41%; left: 41%; animation: emOrbit calc(var(--ed, 2s) * 1.2) linear infinite; }
.ef4::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(164, 107, 255, .8); animation: emRipple var(--ed, 2s) ease-out infinite; }
.ef5::after { content: ''; position: absolute; left: -10%; bottom: -6%; width: 22%; height: 22%; background: #9ff3ff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: emSpark calc(var(--ed, 2s) * 1.3) ease-in-out infinite reverse; }
@keyframes emSpark { 0%, 100% { transform: scale(0) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } }
@keyframes emShine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes emOrbit { from { transform: rotate(0) translateX(0.9em) rotate(0); } to { transform: rotate(360deg) translateX(0.9em) rotate(-360deg); } }
@keyframes emRipple { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .emo-w > svg, .emo-w::before, .emo-w::after { animation: none !important; } }

/* v29: daily dives, weekly board, login calendars */
.dv29 { padding: 9px 11px; margin: 6px 0; }
.dv29 .title { font-size: 15px; }
.dv29.hot { border-color: #8a6a1a; background: linear-gradient(100deg, #2a2210, var(--panel)); }
.xp29 { font-size: 10px; color: #7fd3ff; margin-right: 1px; }
.wk29 { padding: 10px 12px 6px; }
.wkbar { position: relative; height: 46px; margin: 6px 20px 0 14px; }
.wkbar > .bar { position: absolute; left: 0; right: 0; top: 8px; }
.wkc { position: absolute; top: 0; transform: translateX(-50%); background: #131a25; border: 1px solid #263244; border-radius: 8px; padding: 1px 3px; display: flex; flex-direction: column; align-items: center; color: #aeb9c8; font-size: 10px; cursor: pointer; white-space: nowrap; min-width: 28px; }
.wkc .ic { width: 16px; height: 16px; opacity: .5; }
.wkc.can { border-color: var(--accent); box-shadow: 0 0 8px #3ee6ff66; color: #fff; }
.wkc.can .ic, .wkc.got .ic { opacity: 1; }
.wkc.got { border-color: var(--good); background: #12331b; }
.ms.wk { padding: 6px 10px; }
.ms.wk b { font-size: 13px; }
.sday.big { border-color: #8a6a1a; }
.cal28 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 8px; }
.cd29 { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; height: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.cd29 i { font-style: normal; font-size: 9px; color: #7c8798; line-height: 1; }
.cd29 .ic { width: 14px; height: 14px; }
.cd29.big { border-color: #8a6a1a; }
.cd29.top { border-color: #ffd34a; box-shadow: 0 0 8px #ffd34a55; }
.cd29.got { border-color: var(--good); background: #12331b; }
.cd29.next { border-color: var(--accent); box-shadow: 0 0 10px #3ee6ff66; }

/* v30 hacks: today's hack, Mainframe, upgrades */
.hk-top { display: flex; align-items: center; gap: 8px; background: linear-gradient(90deg, #10233a, #161a33); border: 1px solid #24405f; border-radius: 10px; padding: 6px 10px; margin-bottom: 6px; }
.hk-top b { font-size: 15px; color: #7dffb0; }
.hk-cd { text-align: right; font-size: 12px; font-weight: 700; }
.hk-pts { color: #7dffb0; font-size: 12px; margin: 0; }
.hk-done { padding: 22px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mf .mf-rack { width: 100%; height: auto; display: block; margin: 4px 0 6px; }
.mf-led { animation: mfBlink 2s ease-in-out infinite; }
@keyframes mfBlink { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.mf-st { margin: 2px 0 4px; }
.mf-st b { display: inline-flex; align-items: center; gap: 4px; }
.mf-bar { position: relative; height: 18px; background: #0b1424; border: 1px solid #24344f; border-radius: 9px; overflow: hidden; }
.mf-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #1d8fb0, #3ee6ff); }
.mf-bar span { position: relative; display: block; text-align: center; font-size: 11px; font-weight: 800; line-height: 16px; text-shadow: 0 1px 2px #000; }
.mf-held { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-height: 26px; margin: 6px 0; }
.mf-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.mf-row { display: flex; align-items: center; gap: 8px; background: #111b2b; border: 1px solid #1f2d45; border-radius: 9px; padding: 7px 9px; min-width: 0; }
.mf-row.lock { opacity: .6; }
.mf-row .grow { min-width: 0; }
.mf-row .btn { white-space: nowrap; flex-shrink: 0; }
.hk-big { font-size: 20px; color: #7dffb0; display: inline-flex; align-items: center; gap: 4px; }
.hk-big .ic { width: 20px; height: 20px; }
.hk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.hk-card { background: #111b2b; border: 1px solid #1f2d45; border-radius: 10px; padding: 7px 8px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hk-card.max { border-color: #7dffb0; }
.hk-card b { font-size: 13px; }
.hk-card .btn { margin-top: auto; }
.mf-rate { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: -2px 0 8px; }
.mf-rate .ic { width: 12px; height: 12px; }
.hk-pips { height: 5px; background: #0b1424; border-radius: 3px; overflow: hidden; margin: 2px 0 3px; }
.hk-pips i { display: block; height: 100%; background: #7dffb0; }

/* v31 crew: hub shop, gifts, goal, surge board */
.pill.crewc { color: #5fe0b4; font-weight: 800; }
.crewhead { padding: 8px 12px; }
.crewhead .pill { margin: 0; }
.crewfr { width: 26px; height: 26px; border-radius: 8px; background: #141b24; flex: none; display: inline-block; }
.txt.crewbub { flex: none; padding: 3px 8px; border-radius: 10px; font-size: 11px; background: #1f2733; display: inline-block; }
.gifti .ic { width: 22px; height: 22px; color: #ffd34a; }
.sgtop .item { padding: 6px 0; }
.sgtop .rk { width: 22px; font-weight: 900; color: var(--dim, #8f98a3); flex: none; text-align: center; }
.sgtop .item.me { background: #5fe0b41a; border-radius: 6px; }
.sgtop .ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.name_hcw { color: #8ff5d2 !important; text-shadow: 0 0 6px #5fe0b4aa, 0 0 1px #fff; }
.frame_hcw { border: 2px solid #5fe0b4 !important; box-shadow: 0 0 8px #5fe0b488, inset 0 0 6px #ffd34a44; }
.txt.bub_hcw { background: radial-gradient(circle at 50% 0%, #2f6b52, #0f2a24) !important; border: 1px solid #5fe0b4; box-shadow: 0 0 8px #5fe0b455, inset 0 -4px 8px #ffd34a22; color: #eafff6; }

/* ===== v31 collection sets, power pops, battle feel, claim-all ===== */
.cshead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 2px 6px; min-width: 0; }
.cshead b { font-size: 14px; flex: none; }
.cshead .tiny { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cslist { display: flex; flex-direction: column; gap: 7px; }
.cscard { background: linear-gradient(135deg, #121a26, #0d121a); border: 1px solid #243246; border-left: 3px solid var(--rc); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.cscard.ready { border-color: #5fd16b; box-shadow: 0 0 10px #5fd16b33; border-left-color: var(--rc); }
.cscard.got { background: linear-gradient(135deg, #12201a, #0d141a); }
.cscard .row { gap: 8px; align-items: center; }
.cscard b { font-size: 13.5px; }
.cspcs { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 5px; }
.cspc { width: 34px; height: 34px; border-radius: 8px; background: #0a0f16; border: 1px solid #2a3a50; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; font-style: normal; flex: none; }
.cspc img, .cspc canvas { width: 32px; height: 32px; display: block; }
.cspc.miss { border-style: dashed; border-color: #2a3342; }
.cspc.miss img { filter: brightness(0.2) saturate(0); }
.csbar { width: 64px; height: 6px; border-radius: 3px; background: #1a2230; overflow: hidden; flex: none; }
.csbar > div { height: 100%; background: var(--rc); }
h3 .caall { margin-left: auto; text-transform: none; letter-spacing: 0; padding: 4px 10px; }
.pwpop { position: fixed; z-index: 60; pointer-events: none; font: 900 13px system-ui, sans-serif; color: #ffd34a; text-shadow: 0 1px 0 #000, 0 0 6px #ff6a5a88; animation: pwpop 1.4s ease-out forwards; white-space: nowrap; }
@keyframes pwpop { 0% { opacity: 0; transform: translateY(4px) scale(.7); } 15% { opacity: 1; transform: translateY(0) scale(1.15); } 30% { transform: scale(1); } 100% { opacity: 0; transform: translateY(16px); } }
.pwms { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, #0000 30%, #0008 100%); animation: pwfade 3s ease forwards; cursor: pointer; }
.pwmsin { position: relative; display: flex; flex-direction: column; align-items: center; padding: 18px 34px; border-radius: 20px; background: linear-gradient(180deg, #2a1a10, #120c08); border: 2px solid #ffd34a; box-shadow: 0 0 30px #ffb53188, 0 6px 0 #000a; animation: pwin .5s cubic-bezier(.2,1.6,.4,1) both; overflow: hidden; max-width: calc(100vw - 32px); }
.pwmsin .ic { width: 34px; height: 34px; }
.pwmsin b { font: 900 44px system-ui, sans-serif; color: #ffd34a; text-shadow: 0 3px 0 #000; line-height: 1; margin-top: 4px; }
.pwmsin span { font: 900 13px system-ui, sans-serif; letter-spacing: .3em; color: #fff; margin-top: 4px; }
.pwray { position: absolute; inset: -60%; background: repeating-conic-gradient(#ffd34a22 0 10deg, #0000 10deg 20deg); animation: pwspin 6s linear infinite; pointer-events: none; }
@keyframes pwin { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pwfade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pwspin { to { transform: rotate(360deg); } }
.flycoin { position: fixed; z-index: 65; width: 12px; height: 12px; pointer-events: none; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6b0, #ffd34a 45%, #b07a10); box-shadow: 0 0 6px #ffd34a; }
.chip.chipbump { animation: chipbump .4s ease; }
@keyframes chipbump { 40% { transform: scale(1.18); box-shadow: 0 0 10px #ffd34a; } }
@media (prefers-reduced-motion: reduce) {
  .pwpop { animation: pwfade 1.4s ease forwards; }
  .pwmsin, .pwray, .chip.chipbump { animation: none; }
}
/* v31m uplink, limited offers, storage, haul */
.bar.thin { height: 4px; margin-top: 4px; }
.rws30 { display: flex; flex-wrap: wrap; gap: 3px 8px; margin-top: 2px; }
.rw30 { display: inline-flex; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.rw30 .ic { width: 13px; height: 13px; }
.pill.best30 { background: linear-gradient(90deg, #8a6a12, #c9a227); color: #1a1200; }
.pill.hot30 { background: linear-gradient(90deg, #c2410c, #ff7a3c); color: #1a0700; }
.up30 { position: relative; overflow: hidden; border-radius: 14px; padding: 12px; border: 1px solid #1f5866; background: radial-gradient(circle at 90% 0, #12384a, #121822 65%); }
.up30.on { border-color: var(--accent); box-shadow: 0 0 14px #3ee6ff33 inset; }
.upic30 { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #0b1a24; border: 1px solid #2c5f79; }
.upic30 .ic { width: 26px; height: 26px; }
.upic30.sm { width: 32px; height: 32px; border-radius: 10px; } .upic30.sm .ic { width: 20px; height: 20px; }
.perks30 { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 10px; }
.perks30 > div { display: flex; align-items: center; gap: 5px; background: #0b1119; border: 1px solid var(--line); border-radius: 9px; padding: 5px 7px; font-size: 11.5px; font-weight: 700; min-width: 0; }
.perks30 .ic { flex: none; width: 15px; height: 15px; }
.perks30 span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ost30 { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: #0b1119; border: 1px solid var(--line); color: var(--dim); }
.ost30.on { color: #fff; border-color: var(--good); background: #10301a; }
.ostar30 { color: var(--dim); font-style: normal; font-size: 12px; }
.mile30 { padding: 8px 10px; }
.mile30.ok { border-color: var(--good); box-shadow: 0 0 10px #5fd16b33 inset; }
.mile30.got { opacity: .55; }
.ld30 { border-radius: 12px; padding: 7px 10px; border: 1px solid #a8541a; background: radial-gradient(circle at 0 0, #3a1d0a, #151a22 70%); }
.ld30 .btn s { opacity: .65; }
.haul30 { position: relative; text-align: center; padding: 10px 4px 2px; overflow: hidden; }
.burst30 { position: absolute; left: 50%; top: 64px; width: 0; height: 0; pointer-events: none; }
.burst30 i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 8px #ffd34a; opacity: 0; transform: rotate(var(--a)) translateY(0); animation: burst30 1.1s ease-out var(--d) forwards; }
.burst30 i:nth-child(3n) { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.burst30 i:nth-child(4n) { background: #c58bff; box-shadow: 0 0 8px #c58bff; }
@keyframes burst30 { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1.2); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-120px) scale(.4); } }
.haul30::before { content: ''; position: absolute; left: 50%; top: 64px; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; background: radial-gradient(circle, #ffd34a40, transparent 62%); animation: glow30 1.4s ease-out; pointer-events: none; }
@keyframes glow30 { 0% { transform: scale(.2); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1); } }
.hbig30 { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 6px; font-size: 34px; font-weight: 900; color: var(--gold); text-shadow: 0 0 14px #ffd34a66; font-variant-numeric: tabular-nums; animation: pop30 .5s cubic-bezier(.3, 1.6, .5, 1); }
.hbig30 .ic { width: 34px; height: 34px; }
@keyframes pop30 { 0% { transform: scale(.4); } 100% { transform: scale(1); } }
.hsm30 { position: relative; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.hc30 { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; font-size: 15px; background: #0b0f16; border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px 3px 6px; font-variant-numeric: tabular-nums; }
.hc30 .ic { width: 16px; height: 16px; }
.hx30 { position: relative; display: inline-block; font-size: 22px; font-weight: 900; color: #04140a; background: linear-gradient(135deg, #6fe07a, #2fa83c); border-radius: 10px; padding: 2px 14px; animation: pop30 .5s cubic-bezier(.3, 1.6, .5, 1); }
.sideico.hot > svg { border-color: #c2410c; box-shadow: 0 0 14px #ff7a3c66, 0 3px 0 #000a; animation: hot30 1.6s ease-in-out infinite; }
@keyframes hot30 { 50% { box-shadow: 0 0 22px #ff7a3caa, 0 3px 0 #000a; } }
.frame_uplink { border: 2px solid #3ee6ff !important; box-shadow: 0 0 0 2px #0a0d12, 0 0 0 4px #a46bff, 0 0 10px #3ee6ff88; }
.ldrow31 { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.ldrow31::-webkit-scrollbar { display: none; }
.ldrow31 > .ld30 { flex: 0 0 88%; scroll-snap-align: start; }
/* first-steps pointer */
#coach { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
#coach.hidden { display: none; }
#coach .cring { position: fixed; border: 3px solid #ffd34a; border-radius: 14px; box-shadow: 0 0 0 4px #ffd34a33, 0 0 18px #ffd34a99; animation: coachPulse 1.2s ease-in-out infinite; }
#coach .cbub { position: fixed; background: #ffd34a; color: #1a1300; font-weight: 800; font-size: 13px; border-radius: 12px; padding: 8px 32px 8px 12px; box-shadow: 0 6px 18px #000a; text-align: center; pointer-events: auto; animation: coachBob 1.2s ease-in-out infinite; }
#coach .cbub button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; border: 0; background: #0006; color: #fff; font-size: 11px; cursor: pointer; }
@keyframes coachPulse { 50% { transform: scale(1.04); box-shadow: 0 0 0 8px #ffd34a22, 0 0 26px #ffd34acc; } }
@keyframes coachBob { 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { #coach .cring, #coach .cbub { animation: none; } }
#coach.tour .cdim { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); }
#coach.tour .cring { z-index: 1; }
#coach .tourb { padding: 10px 12px; text-align: left; animation: none; font-size: 13.5px; line-height: 1.35; }
#coach .tourb .crow { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
#coach .tourb .crow span { flex: 1; font-size: 11px; opacity: .7; }
#coach .tourb button { position: static; transform: none; width: auto; height: auto; border-radius: 9px; padding: 6px 12px; font-weight: 800; font-size: 12.5px; }
#coach .tourb .cskip { background: #0003; color: #1a1300; }
#coach .tourb .cnext { background: #1a1300; color: #ffd34a; }
.toast .ic { width: 1.05em; height: 1.05em; vertical-align: -0.15em; margin-right: 1px; }
.entrybtn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; text-align: left; }
.entrychips button { flex: 1; }
/* where a red dot points */
.dotglow { animation: dotGlow 0.65s ease-in-out 4; position: relative; z-index: 2; }
@keyframes dotGlow { 0%, 100% { box-shadow: 0 0 0 0 #ffd34a00; } 50% { box-shadow: 0 0 0 4px #ffd34acc, 0 0 22px #ffd34a; } }
@media (prefers-reduced-motion: reduce) { .dotglow { animation: none; outline: 3px solid #ffd34a; } }
canvas.mesh { width: 100%; height: 230px; border-radius: 14px; border: 1px solid var(--line); display: block; margin-bottom: 8px; }
#profile { position: relative; } #profile > .dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px #0a0d12; }
/* drops: a card over the gear area that leaves the crack panel free to keep tapping */
#modal.up { align-items: flex-start; background: transparent; pointer-events: none; padding-top: 32vh; }
#modal.up .sheet { pointer-events: auto; border-radius: 20px; max-height: 44vh; margin: 0 10px; box-shadow: 0 12px 40px #000c, 0 0 0 1px #2a4a63; }
/* titles: shown above names in chat; the picker shows what wearing each one adds */
.m .ctitle { font-size: 10px; font-weight: 800; letter-spacing: .02em; color: #ffd34a; text-shadow: 0 0 6px #ffd34a55; margin-bottom: 1px; }
.m.me .ctitle { text-align: right; }
.chips .tstat { display: block; font-size: 9.5px; font-weight: 700; color: var(--good); opacity: .85; }

/* v42 chat safety + admin */
.chatbox .m .mh .mmore { float: right; min-height: 0; height: 20px; min-width: 24px; padding: 0 5px; margin-left: 4px; border: 0; border-radius: 6px; background: #ffffff0d; color: var(--dim, #8a97a8); font-size: 14px; line-height: 20px; cursor: pointer; }
.chatbox .m .mh .mmore.madm { color: #9d7bff; }
.chatbox .m .mh .mmore .ic, .pmore .ic, .banic .ic { width: 14px; height: 14px; vertical-align: -2px; }
.chatbox .m .mb { flex: 1 1 auto; }
.pmore { float: right; height: 28px; min-width: 32px; margin-left: 6px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: #0d1520; color: var(--text, #dfe8f2); font-size: 16px; line-height: 26px; cursor: pointer; }
.pmore.padm { color: #9d7bff; }
.modq { margin-top: 6px; padding: 6px 9px; border-left: 3px solid var(--line); background: #0d1520; border-radius: 6px; font-size: 12.5px; word-break: break-word; max-height: 64px; overflow: hidden; }
.modrep.done { opacity: .55; }
.modrep .grow { min-width: 0; }
.modinfo > div { margin: 3px 0; word-break: break-word; }
.btn .ic { vertical-align: -2px; }
#banScr { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(circle at 50% 35%, #2a1220, #07090d 70%); }
#banScr .banbox { width: 100%; max-width: 320px; text-align: center; padding: 22px 18px; border-radius: 16px; border: 1px solid #ff5a7a55; background: #0b0e14; box-shadow: 0 0 40px #ff5a7a22; }
#banScr .banic { color: #ff5a7a; }
#banScr .banic .ic { width: 46px; height: 46px; }
#banScr h2 { margin: 8px 0 6px; }
#banScr .banr { font-weight: 700; margin-bottom: 6px; word-break: break-word; }
#banScr .btn { margin-top: 16px; }
.modmenu .btn { justify-content: center; text-align: center; }
.modrep .grow, .modrep .grow * { overflow-wrap: anywhere; }

/* v42 leaderboards, co-op runs, friends, the Sovereign, profiles */
.lb42head { margin: 0 2px 6px; }
.lb42grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lb42t { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 10px; border-radius: 10px; background: #131a25; border: 1px solid #263244; color: #dfe7f2; cursor: pointer; text-align: left; }
.lb42t b { font-size: 13px; }
.lb42t span { max-width: 100%; font-size: 12px; font-weight: 800; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb42t i { font-style: normal; font-weight: 600; color: #8a97a8; }
.lb42p { padding: 2px 10px; }
.lb42p .lb td { padding: 5px 4px; }
.lb42p .lb td.n { width: 30px; }
.lb42p .lb td.nm { max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb42p .lb td.r { text-align: right; font-weight: 800; white-space: nowrap; }
.lb42p .lb tr.me { background: #0f2a33; }
.lb42pin { margin-top: 6px; border-color: var(--accent); }
.lb42pin .lb td { border-bottom: 0; }
.lb42wk { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: #8a97a8; }
.lb42wk .ic { width: 11px; height: 11px; }
.co42 { padding: 4px 10px; }
.co42r { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.co42r:last-child { border-bottom: 0; }
.co42r .grow { min-width: 0; }
.co42chips { display: flex; flex-wrap: wrap; gap: 4px; }
.co42chips button { flex: 1 1 40%; }
.sov42 { width: 74px; height: 74px; flex: none; }
.sov42t { display: flex; flex-wrap: wrap; gap: 3px; }
.sov42t .pill { font-size: 10.5px; }
.sov42t .ic { width: 10px; height: 10px; }
.prof42 { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 8px; border-radius: 10px; background: #0f151e; border: 1px solid #222c3a; }
.prof42 canvas.av42 { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.prof42 .grow { min-width: 0; line-height: 1.45; }
.prof42 .ttl42 { font-size: 11px; font-weight: 800; color: #ffd34a; text-shadow: 0 0 6px #ffd34a55; }
.prof42 .btn .ic { width: 12px; height: 12px; }
.prof42 .btn { white-space: nowrap; }
.co42code { padding: 8px 10px; }
.co42code input { min-width: 0; flex: 1; padding: 7px 10px; }
.co42code .btn { white-space: nowrap; }

/* ----- v42 languages + chat translate ----- */
.langgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.langgrid .btn { min-width: 0; padding: 9px 6px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trbtn { display: block; margin: 3px 0 0; padding: 0; background: none; border: 0; color: var(--dim, #8693a6); font: inherit; font-size: 10.5px; text-decoration: underline dotted; cursor: pointer; }
.m.me .trbtn { margin-left: auto; }
.trbtn.on { color: var(--accent, #3ee6ff); }
.trbtn[disabled] { opacity: .6; text-decoration: none; }
html.rtl canvas, html.rtl .res, html.rtl .mono, html.rtl input[type=range] { direction: ltr; }
html:not([lang=en]) .sideico > span:not(.ic) { max-width: 56px; overflow: hidden; text-overflow: ellipsis; font-size: 9.5px; letter-spacing: -.2px; }
.langrow { gap: 8px; }
.langrow > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.langrow .lsep { width: 1px; align-self: stretch; background: var(--line); margin: 0 2px; }
.langrow .btn { padding-left: 8px; padding-right: 8px; }