/* Menus: the lobby HUD, panels, toasts and dialogs (js/ui/). Built on the tokens, .title, .btn, .tier and
   .cur pieces in base.css. Class prefixes: lh- lobby HUD, pm- play, lo- loadout, sh- shop, tk- tasks,
   rw- rewards, fu- fuse, st- settings, wv- waves, bn- bans, rs- results. */

/* ---------------------------------------------------------------- layers */

#lobby-hud {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  font-family: var(--ui);
  color: var(--ink);
}

#panels {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: radial-gradient(ellipse at 50% 40%, rgba(24, 58, 120, 0.32), rgba(10, 22, 52, 0.62));
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
  backdrop-filter: blur(7px) saturate(1.1);
  font-family: var(--ui);
  color: var(--ink);
  animation: m-fade 0.18s ease both;
}

#toasts {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  z-index: 30;
  width: min(440px, calc(100vw - 24px));
  display: grid;
  justify-items: center;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
  font-family: var(--ui);
}
/* On phones the top edge belongs to the lobby bar, the score box and panel headers: toasts drop below them. */
@media (max-width: 760px), (max-height: 520px) {
  #toasts { top: max(68px, calc(60px + env(safe-area-inset-top))); }
}

/* ---------------------------------------------------------------- shared bits */

.m-ico { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; flex: none; line-height: 0; }
.m-ico svg { width: 100%; height: 100%; display: block; }
.btn .m-ico { width: 1.2em; height: 1.2em; }
.btn kbd { margin-left: 2px; font-size: 11px; }
#panels.is-touch kbd, #lobby-hud.is-touch kbd { display: none; }

.glyph { display: block; width: 100%; height: 100%; overflow: visible; }
.glyph-fused { position: relative; display: block; width: 100%; height: 100%; }
.glyph-donor {
  position: absolute;
  right: -2%;
  bottom: -10%;
  width: 46%;
  height: 50%;
  padding: 2px 3px;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 0 0 2px var(--ink);
}

.m-box {
  position: relative;
  min-width: 0;
  padding: 16px;
  border-radius: 20px;
  background: #fff;
  box-shadow: inset 0 0 0 2px #e1e8f2, 0 5px 0 #d3dceb;
}

.sec-h { display: flex; align-items: center; gap: 12px; min-width: 0; margin-bottom: 12px; }
.sec-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--sec, var(--blue));
  color: #fff;
  font-size: 22px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.16);
}
.sec-text { min-width: 0; flex: 1; }
.sec-t { margin: 0; font-family: var(--display); font-weight: 400; font-size: 23px; line-height: 1.05; letter-spacing: 0.01em; color: var(--ink); }
.sec-sub { margin: 2px 0 0; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--muted); }

.m-wallet { display: flex; gap: 8px; }
.m-wallet-chip {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 12px 0 7px;
  border-radius: 999px;
  background: #fff;
  font-size: 17px;
  box-shadow: 0 3px 0 rgba(18, 32, 58, 0.25);
}
.m-wallet-chip .cur > i { width: 24px; height: 24px; }
.cur.is-bump { animation: m-bump 0.35s ease; }
.cur.is-inf { font-size: 1.45em; line-height: 0.8; }

.m-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--paper-3);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.m-tag .m-ico { width: 14px; height: 14px; }
.m-tag-good { background: #d8f8e3; color: var(--green-dark); }
.m-tag-bad { background: #ffe0e2; color: var(--red-dark); }
.m-tag-gold { background: #fff1bf; color: #8a6400; }
.m-tag-admin { background: linear-gradient(120deg, #7c3aed, #c026d3); color: #fff; }

.pbar {
  --c: var(--green);
  position: relative;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e3eaf3;
  box-shadow: inset 0 2px 0 rgba(18, 32, 58, 0.08);
}
.pbar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.14), inset 0 3px 0 rgba(255, 255, 255, 0.35);
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ndot {
  position: absolute;
  top: -9px;
  right: -9px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 3px #fff, 0 3px 6px rgba(18, 32, 58, 0.3);
  animation: m-pop 0.3s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.ndot:empty { min-width: 16px; height: 16px; padding: 0; top: -5px; right: -5px; }

/* Segmented picker */
.m-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 15px;
  background: #e3eaf3;
  box-shadow: inset 0 2px 0 rgba(18, 32, 58, 0.07);
}
.m-seg-btn {
  --c: var(--blue);
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--ink-2);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease;
}
@media (hover: hover) { .m-seg-btn:not(.is-on):hover { background: rgba(255, 255, 255, 0.7); } }
.m-seg-btn.is-on {
  background: var(--c);
  color: #fff;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 3px 0 rgba(18, 32, 58, 0.22);
}
.m-seg-btn:active { transform: translateY(1px); }

/* Tabs */
.m-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px 10px;
}
.m-tabs::-webkit-scrollbar { display: none; }
.m-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: var(--ink-2);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 2px #dfe7f2, 0 4px 0 #d3dceb;
}
.m-tab .m-ico { font-size: 18px; }
.m-tab.is-on { background: var(--blue); color: #fff; box-shadow: inset 0 -4px 0 var(--blue-dark), 0 4px 0 #1a4fb0; }
.m-tab .ndot { top: -6px; right: -6px; }

/* Stat bars and traits */
.statbars { display: grid; gap: 7px; }
.sbr { display: grid; grid-template-columns: 82px 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.sbr-l { font-weight: 900; color: var(--ink-2); text-transform: uppercase; font-size: 12px; letter-spacing: 0.03em; }
.sbr-bar { height: 11px; overflow: hidden; border-radius: 999px; background: #e3eaf3; }
.sbr-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #49b3ff, var(--blue));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
  transition: width 0.4s ease;
}
.sbr-v { min-width: 58px; text-align: right; font-weight: 900; font-variant-numeric: tabular-nums; }
.m-traits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.m-trait {
  padding: 4px 10px;
  border-radius: 999px;
  background: #e8f1ff;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

/* Tier colours for anything with .t-standard / .t-prime / .t-galaxy */
.t-standard { --t-bg: linear-gradient(170deg, #ffffff 0%, #e4ebf5 100%); --t-edge: #c8d3e3; --t-ink: var(--ink); }
.t-prime { --t-bg: linear-gradient(170deg, #fff7cf 0%, #ffd64f 100%); --t-edge: #e7b21c; --t-ink: var(--ink); }
.t-galaxy { --t-bg: linear-gradient(165deg, #d9b8ff 0%, #9346f2 70%, #7a2fe0 100%); --t-edge: #6524c2; --t-ink: #fff; }

/* Weapon card */
.wc {
  --wc-edge: var(--t-edge, #c8d3e3);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  min-width: 0;
  padding: 8px 8px 9px;
  border: 0;
  border-radius: 16px;
  background: var(--t-bg, #fff);
  color: var(--t-ink, var(--ink));
  font: inherit;
  text-align: center;
  box-shadow: inset 0 0 0 3px var(--wc-edge), 0 4px 0 var(--wc-edge);
  transition: transform 0.08s ease, box-shadow 0.12s ease;
}
button.wc { cursor: pointer; }
@media (hover: hover) { button.wc:not(:disabled):hover { transform: translateY(-2px); } }
button.wc:active:not(:disabled) { transform: translateY(2px); }
.wc-art { display: block; width: 100%; aspect-ratio: 2 / 1; padding: 2px 4px; }
.wc-name {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  font-weight: 900;
  font-size: 12.5px;
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.wc .cur { font-size: 13px; gap: 3px; }
.wc .cur > i { width: 16px; height: 16px; }
.wc.t-galaxy .cur, .wc.t-galaxy .wc-name { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.wc-eq { display: inline-flex; align-items: center; gap: 3px; color: var(--green-dark); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.wc.t-galaxy .wc-eq { color: #b6ffcf; }
.wc-eq .m-ico { width: 13px; height: 13px; }
.wc-lock {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
}
.wc.is-locked .wc-art { filter: grayscale(0.85) brightness(0.95); opacity: 0.6; }
.wc.is-eq { box-shadow: inset 0 0 0 3px var(--green), 0 4px 0 var(--green-dark); }
.wc.is-sel { box-shadow: inset 0 0 0 3px var(--wc-edge), 0 0 0 4px var(--blue), 0 5px 0 4px var(--blue-dark); z-index: 1; }
.wc.is-eq.is-sel { box-shadow: inset 0 0 0 3px var(--green), 0 0 0 4px var(--blue), 0 5px 0 4px var(--blue-dark); }
.wc:disabled { cursor: not-allowed; }
.wc:disabled .wc-art { filter: grayscale(1); opacity: 0.45; }
.wc.is-banned .wc-art { filter: grayscale(1); opacity: 0.4; }
.wc-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.m-stamp {
  position: absolute;
  top: 36%;
  left: 50%;
  padding: 1px 9px 2px;
  border: 3px solid var(--red);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--red);
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: translate(-50%, -50%) rotate(-12deg);
  box-shadow: 0 3px 0 rgba(209, 48, 59, 0.35);
  pointer-events: none;
}

.wart { display: block; aspect-ratio: 2 / 1; }

/* Wrap swatch */
.sw {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: var(--sw, #ccc);
  box-shadow: inset 0 0 0 2px rgba(18, 32, 58, 0.18), 0 3px 0 rgba(18, 32, 58, 0.22);
  color: #fff;
  vertical-align: middle;
}
button.sw { cursor: pointer; transition: transform 0.08s ease; }
@media (hover: hover) { button.sw:hover { transform: translateY(-2px) scale(1.04); } }
.sw.r-prime { box-shadow: inset 0 0 0 2px rgba(18, 32, 58, 0.18), 0 0 0 2px var(--yellow), 0 4px 0 2px var(--yellow-dark); }
.sw.r-galaxy { box-shadow: inset 0 0 0 2px rgba(18, 32, 58, 0.18), 0 0 0 2px var(--purple), 0 4px 0 2px var(--purple-dark); }
.sw.is-locked { filter: grayscale(0.9) brightness(0.9); opacity: 0.55; }
.sw-lock { width: 46%; height: 46%; color: #fff; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
.sw.is-sel { box-shadow: inset 0 0 0 2px rgba(18, 32, 58, 0.18), 0 0 0 3px #fff, 0 0 0 6px var(--blue), 0 4px 0 6px var(--blue-dark); }
.sw-check {
  position: absolute;
  right: -7px;
  bottom: -7px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 0 0 2px #fff;
}
.sw-xs { width: 22px; height: 22px; border-radius: 7px; }
.sw-sm { width: 30px; height: 30px; border-radius: 9px; }
.sw-lg { width: 72px; height: 72px; border-radius: 20px; }
.sw-xl { width: 150px; height: 150px; border-radius: 34px; }

/* Rank badge */
.rk { --rk: #cd7f32; position: relative; display: inline-grid; place-items: center; width: 44px; height: 48px; flex: none; }
.rk-shield { position: absolute; inset: 0; }
.rk-shield svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rk-edge { fill: var(--ink); }
.rk-face { fill: var(--rk); }
.rk-shine { fill: #fff; opacity: 0.3; }
.rk-tier {
  position: relative;
  margin-top: -3px;
  font-family: var(--display);
  font-size: 17px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(18, 32, 58, 0.6), 0 0 3px rgba(18, 32, 58, 0.6);
}
.rk-sm { width: 22px; height: 24px; }
.rk-sm .rk-tier { font-size: 10px; margin-top: -2px; }
.rk-lg { width: 76px; height: 84px; }
.rk-lg .rk-tier { font-size: 30px; }
.rk-xl { width: 112px; height: 124px; }
.rk-xl .rk-tier { font-size: 44px; }

/* 3D preview box (the shared canvas mounts in .pv-mount; .pv-art is the fallback picture) */
.pv {
  --glow: rgba(255, 255, 255, 0.95);
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 60% 55% at 50% 52%, var(--glow), transparent 75%),
    linear-gradient(180deg, #d7efff 0%, #a9dbff 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.6), inset 0 -10px 24px rgba(47, 125, 255, 0.18);
}
.pv[data-tier="prime"] { --glow: rgba(255, 220, 90, 0.85); }
.pv[data-tier="galaxy"] { --glow: rgba(200, 150, 255, 0.9); }
.pv-floor {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 9%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(18, 32, 58, 0.22), transparent);
}
.pv-mount { position: absolute; inset: 0; }
.pv-mount canvas { display: block; width: 100%; height: 100%; }
.pv-art { position: absolute; inset: 14% 10% 18%; display: none; place-items: center; }
.pv-art .glyph, .pv-art .glyph-fused { max-height: 100%; }
.pv.is-off .pv-art { display: grid; animation: m-float 3.2s ease-in-out infinite; }
.pv.is-off .pv-mount { display: none; }

/* ---------------------------------------------------------------- panel shell */

.pnl {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  max-height: 100%;
  overflow: hidden;
  border-radius: 28px;
  background: var(--paper-2);
  box-shadow: 0 0 0 4px var(--ink), 0 12px 0 4px rgba(10, 22, 52, 0.55), 0 30px 70px rgba(8, 20, 48, 0.45);
  animation: m-in 0.24s cubic-bezier(0.2, 1.25, 0.4, 1) both;
}
.pnl:focus { outline: none; }
.pnl-wide { width: min(1180px, 100%); height: min(820px, 100%); }
.pnl-narrow { width: min(560px, 100%); }
.pnl-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  min-height: 70px;
  padding: 10px 14px 12px 16px;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.07) 0 16px, transparent 16px 32px),
    linear-gradient(180deg, #4dabff 0%, var(--blue) 100%);
  box-shadow: inset 0 -5px 0 rgba(10, 40, 110, 0.25);
}
.pnl-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 14px;
  background: #fff;
  color: var(--blue);
  font-size: 24px;
  box-shadow: 0 0 0 3px var(--ink), 0 4px 0 3px var(--ink);
}
.pnl-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 4px 4px 8px;
  margin: -4px 0 -8px;
  font-size: 34px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pnl-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.pnl-x { flex: none; box-shadow: 0 0 0 3px var(--ink), 0 5px 0 3px var(--ink); }
.pnl-x .m-ico { font-size: 22px; }
.pnl-x:active { box-shadow: 0 0 0 3px var(--ink), 0 1px 0 3px var(--ink); }
.pnl-body {
  --pad: 18px;
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--pad);
}

/* ---------------------------------------------------------------- toasts */

.tst {
  --c: var(--blue);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 7px 16px 7px 7px;
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  box-shadow: 0 0 0 3px var(--ink), 0 5px 0 3px var(--ink), 0 12px 24px rgba(8, 20, 48, 0.3);
  animation: m-drop 0.28s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.tst.is-out { animation: m-rise 0.26s ease both; }
.tst-ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 11px;
  background: var(--c);
  color: #fff;
  font-size: 18px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.16);
}
.tst-good { --c: var(--green); }
.tst-bad { --c: var(--red); }
.tst-reward { --c: var(--yellow); }
.tst-reward .tst-ico { color: var(--ink); }

/* ---------------------------------------------------------------- confirm dialog */

.cfm-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(10, 22, 52, 0.45);
  animation: m-fade 0.15s ease both;
}
.cfm {
  position: relative;
  width: min(420px, 100%);
  padding: 30px 22px 22px;
  border-radius: 26px;
  background: #fff;
  text-align: center;
  box-shadow: 0 0 0 4px var(--ink), 0 10px 0 4px var(--ink), 0 30px 60px rgba(8, 20, 48, 0.4);
  animation: m-in 0.22s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.cfm-ico {
  position: absolute;
  top: -30px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--blue);
  color: #fff;
  font-size: 30px;
  transform: translateX(-50%) rotate(-6deg);
  box-shadow: 0 0 0 4px var(--ink), 0 5px 0 4px var(--ink);
}
.cfm-ico.is-danger { background: var(--red); }
.cfm-title { margin-top: 8px; font-size: 30px; }
.cfm-text { margin: 12px 0 0; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--ink-2); }
.cfm-actions { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.cfm-actions .btn { flex: 1; max-width: 170px; }

/* ---------------------------------------------------------------- confetti */

.confetti { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; }
.confetti i {
  position: absolute;
  top: -16px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  animation: m-confetti linear forwards;
}

/* ---------------------------------------------------------------- lobby HUD */

.lh-top {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.lh-player {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 16px 6px 6px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 3px var(--ink), 0 5px 0 3px var(--ink);
  pointer-events: auto;
}
.lh-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--yellow), var(--orange));
  color: #fff;
  font-family: var(--display);
  font-size: 28px;
  text-shadow: var(--outline);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.16);
}
.lh-who { display: grid; gap: 1px; min-width: 0; }
.lh-name {
  overflow: hidden;
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lh-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.lh-rank { display: flex; align-items: center; gap: 5px; color: var(--ink-2); font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; }
.lh-level { padding: 1px 8px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 12px; font-weight: 900; line-height: 18px; text-transform: uppercase; letter-spacing: 0.03em; box-shadow: 0 2px 0 rgba(18, 32, 58, 0.22); }
.lh-streak { display: inline-flex; align-items: center; gap: 2px; color: #ff6a00; font-size: 14px; font-weight: 900; }
.lh-streak .m-ico { width: 15px; height: 15px; }
.lh-admin {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px 2px 5px;
  border-radius: 999px;
  background: linear-gradient(120deg, #7c3aed, #c026d3);
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  box-shadow: 0 2px 0 #5b21b6;
}
.lh-admin .m-ico { width: 13px; height: 13px; color: #ffd23f; }
.lh-wallet { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; pointer-events: auto; }
.lh-chip {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 16px 0 8px;
  border-radius: 999px;
  background: #fff;
  font-size: 19px;
  box-shadow: 0 0 0 3px var(--ink), 0 5px 0 3px var(--ink);
}
.lh-chip .cur > i { width: 28px; height: 28px; }

.lh-bottom {
  position: absolute;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-end;
  gap: 14px;
  transform: translateX(-50%);
}
.lh-side { display: flex; gap: 10px; pointer-events: auto; }
.lh-btn {
  --c: var(--blue);
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 -5px 0 #dbe3ef, 0 0 0 3px var(--ink), 0 6px 0 3px var(--ink);
  transition: transform 0.07s ease, box-shadow 0.07s ease;
}
.lh-btn:active { transform: translateY(4px); box-shadow: inset 0 -2px 0 #dbe3ef, 0 0 0 3px var(--ink), 0 2px 0 3px var(--ink); }
@media (hover: hover) { .lh-btn:hover { transform: translateY(-2px); } .lh-btn:hover:active { transform: translateY(4px); } }
.lh-ico { color: var(--c); font-size: 32px; line-height: 0; }
.lh-ico .m-ico { width: 1em; height: 1em; }
.lh-lbl { font-size: 12px; font-weight: 900; letter-spacing: 0.03em; text-transform: uppercase; }
.lh-btn kbd { position: absolute; top: 5px; left: 5px; min-width: 18px; padding: 0 4px; font-size: 10.5px; line-height: 16px; background: var(--paper-3); box-shadow: none; }
.lh-play {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 230px;
  height: 92px;
  padding: 0 34px;
  border: 0;
  border-radius: 26px;
  background: linear-gradient(180deg, #3ee07a 0%, var(--green) 100%);
  color: #fff;
  font-family: var(--display);
  font-size: 46px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: var(--outline);
  box-shadow: inset 0 -7px 0 var(--green-dark), inset 0 4px 0 rgba(255, 255, 255, 0.35), 0 0 0 4px var(--ink), 0 8px 0 4px var(--ink), 0 16px 24px rgba(8, 20, 48, 0.3);
  pointer-events: auto;
  transition: transform 0.07s ease, box-shadow 0.07s ease;
}
.lh-play .m-ico { width: 0.8em; height: 0.8em; filter: drop-shadow(0 3px 0 var(--ink)); }
.lh-play kbd { position: absolute; top: -10px; right: -10px; text-shadow: none; box-shadow: 0 0 0 2px var(--ink), 0 2px 0 2px var(--ink); }
.lh-play:active { transform: translateY(5px); box-shadow: inset 0 -3px 0 var(--green-dark), 0 0 0 4px var(--ink), 0 3px 0 4px var(--ink); }
@media (hover: hover) { .lh-play:hover { filter: brightness(1.06); } }
@media (prefers-reduced-motion: no-preference) {
  .lh-play::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 45%, transparent 60%) -200% 0 / 200% 100% no-repeat;
    animation: m-shine 3.6s ease-in-out infinite;
    pointer-events: none;
  }
}

@media (max-width: 760px) {
  .lh-bottom {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 7px;
    transform: none;
  }
  .lh-side { gap: 7px; }
  .lh-left { order: 1; }
  .lh-right { order: 2; }
  .lh-play { order: 3; flex-basis: 100%; height: 70px; font-size: 38px; }
  .lh-btn { width: min(56px, calc((100vw - 64px) / 6)); height: 58px; border-radius: 16px; }
  .lh-ico { font-size: 25px; }
  .lh-lbl { font-size: clamp(10.5px, 3vw, 12px); letter-spacing: 0; }
  .lh-player { padding: 4px 12px 4px 4px; border-radius: 16px; }
  .lh-avatar { width: 38px; height: 38px; font-size: 22px; border-radius: 12px; }
  .lh-name { font-size: 17px; max-width: 34vw; }
  .lh-rank { font-size: 11px; }
  .lh-wallet { flex-direction: column; align-items: flex-end; gap: 9px; }
  .lh-chip { height: 36px; font-size: 16px; padding: 0 12px 0 6px; }
  .lh-chip .cur > i { width: 23px; height: 23px; }
}

/* Landscape phones: one row, smaller. */
@media (max-height: 500px) and (min-width: 561px) {
  .lh-bottom { left: 50%; right: auto; flex-wrap: nowrap; gap: 10px; transform: translateX(-50%); bottom: max(10px, env(safe-area-inset-bottom)); }
  .lh-play { order: 0; flex-basis: auto; min-width: 150px; height: 62px; font-size: 32px; padding: 0 20px; }
  .lh-left { order: -1; }
  .lh-right { order: 1; }
  .lh-btn { width: 56px; height: 56px; border-radius: 16px; }
  .lh-ico { font-size: 24px; }
  .lh-lbl { font-size: 10.5px; }
  .lh-wallet { flex-direction: row; }
}

/* Narrow phones: six buttons in a row would squash their labels, so each side gets a row of three. */
@media (max-width: 400px) and (min-height: 501px) {
  .lh-bottom { gap: 8px; }
  .lh-side { flex-basis: 100%; justify-content: center; gap: 8px; }
  .lh-btn { width: 76px; height: 56px; }
}

/* ---------------------------------------------------------------- play menu */

.pm-grid { display: grid; grid-template-columns: 1.12fr 1fr; gap: 18px; }
.pm-quick { --sec: var(--blue); }
.pm-ranked { --sec: var(--purple); display: flex; flex-direction: column; gap: 12px; }
.pm-ranked .sec-h { margin-bottom: 0; }
.pm-quick { display: flex; flex-direction: column; }
.pm-sizes { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; min-height: 150px; margin: 2px 0 16px; }
.pm-size {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  align-items: center;
  gap: 6px;
  padding: 12px 4px;
  border: 0;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, #52b0ff 0%, var(--blue) 100%);
  color: #fff;
  box-shadow: inset 0 -6px 0 var(--blue-dark), 0 0 0 3px var(--ink), 0 6px 0 3px var(--ink);
  transition: transform 0.07s ease, box-shadow 0.07s ease;
}
.pm-size:active { transform: translateY(4px); box-shadow: inset 0 -2px 0 var(--blue-dark), 0 0 0 3px var(--ink), 0 2px 0 3px var(--ink); }
@media (hover: hover) { .pm-size:hover { filter: brightness(1.07); } }
.pm-size-n { font-family: var(--display); font-size: 34px; line-height: 1; text-shadow: var(--outline); }
.pm-team { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 100%; }
.pm-team-0 { align-self: end; }
.pm-team-1 { align-self: start; }
.pm-team i { width: 10px; height: 10px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 2px var(--ink); }
.pm-team-0 i { background: #bfe0ff; }
.pm-team-1 i { background: #ff8a93; }
.pm-diff-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 900; font-size: 13px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; }
.pm-diff-head .m-ico { font-size: 20px; color: var(--blue); }
.m-diff-note { margin: 8px 2px 0; font-size: 13.5px; font-weight: 700; color: var(--muted); }

.pm-rank { display: flex; align-items: center; gap: 16px; padding: 10px 14px; border-radius: 18px; background: color-mix(in srgb, var(--rk) 16%, #fff); }
.pm-rank-info { flex: 1; min-width: 0; display: grid; gap: 5px; }
.pm-rank-name { font-family: var(--display); font-size: 28px; line-height: 1; }
.pm-rank-elo { font-weight: 800; font-size: 14px; color: var(--ink-2); }
.pm-rank-next { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.pm-ranked-size .m-seg-btn.is-on { --c: var(--purple); }
.pm-rules { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.pm-rules li { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 14px; color: var(--ink-2); }
.pm-rules .m-ico { width: 27px; height: 27px; padding: 5px; border-radius: 9px; background: #f1e6ff; color: var(--purple-dark); }
.pm-ranked .pm-go { width: 100%; margin-top: auto; }

.pm-daily, .pm-night, .pm-range { display: flex; flex-direction: column; gap: 10px; min-height: 200px; overflow: hidden; color: #fff; }
.pm-range {
  background:
    radial-gradient(circle at 82% 28%, rgba(255, 255, 255, 0.22) 0 30px, rgba(255, 255, 255, 0.08) 31px 44px, transparent 45px),
    linear-gradient(160deg, #1f8a52 0%, #147a44 60%, #0d5a32 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.12), 0 5px 0 #073a1f;
}
.pm-daily {
  --c: var(--blue);
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.08) 0 18px, transparent 18px 36px),
    linear-gradient(140deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 70%, #12203a));
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.25), 0 5px 0 color-mix(in srgb, var(--c) 60%, #12203a);
}
.pm-night {
  background:
    radial-gradient(circle at 12% 30%, #fff 0 1px, transparent 1.6px) 0 0 / 46px 38px,
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.6px) 0 0 / 61px 53px,
    linear-gradient(160deg, #24357a 0%, #141d4a 60%, #0b1030 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.12), 0 5px 0 #070b22;
}
.pm-moon {
  position: absolute;
  top: -30px;
  right: -22px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #fffbe6, #ffe9a3 60%, #f3cf6b);
  box-shadow: 0 0 40px rgba(255, 233, 163, 0.55);
  opacity: 0.95;
}
.pm-daily-top, .pm-daily-foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pm-daily-foot { margin-top: auto; }
.pm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 3px 0 rgba(18, 32, 58, 0.3);
}
.pm-badge .m-ico { font-size: 17px; color: var(--c, var(--blue)); }
.pm-badge-soft { background: rgba(255, 255, 255, 0.22); color: #fff; box-shadow: none; }
.pm-badge-soft .m-ico { color: #fff; }
.pm-badge-night .m-ico { color: #6b74d8; }
.pm-timer { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; font-size: 13.5px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.pm-timer .m-ico { font-size: 17px; }
.pm-daily-name { position: relative; font-size: 36px; }
.pm-daily-blurb { position: relative; margin: 0; max-width: 40ch; font-size: 15px; font-weight: 800; line-height: 1.35; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.pm-daily .pm-go, .pm-night .pm-go, .pm-range .pm-go { min-width: 140px; }

@media (max-width: 860px) {
  .pm-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .pm-sizes { gap: 7px; min-height: 108px; }
  .pm-size { border-radius: 15px; padding: 10px 2px; }
  .pm-size-n { font-size: 23px; }
  .pm-team { gap: 2px; }
  .pm-team i { width: 6px; height: 6px; border-radius: 2px; box-shadow: 0 0 0 1.5px var(--ink); }
  .m-seg-btn { padding: 6px 4px; font-size: 12.5px; }
  .pm-daily-name { font-size: 30px; }
  .pm-rank { gap: 12px; padding: 10px; }
}

/* ---------------------------------------------------------------- small weapon cards */

.wc-sm { padding: 6px 6px 7px; border-radius: 13px; }
.wc-sm .wc-name { font-size: 11px; }
.wc-xs { padding: 3px 4px 4px; border-radius: 11px; gap: 0; }
/* Too small for a readable name: the picture and the tooltip say which weapon it is. */
.wc-xs .wc-name { display: none; }
.wc-xs .m-stamp { top: 40%; padding: 0 5px; border-width: 2px; border-radius: 6px; font-size: 11px; }
.wc.is-off { cursor: not-allowed; }
.wc.is-off .wc-art { filter: grayscale(1); opacity: 0.45; }
.wc-art .glyph-donor { border-radius: 7px; }

.lo-slot { font-size: 12px; font-weight: 900; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; }

/* ---------------------------------------------------------------- loadout */

.lo .pnl-body { display: flex; flex-direction: column; gap: 12px; overflow: hidden; padding-bottom: 0; }
.lo-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff3c4;
  color: #7a5600;
  font-weight: 800;
  box-shadow: inset 0 0 0 2px #ffd95e;
}
.lo-banner .m-ico { font-size: 20px; }
.lo-changes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 3px 0 rgba(18, 32, 58, 0.25);
}
.lo-changes b { font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--blue); }
.lo-changes.is-out b { color: var(--red); }
.lo-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: 18px; }
.lo-left, .lo-right { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 10px 6px 18px 4px; }
.lo-right { display: flex; flex-direction: column; gap: 14px; }
.lo-tabs {
  position: sticky;
  top: -10px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: -10px -4px 8px;
  padding: 10px 4px 10px;
  background: var(--paper-2);
}
.lo-tab {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  box-shadow: inset 0 0 0 2px #dfe7f2, 0 4px 0 #d3dceb;
}
.lo-tab-art { width: 50px; }
.lo-tab-text { display: grid; min-width: 0; }
.lo-tab-slot { font-size: 11px; font-weight: 900; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; }
.lo-tab-w { overflow: hidden; font-size: 14px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.lo-tab kbd { position: absolute; top: -7px; right: -5px; min-width: 19px; font-size: 11px; box-shadow: 0 0 0 2px var(--ink); }
.lo-tab.is-on { background: var(--blue); color: #fff; box-shadow: inset 0 -4px 0 var(--blue-dark), 0 4px 0 #1a4fb0; }
.lo-tab.is-on .lo-tab-slot { color: #cfe3ff; }
.lo-group + .lo-group { margin-top: 18px; }
.lo-group-t { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-family: var(--display); font-weight: 400; font-size: 21px; }
.lo-group-t .m-ico { color: var(--purple); }
.lo-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
.lo-hero { display: flex; flex-direction: column; gap: 10px; }
.lo-pv { aspect-ratio: 16 / 9; max-height: 300px; flex: none; }
.lo-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; }
.lo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lo-name { grid-column: 1; font-size: 34px; overflow-wrap: anywhere; }
.lo-actions { grid-column: 2; grid-row: 1 / span 2; }
.lo-equipped {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  background: #d8f8e3;
  color: var(--green-dark);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 2px #9be8b7;
}
.lo-buy .cur { padding: 2px 8px 2px 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.6); }
.lo-box { --sec: var(--blue); }
.lo-blurb { margin: 0 0 14px; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--ink-2); }
.lo-parents { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; font-weight: 900; color: var(--purple-dark); }
.lo-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.lo-next { display: grid; gap: 7px; margin: 14px 0 0; font-size: 14px; font-weight: 800; color: var(--ink-2); }
p.lo-next { display: flex; align-items: center; color: var(--green-dark); }
.lo-sub { margin: 16px 0 8px; font-size: 12px; font-weight: 900; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.lo-cos .sec-h + .lo-sub { margin-top: 0; }
.lo-swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.lo-swatches .sw { width: 42px; height: 42px; }
.lo-hint { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.lo-hint .m-ico { font-size: 16px; }
.lo-hint.is-on { color: var(--red-dark); }
.lo-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.lo-locked { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-weight: 800; }
.m-pick {
  --r: #c8d3e3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 6px 14px 6px 10px;
  border: 0;
  border-radius: 12px;
  background: var(--paper-2);
  color: var(--ink);
  font-weight: 900;
  font-size: 14px;
  box-shadow: inset 0 0 0 2px #dfe7f2, 0 3px 0 #d3dceb;
}
.m-pick.r-prime { --r: var(--yellow); }
.m-pick.r-galaxy { --r: var(--purple); }
.m-pick-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--r); box-shadow: inset 0 0 0 2px rgba(18, 32, 58, 0.15); }
.m-pick.is-on { background: var(--blue); color: #fff; box-shadow: inset 0 -3px 0 var(--blue-dark), 0 3px 0 #1a4fb0; }
.m-pick:disabled { opacity: 0.55; cursor: not-allowed; }

@media (max-width: 1100px) {
  .lo-tab { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 2px; padding: 6px 4px 7px; text-align: center; }
  .lo-tab-art { width: 44px; }
  .lo-tab-w { max-width: 100%; font-size: 12px; }
}
@media (max-width: 760px) {
  .lo .pnl-body { display: block; overflow: auto; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .lo-banner { margin-bottom: 10px; }
  .lo-cols { display: flex; flex-direction: column; gap: 12px; }
  .lo-left, .lo-right { display: contents; }
  .lo-hero {
    order: 0;
    position: sticky;
    top: calc(-1 * var(--pad));
    z-index: 4;
    display: grid;
    grid-template-columns: 136px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0;
    padding: var(--pad) var(--pad) 10px;
    background: var(--paper-2);
    box-shadow: 0 8px 10px -8px rgba(18, 32, 58, 0.3);
  }
  .lo-pv { aspect-ratio: 4 / 3; border-radius: 16px; }
  .lo-info { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lo-actions { grid-column: 1; grid-row: auto; margin-top: 6px; }
  .lo-actions .btn, .lo-equipped { min-height: 40px; padding: 6px 14px; font-size: 14px; }
  .lo-name { font-size: 25px; }
  .lo-tabs { order: 1; position: static; margin: 0; padding: 0; gap: 6px; }
  .lo-tab { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 2px; padding: 6px 4px 7px; text-align: center; border-radius: 14px; }
  .lo-tab-art { width: 44px; }
  .lo-tab-slot { font-size: 9.5px; }
  .lo-tab-w { max-width: 100%; font-size: 11px; }
  .lo-grid { order: 2; }
  .lo-extra { order: 3; display: grid; gap: 12px; }
  .lo-cards { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 9px; }
  .lo-cards .wc-name { font-size: 11px; letter-spacing: 0; }
}
@media (max-height: 520px) and (min-width: 761px) {
  .lo-pv { aspect-ratio: auto; height: 170px; }
  .lo-name { font-size: 26px; }
  .lo-tab-art { display: none; }
  .lo-tab { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- shop */

.sh .pnl-body { padding-top: 0; }
.sh-tabs { position: sticky; top: 0; z-index: 4; margin: 0 calc(-1 * var(--pad)) 6px; padding: 12px var(--pad) 2px; background: var(--paper-2); }
.sh-intro { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; font-weight: 800; color: var(--ink-2); }
.sh-intro .m-ico { font-size: 22px; }
.sh-blurb { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.4; color: var(--ink-2); }
.sh-buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; }
.sh-price { font-size: 24px; }
.sh-price > i { width: 28px; height: 28px; }
.sh-price.is-short { color: var(--red-dark); }

.sh-bundles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sh-bundle {
  --c: var(--blue);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 0 0 3px var(--ink), 0 7px 0 3px var(--ink);
}
.sh-bundle-top {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 136px;
  padding: 14px 18px;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 0 16px, transparent 16px 32px),
    linear-gradient(150deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 72%, #12203a));
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.14);
}
.sh-bundle-art { position: absolute; top: 10px; right: 12px; width: 58%; height: 112px; }
.sh-bundle-art .wart { position: absolute; width: 62%; filter: drop-shadow(0 5px 0 rgba(18, 32, 58, 0.25)); }
.sh-art-0 { right: 0; top: 4px; transform: rotate(-9deg); z-index: 3; }
.sh-art-1 { right: 34%; top: 34px; transform: rotate(7deg); z-index: 2; }
.sh-art-2 { right: 6%; top: 58px; transform: rotate(-3deg) scale(0.85); z-index: 1; }
.sh-bundle-name { position: relative; z-index: 4; max-width: 62%; font-size: 32px; }
.sh-bundle-body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 14px 18px 18px; }
.sh-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.sh-list li { display: flex; align-items: center; gap: 9px; line-height: 1.3; }
.sh-list li > .m-ico { font-size: 19px; color: var(--c); }
.sh-list b { color: var(--ink); }
.sh-mini-sw { display: inline-flex; gap: 3px; flex: none; }
.sh-bundle.is-owned .sh-bundle-top { filter: saturate(0.6); }

.sh-sec + .sh-sec { margin-top: 22px; }
.sh-sec-t { margin: 0 0 10px; font-family: var(--display); font-weight: 400; font-size: 25px; }
.sh-weapons { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px; }
.sh-w {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 18px;
  background: var(--t-bg);
  color: var(--t-ink);
  box-shadow: inset 0 0 0 3px var(--t-edge), 0 5px 0 var(--t-edge);
}
.sh-w-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 24px; }
.sh-w-art { width: 100%; padding: 2px 14px; }
.sh-w-name { margin: 0; font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.05; }
.sh-w-blurb {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  opacity: 0.85;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.sh-w.t-galaxy .sh-w-name { text-shadow: 0 2px 0 rgba(18, 32, 58, 0.35); }
.sh-w-buy { justify-content: space-between; margin-top: auto; }
.sh-w-owned { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; margin-top: auto; border-radius: 10px; background: rgba(34, 197, 94, 0.14); color: var(--green-dark); font-size: 13px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.sh-w.t-galaxy .sh-w-owned { background: rgba(255, 255, 255, 0.85); }
.sh-w-buy .cur { font-size: 15px; }

.sh-boxhero {
  display: grid;
  grid-template-columns: minmax(170px, 270px) minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  margin-bottom: 18px;
  padding: 22px;
  border-radius: 26px;
  background: radial-gradient(circle at 22% 50%, #f1e4ff, transparent 60%), linear-gradient(140deg, #ffffff, #f5edff);
  box-shadow: inset 0 0 0 2px #e6d6ff, 0 5px 0 #d9c4ff;
}
.sh-boxart { width: 100%; padding: 0; border: 0; background: none; }
.sh-boxart svg { display: block; width: 100%; height: auto; }
.sh-boxart.is-ready { cursor: pointer; animation: sh-wiggle 2.8s ease-in-out infinite; }
.sh-boxart:disabled { cursor: default; filter: grayscale(0.4); opacity: 0.8; }
.sh-boxtitle { font-size: 42px; margin-bottom: 8px; }
.sh-odds { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.sh-odd { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 999px; background: #fff; font-size: 14px; box-shadow: inset 0 0 0 2px #e6edf7; }
.sh-boxbuy { display: flex; flex-wrap: wrap; gap: 10px; }
.sh-boxbuy .cur { padding: 2px 8px 2px 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.6); }
.sh-open { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 3px dashed #e3d2ff; }
.sh-have { font-size: 16px; font-weight: 800; }
.sh-have b { font-family: var(--display); font-weight: 400; font-size: 32px; color: var(--purple-dark); }
.sh-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.sh-free {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: linear-gradient(120deg, #7c3aed, #c026d3);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sh-buy > .sh-free { font-size: 16px; padding: 4px 14px; }
.sh-admin { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; padding: 10px 14px; border-radius: 14px; background: #f3e8ff; color: var(--purple-dark); font-weight: 900; box-shadow: inset 0 0 0 2px #e2cfff; }
.sh-admin .m-ico { font-size: 20px; color: var(--purple); }

.sh-reveal {
  --rc: #fff;
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rc) 40%, #1d2c5c), #0b1430 72%);
  animation: m-fade 0.2s ease both;
}
.sh-reveal-box { width: min(250px, 58vw); padding: 0; border: 0; background: none; animation: sh-shake 1.5s ease-in both; }
.sh-reveal-box svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 30px color-mix(in srgb, var(--rc) 70%, transparent)); }
.sh-flash { position: absolute; inset: 0; background: var(--rc); opacity: 0; pointer-events: none; }
.sh-reveal-result {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  padding: 20px;
  color: #fff;
  text-align: center;
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
}
.sh-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 1000px;
  height: 1000px;
  margin: -500px 0 0 -500px;
  border-radius: 50%;
  background: repeating-conic-gradient(color-mix(in srgb, var(--rc) 45%, transparent) 0 10deg, transparent 10deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 60%);
  mask: radial-gradient(circle, #000 12%, transparent 60%);
  animation: m-spin 20s linear infinite;
}
.sh-reveal .sw-xl { box-shadow: inset 0 0 0 3px rgba(18, 32, 58, 0.2), 0 0 0 5px #fff, 0 10px 0 5px var(--ink), 0 0 60px var(--rc); }
.sh-reveal-name { font-size: 46px; }
.sh-reveal-result .tier { margin-top: 8px; font-size: 13px; padding: 3px 12px; }
.sh-reveal-note { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 16px; font-weight: 800; }
.sh-reveal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.sh-reveal.is-done .sh-reveal-box { animation: sh-pop 0.35s ease-in forwards; }
.sh-reveal.is-done .sh-flash { animation: sh-flash 0.7s ease-out; }
.sh-reveal.is-done .sh-reveal-result { opacity: 1; transform: none; pointer-events: auto; transition: opacity 0.3s ease 0.15s, transform 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 0.15s; }

.sh-specials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sh-special {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 18px;
  padding: 16px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 0 0 3px var(--ink), 0 7px 0 3px var(--ink);
}
.sh-special-art { display: grid; place-items: center; min-height: 160px; padding: 12px; border-radius: 18px; background: radial-gradient(circle at 50% 45%, #fff, #e6efff); }
.sh-special.r-galaxy .sh-special-art { background: radial-gradient(circle at 50% 45%, #fbf5ff, #cfa9ff); }
.sh-special-glyph { width: 100%; }
.sh-special-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sh-special-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; font-weight: 900; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.sh-special-name { font-size: 32px; }

@media (max-width: 760px) {
  .sh-bundles, .sh-specials { grid-template-columns: minmax(0, 1fr); }
  .sh-weapons { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .sh-w-blurb { -webkit-line-clamp: 2; font-size: 12px; }
  .sh-w-name { font-size: 18px; }
  .sh-boxhero { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; padding: 16px; text-align: center; }
  .sh-boxart { width: min(190px, 60%); }
  .sh-odds, .sh-boxbuy, .sh-open { justify-content: center; }
  .sh-special { grid-template-columns: minmax(0, 1fr); }
  .sh-special-art { min-height: 130px; }
  .sh-bundle-name { font-size: 27px; }
  .sh-tabs .m-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: visible; }
  .sh-tabs .m-tab { flex-direction: column; justify-content: center; gap: 2px; min-width: 0; min-height: 54px; padding: 6px 4px; font-size: 10.5px; letter-spacing: 0.01em; text-align: center; }
  .sh-tabs .m-tab .m-ico { font-size: 20px; }
}

/* ---------------------------------------------------------------- tasks */

.tk-daily, .tk-weapons { margin-bottom: 24px; }
.tk-reset { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 900; white-space: nowrap; box-shadow: inset 0 0 0 2px #e1e8f2; }
.tk-reset .m-ico { color: var(--green-dark); }
.tk-list { display: grid; gap: 12px; }
.tk-task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.tk-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 17px; background: var(--c); color: #fff; font-size: 30px; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.18); }
.tk-text { margin: 0 0 8px; font-size: 17px; font-weight: 900; }
.tk-prog { display: flex; align-items: center; gap: 10px; }
.tk-prog .pbar { flex: 1; height: 14px; }
.tk-count { min-width: 64px; font-weight: 900; font-variant-numeric: tabular-nums; text-align: right; }
.tk-side { display: flex; align-items: center; gap: 14px; }
.tk-reward { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; }
.tk-task.is-done:not(.is-claimed) { box-shadow: inset 0 0 0 3px var(--green), 0 5px 0 var(--green-dark); }
.tk-task.is-claimed { opacity: 0.72; }
.tk-task.is-claimed .tk-ico { background: var(--green); }
.tk-bonus {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 22px;
  color: #fff;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 0 16px, transparent 16px 32px),
    linear-gradient(140deg, #ffbe2e, #ff8a1f);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.3), 0 6px 0 #c76a00;
}
.tk-bonus:not(.is-ready):not(.is-claimed) { filter: saturate(0.7) brightness(0.98); }
.tk-bonus.is-claimed { background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 0 16px, transparent 16px 32px), linear-gradient(140deg, #3ee07a, var(--green)); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.3), 0 6px 0 var(--green-dark); }
.tk-bonus-ico { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; background: #fff; color: var(--orange); font-size: 34px; box-shadow: 0 0 0 3px var(--ink), 0 5px 0 3px var(--ink); }
.tk-bonus.is-claimed .tk-bonus-ico { color: var(--green); }
.tk-bonus-t { font-size: 28px; }
.tk-bonus-text { margin: 4px 0 8px; font-weight: 800; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }
.tk-bonus .tk-reward .cur, .tk-plus { color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.tk-plus { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; }
.tk-unlock { display: grid; justify-items: center; gap: 4px; font-weight: 900; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.tk-wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 12px; }
.tk-w { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px; }
.tk-w-art { padding: 6px 8px; border-radius: 14px; background: var(--t-bg); box-shadow: inset 0 0 0 2px var(--t-edge); }
.tk-w-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tk-w-name { margin: 0; overflow: hidden; font-size: 15px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.tk-w-kills { display: inline-flex; align-items: center; gap: 4px; color: var(--red-dark); font-size: 13px; font-weight: 900; }
.tk-w-colors { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 8px; }
.tk-w-colors .sw-xs { width: 20px; height: 20px; border-radius: 6px; }
.tk-w-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.tk-w-next.is-done { display: flex; color: var(--green-dark); }

@media (max-width: 700px) {
  .tk-task { grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; }
  .tk-ico { width: 46px; height: 46px; font-size: 25px; border-radius: 14px; }
  .tk-text { font-size: 15.5px; }
  .tk-side { grid-column: 1 / -1; justify-content: space-between; }
  .tk-bonus { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .tk-bonus > .btn, .tk-bonus > .tk-unlock, .tk-bonus > .m-tag { grid-column: 1 / -1; justify-self: stretch; }
  .tk-bonus-ico { width: 50px; height: 50px; font-size: 28px; }
  .tk-bonus-t { font-size: 24px; }
  .tk-wgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- rewards */

.rw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px; }
.rw-card { display: flex; flex-direction: column; gap: 14px; }
.rw-card .sec-h { margin-bottom: 0; }
.rw-text { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.4; color: var(--ink-2); }
.rw-small { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 900; color: var(--muted); }
.rw-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rw-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 12px;
  border: 0;
  border-radius: 16px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  text-align: left;
  box-shadow: inset 0 0 0 2px #dfe7f2, 0 4px 0 #d3dceb;
}
.rw-toggle-ico { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 11px; background: #fff; color: var(--blue); font-size: 20px; box-shadow: inset 0 0 0 2px #dfe7f2; }
.rw-toggle.is-on { background: #d8f8e3; color: var(--green-dark); box-shadow: inset 0 0 0 3px var(--green), 0 4px 0 var(--green-dark); }
.rw-toggle.is-on .rw-toggle-ico { background: var(--green); color: #fff; box-shadow: none; }
.rw-toggle:disabled { cursor: default; }
.rw-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.rw-gift { display: flex; flex-wrap: wrap; gap: 8px; }
.rw-item { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 999px; background: var(--paper-2); color: var(--ink); font-size: 13.5px; font-weight: 800; box-shadow: inset 0 0 0 2px #e6edf7; }
.rw-item > .m-ico { font-size: 18px; color: var(--yellow-dark); }
.rw-bday-form { display: flex; flex-wrap: wrap; gap: 10px; }
.rw-select {
  flex: 1;
  min-width: 130px;
  height: 46px;
  padding: 0 36px 0 14px;
  border: 0;
  border-radius: 14px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%2312203a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 12px center / 16px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: inset 0 0 0 2px #d6e0ee, 0 3px 0 #d3dceb;
}
.rw-select-day { flex: 0 0 96px; min-width: 0; }
.rw-bday-set { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: 16px; background: #fff0f7; box-shadow: inset 0 0 0 2px #ffd0e6; }
.rw-date { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 900; }
.rw-date .m-ico { font-size: 24px; color: #ff5fa8; }
.rw-date-big { font-family: var(--display); font-weight: 400; font-size: 28px; }
.rw-count { font-weight: 900; color: #c2185b; }
.rw-hbd { margin: 0; font-size: 38px; color: #ffd23f; }
.rw-visits-num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.rw-visits-num .title { font-size: 46px; color: var(--yellow); }
.rw-visits-num span:last-child { font-weight: 900; color: var(--ink-2); }
.rw-next { display: grid; gap: 6px; font-size: 14px; font-weight: 800; color: var(--ink-2); }
.rw-skins { display: flex; flex-wrap: wrap; gap: 8px; }
.rw-skin { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 12px; background: #fff7d6; font-size: 13.5px; font-weight: 900; box-shadow: inset 0 0 0 2px #ffe08a; }
.rw-skin .m-ico { color: var(--green-dark); }
.rw-skin.r-prime { background: #fff1b8; box-shadow: inset 0 0 0 2px var(--yellow); }
.rw-skin.r-galaxy { background: #f1e6ff; box-shadow: inset 0 0 0 2px var(--purple); }
.rw-skin.is-next { background: var(--paper-2); color: var(--muted); box-shadow: inset 0 0 0 2px #e1e8f2; }
.rw-skin.is-next .m-ico { color: var(--muted); }
.rw-loading, .rw-offline { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 800; color: var(--muted); }
.rw-spin { width: 22px; height: 22px; border: 3px solid #e1e8f2; border-top-color: var(--blue); border-radius: 50%; animation: m-spin 0.8s linear infinite; }
.rw-event { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: linear-gradient(140deg, #f0fff5, #d8f8e3); box-shadow: inset 0 0 0 2px #b9efcc; }
.rw-event + .rw-event { margin-top: 10px; }
.rw-event-main { display: grid; gap: 8px; min-width: 0; }
.rw-event-t { margin: 0; font-family: var(--display); font-weight: 400; font-size: 22px; }
.rw-until { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 900; color: var(--green-dark); }
.rw-event.is-claimed { opacity: 0.75; }
.rw-empty { color: var(--muted); }

@media (max-width: 760px) {
  .rw-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .rw-toggle { min-height: 52px; font-size: 14px; }
  .rw-event { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- fuse machine */

.fu-top { display: grid; grid-template-columns: 220px minmax(0, 1fr) 220px; gap: 16px; }
.fu-col { display: flex; flex-direction: column; min-width: 0; }
.fu-col-h { display: grid; margin-bottom: 8px; }
.fu-col-t { font-family: var(--display); font-size: 26px; line-height: 1; }
.fu-col-a .fu-col-t { color: var(--blue); }
.fu-col-b .fu-col-t { color: var(--orange); }
.fu-col-s { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.fu-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 9px; max-height: 590px; padding: 6px 6px 12px; margin: -6px; overflow: auto; overscroll-behavior: contain; }
.fu-col-b .wc.is-sel { box-shadow: inset 0 0 0 3px var(--wc-edge), 0 0 0 4px var(--orange), 0 5px 0 4px var(--orange-dark); }
.fu-machine {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border-radius: 24px;
  background: linear-gradient(180deg, #f3eaff, #ffffff 60%);
  box-shadow: inset 0 0 0 3px #e2cfff, 0 6px 0 #cdb0ff;
}
.fu-recipe { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.fu-part { display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 6px; border-radius: 14px; background: #fff; font-size: 14px; font-weight: 900; box-shadow: inset 0 0 0 2px #e6edf7, 0 3px 0 #d3dceb; }
.fu-part-art { width: 62px; }
.fu-plus { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--purple); color: #fff; font-size: 18px; box-shadow: 0 3px 0 var(--purple-dark); }
.fu-stage { position: relative; }
.fu-pv { aspect-ratio: 2 / 1; max-height: 300px; }
.fu-zap { position: absolute; inset: 0; border-radius: 20px; opacity: 0; pointer-events: none; background: radial-gradient(circle, #fff 0, rgba(255, 255, 255, 0.9) 18%, rgba(168, 85, 247, 0.55) 45%, transparent 72%); }
.fu-machine.is-zap .fu-zap { animation: fu-zap 0.8s ease-out; }
.fu-info { display: grid; gap: 8px; }
.fu-meta { display: flex; align-items: center; gap: 8px; }
.fu-name { font-size: 36px; }
.fu-blurb { margin: 0 0 4px; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--ink-2); }
.fu-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 2px 0 8px; }
.fu-go { flex: 1; }
.fu-shelf { margin-top: 20px; }
.fu-shelf-t { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--display); font-weight: 400; font-size: 25px; }
.fu-shelf-t .m-ico { color: var(--purple); }
.fu-count:not(:empty) { padding: 0 9px; border-radius: 999px; background: var(--purple); color: #fff; font-family: var(--ui); font-size: 14px; font-weight: 900; line-height: 24px; }
.fu-saved { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.fu-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 2px #e1e8f2, 0 4px 0 #d3dceb; }
.fu-item.is-new { box-shadow: inset 0 0 0 3px var(--purple), 0 4px 0 var(--purple-dark); animation: m-pop 0.35s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.fu-item-view { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
.fu-item-art { width: 84px; flex: none; padding: 4px 6px; border-radius: 12px; background: var(--t-bg); box-shadow: inset 0 0 0 2px var(--t-edge); }
.fu-item-text { display: grid; min-width: 0; }
.fu-item-text b { font-size: 15px; font-weight: 900; }
.fu-item-text span { overflow: hidden; font-size: 12px; font-weight: 700; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.fu-item-actions { display: flex; align-items: center; gap: 6px; }
.fu-item-actions .btn-sm { min-width: 34px; }
.fu-empty { margin: 0; font-weight: 800; color: var(--muted); }

@media (max-width: 900px) {
  .fu-top { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fu-machine { order: -1; }
  .fu-list { display: flex; max-height: none; overflow-x: auto; overflow-y: hidden; gap: 8px; padding: 6px 6px 12px; }
  .fu-list .wc { flex: 0 0 104px; }
  .fu-col-h { grid-template-columns: auto 1fr; align-items: baseline; gap: 8px; }
  .fu-name { font-size: 30px; }
  .fu-saved { grid-template-columns: minmax(0, 1fr); }
  .fu-recipe { flex-wrap: nowrap; gap: 6px; }
  .fu-part { min-width: 0; gap: 4px; padding: 3px 10px 3px 4px; font-size: 12.5px; }
  .fu-part b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fu-part-art { width: 44px; flex: none; }
  .fu-plus { width: 28px; height: 28px; flex: none; font-size: 15px; }
}

/* ---------------------------------------------------------------- settings */

.st .pnl-body { display: grid; grid-auto-rows: max-content; align-content: start; gap: 16px; }
.st-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 8px 16px; padding: 12px 0; border-bottom: 2px solid #eef2f8; }
.st-box > .st-row:first-child { padding-top: 0; }
.st-box > .st-row:last-child { padding-bottom: 0; border-bottom: 0; }
.st-label { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 900; }
.st-label .m-ico { width: 36px; height: 36px; padding: 7px; border-radius: 11px; background: #e8f1ff; color: var(--blue); }
.st-control { min-width: 0; }
.st-note { grid-column: 2; margin: -4px 0 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.st-name { display: flex; gap: 10px; }
.st-input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--paper-2); color: var(--ink); font-size: 17px; font-weight: 900; box-shadow: inset 0 0 0 2px #d6e0ee; }
.st-input:focus { outline: none; box-shadow: inset 0 0 0 3px var(--blue); }
.st-sens { display: flex; align-items: center; gap: 12px; }
.st-range {
  --fill: 30%;
  flex: 1;
  height: 14px;
  margin: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue) var(--fill), #e3eaf3 var(--fill));
  box-shadow: inset 0 2px 0 rgba(18, 32, 58, 0.1);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.st-range::-webkit-slider-thumb { width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--ink), 0 4px 0 3px var(--ink); -webkit-appearance: none; appearance: none; }
.st-range::-moz-range-thumb { width: 26px; height: 26px; border: 3px solid var(--ink); border-radius: 50%; background: #fff; box-shadow: 0 4px 0 var(--ink); }
.st-value { min-width: 62px; font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; text-align: right; }
.st-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.st-stats div { padding: 10px 12px; border-radius: 14px; background: var(--paper-2); }
.st-stats dt { font-size: 11.5px; font-weight: 900; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.st-stats dd { margin: 2px 0 0; font-family: var(--display); font-size: 24px; }
.st-danger { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.st-danger .sec-h { margin: 0; }
.m-diff .m-diff-note { margin-bottom: 0; }
.st-admin-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; }
.st-admin-err { margin: 10px 0 0; color: var(--red-dark); font-size: 14px; font-weight: 900; }
.st-admin-err:empty { display: none; }
.st-admin.is-shake { animation: m-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
.st-admin.is-shake .st-input[type="password"] { box-shadow: inset 0 0 0 3px var(--red); }
.st-admin-on { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.st-admin-on .m-tag { padding: 6px 14px; font-size: 13px; }

@media (max-width: 600px) {
  .st-admin-form { grid-template-columns: minmax(0, 1fr); }
  .st-row { grid-template-columns: minmax(0, 1fr); }
  .st-note { grid-column: 1; }
  .st-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- how to play */

.ht .pnl-body { display: grid; gap: 14px; align-content: start; }
.ht-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px 8px; align-items: stretch; }
.ht-head { display: flex; align-items: center; gap: 6px; padding: 2px 10px; color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.ht-head .m-ico { width: 20px; height: 20px; }
.ht-head.is-you { color: var(--blue-dark); }
.ht-what { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 900; }
.ht-what .m-ico { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: #e8f1ff; color: var(--blue); }
.ht-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 42px; padding: 6px 10px; border-radius: 12px; background: var(--paper-2); color: var(--ink-2); font-size: 13.5px; font-weight: 800; line-height: 1.3; }
.ht-cell.is-you { background: #e8f1ff; box-shadow: inset 0 0 0 2px #bcd6ff; color: var(--ink); }
.ht-cell kbd { padding: 2px 7px; font-size: 12px; }
/* The computer column keeps its key chips even on a phone (panels hide kbd there). */
#panels.is-touch .ht kbd { display: inline-block; }
.ht-btn { display: inline-grid; place-items: center; min-width: 46px; height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(18, 32, 58, 0.72); color: #fff; font-size: 11.5px; font-weight: 900; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7); }
.ht-fire { background: var(--red); }
.ht-use { background: var(--green); }
.ht-stick { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 3px #b9cbe4; }
.ht-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: #d8f8e3; color: var(--green-dark); font-weight: 900; }
.ht-note .m-ico { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--green); color: #fff; }
.ht-actions { display: flex; justify-content: center; }
@media (max-width: 600px) {
  .ht-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 6px; }
  .ht-head.ht-what { display: none; }
  .ht-what { grid-column: 1 / -1; margin-top: 8px; }
  .ht-cell { min-height: 40px; padding: 5px 8px; font-size: 12.5px; }
}

/* ---------------------------------------------------------------- night courtyard */

.wv.pnl { background: #10183f; color: #fff; }
.wv .pnl-head { background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 16px, transparent 16px 32px), linear-gradient(180deg, #33449a, #1d2860); }
.wv .pnl-icon { color: #4b4fd1; }
.wv .pnl-body {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 14px;
  background:
    radial-gradient(circle at 14% 22%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.6px) 0 0 / 97px 83px,
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.45) 0 1px, transparent 1.6px) 0 0 / 131px 109px,
    linear-gradient(180deg, #141d4a, #0b1030);
}
.wv-hero { position: relative; min-height: 200px; overflow: hidden; padding: 20px 20px 78px; border-radius: 22px; background: linear-gradient(180deg, #2a3c86, #17215a); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.1); }
.wv-moon { position: absolute; top: -24px; right: -10px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 38% 38%, #fffbe6, #ffe9a3 60%, #f3cf6b); box-shadow: 0 0 50px rgba(255, 233, 163, 0.5); }
.wv-arches { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 12px; height: 66px; padding: 0 14px; }
.wv-arches i { flex: 1; border-radius: 40px 40px 0 0; background: #0b1030; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.06); }
.wv-kicker { position: relative; display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; color: #c8cffc; font-size: 13px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.wv-title { position: relative; font-size: 40px; }
.wv-blurb { position: relative; max-width: 46ch; margin: 10px 0 0; color: #dfe4ff; font-weight: 700; line-height: 1.4; }
.wv-list { display: grid; gap: 10px; }
.wv-diff {
  --a: #6cc4ff;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 0;
  border-radius: 18px;
  background: #1d2759;
  color: #fff;
  text-align: left;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1), 0 4px 0 rgba(0, 0, 0, 0.35);
}
@media (hover: hover) { .wv-diff:not(.is-on):hover { background: #243068; } }
.wv-diff.is-on { background: color-mix(in srgb, var(--a) 22%, #141d4a); box-shadow: inset 0 0 0 3px var(--a), 0 4px 0 color-mix(in srgb, var(--a) 45%, #000); }
.wv-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #10183f; font-size: 18px; box-shadow: inset 0 0 0 3px var(--a); }
.wv-diff.is-on .wv-dot { background: var(--a); }
.wv-text { display: grid; gap: 2px; min-width: 0; }
.wv-name { font-family: var(--display); font-weight: 400; font-size: 23px; color: var(--a); }
.wv-note { color: #c8cffc; font-size: 13.5px; font-weight: 700; }
.wv-best { display: inline-flex; align-items: center; gap: 6px; color: #8d96c9; font-size: 13px; font-weight: 900; white-space: nowrap; }
.wv-best .m-ico { color: #ffd23f; }
.wv-best:has(.m-ico) { color: #ffe08a; font-size: 16px; }
.wv-start { display: flex; justify-content: center; padding: 4px 0 2px; }
.wv-start .btn { min-width: min(300px, 100%); }

@media (max-width: 600px) {
  .wv-title { font-size: 32px; }
  .wv-hero { min-height: auto; padding: 16px 16px 84px; }
  .wv-moon { top: -46px; right: -46px; width: 112px; height: 112px; }
  .wv-kicker, .wv-title { padding-right: 52px; }
  .wv-diff { grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; }
  .wv-best { grid-column: 2; }
}

/* ---------------------------------------------------------------- ranked bans */

.bn .pnl-head { background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.08) 0 16px, transparent 16px 32px), linear-gradient(180deg, #ff737b, var(--red)); box-shadow: inset 0 -5px 0 rgba(120, 10, 20, 0.25); }
.bn .pnl-icon { color: var(--red); }
.bn-intro { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-weight: 800; color: var(--ink-2); }
.bn-intro .m-ico { font-size: 22px; color: var(--red); }
.bn-groups { display: grid; gap: 16px; padding-bottom: 6px; }
.bn-group-t { margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: 21px; }
.bn-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.bn .bn-cards .wc.is-sel { box-shadow: inset 0 0 0 3px var(--wc-edge), 0 0 0 4px var(--red), 0 5px 0 4px var(--red-dark); }
.bn-starter { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-size: 10.5px; font-weight: 900; text-transform: uppercase; }
.bn-starter .m-ico { width: 12px; height: 12px; }
.bn-foot { display: flex; flex: none; align-items: center; gap: 14px; padding: 12px 18px max(12px, env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -4px 0 #e1e8f2; }
.bn-foot-t { font-family: var(--display); font-size: 21px; white-space: nowrap; }
.bn-picks { display: flex; flex: 1; gap: 10px; }
.bn-slot { position: relative; display: grid; place-items: center; width: 100px; height: 66px; padding: 0; border: 3px dashed #d6e0ee; border-radius: 14px; background: none; color: #c8d3e3; font-size: 26px; }
.bn-slot.is-full { border: 0; cursor: pointer; }
.bn-slot .wc-xs { width: 100%; height: 100%; }
.bn-x { position: absolute; top: -8px; right: -8px; z-index: 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; }
.bn-reveal { display: grid; justify-items: center; gap: 22px; padding: 8px 0 12px; }
.bn-reveal-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 18px; border-radius: 999px; background: var(--red); color: #fff; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; box-shadow: 0 4px 0 var(--red-dark); }
.bn-reveal-row { display: grid; justify-items: center; gap: 12px; width: 100%; }
.bn-reveal-t { font-size: 30px; }
.bn-reveal-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.bn-reveal-cards .wc { width: 156px; }
.bn-flip { animation: bn-flip 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) var(--d, 0s) both; }
.bn-timer { width: min(320px, 80%); height: 8px; overflow: hidden; border-radius: 999px; background: #e3eaf3; }
.bn-timer i { display: block; height: 100%; background: var(--red); transform-origin: left; animation: bn-timer 2.4s linear forwards; }

@media (max-width: 600px) {
  .bn-cards { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .bn-foot { flex-wrap: wrap; gap: 10px; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); }
  .bn-foot-t { display: none; }
  .bn-picks { flex: 1 1 auto; }
  .bn-slot { width: 86px; height: 58px; }
  .bn-foot .btn { flex: 1 1 140px; min-height: 52px; font-size: 17px; padding: 8px 14px; }
  .bn-reveal-cards .wc { width: 128px; }
}

/* ---------------------------------------------------------------- results */

.rs.pnl { width: min(960px, 100%); }
.rs.is-win .pnl-head { background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.08) 0 16px, transparent 16px 32px), linear-gradient(180deg, #44e384, var(--green)); box-shadow: inset 0 -5px 0 rgba(0, 90, 40, 0.25); }
.rs.is-win .pnl-icon { color: var(--green-dark); }
.rs.is-loss .pnl-head { background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.06) 0 16px, transparent 16px 32px), linear-gradient(180deg, #8592b0, #5b6886); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.2); }
.rs.is-loss .pnl-icon { color: #5b6886; }
.rs.is-waves .pnl-head { background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 16px, transparent 16px 32px), linear-gradient(180deg, #33449a, #1d2860); }
.rs.is-waves .pnl-icon { color: #4b4fd1; }
.rs-hero { position: relative; display: grid; justify-items: center; gap: 12px; margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 16px; padding: 22px 12px 24px; overflow: hidden; text-align: center; }
.rs.is-win .rs-hero { background: radial-gradient(ellipse at 50% 40%, #fff3c0, rgba(255, 243, 192, 0) 70%); }
.rs.is-loss .rs-hero { background: radial-gradient(ellipse at 50% 40%, #e3e8f2, rgba(227, 232, 242, 0) 70%); }
.rs.is-waves .rs-hero { color: #fff; background: radial-gradient(circle at 14% 22%, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.6px) 0 0 / 53px 47px, linear-gradient(180deg, #1d2860, #2f3f8f); }
.rs-rays { position: absolute; left: 50%; top: 45%; width: 1200px; height: 1200px; margin: -600px 0 0 -600px; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 204, 46, 0.3) 0 9deg, transparent 9deg 18deg); -webkit-mask: radial-gradient(circle, #000 8%, transparent 45%); mask: radial-gradient(circle, #000 8%, transparent 45%); animation: m-spin 40s linear infinite; }
.rs.is-loss .rs-rays, .rs.is-waves .rs-rays { display: none; }
.rs-title { position: relative; font-size: 80px; animation: rs-pop 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.rs.is-win .rs-title { color: var(--yellow); }
.rs.is-loss .rs-title { color: #e9eef6; }
.rs-score { position: relative; display: flex; align-items: center; gap: 12px; }
.rs-team { position: relative; display: grid; justify-items: center; min-width: 86px; padding: 8px 16px 6px; border-radius: 18px; background: var(--c); color: #fff; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.2), 0 0 0 3px var(--ink), 0 5px 0 3px var(--ink); }
.rs-team b { font-family: var(--display); font-weight: 400; font-size: 46px; line-height: 1; text-shadow: var(--outline); }
.rs-team small { font-size: 11px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.rs-team.is-mine { transform: scale(1.08); }
.rs-you-pill {
  position: absolute;
  top: -11px;
  left: 50%;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: translateX(-50%);
  box-shadow: 0 0 0 2px var(--ink);
}
.rs-dash { font-family: var(--display); font-size: 38px; color: var(--ink); }
.rs-wavestats { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.rs-wavestats > div { display: grid; min-width: 104px; padding: 8px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18); }
.rs-wavestats span { font-size: 11.5px; font-weight: 900; letter-spacing: 0.05em; opacity: 0.85; text-transform: uppercase; }
.rs-wavestats b { font-family: var(--display); font-weight: 400; font-size: 28px; }
.rs-wavestats > .rs-newbest { display: inline-flex; align-items: center; align-self: center; gap: 6px; background: var(--yellow); color: var(--ink); font-weight: 900; box-shadow: 0 4px 0 var(--yellow-dark); animation: rs-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 0.4s both; }
.rs-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 16px; }
.rs-cols.is-single { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }
.rs-boardbox { padding: 10px 12px; }
.rs-board { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-weight: 800; }
.rs-board th { padding: 0 10px; color: var(--muted); font-size: 11.5px; font-weight: 900; text-align: right; text-transform: uppercase; }
.rs-board th:first-child { text-align: left; }
.rs-board td { padding: 9px 10px; background: var(--paper-2); font-variant-numeric: tabular-nums; text-align: right; }
.rs-board td:first-child { border-radius: 12px 0 0 12px; text-align: left; box-shadow: inset 5px 0 0 var(--c); }
.rs-board td:last-child { border-radius: 0 12px 12px 0; }
.rs-board tr.is-me td { background: #fff3c4; }
.rs-pname { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rs-teamdot { display: none; }
.rs-you { padding: 1px 7px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
.rs-mvp { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 5px; border-radius: 999px; background: linear-gradient(180deg, #ffd23f, #ffb000); color: #4a3500; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; box-shadow: 0 2px 0 #c98a00; }
.rs-mvp .m-ico { width: 14px; height: 14px; }
.rs-board tr.is-mvp td:first-child { box-shadow: inset 5px 0 0 var(--c), inset 0 0 0 2px #ffd23f; }
.rs-side { display: grid; gap: 12px; }
.rs-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-family: var(--display); font-weight: 400; font-size: 21px; }
.rs-h .m-ico { color: var(--blue); }
.rs-amounts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rs-amount { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 16px; background: var(--paper-2); }
.rs-amount .cur > i { width: 32px; height: 32px; }
.rs-num { font-family: var(--display); font-size: 30px; font-variant-numeric: tabular-nums; }
.rs-unit { margin-left: auto; color: var(--muted); font-size: 11.5px; font-weight: 900; text-transform: uppercase; }
.rs-rank { display: flex; align-items: center; gap: 14px; }
.rs-rank.is-up { background: radial-gradient(circle at 12% 50%, color-mix(in srgb, var(--rk) 35%, #fff), #fff 70%); box-shadow: inset 0 0 0 3px var(--rk), 0 5px 0 color-mix(in srgb, var(--rk) 55%, #12203a); }
.rs-rank.is-up .rk { animation: rs-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) 0.7s both; }
.rs-rank-info { display: grid; flex: 1; gap: 4px; min-width: 0; }
.rs-promo { margin: 0; font-size: 30px; color: var(--yellow); animation: rs-pop 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) 0.8s both; }
.rs-demo { margin: 0; color: var(--red-dark); font-weight: 900; }
.rs-rank-name { margin: 0; font-family: var(--display); font-size: 25px; }
.rs-elo { margin: 0; font-weight: 900; }
.rs-elo.is-plus { color: var(--green-dark); }
.rs-elo.is-minus { color: var(--red-dark); }
.rs-elo span { color: var(--muted); font-weight: 800; }
.rs-rank .pbar > i { transition-duration: 1.2s; }
.rs-level { display: flex; align-items: center; gap: 14px; }
.rs-level.is-up { background: radial-gradient(circle at 12% 50%, #fff3c4, #fff 70%); box-shadow: inset 0 0 0 3px var(--yellow), 0 5px 0 var(--yellow-dark); }
.rs-level .pbar > i { transition-duration: 1.2s; }
.rs-lv { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 18px; background: var(--yellow); color: var(--ink); box-shadow: inset 0 -4px 0 var(--yellow-dark), 0 3px 0 rgba(18, 32, 58, 0.2); line-height: 1; }
.rs-lv small { font-size: 11px; font-weight: 900; letter-spacing: 0.08em; }
.rs-lv b { font-family: var(--display); font-size: 27px; font-weight: 400; }
.rs-level.is-up .rs-lv { animation: rs-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) 0.7s both; }
.rs-unlock { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.rs-unlock + .rs-unlock { margin-top: 8px; }
.rs-task { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 800; }
.rs-task .m-ico { color: var(--green); }
.rs-hint { margin: 4px 0 0; color: var(--muted); font-size: 13px; font-weight: 800; }
.rs-actions { display: flex; flex: none; justify-content: center; gap: 12px; padding: 12px 18px max(12px, env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -4px 0 #e1e8f2; }
.rs-actions .btn-lg { min-width: 220px; }

@media (max-width: 760px) {
  .rs-cols { grid-template-columns: minmax(0, 1fr); }
  .rs-hero { margin-bottom: 12px; padding: 16px 10px 20px; }
  .rs-title { font-size: 56px; }
  .rs-team { min-width: 70px; }
  .rs-team b { font-size: 36px; }
  .rs-board td, .rs-board th { padding-left: 7px; padding-right: 7px; }
  .rs-actions .btn { flex: 1; white-space: nowrap; }
  .rs-actions .btn-lg { min-width: 0; padding: 10px 14px; font-size: 18px; }
}
@media (max-height: 520px) {
  .rs-title { font-size: 48px; }
  .fu-pv { aspect-ratio: auto; height: 170px; }
}

/* ---------------------------------------------------------------- keyframes for panels */

@keyframes m-spin { to { transform: rotate(360deg); } }
@keyframes sh-shake {
  0% { transform: scale(0.5); }
  14% { transform: scale(1) rotate(0); }
  24% { transform: rotate(-6deg); }
  34% { transform: rotate(6deg); }
  44% { transform: rotate(-9deg) scale(1.03); }
  54% { transform: rotate(9deg) scale(1.06); }
  64% { transform: rotate(-12deg) scale(1.09); }
  74% { transform: rotate(12deg) scale(1.12); }
  84% { transform: rotate(-14deg) scale(1.15); }
  94%, 100% { transform: rotate(0) scale(1.2); }
}
@keyframes sh-pop { to { transform: scale(1.7); opacity: 0; } }
@keyframes sh-flash { 0% { opacity: 0.95; } 100% { opacity: 0; } }
@keyframes sh-wiggle { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-5deg); } 80% { transform: rotate(5deg); } 85% { transform: rotate(-3deg); } 90% { transform: rotate(2deg); } }
@keyframes fu-zap { 0% { opacity: 1; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes bn-flip { from { opacity: 0; transform: perspective(600px) rotateY(90deg) scale(0.8); } }
@keyframes bn-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rs-pop { from { opacity: 0; transform: scale(0.3); } }
@keyframes m-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .sh-boxart.is-ready, .sh-rays, .rs-rays, .rw-spin { animation: none; }
  .sh-reveal-box, .sh-reveal.is-done .sh-reveal-box, .sh-reveal.is-done .sh-flash, .fu-machine.is-zap .fu-zap, .bn-flip, .rs-title, .rs-promo, .rs-rank.is-up .rk, .rs-level.is-up .rs-lv, .rs-newbest, .fu-item.is-new, .st-admin.is-shake { animation: none !important; }
  .sh-reveal.is-done .sh-reveal-result { transition: none; }
  .sh-reveal.is-done .sh-reveal-box { display: none; }
}

/* ---------------------------------------------------------------- phones: full-screen panels */

@media (max-width: 600px), (max-height: 520px) {
  #panels { padding: 0; }
  .pnl, .pnl-wide, .pnl-narrow { width: 100%; height: 100%; max-height: none; border-radius: 0; box-shadow: none; animation-name: m-slide; }
  .pnl-head { min-height: 58px; padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); gap: 10px; }
  .pnl-icon { width: 38px; height: 38px; font-size: 20px; border-radius: 12px; }
  .pnl-title { font-size: 27px; }
  .pnl-x { width: 42px; min-height: 42px; }
  .pnl-body { --pad: 12px; padding: 12px max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .m-wallet-chip { height: 32px; font-size: 14px; padding: 0 9px 0 5px; }
  .m-wallet-chip .cur > i { width: 19px; height: 19px; }
  .m-box { padding: 13px; border-radius: 18px; }
  .sec-t { font-size: 20px; }
  .sec-sub { font-size: 13px; }
  .sec-ico { width: 36px; height: 36px; font-size: 20px; }
}
@media (max-width: 420px) {
  .m-wallet { flex-direction: column; gap: 4px; }
  .m-wallet-chip { height: 24px; font-size: 12.5px; box-shadow: 0 2px 0 rgba(18, 32, 58, 0.25); }
  .m-wallet-chip .cur > i { width: 16px; height: 16px; }
  .pnl-title { font-size: 24px; }
}
@media (max-height: 520px) and (min-width: 601px) {
  .pnl-head { min-height: 52px; padding-top: 6px; padding-bottom: 8px; }
  .pnl-title { font-size: 24px; }
  .pnl-icon { width: 34px; height: 34px; }
  .pnl-x { width: 40px; min-height: 40px; }
}

/* ---------------------------------------------------------------- motion */

@keyframes m-fade { from { opacity: 0; } }
@keyframes m-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } }
@keyframes m-slide { from { opacity: 0; transform: translateY(24px); } }
@keyframes m-pop { from { transform: scale(0); } }
@keyframes m-bump { 40% { transform: scale(1.18); } }
@keyframes m-drop { from { opacity: 0; transform: translateY(-18px) scale(0.92); } }
@keyframes m-rise { to { opacity: 0; transform: translateY(-14px) scale(0.96); } }
@keyframes m-float { 50% { transform: translateY(-6px) rotate(-1.5deg); } }
@keyframes m-shine { 0%, 55% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes m-confetti { to { transform: translate(var(--dx), 115vh) rotate(var(--r)); } }

@media (prefers-reduced-motion: reduce) {
  #panels, .pnl, .tst, .cfm, .cfm-layer, .ndot, .cur.is-bump { animation: none !important; }
  .pv.is-off .pv-art { animation: none; }
  .pbar > i, .sbr-bar > i { transition: none; }
}

/* ---------------------------------------------------------------- fingers */

/* Fingers need 44px targets: the switches, the panel close, wrap swatches and loadout actions (last, and
   under #panels, so the phone rules above don't shrink them again). */
@media (pointer: coarse) {
  #panels .m-seg-btn { min-height: 44px; }
  #panels .pnl-x { width: 44px; min-height: 44px; }
  #panels .lo-swatches .sw { width: 44px; height: 44px; }
  #panels .lo-actions .btn { min-height: 44px; }
}

/* ---------------------------------------------------------------- version pill and What's new */

/* Its own line under the wallet chips, so it follows them when they stack on narrow phones. */
.lh-vrow { flex-basis: 100%; display: flex; justify-content: flex-end; pointer-events: auto; }
.lh-version {
  position: relative;
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(18, 32, 58, 0.42);
  color: #fff;
  font-family: var(--ui);
  font-weight: 800;
  font-size: 11px;
  line-height: 18px;
  letter-spacing: 0.05em;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4);
  opacity: 0.85;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.lh-version:hover { opacity: 1; transform: translateY(-1px); }
.lh-version .ndot { top: -7px; right: -7px; }
@media (pointer: coarse) { .lh-version { min-height: 32px; padding: 6px 12px; } }

.cl .pnl-body { display: grid; gap: 12px; }
.cl-entry { padding: 14px 16px; }
.cl-entry.is-latest { box-shadow: inset 0 0 0 2px var(--green), 0 6px 0 #b9cbe4; }
.cl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 8px; }
.cl-version { font-family: var(--display); font-size: 22px; color: var(--blue); }
.cl-title { font-weight: 900; font-size: 15px; }
.cl-date { margin-left: auto; color: var(--muted); font-weight: 800; font-size: 12px; }
.cl-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cl-items li { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); font-weight: 700; font-size: 14px; line-height: 1.4; }
.cl-items li .m-ico { flex: none; width: 14px; height: 14px; margin-top: 4px; color: var(--yellow); }