/* Layout: full-bleed live raid canvas; the lobby is one left-weighted column over a
   bot raid playing in the dark; the in-raid HUD pins to the four corners.
   Deliberately single-theme (a game that happens at night), so no light palette. */
:root {
  color-scheme: dark;
  --night: #07090f;   /* outside the map, page ground */
  --tarp: #0f131c;    /* panels */
  --tarp-2: #161b27;  /* raised controls */
  --line: #283042;    /* hairlines */
  --paper: #ebe5d6;   /* primary ink */
  --dust: #8d93a6;    /* secondary ink */
  --loot: #f7931a;    /* bitcoin orange: money and the one call to action */
  --exit: #3ddc97;    /* semantic: extraction */
  --blood: #ff4d5e;   /* semantic: damage, loss */
  --gold: #ffd166;    /* golden raid */
  --f-display: 'Big Shoulders Stencil Display', 'Impact', 'Arial Narrow Bold', sans-serif;
  --f-ui: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --f-num: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font: 15px/1.45 var(--f-ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--loot); outline-offset: 2px; }
kbd {
  font: 600 11px/1 var(--f-num);
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--dust);
  background: var(--tarp);
}
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.eyebrow {
  font: 600 11px/1.2 var(--f-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dust);
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

/* ------------------------------------------------------------------ lobby */
.screen { position: fixed; inset: 0; z-index: 10; }
.lobby {
  overflow-y: auto;
  background: linear-gradient(90deg, rgba(7, 9, 15, 0.97) 0%, rgba(7, 9, 15, 0.9) 34rem, rgba(7, 9, 15, 0.2) 60rem, rgba(7, 9, 15, 0) 100%);
}
.lobby-col {
  box-sizing: border-box;
  width: min(30rem, 100%);
  padding-inline: calc(20px + var(--safe-l)) 20px;
  padding-block: calc(28px + var(--safe-t)) calc(28px + var(--safe-b));
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.brand { display: flex; flex-direction: column; gap: 10px; }
.kicker {
  margin: 0;
  font: 600 12px/1 var(--f-ui);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--loot);
}
.logo {
  margin: 0;
  font: 900 clamp(84px, 22vw, 148px)/0.8 var(--f-display);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--paper);
  text-shadow: 0 0 40px rgba(247, 147, 26, 0.18);
}
.tagline { margin: 4px 0 0; max-width: 34em; color: var(--dust); text-wrap: pretty; }

.mode { display: grid; grid-template-columns: 1fr auto 1fr; border: 1px solid var(--line); border-radius: 8px; padding: 3px; background: var(--tarp); }
.seg { border: 0; background: transparent; padding: 9px 10px; border-radius: 6px; font-weight: 600; color: var(--dust); }
/* PvE: the co-op modes against the dark (The Descent, zombies), played online */
.seg-pve { padding-inline: 14px; color: #c4b5fd; }
.seg-pve[aria-selected="true"] { color: #ede9fe; background: linear-gradient(135deg, rgba(124, 58, 237, 0.55), rgba(34, 211, 238, 0.25)) !important; }
.seg[aria-selected='true'] { background: var(--tarp-2); color: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.seg:disabled { opacity: 0.4; cursor: not-allowed; }
.net-status { margin: -10px 0 0; min-height: 1.2em; font-size: 13px; color: var(--dust); }
.net-status.bad { color: var(--blood); }

.tables { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tables legend { padding: 0; margin-bottom: 8px; }
.table-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.table-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 12px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--tarp);
  text-align: left;
  min-width: 0;
}
.table-btn .stake { font: 600 20px/1 var(--f-num); font-variant-numeric: tabular-nums; }
.table-btn .unit { font-size: 11px; color: var(--dust); letter-spacing: 0.08em; text-transform: uppercase; }
.table-btn .state { font-size: 12px; color: var(--dust); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.table-btn .state.live { color: var(--exit); }
.table-btn .state.gold { color: var(--gold); }
.table-btn[aria-pressed='true'] { border-color: var(--loot); box-shadow: inset 0 0 0 1px var(--loot); }
.table-btn[aria-pressed='true'] .stake { color: var(--loot); }

.who { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
.who label { grid-column: 1 / -1; }
.who input {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--tarp);
  font-weight: 600;
}
.skins { display: flex; gap: 6px; }
.skin {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35);
}
.skin[aria-checked='true'] { border-color: var(--paper); }

.cta {
  border: 0;
  border-radius: 8px;
  padding: 15px 18px;
  background: var(--loot);
  color: var(--night);
  font: 600 16px/1 var(--f-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 10px 30px -12px rgba(247, 147, 26, 0.7);
  transition: transform 0.08s ease, filter 0.15s ease;
}
.cta:hover { filter: brightness(1.08); }
.cta:active { transform: translateY(1px); }
.cta:disabled { filter: grayscale(0.8) brightness(0.6); cursor: not-allowed; box-shadow: none; }
.ghost {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 16px;
  background: transparent;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}
.ghost:hover { border-color: var(--dust); }
.link { border: 0; background: none; color: var(--loot); text-decoration: underline; padding: 0; font-size: 13px; }

.balance { margin: -4px 0 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.balance b { font-size: 17px; }
.balance .unit { color: var(--dust); font-size: 13px; }

.how { border-top: 1px solid var(--line); padding-top: 12px; color: var(--dust); }
.how summary { cursor: pointer; font-weight: 600; color: var(--paper); }
.how ul { padding-left: 18px; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.how b { color: var(--paper); }
.keys { line-height: 2; font-size: 13px; }
.fine { margin: 0; font-size: 12px; color: var(--dust); }

/* --------------------------------------------------------------- overlays */
.overlay {
  display: grid;
  place-items: center;
  padding-inline: 16px;
  background: rgba(7, 9, 15, 0.5);
  z-index: 20;
}
.card {
  box-sizing: border-box;
  width: min(27rem, 100%);
  padding: 26px 24px 22px;
  background: var(--tarp);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card p { margin: 0; }
.sub { color: var(--dust); }
.res-kicker { font: 600 13px/1 var(--f-ui); letter-spacing: 0.22em; text-transform: uppercase; }
.res-kicker.win { color: var(--exit); }
.res-kicker.loss { color: var(--blood); }
.res-amount { font: 900 clamp(56px, 16vw, 84px)/0.9 var(--f-display); font-variant-numeric: tabular-nums; }
.res-amount.win { color: var(--loot); }
.res-detail { color: var(--dust); text-wrap: pretty; }
.res-detail b { color: var(--paper); font-weight: 600; }
.res-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.res-actions .cta { flex: 1 1 100%; }
.res-actions .ghost { flex: 1 1 0; }
#result { align-items: end; padding-bottom: calc(24px + var(--safe-b)); background: linear-gradient(0deg, rgba(7, 9, 15, 0.8), rgba(7, 9, 15, 0.1) 60%); }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--safe-b));
  transform: translateX(-50%);
  z-index: 40;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--tarp-2);
  border: 1px solid var(--blood);
  max-width: calc(100% - 32px);
  box-sizing: border-box;
}

/* -------------------------------------------------------------------- hud */
.hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.hud-bag {
  position: absolute;
  top: calc(14px + var(--safe-t));
  left: calc(16px + var(--safe-l));
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}
.bag-num { font: 600 34px/1.05 var(--f-num); font-variant-numeric: tabular-nums; color: var(--loot); }
.pnl { font: 500 13px/1 var(--f-num); color: var(--dust); }
.pnl.up { color: var(--exit); }
.pnl.down { color: var(--blood); }
.hud-clock {
  position: absolute;
  top: calc(10px + var(--safe-t));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}
.timer { font: 900 46px/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.timer.hot { color: var(--blood); }
.golden-tag { font: 600 11px/1 var(--f-ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--night); background: var(--gold); padding: 4px 8px; border-radius: 4px; }
.minimap {
  position: absolute;
  top: calc(14px + var(--safe-t));
  right: calc(16px + var(--safe-r));
  width: 150px;
  height: 150px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(7, 9, 15, 0.7);
}
.feed {
  position: absolute;
  top: calc(176px + var(--safe-t));
  right: calc(16px + var(--safe-r));
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  max-width: 60vw;
  font-size: 13px;
}
.feed li {
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(7, 9, 15, 0.72);
  color: var(--dust);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: opacity 0.6s ease;
}
.feed li b { color: var(--paper); font-weight: 600; }
.feed li.me { color: var(--loot); }
.feed li.exit b { color: var(--exit); }
.feed li.fade { opacity: 0; }
.banner {
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  font: 900 30px/1 var(--f-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95);
}
.banner.gold { color: var(--gold); }
.banner.warn { color: var(--blood); }
.banner.money { color: var(--loot); }
.extract {
  position: absolute;
  left: 50%;
  bottom: calc(92px + var(--safe-b));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}
.extract .eyebrow { color: var(--exit); }
.extract b { color: var(--paper); }
.ext-track { width: 220px; height: 8px; border-radius: 4px; background: rgba(61, 220, 151, 0.18); overflow: hidden; }
.ext-bar { height: 100%; width: 0; background: var(--exit); }
.ext-hint { font-size: 12px; color: var(--dust); }
.spect {
  position: absolute;
  left: 50%;
  top: calc(84px + var(--safe-t));
  transform: translateX(-50%);
  font-size: 13px;
  color: var(--dust);
  background: rgba(7, 9, 15, 0.72);
  padding: 4px 10px;
  border-radius: 4px;
}
.hud-bottom {
  position: absolute;
  left: calc(16px + var(--safe-l));
  bottom: calc(16px + var(--safe-b));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: calc(100% - 32px);
}
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.hp { position: relative; width: 190px; height: 14px; border-radius: 3px; background: rgba(255, 77, 94, 0.18); overflow: hidden; }
.hp-bar { height: 100%; width: 100%; background: var(--paper); transition: width 0.1s linear; }
.hp-num { position: absolute; right: 6px; top: 0; font: 600 10px/14px var(--f-num); color: var(--night); mix-blend-mode: difference; filter: invert(1); }
.chip {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(15, 19, 28, 0.85);
  font-size: 12px;
  font-weight: 600;
  color: var(--paper);
}
.chip.cooling { color: var(--dust); }
.chip[aria-pressed='true'] { color: var(--dust); text-decoration: line-through; }

/* ------------------------------------------------------------------ touch */
.touch { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.tzone { position: absolute; bottom: 0; height: 70%; width: 55%; pointer-events: auto; touch-action: none; }
.tzone.left { left: 0; }
.tzone.right { right: 0; }
.thint {
  position: absolute;
  bottom: calc(20px + var(--safe-b));
  font: 600 11px/1 var(--f-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(235, 229, 214, 0.35);
}
.left .thint { left: calc(24px + var(--safe-l)); }
.right .thint { right: calc(24px + var(--safe-r)); }
.stick { position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 2px solid rgba(235, 229, 214, 0.25); display: none; }
.stick.on { display: block; }
.knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(235, 229, 214, 0.35); }
.right .knob { background: rgba(247, 147, 26, 0.55); }
.tbtn {
  position: absolute;
  pointer-events: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: rgba(15, 19, 28, 0.8);
  font: 600 12px/1 var(--f-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  touch-action: none;
}
.tbtn.dash { right: calc(146px + var(--safe-r)); bottom: calc(30px + var(--safe-b)); }
.tbtn.bagbtn { right: calc(40px + var(--safe-r)); bottom: calc(150px + var(--safe-b)); width: 54px; height: 54px; font-size: 11px; }
body.touch-on .hud-bottom .chips { display: none; }
body.touch-on .hud-bottom { bottom: auto; top: calc(96px + var(--safe-t)); }
body.touch-on .hp { width: 140px; }
body.touch-on .extract { bottom: 66%; }
body.touch-on .weapon-panel { width: 150px; padding: 5px 8px; gap: 4px; }
body.touch-on .weapon-name { font-size: 16px; }
body.touch-on .next-weapon { display: none; }
body.touch-on .banner { top: 27%; font-size: 20px; }

/* ------------------------------------------------------------ small screens */
@media (max-width: 720px) {
  .lobby { background: rgba(7, 9, 15, 0.86); }
  .lobby-col { width: 100%; padding-inline: calc(16px + var(--safe-l)) calc(16px + var(--safe-r)); }
  .table-btn .state { white-space: normal; }
  .minimap { width: 96px; height: 96px; }
  .hud-clock { left: auto; right: calc(16px + var(--safe-r)); transform: none; top: calc(116px + var(--safe-t)); align-items: flex-end; }
  .feed { top: calc(178px + var(--safe-t)); font-size: 12px; }
  .timer { font-size: 34px; }
  .weapon-panel { width: 150px; padding: 6px 8px; }
  .weapon-name { font-size: 18px; }
  .bag-num { font-size: 26px; }
  .banner { font-size: 22px; white-space: normal; width: calc(100vw - 32px); box-sizing: border-box; text-wrap: balance; }
}
@media (max-width: 380px) {
  .table-btn .stake { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .cta, .feed li, .hp-bar { transition: none; }
}

/* ------------------------------------------------------------ storm + weapon */
.storm-line { font: 600 12px/1.2 var(--f-num); color: var(--dust); letter-spacing: 0.04em; }
.storm-line.hot { color: #ff5ca8; }
.feed li.warnline b { color: var(--gold); }
.weapon-panel {
  box-sizing: border-box;
  width: 190px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(7, 9, 15, 0.72);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.weapon-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.weapon-name { font: 900 22px/1 var(--f-display); text-transform: uppercase; letter-spacing: 0.03em; }
.prestige { color: var(--gold); font-size: 13px; letter-spacing: 0.1em; }
.ladder { display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); gap: 2px; }
.ladder i { height: 4px; border-radius: 2px; background: var(--line); }
.ladder i.done { background: var(--dust); }
.ladder i.on { background: var(--loot); box-shadow: 0 0 8px rgba(247, 147, 26, 0.8); }
.xp { height: 3px; border-radius: 2px; background: rgba(247, 147, 26, 0.15); overflow: hidden; }
.xp-bar { height: 100%; width: 0; background: var(--loot); transition: width 0.2s ease; }
.next-weapon { font-size: 11px; color: var(--dust); }

/* ------------------------------------------------------------------ gore */
.gore { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--dust); cursor: pointer; }
.gore input { margin-top: 2px; accent-color: var(--blood); width: 16px; height: 16px; }
.gore b { color: var(--blood); }

/* ------------------------------------------------------------ ready room */
.prep {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  overflow-y: auto;
  padding-inline: 16px;
  background: radial-gradient(ellipse at 50% 45%, rgba(7, 9, 15, 0.78), rgba(7, 9, 15, 0.95) 70%);
  z-index: 15;
}
.prep-inner {
  width: min(56rem, 100%);
  padding-block: calc(24px + var(--safe-t)) calc(24px + var(--safe-b));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.prep-head { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.prep-count { margin: 0; font: 900 clamp(64px, 16vw, 128px)/0.85 var(--f-display); font-variant-numeric: tabular-nums; text-transform: uppercase; }
.prep-count.tick { animation: tick 0.5s ease-out; }
.prep-count.go { color: var(--loot); }
.prep-status { margin: 0; color: var(--dust); max-width: 34em; text-wrap: balance; }
@keyframes tick { from { transform: scale(1.25); color: var(--loot); } to { transform: scale(1); } }
.lineup { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; width: 100%; }
.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px 8px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  min-width: 0;
  opacity: 0.45;
}
.slot svg { width: 40px; height: 56px; }
.slot .sn { font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dust); }
.slot.lit { opacity: 1; border-style: solid; border-color: currentColor; background: rgba(15, 19, 28, 0.85); box-shadow: 0 0 22px -6px currentColor, inset 0 0 18px -10px currentColor; animation: lightup 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); }
.slot.lit .sn { color: var(--paper); }
.slot.me .sn::after { content: ' · you'; color: var(--loot); }
.slot.bot .sn::after { content: ' · bot'; color: var(--dust); }
@keyframes lightup { 0% { transform: scale(0.6); opacity: 0; filter: brightness(3); } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; filter: none; } }
.pot { margin: 0; display: flex; gap: 8px; align-items: baseline; }
.pot b { font-size: 26px; color: var(--loot); }
.pot .unit { color: var(--dust); }
.prep-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.prep-actions .cta { min-width: 16rem; }
.cta.armed { background: var(--tarp-2); color: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }

/* ----------------------------------------------------------- kill streaks */
.streak {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 17vh;
  pointer-events: none;
  overflow: hidden;
}
.streak p { margin: 0; position: relative; z-index: 1; }
.st-title { font: 900 clamp(48px, 11vw, 112px)/0.9 var(--f-display); text-transform: uppercase; letter-spacing: 0.02em; text-align: center; }
.st-sub { font: 600 14px/1.2 var(--f-ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper); margin-top: 8px; text-shadow: 0 2px 12px rgba(0,0,0,0.9); }
.st-fx { position: absolute; inset: 0; }

/* 1 · first blood: red flash, letters bleed */
.streak.s1 .st-title { color: #e0182c; text-shadow: 0 4px 0 #6a0510, 0 0 30px rgba(224, 24, 44, 0.6); }
.streak.s1.go .st-title { animation: s1-in 2.6s ease-out both; }
.streak.s1.go .st-fx { background: radial-gradient(ellipse at center, rgba(224, 24, 44, 0.45), transparent 60%); animation: fade-out 0.9s ease-out both; }
.streak.s1 .st-title::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  top: 80%;
  height: 0;
  background: repeating-linear-gradient(90deg, #b3121f 0 6px, transparent 6px 22px, #b3121f 22px 26px, transparent 26px 47px);
  animation: drip 2.2s 0.35s ease-in both;
}
@keyframes s1-in { 0% { transform: scale(2.4); filter: blur(12px); opacity: 0; } 12% { transform: scale(1); filter: blur(0); opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes drip { from { height: 0; opacity: 1; } 70% { opacity: 1; } to { height: 70px; opacity: 0; } }

/* 2 · double kill: two blades cross, the word slams down */
.streak.s2 .st-title { color: #ff8a1f; text-shadow: 0 5px 0 #6b2f00, 0 0 24px rgba(255, 138, 31, 0.5); }
.streak.s2.go .st-title { animation: slam 2.6s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.streak.s2.go .st-fx::before, .streak.s2.go .st-fx::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 24vh;
  width: 70vmin;
  height: 6px;
  margin-left: -35vmin;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  box-shadow: 0 0 20px #ff8a1f;
}
.streak.s2.go .st-fx::before { animation: blade1 0.5s ease-out both; }
.streak.s2.go .st-fx::after { animation: blade2 0.5s 0.15s ease-out both; }
@keyframes slam { 0% { transform: translateY(-60px) scale(1.4); opacity: 0; } 15% { transform: none; opacity: 1; } 18% { transform: translateX(-6px); } 21% { transform: translateX(6px); } 24% { transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes blade1 { from { transform: rotate(35deg) translateX(-60vmin); opacity: 1; } to { transform: rotate(35deg) translateX(60vmin); opacity: 0; } }
@keyframes blade2 { from { transform: rotate(-35deg) translateX(60vmin); opacity: 1; } to { transform: rotate(-35deg) translateX(-60vmin); opacity: 0; } }

/* 3 · triple kill: three echoes converge, electric flicker */
.streak.s3 .st-title { color: var(--gold); }
.streak.s3.go .st-title { animation: echo 2.6s ease-out both, flicker 0.12s 0.5s 5 steps(2); }
@keyframes echo {
  0% { opacity: 0; text-shadow: -120px 0 0 rgba(255, 209, 102, 0.6), 120px 0 0 rgba(255, 209, 102, 0.6), 0 -80px 0 rgba(255, 209, 102, 0.6); }
  20% { opacity: 1; text-shadow: -6px 0 0 rgba(255, 209, 102, 0.5), 6px 0 0 rgba(255, 209, 102, 0.5), 0 -4px 0 rgba(255, 209, 102, 0.5); }
  30%, 85% { opacity: 1; text-shadow: 0 0 26px rgba(255, 209, 102, 0.7), 0 4px 0 #6b4d00; }
  100% { opacity: 0; }
}
@keyframes flicker { 50% { filter: brightness(2.2) drop-shadow(0 0 12px #fff); } }

/* 4 · rampage: shockwave ring and chromatic split */
.streak.s4 .st-title { color: #fff; }
.streak.s4.go .st-title { animation: rampage 2.6s ease-out both; }
.streak.s4.go .st-fx::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 26vh;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 6px solid #ff3d7f;
  box-shadow: 0 0 40px #ff3d7f, inset 0 0 30px #3de0ff;
  animation: shock 0.9s ease-out both;
}
@keyframes shock { from { transform: scale(0); opacity: 1; } to { transform: scale(90); opacity: 0; } }
@keyframes rampage {
  0% { transform: scale(0.3); opacity: 0; text-shadow: -14px 0 #3de0ff, 14px 0 #ff3d7f; }
  14% { transform: scale(1.12); opacity: 1; }
  20%, 40% { transform: scale(1); text-shadow: -4px 0 #3de0ff, 4px 0 #ff3d7f; }
  30% { text-shadow: 4px 0 #3de0ff, -4px 0 #ff3d7f; }
  85% { opacity: 1; text-shadow: -3px 0 #3de0ff, 3px 0 #ff3d7f; }
  100% { opacity: 0; }
}

/* 5 · godlike: rotating golden rays and falling sats */
.streak.s5 .st-title { color: var(--gold); text-shadow: 0 6px 0 #7a5200, 0 0 40px rgba(255, 209, 102, 0.9); }
.streak.s5.go .st-title { animation: god 2.6s ease-out both; }
.streak.s5.go .st-fx::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 26vh;
  width: 140vmax;
  height: 140vmax;
  margin: -70vmax 0 0 -70vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 209, 102, 0.22) 0 6deg, transparent 6deg 18deg);
  mask-image: radial-gradient(circle, #000 0%, transparent 55%);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 55%);
  animation: rays 2.6s linear both;
}
.streak .coin-rain { position: absolute; top: -20px; font: 600 18px/1 var(--f-num); color: var(--loot); text-shadow: 0 0 8px rgba(247, 147, 26, 0.9); animation: rain 1.8s ease-in both; }
@keyframes rays { from { transform: rotate(0deg) scale(0.6); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } to { transform: rotate(60deg) scale(1.1); opacity: 0; } }
@keyframes god { 0% { transform: scale(3); opacity: 0; letter-spacing: 0.5em; } 18% { transform: scale(1); opacity: 1; letter-spacing: 0.02em; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rain { from { transform: translateY(0) rotate(0); opacity: 1; } to { transform: translateY(105vh) rotate(540deg); opacity: 0.6; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .streak.go .st-title, .streak.go .st-fx::before, .streak.go .st-fx::after, .slot.lit, .prep-count.tick { animation: fade-out 2.6s steps(1, end) reverse both !important; }
  .streak .coin-rain { display: none; }
}

/* --------------------------------------------------------------- tokens */
.assets { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.assets legend { padding: 0; margin-bottom: 8px; }
.asset-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 6px; }
.asset {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--tarp);
  text-align: left;
  min-width: 0;
}
.asset .dot { grid-row: 1 / 3; width: 12px; height: 12px; border-radius: 50%; }
.asset .sym { font-weight: 600; font-size: 14px; }
.asset .amt { font: 500 11px/1.3 var(--f-num); color: var(--dust); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset[aria-pressed='true'] { border-color: var(--loot); box-shadow: inset 0 0 0 1px var(--loot); }
.asset:disabled { opacity: 0.4; cursor: not-allowed; }
.quote { margin: 0; font-size: 13px; color: var(--dust); }
.quote b { color: var(--paper); font-family: var(--f-num); font-weight: 500; }

/* ------------------------------------------------------ real-token cashier */
.cashier { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--tarp); }
.acct { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acct-label { flex: 1 1 12rem; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.acct-label b { font-family: var(--f-num); font-weight: 500; }
.cashier .ghost, .dlg .ghost { padding: 7px 12px; }
.fine.bad, .dlg-status.bad { color: var(--blood); }

.dlg {
  width: min(30rem, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--tarp);
  color: var(--paper);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.dlg::backdrop { background: rgba(4, 6, 10, 0.72); }
.dlg-inner { display: flex; flex-direction: column; gap: 14px; padding: 16px; overflow-y: auto; max-height: calc(100dvh - 34px); box-sizing: border-box; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dlg-head h2 { margin: 0; font: 700 22px/1.1 var(--f-display); letter-spacing: 0.02em; text-transform: uppercase; }
.dlg .x { border: 0; background: none; color: var(--dust); font-size: 24px; line-height: 1; padding: 4px 8px; }
.dlg .x:hover { color: var(--paper); }
.dlg-status { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--dust); }
.dlg .mode { grid-template-columns: repeat(3, 1fr); }
.opt-group { display: flex; flex-direction: column; gap: 8px; }
.opt-group .eyebrow { margin: 0; }
.wallet-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 6px; }
.opt {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  text-align: left;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--tarp-2);
  color: var(--paper);
  text-decoration: none;
  min-width: 0;
}
.opt:hover { border-color: var(--dust); }
.opt img, .opt .noicon { grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 6px; object-fit: contain; background: var(--night); }
.opt-name { font-weight: 600; font-size: 14px; }
.opt-sub { grid-column: 2; font-size: 12px; color: var(--dust); }
.opt:not(:has(img, .noicon)) .opt-name, .opt:not(:has(img, .noicon)) .opt-sub { grid-column: 1 / 3; }
.opt.missing { opacity: 0.6; }
.opt[aria-checked='true'] { border-color: var(--loot); box-shadow: inset 0 0 0 1px var(--loot); }
.route { display: grid; gap: 6px; }
.row { display: flex; gap: 6px; align-items: center; }
.row input, .row select { flex: 1 1 auto; min-width: 0; }
.dlg input, .dlg select {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--night);
  color: var(--paper);
  font: inherit;
}
.dlg select { flex: 0 1 9rem; }
.socials { flex-wrap: wrap; }
.socials .ghost { flex: 1 1 5rem; }
.pane { display: flex; flex-direction: column; gap: 10px; }
.hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 22rem; overflow-y: auto; }
.hist li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.hist li .fine { grid-column: 1 / 3; }
.hist a { color: var(--loot); }

/* ------------------------------------------------------------------ ranks */
.slot .sn svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; }
.rank-card { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--tarp); }
.rank-card > svg, .rr-head > svg { flex: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.rk-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rk-title { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.rk-title .eyebrow { margin: 0; }
.rk-title b { font-weight: 600; }
.rk-bar { height: 6px; border-radius: 3px; background: var(--night); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.rk-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--loot), var(--gold)); border-radius: 3px; transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.res-rank { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(7, 9, 15, 0.6); }
.res-rank.up { border-color: var(--gold); box-shadow: 0 0 30px -10px var(--gold); }
.rr-head { display: flex; align-items: center; gap: 12px; }
.rr-gain { margin: 0; font-size: 13px; color: var(--dust); }
.rr-gain b { color: var(--gold); font-family: var(--f-num); font-weight: 500; }
.rr-up { color: var(--gold); animation: rankup 0.9s ease-out; }
.rr-parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 2px 14px; font-size: 12px; color: var(--dust); }
.rr-parts li { display: flex; justify-content: space-between; gap: 8px; }
.rr-parts b { color: var(--paper); font-family: var(--f-num); font-weight: 500; }
@keyframes rankup { 0% { transform: scale(1.8); opacity: 0; letter-spacing: 0.5em; } 60% { opacity: 1; } 100% { transform: scale(1); letter-spacing: inherit; } }
@media (prefers-reduced-motion: reduce) { .rk-bar i { transition: none; } .rr-up { animation: none; } }

/* ------------------------------------------------------------------ locker */
.locker-tile {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  align-items: center;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    radial-gradient(120% 90% at 0% 100%, color-mix(in srgb, var(--r, #b8bfcc) 22%, transparent), transparent 60%),
    var(--tarp);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.locker-tile canvas { width: 92px; height: 116px; cursor: pointer; }
.lt-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lt-body .eyebrow { margin: 0; }
.lt-name { margin: 0; font: 700 20px/1.1 var(--f-display); letter-spacing: 0.02em; text-transform: uppercase; }
.lt-body .fine { margin: 0; }
.lt-foot { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lt-marks { font: 500 14px/1 var(--f-num); color: var(--exit); }
.lt-foot .ghost { padding: 8px 12px; font-size: 13px; }

.dlg-locker { width: min(1120px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); background: #0b0e16; }
.lk { position: relative; display: flex; flex-direction: column; max-height: calc(100dvh - 26px); }
.lk-head { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #121726, #0b0e16); }
.lk-head h2 { margin: 0; font: 900 30px/1 var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; }
.lk-wallet { margin: 0 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--dust); }
.lk-wallet span { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--night); }
.lk-wallet b { font: 500 14px/1 var(--f-num); color: var(--paper); }
.lk .x { border: 0; background: none; color: var(--dust); font-size: 26px; padding: 2px 8px; }
.lk-main { display: grid; grid-template-columns: minmax(250px, 330px) 1fr; min-height: 0; flex: 1; overflow: hidden; }
.lk-left { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-right: 1px solid var(--line); background: radial-gradient(80% 60% at 50% 30%, #1a2133, #0b0e16 70%); overflow-y: auto; }
.lk-stage { width: 100%; height: 330px; }
.lk-bodysel { grid-template-columns: 1fr 1fr; }
.lk-bodysel .seg[aria-checked='true'] { background: var(--tarp-2); color: var(--paper); box-shadow: inset 0 0 0 1px var(--loot); }
.lk-detail { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid color-mix(in srgb, var(--r) 45%, var(--line)); border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--r) 14%, transparent), transparent 70%); }
.lk-detail h3 { margin: 0; font: 900 26px/1 var(--f-display); letter-spacing: 0.02em; text-transform: uppercase; }
.lk-rar { margin: 0; font: 600 11px/1 var(--f-ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--r); }
.lk-rar span { color: var(--dust); }
.lk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.lk-actions .cta { padding: 12px 16px; font-size: 14px; }
.lk-actions .ghost { padding: 11px 14px; font-size: 13px; }
.lk-tag { padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--exit) 18%, transparent); color: var(--exit); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.lk-right { display: flex; flex-direction: column; gap: 12px; padding: 16px; min-width: 0; overflow-y: auto; }
.lk-tabs { grid-template-columns: repeat(3, 1fr); }
.lk-pane { display: flex; flex-direction: column; gap: 12px; }
.lk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.lk-filter { display: flex; flex-wrap: wrap; gap: 4px; }
.lk-filter button { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--dust); font-size: 12px; }
.lk-filter button[aria-pressed='true'] { color: var(--paper); border-color: var(--dust); background: var(--tarp-2); }
.lk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.lk-item {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px 9px;
  border: 1px solid color-mix(in srgb, var(--r) 40%, var(--line));
  border-radius: 10px;
  background:
    radial-gradient(90% 70% at 50% 100%, color-mix(in srgb, var(--r) 26%, transparent), transparent 70%),
    linear-gradient(180deg, #151a27, #0d111a);
  color: var(--paper);
  text-align: center;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.lk-item::after { content: ''; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--r); }
.lk-item:hover { transform: translateY(-2px); border-color: var(--r); box-shadow: 0 10px 26px -14px var(--r); }
.lk-item.sel { border-color: var(--r); box-shadow: 0 0 0 1px var(--r), 0 12px 30px -12px var(--r); }
.lk-item.locked img { filter: saturate(0.5) brightness(0.75); }
.lk-item img { width: 70px; height: 94px; }
.lk-shine { position: absolute; inset: -40% -60%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.10) 50%, transparent 60%); transform: translateX(-60%); transition: transform 0.6s ease; pointer-events: none; }
.lk-item:hover .lk-shine { transform: translateX(60%); }
.r-legendary .lk-shine, .r-mythic .lk-shine, .r-exotic .lk-shine { animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 0%, 55% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
.lk-name { font-weight: 600; font-size: 13px; line-height: 1.15; }
.lk-state { font: 500 11px/1 var(--f-num); color: var(--dust); }
.lk-state.on { color: var(--exit); }
.lk-state.own { color: var(--paper); }
.lk-state.price { color: var(--exit); }
.lk-state.trial { color: var(--gold); }
.lk-boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.lk-box { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, #151a27, #0d111a); }
.lk-box.b-vault { border-color: #2a4a7a; }
.lk-box.b-golden { border-color: #8a6a18; background: radial-gradient(90% 60% at 50% 20%, rgba(255, 209, 102, 0.12), transparent 70%), linear-gradient(180deg, #1b1810, #0d0c09); }
.lk-box-art { display: grid; place-items: center; padding: 4px 0; }
.lk-box-art svg { transition: transform 0.25s ease; }
.lk-box:hover .lk-box-art svg { transform: translateY(-4px) rotate(-2deg); }
.lk-box h4 { margin: 0; font: 900 22px/1 var(--f-display); letter-spacing: 0.03em; text-transform: uppercase; }
.lk-box .fine { margin: 0; }
.odds { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12px; }
.odds li { display: flex; justify-content: space-between; padding-left: 10px; border-left: 3px solid var(--r); color: var(--dust); }
.odds b { color: var(--paper); font-family: var(--f-num); font-weight: 500; }
.pity { display: grid; grid-template-columns: 7.5rem 1fr 2rem; align-items: center; gap: 8px; font-size: 11px; color: var(--dust); }
.pity b { font-family: var(--f-num); font-weight: 500; color: var(--paper); text-align: right; }
.pity-bar { height: 5px; border-radius: 3px; background: var(--night); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.pity-bar i { display: block; height: 100%; background: linear-gradient(90deg, #b37bff, #f7931a); }
.lk-box .cta { padding: 12px; font-size: 14px; }
.held { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.25); font-family: var(--f-num); }

/* roulette */
.lk-roll { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; background: rgba(5, 7, 11, 0.94); backdrop-filter: blur(6px); }
.lk-roll.flash::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 50%, var(--r), transparent 70%); opacity: 0; animation: burst 0.9s ease-out; pointer-events: none; }
@keyframes burst { 0% { opacity: 0.85; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.4); } }
.rl { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.rl-kicker, .rv-kicker { margin: 0; font: 600 12px/1 var(--f-ui); letter-spacing: 0.3em; text-transform: uppercase; color: var(--dust); }
.rl-window { position: relative; width: 100%; max-width: 980px; overflow: hidden; padding: 18px 0; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.rl-strip { display: flex; gap: 8px; will-change: transform; }
.rl-card { flex: none; width: 124px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--r) 55%, transparent); background: radial-gradient(90% 70% at 50% 100%, color-mix(in srgb, var(--r) 35%, transparent), transparent 70%), #111622; font-size: 12px; font-weight: 600; text-align: center; }
.rl-card::after { content: ''; align-self: stretch; height: 3px; border-radius: 2px; background: var(--r); }
.rl-card img { width: 64px; height: 86px; }
.rl-marker { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--loot); box-shadow: 0 0 14px 2px var(--loot); }
.rl-marker::before, .rl-marker::after { content: ''; position: absolute; left: 50%; margin-left: -7px; border: 7px solid transparent; }
.rl-marker::before { top: 0; border-top-color: var(--loot); }
.rl-marker::after { bottom: 0; border-bottom-color: var(--loot); }
.rv { width: min(460px, 100%); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; animation: rise 0.5s cubic-bezier(0.2, 1.3, 0.4, 1); }
@keyframes rise { from { transform: translateY(24px) scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }
.rv-stage { width: 100%; height: 280px; border-radius: 14px; background: radial-gradient(60% 60% at 50% 45%, color-mix(in srgb, var(--r) 28%, transparent), transparent 75%); }
.rv-stage canvas { width: 100%; height: 100%; }
.rv-rar { margin: 6px 0 0; font: 700 13px/1 var(--f-ui); letter-spacing: 0.35em; text-transform: uppercase; color: var(--r); text-shadow: 0 0 18px var(--r); }
.rv-name { margin: 0; font: 900 clamp(34px, 8vw, 52px)/0.95 var(--f-display); letter-spacing: 0.02em; text-transform: uppercase; }
.rv-note { margin: 4px 0 8px; color: var(--dust); font-size: 14px; }
.rv-note b { color: var(--paper); }
.rv-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.rv-actions .cta, .rv-actions .ghost { padding: 12px 16px; font-size: 14px; }
.ghost.share { border-color: #3a3f4d; background: #0f1115; }
.ghost.share::before { content: '𝕏 '; font-weight: 900; }

.slot img.fig { width: 44px; height: 62px; }

@media (max-width: 760px) {
  .lk-main { grid-template-columns: 1fr; overflow-y: auto; }
  .lk-left { border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .lk-right { overflow: visible; }
  .lk-stage { height: 240px; }
  .lk-head { flex-wrap: wrap; padding: 12px 14px; }
  .lk-wallet { order: 3; margin: 0; width: 100%; }
  .lk-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .rl-card { width: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .lk-shine, .r-legendary .lk-shine, .r-mythic .lk-shine, .r-exotic .lk-shine { animation: none; transition: none; }
  .lk-item.r-mythic, .lk-item.r-exotic { animation: none; }
  .rv { animation: none; }
}

/* ------------------------------------------------------------ share + rewards */
.dlg-share { width: min(760px, calc(100vw - 24px)); }
.share-img { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; border: 1px solid var(--line); background: #0b0f19; object-fit: contain; }
.share-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.share-actions .cta { padding: 12px 18px; font-size: 14px; }
.share-actions .ghost { padding: 11px 14px; font-size: 13px; }
.res-rewards { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line)); border-radius: 8px; background: linear-gradient(135deg, rgba(255, 209, 102, 0.10), transparent 60%); }
.res-rewards .eyebrow { margin: 0; color: var(--gold); }
.res-rewards ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.res-rewards li { display: grid; grid-template-columns: 22px auto 1fr; align-items: center; gap: 10px; font-size: 14px; }
.res-rewards li .fine { text-align: right; }
.rw-ico { width: 20px; height: 20px; border-radius: 5px; background: var(--tarp-2); box-shadow: inset 0 0 0 1px var(--line); }
.rw-ico.bag { background: linear-gradient(135deg, #ff9f1c, #7a4a0c); }
.rw-ico.cash { background: linear-gradient(135deg, #3ddc97, #1b6b49); }
.rw-ico.trial { background: linear-gradient(135deg, #b37bff, #4cc9f0); }
.rw-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rw-actions .ghost { padding: 9px 12px; font-size: 13px; flex: 1 1 auto; }

/* ------------------------------------------------------ lobby, simplified */
.lobby-col { gap: 14px; }
.logo { font-size: clamp(64px, 17vw, 112px); }
.tagline { margin: 2px 0 0; font-size: 15px; }
.tagline b { color: var(--paper); font-weight: 600; }
.profile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px 10px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--r, #b8bfcc) 18%, transparent), transparent 60%), var(--tarp);
}
.pf-look { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 92px; }
.pf-look canvas { width: 88px; height: 104px; cursor: pointer; }
.pf-look .lt-name { font: 700 13px/1.1 var(--f-ui); text-transform: none; letter-spacing: 0; text-align: center; }
.pf-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pf-main input { min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--night); font-weight: 600; }
.profile .rank-card { padding: 0; border: 0; background: none; gap: 10px; }
.rk-title { justify-content: space-between; font-size: 13px; }
.rk-xp { font: 500 11px/1 var(--f-num); color: var(--dust); }
.pf-money { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font-size: 13px; color: var(--dust); }
.pf-money b { font-size: 15px; color: var(--paper); }
.pf-money .lt-marks { font-size: 13px; }
.pf-locker { padding: 8px 12px; font-size: 13px; justify-self: start; align-self: flex-start; }
.pf-locker.glow { border-color: var(--loot); color: var(--loot); box-shadow: 0 0 18px -6px var(--loot); }
.table-btn { padding: 10px 12px; gap: 2px; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.table-btn .state { flex-basis: 100%; }
.paywith { border: 1px solid var(--line); border-radius: 8px; background: var(--tarp); }
.paywith summary { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; cursor: pointer; list-style: none; }
.paywith summary::-webkit-details-marker { display: none; }
.paywith summary .eyebrow { margin-right: 4px; }
.paywith summary .num { color: var(--dust); font-size: 13px; }
.pw-change { margin-left: auto; font-size: 12px; color: var(--loot); }
.paywith[open] .pw-change { visibility: hidden; }
.paywith .asset-list { padding: 0 10px 10px; }
.lobby .cta#play { padding: 18px; font-size: 18px; }
.quote { margin: -6px 0 0; text-align: center; }
.quote.bad { color: var(--blood); }
.how-steps { margin: 10px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.how-steps b { color: var(--paper); }
.how .fine { margin-top: 6px; }
@media (max-width: 720px) {
  .lobby-col { gap: 12px; padding-top: calc(18px + var(--safe-t)); }
  .logo { font-size: 64px; }
  .brand { flex-direction: row; align-items: flex-end; gap: 14px; }
  .brand .tagline { font-size: 13px; }
}

/* first-raid hints */
.coach {
  position: absolute;
  left: 50%;
  bottom: calc(150px + var(--safe-b));
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(7, 9, 15, 0.82);
  border: 1px solid rgba(247, 147, 26, 0.55);
  color: var(--paper);
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  box-shadow: 0 8px 30px -10px rgba(247, 147, 26, 0.6);
  animation: coach-in 0.35s ease-out;
}
@keyframes coach-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
body.touch-on .coach { bottom: auto; top: calc(104px + var(--safe-t)); font-size: 11.5px; padding: 6px 12px; max-width: min(46vw, 420px); pointer-events: none; opacity: 0.92; }
@media (prefers-reduced-motion: reduce) { .coach { animation: none; } }

/* shop $ packs */
.lk-packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.lk-pack { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--night); color: var(--paper); cursor: pointer; }
.lk-pack b { font: 600 18px/1.1 var(--f-num); }
.lk-pack span { font-size: 11px; color: var(--dust); }
.lk-pack.bonus span { color: #b5e48c; font-weight: 600; }
.lk-pack small { font-size: 10px; color: var(--dust); }
.lk-pack:hover:not(:disabled) { border-color: #b5e48c; }
.lk-pack:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 560px) { .lk-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* stake with any coin */
.coins { border: 0; margin: 0; padding: 0; }
.coins legend { padding: 0; margin-bottom: 6px; display: flex; gap: 8px; align-items: baseline; }
.coins legend .fine { text-transform: none; letter-spacing: 0; font-size: 11px; }
.asset .need { grid-column: 2; font: 500 10px/1.3 var(--f-num); color: var(--dust); opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset.short .need { color: #ff8f8f; opacity: 1; }
.coins .asset .dot { grid-row: 1 / 4; }

/* spectating after death */
.spect { display: flex; align-items: center; gap: 8px; pointer-events: auto; z-index: 5; }
.spect .sp-btn { width: 30px; height: 28px; border: 1px solid var(--line); border-radius: 6px; background: rgba(7, 9, 15, 0.8); color: var(--paper); cursor: pointer; }
.spect .sp-done { padding: 5px 12px; border: 0; border-radius: 6px; background: var(--paper); color: #0b0e16; font-weight: 700; cursor: pointer; }

/* practice settings */
.pcfg { border: 1px solid var(--line); border-radius: 8px; background: var(--tarp); padding: 8px 12px; }
.pcfg summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.pcfg-rows { display: grid; gap: 10px; margin-top: 10px; }
.pcfg-rows label { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; font-size: 13px; }
.pcfg-rows input[type='range'] { grid-column: 1 / -1; width: 100%; accent-color: #f7931a; }
.seg-row { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg-row button { padding: 4px 10px; border: 0; background: transparent; color: var(--dust); cursor: pointer; font-size: 12px; }
.seg-row button[aria-pressed='true'] { background: var(--paper); color: #0b0e16; font-weight: 700; }

/* achievements and titles */
.pf-title { margin: -2px 0 0; font: 600 12px/1.2 var(--f-ui, inherit); color: #ffd166; letter-spacing: 0.04em; }
.pf-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-buttons .ghost { flex: 1 1 auto; }
.dlg-ach { width: min(640px, calc(100vw - 24px)); }
.ach-sum { margin: 0; font-size: 13px; color: var(--dust); }
.ach-sum b { color: var(--paper); }
.ach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ach { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--tarp); }
.ach.done { border-color: rgba(255, 209, 102, 0.45); background: linear-gradient(90deg, rgba(255, 209, 102, 0.08), transparent 60%), var(--tarp); }
.ach.worn { box-shadow: inset 0 0 0 1px #ffd166; }
.ach-medal { font-size: 22px; color: var(--dust); width: 28px; text-align: center; }
.ach.done .ach-medal, .res-ach .ach-medal { color: #ffd166; text-shadow: 0 0 12px rgba(255, 209, 102, 0.6); }
.ach-body { min-width: 0; }
.ach-name { margin: 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ach-xp { font: 500 11px/1 var(--f-num); color: #b5e48c; }
.ach-desc { margin: 2px 0 0; font-size: 12px; color: var(--dust); }
.ach-bar { margin-top: 6px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.ach-bar i { display: block; height: 100%; background: #ffd166; }
.ach-have { margin: 3px 0 0; font: 500 10px/1 var(--f-num); color: var(--dust); }
.ach-tag { font-size: 11px; color: #ffd166; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.res-ach { border: 1px solid rgba(255, 209, 102, 0.45); border-radius: 10px; padding: 10px 12px; background: rgba(255, 209, 102, 0.06); }
.res-ach ul { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; gap: 6px; }
.res-ach li { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; }
.res-ach li .fine { grid-column: 2; }

/* language picker */
.brand { position: relative; }
.lang-pick { position: absolute; top: 0; inset-inline-end: 0; display: inline-flex; gap: 4px; align-items: center; font-size: 13px; }
.lang-pick select { background: var(--tarp); color: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font: inherit; }

/* premium rarities: mythic and exotic cards glow and breathe; exotic gets a moving prism border */
.lk-item.r-mythic { background: radial-gradient(120% 90% at 50% 0%, rgba(255, 61, 127, 0.22), transparent 60%), var(--night); animation: premium-breathe 2.8s ease-in-out infinite; }
.lk-item.r-exotic { background: radial-gradient(120% 90% at 50% 0%, rgba(0, 240, 255, 0.25), transparent 60%), #06121a; border-color: transparent; animation: premium-breathe 2.2s ease-in-out infinite; }
.lk-item.r-exotic::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--spin, 0deg), #00f0ff, #ff3dd4, #ffd166, #7dff9b, #00f0ff); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: prism-spin 4s linear infinite; pointer-events: none; }
.lk-item.r-exotic .lk-name { background: linear-gradient(90deg, #00f0ff, #ff3dd4, #ffd166); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes prism-spin { to { --spin: 360deg; } }
@keyframes premium-breathe { 50% { box-shadow: 0 0 22px -6px var(--r); } }
@media (prefers-reduced-motion: reduce) { .lk-item.r-exotic::before { animation: none; } }

/* =====================================================================
   SHELL: intro, top bar, navigation, pages. Web2-clean: one accent, lots of
   air, glass panels over the live bot raid, no clutter. Desktop: side rail;
   phones: bottom tab bar.
   ===================================================================== */
:root { --glass: rgba(15, 19, 28, 0.78); --glass-2: rgba(22, 27, 39, 0.9); --radius: 14px; --nav-w: 208px; --top-h: 60px; --stick: 1; }

/* ---------- intro */
.intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 40%, #121726 0%, #07090f 60%, #030407 100%); transition: opacity 0.6s ease, visibility 0.6s; }
.intro.out { opacity: 0; visibility: hidden; }
.intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; text-align: center; }
.intro-logo { margin: 0; display: flex; flex-direction: column; align-items: center; font: 900 clamp(72px, 16vw, 168px)/0.82 var(--f-display); text-transform: uppercase; letter-spacing: 0.02em; }
.intro-logo span { display: block; animation: logo-in 1s cubic-bezier(0.2, 0.9, 0.2, 1) both; }
.intro-logo .il-dark { color: var(--paper); text-shadow: 0 0 40px rgba(235, 229, 214, 0.15); }
.intro-logo .il-bags { color: var(--loot); animation-delay: 0.18s; text-shadow: 0 0 60px rgba(247, 147, 26, 0.45); position: relative; }
.intro-logo .il-bags::after { content: 'BAGS'; position: absolute; inset: 0; color: #00f0ff; mix-blend-mode: screen; opacity: 0; animation: glitch 2.6s steps(1) 1.2s infinite; }
@keyframes logo-in { from { opacity: 0; transform: translateY(24px) scale(0.96); filter: blur(10px); letter-spacing: 0.3em; } to { opacity: 1; transform: none; filter: none; } }
@keyframes glitch { 0%, 92%, 100% { opacity: 0; transform: none; } 93% { opacity: 0.8; transform: translate(-4px, 1px); clip-path: inset(10% 0 55% 0); } 95% { opacity: 0.7; transform: translate(3px, -2px); clip-path: inset(60% 0 10% 0); } }
.intro-tag { margin: 0; color: var(--dust); letter-spacing: 0.3em; text-transform: uppercase; font-size: 13px; animation: logo-in 1s 0.4s both; }
.intro-bar { width: min(320px, 70vw); height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-top: 18px; }
.intro-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--loot), #ffd166); box-shadow: 0 0 16px var(--loot); }
.intro-step { margin: 0; min-height: 1.4em; font: 500 12px/1.4 var(--f-num); color: var(--dust); letter-spacing: 0.08em; }
.intro-go { margin-top: 6px; padding: 16px 44px; font-size: 17px; animation: pulse-go 1.6s ease-in-out infinite; }
@keyframes pulse-go { 50% { box-shadow: 0 0 0 10px rgba(247, 147, 26, 0), 0 10px 40px -8px rgba(247, 147, 26, 0.9); } }
body:not(.ready) #lobby { opacity: 0; }
body.ready #lobby { animation: menu-in 0.6s ease both; }
@keyframes menu-in { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }

/* ---------- menu frame */
.menu.screen { display: grid; grid-template-columns: calc(var(--nav-w) + var(--safe-l)) 1fr; grid-template-rows: calc(var(--top-h) + var(--safe-t)) 1fr; background: linear-gradient(90deg, rgba(7, 9, 15, 0.96) 0%, rgba(7, 9, 15, 0.88) 45%, rgba(7, 9, 15, 0.55) 100%); overflow: hidden; }
.topbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: var(--safe-t) calc(16px + var(--safe-r)) 0 calc(18px + var(--safe-l)); border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: rgba(7, 9, 15, 0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.tb-brand { font: 900 26px/1 var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; }
.tb-brand b { color: var(--loot); margin-inline-start: 4px; }
.tb-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tb-right > .tb-chip, .tb-right > .tb-online { flex-shrink: 0; }
.tb-chip { white-space: nowrap; display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--glass); cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.tb-chip:hover { border-color: var(--dust); }
.tb-chip .tb-k { font: 600 10px/1 var(--f-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dust); }
.tb-chip b { font-size: 15px; }
.tb-chip.money b { color: var(--paper); }
.tb-chip.shop b { color: #b5e48c; }
.tb-chip.shop { flex-direction: row; gap: 8px; } /* not the .shop page layout */
.tb-chip.pop { animation: chip-pop 0.6s ease; }
@keyframes chip-pop { 30% { transform: scale(1.12); border-color: #b5e48c; box-shadow: 0 0 24px -4px #b5e48c; } }
.topbar .lang-pick { position: static; }

.menu-nav { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px calc(14px + var(--safe-b)) calc(10px + var(--safe-l)); border-inline-end: 1px solid rgba(255, 255, 255, 0.06); background: rgba(7, 9, 15, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow-y: auto; }
.nav-btn { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--dust); font-weight: 600; text-align: start; transition: background 0.15s, color 0.15s; }
.nav-btn svg { width: 22px; height: 22px; flex: none; }
.nav-btn:hover { background: rgba(255, 255, 255, 0.04); color: var(--paper); }
.nav-btn[aria-current='true'] { background: linear-gradient(90deg, rgba(247, 147, 26, 0.16), rgba(247, 147, 26, 0.02)); color: var(--paper); box-shadow: inset 3px 0 0 var(--loot); }
.nav-btn[aria-current='true'] svg { color: var(--loot); }
.nav-badge { position: absolute; top: 6px; inset-inline-start: 30px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--blood); color: #fff; font: 700 10px/16px var(--f-num); font-style: normal; text-align: center; }

.pages { overflow-y: auto; overscroll-behavior: contain; padding: 22px calc(24px + var(--safe-r)) calc(40px + var(--safe-b)) 24px; scroll-behavior: smooth; }
.page { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; animation: page-in 0.35s ease both; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sec-h { margin: 6px 0 0; font: 800 26px/1.1 var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- play page */
.hero { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: center; padding: 18px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius); background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--r, #f7931a) 18%, transparent), transparent 60%), var(--glass); }
.hero-look { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hero-look canvas { width: 200px; height: 230px; cursor: pointer; }
.hero-look .lt-name { margin: 0; font: 700 15px/1.2 var(--f-ui); text-align: center; }
.hero-locker { padding: 8px 14px; font-size: 13px; margin-top: 4px; }
.hero-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hero-main input#name { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.35); font: 700 20px/1.2 var(--f-ui); }
.hero .rank-card { padding: 0; border: 0; background: none; }
.pf-ach { align-self: flex-start; padding: 8px 12px; font-size: 13px; }

.modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mode-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--glass); text-align: start; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.mode-card:hover { transform: translateY(-2px); border-color: #3a4459; }
.mode-card[aria-checked='true'] { border-color: var(--loot); box-shadow: 0 0 0 1px var(--loot), 0 12px 30px -16px var(--loot); background: linear-gradient(160deg, rgba(247, 147, 26, 0.14), transparent 60%), var(--glass-2); }
.mc-ico { grid-row: 1 / 4; font-size: 26px; line-height: 1; align-self: center; }
.mode-card b { font-size: 15px; }
.mc-sub { font-size: 12px; color: var(--dust); line-height: 1.3; }
.mc-meta { font: 500 11px/1.2 var(--f-num); color: var(--dust); opacity: 0.85; }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--exit); margin-inline-end: 3px; box-shadow: 0 0 8px var(--exit); }
.mode-card.k-team .mc-meta { color: #7dd3fc; }
.mode-card.k-br .mc-meta { color: #fca5a5; }

.play-dock { position: sticky; bottom: -40px; z-index: 2; display: flex; flex-direction: column; gap: 6px; padding: 12px 0 14px; background: linear-gradient(0deg, rgba(7, 9, 15, 0.98) 60%, rgba(7, 9, 15, 0)); }
.play-dock #play { padding: 20px; font-size: 19px; letter-spacing: 0.12em; border-radius: 12px; background: linear-gradient(90deg, #f7931a, #ffb347); box-shadow: 0 14px 40px -14px rgba(247, 147, 26, 0.9); }

/* ---------- shop */
.shop { display: flex; flex-direction: column; gap: 16px; }
.shop-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.shop-bal { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--dust); }
.shop-bal b { color: #b5e48c; font-size: 22px; }
.packs-wrap .lk-packs { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.shop-tabs { max-width: 420px; }
.box-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.box-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(100% 70% at 50% 0%, color-mix(in srgb, var(--r) 20%, transparent), transparent 65%), var(--glass); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
.box-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px var(--r); }
.box-card.t7, .box-card.t8, .box-card.t9 { border-color: color-mix(in srgb, var(--r) 55%, transparent); }
.box-card.t9 { background: radial-gradient(100% 70% at 50% 0%, rgba(0, 240, 255, 0.22), transparent 65%), linear-gradient(160deg, rgba(247, 147, 26, 0.12), transparent), var(--glass-2); }
.box-card.t9::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--spin, 0deg), #00f0ff, #ff3dd4, #ffd166, #7dff9b, #00f0ff); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: prism-spin 4s linear infinite; pointer-events: none; }
.box-art { display: grid; place-items: center; height: 138px; }
.box-art svg { animation: box-float 3.2s ease-in-out infinite; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5)); }
.box-card:hover .box-art svg { animation-duration: 1.2s; }
@keyframes box-float { 50% { transform: translateY(-6px) rotate(-1.5deg); } }
.box-card h4 { margin: 0; font: 800 18px/1.1 var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; }
.box-price { margin: -4px 0 0; font-size: 22px; font-weight: 600; color: var(--paper); }
.held-badge { position: absolute; top: 10px; inset-inline-end: 10px; padding: 3px 8px; border-radius: 999px; background: var(--exit); color: #06120c; font: 700 12px/1.2 var(--f-num); }
.odds-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; gap: 1px; }
.odds-more summary { cursor: pointer; font-size: 12px; color: var(--dust); }
.odds-more .odds { margin: 8px 0; }
.qty { display: grid; grid-template-columns: 36px 1fr 36px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.qty button { border: 0; background: var(--tarp-2); font-size: 18px; }
.qty input { width: 100%; min-width: 0; border: 0; background: rgba(0, 0, 0, 0.3); text-align: center; font: 600 16px/1 var(--f-num); -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.qty-chips button { flex: 1; padding: 4px 0; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--dust); font: 600 11px/1.2 var(--f-num); }
.qty-chips button[aria-pressed='true'] { border-color: var(--paper); color: var(--paper); }
.box-go { padding: 13px 10px; font-size: 14px; }
.limited .lim-row, .lim-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.lim-card { flex: none; width: 128px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border: 1px solid color-mix(in srgb, var(--r) 60%, transparent); border-radius: 12px; background: radial-gradient(100% 80% at 50% 0%, color-mix(in srgb, var(--r) 22%, transparent), transparent 70%), var(--glass); text-align: center; }
.lim-card img { width: 70px; height: 90px; object-fit: contain; }
.lim-card b { font-size: 12px; line-height: 1.2; }
.lim-card span { font-size: 11px; color: var(--dust); }
.lim-card.out { opacity: 0.55; }
.lim-bar { width: 100%; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.lim-bar i { display: block; height: 100%; background: var(--r); }

/* ---------- the opening show */
.opening { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: calc(20px + var(--safe-t)) 16px calc(20px + var(--safe-b)); background: radial-gradient(80% 70% at 50% 42%, color-mix(in srgb, var(--glow, #283042) 26%, rgba(4, 6, 10, 0.96)), rgba(2, 3, 6, 0.98)); transition: background 0.3s; overflow-y: auto; }
.op-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.op-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(1100px, 100%); }
.op-box svg { filter: drop-shadow(0 0 40px var(--glow, #ffffff55)); }
.opening.charging .op-box { animation: charge 1.4s ease-in infinite; }
@keyframes charge { 0% { transform: rotate(0) scale(1); } 20% { transform: rotate(-3deg) scale(1.02); } 40% { transform: rotate(3deg) scale(1.04); } 60% { transform: rotate(-5deg) scale(1.06) translateY(-4px); } 80% { transform: rotate(6deg) scale(1.08) translateY(-6px); } 100% { transform: rotate(0) scale(1.1) translateY(-8px); } }
.op-kicker { margin: 0; font: 800 22px/1 var(--f-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dust); }
.op-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; width: 100%; perspective: 900px; }
.op-grid.dense { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.op-grid.single { display: flex; justify-content: center; }
.op-card { position: relative; aspect-ratio: 3 / 4.2; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1.2); transform: rotateY(180deg) scale(0.9); }
.op-card.big { width: min(300px, 76vw); }
.op-card.flip { transform: rotateY(0) scale(1); }
.op-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; text-align: center; }
.op-back { transform: rotateY(180deg); background: linear-gradient(160deg, #1b2130, #0b0e16); border: 1px solid var(--line); }
.op-front { border: 1.5px solid var(--r); background: radial-gradient(100% 70% at 50% 20%, color-mix(in srgb, var(--r) 35%, transparent), transparent 70%), #0b0e16; box-shadow: 0 0 30px -8px var(--r), inset 0 0 22px -12px var(--r); }
.op-front img { width: 70%; max-height: 58%; object-fit: contain; }
.op-card.big .op-front img, .op-live { width: 100%; height: 64%; }
.op-rar { margin: 0; font: 700 10px/1.2 var(--f-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--r); }
.op-name { margin: 0; font: 700 13px/1.15 var(--f-ui); }
.op-card.big .op-name { font-size: 22px; }
.op-card.big .op-rar { font-size: 13px; }
.op-new { font: 700 10px/1 var(--f-ui); color: var(--exit); letter-spacing: 0.1em; text-transform: uppercase; }
.op-dup { font: 600 10px/1 var(--f-num); color: #b5e48c; }
.op-serial { font: 700 11px/1 var(--f-num); color: #00f0ff; text-shadow: 0 0 8px #00f0ff; }
.op-card.r-mythic .op-front, .op-card.r-exotic .op-front { animation: premium-breathe 1.8s ease-in-out infinite; }
.op-card.r-exotic .op-front::before { content: ''; position: absolute; inset: -1.5px; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--spin, 0deg), #00f0ff, #ff3dd4, #ffd166, #7dff9b, #00f0ff); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: prism-spin 3s linear infinite; }
.op-actions { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.op-tally { margin: 0; font: 600 13px/1.4 var(--f-num); text-align: center; }
.op-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.opening.open.r-exotic { animation: screen-shake 0.5s ease; }
@keyframes screen-shake { 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-3px, 2px); } 80% { transform: translate(2px, -1px); } }

/* ---------- inventory */
.inv { display: flex; flex-direction: column; gap: 14px; }
.inv-card { padding: 16px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius); background: var(--glass); display: flex; flex-direction: column; gap: 10px; }
.inv-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.inv-total { font-size: 26px; }
.inv-coins { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.inv-coins li { display: grid; grid-template-columns: 12px 80px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.inv-coins .dot { width: 12px; height: 12px; border-radius: 50%; }
.inv-usd { color: var(--paper); font-weight: 600; }
.inv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.inv-stat { padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; gap: 2px; }
.inv-stat b { font-size: 20px; }
.inv-stat span { font-size: 12px; color: var(--dust); }
.inv-boxes { display: flex; gap: 8px; overflow-x: auto; }
.inv-box { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: transparent; }
.inv-box b { font-size: 12px; }
.inv-box span { font: 700 12px/1 var(--f-num); color: var(--exit); }

/* ---------- swap */
.swap { display: block; }
.swap > .sec-h { margin-bottom: 14px; }
.swap > .sec-h { grid-column: 1 / -1; }
.swap-card { position: relative; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius); background: var(--glass); display: flex; flex-direction: column; gap: 10px; }
.swap-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.swap-row { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 8px; font-size: 13px; color: var(--dust); }
.swap-row select, .swap-amt input { width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.35); color: var(--paper); font: 600 15px/1.2 var(--f-ui); }
.swap-amt { display: grid; gap: 6px; }
.swap-amt input { font: 600 26px/1.2 var(--f-num); }
.swap-pcts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.swap-pcts button { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--dust); font: 600 12px/1 var(--f-num); }
.swap-pcts button[aria-pressed='true'] { border-color: var(--paper); color: var(--paper); }
.swap-flip { align-self: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--tarp-2); font-size: 18px; transition: transform 0.2s; }
.swap-flip:hover { transform: rotate(180deg); }
.swap-out { margin: 0; min-height: 1.6em; font-size: 16px; }
.avnu-mark { font: 800 12px/1 var(--f-ui); letter-spacing: 0.18em; padding: 4px 8px; border-radius: 6px; background: linear-gradient(90deg, #ff6b35, #f7931a); color: #0b0e16; }

/* ---------- chat */
.chat { display: flex; flex-direction: column; gap: 10px; height: calc(100dvh - var(--top-h) - 120px); }
.chat-list { flex: 1; list-style: none; margin: 0; padding: 12px; overflow-y: auto; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius); background: var(--glass); display: flex; flex-direction: column; gap: 10px; }
.chat-list li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; }
.chat-list li.empty { display: block; color: var(--dust); text-align: center; margin: auto; }
.chat-list li.me .chat-who b { color: var(--loot); }
.chat-list li.bot { opacity: 0.8; }
.chat-who { margin: 0; display: flex; gap: 6px; align-items: baseline; font-size: 13px; }
.chat-who time { color: var(--dust); font: 500 10px/1 var(--f-num); margin-inline-start: auto; }
.chat-tt { font-size: 10px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; }
.chat-text { margin: 2px 0 0; overflow-wrap: anywhere; }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.chat-form input { padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0, 0, 0, 0.35); }
.chat-form .cta { padding: 13px 18px; }

/* ---------- settings */
.settings { display: flex; flex-direction: column; gap: 14px; }
.set-card { padding: 16px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius); background: var(--glass); display: flex; flex-direction: column; gap: 12px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.set-row > div p { margin: 0; }
.set-row input[type='range'] { width: min(220px, 50vw); accent-color: var(--loot); }
.switch { position: relative; width: 44px; height: 24px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 12px; background: var(--line); transition: background 0.2s; pointer-events: none; }
.switch i::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); transition: transform 0.2s; }
.switch input:checked + i { background: var(--loot); }
.switch input:checked + i::after { transform: translateX(20px); }
[dir='rtl'] .switch input:checked + i::after { transform: translateX(-20px); }
.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.lang-grid button { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: transparent; }
.lang-grid button[aria-pressed='true'] { border-color: var(--loot); color: var(--loot); }
.settings + .gore, .page[data-page='settings'] .gore { padding: 14px 16px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius); background: var(--glass); }

/* ---------- locker additions */
.lk-wtabs { margin-bottom: 10px; }
.lk-wtabs button[aria-pressed='true'] { border-color: var(--paper); color: var(--paper); }
.lk-note { margin: 10px 0 4px; }
#lk-to-shop { align-self: flex-start; padding: 12px 18px; }
.lk-state.lim { color: #00f0ff; }
.lk-state.locked { color: var(--dust); }
.lk-supply { margin: 0; font: 600 12px/1.2 var(--f-num); color: #00f0ff; }

/* ---------- touch settings */
.touch .stick { transform: scale(var(--stick)); }
.touch.lefty #tz-left { order: 2; }
.touch.lefty { flex-direction: row-reverse; }

/* ---------- reduced motion */
.no-motion *, .no-motion *::before, .no-motion *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }

/* ---------- phones: bottom tab bar */
@media (max-width: 760px) {
  :root { --top-h: 54px; }
  .menu.screen { grid-template-columns: 1fr; grid-template-rows: calc(var(--top-h) + var(--safe-t)) 1fr calc(62px + var(--safe-b)); }
  .tb-brand { font-size: 20px; }
  .tb-chip { padding: 6px 10px; gap: 6px; }
  .tb-chip .tb-k { display: none; }
  .tb-chip b { font-size: 14px; }
  .topbar .lang-pick select { max-width: 92px; }
  .menu-nav { grid-row: 3; flex-direction: row; justify-content: space-around; gap: 0; padding: 4px 4px var(--safe-b); border-inline-end: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); overflow-x: auto; background: rgba(7, 9, 15, 0.92); }
  .nav-btn { flex: 1 0 auto; flex-direction: column; gap: 3px; padding: 8px 6px; font-size: 10px; border-radius: 8px; min-width: 50px; }
  .nav-btn svg { width: 22px; height: 22px; }
  .nav-btn[aria-current='true'] { box-shadow: inset 0 2px 0 var(--loot); background: rgba(247, 147, 26, 0.08); }
  .nav-badge { top: 3px; inset-inline-start: calc(50% + 4px); }
  .pages { padding: 14px 16px 24px; }
  .hero { grid-template-columns: 110px 1fr; gap: 12px; padding: 12px; }
  .hero-look canvas { width: 104px; height: 124px; }
  .hero-main input#name { font-size: 17px; padding: 10px 12px; }
  .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mode-card { padding: 10px; }
  .mc-sub { display: none; }
  .box-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .box-card { padding: 10px; }
  .box-art { height: 100px; }
  .box-art svg { width: 96px; height: 96px; }
  .qty-chips button:nth-child(n + 4) { display: none; }
  .play-dock { bottom: -24px; }
  .chat { height: calc(100dvh - var(--top-h) - 62px - 90px); }
  .sec-h { font-size: 22px; }
}
@media (max-width: 380px) {
  .box-grid { grid-template-columns: 1fr; }
  .tb-chip.shop { display: none; }
}
.intro-center::before { content: ''; position: absolute; inset: -30% -20%; z-index: -1; background: radial-gradient(closest-side, rgba(7, 9, 15, 0.92), rgba(7, 9, 15, 0)); pointer-events: none; }
@media (max-width: 760px) {
  .op-grid, .op-grid.dense { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
  .op-name { font-size: 11px; }
  .op-face { padding: 5px; }
  .op-btns .cta, .op-btns .ghost { padding: 11px 12px; font-size: 13px; }
  .nav-btn { flex: 1 1 0; min-width: 0; }
  .nav-btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.box-guar { margin: 0; font: 700 11px/1.3 var(--f-ui); color: #00f0ff; letter-spacing: 0.04em; text-shadow: 0 0 10px rgba(0, 240, 255, 0.5); }

/* ---------- deathmatch / guns + lasers */
.spect.respawn .sp-btn, .spect.respawn .sp-done { display: none; }
.spect.respawn { color: var(--paper); font-weight: 700; letter-spacing: 0.04em; }
.gl-shop {
  position: absolute;
  right: calc(16px + var(--safe-r));
  bottom: calc(16px + var(--safe-b));
  display: flex;
  align-items: stretch;
  gap: 6px;
  pointer-events: auto;
}
.gl-cr {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding: 6px 12px;
  border: 1px solid rgba(61, 220, 151, 0.4);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20, 40, 32, 0.85), rgba(7, 9, 15, 0.85));
  box-shadow: 0 0 18px rgba(61, 220, 151, 0.15) inset;
}
.gl-cr i { font: 700 10px/1 var(--f-ui); font-style: normal; letter-spacing: 0.18em; color: #3ddc97; }
.gl-cr b { font: 800 22px/1.1 var(--f-num); color: #eafff5; text-shadow: 0 0 12px rgba(61, 220, 151, 0.6); }
.gl-btn {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  min-width: 108px;
  padding: 7px 22px 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(10, 13, 21, 0.86);
  color: var(--paper);
  font: 600 12px/1.2 var(--f-ui);
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s, opacity 0.12s;
}
.gl-btn:hover { transform: translateY(-2px); border-color: #3ddc97; box-shadow: 0 6px 20px rgba(61, 220, 151, 0.2); }
.gl-btn:active { transform: translateY(0) scale(0.97); }
.gl-btn .gl-ico { grid-row: 1 / 3; font-size: 22px; line-height: 1; color: #3ddc97; text-shadow: 0 0 10px rgba(61, 220, 151, 0.7); }
.gl-btn[data-buy='turret'] .gl-ico { color: #4cc9f0; text-shadow: 0 0 10px rgba(76, 201, 240, 0.7); }
.gl-btn[data-buy='mine'] .gl-ico { color: #ff4d5e; text-shadow: 0 0 10px rgba(255, 77, 94, 0.8); }
.gl-btn em { font: 700 11px/1 var(--f-num); font-style: normal; color: var(--dust); }
.gl-btn em::after { content: ' CR'; font-size: 9px; opacity: 0.7; }
.gl-btn kbd { position: absolute; top: 4px; right: 6px; font: 600 9px/1 var(--f-num); opacity: 0.55; }
.gl-btn.poor, .tbuy.poor { opacity: 0.45; }
.gl-btn.poor:hover { transform: none; border-color: var(--line); box-shadow: none; }
.tbuy { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 56px; height: 56px; }
.tbuy span { font-size: 20px; line-height: 1; color: #3ddc97; }
.tbuy.b2 span { color: #4cc9f0; }
.tbuy.b3 span { color: #ff4d5e; }
.tbuy em { font: 700 10px/1 var(--f-num); font-style: normal; color: var(--dust); }
.tbuy.b1 { left: calc(16px + var(--safe-l)); bottom: calc(64% + 6px); }
.tbuy.b2 { left: calc(80px + var(--safe-l)); bottom: calc(64% + 6px); }
.tbuy.b3 { left: calc(144px + var(--safe-l)); bottom: calc(64% + 6px); }
body.gl-on .tbuy { display: flex; }
.tbuy.b4 { left: calc(208px + var(--safe-l)); bottom: calc(64% + 6px); }
.tbuy.b4 span { color: #ffd166; }
body.gl-on .tbuy.b4 { display: none; }
body.gl-on.z-on .tbuy.b4 { display: flex; }
body.touch-on .gl-shop .gl-btn { display: none; }
body.touch-on .gl-shop { top: calc(14px + var(--safe-t)); bottom: auto; right: calc(176px + var(--safe-r)); }
body.touch-on .gl-cr { padding: 4px 10px; }
body.touch-on .gl-cr b { font-size: 16px; }
@media (max-height: 500px) {
  .tbuy { width: 50px; height: 50px; }
  .tbuy.b1 { left: calc(176px + var(--safe-l)); }
  .tbuy.b2 { left: calc(232px + var(--safe-l)); }
  .tbuy.b3 { left: calc(288px + var(--safe-l)); }
}
@media (max-width: 560px) and (min-height: 501px) {
  body.touch-on .gl-shop { top: calc(192px + var(--safe-t)); right: calc(16px + var(--safe-r)); }
}

/* weapon skins: a landscape still, as wide as the card allows */
img.wimg { width: 100% !important; max-width: 160px; height: auto !important; aspect-ratio: 3 / 2; object-fit: contain; margin: 8px auto; display: block; }

.bulk-note { margin: 2px 0 6px; font-size: 11px; color: var(--dust); text-align: center; }
.bulk-note.on { color: #3ddc97; font-weight: 700; }
.box-go s { opacity: 0.55; font-weight: 500; margin-right: 2px; }

/* live player count and ping */
.tb-online { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgba(61, 220, 151, 0.35); border-radius: 999px; background: rgba(61, 220, 151, 0.08); font: 700 12px/1 var(--f-num); color: #bff5dc; white-space: nowrap; }
.tb-online .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 8px #3ddc97; display: inline-block; }
.ping-chip { font: 700 11px/1 var(--f-num); letter-spacing: 0.04em; opacity: 0.9; }
.ping-chip.good { color: #3ddc97; }
.ping-chip.ok { color: #ffd166; }
.ping-chip.bad { color: #ff6b6b; }
@media (max-width: 560px) { .tb-online { padding: 5px 8px; font-size: 11px; } }

.dep-have { margin: -2px 0 0; font: 600 12px/1.4 var(--f-num); color: #bff5dc; }
.dep-have.empty { color: #ff9a9a; }

/* getting started checklist */
.starter { min-width: 0; max-width: 100%; box-sizing: border-box; margin: 4px 0 18px; padding: 16px 18px; border: 1px solid rgba(247, 147, 26, 0.35); border-radius: 14px; background: linear-gradient(135deg, rgba(247, 147, 26, 0.10), rgba(7, 9, 15, 0.6) 60%); }
.starter-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.starter-h { margin: 0; font: 800 18px/1.1 var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; }
.starter-prog { font-size: 13px; color: var(--dust); }
.starter-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.starter-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(7, 9, 15, 0.45); }
.starter-steps li.now { background: rgba(247, 147, 26, 0.12); outline: 1px solid rgba(247, 147, 26, 0.45); }
.starter-steps li.next { opacity: 0.55; }
.st-dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); font: 800 13px/1 var(--f-num); }
.starter-steps li.done .st-dot { background: #3ddc97; border-color: #3ddc97; color: #0b0e16; }
.starter-steps li.now .st-dot { background: #f7931a; border-color: #f7931a; color: #0b0e16; }
.st-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-body b { font-size: 14px; }
.st-body span { font-size: 12px; color: var(--dust); line-height: 1.4; overflow-wrap: anywhere; }
.starter-steps li.done .st-body b { text-decoration: line-through; opacity: 0.7; }
.st-go { padding: 9px 16px; font-size: 13px; white-space: nowrap; }
@media (max-width: 560px) {
  .starter-steps li { grid-template-columns: 28px minmax(0, 1fr); }
  .st-go { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 560px) {
  .tb-right { gap: 6px; }
  .tb-brand { font-size: 17px; }
  .topbar .lang-pick > span { display: none; }
  .topbar .lang-pick select { max-width: 76px; }
}

/* touch: one big Fire button (auto-aims), Dash beside it */
.tbtn.fire { right: calc(28px + var(--safe-r)); bottom: calc(28px + var(--safe-b)); width: 108px; height: 108px; border: 2px solid rgba(255, 120, 80, 0.7); background: radial-gradient(circle at 50% 40%, rgba(255, 110, 70, 0.55), rgba(140, 20, 30, 0.75)); color: #fff; font: 900 16px/1 var(--f-display); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 0 24px -6px rgba(255, 90, 60, 0.8); touch-action: none; user-select: none; -webkit-user-select: none; }
.tbtn.fire.on { transform: scale(0.93); background: radial-gradient(circle at 50% 40%, rgba(255, 170, 90, 0.8), rgba(200, 30, 40, 0.9)); }
@media (max-height: 500px) {
  .tbtn.fire { width: 96px; height: 96px; right: calc(22px + var(--safe-r)); bottom: calc(18px + var(--safe-b)); }
  .tbtn.dash { right: calc(130px + var(--safe-r)); bottom: calc(18px + var(--safe-b)); }
  .tbtn.bagbtn { right: calc(30px + var(--safe-r)); bottom: calc(126px + var(--safe-b)); }
}
.rotate { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: rgba(5, 7, 12, 0.94); backdrop-filter: blur(8px); }
.rotate[hidden] { display: none; }
.rot-ico { font-size: 56px; animation: rot-turn 1.8s ease-in-out infinite; }
@keyframes rot-turn { 0%, 30% { transform: rotate(0deg); } 60%, 100% { transform: rotate(-90deg); } }
.rot-t { margin: 0; font: 800 22px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: 0.04em; }
.rot-s { margin: 0; max-width: 300px; color: var(--dust); font-size: 14px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .rot-ico { animation: none; } }

.prep-actions .cta.start { background: linear-gradient(180deg, #3ddc97, #1f9e6a); color: #06120c; }

.prep-count.wait { font-size: clamp(28px, 6vw, 56px); line-height: 1.05; }

/* result card: never taller than the screen; two columns on wide screens */
.overlay { padding-block: 16px; }
.card.result { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 900px) {
  .card.result { width: min(54rem, 100%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; row-gap: 10px; align-items: start; }
  .card.result > .res-kicker, .card.result > .res-amount, .card.result > .res-detail, .card.result > .res-actions { grid-column: 1 / -1; }
  .card.result > .res-rank { grid-column: 1; }
  .card.result > .res-rewards { grid-column: 2; grid-row: 4 / span 2; }
  .card.result > .res-ach { grid-column: 1; }
  .card.result > .res-rank:only-of-type { grid-column: 1 / -1; }
}
@media (max-height: 820px) {
  .res-amount { font-size: clamp(44px, 9vh, 72px); }
  .card.result { padding: 20px 20px 18px; }
}

/* ---------- friends, messages, guilds */
.social { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.so-tabs { align-self: flex-start; }
.so-tabs button { padding: 8px 14px; }
.so-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--blood); color: #fff; font: 800 11px/1 var(--f-num); font-style: normal; margin-inline-start: 4px; }
.so-body { display: flex; flex-direction: column; gap: 10px; }
.so-search input { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--glass); color: var(--paper); font-size: 15px; }
.so-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.so-list > .eyebrow { margin: 8px 2px 0; }
.so-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; background: var(--glass); }
.so-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit; text-align: start; cursor: pointer; }
.so-name { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.so-name b { font-size: 14px; }
.so-name small { flex-basis: 100%; color: var(--dust); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-g { font-style: normal; font-weight: 800; font-size: 11px; color: #9bd1ff; }
.so-tt { font-size: 10px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; }
.so-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #525a6e; display: inline-block; }
.so-dot.lobby { background: #3ddc97; box-shadow: 0 0 8px #3ddc97; }
.so-dot.waiting { background: #ffd166; box-shadow: 0 0 8px #ffd166; }
.so-dot.raid { background: #ff6b6b; box-shadow: 0 0 8px #ff6b6b; }
.so-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.so-acts .sm, .inv-acts .sm { padding: 6px 10px; font-size: 12px; }
.so-tag { font-size: 11px; font-weight: 700; color: var(--dust); padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; }
.so-tag.ok { color: #3ddc97; border-color: rgba(61, 220, 151, 0.4); }
.so-empty { color: var(--dust); text-align: center; padding: 18px; list-style: none; }
.so-row.conv .so-who { position: relative; }
.so-thread { display: flex; flex-direction: column; gap: 8px; height: calc(100dvh - var(--top-h) - 190px); min-height: 320px; }
.so-th-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.so-th-head .so-who { flex: 0 1 auto; }
.so-th-head small { color: var(--dust); font-size: 12px; margin-inline-start: 6px; }
.so-msgs { flex: 1; list-style: none; margin: 0; padding: 12px; overflow-y: auto; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius); background: var(--glass); display: flex; flex-direction: column; gap: 8px; }
.so-msgs li { align-self: flex-start; max-width: 78%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: rgba(255, 255, 255, 0.06); }
.so-msgs li.me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: rgba(247, 147, 26, 0.18); }
.so-msgs li p { margin: 0; overflow-wrap: anywhere; font-size: 14px; line-height: 1.4; }
.so-msgs li time { display: block; margin-top: 2px; font: 500 10px/1 var(--f-num); color: var(--dust); text-align: end; }
.so-msgs li.so-empty { align-self: center; background: none; }
.gd-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid rgba(155, 209, 255, 0.35); border-radius: 14px; background: linear-gradient(135deg, rgba(155, 209, 255, 0.10), rgba(7, 9, 15, 0.5) 60%); }
.gd-head { display: flex; align-items: center; gap: 12px; }
.gd-head h3 { margin: 0; font: 800 20px/1.1 var(--f-display); text-transform: uppercase; }
.gd-tag { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 6px; border-radius: 10px; background: linear-gradient(180deg, #2a4a6e, #152538); border: 1px solid #9bd1ff; color: #dff0ff; font: 900 15px/1 var(--f-num); letter-spacing: 0.04em; }
.gd-tag.sm { min-width: 38px; height: 30px; font-size: 12px; border-radius: 8px; }
.gd-create { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--glass); }
.gd-create summary { cursor: pointer; font-weight: 800; }
.gd-req { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 4px; font-size: 13px; color: #ff9a9a; }
.gd-req li::before { content: '✕ '; }
.gd-req li.ok { color: #3ddc97; }
.gd-req li.ok::before { content: '✓ '; }
.gd-form { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.gd-form input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(7, 9, 15, 0.6); color: var(--paper); }
.gd-form input:nth-child(3), .gd-form button { grid-column: 1 / -1; }
.dlg-profile { width: min(30rem, calc(100vw - 24px)); }
.pf-top { display: flex; gap: 14px; align-items: center; }
.pf-fig { width: 90px; height: 124px; flex: none; }
.pf-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-name { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 20px; }
.pf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.pf-stats div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.pf-stats b { font-size: 17px; }
.pf-stats span { font-size: 11px; color: var(--dust); text-transform: uppercase; letter-spacing: 0.06em; }
.pf-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.invites { position: fixed; top: calc(70px + var(--safe-t)); right: calc(16px + var(--safe-r)); z-index: 45; display: flex; flex-direction: column; gap: 8px; width: min(320px, calc(100vw - 32px)); pointer-events: none; }
.inv-card { pointer-events: auto; padding: 12px 14px; border: 1px solid rgba(61, 220, 151, 0.5); border-radius: 12px; background: rgba(10, 16, 14, 0.95); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.8); animation: inv-in 0.25s ease; }
.inv-card p { margin: 0 0 4px; }
.inv-acts { display: flex; gap: 6px; margin-top: 6px; }
@keyframes inv-in { from { transform: translateY(-8px); opacity: 0; } }
.mc-wait { grid-column: 2; margin-top: 4px; font: 700 11px/1.2 var(--f-num); color: #ffd166; white-space: nowrap; }
.mode-card:has(.mc-wait) .mc-ico { grid-row: 1 / 5; }
.table-btn .state.wait { color: #ffd166; }
@media (max-width: 560px) {
  .so-row { flex-wrap: wrap; }
  .so-acts { width: 100%; justify-content: flex-start; }
  .gd-form { grid-template-columns: 1fr; }
  .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gd-create-h { margin: 0; font-weight: 800; }
/* the result buttons stay in view at the bottom of the card */
.card.result > .res-actions { position: sticky; bottom: -22px; margin: 4px -24px -22px; padding: 12px 24px 16px; background: linear-gradient(180deg, rgba(20, 24, 34, 0), var(--tarp) 30%); z-index: 1; }
@media (max-height: 820px) { .card.result > .res-actions { bottom: -18px; margin: 4px -20px -18px; padding: 10px 20px 14px; } }

/* in-match menu (Esc / ❚❚) */
.pause-btn { position: absolute; top: calc(14px + var(--safe-t)); right: calc(16px + 150px + 10px + var(--safe-r)); width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: rgba(7, 9, 15, 0.72); color: var(--paper); font-size: 13px; letter-spacing: -2px; cursor: pointer; pointer-events: auto; }
.pause-btn:hover { border-color: var(--loot); }
@media (max-width: 720px) { .pause-btn { right: calc(16px + 96px + 8px + var(--safe-r)); width: 36px; height: 36px; } }
.pause { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 16px; background: rgba(5, 7, 12, 0.72); backdrop-filter: blur(6px); }
.pause[hidden] { display: none; }
.pause-card { width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--tarp); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; gap: 10px; }
.pause-card h2 { margin: 0; font: 800 28px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: 0.04em; }
.pause-card .eyebrow { margin: 0; }
.pause-card > .fine { margin: 0; line-height: 1.45; }
.pause-main, .pause-set { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.pause-main[hidden], .pause-set[hidden] { display: none; }
.pause-main > button { width: 100%; min-height: 46px; }
.pause-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pause-row button { min-height: 42px; }
.pause-row button[aria-pressed="false"] { opacity: 0.6; }
.pause-set > .ghost { align-self: flex-start; }
.pause-set .sec-h { display: none; }
.pause-set .set-card { padding: 12px; }
.pause-keys { text-align: center; margin: 0; }
button.danger { padding: 12px 16px; border: 1px solid rgba(255, 77, 94, 0.5); border-radius: 12px; background: rgba(255, 77, 94, 0.1); color: #ff8c97; font: 700 15px var(--f-ui); cursor: pointer; }
button.danger:hover, button.danger.armed { background: var(--blood); color: #fff; border-color: var(--blood); }
body.touch-on .pause-keys { display: none; }

/* guild chat */
.gd-tabs { margin: 4px 0 2px; }
.gd-chat { display: flex; flex-direction: column; gap: 8px; height: min(52dvh, 460px); min-height: 260px; }
.gd-chat .so-msgs li { max-width: 86%; }
.gd-from { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 2px; padding: 0; border: 0; background: none; color: var(--loot); font: 700 12px var(--f-ui); cursor: pointer; }
.gd-from:hover b { text-decoration: underline; }

/* shop: first top-up doubles */
.first-topup { margin: 0 0 10px; padding: 10px 14px; border: 1px solid rgba(61, 220, 151, 0.45); border-radius: 12px; background: rgba(61, 220, 151, 0.08); color: var(--exit); font-weight: 600; }

/* ------------------------------------------------------------ Nyx's tour */
.tour { position: fixed; inset: 0; z-index: 60; pointer-events: auto; opacity: 0; transition: opacity 0.35s; }
.tour.in { opacity: 1; }
.tour-spot { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(4, 6, 10, 0.72), 0 0 0 2px var(--loot), 0 0 32px 6px rgba(247, 147, 26, 0.45); transition: left 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.45s, height 0.45s; pointer-events: none; animation: spot-pulse 1.8s ease-in-out infinite; }
.tour-spot.none { left: 50% !important; top: 50% !important; width: 0 !important; height: 0 !important; box-shadow: 0 0 0 9999px rgba(4, 6, 10, 0.72); animation: none; }
@keyframes spot-pulse { 50% { box-shadow: 0 0 0 9999px rgba(4, 6, 10, 0.72), 0 0 0 3px var(--loot), 0 0 44px 10px rgba(247, 147, 26, 0.55); } }
.tour-card { position: fixed; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translateX(-50%); width: min(720px, calc(100vw - 24px)); display: grid; grid-template-columns: 170px 1fr; align-items: end; border: 1px solid rgba(247, 147, 26, 0.45); border-radius: 20px; background: linear-gradient(135deg, rgba(22, 27, 39, 0.97), rgba(10, 12, 18, 0.97)); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05); overflow: hidden; transition: top 0.4s, bottom 0.4s; }
.tour-card.top { bottom: auto; top: calc(18px + var(--safe-t)); }
.tour.in .tour-card { animation: tour-in 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.2); }
@keyframes tour-in { from { transform: translate(-50%, 40px); opacity: 0; } }
.tour-nyx { align-self: stretch; position: relative; background: radial-gradient(circle at 50% 40%, rgba(247, 147, 26, 0.18), transparent 70%); }
.tour-nyx svg { position: absolute; left: -6px; bottom: 0; width: 186px; height: auto; }
.tour-body { padding: 16px 18px 14px 6px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tour-who { margin: 0; display: flex; align-items: center; gap: 8px; font: 600 12px var(--f-num); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dust); }
.tour-who b { color: var(--loot); font: 900 20px/1 var(--f-display); letter-spacing: 0.08em; }
.tour-voice { margin-left: auto; border: 1px solid var(--line); border-radius: 999px; background: none; font-size: 14px; padding: 3px 9px; cursor: pointer; }
.tour-text { margin: 0; min-height: 4.4em; font-size: 16px; line-height: 1.5; color: var(--paper); }
.tour-art { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--dust); }
.tour-art[hidden] { display: none; }
.tour-art kbd, .ta-keys kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 6px; background: var(--tarp-2); color: var(--paper); font: 600 12px var(--f-num); }
.ta-keys { display: inline-flex; gap: 3px; }
.ta-stick { font-size: 26px; color: var(--paper); }
.ta-fire { padding: 6px 12px; border-radius: 999px; background: var(--blood); color: #fff; font: 700 12px var(--f-ui); }
.ta-exit { width: 26px; height: 26px; border-radius: 50%; border: 3px dashed var(--exit); animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tour-dots { display: flex; gap: 5px; }
.tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background 0.3s, width 0.3s; }
.tour-dots i.past { background: rgba(247, 147, 26, 0.5); }
.tour-dots i.on { width: 20px; border-radius: 4px; background: var(--loot); }
.tour-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tour-actions .tour-grow { flex: 1; }
.tour-actions .cta, .tour-actions .ghost { padding: 10px 18px; }
.tour-actions .tour-skip { padding: 8px 12px; font-size: 13px; opacity: 0.85; }
.tour-skip { color: var(--dust); }
/* Nyx: breathing, blinking */
.nyx-svg .nx-body { animation: nx-breathe 4.2s ease-in-out infinite; transform-origin: 120px 300px; }
.nyx-svg .nx-head { animation: nx-sway 7s ease-in-out infinite; transform-origin: 120px 170px; }
.nyx-svg .nx-lids { transform: scaleY(0); transform-origin: 0 96px; transform-box: view-box; transition: transform 0.07s; }
.nyx-svg .nx-lids.shut { transform: scaleY(1); }
.nyx-svg .nx-look { transition: transform 0.35s; }
@keyframes nx-breathe { 50% { transform: translateY(-2px) scale(1.006); } }
@keyframes nx-sway { 30% { transform: rotate(-1.4deg); } 70% { transform: rotate(1.1deg); } }
@media (max-width: 640px) {
  .tour-card { grid-template-columns: 96px 1fr; border-radius: 16px; }
  .tour-nyx svg { width: 116px; left: -12px; }
  .tour-body { padding: 12px 12px 10px 2px; }
  .tour-text { font-size: 14.5px; min-height: 5.8em; }
}
@media (max-height: 500px) {
  .tour-card { grid-template-columns: 110px 1fr; width: min(760px, calc(100vw - 24px)); }
  .tour-nyx svg { width: 128px; }
  .tour-text { min-height: 3em; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .tour-spot, .nyx-svg .nx-body, .nyx-svg .nx-head { animation: none; } }

/* Nyx v2: the page stays clickable (her steps ask you to do things), only the card takes input */
.tour { pointer-events: none; }
.tour-card { pointer-events: auto; }
.tour-spot.act { box-shadow: 0 0 0 9999px rgba(4, 6, 10, 0.55), 0 0 0 3px var(--exit), 0 0 40px 8px rgba(61, 220, 151, 0.5); animation: spot-act 1.1s ease-in-out infinite; }
@keyframes spot-act { 50% { box-shadow: 0 0 0 9999px rgba(4, 6, 10, 0.55), 0 0 0 5px var(--exit), 0 0 56px 14px rgba(61, 220, 151, 0.6); } }
.tour-nyx { border: 0; padding: 0; background: radial-gradient(circle at 50% 40%, rgba(247, 147, 26, 0.18), transparent 70%); cursor: pointer; }
.nyx-tr { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--dust); font-style: italic; }
.nyx-tr[hidden] { display: none; }
.tour-move { margin: 0; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: rgba(61, 220, 151, 0.14); color: var(--exit); font: 700 12px var(--f-ui); letter-spacing: 0.08em; text-transform: uppercase; animation: move-blink 1.2s ease-in-out infinite; }
.tour-move[hidden] { display: none; }
@keyframes move-blink { 50% { opacity: 0.55; } }
/* in the raid: a compact Nyx under the clock */
.nyx-dock { position: fixed; z-index: 30; left: 50%; top: calc(118px + var(--safe-t)); transform: translateX(-50%); width: min(520px, calc(100vw - 340px)); min-width: 300px; display: grid; grid-template-columns: 74px 1fr; align-items: end; border: 1px solid rgba(247, 147, 26, 0.45); border-radius: 16px; background: rgba(12, 14, 20, 0.86); backdrop-filter: blur(6px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); overflow: hidden; pointer-events: none; }
.nyx-dock.pop { animation: dock-pop 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.3); }
@keyframes dock-pop { from { transform: translateX(-50%) scale(0.92); opacity: 0.4; } }
.nyx-face { position: relative; align-self: stretch; min-height: 86px; }
.nyx-face svg { position: absolute; left: -10px; bottom: -6px; width: 96px; height: auto; }
.nyx-says { padding: 8px 12px 9px 4px; display: flex; flex-direction: column; gap: 3px; }
.nyx-who { margin: 0; display: flex; align-items: center; gap: 6px; }
.nyx-who b { color: var(--loot); font: 900 15px/1 var(--f-display); letter-spacing: 0.1em; }
.nyx-who button { pointer-events: auto; border: 1px solid var(--line); border-radius: 999px; background: none; font-size: 11px; padding: 2px 7px; cursor: pointer; color: var(--paper); }
.nyx-who .tour-voice { margin-left: auto; }
.nyx-dock .nyx-en { margin: 0; font-size: 14.5px; line-height: 1.35; color: var(--paper); }
.nyx-dock .nyx-tr { font-size: 12px; }
@media (max-width: 720px), (max-height: 500px) {
  .nyx-dock { top: calc(70px + var(--safe-t)); width: min(440px, calc(100vw - 280px)); min-width: 250px; grid-template-columns: 58px 1fr; }
  .nyx-face svg { width: 76px; }
  .nyx-dock .nyx-en { font-size: 12.5px; }
}
.nyx-replay { margin: 4px 0 0; font: 600 12px var(--f-ui); color: var(--exit); }
.nyx-en { direction: ltr; text-align: left; unicode-bidi: isolate; }
[dir="rtl"] .nyx-tr { text-align: right; }
/* phones held sideways: Nyx sits low, between the move stick and the buttons, clear of the runner */
@media (max-height: 500px) {
  .nyx-dock { top: auto; bottom: calc(10px + var(--safe-b)); width: min(380px, calc(100vw - 470px)); min-width: 260px; grid-template-columns: 52px 1fr; }
  .nyx-face { min-height: 64px; }
  .nyx-face svg { width: 66px; }
  .nyx-says { padding: 6px 10px 7px 2px; }
  .nyx-dock .nyx-en { font-size: 12px; }
  .nyx-dock .nyx-tr { font-size: 11px; }
}
@media (max-height: 500px) {
  .tour-card { grid-template-columns: 78px 1fr; max-height: 48vh; }
  .tour-nyx svg { width: 96px; left: -10px; }
  .tour-body { padding: 8px 10px 8px 2px; gap: 4px; }
  .tour-text { min-height: 0; font-size: 13px; }
  .tour-card .nyx-tr { font-size: 11.5px; }
  .tour-dots { display: none; }
  .tour-who b { font-size: 16px; }
  .tour-actions .cta, .tour-actions .ghost { padding: 7px 14px; }
}
/* Nyx's first raid is a Raid: the other modes wait */
body.tour-raid-only #modes .mode-card:not([data-mode="raid"]) { opacity: 0.28; filter: grayscale(1); pointer-events: none; }
/* the raid banner drops below Nyx while she is on screen (phones keep her at the bottom) */
@media (min-height: 501px) { body.nyx-on .banner { top: max(24%, 250px); } }
@media (min-height: 501px) and (max-width: 720px) { body.nyx-on .banner { top: max(24%, 190px); } }
/* the soundtrack: the track's name slides in when it changes, like a radio */
.now-playing { position: fixed; z-index: 45; right: calc(16px + var(--safe-r, 0px)); bottom: calc(16px + var(--safe-b)); padding: 7px 14px; border: 1px solid rgba(247, 147, 26, 0.4); border-radius: 999px; background: rgba(12, 14, 20, 0.85); color: var(--paper); font: 700 12.5px var(--f-ui); letter-spacing: 0.04em; pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity 0.35s, transform 0.35s; }
.now-playing.on { opacity: 1; transform: none; }
.pause-track { align-items: center; }
.pause-track span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-grid { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.track-grid button { min-height: 34px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--paper); font: 600 12.5px var(--f-ui); cursor: pointer; }
.track-grid button[aria-pressed="true"] { border-color: var(--loot); color: var(--loot); background: rgba(247, 147, 26, 0.1); }
@media (max-height: 500px) { .now-playing { bottom: auto; top: calc(10px + var(--safe-t)); right: 50%; transform: translate(50%, -8px); } .now-playing.on { transform: translate(50%, 0); } }
body:has(#pause:not([hidden])) .now-playing { display: none; }
/* the magazine: rounds left, and the automatic reload filling the bar */
.ammo { display: grid; grid-template-columns: 1fr; gap: 3px; margin: 2px 0 5px; }
.ammo b { font: 800 15px var(--f-display); letter-spacing: 0.04em; color: var(--paper); }
.ammo.low b { color: var(--blood); }
.ammo.reloading b { color: var(--loot); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; animation: ammo-blink 0.6s steps(2) infinite; }
@keyframes ammo-blink { 50% { opacity: 0.55; } }
.ammo-track { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.ammo-track i { display: block; height: 100%; background: var(--paper); transition: width 0.12s linear; }
.ammo.reloading .ammo-track i { background: var(--loot); }
.ammo.low .ammo-track i { background: var(--blood); }
/* collection cases: their own colours, a shine across the card, and what is inside */
.box-group { margin-top: 14px; }
.box-group > .eyebrow { margin-bottom: 8px; }
.box-card.themed { border-color: color-mix(in srgb, var(--c1) 55%, transparent); background: radial-gradient(110% 70% at 50% 0%, color-mix(in srgb, var(--c1) 30%, transparent), transparent 62%), linear-gradient(180deg, color-mix(in srgb, var(--c2) 85%, transparent), var(--glass)); }
.box-card.themed::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--c1) 26%, transparent) 50%, transparent 65%); transform: translateX(-120%); animation: case-shine 5s ease-in-out infinite; pointer-events: none; }
@keyframes case-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.box-card.themed h4 { color: color-mix(in srgb, var(--c1) 70%, #fff); text-shadow: 0 0 14px color-mix(in srgb, var(--c1) 60%, transparent); }
.box-card.themed .box-art svg { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--c1) 55%, transparent)); }
.box-card.themed:hover .box-art svg { animation: case-bob 1.2s ease-in-out infinite; }
@keyframes case-bob { 50% { transform: translateY(-4px) rotate(-2deg); } }
.box-peek { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.box-peek figure { margin: 0; aspect-ratio: 12 / 7; border-radius: 8px; border-bottom: 2px solid var(--q); background: radial-gradient(80% 80% at 50% 60%, color-mix(in srgb, var(--q) 28%, transparent), rgba(0, 0, 0, 0.35)); display: grid; place-items: center; overflow: hidden; }
.box-peek.fig figure { aspect-ratio: 3 / 4; }
.box-peek img { width: 100%; height: 100%; object-fit: contain; }
.box-contents summary { cursor: pointer; font: 600 12px var(--f-ui); color: var(--dust); }
.box-contents ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; max-height: 150px; overflow: auto; }
.box-contents li { font: 600 11px var(--f-ui); padding: 2px 7px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--q) 60%, transparent); color: color-mix(in srgb, var(--q) 75%, #fff); }
@media (prefers-reduced-motion: reduce) { .box-card.themed::after, .box-card.themed:hover .box-art svg { animation: none; } }
.box-card h4 { overflow-wrap: anywhere; hyphens: auto; }
/* the case reel: prizes race past a gold marker, slow down, and the winner lights up */
.reel { width: min(980px, 96vw); display: grid; gap: 10px; justify-items: center; }
.reel-label { margin: 0; font: 900 clamp(16px, 2.4vw, 22px) var(--f-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); text-shadow: 0 0 18px var(--glow, rgba(247, 147, 26, 0.6)); }
.reel-window { position: relative; width: 100%; height: 150px; overflow: hidden; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12); background: linear-gradient(180deg, rgba(8, 10, 16, 0.92), rgba(18, 21, 30, 0.92)); box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8), 0 20px 60px -20px rgba(0, 0, 0, 0.9); }
.reel-strip { position: absolute; left: 0; top: 11px; display: flex; gap: 8px; padding-left: 0; will-change: transform; }
.reel-tile { flex: 0 0 124px; height: 128px; display: grid; grid-template-rows: 1fr auto; place-items: center; border-radius: 10px; border-bottom: 4px solid var(--q); background: radial-gradient(90% 80% at 50% 45%, color-mix(in srgb, var(--q) 30%, transparent), rgba(12, 14, 20, 0.95)); overflow: hidden; }
.reel-tile img { max-width: 112px; max-height: 84px; object-fit: contain; }
.reel-tile span { width: 100%; padding: 0 6px 6px; font: 700 10.5px var(--f-ui); color: color-mix(in srgb, var(--q) 70%, #fff); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel-tile.r-mythic, .reel-tile.r-exotic { box-shadow: inset 0 0 22px color-mix(in srgb, var(--q) 55%, transparent); }
.reel-tile.r-exotic { background: radial-gradient(90% 80% at 50% 45%, color-mix(in srgb, var(--q) 40%, transparent), rgba(12, 14, 20, 0.95)), conic-gradient(from 0deg, rgba(255, 61, 212, 0.18), rgba(0, 240, 255, 0.18), rgba(255, 209, 102, 0.18), rgba(255, 61, 212, 0.18)); }
.reel-mark { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #ffd166; box-shadow: 0 0 14px #ffd166, 0 0 30px rgba(255, 209, 102, 0.6); z-index: 2; }
.reel-mark::before, .reel-mark::after { content: ''; position: absolute; left: 50%; border: 9px solid transparent; transform: translateX(-50%); }
.reel-mark::before { top: 0; border-top-color: #ffd166; }
.reel-mark::after { bottom: 0; border-bottom-color: #ffd166; }
.reel-shade { position: absolute; top: 0; bottom: 0; width: 22%; z-index: 1; pointer-events: none; }
.reel-shade.l { left: 0; background: linear-gradient(90deg, rgba(5, 6, 10, 0.95), transparent); }
.reel-shade.r { right: 0; background: linear-gradient(270deg, rgba(5, 6, 10, 0.95), transparent); }
.reel-tile.win.hit { animation: reel-hit 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.4) forwards; position: relative; z-index: 3; }
@keyframes reel-hit { 0% { transform: scale(1); } 40% { transform: scale(1.16); box-shadow: 0 0 0 3px var(--q), 0 0 60px var(--q); } 100% { transform: scale(1.08); box-shadow: 0 0 0 2px var(--q), 0 0 40px var(--q); } }
.reel.stopped .reel-tile:not(.win) { opacity: 0.35; transition: opacity 0.4s; }
@media (max-width: 600px) { .reel-window { height: 120px; } .reel-tile { flex-basis: 124px; height: 100px; } .reel-tile img { max-height: 62px; } }
/* rank reward on the result card: the outfit itself, in its rarity's colour */
.res-rewards li { grid-template-columns: 64px 1fr; padding: 6px; border-radius: 12px; background: radial-gradient(80% 120% at 0% 50%, color-mix(in srgb, var(--q, #b37bff) 26%, transparent), transparent 70%); border: 1px solid color-mix(in srgb, var(--q, #b37bff) 45%, transparent); }
.res-rewards li > div { display: grid; gap: 1px; }
.res-rewards li .fine { text-align: left; }
.rw-fig { width: 56px; height: 78px; object-fit: contain; filter: drop-shadow(0 0 10px var(--q)); }
.rw-rar { font: 800 10px var(--f-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--q); }

/* new rank: the whole screen */
.rankup { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 40%, rgba(70, 48, 8, 0.97), rgba(5, 6, 10, 0.985) 70%); overflow: hidden; }
.rankup[hidden] { display: none; }
.ru-rays { position: absolute; left: 50%; top: 38%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; background: repeating-conic-gradient(from 0deg, rgba(255, 209, 102, 0.16) 0 6deg, transparent 6deg 18deg); animation: ru-spin 22s linear infinite; mask: radial-gradient(circle, #000 0 20%, transparent 55%); -webkit-mask: radial-gradient(circle, #000 0 20%, transparent 55%); }
@keyframes ru-spin { to { transform: rotate(360deg); } }
.ru-confetti i { position: absolute; top: -20px; left: var(--x); width: 8px; height: 14px; background: var(--c); transform: rotate(var(--r)); animation: ru-fall 3.2s var(--d) cubic-bezier(0.3, 0.6, 0.5, 1) forwards; opacity: 0; }
@keyframes ru-fall { 0% { opacity: 1; transform: translateY(0) rotate(var(--r)); } 100% { opacity: 0; transform: translateY(105vh) rotate(calc(var(--r) + 540deg)); } }
.ru-stage { position: relative; display: grid; justify-items: center; gap: 14px; padding: 16px; width: 100%; }
.ru-head { display: grid; justify-items: center; gap: 4px; transition: transform 0.5s, opacity 0.5s; }
.ru-badge { animation: ru-badge 1s cubic-bezier(0.2, 1.4, 0.3, 1) both; filter: drop-shadow(0 0 30px rgba(255, 209, 102, 0.8)); }
@keyframes ru-badge { from { transform: scale(0.2) rotate(-25deg); opacity: 0; } }
.ru-kicker { margin: 0; font: 900 clamp(40px, 9vw, 96px)/0.95 var(--f-display); letter-spacing: 0.06em; text-transform: uppercase; background: linear-gradient(180deg, #fff6d5, #ffd166 45%, #f7931a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 24px rgba(247, 147, 26, 0.7)); animation: ru-slam 0.7s 0.25s cubic-bezier(0.2, 1.5, 0.3, 1) both; }
@keyframes ru-slam { from { transform: scale(2.4); opacity: 0; } }
.ru-name { margin: 0; font: 800 clamp(16px, 2.6vw, 24px) var(--f-ui); color: var(--paper); animation: ru-up 0.6s 0.7s both; }
.ru-name span { display: inline-grid; place-items: center; min-width: 34px; padding: 2px 8px; margin-right: 6px; border-radius: 999px; background: #ffd166; color: #1a1205; font-weight: 900; }
@keyframes ru-up { from { transform: translateY(14px); opacity: 0; } }
.rankup.spin .ru-head { transform: scale(0.62) translateY(-10px); }
.ru-reel:empty { display: none; }
.ru-won { margin: 0; font: 700 16px var(--f-ui); color: var(--paper); text-align: center; }
.ru-won b { color: var(--q); text-shadow: 0 0 16px var(--q); font-size: 20px; }
.ru-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (max-height: 500px) { .ru-badge svg { width: 80px; height: 80px; } .ru-kicker { font-size: 44px; } .rankup.spin .ru-head { transform: scale(0.55) translateY(-30px); margin-bottom: -60px; } .reel-window { height: 112px; } .reel-tile { height: 94px; } .reel-tile img { max-height: 58px; } }
@media (prefers-reduced-motion: reduce) { .ru-rays, .ru-confetti { display: none; } }
/* battle pass */
.pass { display: grid; gap: 14px; }
.bp-hero { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; padding: 18px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--c1) 50%, transparent); background: radial-gradient(80% 120% at 85% 50%, color-mix(in srgb, var(--c1) 30%, transparent), transparent 60%), linear-gradient(135deg, var(--dk), rgba(10, 12, 18, 0.95)); overflow: hidden; }
.bp-hero::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 22px, color-mix(in srgb, var(--c2) 6%, transparent) 22px 24px); pointer-events: none; }
.bp-hero-txt { position: relative; z-index: 1; display: grid; gap: 8px; align-content: start; }
.bp-title { margin: 0; font: 900 clamp(26px, 4vw, 44px)/1 var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; background: linear-gradient(90deg, var(--c1), var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--c1) 60%, transparent)); }
.bp-prog { display: grid; gap: 4px; }
.bp-prog b { font: 800 18px var(--f-display); color: var(--paper); }
.bp-bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.bp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c1), var(--c2)); box-shadow: 0 0 12px var(--c1); }
.bp-cta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bp-cta .fine { flex-basis: 100%; margin: 0; }
.bp-buy { background: linear-gradient(90deg, var(--c1), var(--c2)); color: #0b0b10; }
.bp-prem-on { padding: 8px 14px; border-radius: 999px; font: 800 13px var(--f-ui); letter-spacing: 0.08em; text-transform: uppercase; color: #0b0b10; background: linear-gradient(90deg, var(--c1), var(--c2)); }
.bp-show { position: relative; z-index: 1; display: grid; justify-items: center; align-content: end; }
.bp-show canvas { width: 100%; max-width: 260px; height: 240px; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--c1) 50%, transparent)); }
.bp-show-name { margin: 0; font: 700 13px var(--f-ui); color: var(--paper); }
.bp-legend { display: flex; justify-content: space-between; font: 800 11px var(--f-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dust); }
.bp-track { display: grid; grid-auto-flow: column; grid-auto-columns: 128px; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x proximity; }
.bp-col { display: grid; grid-template-rows: auto 1fr 1fr; gap: 6px; scroll-snap-align: start; }
.bp-num { margin: 0; text-align: center; font: 900 14px var(--f-display); color: var(--dust); }
.bp-col.done .bp-num { color: var(--loot); }
.bp-col.next .bp-num { color: var(--paper); text-shadow: 0 0 10px var(--loot); }
.bp-cell { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; min-height: 150px; padding: 8px 6px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--q) 40%, var(--line)); background: radial-gradient(90% 70% at 50% 30%, color-mix(in srgb, var(--q) 22%, transparent), rgba(12, 14, 20, 0.92)); }
.bp-cell.p { background: radial-gradient(90% 70% at 50% 30%, color-mix(in srgb, var(--q) 26%, transparent), rgba(20, 14, 6, 0.92)); border-color: color-mix(in srgb, #ffd166 35%, var(--line)); }
.bp-cell.empty { border-style: dashed; background: none; opacity: 0.35; }
.bp-cell.far { opacity: 0.55; }
.bp-cell.locked .bp-art { filter: grayscale(0.6) brightness(0.8); }
.bp-cell.can { box-shadow: 0 0 0 2px var(--loot), 0 0 22px -4px var(--loot); animation: bp-can 1.6s ease-in-out infinite; }
@keyframes bp-can { 50% { box-shadow: 0 0 0 2px var(--loot), 0 0 32px 0 var(--loot); } }
.bp-cell.got { opacity: 0.6; }
.bp-art { height: 66px; display: grid; place-items: center; }
.bp-art img { max-height: 66px; max-width: 112px; object-fit: contain; }
.bp-coin { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font: 900 13px var(--f-display); color: #1a1205; background: radial-gradient(circle at 35% 30%, #fff3c4, #ffd166 45%, #b8860b); box-shadow: 0 0 14px rgba(255, 209, 102, 0.5); }
.bp-name { margin: 0; font: 700 10.5px/1.25 var(--f-ui); text-align: center; color: color-mix(in srgb, var(--q) 60%, #fff); max-height: 2.6em; overflow: hidden; }
.bp-ltd { font: 800 8.5px var(--f-ui); letter-spacing: 0.1em; text-transform: uppercase; color: #ffd166; }
.bp-claim { min-height: 30px; padding: 4px 10px; font-size: 11px; }
.bp-ok { font: 700 11px var(--f-ui); color: var(--exit); }
.bp-lock { font-size: 16px; opacity: 0.8; }
.bp-turrets .bp-trow { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-tsk { display: grid; justify-items: center; gap: 2px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass); color: var(--paper); cursor: pointer; font: 700 11px var(--f-ui); }
.bp-tsk small { color: var(--dust); }
.bp-tsk.on { border-color: var(--loot); box-shadow: 0 0 0 1px var(--loot); }
.bp-tsk.on small { color: var(--loot); }
.nav-pass svg { color: #ffd166; }
@media (max-width: 760px) { .bp-hero { grid-template-columns: 1fr; } .bp-show canvas { height: 180px; } .bp-track { grid-auto-columns: 112px; } }
@media (max-height: 500px) { .bp-hero { grid-template-columns: 1.4fr 1fr; } .bp-show canvas { height: 160px; } }
/* ranked */
.ranked { display: grid; gap: 14px; }
.rd-hero { position: relative; display: grid; gap: 10px; padding: 18px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--c1) 45%, transparent); background: radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--c1) 26%, transparent), transparent 60%), linear-gradient(160deg, rgba(14, 10, 26, 0.95), rgba(8, 10, 16, 0.95)); overflow: hidden; }
.rd-h { margin: 0; font: 900 clamp(24px, 3.6vw, 38px)/1 var(--f-display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--paper); }
.rd-hero > .cta { justify-self: start; }
.rd-me { display: grid; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--d) 50%, transparent); background: radial-gradient(80% 140% at 0% 50%, color-mix(in srgb, var(--d) 22%, transparent), transparent 70%); }
.rd-div { display: flex; align-items: center; gap: 10px; }
.rd-div b { font: 900 22px var(--f-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--d); text-shadow: 0 0 16px color-mix(in srgb, var(--d) 60%, transparent); }
.rd-div .num { font: 800 16px var(--f-display); color: var(--paper); }
.rd-gem { width: 22px; height: 22px; transform: rotate(45deg); border-radius: 4px; background: linear-gradient(135deg, #fff, var(--d)); box-shadow: 0 0 14px var(--d); flex: none; }
.rd-pos { margin: 0; font: 700 13px var(--f-ui); color: var(--dust); }
.rd-none { margin: 0; color: var(--dust); }
.rd-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.rd-stat { display: grid; justify-items: center; padding: 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.rd-stat b { font: 800 18px var(--f-display); color: var(--paper); }
.rd-stat span { font: 700 10px var(--f-ui); color: var(--dust); text-transform: uppercase; letter-spacing: 0.08em; }
.rd-ladder { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-ladder span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--d) 45%, transparent); font: 700 11px var(--f-ui); color: var(--d); opacity: 0.65; }
.rd-ladder span.on { opacity: 1; box-shadow: 0 0 12px -2px var(--d); }
.rd-ladder i { width: 8px; height: 8px; transform: rotate(45deg); background: var(--d); }
.rd-ladder small { color: var(--dust); }
.rd-trow, .rd-tiers { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-tt { display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--n) 55%, transparent); background: rgba(8, 10, 16, 0.9); color: var(--n); cursor: pointer; text-align: left; }
.rd-tt b { font: 900 13px var(--f-ui); letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 0 10px var(--n); }
.rd-tt small { font: 600 11px var(--f-ui); color: var(--dust); }
.rd-tt.on { box-shadow: 0 0 0 1px var(--n), 0 0 22px -4px var(--n); }
.rd-tiers span { font: 700 11px var(--f-ui); color: var(--n); text-shadow: 0 0 8px var(--n); }
.rd-table { width: 100%; border-collapse: collapse; font: 600 13px var(--f-ui); }
.rd-table th { text-align: left; font: 800 10px var(--f-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dust); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.rd-table td { padding: 7px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); color: var(--paper); }
.rd-table tr.me td { background: rgba(247, 147, 26, 0.1); }
.rd-table tr.p1 td:first-child, .rd-table tr.p2 td:first-child, .rd-table tr.p3 td:first-child { font-size: 17px; }
.rd-nt { display: block; font: 800 9px var(--f-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--n); text-shadow: 0 0 8px var(--n); }
.rd-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 800 10px var(--f-ui); text-transform: uppercase; color: var(--d); border: 1px solid color-mix(in srgb, var(--d) 50%, transparent); }
.rd-board { overflow-x: auto; }
.nav-ranked svg { color: #ff2dd4; }
.res-ranked .rr-ranked { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--d) 50%, transparent); background: radial-gradient(80% 140% at 0% 50%, color-mix(in srgb, var(--d) 20%, transparent), transparent 70%); }
.rr-ranked .eyebrow { margin: 0; }
.rr-ranked b { font: 900 20px var(--f-display); }
.rr-ranked b.plus { color: var(--exit); }
.rr-ranked b.minus { color: var(--blood); }
.rr-ranked span:not(.rd-gem) { font: 700 13px var(--f-ui); color: var(--d); }
.rankup.lottery { background: radial-gradient(60% 60% at 50% 40%, rgba(60, 8, 60, 0.97), rgba(5, 6, 10, 0.985) 70%); }
.rankup.lottery .ru-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 45, 212, 0.16) 0 6deg, transparent 6deg 18deg); }
.rankup.lottery .ru-kicker { background: linear-gradient(180deg, #fff, #ff2dd4 50%, #00f5ff); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 24px rgba(255, 45, 212, 0.7)); font-size: clamp(34px, 7vw, 76px); }
@media (max-width: 600px) { .rd-stats { grid-template-columns: repeat(3, 1fr); } .rd-table th:nth-child(n + 5), .rd-table td:nth-child(n + 5) { display: none; } }
/* locker: your collection only, filters with counts, a sort switch */
.lk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lk-sort { min-height: 32px; padding: 4px 10px; font-size: 12px; }
#lk-rar button[style*="--r"] { color: var(--r); }
#lk-rar button[aria-pressed="true"] { border-color: currentColor; }
#lk-rar small { opacity: 0.7; }
.lk-item.on { box-shadow: 0 0 0 2px var(--loot); }
.lk-empty { padding: 18px 4px; }
.so-more { justify-self: center; margin-top: 8px; }
/* what's new */
.dlg-news .dlg-inner { display: grid; gap: 12px; max-width: 560px; }
.news-body { display: grid; gap: 12px; max-height: 60vh; overflow: auto; }
.news-item { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass); }
.news-item.latest { border-color: rgba(247, 147, 26, 0.55); box-shadow: 0 0 22px -10px var(--loot); }
.news-item time { font: 800 11px var(--f-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--loot); }
.news-item ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 5px; font: 500 13.5px/1.4 var(--f-ui); color: var(--paper); }
/* your own stake */
.stake-own { display: grid; gap: 2px; cursor: text; }
.stake-own-k { font: 700 11px var(--f-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dust); }
.stake-own-in { display: flex; align-items: center; gap: 2px; font: 800 16px var(--f-display); color: var(--paper); }
.stake-own input { width: 100%; min-width: 0; border: 0; background: none; color: inherit; font: inherit; padding: 0; outline: none; -moz-appearance: textfield; }
.stake-own input::-webkit-inner-spin-button { -webkit-appearance: none; }
.stake-own.on { border-color: var(--loot); box-shadow: 0 0 0 1px var(--loot); }
/* your own stake */
.stake-own { display: grid; gap: 2px; cursor: text; }
.stake-own-k { font: 700 11px var(--f-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dust); }
.stake-own-in { display: flex; align-items: center; gap: 2px; font: 800 16px var(--f-display); color: var(--paper); }
.stake-own input { width: 100%; min-width: 0; border: 0; background: none; color: inherit; font: inherit; padding: 0; outline: none; -moz-appearance: textfield; }
.stake-own input::-webkit-inner-spin-button { -webkit-appearance: none; }
.stake-own.on { border-color: var(--loot); box-shadow: 0 0 0 1px var(--loot); }
/* achievement titles by tier: common → rare → epic → legendary → mythic, and mystery */
.ttl { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; font: 800 10.5px/1.6 var(--f-ui); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; vertical-align: middle; }
.ttl.big { font-size: 12px; padding: 2px 10px; }
.ttl.t-common { color: #d6dbe6; border-color: rgba(214, 219, 230, 0.25); background: rgba(214, 219, 230, 0.06); }
.ttl.t-rare { color: #4cc9f0; border-color: rgba(76, 201, 240, 0.5); background: rgba(76, 201, 240, 0.08); box-shadow: 0 0 10px -3px #4cc9f0; }
.ttl.t-epic { color: #d3b0ff; border-color: rgba(179, 123, 255, 0.6); background: radial-gradient(120% 140% at 50% 0%, rgba(179, 123, 255, 0.28), rgba(40, 14, 70, 0.4)); box-shadow: 0 0 14px -3px #b37bff; text-shadow: 0 0 8px rgba(179, 123, 255, 0.8); animation: ttl-pulse 2.4s ease-in-out infinite; }
.ttl.t-legendary { position: relative; overflow: hidden; color: #1a1205; border-color: #ffd166; background: linear-gradient(90deg, #f7931a, #ffd166, #fff3c4, #ffd166, #f7931a); box-shadow: 0 0 18px -2px rgba(255, 209, 102, 0.8); }
.ttl.t-legendary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.85) 50%, transparent 70%); transform: translateX(-120%); animation: ttl-sweep 2.8s ease-in-out infinite; }
.ttl.t-mythic { position: relative; color: #fff; border: 0; background: linear-gradient(#10121a, #10121a) padding-box, conic-gradient(from var(--spin, 0deg), #00f0ff, #ff3dd4, #ffd166, #7dff9b, #00f0ff) border-box; border: 1.5px solid transparent; animation: prism-spin 4s linear infinite; box-shadow: 0 0 20px -2px rgba(255, 61, 212, 0.7), 0 0 30px -6px rgba(0, 240, 255, 0.7); text-shadow: 0 0 10px rgba(255, 255, 255, 0.7); }
.ttl.t-mystery { color: #e9d5ff; border-color: rgba(192, 132, 252, 0.6); background: radial-gradient(140% 160% at 50% 50%, rgba(88, 28, 135, 0.7), rgba(10, 4, 20, 0.9)); box-shadow: 0 0 18px -2px rgba(168, 85, 247, 0.85), inset 0 0 10px rgba(168, 85, 247, 0.5); text-shadow: 1px 0 rgba(0, 245, 255, 0.6), -1px 0 rgba(255, 45, 212, 0.6); animation: ttl-glitch 3.2s steps(1) infinite; }
@keyframes ttl-pulse { 50% { box-shadow: 0 0 22px -2px #b37bff; } }
@keyframes ttl-sweep { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes ttl-glitch { 0%, 92%, 100% { transform: none; opacity: 1; } 93% { transform: translateX(1px) skewX(-6deg); opacity: 0.7; } 95% { transform: translateX(-1px); } 97% { opacity: 0.85; } }
.ach-tier { margin-left: 6px; font: 800 9px var(--f-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.ach-tier.t-common { color: #9aa3b5; } .ach-tier.t-rare { color: #4cc9f0; } .ach-tier.t-epic { color: #b37bff; } .ach-tier.t-legendary { color: #ffd166; } .ach-tier.t-mythic { color: #ff3dd4; } .ach-tier.t-mystery { color: #c084fc; }
.ach.tier-mystery:not(.done) { background: radial-gradient(120% 140% at 0% 50%, rgba(88, 28, 135, 0.25), transparent 70%); }
.ach.done.tier-legendary { box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.45); }
.ach.done.tier-mythic { box-shadow: inset 0 0 0 1px rgba(255, 61, 212, 0.5), 0 0 20px -10px #ff3dd4; }
/* the player card wears the aura of its title */
.hero[data-tier] { position: relative; }
.hero[data-tier="rare"] { box-shadow: 0 0 0 1px rgba(76, 201, 240, 0.4), 0 0 28px -12px #4cc9f0; }
.hero[data-tier="epic"] { box-shadow: 0 0 0 1px rgba(179, 123, 255, 0.5), 0 0 36px -10px #b37bff; }
.hero[data-tier="legendary"] { box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.6), 0 0 44px -10px #ffd166; }
.hero[data-tier="mythic"] { box-shadow: 0 0 0 1.5px rgba(255, 61, 212, 0.6), 0 0 50px -8px rgba(255, 61, 212, 0.7), 0 0 70px -20px rgba(0, 240, 255, 0.8); }
.hero[data-tier="mystery"] { box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.6), 0 0 50px -8px rgba(168, 85, 247, 0.8); }
.hero[data-tier="mythic"]::before, .hero[data-tier="mystery"]::before, .hero[data-tier="legendary"]::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: prism-spin 5s linear infinite; }
.hero[data-tier="mythic"]::before { background: conic-gradient(from var(--spin, 0deg), #00f0ff, #ff3dd4, #ffd166, #7dff9b, #00f0ff); }
.hero[data-tier="legendary"]::before { background: conic-gradient(from var(--spin, 0deg), #f7931a, #fff3c4, #ffd166, #f7931a); }
.hero[data-tier="mystery"]::before { background: conic-gradient(from var(--spin, 0deg), #581c87, #c084fc, #00f5ff, #581c87); }
@media (prefers-reduced-motion: reduce) { .ttl, .ttl::after, .hero::before { animation: none !important; } }
.slot-tt { font-size: 8.5px; padding: 0 5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------ zombies and the gold rush */
.mode-card.k-zombie { background: linear-gradient(160deg, rgba(90, 160, 70, 0.16), rgba(10, 14, 12, 0.6)); }
.mode-card.k-zombie .mc-meta { color: #9be36b; }
.mode-card.k-gold { background: linear-gradient(160deg, rgba(255, 196, 61, 0.16), rgba(18, 14, 6, 0.6)); }
.mode-card.k-gold .mc-meta { color: #ffd166; }
.mode-card.k-zombie[aria-checked="true"] { border-color: #9be36b; box-shadow: 0 0 0 1px #9be36b, 0 0 22px rgba(155, 227, 107, 0.25); }
.mode-card.k-gold[aria-checked="true"] { border-color: #ffd166; box-shadow: 0 0 0 1px #ffd166, 0 0 22px rgba(255, 209, 102, 0.25); }
.table-list.fixed .table-btn { grid-column: 1 / -1; }
.zpick { width: 100%; }
.zpick .eyebrow { margin: 0 0 8px; text-align: center; color: #9be36b; }
.zp-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.zp { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); color: var(--paper, #ebe5d6); cursor: pointer; font: inherit; transition: transform 0.12s, border-color 0.12s, background 0.12s; }
.zp:hover { transform: translateY(-2px); border-color: rgba(155, 227, 107, 0.5); }
.zp.on { border-color: #9be36b; background: rgba(155, 227, 107, 0.12); box-shadow: 0 0 16px rgba(155, 227, 107, 0.25); }
.zp img { width: 84px; height: 40px; object-fit: contain; }
.zp b { font-size: 12px; line-height: 1.1; text-align: center; }
.zp small { font-size: 10px; color: var(--dust, #8d93a6); }
.zp-bar { width: 80%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.zp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #9be36b, #ffd166); }
.slot-wp { font-size: 9px; color: #9be36b; letter-spacing: 0.04em; }
body.z-on .hud-bag b, body.z-on #bag { color: #9be36b; }
body.gold-on #bag { color: #ffd166; }
@media (max-width: 560px) {
  .zp-row { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .zp img { width: 66px; height: 32px; }
}

/* the tour: above every overlay (shop opening included), hidden while the raid or a rank-up
   show runs, and a shake when you press something she did not ask for */
.tour { z-index: 95; }
.tour.hold { opacity: 0 !important; visibility: hidden; }
.tour-card.nudge { animation: tour-nudge 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes tour-nudge { 10%, 90% { translate: -2px 0; } 20%, 80% { translate: 4px 0; } 30%, 50%, 70% { translate: -7px 0; } 40%, 60% { translate: 7px 0; } }
.tour-spot.flash { box-shadow: 0 0 0 9999px rgba(4, 6, 10, 0.8), 0 0 0 3px #fff, 0 0 40px 12px rgba(247, 147, 26, 0.85); }
.tour #tour-next:disabled { opacity: 0.45; cursor: not-allowed; }

/* opening a bag where you got it: the inventory tile and the battle pass pop-up */
.inv-box { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.inv-open { margin-top: 4px; padding: 6px 14px; font-size: 12px; }
.bp-got { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; background: rgba(4, 6, 10, 0.7); backdrop-filter: blur(4px); animation: tour-in 0.3s ease-out; }
.bp-got-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 26px; border-radius: 18px; border: 1px solid rgba(255, 209, 102, 0.5); background: linear-gradient(160deg, rgba(30, 26, 14, 0.97), rgba(10, 12, 18, 0.97)); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 209, 102, 0.15); text-align: center; }
.bp-got-card b { font-size: 18px; }
.bp-got-btns { display: flex; gap: 10px; margin-top: 6px; }

/* upgrading your turret or tripmine: the prompt over the buy menu, and the touch buttons */
.up-hint { position: absolute; left: 50%; bottom: calc(205px + var(--safe-b)); transform: translateX(-50%); margin: 0; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 209, 102, 0.6); background: rgba(12, 14, 20, 0.88); color: #ffd166; font: 700 13px var(--f-num); letter-spacing: 0.03em; pointer-events: none; box-shadow: 0 0 20px rgba(255, 209, 102, 0.2); animation: up-pulse 1.2s ease-in-out infinite; }
.up-hint.poor { color: var(--dust, #8d93a6); border-color: var(--line); animation: none; }
@keyframes up-pulse { 50% { box-shadow: 0 0 28px rgba(255, 209, 102, 0.45); } }
.tbtn.reloadbtn { right: calc(108px + var(--safe-r)); bottom: calc(150px + var(--safe-b)); width: 48px; height: 48px; font-size: 22px; }
.tbtn.upbtn { left: 50%; transform: translateX(-50%); bottom: calc(110px + var(--safe-b)); width: auto; min-width: 74px; height: 50px; padding: 0 12px; font-size: 20px; color: #0b0d12; background: linear-gradient(180deg, #ffd166, #f7931a); border-color: #ffd166; }
.tbtn.upbtn em { font: 700 11px var(--f-num); font-style: normal; margin-left: 4px; }
.tbtn.upbtn[hidden] { display: none; }

/* ---------------------------------------------------------------- invite friends */
.ref { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.ref-card { padding: 16px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(180deg, rgba(20, 24, 34, 0.92), rgba(10, 12, 18, 0.92)); }
.ref-hero { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; border-color: rgba(255, 196, 0, 0.35); background: radial-gradient(90% 140% at 100% 50%, rgba(255, 196, 0, 0.18), transparent 60%), linear-gradient(135deg, #141826, #0a0c12); }
.ref-title { margin: 0 0 6px; font: 900 clamp(24px, 3.6vw, 38px)/1.05 var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; background: linear-gradient(90deg, #ffd34d, #ff8a3d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ref-lead { margin: 0; color: #d9deea; line-height: 1.45; }
.ref-code { display: grid; gap: 2px; justify-items: center; padding: 10px 16px; border-radius: 14px; border: 1px dashed rgba(255, 211, 77, 0.6); background: rgba(0, 0, 0, 0.35); }
.ref-code small { color: #9aa3b5; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
.ref-code b { font: 900 28px/1 var(--f-display); letter-spacing: 0.18em; color: #ffd34d; }
.ref-lbl { display: block; margin-bottom: 8px; color: #9aa3b5; font-size: 13px; }
.ref-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ref-in { flex: 1 1 220px; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(0, 0, 0, 0.35); color: #fff; font: 600 14px/1.2 ui-monospace, monospace; }
.ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ref-stat { display: grid; gap: 4px; justify-items: center; padding: 14px 8px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(14, 17, 25, 0.92); }
.ref-stat b { font: 900 24px/1 var(--f-display); color: #fff; }
.ref-stat small { color: #9aa3b5; font-size: 12px; text-align: center; }
.ref-h { margin: 0 0 8px; font-size: 16px; }
.ref-steps { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; color: #d9deea; line-height: 1.4; }
.ref-fair { margin: 12px 0 0; color: #9aa3b5; font-size: 13px; line-height: 1.4; }
@media (max-width: 560px) {
  .ref-hero { grid-template-columns: 1fr; }
  .ref-stat b { font-size: 19px; }
}

/* ---------------------------------------------------- the account chip and wallet panel */
.tb-right { position: relative; }
.topbar { position: relative; z-index: 30; } /* the wallet panel drops over the page */
.tb-acct { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; max-width: 190px; padding: 7px 12px 7px 8px; border: 1px solid color-mix(in srgb, var(--loot) 55%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--loot) 12%, var(--glass)); color: var(--paper); font: 700 13px/1 var(--f-ui, inherit); cursor: pointer; }
.tb-acct:hover { border-color: var(--loot); }
.tb-acct.in { border-color: rgba(70, 220, 140, 0.55); background: rgba(70, 220, 140, 0.1); }
.tb-acct-ico { font-size: 15px; }
.tb-acct-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; }
.acct-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: min(360px, calc(100vw - 24px)); display: grid; gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, #161a25, #0c0e14); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); }
.acct-pop[hidden] { display: none; }
.ap-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ap-kind { font: 900 15px/1 var(--f-display); letter-spacing: 0.06em; color: var(--loot); }
.ap-net { font-size: 11px; color: #9aa3b5; border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; }
.ap-name { margin: 0; font-weight: 800; font-size: 16px; }
.ap-addr { margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); font: 600 12px/1.35 ui-monospace, monospace; word-break: break-all; user-select: all; }
.ap-row { display: flex; gap: 8px; }
.ap-row > * { flex: 1; text-align: center; padding: 9px 10px; text-decoration: none; }
.ap-wide { width: 100%; padding: 9px 10px; }
.ap-bal { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ap-bal li { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-items: center; font-size: 13px; }
.ap-bal li b { text-align: end; font-weight: 700; }
.ap-th span { font-size: 11px; color: #9aa3b5; text-align: end; }
.ap-sym { font-weight: 800; color: var(--c); }
.ap-out { justify-self: center; color: #ff8a8a; }
@media (max-width: 720px) {
  .tb-acct { max-width: 120px; padding: 6px 9px 6px 7px; font-size: 12px; }
}

/* ---------------------------------------------------------------- bridge tab */
.bridge { display: grid; gap: 10px; }
.br-dir { margin-bottom: 2px; }
.br-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bridge label { display: grid; gap: 4px; font-size: 12px; color: #9aa3b5; }
.bridge select, .bridge input { width: 100%; min-width: 0; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.35); color: var(--paper); font: inherit; font-size: 14px; }
.br-wide input { font-family: ui-monospace, monospace; font-size: 12px; }
.br-est { margin: 0; min-height: 1.2em; font-size: 13px; }
.br-est.bad, .bridge .bad { color: #ff8a8a; }
.br-h { margin: 10px 0 0; }
.br-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.br-link { display: grid; gap: 2px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--paper); text-decoration: none; }
.br-link:hover { border-color: var(--loot); }
.br-link span { font-size: 11px; color: #9aa3b5; }
.br-dep { display: grid; gap: 8px; }
.br-dep p { margin: 0; }
.br-addr { font-size: 13px; }
.br-status { font-weight: 800; color: #f7c948; }
.br-status.s-SUCCESS { color: #4ade80; }
.br-status.s-FAILED, .br-status.s-REFUNDED { color: #ff8a8a; }
@media (max-width: 520px) {
  .br-grid { grid-template-columns: 1fr; }
}
.ttl.t-premium { color: #1a1205; border: 0; background: linear-gradient(110deg, #b8860b 0%, #ffd76a 22%, #fff4c2 32%, #ffd76a 42%, #c9971c 60%, #ffe08a 80%, #b8860b 100%); background-size: 220% 100%; animation: ttl-gold 3.2s linear infinite; box-shadow: 0 0 16px -2px rgba(255, 200, 60, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.45); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); font-weight: 900; }
@keyframes ttl-gold { to { background-position: -220% 0; } }

/* ---------------------------------------------------------------- mail + fortune wheel */
.mail-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mail { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 10px; min-height: 320px; }
.mail-list { display: grid; align-content: start; gap: 6px; }
.mail-row { display: flex; gap: 10px; align-items: center; text-align: start; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(14, 17, 25, 0.9); color: var(--paper); cursor: pointer; }
.mail-row.on { border-color: var(--loot); }
.mail-row.unread b::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-inline-start: 6px; border-radius: 50%; background: #ff4d6d; vertical-align: middle; }
.mail-ico { font-size: 20px; }
.mail-head { display: grid; gap: 2px; min-width: 0; }
.mail-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-head small { color: #9aa3b5; font-size: 11px; }
.mail-view { padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(20, 24, 34, 0.92), rgba(10, 12, 18, 0.92)); display: grid; align-content: start; gap: 8px; }
.mail-view h3 { margin: 0; font-size: 20px; }
.mail-body { line-height: 1.5; color: #d9deea; white-space: normal; }
.mail-gift { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-radius: 12px; border: 1px dashed rgba(255, 211, 77, 0.6); background: rgba(255, 211, 77, 0.06); }
.mail-gift .ok { color: #4ade80; }
.mail-spin { animation: spin-glow 1.6s ease-in-out infinite; }
@keyframes spin-glow { 50% { box-shadow: 0 0 26px rgba(255, 211, 77, 0.8); } }
.wheel-ov { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(3, 4, 8, 0.82); backdrop-filter: blur(6px); }
.wheel-ov[hidden] { display: none; }
.wheel-box { width: min(440px, 100%); display: grid; gap: 10px; justify-items: center; text-align: center; padding: 18px; border-radius: 20px; border: 1px solid rgba(255, 211, 77, 0.4); background: radial-gradient(90% 70% at 50% 30%, rgba(255, 211, 77, 0.14), transparent 70%), #0c0e14; }
.wheel-wrap { position: relative; width: min(320px, 78vw); aspect-ratio: 1; }
.wheel-rot { width: 100%; height: 100%; will-change: transform; }
.wheel-svg { width: 100%; height: 100%; filter: drop-shadow(0 0 22px rgba(255, 211, 77, 0.35)); }
.wheel-pin { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 2; color: #ffd34d; font-size: 30px; text-shadow: 0 2px 6px #000; }
.wheel-out { min-height: 20px; }
.wheel-prize { display: grid; justify-items: center; gap: 4px; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--r); box-shadow: 0 0 24px -4px var(--r); animation: prize-pop 0.5s ease-out; }
.wheel-prize p { margin: 0; }
.wheel-prize img { max-height: 126px; }
.wheel-cash { font: 900 40px/1 var(--f-display); color: #4ade80; }
@keyframes prize-pop { from { transform: scale(0.6); opacity: 0; } }
@media (max-width: 640px) {
  .mail { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- shop fortune wheel */
.fortune { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: center; gap: 16px; margin-bottom: 14px; padding: 16px; border-radius: 18px; border: 1px solid rgba(255, 211, 77, 0.45); background: radial-gradient(80% 140% at 100% 0%, rgba(255, 211, 77, 0.16), transparent 60%), linear-gradient(135deg, #171326, #0b0d14); }
.fw-head { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
.fw-title { margin: 2px 0 4px; font: 900 clamp(22px, 3vw, 32px)/1 var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; background: linear-gradient(90deg, #ffd34d, #ff6bd5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fw-bank { display: grid; gap: 4px; justify-items: center; min-width: 170px; padding: 10px 14px; border-radius: 14px; border: 1px dashed rgba(255, 211, 77, 0.6); background: rgba(0, 0, 0, 0.35); }
.fw-bank small { color: #9aa3b5; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.fw-bank b { font: 900 30px/1 var(--f-display); color: #ffd34d; text-shadow: 0 0 18px rgba(255, 211, 77, 0.5); }
.fw-bar { width: 100%; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.fw-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd34d, #ff6bd5); }
.fw-row { display: flex; gap: 8px; flex-wrap: wrap; }
.fw-row select { flex: 1 1 160px; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.35); color: var(--paper); }
.fw-go { flex: 1 1 200px; }
.fw-odds ul { margin: 6px 0; padding-inline-start: 18px; display: grid; gap: 2px; font-size: 13px; }
.fw-wins { margin: 0; font-size: 13px; color: #d9deea; }
.fw-jackpot { display: grid; justify-items: center; gap: 2px; margin-bottom: 8px; padding: 12px 18px; border-radius: 14px; background: linear-gradient(135deg, #b8860b, #ffd76a, #b8860b); color: #1a1205; animation: prize-pop 0.6s ease-out; box-shadow: 0 0 40px rgba(255, 211, 77, 0.7); }
.fw-jackpot b { font: 900 42px/1 var(--f-display); }
.fw-jackpot small { font-weight: 900; letter-spacing: 0.1em; }
@media (max-width: 560px) {
  .fw-head { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- import a coin */
.asset.coin-add { border-style: dashed; opacity: 0.9; }
.coin-pop { display: grid; gap: 8px; margin-top: 8px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(10, 12, 18, 0.95); }
.coin-pop[hidden] { display: none; }
.coin-pop input { width: 100%; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.35); color: var(--paper); }
.coin-rows { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; }
.coin-row { display: grid; grid-template-columns: 22px auto 1fr auto; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.coin-row img, .coin-dot { width: 22px; height: 22px; border-radius: 50%; background: #2a2f3d; }
.coin-row .fine { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coin-row button { padding: 5px 10px; }
.coin-ok { color: #4ade80; font-size: 12px; font-weight: 800; }

/* the server went quiet (no picture for over a second) */
.lagwarn { position: fixed; top: 112px; left: 50%; transform: translateX(-50%); z-index: 6; padding: 8px 14px; border-radius: 10px; background: rgba(120, 20, 20, 0.85); border: 1px solid rgba(255, 92, 108, 0.7); color: #fff; font: 600 13px/1.2 'IBM Plex Mono', monospace; letter-spacing: 0.04em; pointer-events: none; animation: lagpulse 1s ease-in-out infinite alternate; }
@keyframes lagpulse { from { opacity: 0.75; } to { opacity: 1; } }

/* zombies: buy the whole squad back on its feet */
.gl-btn.gl-revive { display: none; }
body.z-on .gl-btn.gl-revive { display: flex; }
.gl-btn.gl-revive .gl-ico { color: #ffd166; }

/* where the raid is played: the closest region by ping, or the one you pick */
.regions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 12px; }
.regions .eyebrow { width: 100%; }
.reg { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); background: rgba(10,12,18,0.6); color: var(--bone, #efe9dc); font: 600 13px/1.1 var(--f-ui, sans-serif); cursor: pointer; }
.reg.on { border-color: rgba(255,180,67,0.8); box-shadow: 0 0 0 1px rgba(255,180,67,0.35) inset; }
.reg:disabled { opacity: 0.5; cursor: default; }
.reg-m { font: 600 11px/1 var(--f-num, monospace); color: var(--dust, #9aa); }
.reg-m.good { color: #3ddc97; } .reg-m.ok { color: #ffd166; } .reg-m.bad { color: #ff6b6b; }
.reg.auto { justify-content: center; align-self: stretch; font-size: 12px; color: var(--dust, #9aa); }

.prep-server { margin: 6px 0 0; font: 600 13px/1.4 var(--f-ui, sans-serif); color: var(--dust, #9aa); }
.prep-server b.good { color: #3ddc97; } .prep-server b.ok { color: #ffd166; } .prep-server b.bad { color: #ff6b6b; }

/* leaderboards: every PvP player by K/D, and the ranked season */
.rd-tabs { display: flex; gap: 6px; margin: 0 0 14px; }
.rd-tabs button { flex: 1; padding: 11px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); background: rgba(10,12,18,0.6); color: var(--dust, #9aa); font: 800 13px/1 var(--f-ui, sans-serif); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.rd-tabs button[aria-selected="true"] { color: #0b0b0b; background: linear-gradient(180deg, #ffc24d, #ff8a1f); border-color: transparent; }
.kd-big { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 4px 0 8px; }
.kd-big b { font: 900 44px/1 var(--f-num, monospace); }
.kd-big span { font: 700 11px/1 var(--f-ui, sans-serif); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dust, #9aa); }
.kd-hi, .kd-hi b { color: #3ddc97; } .kd-ok, .kd-ok b { color: #ffd166; } .kd-lo, .kd-lo b { color: #ff8a8a; }
.rd-sort { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.rd-sort button { padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: transparent; color: var(--bone, #efe9dc); font: 700 12px/1 var(--f-ui, sans-serif); cursor: pointer; }
.rd-sort button[aria-pressed="true"] { border-color: rgba(255,180,67,0.8); color: #ffd58a; }
.rd-table tr[data-pid] { cursor: pointer; }
.rd-table tr[data-pid]:hover td { background: rgba(255,255,255,0.04); }
.rd-who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pf-kd { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; padding: 8px 4px 4px; }
.pf-kd b { font: 900 30px/1 var(--f-num, monospace); }
.pf-kd span { font: 600 12px/1.2 var(--f-ui, sans-serif); color: var(--dust, #9aa); }

/* swap: two cards side by side on a wide screen, the wallet first */
.swap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 14px; align-items: start; }
.swap-grid .swap-card { margin: 0; }
.sw-acct { margin: -4px 0 8px; font-family: var(--f-num, monospace); }
.sw-box { border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; background: rgba(6,8,12,0.55); padding: 10px 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.sw-top, .sw-bot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.sw-mid { display: flex; align-items: center; gap: 10px; }
.sw-mid input { flex: 1; min-width: 0; text-align: right; font: 700 26px/1.1 var(--f-num, monospace); background: transparent; border: 0; color: var(--bone, #efe9dc); padding: 4px 0; }
.sw-mid input:focus { outline: none; }
.sw-box:focus-within { border-color: rgba(255,180,67,0.7); }
.sw-out { flex: 1; text-align: right; font: 700 24px/1.1 var(--f-num, monospace); color: var(--bone, #efe9dc); overflow-wrap: anywhere; }
.sw-out .fine { font-size: 12px; }
.sw-flip { display: block; margin: -4px auto; position: relative; z-index: 1; }
.tk-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px 7px 7px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); color: var(--bone, #efe9dc); font: 700 15px/1 var(--f-ui, sans-serif); cursor: pointer; white-space: nowrap; }
.tk-btn:hover { border-color: rgba(255,180,67,0.6); }
.tk-caret { color: var(--dust, #9aa); font-size: 12px; }
.tk-logo { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; background: rgba(255,255,255,0.08); }
.tk-dot { display: inline-grid; place-items: center; font: 800 12px/1 var(--f-ui, sans-serif); color: #0b0b0b; background: linear-gradient(180deg, #ffc24d, #ff8a1f); }
.sw-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0 4px; font-size: 13px; }
.sw-facts dt { color: var(--dust, #9aa); }
.sw-facts dd { margin: 0; text-align: right; }
.sw-facts dd.ok { color: #3ddc97; } .sw-facts dd.warn { color: #ffd166; } .sw-facts dd.bad { color: #ff6b6b; }
.sw-warn { margin: 4px 0; padding: 8px 10px; border-radius: 10px; background: rgba(255,92,108,0.12); border: 1px solid rgba(255,92,108,0.4); color: #ffb3b3; font-size: 13px; }
.sw-hold { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.sw-hold li { display: grid; grid-template-columns: 26px auto 1fr auto; align-items: center; gap: 8px; font-size: 14px; }
.sw-hold li .num { text-align: right; }
.tk-pop { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.55); display: grid; place-items: center; padding: 16px; }
.tk-pop[hidden] { display: none; }
.tk-sheet { width: min(440px, 100%); max-height: min(640px, 88vh); display: flex; flex-direction: column; gap: 10px; background: #0f121b; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 14px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.tk-head { display: flex; justify-content: space-between; align-items: center; }
.tk-sheet input { width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: var(--bone, #efe9dc); font: 600 15px/1.2 var(--f-ui, sans-serif); }
.tk-rows { overflow-y: auto; display: grid; gap: 2px; }
.tk-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; border: 0; background: transparent; color: var(--bone, #efe9dc); text-align: left; cursor: pointer; }
.tk-row:hover { background: rgba(255,255,255,0.06); }
.tk-row .tk-logo { width: 30px; height: 30px; }
.tk-name { display: grid; min-width: 0; } .tk-name small { color: var(--dust, #9aa); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-bal { color: var(--dust, #9aa); font-size: 13px; }

/* the map vote in the ready room */
.mappick { width: 100%; min-width: 0; max-width: 100%; }
.mappick .eyebrow { margin: 0 0 8px; text-align: center; }
.mappick .eyebrow .fine { text-transform: none; letter-spacing: 0; }
.mp-row { min-width: 0; max-width: 100%; display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.mp { position: relative; flex: 0 0 auto; width: 132px; scroll-snap-align: center; display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 5px 5px 7px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); color: var(--paper, #ebe5d6); cursor: pointer; font: inherit; transition: transform 0.12s, border-color 0.12s, background 0.12s; }
.mp img, .mp .mp-any { width: 100%; aspect-ratio: 176 / 112; border-radius: 8px; object-fit: cover; display: block; background: #0d1018; }
.mp .mp-any { display: grid; place-items: center; font: 900 34px/1 var(--f-display, Impact, sans-serif); color: rgba(255, 255, 255, 0.35); background: repeating-linear-gradient(45deg, #141824 0 10px, #10131c 10px 20px); }
.mp b { font-size: 12px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.25); }
.mp.on { border-color: #f7931a; background: rgba(247, 147, 26, 0.12); box-shadow: 0 0 0 1px #f7931a inset, 0 6px 22px rgba(247, 147, 26, 0.25); }
.mp-n { position: absolute; top: 9px; right: 9px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #f7931a; color: #111; font: 800 12px/22px var(--f-num, monospace); font-style: normal; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
@media (max-width: 560px) { .mp { width: 108px; } }

/* coming back every day: the calendar, tasks, rewards */
.sec-h.sub { font-size: 20px; margin-top: 18px; }
.daily { display: grid; gap: 14px; }
.dl-off { padding: 14px; border: 1px dashed var(--line); border-radius: 12px; }
.dl-card { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass, rgba(255,255,255,0.03)); display: grid; gap: 10px; }
.dl-card > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.dl-card h3 { margin: 2px 0 4px; font: 800 24px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: 0.03em; }
.dl-card .warn, .dl-pop .warn { color: #ff8a5c; }
.dl-cal { background: radial-gradient(120% 140% at 100% 0, rgba(247,147,26,0.16), transparent 55%), var(--glass, rgba(255,255,255,0.03)); border-color: rgba(247,147,26,0.35); }
.dl-today { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.dl-today .gift { margin: 0; }
.cal-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.cal-d { position: relative; aspect-ratio: 1; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); display: grid; place-items: center; font-size: 15px; }
.cal-n { position: absolute; top: 3px; left: 6px; font: 700 10px/1 var(--f-num, monospace); color: var(--dust); }
.cal-d.got { background: rgba(61,220,151,0.12); border-color: rgba(61,220,151,0.4); color: #3ddc97; }
.cal-d.big { border-color: rgba(255,209,102,0.45); background: linear-gradient(160deg, rgba(255,209,102,0.16), rgba(255,255,255,0.02)); }
.cal-d.today { border-color: #f7931a; box-shadow: 0 0 0 2px rgba(247,147,26,0.5), 0 0 22px rgba(247,147,26,0.45); animation: calPulse 1.6s ease-in-out infinite; }
@keyframes calPulse { 50% { box-shadow: 0 0 0 2px rgba(247,147,26,0.8), 0 0 32px rgba(247,147,26,0.7); } }
@media (max-width: 640px) { .cal-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .dl-today { align-items: stretch; width: 100%; } }
.dl-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.task { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--tarp, rgba(0,0,0,0.2)); }
.task.ready { border-color: rgba(61,220,151,0.6); box-shadow: 0 0 18px rgba(61,220,151,0.18); }
.task.claimed { opacity: 0.55; }
.task-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 800 11px/1 var(--f-num, monospace); background: rgba(255,255,255,0.06); color: var(--dust); }
.task.b-m .task-dot { color: #4cc9f0; } .task.b-h .task-dot { color: #c08bff; } .task.b-w .task-dot { color: #ffd166; }
.task.ready .task-dot { background: #3ddc97; color: #062; }
.task-body { min-width: 0; display: grid; gap: 5px; }
.task-name { margin: 0; font-weight: 700; }
.task-gifts { margin: 0; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.task-gifts .fine { margin-left: auto; }
.gift { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 3px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); white-space: nowrap; }
.gift i { font-style: normal; display: grid; place-items: center; min-width: 18px; height: 18px; border-radius: 50%; font-size: 10px; background: rgba(255,255,255,0.1); }
.gift.g-credit i { background: #3ddc97; color: #062; } .gift.g-box i { background: #c08bff; } .gift.g-spin i { background: #ff7ac6; }
.gift.g-pass i { background: #ffd166; color: #221; } .gift.g-xp i { background: #4cc9f0; color: #022; } .gift.g-boost i { background: #f7931a; color: #221; font-size: 8px; }
.gift.big { font-size: 14px; padding: 4px 12px 4px 4px; } .gift.big i { min-width: 26px; height: 26px; font-size: 13px; }
.dl-sweep { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--dust); }
.dl-sweep.got { color: #3ddc97; }
.dl-perks { display: flex; flex-wrap: wrap; gap: 8px; }
.perk { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; color: var(--dust); }
.perk b { color: var(--paper); margin-right: 4px; }
.perk.on { border-color: rgba(247,147,26,0.5); color: var(--paper); background: rgba(247,147,26,0.1); }
.ach-acts { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.ach .task-gifts { margin-top: 6px; }
.dl-pop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); }
.dl-pop[hidden] { display: none; }
.dl-pop-card { width: min(440px, 100%); text-align: center; padding: 22px 20px; border-radius: 18px; border: 1px solid rgba(247,147,26,0.5); background: radial-gradient(120% 90% at 50% 0, rgba(247,147,26,0.25), transparent 60%), #10131c; box-shadow: 0 30px 90px rgba(0,0,0,0.7); animation: popIn 0.35s cubic-bezier(.2,1.4,.4,1); display: grid; gap: 10px; }
.dl-pop-card h3 { margin: 0; font: 900 30px/1.05 var(--f-display); text-transform: uppercase; }
.dl-pop-gifts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0; }
.dl-pop-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
@keyframes popIn { from { transform: scale(0.85); opacity: 0; } }

/* phones: four tabs and More (a sheet of big tiles), a lighter top bar, toasts out of the way */
.nav-more, .more-sheet { display: none; }
@media (max-width: 760px) {
  .menu-nav .nav-btn[data-page]:not([data-page='play']):not([data-page='shop']):not([data-page='achievements']):not([data-page='inventory']) { display: none; }
  .nav-more { display: flex; }
  .menu-nav { overflow: visible; }
  .nav-btn { font-size: 11px; }
  .nav-btn span { overflow: visible; text-overflow: clip; }
  .more-sheet:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); }
  .more-card { position: absolute; left: 10px; right: 10px; bottom: calc(70px + var(--safe-b)); padding: 12px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.1); background: #0f121b; box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6); animation: sheetUp 0.22s cubic-bezier(0.2, 1.2, 0.4, 1); }
  @keyframes sheetUp { from { transform: translateY(30px); opacity: 0; } }
  .more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .more-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.04); color: var(--paper); font: 700 12.5px/1.15 var(--f-ui); text-align: center; }
  .more-tile svg { width: 26px; height: 26px; }
  .more-tile.on { border-color: var(--loot); background: rgba(247, 147, 26, 0.12); }
  .more-tile .nav-badge { top: 6px; inset-inline-start: auto; right: 8px; }
  /* the top bar: the language moves to Settings, the balances stay */
  .topbar .lang-pick { display: none; }
  .tb-right { gap: 6px; }
  /* toasts: small, under the top bar, never over the Play button or the tabs */
  .toast { top: calc(var(--top-h) + var(--safe-t) + 8px); bottom: auto; padding: 8px 12px; font-size: 13px; border-radius: 10px; width: max-content; max-width: calc(100% - 24px); text-align: center; }
}
@media (max-width: 760px) {
  /* the ready room fits a phone: small seats, the map row, Ready always in reach */
  .prep-inner { gap: 12px; padding-bottom: 0; }
  .prep-count { font-size: clamp(44px, 14vw, 72px); }
  .prep-status { font-size: 13px; }
  .lineup { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .slot { padding: 6px 2px 5px; gap: 3px; border-radius: 8px; }
  .slot svg { width: 22px; height: 32px; }
  .slot img.fig { width: 34px; height: 48px; }
  .slot .sn { font-size: 9.5px; }
  .slot .slot-tt, .slot .slot-wp { display: none; }
  .mp { width: 100px; }
  .prep-actions { position: sticky; bottom: 0; z-index: 3; width: calc(100% + 32px); margin-inline: -16px; padding: 12px 16px calc(12px + var(--safe-b)); background: linear-gradient(0deg, rgba(7, 9, 15, 0.98) 70%, rgba(7, 9, 15, 0)); }
  .prep-actions .cta { min-width: 0; flex: 1 1 100%; }
  .prep-actions .ghost { flex: 1 1 0; }
  /* the menu card: the Tasks tab already counts achievements, the status line is noise */
  .pf-ach, .net-status { display: none; }
  .now-playing { bottom: calc(76px + var(--safe-b)); }
}

/* ------------------------------------------------------------ style: frames, banners, names */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spinAng { to { --ang: 360deg; } }
@keyframes glowPulse { 50% { box-shadow: 0 0 22px 2px var(--c1); } }
@keyframes flicker { 0%, 100% { opacity: 1; } 41% { opacity: 1; } 42% { opacity: 0.45; } 44% { opacity: 1; } 71% { opacity: 0.8; } }
.frm { position: relative; isolation: isolate; }
.frm::before { content: ''; position: absolute; inset: -4px; border-radius: 16px; padding: 3px; z-index: 2; pointer-events: none;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.frm::after { content: ''; position: absolute; inset: -4px; border-radius: 16px; z-index: 1; pointer-events: none; box-shadow: 0 0 12px -2px var(--c1); }
.frm-mint::after, .frm-neon::after { animation: glowPulse 1.8s ease-in-out infinite; }
.frm-neon::before { animation: flicker 3.2s infinite; }
.frm-ember::after { animation: glowPulse 0.9s ease-in-out infinite alternate; }
.frm-circuit::before, .frm-gold::before, .frm-frost::before, .frm-inferno::before, .frm-void::before, .frm-prism::before, .frm-toxic::before {
  background: conic-gradient(from var(--ang), var(--c1), var(--c2), var(--c1), var(--c2), var(--c1)); animation: spinAng 3s linear infinite; padding: 4px; }
.frm-gold::before { background: conic-gradient(from var(--ang), var(--c2), #fffbe6 10%, var(--c1) 25%, var(--c2) 50%, #fffbe6 60%, var(--c1) 75%, var(--c2)); }
.frm-inferno::before { animation-duration: 1.4s; }
.frm-inferno::after { animation: glowPulse 0.6s ease-in-out infinite alternate; box-shadow: 0 0 18px var(--c2); }
.frm-void::after { box-shadow: 0 0 26px 4px rgba(168, 85, 247, 0.55), inset 0 0 18px rgba(0, 0, 0, 0.8); animation: glowPulse 2.4s ease-in-out infinite; }
.frm-prism::before { background: conic-gradient(from var(--ang), #ff3cc8, #ffd166, #3ddc97, #3ce6ff, #a86bff, #ff3cc8); animation-duration: 2s; }
.frm-prism::after { box-shadow: 0 0 22px rgba(255, 255, 255, 0.45); animation: glowPulse 1.5s infinite; }
.frm-frost::after { box-shadow: 0 0 16px rgba(186, 230, 253, 0.6); }
.frm-toxic::before { animation-duration: 5s; }

.bnr { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none; opacity: 0.55; background: linear-gradient(135deg, var(--c2), var(--c1)); }
.bnr::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 9, 15, 0.85), rgba(7, 9, 15, 0.25)); }
@keyframes bnrMove { to { background-position: var(--to, 200px 0); } }
.bnr-grid { background: linear-gradient(var(--c1) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, var(--c1) 1px, transparent 1px) 0 0 / 28px 28px, var(--c2); --to: 0 280px; animation: bnrMove 14s linear infinite; }
.bnr-stripes { background: repeating-linear-gradient(45deg, var(--c1) 0 16px, var(--c2) 16px 32px); background-size: 45px 45px; --to: 450px 0; animation: bnrMove 10s linear infinite; }
.bnr-sunset { background: linear-gradient(0deg, transparent 0 48%, rgba(255,255,255,0.15) 48% 50%, transparent 50%) 0 0 / 100% 18px, linear-gradient(180deg, var(--c2), var(--c1) 60%, #1a0630); --to: 0 180px; animation: bnrMove 6s linear infinite; }
.bnr-ocean { background: radial-gradient(60% 40% at 50% 100%, var(--c1), transparent), repeating-radial-gradient(circle at 30% 120%, rgba(255,255,255,0.08) 0 6px, transparent 6px 22px), var(--c2); background-size: 100% 100%, 300px 300px, auto; --to: 0 0, 300px -300px, 0 0; animation: bnrMove 18s linear infinite; }
.bnr-matrix { background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(0,0,0,0.6) 10px 14px), linear-gradient(180deg, transparent 0 30%, var(--c1) 50%, transparent 52%) 0 0 / 100% 120px, var(--c2); --to: 0 0, 0 720px; animation: bnrMove 4s linear infinite; }
.bnr-aurora { background: radial-gradient(40% 70% at 20% 30%, var(--c1), transparent), radial-gradient(40% 70% at 80% 60%, var(--c2), transparent), #050816; background-size: 200% 200%; --to: 100% 50%; animation: bnrMove 9s ease-in-out infinite alternate; }
.bnr-lava { background: radial-gradient(30% 40% at 30% 70%, var(--c1), transparent), radial-gradient(25% 35% at 70% 30%, #ffb347, transparent), var(--c2); background-size: 160% 160%; --to: 100% 100%; animation: bnrMove 7s ease-in-out infinite alternate; }
.bnr-galaxy { background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #fff, transparent), radial-gradient(2px 2px at 40% 80%, #fff, transparent), radial-gradient(50% 60% at 60% 40%, var(--c1), transparent), var(--c2); background-size: 120px 120px, 90px 90px, 160px 160px, 100% 100%, auto; --to: 120px 60px, -90px 90px, 160px -80px, 0 0, 0 0; animation: bnrMove 30s linear infinite; }
@keyframes bolt { 0%, 88%, 100% { filter: brightness(1); } 90% { filter: brightness(2.6); } 92% { filter: brightness(1.2); } 94% { filter: brightness(2.2); } }
.bnr-storm { background: linear-gradient(160deg, #334155, var(--c2)); animation: bolt 4s infinite; }
.bnr-bull { background: repeating-linear-gradient(90deg, transparent 0 10px, var(--c1) 10px 16px, transparent 16px 26px) 0 100% / 260px 60%, linear-gradient(0deg, var(--c2), #000); background-repeat: repeat-x, no-repeat; --to: -260px 100%, 0 0; animation: bnrMove 6s linear infinite; }
.bnr-genesis { background: linear-gradient(115deg, #ff3cc8, #ffd166, #3ddc97, #3ce6ff, #a86bff, #ff3cc8); background-size: 300% 100%; --to: 300% 0; animation: bnrMove 8s linear infinite; opacity: 0.6; }

.nfx { font-weight: 800; }
.nfx-mint, .nfx-sky { color: var(--c1); }
@keyframes nfxSweep { to { background-position: -200% 0; } }
.nfx-gold, .nfx-ice, .nfx-galaxy, .nfx-rainbow, .nfx-prism, .nfx-fire { background: linear-gradient(90deg, var(--c2), #fffbe6, var(--c1), var(--c2)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: nfxSweep 2.6s linear infinite; }
.nfx-fire { background: linear-gradient(0deg, var(--c2), var(--c1), #fff3c4); background-size: 100% 200%; animation: fireUp 0.9s ease-in-out infinite alternate; filter: drop-shadow(0 0 4px rgba(255, 106, 0, 0.7)); }
@keyframes fireUp { to { background-position: 0 100%; } }
.nfx-galaxy { background-image: linear-gradient(90deg, var(--c2), #fff, var(--c1), var(--c2)); filter: drop-shadow(0 0 4px rgba(124, 58, 237, 0.7)); }
.nfx-rainbow, .nfx-prism { background-image: linear-gradient(90deg, #ff4d6d, #ffd166, #3ddc97, #45c4ff, #a86bff, #ff4d6d); animation-duration: 3s; }
.nfx-prism { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6)) saturate(0.7) brightness(1.3); }
@keyframes toxGlow { 50% { text-shadow: 0 0 10px var(--c2); } }
.nfx-toxic { color: var(--c1); animation: toxGlow 1.6s ease-in-out infinite; }
@keyframes neonFlick { 0%, 100% { opacity: 1; text-shadow: 0 0 6px var(--c2), 0 0 12px var(--c1); } 48% { opacity: 1; } 50% { opacity: 0.5; text-shadow: none; } 52% { opacity: 1; } }
.nfx-neon { color: var(--c1); animation: neonFlick 2.4s infinite; }
@keyframes glitchShift { 0%, 100% { text-shadow: 1px 0 var(--c1), -1px 0 var(--c2); transform: none; } 20% { text-shadow: -2px 0 var(--c1), 2px 0 var(--c2); transform: translateX(1px); } 40% { text-shadow: 2px 1px var(--c1), -2px -1px var(--c2); } 60% { transform: translateX(-1px); } }
.nfx-glitch { color: #fff; display: inline-block; animation: glitchShift 0.9s steps(2) infinite; }
@media (prefers-reduced-motion: reduce) { .frm::before, .frm::after, .bnr, .nfx { animation: none !important; } }
.pf-top { position: relative; padding: 10px; border-radius: 14px; }
.pf-top > :not(.bnr) { position: relative; z-index: 1; }
.pf-figw { display: inline-block; border-radius: 12px; }
.pf-figw .pf-fig { display: block; border-radius: 12px; }
.hero > .bnr { border-radius: inherit; }
.hero > :not(.bnr) { position: relative; z-index: 1; }
.slot .fig-w { display: inline-block; border-radius: 10px; }
.st-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.st-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color: var(--paper); font: inherit; cursor: pointer; text-align: center; }
.st-item b { font-size: 12px; } .st-item small { font-size: 10.5px; font-weight: 700; }
.st-item.on { border-color: var(--r, var(--loot)); box-shadow: 0 0 0 1px var(--r, var(--loot)) inset, 0 0 18px -6px var(--r, var(--loot)); }
.st-prev { position: relative; display: grid; place-items: center; width: 100%; height: 70px; border-radius: 8px; background: rgba(0,0,0,0.25); overflow: hidden; }
.st-prev img { max-width: 100%; max-height: 66px; }
.st-fr { display: inline-block; border-radius: 10px; padding: 2px; }
.st-fr img { display: block; border-radius: 8px; background: #0d1018; }
.st-bn { border-radius: 8px; } .st-bn .bnr { opacity: 0.85; } .st-bn b { position: relative; z-index: 1; font-size: 13px; }
.st-nm { font-size: 17px; }
.st-none { font-size: 26px; color: var(--dust); }
.gift.g-style i { background: var(--gc, #c08bff); color: #111; } .gift.g-style { border-color: var(--gc); }
.shop-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; display: grid; }
.hero > .bnr { opacity: 0.75; }
.rd-prizes { display: grid; gap: 8px; }
.rd-prow { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.rd-pz { display: flex; flex-direction: column; gap: 5px; padding: 10px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--d) 50%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--d) 14%, transparent), rgba(255,255,255,0.02)); }
.rd-pz b { color: var(--d); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
.rd-pz.got { opacity: 0.55; }
.rd-pz .gift { white-space: normal; }
.rr-prizes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }

/* the Tab table */
.sb-btn { position: absolute; top: calc(14px + var(--safe-t)); right: calc(16px + 150px + 10px + 50px + var(--safe-r)); width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: rgba(7, 9, 15, 0.7); color: var(--paper); pointer-events: auto; font-size: 18px; display: none; }
body.touch-on .sb-btn { display: grid; place-items: center; }
.sb { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(3, 4, 8, 0.45); pointer-events: auto; }
.sb[hidden] { display: none; }
.sb-card { width: min(720px, 100%); max-height: 86vh; overflow: auto; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(10, 13, 20, 0.94); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.sb-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.sb-card h3 { margin: 0; font: 800 20px/1 var(--f-display); text-transform: uppercase; letter-spacing: 0.05em; }
.sb-card table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sb-card th { text-align: right; font: 700 10.5px/1 var(--f-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dust); padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.sb-card td { text-align: right; padding: 7px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.sb-card .sb-n { text-align: left; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.sb-card th.sb-n { display: table-cell; }
.sb-card tr.me td { background: rgba(247, 147, 26, 0.12); color: var(--paper); }
.sb-card tr.dead td { opacity: 0.5; }
.sb-card small { color: var(--dust); font-size: 10px; }
.sb-st { margin-left: 4px; } .sb-st.dead { color: #ff6b6b; } .sb-st.out { color: #3ddc97; }
.sb-side td { text-align: left !important; font: 800 11px/1 var(--f-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dust); padding-top: 12px !important; }
.sb-card td.good { color: #3ddc97; } .sb-card td.ok { color: #ffd166; } .sb-card td.bad { color: #ff6b6b; }
@media (max-width: 720px) { .sb-btn { right: calc(16px + 96px + 8px + 44px + var(--safe-r)); width: 36px; height: 36px; } }

/* voice chat in the match */
.vc { position: absolute; left: calc(16px + var(--safe-l, 0px)); top: calc(118px + var(--safe-t)); display: flex; align-items: center; gap: 8px; pointer-events: auto; z-index: 6; }
.vc[hidden] { display: none; }
.vc-mic { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line); background: rgba(7, 9, 15, 0.72); color: var(--paper); font-size: 15px; cursor: pointer; }
.vc-mic small { font: 700 10px/1 var(--f-num, monospace); color: var(--dust); }
.vc-mic.on { border-color: #3ddc97; box-shadow: 0 0 12px rgba(61, 220, 151, 0.45); }
.vc-talk, .vc-n { font: 700 12px/1.2 var(--f-ui); color: #3ddc97; background: rgba(7, 9, 15, 0.6); padding: 4px 8px; border-radius: 8px; }
.vc-n { color: var(--dust); }

/* fortune wheel: the wheel itself (shop and full screen) */
.fw-side { display: grid; gap: 10px; min-width: 0; }
.fw-mini, .fw-big { position: relative; aspect-ratio: 1; cursor: pointer; }
.fw-mini { width: 100%; max-width: 260px; justify-self: center; }
.fw-mini .fw-rot { animation: fw-idle 40s linear infinite; transform-origin: 0 0; }
.fw-mini:hover .fw-rot { animation-duration: 8s; }
@keyframes fw-idle { to { transform: rotate(360deg); } }
.fw-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 26px rgba(255, 211, 77, 0.35)); overflow: visible; }
.fw-ico { font-size: 19px; }
.fw-tag { font: 900 11px/1 var(--f-num, monospace); fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, 0.7); stroke-width: 3px; letter-spacing: 0.04em; }
.fw-hub { font: 900 28px/1 var(--f-display); fill: #ffd34d; }
.fw-bulb { fill: #ffd34d; opacity: 0.35; animation: fw-bulb 1.2s steps(1) infinite; }
.fw-bulb.b2 { animation-delay: 0.6s; }
.spinning .fw-bulb { animation-duration: 0.24s; }
.spinning .fw-bulb.b2 { animation-delay: 0.12s; }
.landed .fw-bulb { animation: fw-bulb-win 0.5s ease-in-out 5; }
@keyframes fw-bulb { 0% { opacity: 1; filter: drop-shadow(0 0 4px #ffd34d); } 50% { opacity: 0.3; filter: none; } }
@keyframes fw-bulb-win { 50% { opacity: 1; fill: #fff; } }
.fw-rare path { filter: saturate(1.3); }
.fw-seg.r-epic .fw-ico, .fw-seg.r-rare .fw-ico { filter: drop-shadow(0 0 4px #fff); }
.fw-seg.win path { stroke: #fff; stroke-width: 4; animation: fw-win 0.6s ease-in-out infinite alternate; }
@keyframes fw-win { to { filter: brightness(1.8); } }
.fw-pointer { position: absolute; top: -4%; left: 50%; width: 0; height: 0; transform: translateX(-50%); transform-origin: 50% 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 30px solid #ffd34d; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 8px rgba(255, 211, 77, 0.8)); z-index: 2; pointer-events: none; }
.fw-pointer.kick { animation: fw-kick 0.12s ease-out; }
@keyframes fw-kick { 40% { transform: translateX(-50%) rotate(-16deg); } }
.fw-box { width: min(520px, 100%); max-height: 100%; overflow: auto; }
.fw-big { width: min(420px, 82vw, 54vh); cursor: default; }
.fw-big.spinning .fw-svg { filter: drop-shadow(0 0 40px rgba(255, 211, 77, 0.6)); }
.fw-free { animation: spin-glow 1.6s ease-in-out infinite; }
.fw-freenote { margin: 0; }
.fw-odds li { display: flex; justify-content: space-between; gap: 10px; padding-inline-start: 6px; border-inline-start: 3px solid var(--c); list-style: none; }
.fw-odds ul { padding-inline-start: 0; }
.fw-odds li b { font-variant-numeric: tabular-nums; color: var(--dust, #9aa3b5); }
.fw-burst { position: absolute; left: 50%; top: 4%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.fw-burst i { position: absolute; width: 8px; height: 12px; border-radius: 2px; animation: fw-conf var(--d) cubic-bezier(0.15, 0.7, 0.3, 1) forwards; }
@keyframes fw-conf { to { transform: translate(var(--x), calc(var(--y) + 160px)) rotate(var(--r)); opacity: 0; } }
.fw-bigwin { box-shadow: 0 0 50px -2px var(--r); animation: prize-pop 0.5s ease-out, fw-glow 1.2s ease-in-out 0.5s infinite alternate; }
@keyframes fw-glow { to { box-shadow: 0 0 80px 4px var(--r); } }
.fw-emo { font-size: 54px; }
.fw-gold { color: #ffd34d; }
.fw-red { color: #fb7185; }
.inv-spins { border-color: rgba(232, 121, 249, 0.5); }
@media (max-width: 720px) {
  .fortune { grid-template-columns: 1fr; }
  .fw-mini { max-width: 200px; }
}

.fw-list { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-height: 140px; overflow: auto; margin: 6px 0; }
.fw-chip { font-size: 11px; padding: 3px 7px; border-radius: 999px; border: 1px solid var(--r); background: color-mix(in srgb, var(--r) 14%, #0b0d14); }

/* offers: starter pack, featured store, Insider card */
.offers { display: grid; gap: 12px; margin-bottom: 14px; }
.of-starter { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 16px; border-radius: 18px; border: 1px solid rgba(61, 220, 151, 0.55); background: radial-gradient(90% 140% at 0% 0%, rgba(61, 220, 151, 0.18), transparent 60%), linear-gradient(135deg, #0f1d18, #0b0d14); }
.of-starter h3, .of-card h3 { margin: 2px 0 6px; font: 900 clamp(18px, 2.4vw, 24px)/1.1 var(--f-display); text-transform: uppercase; letter-spacing: 0.03em; }
.of-perks { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: #d9deea; }
.of-st-buy, .of-card-buy { display: grid; justify-items: center; gap: 4px; }
.of-st-buy b { font: 900 30px/1 var(--f-display); color: #3ddc97; }
.of-head { display: flex; align-items: end; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.of-title { margin: 2px 0 0; font: 900 clamp(20px, 2.6vw, 28px)/1 var(--f-display); text-transform: uppercase; letter-spacing: 0.04em; }
.of-left { font-size: 13px; color: var(--dust, #9aa3b5); }
.of-left b { font-variant-numeric: tabular-nums; color: #ffd34d; }
.of-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.of-item { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 12px 10px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--r) 60%, transparent); background: radial-gradient(100% 70% at 50% 0%, color-mix(in srgb, var(--r) 22%, transparent), transparent 70%), #0d1018; text-align: center; }
.of-item.r-legendary, .of-item.r-mythic { box-shadow: 0 0 22px -6px var(--r); }
.of-item img { height: 90px; max-width: 100%; object-fit: contain; }
.of-item b { font-size: 13px; }
.of-kind { position: absolute; top: 6px; left: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dust, #9aa3b5); }
.of-rar { font-size: 11px; font-weight: 800; color: var(--r); text-transform: uppercase; letter-spacing: 0.06em; }
.of-buy { width: 100%; }
.of-buy.armed { background: #ffd34d; color: #1a1205; animation: spin-glow 1s ease-in-out infinite; }
.of-owned { font-size: 12px; font-weight: 800; color: #3ddc97; padding: 8px 0; }
.of-card { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 16px; border-radius: 18px; border: 1px solid rgba(255, 211, 77, 0.5); background: radial-gradient(90% 140% at 100% 0%, rgba(255, 107, 213, 0.16), transparent 60%), linear-gradient(135deg, #1b1426, #0b0d14); }
.of-card.on { border-color: #3ddc97; }
.of-card-buy img { height: 70px; }
.bp-tiers { display: flex; gap: 6px; flex-wrap: wrap; }
.inv-openall { margin-inline-start: auto; }
@media (max-width: 640px) {
  .of-starter, .of-card { grid-template-columns: 1fr; }
  .of-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vip-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 3px 8px; border-radius: 6px; font: 900 12px/1 var(--f-display); letter-spacing: 0.06em; color: #0b0d14; background: linear-gradient(135deg, var(--v), color-mix(in srgb, var(--v) 55%, #fff)); box-shadow: 0 0 10px -2px var(--v); }
.of-vip { padding: 14px 16px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--v) 60%, transparent); background: radial-gradient(80% 140% at 0% 0%, color-mix(in srgb, var(--v) 16%, transparent), transparent 60%), #0d1018; display: grid; gap: 8px; }
.of-vip-top { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.of-vip-top > .vip-badge { font-size: 18px; padding: 8px 12px; }
.of-vip-prog { display: grid; gap: 4px; min-width: 0; }
.of-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.of-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--v), #fff); }
.of-vip-t { width: 100%; border-collapse: collapse; font-size: 12px; }
.of-vip-t th, .of-vip-t td { padding: 4px 6px; text-align: start; border-bottom: 1px solid var(--line); }
.of-vip-t tr.on td { background: rgba(255, 255, 255, 0.05); }
@media (max-width: 640px) {
  .of-vip-top { grid-template-columns: auto 1fr; }
  .of-vip-top > button, .of-vip-top > .of-owned { grid-column: 1 / -1; }
  .of-vip-t { font-size: 11px; }
}

/* ---------------------------------------------------------------- play tab: goals, modes, mode info */
.goals { display: grid; gap: 8px; margin: 4px 0 14px; }
.goal-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.goal { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; min-width: 170px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), transparent), var(--glass); color: var(--paper); text-align: start; cursor: pointer; transition: transform 0.15s, border-color 0.15s; }
.goal:hover { transform: translateY(-2px); border-color: #3a4459; }
.goal.hot { border-color: rgba(255, 211, 77, 0.7); box-shadow: 0 0 18px -8px #ffd34d; }
.goal-ico { font-size: 22px; line-height: 1; }
.goal-t { display: grid; gap: 2px; min-width: 0; }
.goal-t b { font-size: 13px; white-space: nowrap; }
.goal-t small { font-size: 11px; color: var(--dust); white-space: nowrap; }
.goal-bar { display: block; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-top: 2px; }
.goal-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3ddc97, #ffd34d); }

.modes-head { display: flex; align-items: end; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mode-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.mcat { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--dust); font: 700 13px/1 var(--f-ui); cursor: pointer; }
.mcat small { opacity: 0.7; font-weight: 600; }
.mcat[aria-selected='true'] { color: #0b0d14; background: var(--loot); border-color: var(--loot); }

.modes { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; }
.modes .mode-card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 0 0 12px; overflow: hidden; border-radius: 16px; min-height: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--mc) 10%, transparent), transparent 50%), var(--glass); }
.modes .mode-card > * { margin-inline: 12px; }
.modes .mode-card .mc-art { position: relative; margin: 0; height: 74px; display: grid; place-items: center; background: radial-gradient(70% 120% at 50% 100%, color-mix(in srgb, var(--mc) 55%, transparent), transparent 70%), linear-gradient(135deg, color-mix(in srgb, var(--mc) 25%, #0b0d14), #0b0d14); border-bottom: 1px solid color-mix(in srgb, var(--mc) 40%, transparent); }
.modes .mode-card .mc-ico { grid-row: auto; font-size: 38px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)); transition: transform 0.2s; }
.modes .mode-card:hover .mc-ico { transform: scale(1.12) rotate(-4deg); }
.mc-hot { position: absolute; top: 6px; left: 6px; padding: 3px 7px; border-radius: 999px; font: 800 10px/1 var(--f-ui); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; color: #1a0d05; background: #ffb347; }
.mc-hot.rk { color: #fff; background: #ff2dd4; }
.mc-live { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; font: 700 11px/1 var(--f-num); font-style: normal; background: rgba(0, 0, 0, 0.55); }
.modes .mode-card .mc-name { font-size: 16px; line-height: 1.15; margin-top: 4px; }
.modes .mode-card .mc-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.35; min-height: 2.7em; }
.mc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.mc-chips i { font: 600 11px/1 var(--f-num); font-style: normal; padding: 4px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: #d9deea; white-space: nowrap; }
.modes .mode-card .mc-wait { grid-column: auto; margin-top: 0; }
.modes .mode-card[aria-checked='true'] { border-color: var(--mc); box-shadow: 0 0 0 1px var(--mc), 0 14px 34px -18px var(--mc); }
.modes .mode-card[aria-checked='true']::after { content: '✓'; position: absolute; top: 48px; right: 10px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--mc); color: #0b0d14; font-weight: 900; font-size: 13px; }

.mode-info { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; margin: 12px 0 6px; padding: 16px 18px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--mc) 55%, transparent); background: radial-gradient(60% 140% at 0% 50%, color-mix(in srgb, var(--mc) 18%, transparent), transparent 70%), var(--glass-2, #11141c); animation: mi-in 0.25s ease-out; }
@keyframes mi-in { from { opacity: 0; transform: translateY(6px); } }
.mi-ico { font-size: 54px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6)); }
.mi-body h3 { margin: 2px 0 4px; font: 900 clamp(20px, 2.4vw, 26px)/1.1 var(--f-display); text-transform: uppercase; letter-spacing: 0.03em; color: var(--mc); }
.mi-d { margin: 0 0 8px; color: #d9deea; }
.mi-facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; color: #c9cfdc; }
.mi-facts b { color: var(--paper); }
.mi-side { display: grid; gap: 8px; min-width: 130px; }
.mi-side span { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); }
.mi-side small { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dust); }
.mi-side b { font: 800 15px/1.1 var(--f-num); display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 760px) {
  .mode-info { grid-template-columns: auto 1fr; }
  .mi-side { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); min-width: 0; }
  .mi-ico { font-size: 40px; align-self: start; }
}
@media (max-width: 640px) {
  .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .modes .mode-card { padding: 0 0 10px; }
  .modes .mode-card > * { margin-inline: 10px; }
  .modes .mode-card .mc-art { height: 58px; }
  .modes .mode-card .mc-ico { font-size: 30px; }
  .modes .mode-card .mc-sub { display: -webkit-box; font-size: 11px; }
  .modes .mode-card .mc-name { font-size: 14px; }
  .modes .mode-card[aria-checked='true']::after { top: 34px; }
  .mode-cats { overflow-x: auto; flex-wrap: nowrap; width: 100%; }
  .mcat { flex: none; }
  .goal { min-width: 150px; }
}
@media (max-width: 640px) {
  .mode-info { padding: 12px; gap: 8px 10px; }
  .mode-info .mi-d, .mode-info .mi-facts li:nth-child(3) { display: none; }
  .mode-info .mi-ico { font-size: 30px; }
  .mode-info .mi-body h3 { font-size: 18px; }
  .mode-info .mi-facts { font-size: 12px; }
  .mi-side span { padding: 6px 8px; }
}

/* ---------------------------------------------------------------- side menu (wide screens) */
@media (min-width: 761px) {
  :root { --nav-w: 236px; }
  .menu-nav { gap: 2px; padding-top: 10px; }
  .nav-group { margin: 12px 14px 4px; font: 800 10px/1 var(--f-ui); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(154, 163, 181, 0.6); }
  .nav-group:first-of-type { margin-top: 2px; }
  .nav-btn { gap: 11px; padding: 7px 10px; border-radius: 12px; }
  .nav-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--nc, var(--dust)); background: color-mix(in srgb, var(--nc, #9aa3b5) 12%, transparent); border: 1px solid color-mix(in srgb, var(--nc, #9aa3b5) 22%, transparent); transition: transform 0.15s, background 0.15s, box-shadow 0.15s; }
  .nav-ico svg { width: 19px; height: 19px; }
  .nav-txt { display: grid; gap: 1px; min-width: 0; }
  .nav-txt > span { color: var(--paper); font-size: 14px; }
  .nav-sub { font: 500 11px/1.2 var(--f-ui); color: var(--dust); opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav-sub.hot { color: #ffd166; opacity: 1; font-weight: 700; }
  .nav-btn:hover .nav-ico { transform: scale(1.06); background: color-mix(in srgb, var(--nc) 22%, transparent); }
  .nav-btn[aria-current='true'] { background: linear-gradient(90deg, color-mix(in srgb, var(--nc, #f7931a) 18%, transparent), transparent); box-shadow: inset 3px 0 0 var(--nc, var(--loot)); }
  .nav-btn[aria-current='true'] .nav-ico { color: #0b0d14; background: var(--nc); box-shadow: 0 0 16px -4px var(--nc); }
  .nav-btn[aria-current='true'] svg { color: inherit; }
  .nav-btn .nav-badge { top: 0; inset-inline-start: 30px; box-shadow: 0 0 0 2px #0b0d14; }
  .nav-me { position: sticky; bottom: 0; margin-top: auto; flex: none; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(160deg, rgba(247, 147, 26, 0.1), transparent 70%), #0d1018; color: var(--paper); text-align: start; cursor: pointer; box-shadow: 0 -10px 20px rgba(7, 9, 15, 0.9); }
  .nav-me[hidden] { display: none; }
  .nav-me svg { flex: none; }
  .nm-t { display: grid; gap: 3px; min-width: 0; flex: 1; }
  .nm-t b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nm-t small { font-size: 11px; color: var(--dust); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
  .nm-t .vip-badge { font-size: 9px; padding: 2px 5px; min-width: 0; }
  .nm-bar { display: block; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
  .nm-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--loot), #ffd166); }
}
@media (max-width: 760px) {
  .nav-group, .nav-sub, .nav-me { display: none !important; }
  .nav-ico { display: contents; }
  .nav-txt { display: contents; }
}
@media (min-width: 761px) and (max-height: 960px) {
  .nav-btn { padding: 4px 10px; }
  .nav-ico { width: 30px; height: 30px; border-radius: 9px; }
  .nav-group { margin: 7px 14px 2px; }
  .nav-me { padding: 7px 10px; }
}

/* Nyx, alive: hair sways, the hologram turns, sparks twinkle, moods change her face */
.nyx-svg .nx-ring { transform-origin: 120px 120px; animation: nx-ring 24s linear infinite; }
@keyframes nx-ring { to { transform: rotate(360deg); } }
.nyx-svg .nx-spark { transform-box: fill-box; transform-origin: center; animation: nx-spark 2.6s ease-in-out infinite; }
.nyx-svg .nx-spark.s2 { animation-delay: 0.7s; }
.nyx-svg .nx-spark.s3 { animation-delay: 1.3s; }
.nyx-svg .nx-spark.s4 { animation-delay: 1.9s; }
@keyframes nx-spark { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
.nyx-svg .nx-hairback { transform-origin: 120px 40px; animation: nx-hair 5.5s ease-in-out infinite; }
.nyx-svg .nx-lockL { transform-origin: 80px 96px; animation: nx-lock 4.2s ease-in-out infinite; }
.nyx-svg .nx-lockR { transform-origin: 162px 96px; animation: nx-lock 4.6s ease-in-out infinite reverse; }
@keyframes nx-hair { 50% { transform: rotate(1.4deg) skewX(1deg); } }
@keyframes nx-lock { 50% { transform: rotate(3deg); } }
.nyx-svg .nx-happy, .nyx-svg .nx-wink { opacity: 0; transition: opacity 0.15s; }
.nyx-svg.m-happy .nx-happy { opacity: 1; }
.nyx-svg.m-happy .nx-eyes { opacity: 0; }
.nyx-svg.m-wink .nx-wink { opacity: 1; }
.nyx-svg.m-wink .nx-eyes > g:last-child { opacity: 0; }
.nyx-svg .nx-brows { transition: transform 0.2s; }
.nyx-svg.m-wow .nx-brows, .nyx-svg.m-happy .nx-brows { transform: translateY(-3px); }
.nyx-svg.m-wow .nx-open { ry: 4.5; }
.nyx-svg.talking .nx-head { animation: nx-sway 7s ease-in-out infinite, nx-nod 0.6s ease-in-out infinite; }
@keyframes nx-nod { 50% { translate: 0 0.8px; } }
@media (prefers-reduced-motion: reduce) { .nyx-svg .nx-ring, .nyx-svg .nx-spark, .nyx-svg .nx-hairback, .nyx-svg .nx-lockL, .nyx-svg .nx-lockR { animation: none; } }

/* ---------------------------------------------------------------- first visit: name, region */
.welcome { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: radial-gradient(80% 70% at 50% 40%, rgba(247, 147, 26, 0.14), transparent 70%), rgba(3, 4, 8, 0.88); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.3s; }
.welcome.in { opacity: 1; }
.wel-card { position: relative; width: min(860px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: grid; grid-template-columns: 300px minmax(0, 1fr); border-radius: 26px; border: 1px solid rgba(247, 147, 26, 0.45); background: linear-gradient(135deg, rgba(24, 28, 42, 0.98), rgba(10, 12, 18, 0.98)); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7), 0 0 60px -20px rgba(247, 147, 26, 0.5); animation: wel-in 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.15); }
@keyframes wel-in { from { transform: translateY(30px) scale(0.96); opacity: 0; } }
.wel-nyx { position: relative; min-height: 360px; background: radial-gradient(circle at 50% 45%, rgba(176, 108, 255, 0.22), transparent 65%), radial-gradient(circle at 50% 80%, rgba(247, 147, 26, 0.2), transparent 60%); overflow: hidden; }
.wel-nyx svg { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 300px; height: auto; }
.wel-main { padding: 22px 24px 20px; display: grid; align-content: start; gap: 12px; min-width: 0; }
.wel-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wel-who { font: 600 12px var(--f-num); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dust); }
.wel-who b { color: var(--loot); font: 900 20px/1 var(--f-display); letter-spacing: 0.08em; }
.wel-dots { display: flex; gap: 5px; margin-inline-start: auto; }
.wel-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.wel-dots i.on { width: 22px; border-radius: 4px; background: var(--loot); }
.wel-dots i.past { background: rgba(247, 147, 26, 0.5); }
.wel-lang select { padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.35); color: var(--paper); }
.wel-t { margin: 0; font: 900 clamp(24px, 3.4vw, 34px)/1.1 var(--f-display); text-transform: uppercase; letter-spacing: 0.02em; background: linear-gradient(90deg, #ffd34d, #ff8fd6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wel-b { margin: 0; font-size: 17px; line-height: 1.55; color: #e3e7f1; }
.wel-namebox { display: flex; gap: 8px; }
.wel-namebox input { flex: 1; min-width: 0; width: 100%; padding: 14px 16px; border-radius: 14px; border: 2px solid rgba(247, 147, 26, 0.6); background: rgba(0, 0, 0, 0.4); color: var(--paper); font: 800 22px/1 var(--f-ui); }
.wel-namebox input:focus { outline: none; border-color: #ffd34d; box-shadow: 0 0 0 4px rgba(255, 211, 77, 0.18); }
.wel-dice { font-size: 24px; padding: 0 16px; border-radius: 14px; }
.wel-hint { margin: 0; font-size: 13px; color: var(--dust); }
.wel-hint.bad { color: #ff6b6b; }
.wel-acts { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.wel-acts .cta { padding: 14px 26px; font-size: 16px; }
.wel-regs { display: grid; gap: 8px; }
.wel-reg { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'f n ms' 'f n pl'; align-items: center; column-gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--paper); text-align: start; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.wel-reg:hover:not(:disabled) { transform: translateY(-1px); border-color: #3a4459; }
.wel-reg.on { border-color: var(--loot); background: rgba(247, 147, 26, 0.1); box-shadow: 0 0 0 1px var(--loot); }
.wel-reg.off { opacity: 0.45; cursor: not-allowed; }
.wr-flag { grid-area: f; font-size: 28px; }
.wr-n { grid-area: n; display: grid; gap: 2px; }
.wr-n b { font-size: 16px; }
.wr-n small { font-size: 12px; color: var(--dust); }
.wr-best { font-style: normal; font: 800 11px/1 var(--f-ui); color: #3ddc97; }
.wr-ms { grid-area: ms; font: 800 15px/1 var(--f-num); text-align: end; }
.wr-ms.good { color: #3ddc97; }
.wr-ms.ok { color: #ffd166; }
.wr-ms.bad { color: #ff6b6b; }
.wr-pl { grid-area: pl; font-size: 12px; color: var(--dust); text-align: end; }
.wel-reg.auto { grid-template-areas: 'f n'; grid-template-columns: auto 1fr; }
@media (max-width: 700px) {
  .wel-card { grid-template-columns: minmax(0, 1fr); }
  .wel-t { overflow-wrap: anywhere; font-size: 22px; }
  .wel-who { font-size: 10px; }
  .wel-lang select { max-width: 110px; }
  .wel-nyx { min-height: 170px; }
  .wel-nyx svg { width: 190px; bottom: -40px; }
  .wel-main { padding: 16px; }
  .wel-b { font-size: 15.5px; }
}

/* the tour card: bigger, easier text */
.tour-card { width: min(820px, calc(100vw - 24px)); grid-template-columns: 190px 1fr; }
.tour-nyx svg { width: 206px; }
.tour-count { margin-inline-start: auto; font: 700 12px var(--f-num); color: var(--dust); letter-spacing: 0.06em; }
.tut-title { margin: 2px 0 0; font: 900 clamp(19px, 2.4vw, 24px)/1.15 var(--f-display); text-transform: uppercase; letter-spacing: 0.02em; color: #ffd34d; }
.tut-title[hidden] { display: none; }
.tut-text { min-height: 5.5em; max-height: 42vh; overflow: auto; font-size: 16.5px; line-height: 1.55; color: var(--paper); }
.tut-text p { margin: 0 0 8px; }
.tut-text p:last-child { margin-bottom: 0; }
.tut-text b { color: #ffd34d; }
.nyx-dock .tut-text { min-height: 0; max-height: none; font-size: 15px; line-height: 1.4; }
@media (max-width: 760px) {
  .tour-card { grid-template-columns: 92px 1fr; }
  .tour-nyx svg { width: 120px; }
  .tut-text { font-size: 14.5px; max-height: 36vh; }
}
.tour-nyx svg, .wel-nyx svg, .nyx-face svg { pointer-events: none; }
@media (max-width: 760px) {
  .tut-text { max-height: 28vh; }
  .tut-title { font-size: 17px; }
}
/* during the tour any part of a page can be scrolled to the top, clear of Nyx's card */
.touring .pages { padding-bottom: 80vh; }
.touring .play-dock { position: relative; bottom: auto; }
/* phones: a compact card (Nyx as a small portrait in the header, the text full width, the
   buttons in one row), so more of the page stays in view */
@media (max-width: 760px) {
  .tour-card { grid-template-columns: 1fr; align-items: start; }
  .tour-nyx { position: absolute; left: 12px; top: 10px; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(247, 147, 26, 0.55); background: radial-gradient(circle at 50% 30%, #2a2140, #0d0f17); z-index: 1; }
  .tour-nyx svg { position: absolute; width: 112px; left: -31px; top: -6px; bottom: auto; }
  .tour-body { padding: 10px 12px 10px; gap: 4px; }
  .tour-who { padding-left: 58px; min-height: 22px; }
  .tut-title { padding-left: 58px; min-height: 26px; }
  .tut-text { max-height: 24vh; font-size: 14.5px; line-height: 1.5; }
  .tour-dots { display: none; }
  .tour-actions { flex-wrap: nowrap; gap: 6px; }
  .tour-actions .tour-skip { flex: 0 1 auto; min-width: 0; padding: 6px 8px; font-size: 12px; white-space: normal; line-height: 1.15; text-align: start; }
  .tour-actions .tour-grow { flex: 0 0 0; }
  .tour-actions .cta, .tour-actions .ghost { padding: 9px 13px; white-space: nowrap; }
}
.tour-card.top { bottom: auto !important; }
@media (max-width: 760px) {
  .tour-actions .tour-skip { max-width: 36%; white-space: normal !important; overflow-wrap: anywhere; }
}

/* medals: the badge over the title (medals.js) */
.streak { padding-top: 12vh; }
.st-medal { position: relative; z-index: 1; width: clamp(110px, 16vw, 168px); aspect-ratio: 1; margin-bottom: 4px; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.7)); }
.st-medal svg { width: 100%; height: 100%; display: block; overflow: visible; }
.streak .st-title { font-size: clamp(34px, 7vw, 78px); }
.streak.go .st-medal { animation: medal-in 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both, medal-out 0.35s 2.05s ease-in both; }
.streak.go .md-shine { animation: medal-shine 0.9s 0.45s ease-out both; }
.streak.go .md-glow { transform-origin: 100px 100px; animation: medal-glow 1.6s ease-in-out infinite; }
.streak.go .md-ico { transform-origin: 100px 100px; animation: medal-ico 0.5s 0.25s cubic-bezier(0.2, 1.8, 0.4, 1) both; }
@keyframes medal-in { 0% { transform: scale(2.6) rotate(-25deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes medal-out { to { transform: scale(0.6) translateY(-30px); opacity: 0; } }
@keyframes medal-shine { from { transform: skewX(-20deg) translateX(0); } to { transform: skewX(-20deg) translateX(300px); } }
@keyframes medal-glow { 0%, 100% { transform: scale(0.92); opacity: 0.7; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes medal-ico { from { transform: scale(0); } to { transform: scale(1); } }
/* headshot, long shot, knife: one style for the "skill" medals */
.streak.m-hs .st-title { color: #ff3b5c; text-shadow: 0 4px 0 #4d0614, 0 0 26px rgba(255, 59, 92, 0.6); }
.streak.m-long .st-title { color: #3ce6ff; text-shadow: 0 4px 0 #03384a, 0 0 26px rgba(60, 230, 255, 0.55); }
.streak.m-knife .st-title { color: #e8edf6; text-shadow: 0 4px 0 #2b3140, 0 0 22px rgba(200, 210, 230, 0.5); }
.streak[class*='m-'].go .st-title { animation: slam 2.4s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@media (prefers-reduced-motion: reduce) { .streak.go .st-medal, .streak.go .md-shine, .streak.go .md-glow, .streak.go .md-ico { animation: none; } }
.banner.low { top: 66%; font-size: 22px; }
.streak .st-title { font-size: clamp(28px, 5.4vw, 66px); max-width: calc(100vw - 32px); overflow-wrap: anywhere; }
.stake-priv { margin: 8px 2px 0; color: var(--dust); }
.pot-mine { margin: -6px 0 10px; text-align: center; color: var(--dust); }
.br-link.buy { border-color: rgba(247, 147, 26, 0.6); background: linear-gradient(135deg, rgba(247, 147, 26, 0.16), transparent 70%); }
.br-link.buy b { color: var(--loot); }

/* the Starknet page (starknet.js): the network's navy and coral */
.starknet { display: flex; flex-direction: column; gap: 16px; }
.sk-hero { display: flex; gap: 18px; align-items: center; padding: 22px; border-radius: 20px; border: 1px solid rgba(236, 121, 107, 0.35); background: radial-gradient(120% 140% at 0% 0%, rgba(236, 121, 107, 0.22), transparent 55%), linear-gradient(135deg, #10104a, #07071f 70%); box-shadow: 0 20px 60px rgba(12, 12, 79, 0.45); }
.sk-hero h2 { margin: 2px 0 6px; font: 900 clamp(26px, 4vw, 40px)/1 var(--f-display); text-transform: uppercase; color: #fafaff; }
.sk-hero .eyebrow { color: #ec796b; }
.sk-lede { margin: 0; color: #c9c9ee; line-height: 1.5; max-width: 62ch; }
.sk-logo { flex: none; width: 84px; height: 84px; filter: drop-shadow(0 8px 24px rgba(236, 121, 107, 0.45)); animation: sk-float 4s ease-in-out infinite; }
.sk-logo svg { width: 100%; height: 100%; }
@keyframes sk-float { 50% { transform: translateY(-5px) rotate(-3deg); } }
.sk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sk-card, .sk-btc { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 10px 14px; padding: 16px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(160deg, rgba(16, 16, 74, 0.7), rgba(10, 12, 18, 0.9)); }
.sk-card .sk-go, .sk-btc .sk-go { grid-column: 1 / -1; justify-self: start; }
.sk-ico { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; font-size: 26px; background: rgba(236, 121, 107, 0.14); border: 1px solid rgba(236, 121, 107, 0.35); }
.sk-txt h3 { margin: 0 0 4px; font: 800 18px/1.2 var(--f-display); text-transform: uppercase; color: #fafaff; }
.sk-txt p { margin: 0 0 8px; color: var(--dust); line-height: 1.45; font-size: 14px; }
.sk-st { font: 600 12px var(--f-num); letter-spacing: 0.06em; color: var(--dust); }
.sk-st.on { color: #3ddc97; }
.sk-btc { grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; border-color: rgba(247, 147, 26, 0.45); background: linear-gradient(135deg, rgba(247, 147, 26, 0.16), rgba(10, 12, 18, 0.9) 60%); }
.sk-btc .sk-ico { color: #f7931a; font-weight: 900; background: rgba(247, 147, 26, 0.14); border-color: rgba(247, 147, 26, 0.45); }
.sk-btc .sk-go { grid-column: auto; }
.sk-live { padding: 16px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(10, 12, 18, 0.7); }
.sk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 10px 0; }
.sk-stat { padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); }
.sk-stat b { display: block; font: 800 22px/1.1 var(--f-num); color: #fafaff; }
.sk-stat span { font-size: 12px; color: var(--dust); }
.nav-starknet .nav-ico { color: #ec796b; }
@media (max-width: 760px) {
  .sk-hero { flex-direction: column; align-items: flex-start; padding: 16px; }
  .sk-grid { grid-template-columns: 1fr; }
  .sk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-btc { grid-template-columns: 52px minmax(0, 1fr); }
  .sk-btc .sk-go { grid-column: 1 / -1; }
}
/* phones held sideways in a match: the track name would sit on the clock; it shows in the menus and the pause menu instead */
@media (max-height: 500px) { body:has(#hud:not([hidden])) .now-playing { display: none; } }

/* cashier: send by hand when a wallet will not load */
.dep-manual { margin-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 10px; }
.dep-manual summary { cursor: pointer; color: var(--muted, #9aa3b5); font-size: 0.9rem; }
.dep-manual .addr { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 0.78rem; padding: 8px; background: rgba(255, 255, 255, 0.04); border-radius: 6px; }
.dep-manual input { flex: 1; min-width: 0; }

/* ------------------------------------------------------------ The Descent */
.dx-panel { --dc: #34d399; display: flex; flex-direction: column; gap: 10px; margin: 10px 0; padding: 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--dc) 35%, transparent); background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--dc) 12%, transparent), transparent 70%), var(--tarp); }
.dx-panel .eyebrow { margin: 4px 0 0; }
.dx-diffs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dx-diff { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: start; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--tarp-2); color: var(--paper); font: inherit; cursor: pointer; transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s; }
.dx-diff:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--dc) 60%, transparent); }
.dx-diff.on { border-color: var(--dc); box-shadow: 0 0 18px color-mix(in srgb, var(--dc) 30%, transparent); background: color-mix(in srgb, var(--dc) 10%, var(--tarp-2)); }
.dx-diff b { color: var(--dc); font: 700 14px/1.1 var(--f-ui); }
.dx-diff small { font: 600 11px/1 var(--f-num); color: var(--paper); }
.dx-diff em { font-style: normal; font-size: 11px; color: var(--dust); line-height: 1.3; }
.dx-best { font-style: normal; font: 600 10.5px/1 var(--f-num); color: var(--gold); }
.dx-tix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dx-tk { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px dashed var(--line); }
.dx-tk.on { border-style: solid; border-color: var(--exit); background: rgba(61, 220, 151, 0.08); }
.dx-tk-ico { grid-row: span 2; font-size: 22px; }
.dx-tk b { font-size: 13px; }
.dx-tk small { font-size: 11px; color: var(--dust); }
.dx-packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dx-pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--tarp-2); color: var(--paper); font: inherit; cursor: pointer; }
.dx-pack:hover { border-color: var(--loot); }
.dx-pack b { font: 700 13px/1 var(--f-num); }
.dx-pack small { color: var(--loot); font: 600 11px/1 var(--f-num); }
.dx-pack i { position: absolute; top: -7px; inset-inline-end: -4px; font: 700 9.5px/1 var(--f-num); font-style: normal; padding: 2px 4px; border-radius: 6px; background: var(--exit); color: #04130b; }
.dx-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.dx-ms { --rc: #fff; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent); background: color-mix(in srgb, var(--rc) 8%, transparent); cursor: help; }
.dx-ms b { font: 700 10.5px/1 var(--f-num); color: var(--dust); }
.dx-ms span { font-size: 14px; color: var(--rc); }
.dx-ms.got { background: color-mix(in srgb, var(--rc) 22%, transparent); }
.dx-ms.got b { color: var(--paper); }
.dx-ms.crown { border-color: var(--gold); box-shadow: 0 0 12px rgba(255, 209, 102, 0.3); animation: dx-glow 2.4s ease-in-out infinite; }
@keyframes dx-glow { 50% { box-shadow: 0 0 22px rgba(255, 209, 102, 0.55); } }
.dx-note { margin: 0; font-size: 12px; color: var(--dust); line-height: 1.4; }
.dx-board-btn { align-self: flex-start; }
.dx-board ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; max-height: 260px; overflow: auto; }
.dx-board li { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); font-size: 12.5px; }
.dx-board li.me { outline: 1px solid var(--dc); }
.dx-board li span, .dx-board li em, .dx-board li i { font: 600 11px/1 var(--f-num); font-style: normal; color: var(--dust); }
.dx-board li i { color: var(--gold); }
@media (max-width: 560px) {
  .dx-diffs { grid-template-columns: 1fr; }
  .dx-diff { display: grid; grid-template-columns: 1fr auto; }
  .dx-diff em { grid-column: 1 / -1; }
  .dx-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dx-track { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* the ready room: class and pistol */
.dxpick { width: 100%; }
.dxpick .eyebrow { margin: 0 0 8px; text-align: center; color: #c4b5fd; }
.dx-classes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.dx-cls { --cc: #fff; position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); color: var(--paper); font: inherit; cursor: pointer; transition: transform 0.12s, border-color 0.12s; }
.dx-cls:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cc) 60%, transparent); }
.dx-cls.on { border-color: var(--cc); background: color-mix(in srgb, var(--cc) 14%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--cc) 30%, transparent); }
.dx-cls-ico { font-size: 24px; color: var(--cc); }
.dx-cls b { font-size: 13px; }
.dx-cls small { font: 600 10.5px/1 var(--f-num); color: var(--cc); }
.dx-cls em { font-style: normal; font-size: 10.5px; color: var(--dust); text-align: center; line-height: 1.3; }
.dx-taken { position: absolute; top: 4px; inset-inline-end: 6px; font-style: normal; font-size: 10px; color: var(--dust); }
.dx-pistols { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.dx-pst { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 130px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); color: var(--paper); font: inherit; cursor: pointer; }
.dx-pst.on { border-color: #c4b5fd; background: rgba(196, 181, 253, 0.12); }
.dx-pst small { font-size: 10.5px; color: var(--dust); }
.dxpick .dx-note { text-align: center; margin-top: 8px; }
@media (max-width: 560px) { .dx-classes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* in the run */
.dx-hud { position: absolute; inset: 0; pointer-events: none; }
.dx-hud[hidden] { display: none; }
.dx-top { position: absolute; top: calc(52px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; text-shadow: 0 1px 3px #000; }
.dx-fl { font: 700 13px/1 var(--f-num); color: #c4b5fd; letter-spacing: 0.04em; }
.dx-ob { font: 600 15px/1.1 var(--f-ui); color: var(--paper); }
.dx-prog { width: 180px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.dx-prog i { display: block; height: 100%; background: linear-gradient(90deg, #a78bfa, #3ddc97); transition: width 0.25s; }
.dx-bossbar { --bc: #ff4d5e; position: absolute; top: calc(104px + var(--safe-t)); left: 50%; transform: translateX(-50%); width: min(520px, 80vw); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dx-bossbar b { font: 400 22px/1 var(--f-display); letter-spacing: 0.06em; color: var(--bc); text-shadow: 0 0 12px color-mix(in srgb, var(--bc) 60%, transparent), 0 1px 2px #000; text-transform: uppercase; }
.dx-bossbar > div { width: 100%; height: 10px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--bc) 60%, transparent); background: rgba(0, 0, 0, 0.55); overflow: hidden; }
.dx-bossbar i { display: block; height: 100%; background: linear-gradient(90deg, #7f1d1d, var(--bc)); transition: width 0.2s; }
.dx-bossbar.stone i { background: linear-gradient(90deg, #475569, #cbd5e1); }
.dx-bossbar small { font-size: 11px; color: #cbd5e1; }
.dx-gear { position: absolute; bottom: calc(14px + var(--safe-b)); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: flex-end; pointer-events: auto; }
.dx-coins { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 10px; background: rgba(7, 9, 15, 0.8); border: 1px solid rgba(255, 209, 102, 0.4); font: 700 15px/1 var(--f-num); color: var(--gold); }
.dx-coins i { font-style: normal; }
.dx-gear-row, .dx-camp-shop { display: flex; gap: 5px; }
.dx-g { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 64px; padding: 5px 6px 4px; border-radius: 9px; border: 1px solid var(--line); background: rgba(15, 19, 28, 0.88); color: var(--paper); font: inherit; cursor: pointer; }
.dx-g:hover { border-color: var(--gold); }
.dx-g.poor { opacity: 0.5; }
.dx-g.max { opacity: 0.4; cursor: default; }
.dx-g-ico { font-size: 16px; color: #c4b5fd; }
.dx-g b { font-size: 10.5px; white-space: nowrap; }
.dx-g b small { color: var(--dust); font: 600 9.5px/1 var(--f-num); }
.dx-g em { font-style: normal; font: 700 11px/1 var(--f-num); color: var(--gold); }
.dx-g kbd { position: absolute; top: 2px; inset-inline-start: 4px; font: 600 9px/1 var(--f-num); color: var(--dust); }
.dx-swap { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(15, 19, 28, 0.88); color: var(--paper); font: 600 12px/1 var(--f-ui); cursor: pointer; }
.dx-swap kbd { font: 600 10px/1 var(--f-num); padding: 2px 4px; border-radius: 4px; background: var(--tarp-2); color: var(--dust); }
.dx-hud.stim .dx-coins { box-shadow: 0 0 14px rgba(250, 204, 21, 0.5); }
.dx-camp { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 50%, rgba(10, 8, 20, 0.6), rgba(5, 5, 10, 0.88)); pointer-events: auto; z-index: 3; }
.dx-camp[hidden] { display: none; }
.dx-camp-in { width: min(640px, 92vw); max-height: 90vh; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px; border-radius: 16px; border: 1px solid rgba(196, 181, 253, 0.35); background: rgba(15, 19, 28, 0.94); text-align: center; animation: dx-in 0.35s ease-out; }
@keyframes dx-in { from { transform: translateY(12px) scale(0.98); opacity: 0; } }
.dx-camp-k { margin: 0; color: #c4b5fd; }
.dx-camp-h { margin: 0; font: 400 34px/1 var(--f-display); letter-spacing: 0.04em; }
.dx-camp-next { margin: 0; color: var(--paper); }
.dx-camp-ms { margin: 0; color: var(--gold); font-size: 13px; }
.dx-camp-shop { flex-wrap: wrap; justify-content: center; margin: 6px 0; }
.dx-camp-shop .dx-g { min-width: 92px; padding: 8px; }
.dx-camp-go { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.dx-camp-go button.on { outline: 2px solid var(--gold); }
.dx-camp-wait { margin: 0; font-size: 12px; color: var(--dust); }
body.dx-on .gl-shop, body.dx-on .z-shop { display: none !important; }
/* phones: a compact bar at the bottom, between the move stick and the fire button */
body.touch-on .dx-gear { bottom: calc(6px + var(--safe-b)); gap: 4px; max-width: 56vw; }
body.touch-on .dx-gear-row { gap: 3px; }
body.touch-on .dx-gear-row .dx-g { min-width: 40px; padding: 4px 3px 3px; }
body.touch-on .dx-gear-row .dx-g b { display: none; }
body.touch-on .dx-coins { padding: 4px 7px; font-size: 13px; }
body.touch-on .dx-swap { padding: 4px 7px; font-size: 11px; }
body.touch-on .dx-top { top: calc(44px + var(--safe-t)); }
body.touch-on .dx-g kbd, body.touch-on .dx-swap kbd { display: none; }
@media (max-width: 700px) { .dx-gear-row .dx-g b { display: none; } .dx-gear-row .dx-g { min-width: 44px; } }

/* the story scene between floors */
.dx-story { position: fixed; inset: 0; z-index: 40; background: #05040a; }
.dx-story[hidden] { display: none; }
.dx-story canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dx-st-text { position: absolute; left: 0; right: 0; bottom: calc(12% + var(--safe-b)); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 20px; text-align: center; pointer-events: none; text-shadow: 0 2px 8px #000; }
.dx-st-ch { margin: 0; font: 600 12px/1 var(--f-num); letter-spacing: 0.3em; text-transform: uppercase; color: #c4b5fd; }
.dx-st-fl { margin: 0; font: 400 clamp(34px, 7vw, 64px)/1 var(--f-display); letter-spacing: 0.05em; }
.dx-st-obj { margin: 0; font-size: 15px; color: var(--gold); }
.dx-st-line { margin: 4px 0 0; max-width: 640px; min-height: 2.8em; font: italic 16px/1.4 var(--f-ui); color: var(--paper); }
.dx-st-skip { position: absolute; top: calc(14px + var(--safe-t)); inset-inline-end: 14px; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.5); color: var(--dust); font: 600 12px/1 var(--f-ui); cursor: pointer; }

/* the result: what the run brought up */
.dx-items { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; text-align: start; }
.dx-items li { --rc: #fff; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent); background: color-mix(in srgb, var(--rc) 10%, transparent); }
.dx-items b { color: var(--rc); font-size: 13px; }
.dx-items small { font-size: 11px; color: var(--dust); }

/* the ranks window: where you stand, the ladder of 90, what pays XP */
.dlg-ranks { width: min(40rem, calc(100vw - 24px)); }
.rank-card[role='button'] { cursor: pointer; }
.rank-card[role='button']:hover { border-color: rgba(247, 147, 26, 0.45); }
.rki-me { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 12px; background: radial-gradient(120% 120% at 0% 0%, rgba(247, 147, 26, 0.16), transparent 60%), var(--tarp-2); border: 1px solid rgba(247, 147, 26, 0.25); }
.rki-badge { flex: none; filter: drop-shadow(0 0 10px rgba(247, 147, 26, 0.35)); }
.rki-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rki-main .eyebrow { margin: 0; }
.rki-main h3 { margin: 0; font: 700 24px/1.1 var(--f-display); letter-spacing: 0.02em; }
.rki-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.rki-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f7931a, #ffd166); border-radius: inherit; }
.rki-line { margin: 0; font: 600 12px/1.3 var(--f-num); color: var(--dust); }
.rki-line b { color: var(--paper); }
.rki-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rki-stats > div { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 10px; background: var(--tarp-2); border: 1px solid var(--line); min-width: 0; }
.rki-stats small { font-size: 11px; color: var(--dust); }
.rki-stats b { display: flex; align-items: center; gap: 4px; font: 700 13px/1.2 var(--f-num); overflow-wrap: anywhere; }
.rki-how .eyebrow, .dlg-ranks section > .eyebrow { margin: 0 0 6px; }
.rki-how ul { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--paper); }
.rki-ladder { list-style: none; margin: 0; padding: 4px; display: flex; flex-direction: column; gap: 6px; max-height: min(46vh, 420px); overflow-y: auto; border-radius: 10px; background: rgba(0, 0, 0, 0.18); }
.rki-grade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 6px; border-radius: 10px; border: 1px solid transparent; }
.rki-grade.here { border-color: rgba(247, 147, 26, 0.4); background: rgba(247, 147, 26, 0.06); }
.rki-r { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 8px; text-align: center; min-width: 0; }
.rki-r b { font-size: 10.5px; line-height: 1.15; overflow-wrap: anywhere; }
.rki-r small { font: 600 10px/1 var(--f-num); color: var(--dust); }
.rki-r.got { opacity: 0.55; }
.rki-r.next { opacity: 0.85; }
.rki-r.now { background: rgba(247, 147, 26, 0.16); outline: 1px solid #f7931a; }
.rki-r i { position: absolute; top: -6px; inset-inline-end: 2px; font-style: normal; font: 700 9px/1 var(--f-ui); padding: 2px 5px; border-radius: 6px; background: #f7931a; color: #1a0e00; }
@media (max-width: 520px) {
  .rki-stats { grid-template-columns: 1fr; }
  .rki-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rki-me h3 { font-size: 20px; }
}

/* frames per second, in a corner of the match (bottom right; on phones over the minimap) */
.fps-chip { position: absolute; right: calc(14px + var(--safe-r)); bottom: calc(10px + var(--safe-b)); font: 700 11px/1 var(--f-num); letter-spacing: 0.04em; padding: 3px 6px; border-radius: 6px; background: rgba(7, 9, 15, 0.55); color: var(--dust); pointer-events: none; }
.fps-chip:empty { display: none; }
.fps-chip.good { color: #3ddc97; }
.fps-chip.ok { color: #ffd166; }
.fps-chip.bad { color: #ff6b6b; }
body.touch-on .fps-chip { bottom: auto; top: calc(14px + 150px + 6px + var(--safe-t)); right: calc(16px + var(--safe-r)); }
@media (max-width: 720px) { body.touch-on .fps-chip { right: calc(16px + 96px + 8px + var(--safe-r)); } }

/* the camp: the items getting out now would bring up */
.dx-camp-loot { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 100%; }
.dx-camp-loot[hidden] { display: none; }
.dx-camp-loot li { --rc: #fff; display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--rc) 60%, transparent); background: color-mix(in srgb, var(--rc) 12%, transparent); text-align: start; }
.dx-camp-loot b { color: var(--rc); font-size: 12.5px; }
.dx-camp-loot small { font-size: 10.5px; color: var(--dust); }