/* ---- game font: Bender if installed / added (public/fonts), else Rajdhani, its closest free match ---- */
@font-face { font-family: 'Bender'; src: local('Bender'), local('Bender Bold'); font-weight: 400 700; font-display: swap; }
:root {
  --ui-font: 'Bender', 'Rajdhani', 'Barlow Condensed', 'Barlow Fallback', 'Arial Narrow', sans-serif;
  --head: var(--ui-font); --body: var(--ui-font);
}
html, body { font-weight: 600; }
/* =====================================================================
   Dead Raid - menu overhaul (loaded after style.css)
   Flat smoked-glass panels, hairline borders, small grey labels over white
   values, a pale "selected" glow with a dot texture, round utility pill,
   global icon rail. Applies to lobby, loadout (gunsmith), skills, settings.
   ===================================================================== */
:root {
  --rail: 74px;
  --hl: #d9d29a;                        /* selection glow (pale khaki) */
  --hl-a: rgba(217, 210, 154, .32);
  --sub: #c4c08c;                       /* sub-labels: weapon class, class gear */
  --lab: #a5a29a;                       /* small grey labels */
  --pn: rgba(58, 58, 56, .34);          /* panel fill */
  --pn-h: rgba(90, 88, 78, .42);        /* panel hover */
  --bd: rgba(255, 255, 255, .13);
  --bd2: rgba(255, 255, 255, .26);
  --cond: var(--ui-font);
  --blur: blur(14px) saturate(110%);
  --dots: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.3px) 0 0 / 5px 5px;
}
body.q-low { --blur: none; }
i.art { display: inline-block; flex: none; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }

/* ---------------------------------------------------------------- global rail */
#navRail { position: fixed; z-index: 70; left: calc(12px + var(--sal)); top: calc(12px + var(--sat)); bottom: calc(12px + var(--sab)); width: var(--rail);
  display: none; flex-direction: column; align-items: center; padding: 16px 0 14px;
  background: linear-gradient(180deg, rgba(22,22,22,.86), rgba(12,12,12,.9)); border: 1px solid var(--bd); border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); animation: railIn .5s var(--ease) both; }
#navRail.on { display: flex; }
@keyframes railIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.nv-prof { position: relative; display: flex; flex-direction: column; align-items: center; width: 54px; padding-bottom: 14px; }
.nv-prof svg { width: 40px; height: 44px; fill: rgba(217,210,154,.1); stroke: var(--hl); stroke-width: 2; }
.nv-prof b { position: absolute; top: 9px; font-family: var(--cond); font-weight: 700; font-size: 1.25rem; color: #fff; }
.nv-prof small { font-family: var(--cond); font-weight: 600; font-size: 11px; letter-spacing: .12em; color: var(--lab); margin-top: 2px; }
.nv-prof i { position: absolute; bottom: 6px; left: 10px; right: 10px; height: 2px; background: rgba(255,255,255,.12); }
.nv-prof i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--hl); }
.nv-list { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding-top: 14px; border-top: 1px solid var(--bd); }
.nv-end { margin-top: auto; }
.nv { position: relative; width: 100%; height: 54px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #bdbab2; cursor: pointer; transition: color .15s; }
.nv .nvi { width: 24px; height: 24px; opacity: .72; transition: opacity .15s, transform .2s var(--ease); }
.nv i.art.nvi { width: 26px; height: 26px; }
.nv:hover { color: #fff; }
.nv:hover .nvi { opacity: 1; transform: scale(1.08); }
.nv.on { color: #111; }
.nv.on::after { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 4px; bottom: 4px; background: linear-gradient(90deg, #f0e9b8, var(--hl)); clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%); box-shadow: 0 0 18px var(--hl-a); }
.nv { isolation: isolate; }
.nv.on .nvi { opacity: 1; }
.nvl { position: absolute; left: calc(100% + 16px); top: 50%; transform: translate(-6px, -50%); white-space: nowrap; pointer-events: none; opacity: 0;
  padding: 5px 10px; background: rgba(14,14,14,.95); border: 1px solid var(--bd2); font-family: var(--cond); font-weight: 600; font-size: 1rem; letter-spacing: .08em; color: #fff; transition: opacity .15s, transform .2s var(--ease); }
.nv:hover .nvl, .nv:focus-visible .nvl { opacity: 1; transform: translate(0, -50%); }
.nv-b { position: absolute; top: 8px; right: 12px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-style: normal; font-family: var(--cond); font-size: 11px; font-weight: 700; color: #111; background: var(--hl); }
body:has(#navRail.on) .menuscreen { padding-left: calc(var(--rail) + 26px + var(--pad) + var(--sal)); }
body:has(#navRail.on) .sfoot { padding-left: calc(var(--rail) + 30px) !important; }

/* ---------------------------------------------------------------- round utility pill */
.pill2 { display: inline-flex; align-items: center; gap: 6px; height: 52px; padding: 0 7px 0 8px; border-radius: 26px; font-family: var(--cond);
  background: rgba(30,30,30,.62); border: 1px solid var(--bd2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.pill2 { height: 50px; gap: 4px; padding: 0 6px; background: rgba(38,38,38,.6); }
.p2-menu { width: 38px; padding: 0; background: #e8e4da; color: #111; }
.p2-menu:hover { background: #fff; color: #111; }
.p2-burger { display: flex; flex-direction: column; gap: 3px; }
.p2-burger u { display: block; width: 14px; height: 2px; background: currentColor; }
.p2-plus { width: 26px; height: 38px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #e8e4da; cursor: pointer; margin-left: 2px; transition: color .15s, transform .2s var(--ease); }
.p2-plus:hover { color: var(--hl); transform: rotate(90deg); }
.p2-pi { width: 18px; height: 18px; }
.p2-avs { display: flex; align-items: center; gap: 4px; margin-right: 6px; }
.pill2 .p2-av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; padding: 0;
  font-family: var(--cond); font-weight: 700; font-size: 1.1rem; color: #111; background: #8f8c84; box-shadow: 0 0 0 2px rgba(0,0,0,.4); }
.pill2 .p2-av.me { box-shadow: 0 0 0 2px var(--hl); }
.pill2 .p2-av img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.05); }
/* a member who just joined: the bar widens and the portrait pops in */
.pill2 .p2-av.new { animation: avIn .7s var(--ease) both; }
@keyframes avIn { 0% { width: 0; opacity: 0; transform: scale(.4); margin-left: -4px; } 55% { width: 40px; opacity: 1; transform: scale(1.12); box-shadow: 0 0 0 2px var(--hl), 0 0 20px var(--hl); margin-left: 0; } 100% { width: 40px; transform: none; } }
.p2-sq b { font-size: 1.1rem; }
.pill2 .p2-bank { flex-direction: row; align-items: center; height: 26px; padding: 0 10px; font-size: 1.1rem; }
.p2-lv { display: flex; align-items: center; gap: 8px; padding: 0 10px 0 2px; }
.p2-lv > b { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; color: #111; background: var(--hl); }
.p2-lv > span { display: flex; flex-direction: column; gap: 4px; }
.p2-lv small { font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: #fff; }
.p2-lv i { display: block; width: 72px; height: 2px; background: rgba(255,255,255,.15); }
.p2-lv u { display: block; height: 100%; background: var(--hl); }
.p2-c { position: relative; height: 38px; min-width: 38px; padding: 0 10px; border-radius: 19px; border: 0; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  background: rgba(255,255,255,.08); color: #e8e5dc; font-family: var(--cond); font-weight: 700; font-size: 1.05rem; transition: background .15s, color .15s; }
.p2-c:hover { background: rgba(255,255,255,.2); color: #fff; }
.p2-i { width: 20px; height: 20px; }
.p2-av { width: 38px; padding: 0; overflow: hidden; background: #333; font-size: 1.1rem; }
.p2-av img { width: 100%; height: 100%; object-fit: cover; }
.p2-bank { display: flex; flex-direction: column; align-items: flex-end; padding: 0 10px; font-weight: 700; font-size: 1.15rem; line-height: 1; color: var(--hl); border-left: 1px solid var(--bd); border-right: 1px solid var(--bd); }
.p2-bank small { font-size: .62rem; letter-spacing: .16em; color: var(--lab); margin-bottom: 2px; }

/* ---------------------------------------------------------------- lobby */
#menu.mm { display: none; overflow: hidden auto; font-family: var(--cond);
  grid-template-columns: minmax(250px, 330px) minmax(340px, 440px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "ops stack top" "ops stack news" "ops stack chat";
  column-gap: clamp(14px, 1.6vw, 26px); row-gap: 14px; padding-bottom: calc(var(--pad) + 22px + var(--sab)); }
#menu.mm.on { display: grid; }
.mm-ops { grid-area: ops; display: flex; flex-direction: column; min-width: 0; }
.mm-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; opacity: .9; }
.mm-brand > div { display: flex; align-items: baseline; gap: 8px; line-height: 1; }
.mm-brand b { font-family: var(--cond); font-weight: 700; font-size: .95rem; letter-spacing: .3em; color: var(--lab); }
.mm-brand span { font-family: var(--head); font-size: 1.6rem; letter-spacing: .04em; color: var(--chalk); filter: url(#chalkS); }
.mm-brand em { font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .2em; color: var(--lab); padding: 2px 7px; border: 1px solid var(--bd); }
.mm-brand .m-cube { transform: rotate(45deg) skew(-8deg, -8deg) scale(.8); }
.mm-h { margin: 0 0 18px; font-family: var(--cond); font-weight: 700; font-size: clamp(2rem, 4.6vmin, 2.9rem); letter-spacing: .01em; line-height: 1; color: #d8d4cb; }
#menu #menuItems { display: flex; flex-direction: column; gap: 0; }
.op { position: relative; isolation: isolate; display: flex; align-items: center; gap: 14px; width: 100%; height: 50px; padding: 0 16px 0 10px; text-align: left; cursor: pointer;
  border: 0; background: transparent; color: #cfcbc2; font-family: var(--cond); animation: opIn .4s var(--ease) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes opIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.op::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .18s; background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.02) 70%, transparent); }
.op:hover::before, .op:focus-visible::before { opacity: 1; }
.op:hover { color: #fff; }
.op-n { width: 30px; font-weight: 400; font-size: 1.35rem; color: #8f8c84; letter-spacing: .02em; }
.op-i, .op-x { display: none; }
.op-t { display: flex; flex-direction: column; min-width: 0; font-weight: 600; font-size: 1.45rem; letter-spacing: .02em; line-height: 1.05; }
.op-tt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-t small { display: none; }
.op-star { color: inherit; font-size: .8em; margin-left: 4px; }
.op-code { display: inline-block; margin-left: 8px; padding: 0 7px; font-weight: 700; letter-spacing: .14em; color: #111; background: var(--hl); }
.op-b { margin-left: auto; font-style: normal; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 700; color: #111; background: var(--hl); }
.op-sep { height: 1px; margin: 10px 0 10px 10px; background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.05)); position: relative; }
.op-sep::before { content: ''; position: absolute; left: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.6); }
/* selected / main row: pale glow + dot texture, like a selected class slot */
.op.main { height: 62px; color: var(--hl); }
/* It sits IN the animated scene instead of on top of it: a frosted strip that lets the background show through and
   dissolves to the right (no hard block, no dot texture), a slow light sweep across it, and a breathing edge light. */
.op.main::before { opacity: 1;
  background: linear-gradient(100deg, transparent 42%, rgba(255,250,214,.13) 50%, transparent 58%) 130% 0 / 260% 100% no-repeat,
    linear-gradient(90deg, rgba(217,210,154,.2), rgba(217,210,154,.07) 42%, transparent 86%);
  backdrop-filter: blur(5px) saturate(125%) brightness(1.08); -webkit-backdrop-filter: blur(5px) saturate(125%) brightness(1.08);
  -webkit-mask: linear-gradient(90deg, #000 38%, transparent 96%); mask: linear-gradient(90deg, #000 38%, transparent 96%);
  animation: opSweep 7s ease-in-out infinite; }
@keyframes opSweep { 0%, 35% { background-position: 130% 0, 0 0; } 70%, 100% { background-position: -40% 0, 0 0; } }
.op.main::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, var(--hl) 22%, var(--hl) 78%, transparent); box-shadow: 0 0 16px rgba(217,210,154,.75); animation: opEdge 3.6s ease-in-out infinite; }
@keyframes opEdge { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.op.main .op-tt, .op.main .op-n { text-shadow: 0 1px 10px rgba(0,0,0,.55), 0 0 18px rgba(217,210,154,.22); }
@media (prefers-reduced-motion: reduce) { .op.main::before, .op.main::after { animation: none; } }
.op.main .op-n { color: var(--hl); font-size: 1.9rem; width: 36px; }
.op.main .op-t { font-size: 1.6rem; }
.op.main .op-t small { display: block; margin-top: 2px; font-size: .72rem; font-weight: 600; letter-spacing: .14em; color: rgba(217,210,154,.75); }
.op.main.wait { color: #cfcbc2; }
.op.main.done { color: var(--green); }
.op.main:hover::before { background: linear-gradient(100deg, transparent 42%, rgba(255,250,214,.2) 50%, transparent 58%) 130% 0 / 260% 100% no-repeat, linear-gradient(90deg, rgba(232,224,160,.34), rgba(217,210,154,.12) 48%, transparent 90%); }
.op.open::before { opacity: 1; }
/* 02 weekly leaderboard: row with the reset countdown, the top 10 unfolds under it */
.op.lbrow { height: 54px; margin-top: 6px; }
.op.lbrow .op-t small { display: block; margin-top: 2px; font-size: .7rem; font-weight: 600; letter-spacing: .12em; color: var(--lab); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* while the leaderboard is open ITS row is the selected one: it takes the main row's strip + edge light, Deploy goes quiet
   (still clickable, still Enter) */
.op.lbrow.open { color: var(--hl); }
.op.lbrow.open::before { opacity: 1; background: linear-gradient(90deg, rgba(217,210,154,.2), rgba(217,210,154,.07) 42%, transparent 86%); backdrop-filter: blur(5px) saturate(125%) brightness(1.08); -webkit-backdrop-filter: blur(5px) saturate(125%) brightness(1.08); -webkit-mask: linear-gradient(90deg, #000 38%, transparent 96%); mask: linear-gradient(90deg, #000 38%, transparent 96%); }
.op.lbrow.open::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, var(--hl) 22%, var(--hl) 78%, transparent); box-shadow: 0 0 16px rgba(217,210,154,.75); }
.op.lbrow.open .op-n { color: var(--hl); }
.op.lbrow.open .op-t small { color: rgba(217,210,154,.75); }
.op.main.dim, .op.main.dim.done { color: #cfcbc2; }
.op.main.dim::before { opacity: 0; animation: none; }
.op.main.dim:hover::before { opacity: 1; animation: none; background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.02) 70%, transparent); }
.op.main.dim::after { display: none; }
.op.main.dim .op-n { color: #8f8c84; }
.op.main.dim .op-t small { color: var(--lab); }
.op.main.dim .op-tt, .op.main.dim .op-n { text-shadow: none; }

.lb-t { font-variant-numeric: tabular-nums; color: #ece8de; letter-spacing: .06em; transition: color .3s; }
.lb-t.red { color: #ff5a4a; text-shadow: 0 0 10px rgba(255,70,50,.55); animation: lbRed 1s steps(2) infinite; }
@keyframes lbRed { 50% { opacity: .55; } }
/* the top 10 takes the place of the centre card stack (same width, same panel look as the cards) */
.lbp { padding: 12px 14px 12px; background: var(--pn); border: 1px solid var(--bd); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); animation: opIn .3s var(--ease) both; font-family: var(--cond); }
.lbp.still { animation: none; }
.lbp-top { display: flex; align-items: flex-end; gap: 10px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--bd); }
.lbp-top > div { display: flex; flex-direction: column; line-height: 1; }
.lbp-top small { font-size: .8rem; font-weight: 600; letter-spacing: .08em; color: var(--lab); margin-bottom: 4px; }
.lbp-top b { font-size: 1.7rem; font-weight: 700; color: #fff; letter-spacing: .02em; }
.lbp-top > span { margin-left: auto; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--lab); padding-bottom: 3px; }
.lbp-x { flex: none; width: 30px; height: 30px; border: 1px solid var(--bd); background: rgba(0,0,0,.25); cursor: pointer; display: flex; align-items: center; justify-content: center; align-self: flex-start; }
.lbp-x i { position: relative; width: 14px; height: 14px; }
.lbp-x i::before, .lbp-x i::after { content: ''; position: absolute; left: 6px; top: -1px; width: 2px; height: 16px; background: #cfcbc2; transform: rotate(45deg); }
.lbp-x i::after { transform: rotate(-45deg); }
.lbp-x:hover { background: rgba(255,255,255,.12); }
.lbp-h, .lbp-r { display: grid; grid-template-columns: 24px minmax(0, 1fr) 54px 78px 82px; align-items: center; column-gap: 6px; }
.lbp-h { padding: 0 8px 6px; font-size: .68rem; font-weight: 700; letter-spacing: .12em; color: var(--lab); }
.lbp-h span:nth-child(n+3), .lbp-r span:nth-child(n+3) { text-align: right; justify-self: end; }
.lbp-r { height: 38px; padding: 0 8px; font-size: 1.12rem; font-weight: 600; color: #d8d4cb; font-variant-numeric: tabular-nums; border-top: 1px solid rgba(255,255,255,.05); }
.lbp-r:nth-of-type(even) { background: rgba(255,255,255,.03); }
.lbp-k { font-weight: 700; color: #8f8c84; }
.lbp-r.r1 .lbp-k { color: #f0c85a; } .lbp-r.r2 .lbp-k { color: #cfd3d8; } .lbp-r.r3 .lbp-k { color: #c98a55; }
.lbp-r.r1 .lbp-n { color: #fff; }
.lbp-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .02em; }
.lbp-n em { font-style: normal; margin-left: 8px; padding: 1px 5px; font-size: .62rem; font-weight: 700; letter-spacing: .1em; color: #111; background: var(--hl); vertical-align: 3px; }
.lbp-p { color: var(--hl); font-weight: 700; }
.lbp-r.me { background: linear-gradient(90deg, rgba(217,210,154,.22), rgba(217,210,154,.05)); color: #fff; }
.lbp-gap { height: 14px; line-height: 12px; text-align: center; color: #77746d; letter-spacing: .3em; font-size: .8rem; }
.lbp-e { padding: 26px 8px; font-size: 1rem; color: var(--lab); }
.lbp-f { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 10px 8px 0; border-top: 1px solid var(--bd); font-size: .74rem; font-weight: 700; letter-spacing: .12em; color: var(--lab); }
.lbp-f b { font-size: 1.25rem; }
@media (max-height: 820px) { .lbp-r { height: 30px; font-size: 1rem; } .op.lbrow { height: 46px; } .lbp-top b { font-size: 1.4rem; } }
@media (max-height: 640px) { .lbp { padding: 8px 10px; } .lbp-r { height: 24px; font-size: .9rem; } .lbp-top { padding-bottom: 6px; margin-bottom: 4px; } }
@media (max-width: 760px) { .lbp-h, .lbp-r { grid-template-columns: 20px minmax(0, 1fr) 46px 56px 70px; column-gap: 5px; } .lbp-r { font-size: .9rem; } }
.op-join { display: flex; gap: 6px; padding: 4px 0 8px 54px; animation: opIn .3s var(--ease) both; }
.op-join #joinCode { flex: 1; min-width: 0; height: 38px; font-family: var(--cond); font-weight: 700; font-size: 1.15rem; letter-spacing: .24em; text-transform: uppercase; background: rgba(0,0,0,.4); border: 1px solid var(--bd2); border-radius: 0; }
.op-join #joinCode::placeholder { letter-spacing: .1em; color: #77746d; }
.op-join .btn { min-height: 38px; }

/* ---- card stack ---- */
.mm-stack { grid-area: stack; display: flex; flex-direction: column; gap: 4px; min-width: 0; align-self: start; margin-top: clamp(40px, 9vh, 96px); }
.cc { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 9px 12px; text-align: left; color: #fff; font-family: var(--cond);
  background: var(--pn); border: 1px solid var(--bd); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  animation: csIn .45s var(--ease) both; animation-delay: calc(60ms + var(--i, 0) * 50ms); }
button.cc { cursor: pointer; transition: background .15s, border-color .15s; }
button.cc:hover { background: var(--pn-h); border-color: var(--bd2); }
@keyframes csIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cc-tx { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cc-tx small, .cc-perks > small, .cc-rec > small { font-size: .86rem; font-weight: 600; letter-spacing: .04em; color: var(--lab); text-transform: uppercase; }
.cc-tx b { font-weight: 600; font-size: 1.3rem; letter-spacing: .02em; text-transform: uppercase; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-sub { font-size: .9rem; font-weight: 500; color: var(--sub); margin-top: auto; }
.cc-op { min-height: 64px; }
.cc-av { width: 52px; height: 52px; flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.6rem; color: #111; background: var(--hl); }
.cc-av img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.cc-w, .cc-cl { min-height: 138px; align-items: stretch; }
.cc-w .cc-tx, .cc-cl .cc-tx { justify-content: flex-start; }
.cc-w .cc-tx b, .cc-cl .cc-tx b { margin-top: 2px; }
.cc-w .cc-sub, .cc-cl .cc-sub { margin-top: auto; }
.cc-w .cc-tx { display: grid; grid-template-rows: auto 1fr auto auto; }
.cc-w .cc-tx b { order: 3; }
.cc-img { position: absolute; right: 12px; top: 22px; width: 60%; height: 88px; }
.cc-lv > span { white-space: nowrap; }
.cc-img img, .cc-img .wimg { width: 100%; height: 100%; object-fit: contain; object-position: right center; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.cc-pips { position: absolute; top: 9px; right: 12px; display: flex; gap: 3px; z-index: 1; }
.cc-pips u { width: 8px; height: 8px; background: rgba(255,255,255,.12); }
.cc-pips u.on { background: var(--hl); }
.cc-lv { position: absolute; right: 12px; bottom: 9px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--lab); }
.cc-lv b { color: #fff; font-weight: 600; }
.cc-lv i { display: block; width: 66px; height: 2px; background: rgba(255,255,255,.18); }
.cc-lv u { display: block; height: 100%; background: #fff; }
.cc-cl { min-height: 100px; }
.cc-ic { position: absolute; right: 18px; top: 14px; color: var(--c); opacity: .9; }
.cc-ci { width: 40px; height: 40px; }
.cc-split { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 4px; animation: csIn .45s var(--ease) both; animation-delay: calc(60ms + var(--i, 0) * 50ms); }
.cc-split .cc { animation: none; }
.cc-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cc-s { min-height: 60px; }
.cc-num { font-weight: 700; font-size: 1.7rem; color: #fff; padding-left: 12px; border-left: 1px solid var(--bd); min-width: 46px; text-align: center; }
.cc-num.sm { font-size: 1.2rem; color: var(--lab); }
.cc-s.hot { border-color: rgba(217,210,154,.5); }
.cc-s.hot::before { content: ''; position: absolute; inset: 0; background: var(--dots), linear-gradient(90deg, rgba(217,210,154,.24), transparent); pointer-events: none; }
.cc-s.hot .cc-num, .cc-s.hot .cc-tx b { color: var(--hl); }
.cc-si { width: 26px; height: 26px; color: #d0ccc2; padding-left: 0; margin-right: 8px; }
.cc-perks { flex-direction: column; align-items: stretch; gap: 6px; }
.cc-pk { display: grid; grid-template-columns: repeat(3, 1fr); }
.cc-pk span { height: 46px; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--bd); }
.cc-pk span:first-child { border-left: 0; }
.cc-pk span img, .cc-pk span svg { width: 40px; height: 40px; object-fit: contain; color: #d0ccc2; }
.cc-pk span.e::after { content: ''; width: 30px; height: 30px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.22); }
.cc-rec { flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; padding: 9px 6px; }
.cc-rec > small { align-self: flex-start; padding-left: 4px; margin-bottom: 4px; }
.cc-r { display: flex; flex-direction: column; align-items: center; flex: 1; justify-content: center; gap: 1px; padding: 8px 0; }
.cc-r + .cc-r { border-top: 1px solid var(--bd); }
.cc-ri { width: 26px; height: 26px; color: #d8d4ca; }
.cc-r b { font-weight: 700; font-size: 1.15rem; line-height: 1; }
.cc-r span { font-size: .62rem; font-weight: 600; letter-spacing: .08em; color: var(--lab); }

/* ---- top pill + lobby roster ---- */
#menu .mm-top { grid-area: top; justify-self: end; min-height: 0; }
.mm-squad { grid-area: squad; justify-self: end; width: min(100%, 400px); animation: csIn .5s var(--ease) both .15s; }
.lb-h { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-bottom: 1px solid var(--bd2); }
.lb-h > b { font-weight: 700; font-size: 1.25rem; letter-spacing: .04em; color: #fff; padding-left: 8px; border-left: 2px solid #fff; line-height: 1; }
.lb-n { margin-left: auto; font-weight: 600; font-size: 1.05rem; color: #fff; }
.lb-solo { font-size: .72rem; font-weight: 700; letter-spacing: .16em; color: var(--lab); }
.lb-code { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 0; cursor: pointer; font-family: var(--cond); font-weight: 700; font-size: 1rem; letter-spacing: .16em; color: #111; background: var(--hl); }
.lb-code .bic { width: 14px; height: 14px; }
.lb-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.lr { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; width: 100%; border: 0; text-align: left; font-family: var(--cond); color: #fff;
  background: rgba(20,20,20,.5); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); animation: opIn .35s var(--ease) both; animation-delay: calc(200ms + var(--i) * 50ms); }
.lr.me { background: var(--dots), linear-gradient(90deg, rgba(217,210,154,.42), rgba(217,210,154,.14)); color: #fff; }
.lr-lv { width: 26px; text-align: right; font-weight: 700; font-size: 1.05rem; color: #fff; }
.lr-ic { width: 20px; height: 20px; color: #d6d2c8; }
.lr-nm { flex: 1; min-width: 0; font-weight: 600; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-st { font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--lab); }
.lr-st.host { color: var(--hl); }
.lr-st.ok { color: var(--green); }
.lr.empty { cursor: pointer; color: #8f8c84; background: rgba(20,20,20,.3); }
.lr.empty:hover { color: #fff; background: rgba(255,255,255,.08); }
.lr-add { width: 16px; height: 16px; }
.lr.empty .lr-nm { font-size: .95rem; letter-spacing: .08em; }
#menu.mm #chatRow { grid-area: chat; justify-self: end; width: min(100%, 400px); max-width: none; }
.mm-keys { position: fixed; left: calc(var(--rail) + 38px + var(--sal)); bottom: calc(14px + var(--sab)); display: flex; gap: 18px; font-family: var(--cond); font-size: .82rem; font-weight: 600; letter-spacing: .06em; color: #cfcbc2; pointer-events: none; }
.mm-keys:empty { display: none; }
.mm-keys kbd { margin-right: 7px; padding: 1px 5px; font-family: var(--cond); font-size: .75rem; font-weight: 700; color: #111; background: #d8d4ca; border-radius: 3px; }
#menu.mm #chatRow .chatbar { background: rgba(20,20,20,.55); border-color: var(--bd); }

/* ---------------------------------------------------------------- sub-screen shell */
#loadout, #tree, #settings { background: radial-gradient(ellipse 70% 60% at 55% 45%, rgba(40,38,34,.25), rgba(6,6,6,.82)) !important; font-family: var(--cond); }
.topbar { border-bottom: 0 !important; padding-bottom: 0 !important; align-items: flex-start !important; }
.topbar::after { display: none !important; }
.topbar h1 { font-family: var(--cond) !important; font-weight: 700 !important; font-size: clamp(2rem, 4.8vmin, 3rem) !important; letter-spacing: .01em !important; color: #d8d4cb !important; text-shadow: none !important; }
.topbar h1 .gold { color: var(--hl) !important; }
.topbar h1 .dim { color: #6d6a63 !important; }
.sfoot { background: linear-gradient(0deg, rgba(8,8,8,.85), rgba(8,8,8,.4)) !important; border-top: 1px solid var(--bd) !important; font-family: var(--cond); }
.sfoot .done { font-family: var(--cond) !important; font-weight: 700 !important; letter-spacing: .08em !important; color: #111 !important; background: var(--hl) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; clip-path: none !important; }
.sfoot .done:hover { background: #efe8b6 !important; }
.sfoot kbd, .sf-keys kbd { color: #111 !important; background: #d8d4ca !important; border: 0 !important; }

/* shared flat panel look for older surfaces */
.setcard, .tr-detail, .sk-main, .wprev, .preset { background: var(--pn) !important; border: 1px solid var(--bd) !important; box-shadow: none !important; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-radius: 0 !important; }
.setcard::after, .wprev::after, .tr-detail::after { display: none !important; }
.setcard h3 { font-family: var(--cond) !important; font-weight: 700 !important; letter-spacing: .04em !important; font-size: 1.35rem !important; color: #fff !important; border-bottom: 1px solid var(--bd) !important; }
.setcard h3 .h3i { color: var(--hl) !important; }
.set > span, .set span:first-child { font-family: var(--cond); font-weight: 600; font-size: 1rem; color: #e2ded5; }
.set b { font-family: var(--cond) !important; color: #fff !important; }
.set input[type=range] { accent-color: var(--hl); }
.seg button.on, .set-tabs button.on { background: var(--hl) !important; color: #111 !important; }
.kp span { background: #d8d4ca !important; color: #111 !important; font-family: var(--cond) !important; font-weight: 700 !important; border: 0 !important; }
.btn { font-family: var(--cond) !important; font-weight: 700 !important; letter-spacing: .06em !important; border-radius: 0 !important; background: rgba(255,255,255,.08) !important; border: 1px solid var(--bd2) !important; color: #fff !important; box-shadow: none !important; }
.btn:hover:not([disabled]) { background: rgba(255,255,255,.18) !important; }
/* skills: tabs as flat class rows, detail panel flat */
.skt { font-family: var(--cond) !important; border-radius: 0 !important; background: var(--pn) !important; border: 1px solid var(--bd) !important; box-shadow: none !important; }
.skt.on { background: var(--dots), linear-gradient(90deg, color-mix(in srgb, var(--c) 34%, transparent), rgba(30,30,30,.4)) !important; border-color: color-mix(in srgb, var(--c) 60%, transparent) !important; }
.skt b, .skh-t b, .tr-detail h2 { font-family: var(--cond) !important; font-weight: 700 !important; letter-spacing: .03em !important; }
.td-buy, .td-eq, .lane-eq { font-family: var(--cond) !important; border-radius: 0 !important; }
.tr-legend { font-family: var(--cond); }

/* ---------------------------------------------------------------- loadout: gunsmith (fixed places, nothing floats) */
#loadout.on { display: flex !important; flex-direction: column; overflow: hidden !important; }
.gsm { --side: clamp(250px, 19vw, 310px); --rw: clamp(300px, 22vw, 360px); flex: 1 1 0; min-height: 0; display: grid; font-family: var(--cond);
  grid-template-columns: var(--side) minmax(0, 1fr) var(--rw); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "head head top" "side center right"; gap: 14px 20px; }
.lo-sec { display: contents; }
.gs-head { grid-area: head; display: flex; flex-direction: column; min-width: 0; }
.gs-crumb { font-size: .92rem; font-weight: 500; letter-spacing: .02em; color: var(--lab); }
.gs-head h1 { margin: 0; font-family: var(--cond); font-weight: 700; font-size: clamp(2.2rem, 5vmin, 3.3rem); line-height: .95; color: #f2eee6; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-cls { display: flex; align-items: baseline; gap: 12px; margin-top: 2px; font-size: 1.15rem; font-weight: 500; color: var(--sub); }
.gs-spawn { font-style: normal; font-size: .76rem; font-weight: 700; letter-spacing: .12em; color: var(--hl); }
.gs-lv { display: none; }
.gs-top { grid-area: top; justify-self: end; align-self: start; }
/* left: tabs + list */
.gs-side { grid-area: side; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.gs-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.gs-tabs button { height: 36px; padding: 0 4px; border: 0; cursor: pointer; font-family: var(--cond); font-weight: 700; font-size: .9rem; letter-spacing: .06em; color: #cfcbc2; background: rgba(18,18,18,.5); white-space: nowrap; transition: background .15s, color .15s; }
.gs-tabs button:hover { color: #fff; background: rgba(255,255,255,.1); }
.gs-tabs button.on { color: #111; background: #ece8de; }
.gs-sideh:empty { display: none; }
.gs-note { font-size: .86rem; font-weight: 500; color: var(--lab); line-height: 1.25; }
.gs-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.gs-chips button { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border: 0; cursor: pointer; font-family: var(--cond); font-weight: 700; font-size: .84rem; letter-spacing: .06em; color: #bdb9b0; background: rgba(20,20,20,.5); transition: background .15s, color .15s; }
.gs-chips button::before { content: ''; width: 6px; height: 6px; background: var(--c); }
.gs-chips button small { opacity: .55; }
.gs-chips button:hover { color: #fff; background: rgba(255,255,255,.1); }
.gs-chips button.on { color: #111; background: #ece8de; }
.gs-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden auto; }
.gr { position: relative; isolation: isolate; flex: none; display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 8px 0 10px; border: 0; text-align: left; cursor: pointer; color: #d6d2c8; font-family: var(--cond); background: rgba(18,18,18,.45); transition: background .15s, color .15s; }
.gsm.intro .gr { animation: opIn .35s var(--ease) both; animation-delay: calc(var(--i) * 30ms); }
.gr:hover { background: rgba(255,255,255,.08); color: #fff; }
.gr.on { color: var(--hl); background: var(--dots), linear-gradient(90deg, rgba(217,210,154,.34), rgba(217,210,154,.08) 70%, rgba(20,20,20,.3)); }
.gr.on::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--hl); box-shadow: 0 0 10px var(--hl); }
.gr.locked .gr-img, .gr.locked .gr-tt { opacity: .55; }
.gr-n { width: 24px; flex: none; font-size: 1.15rem; color: #8f8c84; }
.gr.on .gr-n { color: var(--hl); }
.gr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gr-tt { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; font-size: 1.15rem; font-weight: 700; line-height: 1.05; }
.gr-t small { margin-top: 3px; display: flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600; letter-spacing: .05em; color: var(--lab); white-space: nowrap; overflow: hidden; }
.gr-t small.no { color: #e0655a; } .gr-t small em { font-style: normal; color: var(--hl); } .gr-t small .sti { width: 11px; height: 11px; flex: none; }
.gr-img { flex: none; width: 86px; height: 42px; }
.gr-img img, .gr-img .wimg { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.gp { flex: none; display: flex; align-items: center; gap: 8px; height: 58px; padding: 0 6px 0 10px; background: rgba(18,18,18,.45); }
.gp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 700; font-size: 1.05rem; color: #ece8de; line-height: 1.05; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-t small { font-size: .7rem; font-weight: 600; letter-spacing: .04em; color: var(--lab); text-transform: none; }
.gp-b { height: 32px; padding: 0 11px; border: 1px solid var(--bd2); cursor: pointer; font-family: var(--cond); font-weight: 700; font-size: .85rem; letter-spacing: .08em; color: #fff; background: rgba(255,255,255,.06); }
.gp-b:hover:not([disabled]) { background: rgba(255,255,255,.18); }
.gp-b.sv { color: #111; background: #ece8de; border-color: transparent; }
.gp-b[disabled] { opacity: .35; cursor: default; }
/* centre: the gun + slot cards */
.gs-center { grid-area: center; display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
.gs-stage { position: relative; flex: 1 1 auto; min-height: 0; }
.gs-stage::before { content: ''; position: absolute; left: 12%; right: 12%; bottom: 2%; height: 22%; pointer-events: none; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.55), transparent 70%); }
.gs-stage::after { content: ''; position: absolute; inset: 2% 4%; pointer-events: none; z-index: -1; background: radial-gradient(ellipse 48% 44% at 50% 50%, color-mix(in srgb, var(--c) 12%, rgba(255,255,255,.05)), transparent 72%); }
.gsm.intro .gs-stage { animation: gunIn .7s var(--ease) both; }
@keyframes gunIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
.gs-view { position: absolute; inset: 0; }
.gs-view .wv-canvas { width: 100% !important; height: 100% !important; display: block; cursor: grab; }
.gs-view .wv-canvas.grab { cursor: grabbing; }
.gs-view > img { width: 100%; height: 100%; object-fit: contain; }
.gs-hint { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; white-space: nowrap; pointer-events: none; font-size: .76rem; font-weight: 600; letter-spacing: .14em; color: rgba(255,255,255,.4); }
.gs-hi { width: 14px; height: 14px; }
.gs-tags { flex: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 4px; }
.slt { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; height: 104px; padding: 8px 6px 9px; border: 1px solid var(--bd); cursor: pointer; font-family: var(--cond); color: #fff; text-align: center;
  background: var(--pn); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); transition: background .15s, border-color .15s; }
.gsm.intro .slt { animation: csIn .4s var(--ease) both .3s; }
.slt:hover { background: var(--pn-h); border-color: var(--bd2); }
.slt-i { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; color: #6d6a63; }
.slt-i img, .slt-i svg { max-width: 76px; max-height: 44px; width: 100%; height: 100%; object-fit: contain; }
.slt b { font-weight: 700; font-size: .95rem; letter-spacing: .08em; }
.slt small { max-width: 100%; font-size: .72rem; font-weight: 600; color: var(--lab); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slt.has small { color: var(--hl); }
.slt.on { border-color: var(--hl); background: var(--dots), linear-gradient(180deg, rgba(217,210,154,.26), rgba(40,38,30,.5)); box-shadow: 0 0 20px rgba(217,210,154,.15); }
.slt.on b { color: var(--hl); }
/* right: stats + attachment options of the selected slot */
.gs-right { grid-area: right; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.gs-stats { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--pn); border: 1px solid var(--bd); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.gs-att { display: flex; align-items: center; gap: 10px; font-size: .92rem; font-weight: 700; letter-spacing: .06em; color: #ece8de; }
.gs-pips { display: flex; gap: 4px; }
.gs-pips u { width: 14px; height: 14px; border: 1px solid rgba(255,255,255,.55); }
.gs-pips u.on { background: var(--hl); border-color: var(--hl); }
.gs-prev { margin-left: auto; font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .14em; padding: 2px 7px; color: #111; background: var(--hl); }
.gs-bars { display: flex; flex-direction: column; gap: 6px; }
.gs-bars .stat { display: grid !important; grid-template-columns: 112px minmax(0, 1fr) 58px; align-items: center; gap: 10px; margin: 0 !important; }
.gs-bars .stat .sv small { font-size: .68em; font-weight: 600; color: var(--lab); margin-left: 2px; }
.gs-facts b.up { color: var(--green); } .gs-facts b.dn { color: #e0655a; }
.gs-tree { font-size: .72rem; font-weight: 500; letter-spacing: .04em; color: var(--lab); }
.gs-bars .stat > span { font-size: .86rem; font-weight: 600; letter-spacing: .05em; color: #ece8de; white-space: nowrap; }
.gs-bars .stat i { position: relative; display: block; height: 3px; background: rgba(255,255,255,.14); }
.gs-bars .stat i b { position: absolute; left: 0; top: 0; bottom: 0; background: #fff; transition: width .25s var(--ease); }
.gs-bars .stat i u { position: absolute; top: -1px; bottom: -1px; }
.gs-bars .stat i u.up { background: var(--green); } .gs-bars .stat i u.dn { background: #e0574b; }
.gs-bars .stat .sv { font-style: normal; font-size: .98rem; font-weight: 700; color: #fff; text-align: right; }
.gs-bars .stat .sv.up { color: var(--green); } .gs-bars .stat .sv.dn { color: #e0655a; }
.gs-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 6px; padding-top: 10px; border-top: 1px solid var(--bd); }
.gs-facts small { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .08em; color: var(--lab); white-space: nowrap; }
.gs-facts b { font-size: 1.25rem; font-weight: 700; color: #fff; line-height: 1.1; white-space: nowrap; }
.gs-facts b.sm { font-size: .9rem; }
.gs-facts b em { font-style: normal; font-size: .7rem; color: var(--lab); margin-left: 3px; }
.gs-drawer { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--pn); border: 1px solid var(--bd); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.gd-h { padding: 10px 14px 8px; border-bottom: 1px solid var(--bd); }
.gd-h > div { display: flex; align-items: baseline; gap: 8px; }
.gd-h small { font-size: .78rem; font-weight: 600; color: var(--lab); }
.gd-h b { font-size: 1.35rem; font-weight: 700; line-height: 1; color: #fff; }
.gd-eq { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 7px 14px; font-size: .74rem; font-weight: 700; letter-spacing: .1em; color: var(--lab); border-bottom: 1px solid var(--bd); }
.gd-eq b { color: var(--hl); letter-spacing: .04em; font-size: .9rem; }
.gd-eq span { width: 100%; font-weight: 500; letter-spacing: .04em; font-size: .72rem; color: rgba(255,255,255,.35); }
.gd-list { flex: 1 1 auto; min-height: 0; overflow: hidden auto; display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.ao { flex: none; display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 62px; padding: 5px 10px 5px 5px; border: 1px solid transparent; text-align: left; cursor: pointer; font-family: var(--cond); color: #fff; background: rgba(255,255,255,.035); transition: background .12s, border-color .12s; }
.ao:hover { background: rgba(255,255,255,.1); border-color: var(--bd2); }
.ao.eq { background: var(--dots), linear-gradient(90deg, rgba(217,210,154,.3), rgba(217,210,154,.06)); border-color: rgba(217,210,154,.55); }
.ao.na { opacity: .35; cursor: default; }
.ao-img { width: 62px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.3); }
.ao-img img, .ao-img svg { width: 56px; height: 42px; object-fit: contain; color: #cfcbc2; }
.ao-t { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ao-t b { font-weight: 700; font-size: 1.02rem; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ao-t small { font-size: .74rem; font-weight: 500; color: var(--lab); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ao-p { display: flex; align-items: center; gap: 4px; font-size: .86rem; font-weight: 700; letter-spacing: .04em; color: var(--hl); white-space: nowrap; }
.ao-p .sti { width: 12px; height: 12px; }
.ao.own .ao-p { color: #ece8de; } .ao.poor .ao-p { color: #e0655a; } .ao.na .ao-p { color: var(--lab); }
#loadout .sfoot .sf-short:empty { display: none; }
@media (max-width: 1240px) { .gsm { --side: 230px; --rw: 290px; gap: 12px 14px; } .slt { height: 92px; } .gs-hint { display: none; } }
@media (max-height: 820px) { .slt { height: 84px; } .slt-i img, .slt-i svg { max-height: 34px; } .gr, .gp { height: 52px; } .gs-bars { gap: 4px; } .gs-stats { padding: 10px 12px; gap: 8px; } }
/* phones / short landscape: side | gun ; right column drops under as a strip */
@media (max-height: 560px) and (orientation: landscape), (max-width: 760px) {
  .gsm { --side: 190px; --rw: 250px; grid-template-columns: var(--side) minmax(0, 1fr) var(--rw); grid-template-areas: "head head head" "side center right"; gap: 6px 10px; }
  .gs-top, .gs-crumb, .gs-note, .gs-hint { display: none; }
  .gs-head h1 { font-size: 1.5rem; } .gs-cls { font-size: .9rem; }
  .gs-tabs button { height: 30px; font-size: .74rem; letter-spacing: .02em; }
  .gr, .gp { height: 44px; gap: 6px; padding: 0 6px; } .gr-n { display: none; } .gr-img { width: 50px; height: 28px; } .gr-tt { font-size: .95rem; } .gr-t small { font-size: .62rem; }
  .gs-chips button { height: 24px; padding: 0 6px; font-size: .7rem; }
  .gs-tags { gap: 2px; } .slt { height: 58px; padding: 4px 2px; } .slt-i { display: none; } .slt b { font-size: .72rem; } .slt small { font-size: .6rem; }
  .gs-stats { padding: 6px 8px; gap: 4px; } .gs-att { font-size: .72rem; } .gs-pips u { width: 10px; height: 10px; }
  .gs-bars { gap: 2px; } .gs-bars .stat { grid-template-columns: 76px 1fr 44px; gap: 5px; } .gs-tree { display: none; } .gs-bars .stat > span { font-size: .64rem; } .gs-bars .stat .sv { font-size: .74rem; }
  .gs-facts { display: none; }
  .gd-h, .gd-eq { display: none; } .ao { grid-template-columns: 40px minmax(0, 1fr) auto; min-height: 44px; gap: 6px; } .ao-img { width: 40px; height: 32px; } .ao-img img, .ao-img svg { width: 36px; height: 28px; } .ao-t small { display: none; } .ao-t b { font-size: .82rem; }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1240px) {
  #menu.mm { grid-template-columns: minmax(230px, 290px) minmax(300px, 1fr); grid-template-areas: "ops top" "ops stack" "ops chat"; grid-template-rows: auto auto auto; }
  .mm-stack { margin-top: 0; }
  .mm-squad, #menu.mm #chatRow { justify-self: stretch; width: auto; }
}
@media (max-height: 780px) {
  .op { height: 44px; } .op.main { height: 54px; }
  .cc-w { min-height: 100px; } .cc-cl { min-height: 80px; } .cc-pk span { height: 38px; }
  .mm-stack { margin-top: 30px; }
}
@media (max-height: 520px) and (orientation: landscape), (max-width: 760px) {
  :root { --rail: 56px; }
  #navRail { padding: 8px 0; border-radius: 12px; left: calc(6px + var(--sal)); top: calc(6px + var(--sat)); bottom: calc(6px + var(--sab)); }
  .nv-prof { transform: scale(.8); margin: -6px 0 -10px; }
  .nv { height: 44px; } .nvl { display: none; }
  #menu.mm.on { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "ops top" "ops stack" "chat chat"; overflow-y: auto; }
  .mm-brand, .mm-keys { display: none; }
  .mm-stack { margin-top: 0; }
  .mm-h { font-size: 1.6rem; margin-bottom: 6px; }
  .pill2 .p2-lv span, .pill2 .p2-bank { display: none; }
}

/* ---------------------------------------------------------------- bank "+" and cash store popup */
.pill2 .p2-bank { gap: 8px; padding-right: 4px; }
.p2-buy { width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #111; background: var(--hl); transition: background .15s, transform .2s var(--ease); }
.p2-buy:hover { background: #fff; transform: scale(1.12); }
.p2-bi { width: 14px; height: 14px; stroke-width: 3; }
#storeModal { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--cond); opacity: 0; transition: opacity .2s; }
#storeModal.on { display: flex; opacity: 1; }
.st-box { position: relative; width: min(980px, 100%); max-height: 100%; overflow: auto; padding: 26px 28px 30px; background: linear-gradient(180deg, rgba(34,34,32,.96), rgba(14,14,13,.97)); border: 1px solid var(--bd2); box-shadow: 0 30px 90px rgba(0,0,0,.7); animation: stIn .35s var(--ease) both; }
@keyframes stIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.st-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 1px solid var(--bd2); background: rgba(255,255,255,.05); cursor: pointer; }
.st-x i::before, .st-x i::after { content: ''; position: absolute; left: 9px; right: 9px; top: 50%; height: 2px; background: #fff; transform: rotate(45deg); }
.st-x i::after { transform: rotate(-45deg); }
.st-x:hover { background: rgba(255,255,255,.15); }
.st-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 20px; padding-right: 50px; }
.st-h small { width: 100%; font-size: .85rem; font-weight: 600; letter-spacing: .14em; color: var(--lab); }
.st-h h2 { margin: 0; font-weight: 700; font-size: clamp(2rem, 5vmin, 2.8rem); line-height: 1; color: #f0ece4; }
.st-bal { margin-left: auto; font-size: .9rem; font-weight: 600; letter-spacing: .1em; color: var(--lab); }
.st-bal b { font-size: 1.3rem; color: var(--hl); margin-left: 6px; letter-spacing: .02em; }
.st-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.st-pk { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 16px 16px; background: var(--pn); border: 1px solid var(--bd); animation: csIn .4s var(--ease) both; animation-delay: calc(80ms + var(--i) * 70ms); transition: border-color .18s, transform .2s var(--ease); }
.st-pk:hover { border-color: var(--bd2); transform: translateY(-3px); }
.st-advance { border-color: rgba(217,210,154,.4); }
.st-supreme { background: var(--dots), linear-gradient(180deg, rgba(217,210,154,.2), rgba(40,38,30,.5)); border-color: rgba(217,210,154,.7); box-shadow: 0 0 30px rgba(217,210,154,.12); }
.st-tag { position: absolute; top: 10px; right: 10px; font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .14em; padding: 2px 8px; color: #111; background: var(--hl); }
.st-art { width: 100%; aspect-ratio: 1.25; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.st-art img { width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(ellipse 58% 58% at 50% 50%, #000 60%, transparent 100%); mask: radial-gradient(ellipse 58% 58% at 50% 50%, #000 60%, transparent 100%); transition: transform .3s var(--ease); }
.st-pk:hover .st-art img { transform: scale(1.05); }
.st-fi { width: 64px; height: 64px; color: var(--hl); }
.st-pk > small { font-size: .9rem; font-weight: 700; letter-spacing: .16em; color: var(--lab); }
.st-cash { font-size: clamp(2rem, 4.6vmin, 2.7rem); font-weight: 700; line-height: 1.05; color: #fff; }
.st-supreme .st-cash { color: var(--hl); text-shadow: 0 0 20px rgba(217,210,154,.35); }
.st-sub { font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--lab); margin: 2px 0 14px; }
.st-buy { margin-top: auto; width: 100%; height: 44px; border: 0; cursor: pointer; font-family: var(--cond); font-weight: 700; font-size: 1.2rem; letter-spacing: .08em; color: #111; background: #e8e4da; transition: background .15s; }
.st-buy:hover { background: #fff; }
.st-supreme .st-buy { background: var(--hl); }
.st-supreme .st-buy:hover { background: #f0e9b8; }
@media (max-width: 760px), (max-height: 520px) and (orientation: landscape) {
  .st-box { padding: 16px; } .st-row { gap: 8px; } .st-art { aspect-ratio: 1.8; margin-bottom: 4px; } .st-sub { display: none; } .st-buy { height: 38px; font-size: 1rem; }
}
/* one accent across every menu screen: the old amber becomes the pale highlight */
#menu, #loadout, #tree, #settings, #navRail, .mm-modal, #storeModal { --acc: #d9d29a; --acc2: #efe8b6; --acc-a: rgba(217,210,154,.18); }

/* the ZOMBIES wordmark keeps its painted display face */
.mm-brand span, .m-title, .ld-logo b, .ld-logo span { font-family: 'Bebas Neue', 'Bebas Fallback', Impact, sans-serif !important; }

/* ---- collapsible top bar: ≡ folds it down to your own portrait ---- */
.pill2 > .p2-plus, .pill2 > .p2-sq, .pill2 > .p2-bank, .pill2 > .p2-c:last-child, .pill2 .p2-av:not(.me) {
  max-width: 260px; overflow: hidden; transition: max-width .35s var(--ease), opacity .25s, margin .35s var(--ease), padding .35s var(--ease); }
.pill2.min > .p2-plus, .pill2.min > .p2-sq, .pill2.min > .p2-bank, .pill2.min > .p2-c:last-child, .pill2.min .p2-av:not(.me) {
  max-width: 0; min-width: 0; opacity: 0; margin: 0; padding-left: 0; padding-right: 0; border-width: 0; pointer-events: none; }
.pill2.min { gap: 6px; padding-right: 5px; }
.pill2.min .p2-avs { margin-right: 0; }
.p2-burger u { transition: transform .3s var(--ease), opacity .2s; }
.pill2.min .p2-burger u:nth-child(2) { transform: scaleX(.55); }
/* ---------------------------------------------------------------- big screens: one global UI scale (--z, set by ui.js)
   1080p = 1, 1440p = 1.33, 4K = 2, 8K = 4. Inside a zoomed box vh is multiplied too, so heights divide by --z. */
#menu, #loadout, #tree, #settings, #navRail, .mm-modal, #storeModal, #menuToast, #pause { zoom: var(--z, 1); }
#tree { --uiz: 1 !important; }                         /* the old per-panel skill-tree zoom is replaced by the global one */
#tree .sfoot { margin-left: calc(-1 * var(--pad)) !important; margin-right: calc(-1 * var(--pad)) !important; }
#tooltip { scale: var(--z, 1); transform-origin: 0 0; }
/* ---------------------------------------------------------------- skills: class list · graph · detail */
#tree.on { display: flex !important; flex-direction: column; overflow: hidden !important; }
.sk2 { --side: clamp(260px, 19vw, 310px); flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: var(--side) minmax(0, 1fr) clamp(300px, 22vw, 360px); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "head head top" "left main detail"; gap: 14px 20px; font-family: var(--cond); }
.sk2-head { grid-area: head; display: flex; flex-direction: column; }
.sk2-head h1 { margin: 0; font-weight: 700; font-size: clamp(2.2rem, 5vmin, 3.3rem); line-height: .95; color: #f2eee6; }
.sk2 .gs-top { position: static; grid-area: top; justify-self: end; align-self: start; }
.sk2-left { grid-area: left; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden auto; scrollbar-width: none; }
.sk2-list { display: flex; flex-direction: column; gap: 2px; }
.skr { position: relative; isolation: isolate; display: grid; grid-template-columns: 26px 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 64px; padding: 0 12px 0 10px; border: 0; text-align: left; cursor: pointer; font-family: var(--cond); color: #d6d2c8;
  background: rgba(18,18,18,.42); animation: opIn .35s var(--ease) both; animation-delay: calc(var(--i) * 40ms); transition: background .15s, color .15s; }
.skr:hover { background: rgba(255,255,255,.08); color: #fff; }
.skr.on { color: #fff; background: var(--dots), linear-gradient(90deg, color-mix(in srgb, var(--c) 34%, transparent), color-mix(in srgb, var(--c) 6%, transparent) 75%, rgba(18,18,18,.3)); }
.skr.on::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--c); box-shadow: 0 0 10px var(--c); }
.skr-n { font-size: 1.15rem; color: #8f8c84; }
.skr.on .skr-n { color: var(--c); }
.skr-i { width: 30px; height: 30px; color: var(--c); }
.skr-t { min-width: 0; display: flex; flex-direction: column; }
.skr-t b { font-weight: 700; font-size: 1.25rem; line-height: 1; letter-spacing: .03em; }
.skr-t b em { font-style: normal; color: var(--hl); font-size: .85em; }
.skr-t small { margin-top: 3px; font-size: .74rem; font-weight: 600; color: var(--lab); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skr-r { font-weight: 700; font-size: 1.15rem; color: #fff; } .skr-r small { font-size: .75rem; color: var(--lab); margin-left: 1px; }
.skr-bar { position: absolute; left: 70px; right: 12px; bottom: 7px; height: 2px; background: rgba(255,255,255,.08); }
.skr-bar u { display: block; height: 100%; background: var(--c); }
.sk2-pts { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "l b" "s b"; align-items: center; padding: 12px 14px; background: var(--pn); border: 1px solid var(--bd); }
.sk2-pts small { grid-area: l; font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: var(--lab); }
.sk2-pts span { grid-area: s; font-size: .8rem; font-weight: 500; color: var(--lab); }
.sk2-pts b { grid-area: b; font-size: 2.6rem; font-weight: 700; line-height: 1; color: #8f8c84; }
.sk2-pts.has { border-color: rgba(217,210,154,.55); background: var(--dots), linear-gradient(90deg, rgba(217,210,154,.22), rgba(40,40,36,.4)); }
.sk2-pts.has b { color: var(--hl); text-shadow: 0 0 18px rgba(217,210,154,.4); } .sk2-pts.has span { color: #e8e2b8; }
.sk2-meta { margin: 0; font-size: .82rem; font-weight: 500; line-height: 1.4; color: var(--lab); } .sk2-meta b { color: #e8e4da; }
.sk2-rst { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border: 1px solid var(--bd2); background: rgba(255,255,255,.04); cursor: pointer; font-family: var(--cond); font-weight: 700; font-size: .95rem; letter-spacing: .08em; color: #d6d2c8; }
.sk2-rst:hover { background: rgba(255,255,255,.12); color: #fff; }
.sk2-rst.arm { border-color: #e0574b; color: #fff; background: rgba(150,30,22,.5); }
.sk2-rst .bic { width: 16px; height: 16px; }
.sk2-main { grid-area: main; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.sk2-ch { display: flex; align-items: center; gap: 18px; padding: 0 0 10px; border-bottom: 1px solid var(--bd); }
.sk2-ct { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sk2-ct small { font-size: 1.05rem; font-weight: 600; color: var(--sub); }
.sk2-ct span { font-size: .78rem; font-weight: 600; letter-spacing: .1em; color: var(--lab); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk2-ct span i { font-style: normal; margin: 0 7px; opacity: .5; }
.sk2-rk { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; font-size: .82rem; font-weight: 600; color: var(--lab); }
.sk2-rk b { color: #fff; } .sk2-rk i { display: block; width: 140px; height: 2px; background: rgba(255,255,255,.14); } .sk2-rk u { display: block; height: 100%; background: var(--c); }
.sk2-eq { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 150px; height: 44px; padding: 0 14px; border: 0; cursor: pointer; font-family: var(--cond); font-weight: 700; font-size: 1rem; letter-spacing: .08em; color: #111; background: #ece8de; }
.sk2-eq small { font-size: .68rem; font-weight: 600; letter-spacing: .04em; opacity: .65; }
.sk2-eq:hover { background: #fff; }
.sk2-eq.on { color: var(--hl); background: transparent; border: 1px solid rgba(217,210,154,.5); cursor: default; flex-direction: row; gap: 6px; flex-wrap: wrap; }
.sk2-eq.on small { width: 100%; text-align: center; color: var(--lab); opacity: 1; }
.sk2-eq .bic { width: 15px; height: 15px; }
#tree .sk2 .sk-wrap { flex: 1 1 0; min-height: 0; height: auto !important; margin-top: 6px; background: radial-gradient(ellipse 60% 55% at 45% 50%, color-mix(in srgb, var(--c) 7%, transparent), transparent 75%); border: 0 !important; box-shadow: none !important; }
#tree .sk2 .tr-legend { padding: 8px 2px 0; border-top: 1px solid var(--bd); font-family: var(--cond); font-size: .74rem; letter-spacing: .12em; }
#tree .sk2 .tr-legend .own i { background: var(--c); border-color: var(--c); box-shadow: none; }
#tree .sk2 .tr-legend .next i, #tree .sk2 .tr-legend .kit i { border-color: var(--hl); }
/* nodes: flatter, class-tinted, pale glow for "available" */
#tree .skc { background: rgba(20,20,20,.85) !important; border-color: rgba(255,255,255,.18) !important; color: #9d998f !important; box-shadow: none; }
#tree .skn.own .skc { background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 70%, #fff 8%), color-mix(in srgb, var(--c) 40%, #000)) !important; border-color: var(--c) !important; color: #fff !important; box-shadow: 0 0 14px color-mix(in srgb, var(--c) 45%, transparent); }
#tree .skn.can .skc { border-color: var(--hl) !important; color: var(--hl) !important; box-shadow: 0 0 0 4px rgba(217,210,154,.12), 0 0 18px rgba(217,210,154,.3); }
#tree .skn.open .skc { border-color: rgba(217,210,154,.55) !important; color: #e8e2b8 !important; }
#tree .skn.sel .skc, #tree .skn:hover .skc { border-color: #fff !important; }
#tree .skn-l { font-family: var(--cond); font-weight: 600; letter-spacing: .03em; }
#tree .skp b { font-family: var(--cond); font-weight: 700; letter-spacing: .08em; }
/* detail panel */
#tree .sk2 .tr-detail { grid-area: detail; min-height: 0; overflow: hidden auto; padding: 16px 18px; border-top: 2px solid var(--c) !important; scrollbar-width: thin; font-family: var(--cond); }
#tree .sk2 .tr-detail h2 { font-family: var(--cond) !important; font-weight: 700; font-size: 2rem; letter-spacing: .01em; text-transform: uppercase; }
#tree .sk2 .tr-detail p { font-size: 1rem; font-weight: 500; color: #d8d4ca; }
#tree .sk2 .td-tag { font-size: .74rem; font-weight: 700; letter-spacing: .12em; color: var(--lab); }
#tree .sk2 .td-cost { border-color: var(--bd) !important; }
#tree .sk2 .td-buy { width: 100%; height: 46px; border-radius: 0 !important; color: #111 !important; background: var(--hl) !important; font-family: var(--cond) !important; font-weight: 700; letter-spacing: .1em; box-shadow: 0 0 22px rgba(217,210,154,.25) !important; }
#tree .sk2 .td-ph { margin: 14px 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; color: var(--lab); }
#tree .sk2 .td-path { margin: 0; }
#tree .sfoot .sf-short:empty { display: none; }
@media (max-width: 1240px) { .sk2 { grid-template-columns: 230px minmax(0, 1fr) 280px; } .sk2-meta { display: none; } .sk2-rk i { width: 90px; } }
/* phones: class list becomes a strip, graph fills the screen, detail stays the tap-up sheet */
body.phone .sk2, .sk2.compact { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "head" "left" "main"; gap: 6px; }
body.phone .sk2 .gs-top, body.phone .sk2-head small, body.phone .sk2-pts, body.phone .sk2-meta, body.phone .sk2-rst, body.phone .sk2-ch .sk2-ct span, body.phone .sk2-rk { display: none; }
body.phone .sk2-head h1 { font-size: 1.5rem; }
body.phone .sk2-left { overflow: visible; }
body.phone .sk2-list { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
body.phone .skr { flex: 1 0 auto; height: 44px; grid-template-columns: 24px auto auto; gap: 6px; padding: 0 10px; }
body.phone .skr-n, body.phone .skr-t small, body.phone .skr-bar { display: none; }
body.phone .skr-i { width: 22px; height: 22px; } body.phone .skr-t b { font-size: 1rem; }
body.phone .sk2-ch { padding-bottom: 4px; } body.phone .sk2-eq { height: 36px; min-width: 0; }

/* ---------------------------------------------------------------- no visible scrollbars anywhere in the menus
   (lists still scroll with wheel / touch / drag; layouts are sized so nothing important needs scrolling) */
#menu, #loadout, #tree, #settings, #pause, #navRail, .mm-modal, #storeModal, #menu *, #loadout *, #tree *, #settings *, #pause *, .mm-modal *, #storeModal * { scrollbar-width: none !important; }
#menu::-webkit-scrollbar, #loadout::-webkit-scrollbar, #tree::-webkit-scrollbar, #settings::-webkit-scrollbar, #pause::-webkit-scrollbar, .mm-modal::-webkit-scrollbar, #storeModal::-webkit-scrollbar,
#menu *::-webkit-scrollbar, #loadout *::-webkit-scrollbar, #tree *::-webkit-scrollbar, #settings *::-webkit-scrollbar, #pause *::-webkit-scrollbar, .mm-modal *::-webkit-scrollbar, #storeModal *::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
/* skills graph panel backdrop */
#tree .sk2 .sk-wrap { background: radial-gradient(ellipse 60% 55% at 45% 50%, color-mix(in srgb, var(--c) 8%, transparent), transparent 75%), rgba(8,8,8,.42) !important; border: 1px solid var(--bd) !important; }
/* ---------------------------------------------------------------- phones: settings tabs fit one screen (no scrolling) */
body.phone #settings[data-stab="guide"] .setcard:not([data-st="guide"]) { display: none; }
body.phone #settings .set-wrap { display: flex; flex-direction: column; height: 100%; }
body.phone #settings .topbar { margin-bottom: 6px !important; }
body.phone #settings .topbar h1 { font-size: 1.6rem !important; }
body.phone #settings .set-tabs { margin-bottom: 6px !important; }
body.phone #settings .set-tabs button { min-height: 36px !important; height: 36px; font-size: .85rem !important; }
body.phone #settings .setgrid { flex: 1 1 0; min-height: 0; }
body.phone #settings .setcard { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-content: start; padding: 8px 12px !important; }
body.phone #settings .setcard h3 { grid-column: 1 / -1; margin: 0 0 4px !important; padding-bottom: 4px !important; font-size: 1rem !important; }
body.phone #settings .set { min-height: 40px !important; padding: 2px 0 !important; margin: 0 !important; }
body.phone #settings .set > span { font-size: .82rem !important; }
body.phone #settings .seg-row, body.phone #settings .qprev { grid-column: 1 / -1; }
body.phone #settings .qprev { padding: 6px 8px !important; margin: 2px 0 !important; }
body.phone #settings .qp-chips span { font-size: .62rem !important; padding: 1px 5px !important; }
body.phone #settings .keys { grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px !important; }
body.phone #settings .kp { font-size: .72rem !important; min-height: 0 !important; padding: 2px 0 !important; }
body.phone #settings .kp span { font-size: .62rem !important; padding: 1px 5px !important; }

/* phones: lobby card stack trimmed to what fits (the top bar already shows you) */
@media (max-height: 560px) and (orientation: landscape), (max-width: 760px) {
  #menu.mm.on { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "ops top" "ops stack" "chat chat"; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; row-gap: 6px; }
  .mm-h { font-size: 1.5rem; }
  .op.main { height: 54px; } .op.main .op-t { font-size: 1.3rem; } .op.main .op-n { font-size: 1.4rem; width: 28px; }
  .mm-stack { margin-top: 0; gap: 3px; align-self: start; }
  .cc-op, .cc-perks { display: none; }
  .cc { min-height: 0; padding: 6px 10px; }
  .cc-w { min-height: 84px; } .cc-cl { min-height: 62px; }
  .cc-img { height: 50px; top: 16px; width: 55%; }
  .cc-tx small { font-size: .66rem; } .cc-tx b { font-size: 1rem; } .cc-sub { font-size: .74rem; }
  .cc-ci { width: 28px; height: 28px; } .cc-ic { top: 10px; right: 12px; }
  .cc-lv { bottom: 6px; font-size: .66rem; } .cc-lv i { width: 46px; }
  .cc-split { grid-template-columns: minmax(0, 1fr) 84px; gap: 3px; }
  .cc-s { min-height: 40px; } .cc-num { font-size: 1.2rem; padding-left: 8px; min-width: 32px; }
  .cc-si { width: 20px; height: 20px; }
  .cc-rec { padding: 4px; } .cc-rec > small { display: none; } .cc-r { padding: 2px 0; } .cc-ri { width: 16px; height: 16px; } .cc-r b { font-size: .9rem; } .cc-r span { font-size: .5rem; }
}
body.phone #settings .set-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
body.phone #settings .setcard > * { min-width: 0; }
body.phone #settings .set { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) 40px !important; column-gap: 8px !important; }
body.phone #settings .set:has(> input[type=checkbox]) { grid-template-columns: minmax(0, 1fr) auto !important; }
body.phone #settings .keys { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 5px 14px !important; }
body.phone #settings .kp { display: grid !important; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; white-space: normal !important; line-height: 1.15; }
body.phone #settings .kp span { width: auto !important; min-width: 0 !important; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- lobby stack v2 (reference class card) */
#menu .mm-top { display: flex; justify-content: flex-end; height: auto !important; min-height: 0 !important; }
.mm-stack { gap: 3px; }
.cc { border-color: rgba(255,255,255,.11); background: rgba(52,52,50,.36); }
.cc-op { min-height: 60px; }
.cc-av { width: 48px; height: 48px; }
.cc-w { min-height: 124px; } .cc-cl { min-height: 92px; }
.cc-ml { min-height: 76px; align-items: stretch; }
.cc-ml .cc-tx { justify-content: space-between; }
.cc-img.sm { top: 14px; right: 70px; width: 46%; height: 46px; }
.cc-img.sm img { image-rendering: pixelated; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.cc-key { position: absolute; right: 12px; bottom: 10px; }
.cc-key kbd { font-family: var(--cond); font-size: .72rem; font-weight: 700; padding: 1px 6px; color: #111; background: #d8d4ca; border-radius: 3px; }
.cc-s { padding-right: 0; min-height: 56px; }
.cc-cell { align-self: stretch; width: 52px; flex: none; display: flex; align-items: center; justify-content: center; border-left: 1px solid rgba(255,255,255,.11); }
.cc-cell b { font-weight: 700; font-size: 1.5rem; color: #fff; } .cc-cell b.sm { font-size: 1.1rem; color: var(--lab); }
.cc-s.hot .cc-cell b { color: var(--hl); }
.cc-cell .cc-si { margin: 0; width: 24px; height: 24px; }
.cc-split { grid-template-columns: minmax(0, 1fr) 96px; }
.cc-perks { min-height: 0; padding-bottom: 8px; }
.cc-pk span { height: 52px; }
.cc-pc { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 2px solid rgba(255,255,255,.55); background: rgba(0,0,0,.35); }
.cc-pc img, .cc-pc svg { width: 32px; height: 32px; object-fit: contain; }
.cc-pk span.e::after { display: none; }
.cc-pk span.e .cc-pc { border-style: dashed; border-color: rgba(255,255,255,.2); }
@media (max-height: 820px) { .cc-w { min-height: 104px; } .cc-cl { min-height: 78px; } .cc-ml { min-height: 62px; } .cc-op { min-height: 52px; } .cc-av { width: 40px; height: 40px; } .cc-s { min-height: 48px; } .cc-pk span { height: 44px; } .cc-pc { width: 36px; height: 36px; } }
@media (max-height: 560px) and (orientation: landscape), (max-width: 760px) {
  .cc-ml, .cc-perks, .cc-op { display: none; }
  .cc-w { min-height: 80px; } .cc-cl { min-height: 58px; } .cc-s { min-height: 38px; } .cc-cell { width: 36px; } .cc-cell b { font-size: 1.1rem; } .cc-cell .cc-si { width: 18px; height: 18px; }
  .cc-split { grid-template-columns: minmax(0, 1fr) 80px; }
}

/* ---------------------------------------------------------------- settings v2: sections left, flat rows right */
#settings.on { display: flex !important; flex-direction: column; overflow: hidden !important; }
.st2 { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: clamp(250px, 19vw, 310px) minmax(0, 860px) 1fr; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "head head top" "left panel ."; gap: 14px 22px; font-family: var(--cond); }
.st2-head { grid-area: head; display: flex; flex-direction: column; }
.st2-head h1 { margin: 0; font-weight: 700; font-size: clamp(2.2rem, 5vmin, 3.3rem); line-height: .95; color: #f2eee6; }
.st2 .gs-top { position: static; grid-area: top; justify-self: end; align-self: start; }
.st2-left { grid-area: left; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.st2-left .skr { grid-template-columns: 26px 26px minmax(0, 1fr); height: 60px; }
.st2-left .skr-i { width: 22px; height: 22px; color: var(--hl); opacity: .85; }
.st2-left .skr.on { background: var(--dots), linear-gradient(90deg, rgba(217,210,154,.32), rgba(217,210,154,.06) 75%, rgba(18,18,18,.3)); color: var(--hl); }
.st2-left .skr.on::after { background: var(--hl); box-shadow: 0 0 10px var(--hl); }
.st2-panel { grid-area: panel; display: flex; flex-direction: column; min-height: 0; background: var(--pn); border: 1px solid var(--bd); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.st2-h { margin: 0; padding: 14px 20px 12px; font-weight: 700; font-size: 1.35rem; letter-spacing: .06em; color: #fff; border-bottom: 1px solid var(--bd); }
.st2-rows { flex: 1 1 auto; min-height: 0; overflow: hidden auto; padding: 4px 0; }
.sr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 380px); align-items: center; gap: 20px; min-height: 66px; padding: 8px 20px; border-bottom: 1px solid rgba(255,255,255,.05); transition: background .12s; }
.sr:hover { background: rgba(255,255,255,.03); }
.sr-wide { display: block; min-height: 0; }
.sr-l { display: flex; flex-direction: column; min-width: 0; }
.sr-l b { font-weight: 700; font-size: 1.12rem; color: #f0ece4; }
.sr-l small { font-size: .82rem; font-weight: 500; color: var(--lab); }
.sr-c { display: flex; justify-content: flex-end; min-width: 0; }
.sr-range { display: grid; grid-template-columns: minmax(0, 1fr) 52px; align-items: center; gap: 12px; width: 100%; }
.sr-range b { text-align: right; font-weight: 700; font-size: 1.05rem; color: #fff; }
.sr-range input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.sr-range input[type=range]::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, #fff var(--p, 50%), rgba(255,255,255,.16) var(--p, 50%)); }
.sr-range input[type=range]::-moz-range-track { height: 3px; background: linear-gradient(90deg, #fff var(--p, 50%), rgba(255,255,255,.16) var(--p, 50%)); }
.sr-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 22px; margin-top: -9.5px; background: var(--hl); border: 0; box-shadow: 0 0 10px rgba(217,210,154,.4); }
.sr-range input[type=range]::-moz-range-thumb { width: 16px; height: 22px; border: 0; border-radius: 0; background: var(--hl); }
.sr-tog { position: relative; display: inline-block; width: 52px; height: 28px; cursor: pointer; }
.sr-tog input, .sr-chk input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sr-tog i { position: absolute; inset: 0; background: rgba(255,255,255,.1); border: 1px solid var(--bd2); transition: background .15s; pointer-events: none; }
.sr-tog i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; background: #8f8c84; transition: transform .18s var(--ease), background .15s; }
.sr-tog input:checked + i { background: rgba(217,210,154,.25); border-color: rgba(217,210,154,.6); }
.sr-tog input:checked + i::after { transform: translateX(24px); background: var(--hl); }
.sr-seg { display: flex; gap: 2px; }
.sr-seg button { height: 36px; padding: 0 16px; border: 0; cursor: pointer; font-family: var(--cond); font-weight: 700; font-size: .95rem; letter-spacing: .06em; color: #cfcbc2; background: rgba(255,255,255,.07); }
.sr-seg button:hover { color: #fff; background: rgba(255,255,255,.14); }
.sr-seg button.on { color: #111; background: var(--hl); }
.sr-btns { display: flex; gap: 6px; }
.sr-btn { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid var(--bd2); cursor: pointer; font-family: var(--cond); font-weight: 700; font-size: .95rem; letter-spacing: .08em; color: #fff; background: rgba(255,255,255,.06); }
.sr-btn:hover { background: rgba(255,255,255,.15); }
.sr-btn.hl { color: #111; background: var(--hl); border-color: transparent; }
.sr-btn .bic { width: 16px; height: 16px; }
.sr-sub { padding: 14px 20px 6px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: var(--lab); }
.sr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px; padding: 0 20px 14px; }
.sr-chk { position: relative; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; background: rgba(255,255,255,.04); border: 1px solid transparent; cursor: pointer; font-weight: 700; font-size: .92rem; letter-spacing: .04em; color: #d6d2c8; }
.sr-chk i { width: 18px; height: 18px; flex: none; border: 1px solid rgba(255,255,255,.4); pointer-events: none; }
.sr-chk input:checked ~ i { background: var(--hl); border-color: var(--hl); box-shadow: inset 0 0 0 3px #1a1a18; }
.sr-chk:has(input:checked) { color: #fff; border-color: rgba(217,210,154,.3); }
.sr-chk span { pointer-events: none; }
.sr-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 26px; padding: 14px 20px; }
.sr-keys .kp { display: grid !important; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 12px; font-size: .95rem; font-weight: 600; color: #e2ded5; }
.sr-keys .kp span { text-align: center; padding: 3px 6px !important; font-size: .8rem !important; }
#settings .qprev { margin: 0 !important; background: rgba(0,0,0,.25) !important; border: 1px solid var(--bd) !important; border-radius: 0 !important; }
#settings .sfoot .sf-short:empty { display: none; }
@media (max-width: 1240px) { .st2 { grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "head top" "left panel"; } }
/* phones: compact list, two-column rows, everything on one screen */
@media (max-height: 560px) and (orientation: landscape), (max-width: 760px) {
  .st2 { grid-template-columns: 150px minmax(0, 1fr); grid-template-areas: "head top" "left panel"; gap: 6px 10px; }
  .st2-head small { display: none; } .st2-head h1 { font-size: 1.5rem; }
  .st2-left .skr { height: 46px; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; padding: 0 8px; }
  .st2-left .skr-n, .st2-left .skr-t small { display: none; } .st2-left .skr-t b { font-size: .9rem; }
  .st2-h { display: none; }
  .sr { min-height: 46px; padding: 4px 12px; gap: 10px; grid-template-columns: minmax(0, 1fr) minmax(150px, 1.1fr); }
  .sr-l b { font-size: .92rem; } .sr-l small { display: none; }
  .sr-seg button { height: 32px; padding: 0 10px; font-size: .8rem; } .sr-btn { height: 32px; padding: 0 10px; font-size: .8rem; }
  .sr-sub { padding: 8px 12px 4px; font-size: .68rem; }
  .sr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 12px 8px; gap: 3px; }
  .sr-chk { height: 36px; padding: 0 8px; gap: 6px; font-size: .68rem; letter-spacing: 0; } .sr-chk i { width: 14px; height: 14px; }
  .sr-keys { gap: 3px 14px; padding: 8px 12px; } .sr-keys .kp { grid-template-columns: 86px minmax(0, 1fr); font-size: .74rem; gap: 6px; } .sr-keys .kp span { font-size: .62rem !important; }
  #settings .qp-chips span { font-size: .6rem !important; }
}

/* ---------------------------------------------------------------- touch layout: hidden buttons, joystick ring, editor */
#touch .tb.thide { display: none !important; }
#touchMove::after { display: none !important; }    /* replaced by the real, draggable #stickHome ring */
#stickHome { position: absolute; left: calc(46px + var(--sal) + 55px * var(--ts)); top: calc(100% - 96px - var(--sab) - 55px * var(--ts)); width: calc(110px * var(--ts)); height: calc(110px * var(--ts)); transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px solid rgba(255,255,255,.22); pointer-events: none; opacity: var(--to, .85); transition: opacity .2s;
  background: radial-gradient(circle, rgba(255,255,255,.4) 0 19%, rgba(255,255,255,.55) 19% 21%, transparent 21.5%), radial-gradient(circle, transparent 60%, rgba(0,0,0,.18)); box-shadow: 0 0 18px rgba(0,0,0,.25); }
#touch.noring:not(.stick-fixed) #stickHome { display: none; }
#touch.stick-fixed #stickHome { border-color: rgba(217,210,154,.45); }
#touch:has(#stick.on) #stickHome { opacity: 0; }
body.tedit #touch { display: block !important; z-index: 300; }
body.tedit::before { content: ''; position: fixed; inset: 0; z-index: 290; background: rgba(0,0,0,.6), linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 40px 40px; background-color: rgba(0,0,0,.6); }
body.tedit #touchMove, body.tedit #touchLook { pointer-events: none; }
body.tedit #touch .tb { display: flex !important; opacity: 1 !important; cursor: grab; outline: 2px dashed rgba(217,210,154,.75); outline-offset: 3px; animation: none !important; }
body.tedit #touch .tb.thide { display: none !important; }
body.tedit #touch #tPause { outline: none; cursor: default; opacity: .4 !important; }
body.tedit #stickHome { display: block !important; pointer-events: auto; opacity: 1; cursor: grab; outline: 2px dashed rgba(217,210,154,.75); outline-offset: 4px; }
body.tedit #touch .drag, body.tedit #stickHome.drag { cursor: grabbing; outline-style: solid; outline-color: #fff; filter: drop-shadow(0 0 12px rgba(217,210,154,.6)); }
#teditBar { position: fixed; z-index: 310; top: calc(10px + var(--sat)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; max-width: calc(100% - 120px); padding: 8px 8px 8px 14px; font-family: var(--cond); background: rgba(16,16,15,.95); border: 1px solid var(--bd2); box-shadow: 0 10px 30px rgba(0,0,0,.6); }
#teditBar > div { display: flex; flex-direction: column; margin-right: 10px; min-width: 0; }
#teditBar b { font-weight: 700; font-size: 1rem; letter-spacing: .08em; color: var(--hl); white-space: nowrap; }
#teditBar span { font-size: .74rem; font-weight: 500; color: var(--lab); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#teditBar button { height: 36px; padding: 0 14px; border: 1px solid var(--bd2); cursor: pointer; font-family: var(--cond); font-weight: 700; font-size: .9rem; letter-spacing: .08em; color: #fff; background: rgba(255,255,255,.06); }
#teditBar button.hl { color: #111; background: var(--hl); border-color: transparent; }
.st2-panel { align-self: start; max-height: 100%; }
@media (max-height: 560px) and (orientation: landscape), (max-width: 760px) {
  .sr { min-height: 38px; padding: 2px 12px; }
  .sr-range input[type=range] { height: 24px; }
  .sr-seg button, .sr-btn { height: 30px; }
  .sr-sub { padding: 6px 12px 3px; }
  .sr-grid { padding: 0 12px 6px; }
  .sr-chk { height: 30px; }
  .st2-rows { padding: 0; }
  .st2-left .skr { height: 42px; }
}
@media (max-height: 560px) and (orientation: landscape), (max-width: 760px) {
  #settings .sr-range input[type=range] { height: 26px !important; min-height: 0 !important; }
  .sr-chk span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
body.tedit::before { background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 40px 40px, rgba(0,0,0,.72) !important; }
/* phones: the top bar lives above OPERATIONS (left column has room), the card stack gets the full right column */
@media (max-height: 560px) and (orientation: landscape), (max-width: 760px) {
  #menu.mm.on { grid-template-areas: "top stack" "ops stack" "chat chat" !important; grid-template-rows: auto minmax(0, 1fr) auto !important; }
  #menu .mm-top { justify-self: start; min-height: 50px !important; }
  #menu .mm-ops { min-height: 0; }
  .mm-stack { max-height: 100%; }
}
@media (max-height: 560px) and (orientation: landscape), (max-width: 760px) {
  .pill2 .p2-bank { display: flex !important; padding: 0 4px 0 8px; font-size: .95rem; }
  .pill2 { gap: 3px; height: 46px; } .pill2 .p2-av { width: 34px; height: 34px; } .p2-c { height: 34px; min-width: 34px; padding: 0 8px; } .p2-plus { width: 20px; }
  .op.main .op-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------------------------------------------------------------- lobby: no gap under the small rows (they stretch to the RECORD column) */
.cc-split { align-items: stretch; }
.cc-col .cc-s { flex: 1 1 0; }

/* ---------------------------------------------------------------- popups always above every screen (phones too) */
.mm-modal, #storeModal { z-index: 500 !important; }
.p2-sq { position: relative; }
.p2-badge { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 700; color: #111; background: var(--hl); box-shadow: 0 0 0 2px rgba(20,20,20,.9); animation: nvPulse 1.6s ease-in-out infinite; }

/* ---------------------------------------------------------------- friends popup */
.frm-box { width: min(480px, 100%); display: flex; flex-direction: column; max-height: calc(100vh / var(--z, 1) - 100px); }
.fr-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin: 10px 0 8px; }
.fr-tabs button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border: 0; cursor: pointer; font-family: var(--cond); font-weight: 700; font-size: .88rem; letter-spacing: .06em; color: #cfcbc2; background: rgba(255,255,255,.06); }
.fr-tabs button:hover { color: #fff; background: rgba(255,255,255,.12); }
.fr-tabs button.on { color: #111; background: #ece8de; }
.fr-tabs em { font-style: normal; font-size: .72rem; padding: 0 5px; border-radius: 8px; background: rgba(255,255,255,.15); }
.fr-tabs button.on em { background: rgba(0,0,0,.12); }
.fr-tabs em.hot { color: #111; background: var(--hl); }
.fr-body { flex: 1 1 auto; min-height: 120px; overflow: hidden auto; display: flex; flex-direction: column; gap: 2px; }
.fr-sub { padding: 8px 2px 4px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; color: var(--lab); }
.fr-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 52px; padding: 6px 8px; background: rgba(20,20,20,.5); }
.fr-row.online { background: linear-gradient(90deg, rgba(127,211,106,.08), rgba(20,20,20,.5) 60%); }
.fr-row.invite { background: var(--dots), linear-gradient(90deg, rgba(217,210,154,.3), rgba(217,210,154,.06)); border: 1px solid rgba(217,210,154,.5); grid-template-columns: 36px minmax(0, 1fr) auto; }
.fr-av { position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; color: #111; background: #9c978b; }
.fr-av::after { content: ''; position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%; background: #55534e; box-shadow: 0 0 0 2px #1b1b1a; }
.fr-av.on { background: #e8e4da; } .fr-av.on::after { background: var(--green); box-shadow: 0 0 0 2px #1b1b1a, 0 0 8px var(--green); }
.fr-t { min-width: 0; display: flex; flex-direction: column; }
.fr-t b { font-weight: 700; font-size: 1.08rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-st { font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--lab); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-st.on { color: var(--green); }
.fr-row.invite .fr-st.on { color: var(--hl); }
.fr-lv { font-size: .78rem; font-weight: 700; color: var(--lab); }
.fr-acts { display: flex; gap: 3px; }
.fr-b { height: 30px; padding: 0 10px; border: 1px solid var(--bd2); cursor: pointer; font-family: var(--cond); font-weight: 700; font-size: .78rem; letter-spacing: .06em; color: #e8e4da; background: rgba(255,255,255,.05); white-space: nowrap; }
.fr-b:hover:not([disabled]) { background: rgba(255,255,255,.15); color: #fff; }
.fr-b.hl { color: #111; background: var(--hl); border-color: transparent; }
.fr-b.warn:hover, .fr-b.arm { color: #fff; background: rgba(170,34,24,.7); border-color: #e0574b; }
.fr-b[disabled] { opacity: .5; cursor: default; }
.fr-tag { font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--lab); padding: 0 6px; }
.fr-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 10px; text-align: center; }
.fr-empty b { font-weight: 700; font-size: 1.05rem; color: #e8e4da; } .fr-empty span { font-size: .84rem; color: var(--lab); }
.fr-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; margin-bottom: 6px; background: rgba(0,0,0,.45); border: 1px solid var(--bd2); }
.fr-search:focus-within { border-color: var(--hl); }
.fr-si { width: 16px; height: 16px; color: var(--lab); flex: none; }
.fr-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: #fff; font-family: var(--cond); font-weight: 700; font-size: 1.1rem; letter-spacing: .04em; }
.fr-results { display: flex; flex-direction: column; gap: 2px; }
@media (max-height: 560px) and (orientation: landscape), (max-width: 760px) {
  .frm-box { max-height: calc(100vh - 70px); width: min(520px, 100%); }
  .fr-row { min-height: 42px; padding: 4px 6px; gap: 8px; grid-template-columns: 30px minmax(0, 1fr) auto; } .fr-lv { display: none; }
  .fr-av { width: 30px; height: 30px; } .fr-b { height: 28px; padding: 0 7px; font-size: .7rem; }
  .fr-tabs { margin: 6px 0; } .fr-tabs button { height: 30px; font-size: .74rem; }
}

/* ---------------------------------------------------------------- phones play landscape only: rotate prompt on every screen */
body.phone.portrait #rotate, body.phone.portrait:has(#settings.on) #rotate, body.phone.portrait:has(#pause.on) #rotate, body.phone.portrait:has(#gameover.on) #rotate { display: flex !important; z-index: 2000; }
#navRail .nv-end { display: none; }

/* skill tree: path labels sit on a solid chip above everything (lines / names never show through) */
#tree .skp { z-index: 3; padding: 2px 8px; white-space: nowrap; background: rgba(12,12,11,.92); border: 1px solid rgba(255,255,255,.1); }
#tree .skp b { font-size: .78rem; } #tree .skp small { font-size: .68rem; }
#tree .skn-l { white-space: nowrap; text-shadow: 0 1px 3px #000, 0 0 6px #000; }

/* phones: loadout slot cards as a 3 x 2 grid with just the slot name */
@media (max-height: 560px) and (orientation: landscape), (max-width: 760px) {
  .gsm .gs-tags { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gsm .slt { height: 30px; flex-direction: row; justify-content: center; padding: 0 4px; }
  .gsm .slt small { display: none; }
  .gsm .slt b { font-size: .7rem; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gsm .slt.has b::after { content: ' \2713'; color: var(--hl); }
}

/* ---------------------------------------------------------------- squad + friends popups (drop down under the top bar) */
.mm-modal { position: fixed; inset: 0; display: none; align-items: flex-start; justify-content: flex-end; padding: calc(78px + var(--sat)) calc(var(--pad) + var(--sar)) 20px 20px; background: rgba(0,0,0,.4); font-family: var(--cond); }
.mm-modal.on { display: flex; }
.sqm-box { position: relative; width: min(420px, 100%); padding: 14px 14px 16px; background: linear-gradient(180deg, rgba(34,34,32,.96), rgba(14,14,13,.97)); border: 1px solid var(--bd2); box-shadow: 0 30px 80px rgba(0,0,0,.7); animation: sqIn .28s var(--ease) both; }
@keyframes sqIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.sqm-box .st-x { top: 10px; right: 10px; width: 30px; height: 30px; }
.sqm-box .st-x i::before, .sqm-box .st-x i::after { left: 7px; right: 7px; }
.sqm-box .lb-h { padding-right: 46px; }
.lr-av { width: 26px; height: 26px; flex: none; overflow: hidden; border-radius: 50%; background: #555; }
.lr-av img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3); }
.sqm-room { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--bd); background: rgba(0,0,0,.35); cursor: pointer; text-align: left; font-family: var(--cond); color: #fff; transition: border-color .15s, background .15s; }
.sqm-room:hover { border-color: rgba(217,210,154,.6); background: rgba(217,210,154,.08); }
.sqm-room small { font-size: .78rem; font-weight: 700; letter-spacing: .16em; color: var(--lab); }
.sqm-room b { font-size: 1.9rem; font-weight: 700; letter-spacing: .3em; line-height: 1; color: var(--hl); }
.sqm-room span { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; letter-spacing: .12em; color: #d8d4ca; }
.sqm-room span .bic { width: 15px; height: 15px; }
.sqm-room.off { cursor: default; } .sqm-room.off b { color: #6d6a63; } .sqm-room.off span { font-weight: 600; letter-spacing: .04em; color: var(--lab); }
.sqm-acts { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.sqm-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 42px; border: 0; cursor: pointer; font-family: var(--cond); font-weight: 700; font-size: 1.1rem; letter-spacing: .08em; color: #111; background: #e8e4da; transition: background .15s; }
.sqm-btn:hover { background: #fff; }
.sqm-btn.ghost { color: #e8e4da; background: rgba(255,255,255,.06); border: 1px solid var(--bd2); }
.sqm-btn.ghost:hover, .sqm-btn.ghost.on { background: rgba(255,255,255,.14); color: #fff; }
.sqm-i { width: 20px; height: 20px; }
.sqm-join { display: flex; gap: 6px; animation: opIn .25s var(--ease) both; }
.sqm-join #joinCode { flex: 1; min-width: 0; height: 42px; padding: 0 12px; font-family: var(--cond); font-weight: 700; font-size: 1.3rem; letter-spacing: .3em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.45); border: 1px solid var(--bd2); outline: none; }
.sqm-join #joinCode:focus { border-color: var(--hl); }
.sqm-join #joinCode::placeholder { letter-spacing: .1em; color: #6d6a63; }
.sqm-join .sqm-btn { padding: 0 20px; background: var(--hl); }
.sqm-msg { font-size: .9rem; font-weight: 600; letter-spacing: .06em; color: var(--hl); text-align: center; opacity: 0; }
.sqm-msg.on { margin-top: 10px; animation: msgFade 2.6s ease both; }
@keyframes msgFade { 0% { opacity: 0; } 8%, 75% { opacity: 1; } 100% { opacity: 0; } }
.frm-box { width: min(480px, 100%); }
@media (max-height: 560px) and (orientation: landscape), (max-width: 760px) {
  .mm-modal { padding: calc(8px + var(--sat)) calc(8px + var(--sar)) 8px calc(var(--rail) + 22px + var(--sal)); justify-content: center; align-items: center; }
  .sqm-box { max-height: 100%; overflow: hidden auto; padding: 10px 12px 12px; }
  .sqm-room { margin-top: 8px; padding: 6px 10px; } .sqm-room b { font-size: 1.4rem; }
  .sqm-btn { height: 36px; font-size: .95rem; } .sqm-acts { margin-top: 6px; gap: 4px; }
  .sqm-box .lr { height: 32px; }
}
.fr-tabs button { white-space: nowrap; padding: 0 4px; } .fr-tabs em { font-size: .66rem; }
#tree .skp { transform: translateX(-50%); padding: 1px 6px; } #tree .skp b { font-size: .68rem; letter-spacing: .1em; } #tree .skp small { font-size: .62rem; }
@media (max-height: 560px) and (orientation: landscape), (max-width: 760px) {
  .gsm { --side: 160px; --rw: 200px; gap: 6px 8px; }
  .gsm .gr-img { width: 40px; } .gsm .gr-tt { font-size: .86rem; } .gsm .gr { gap: 4px; }
  .gsm .gs-tabs button { font-size: .66rem; letter-spacing: 0; }
  .gsm .gs-bars .stat { grid-template-columns: 70px 1fr 42px; } .gsm .gs-bars .stat > span { font-size: .6rem; letter-spacing: 0; }
  .gsm .gs-att { font-size: .66rem; gap: 6px; } .gsm .gs-pips { gap: 2px; }
}
/* phones: the top bar gets its own full-width row (it no longer fits the left column once the balance shows) */
@media (max-height: 560px) and (orientation: landscape), (max-width: 760px) {
  #menu.mm.on { grid-template-areas: "top top" "ops stack" "chat chat" !important; grid-template-rows: auto minmax(0, 1fr) auto !important; row-gap: 4px; }
  #menu .mm-top { justify-self: end; min-height: 46px !important; }
  #menu .mm-h { margin-top: -2px; }
  .mm-stack { overflow: hidden; }
}
@media (max-height: 560px) and (orientation: landscape), (max-width: 760px) {
  .cc-col > .cc-s:nth-child(3), .cc-rec > .cc-r:last-child { display: none; }
  .cc-col .cc-s { flex: 1 1 0; min-height: 40px; }
}

/* ---------------------------------------------------------------- skills v3: icon class column + full-width graph + floating detail card */
.sk2 { grid-template-columns: 72px minmax(0, 1fr) !important; grid-template-areas: "head top" "left main" !important; }
.sk2-left { gap: 8px; align-items: stretch; }
.sk2-list { gap: 4px; }
.sk2 .skr { position: relative; grid-template-columns: 1fr; justify-items: center; align-content: center; gap: 4px; height: 76px; padding: 6px 0 10px; }
.sk2 .skr-n, .sk2 .skr-t { display: none; }
.sk2 .skr-i { width: 32px; height: 32px; }
.sk2 .skr-r { font-size: .9rem; line-height: 1; } .sk2 .skr-r small { font-size: .62rem; }
.sk2 .skr-bar { left: 10px; right: 10px; bottom: 5px; }
.sk2 .skr.eq::before { content: '\2605'; position: absolute; top: 4px; right: 6px; font-size: .7rem; color: var(--hl); }
.sk2 .skr::after { left: 0; }
.sk2-pts { grid-template-columns: 1fr; grid-template-areas: "l" "b"; justify-items: center; text-align: center; padding: 8px 4px; gap: 2px; }
.sk2-pts small { font-size: .6rem; letter-spacing: .08em; } .sk2-pts span { display: none; } .sk2-pts b { font-size: 1.9rem; }
.sk2-meta { display: none; }
.sk2-rst { height: 52px; padding: 0; } .sk2-rst .bt { display: none; } .sk2-rst .bic { width: 20px; height: 20px; }
.sk2-rst.arm .bt { display: inline; position: absolute; left: calc(100% + 8px); white-space: nowrap; padding: 6px 10px; background: rgba(150,30,22,.95); border: 1px solid #e0574b; font-size: .8rem; }
.sk2-rst { position: relative; }
/* floating detail card over the graph (top right), only while a skill is hovered / selected */
#tree .sk2 .tr-detail { grid-area: main; align-self: start; justify-self: end; z-index: 6; width: clamp(280px, 24vw, 350px); max-height: calc(100% - 70px); margin: 62px 10px 0 0; display: none !important;
  background: linear-gradient(180deg, rgba(30,30,28,.96), rgba(14,14,13,.97)) !important; border: 1px solid var(--bd2) !important; border-top: 2px solid var(--c) !important; box-shadow: 0 20px 50px rgba(0,0,0,.6) !important; }
#tree .sk2.dopen .tr-detail { display: flex !important; animation: sqIn .22s var(--ease) both; }
#tree .sk2 .td-close { display: block; position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; padding: 0; border: 1px solid var(--bd2); background: rgba(255,255,255,.05); cursor: pointer; z-index: 2; }
#tree .sk2 .td-close i::before, #tree .sk2 .td-close i::after { content: ''; position: absolute; left: 7px; right: 7px; top: 50%; height: 2px; background: #fff; transform: rotate(45deg); }
#tree .sk2 .td-close i::after { transform: rotate(-45deg); }
#tree .sk2 .td-close:hover { background: rgba(255,255,255,.15); }
#tree .sk2 .td-top { padding-right: 36px; }
#tree .sk2 .tr-detail h2 { font-size: 1.6rem; }
/* phones keep their own layout (class strip on top, detail as the tap-up sheet) */
body.phone .sk2 { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "head" "left" "main" !important; }
body.phone .sk2 .skr { height: 44px; grid-template-columns: 24px auto; padding: 0 10px; } body.phone .sk2 .skr-r { font-size: .8rem; }
body.phone .sk2 .skr.eq::before { top: 2px; right: 3px; }
body.phone #tree .sk2 .tr-detail { display: flex !important; width: auto; margin: 0; max-height: none; }
.sk2 { position: relative; grid-template-areas: "head head" "left main" !important; }
.sk2 .gs-top { position: absolute; top: 0; right: 0; z-index: 3; }
.sk2-head { padding-right: 300px; }
body.phone .sk2 { grid-template-areas: "head" "left" "main" !important; }
body.phone .sk2-head { padding-right: 0; }
body:not(.phone) #tree .sk2 .tr-detail { align-self: start !important; height: auto !important; max-height: calc(100% - 70px) !important; overflow: hidden auto !important; }
body.phone .sk2 .skr { grid-template-columns: auto auto; justify-content: center; align-content: center; gap: 8px; } body.phone .sk2 .skr.eq::before { right: auto; left: 6px; top: 50%; transform: translateY(-50%); }

/* lobby cards: names never run under the LVL counter / weapon art on the right */
.cc-w .cc-tx, .cc-cl .cc-tx { max-width: calc(100% - 96px); }
.cc-w .cc-tx b, .cc-cl .cc-tx b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-pk > small { margin-bottom: 3px; }
@media (max-height: 560px) and (orientation: landscape), (max-width: 760px) {
  #storeModal { padding: 8px; }
  .st-box { padding: 10px 12px 12px; }
  .st-h { margin-bottom: 8px; } .st-h small { display: none; } .st-h h2 { font-size: 1.5rem; }
  .st-x { top: 8px; right: 8px; width: 32px; height: 32px; }
  .st-pk { padding: 8px 8px 10px; }
  .st-art { aspect-ratio: 2.3; margin-bottom: 2px; }
  .st-cash { font-size: 1.5rem; }
  .st-tag { top: 6px; right: 6px; font-size: .6rem; }
}
.gp-t small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-height: 560px) and (orientation: landscape), (max-width: 760px) {
  .gsm .gp { height: auto; flex-wrap: wrap; padding: 6px 6px 6px 8px; gap: 4px 6px; }
  .gsm .gp .gr-n { display: none; }
  .gsm .gp-t { flex: 1 1 100%; font-size: .86rem; }
  .gsm .gp-b { flex: 1 1 0; height: 28px; font-size: .72rem; }
}
@media (max-height: 560px) and (orientation: landscape), (max-width: 760px) { .gsm .gs-bars .stat { grid-template-columns: 84px 1fr 42px !important; gap: 4px; } .gsm .gs-bars .stat > span { overflow: hidden; text-overflow: ellipsis; } }

/* sweep fixes: title stacks breathe (crumb / title / sub-line never touch) */
.gsm .gs-head h1, .sk2-head h1, .st2-head h1 { line-height: 1.08 !important; margin: 1px 0 !important; }
.gs-crumb { line-height: 1.2; display: block; }
.gs-cls { line-height: 1.25; }
/* weapon list stat line ends in "…" instead of a hard cut */
.gr-t small { display: block !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-t small .sti { display: inline-block; vertical-align: -1px; }
/* narrow side list (tablets / small laptops): presets stack like on phones */
@media (max-width: 1240px) {
  .gsm .gp { height: auto; flex-wrap: wrap; padding: 6px 6px 6px 8px; gap: 4px 6px; }
  .gsm .gp .gr-n { display: none; }
  .gsm .gp-t { flex: 1 1 100%; }
  .gsm .gp-b { flex: 1 1 0; height: 30px; }
}
/* small-laptop lobby (<= 1240 wide, <= 800 tall): drop the MELEE card so the stack fits without scrolling */
@media (max-width: 1240px) and (max-height: 800px) { .cc-ml { display: none; } }
.gsm .gs-crumb, .sk2-head .gs-crumb, .st2-head .gs-crumb { margin-bottom: 7px; } body.phone .gsm .gs-crumb { margin-bottom: 0; }

/* lobby cards: LVL counter is one short line at the bottom right; art / emblem always stay above it */
.cc-lv { flex-direction: row !important; align-items: center !important; gap: 8px !important; bottom: 8px !important; line-height: 1; }
.cc-lv i { width: 54px !important; }
.cc-img { top: 16px !important; bottom: 28px !important; height: auto !important; }
.cc-img.sm { bottom: 14px !important; }
.cc-ic { top: 10px !important; bottom: 28px !important; display: flex; align-items: center; }
.cc-ci { width: auto !important; height: 100% !important; max-height: 40px; aspect-ratio: 1; }
.cc-r { gap: 4px !important; } .cc-r b { line-height: 1.1; }

/* lobby (desktop): the top bar gets its own row across the stack + right columns, so it can never sit on the cards */
@media (min-width: 1241px) {
  #menu.mm { grid-template-areas: "ops top top" "ops stack news" "ops stack chat" !important; grid-template-rows: auto minmax(0, 1fr) auto !important; }
  .mm-stack { margin-top: clamp(0px, 2vh, 24px) !important; }
}
@media (max-width: 1240px) and (min-width: 761px) and (min-height: 561px) {
  #menu.mm { grid-template-areas: "ops top" "ops stack" "ops chat" !important; grid-template-rows: auto minmax(0, 1fr) auto !important; }
  #menu .mm-top { min-height: 52px !important; }
}
/* lobby stack trims itself on shorter windows instead of scrolling */
@media (max-height: 820px) { .cc-ml { display: none; } }
@media (max-height: 720px) { .cc-op, .cc-perks { display: none; } }

/* ================================================================ Dead Raid logo lockup (.lg)
   emblem (Midjourney mask, metallic khaki + glow) | CALL OF (wide small caps) / DEAD ZONE (DEAD in blood red) | CO:DZ tag */
.lg { display: flex !important; align-items: center; gap: 14px; margin-bottom: 18px; opacity: 1 !important; }
.lg .lg-em { position: relative; flex: none; width: 58px; height: 58px; filter: drop-shadow(0 0 12px rgba(217,210,154,.28)) drop-shadow(0 3px 6px rgba(0,0,0,.7)); }
.lg .lg-em u { position: absolute; inset: 0; background: linear-gradient(160deg, #fbf6d6 0%, #d9d29a 42%, #9d9458 78%, #6f6838 100%); -webkit-mask: url(ui/logo_emblem.png) center / contain no-repeat; mask: url(ui/logo_emblem.png) center / contain no-repeat; }
.lg .lg-t { display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 0 !important; line-height: 1; }
.lg .lg-a { font-family: var(--ui-font) !important; font-weight: 700; font-size: .82rem !important; letter-spacing: .62em !important; color: #cfc9b2 !important; filter: none !important; padding-left: 2px; margin-bottom: 3px; }
.lg .lg-b { position: relative; font-family: var(--ui-font) !important; font-weight: 700; font-size: 2.35rem !important; letter-spacing: .03em !important; line-height: .92; color: #f4f1ea !important; filter: none !important; text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 0 22px rgba(0,0,0,.6); white-space: nowrap; }
.lg .lg-b b { font: inherit !important; letter-spacing: inherit !important; color: #d8392a !important; text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 0 18px rgba(208,42,29,.45); }
.lg .lg-b::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: linear-gradient(90deg, #d8392a 0 22%, rgba(217,210,154,.75) 22% 100%); }
.lg .lg-c { align-self: flex-start; margin: 2px 0 0 4px !important; padding: 2px 7px !important; font-style: normal; font-family: var(--ui-font) !important; font-weight: 700; font-size: .7rem !important; letter-spacing: .18em !important; color: #111 !important; background: var(--hl) !important; border: 0 !important; }
/* loading screen: the big centred version */
.ld-logo.lg.big { flex-direction: column; gap: 18px; margin: 0 0 26px; }
.ld-logo.lg.big .lg-em { width: clamp(84px, 16vmin, 150px); height: clamp(84px, 16vmin, 150px); }
.ld-logo.lg.big .lg-t { align-items: center !important; }
.ld-logo.lg.big .lg-a { font-size: clamp(.9rem, 2.2vmin, 1.3rem) !important; letter-spacing: .8em !important; padding-left: .8em; }
.ld-logo.lg.big .lg-b { font-size: clamp(2.6rem, 9vmin, 5.6rem) !important; }
.ld-logo.lg.big .lg-c { align-self: center; margin-top: 12px !important; font-size: clamp(.7rem, 1.6vmin, .95rem) !important; }
/* small windows: a tighter lobby lockup */
@media (max-height: 760px) { .mm-brand.lg { margin-bottom: 10px; } .mm-brand.lg .lg-em { width: 46px; height: 46px; } .mm-brand.lg .lg-b { font-size: 1.9rem !important; } .mm-brand.lg .lg-a { font-size: .72rem !important; } }
@media (min-height: 761px) {
  .mm-brand.lg { gap: 16px; margin-bottom: 22px; }
  .mm-brand.lg .lg-em { width: 76px; height: 76px; }
  .mm-brand.lg .lg-a { font-size: .95rem !important; }
  .mm-brand.lg .lg-b { font-size: 3rem !important; }
  .mm-brand.lg .lg-c { font-size: .76rem !important; }
}
/* lobby lockup: CO:DZ tag tucked under the wordmark (keeps the lockup inside its column) */
.mm-brand.lg { display: grid !important; grid-template-columns: auto auto; grid-template-areas: "em t" "em c"; justify-content: start; align-items: center; column-gap: 16px; row-gap: 9px; }
.mm-brand.lg .lg-em { grid-area: em; } .mm-brand.lg .lg-t { grid-area: t; } .mm-brand.lg .lg-c { grid-area: c; margin: 0 !important; justify-self: start; }

/* skill tree: compact hover card beside the node on desktop (replaces the big side panel; hidden on mouse leave) */
#tree .sk2 { position: relative; }
body:not(.phone) #tree .sk2 .tr-detail.pop { position: absolute !important; grid-area: auto; margin: 0 !important; width: 260px !important; white-space: normal !important; overflow-wrap: break-word; max-height: none !important; height: auto !important; overflow: visible !important; padding: 12px 14px 10px !important; right: auto !important; bottom: auto !important; transform: none; pointer-events: none; z-index: 40; box-shadow: 0 10px 28px rgba(0,0,0,.55) !important; animation: skPop .12s ease-out both; }
body:not(.phone) #tree .sk2 .tr-detail.pop :is(.td-ph, .td-path, .td-close, .td-buy, .td-pd, .td-cls) { display: none !important; }
body:not(.phone) #tree .sk2 .tr-detail.pop h2 { font-size: 1.2rem !important; margin: 2px 0 4px; }
body:not(.phone) #tree .sk2 .tr-detail.pop p { font-size: .86rem !important; line-height: 1.3; margin: 0 0 8px; }
body:not(.phone) #tree .sk2 .tr-detail.pop .td-tag { font-size: .66rem; }
body:not(.phone) #tree .sk2 .tr-detail.pop .td-ic { width: 34px; height: 34px; }
body:not(.phone) #tree .sk2 .tr-detail.pop .td-kit { padding: 6px 8px; margin-bottom: 8px; font-size: .74rem; }
body:not(.phone) #tree .sk2 .tr-detail.pop .td-cost { padding: 6px 0; margin: 0; font-size: .8rem; }
body:not(.phone) #tree .sk2 .tr-detail.pop .td-cost b { font-size: .95rem; }
body:not(.phone) #tree .sk2 .tr-detail.pop .td-st { font-size: .74rem; margin: 4px 0 0; }
@keyframes skPop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- armory: ammo art (transparent product shots, tools/make_ammo_art.py) */
.ao-img:has(.ammo-art) { background: none; }
.ao-img img.ammo-art { width: 100%; height: 100%; }
.slt-i img.ammo-art { max-width: 64px; max-height: 52px; }
.ao.na img.ammo-art { filter: grayscale(1) brightness(.6); }

/* ================================================================ all-sizes sweep (tools/ui_audit.mjs: phone -> 5120x1440 / 4K) */
/* settings (not phones): the top bar leaves the grid. It was the only content of the third column, whose minimum width
   squeezed the panel to ~450 px on 1280-1440 wide windows (labels wrapped one word per line under the sliders) */
@media (min-width: 761px) and (min-height: 561px) {
  .st2 { position: relative; }
  .st2 .gs-top { position: absolute; top: 0; right: 0; z-index: 3; }
  .st2-head { padding-right: 300px; }
  .sr { grid-template-columns: minmax(150px, 1fr) minmax(200px, 380px); }
}
/* lobby: the wordmark stays inside the left column on narrow layouts (it ran under the top bar) */
@media (max-width: 1240px) and (min-width: 761px) { .mm-brand.lg .lg-wm { width: clamp(120px, 15vw, 190px); } .mm-brand.lg { gap: 10px; } }
/* portrait tablets / narrow windows (761-900 wide): one-column screens instead of three squeezed columns */
@media (max-width: 900px) and (min-width: 761px) and (min-height: 561px) {
  .st2 { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "head" "left" "panel" !important; grid-template-rows: auto auto minmax(0, 1fr) !important; }
  .st2-left { flex-direction: row; }
  .st2-left .skr { flex: 1 1 0; min-width: 0; height: 54px; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 0 10px; }
  .st2-left .skr-n, .st2-left .skr-t small { display: none; }
  .st2-left .skr-t b { display: block; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* armory on portrait tablets: top bar, title, the gun with its slot tiles across the full width, then weapon list + stats
   side by side. (Landscape windows this narrow keep the three columns, slimmer: see below.) */
@media (max-width: 900px) and (min-width: 761px) and (orientation: portrait) {
  .gsm { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important; grid-template-areas: "top top" "head head" "center center" "side right" !important; grid-template-rows: auto auto minmax(240px, 34vh) minmax(0, 1fr) !important; }
  .gsm .gs-top { justify-self: end; }
  .gsm .gs-hint { display: none; }
  .gsm .slt { height: 84px; background: rgba(14, 14, 13, .72); }
  .gsm .gs-right { overflow: hidden auto; } .gsm .gs-side { min-height: 0; }
}
@media (max-width: 900px) and (min-width: 761px) and (min-height: 561px) and (orientation: landscape) { .gsm { --side: 200px; --rw: 260px; } .gsm .gs-hint { display: none; } }
/* phones: leaderboard header fits its columns; the skill sheet's title clears the close button */
@media (max-width: 760px) { .lbp-h { font-size: .56rem; letter-spacing: .02em; } .lbp-h, .lbp-r { grid-template-columns: 18px minmax(0, 1fr) 40px 62px 62px; } }
body.phone #tree .sk2 .td-top { padding-right: 44px; }
/* key / touch help lists: descriptions wrap inside their column instead of running into the next one */
.sr-keys .kp { min-width: 0; white-space: normal !important; line-height: 1.15; }
@media (max-width: 800px) and (min-width: 761px) and (orientation: portrait) { .sr-keys { grid-template-columns: minmax(0, 1fr) !important; } }

/* ================================================================ second all-sizes sweep (24 sizes, every screen + popups + game over) */
/* lobby: the wordmark shrinks with its column instead of running onto the card stack / leaderboard */
#menu .mm-brand.lg { max-width: 100%; min-width: 0; }
#menu .mm-brand.lg .lg-em { flex: none; }
#menu .mm-brand.lg .lg-wm { flex: 0 1 auto; min-width: 0; }
/* lobby rows: the long half of a sub-line is dropped on small screens so the rest (countdown) is never cut */
@media (max-width: 760px), (max-height: 560px) and (orientation: landscape) { .op-more { display: none; } }
/* armory list: long weapon names wrap to a second line instead of ending in "..." */
.gr-tt { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: clip; font-size: 1.06rem; line-height: 1; overflow-wrap: break-word; }
@media (max-width: 1300px) { .gr-t small { letter-spacing: 0; font-size: .68rem; } .gr-img { width: 72px; } }
/* skill tree: the list of paths under the class name wraps instead of being cut */
.sk2 .sk2-ct { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
/* leaderboard: tighter number columns up to 900 px wide, so names fit */
@media (max-width: 900px) { .lbp-h { font-size: .56rem; letter-spacing: .02em; } .lbp-h, .lbp-r { grid-template-columns: 18px minmax(0, 1fr) 34px 56px 54px; column-gap: 4px; } .lbp-r { font-size: .9rem; } }
/* portrait-tablet settings tabs: every label fits its tab */
@media (max-width: 900px) and (min-width: 761px) and (min-height: 561px) {
  .st2-left .skr { gap: 5px; padding: 0 6px; grid-template-columns: 18px minmax(0, 1fr); } .st2-left .skr-i { width: 18px; height: 18px; } .st2-left .skr-t b { font-size: .78rem; letter-spacing: 0; }
}
/* smallest labels never drop under ~9.5 px (phones use a 14 px root) */
.cc-r span, .sk2-pts small, .sk2 .skr-r small, #tree .skp small, .go-party small, .gpb-prev small, .pn-new { font-size: max(9.5px, .64rem); }
body.phone .st-tag, body.phone .qp-chips span, body.phone #settings .kp span { font-size: 10px !important; }
/* game over: a long name can no longer push EARNED / KILLS out of the party row */
.go-party div { min-width: 0; } .go-party .gpn { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .go-party b, .go-party small { flex: none; }
/* game over on narrow windows / tablets: the round number sits above its caption and scales down; below 900 px the
   report moves under the summary (the two columns ran into each other) */
@media (max-width: 1100px) and (min-width: 761px) and (min-height: 561px) {
  #gameover .go-hero { flex-direction: column; align-items: flex-start; gap: 10px; }
  #gameover .go-num .rdig { font-size: clamp(110px, 20vh, 200px); } #gameover .go-num .tally { height: clamp(100px, 18vh, 170px); }
  #gameover .go-lab { font-size: clamp(40px, 5.4vw, 60px); }
  #gameover .go-lv { flex-wrap: wrap; row-gap: 8px; }
  #gameover .gs { padding: 8px 10px; column-gap: 8px; } #gameover .gs b { font-size: 1.5rem; }
}
@media (max-width: 900px) and (min-width: 761px) and (orientation: portrait) {
  #gameover .go-wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 620px; }
  #gameover .go-hero { flex-direction: row; align-items: flex-end; }
  #gameover .go-stats, #gameover .go-lv, #gameover .go-pb { width: 100%; }
}
/* second sweep, part 2 */
.sk2 .sk2-ct, .sk2 .sk2-ct span { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
body.phone #settings .qp-chips span { font-size: 10px !important; }
.pn-new, .go-pb small, .lbp-h, .lbp-h span { font-size: max(9.5px, .56rem); }
/* phones: the skill sheet's tag line and title end before the close button */
body.phone #tree .tr-detail .td-top { padding-right: 78px !important; }
/* phones: a long leaderboard scrolls inside the stack instead of being cut at the screen edge */
@media (max-height: 560px) and (orientation: landscape), (max-width: 760px) { .mm-stack:has(.lbp) { overflow: hidden auto; } }
/* very short phones (<= 380 px tall): tighter lobby cards so the record column is not cut */
@media (max-height: 380px) and (orientation: landscape) {
  .cc-w { min-height: 74px !important; } .cc-cl { min-height: 58px !important; } .cc-col .cc-s { min-height: 34px !important; }
  .cc-r { padding: 2px 0 !important; gap: 1px !important; } .cc-ri { width: 18px; height: 18px; } .cc-rec { padding: 4px 6px; } .cc-rec > small { display: none; }
}
/* second sweep, part 3: the path list in the skills header stays on one line; where it cannot fit (<= 1100 px) it is
   hidden, as on phones (the same names label the branches in the tree itself) */
.sk2 .sk2-ct span { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
@media (max-width: 1100px) { .sk2 .sk2-ct span { display: none; } }
/* phones: the skill sheet stops below the class header (it covered the EQUIP button) */
body.phone #tree .tr-detail { max-height: 58dvh !important; }
/* skill card: the tag line (class / path / tier) wraps instead of being cut */
#tree .tr-detail .td-tag { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.25; }

/* ================================================================ third sweep: findings from the screenshot-by-screenshot review */
/* big screens: game over scales with the rest of the menus (it stayed 1080p-sized on 1440p / 4K) */
#gameover { zoom: var(--z, 1); }
/* game over on phones: the caption and the banked amount stay inside their boxes; short phones get a tighter report */
@media (max-height: 560px) and (orientation: landscape) {
  #gameover .go-lab { font-size: clamp(30px, 5vw, 46px); }
  #gameover .gs { padding: 6px 8px; column-gap: 6px; min-width: 0; } #gameover .gs b { font-size: clamp(1.05rem, 2.6vw, 1.5rem); white-space: nowrap; }
}
@media (max-height: 400px) and (orientation: landscape) {
  #gameover.on { padding-top: 6px; padding-bottom: 6px; }
  #gameover .go-right { padding: 8px 12px; } #gameover .go-right ul { margin: 4px 0 6px; } #gameover .go-right li { padding: 2px 0; font-size: .95rem; } #gameover .go-right li b { font-size: 1rem; }
  #gameover .go-party { gap: 2px; } #gameover .go-party div { padding: 1px 6px 1px 2px; }
  #gameover .go-right .done.big { height: 38px; min-height: 0; margin-top: 6px; font-size: 1.05rem; } #gameover .go-right .btn.wide { height: 30px; min-height: 0; margin-top: 4px; }
}
/* level badges: three-digit levels stay inside the hexagon */
.nv-prof b, .go-lvb b { font-size: 1.05rem !important; letter-spacing: -.02em !important; }
/* leaderboard header: KILLS and HEADSHOTS no longer touch on phones / portrait tablets */
@media (max-width: 900px) { .lbp-h, .lbp-r { grid-template-columns: 18px minmax(0, 1fr) 44px 72px 56px; column-gap: 6px; } .lbp-h { letter-spacing: 0; } }
/* lobby rows: the long half of the sub-line is dropped wherever the left column is narrow, so the countdown is never cut */
@media (max-width: 1240px) { .op-more { display: none; } }
/* lobby 761-900 px wide: the top bar gets its own row (it sat on the end of the wordmark) */
@media (max-width: 900px) and (min-width: 761px) and (min-height: 561px) { #menu.mm { grid-template-areas: "top top" "ops stack" "ops chat" !important; } }
/* skills on phones: the class button grows with its second line ("Overdrive" was clipped) */
body.phone .sk2-eq { height: auto !important; min-height: 36px; padding-top: 3px; padding-bottom: 3px; line-height: 1.05; }
/* settings checkboxes: a long label wraps instead of ending in "..." */
@media (max-height: 560px) and (orientation: landscape), (max-width: 760px) { .sr-chk span { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1; } }
/* settings <= 1240 px: the title uses the full width (its 240 px column wrapped "SETTINGS /" and "KEY BINDINGS") */
@media (max-width: 1240px) and (min-width: 901px) and (min-height: 561px) { .st2 { grid-template-areas: "head head" "left panel"; } }
.st2-head h1, .gs-crumb { white-space: nowrap; }
/* portrait-tablet settings tabs: larger labels, no icon */
@media (max-width: 900px) and (min-width: 761px) and (min-height: 561px) { .st2-left .skr { grid-template-columns: minmax(0, 1fr); justify-items: center; } .st2-left .skr-i { display: none; } .st2-left .skr-t b { font-size: .9rem; letter-spacing: .02em; } }
/* pause: menu rows stay on one line; no one-word last lines in short captions */
#pause .mi, #pause .mi .mt { white-space: nowrap; }
#pause .pz-main p, .gs-sideh, .st-sub, #tree .tr-detail .td-tag, .pnm-hero p { text-wrap: balance; }
/* squad / friends popups open below the top bar instead of on its lower edge */
@media (min-width: 761px) and (min-height: 561px) { .mm-modal:not(.pnm) { padding-top: calc(90px + var(--sat)); } }
/* armory: SPAWN WEAPON / ARMORY tabs keep side padding; phones show every slot in one row */
.gs-tabs button { letter-spacing: .03em; padding-left: 6px; padding-right: 6px; }
@media (max-width: 1500px) { .gs-tabs button { font-size: .8rem; } }
body.phone .gs-tags { display: grid !important; grid-template-columns: none !important; grid-template-rows: auto !important; grid-auto-flow: column !important; grid-auto-columns: minmax(0, 1fr) !important; }
/* third sweep, part 2 */
@media (max-width: 900px) { .lbp-h, .lbp-r { grid-template-columns: 16px minmax(0, 1fr) 38px 64px 48px; column-gap: 4px; } .lbp-r { font-size: .8rem; } .lbp-n em { margin-left: 4px; padding: 0 3px; } }
body.phone .slt b { font-size: .62rem !important; letter-spacing: 0 !important; }
@media (max-width: 900px) and (min-width: 761px) and (min-height: 561px) and (orientation: landscape) { .gsm .gr-img { width: 54px; } .gsm .gr { gap: 6px; } }
body.phone .slt { padding-left: 0 !important; padding-right: 0 !important; } body.phone .slt b { font-size: 9.5px !important; }

/* ================================================================ fourth sweep: the six items left open */
/* skill tree: node names keep a readable size when the tree is scaled down on laptops */
#tree .skn-l { font-size: max(11.5px, calc(11px * var(--sks, 1))) !important; letter-spacing: .02em; }
/* armory list: dark guns stay visible on the dark rows (and on the dotted selected row) */
.gr-img img, .gr-img .wimg { filter: brightness(1.55) contrast(.94) drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.gr.on .gr-img img, .gr.on .gr-img .wimg { filter: brightness(1.9) contrast(.92) drop-shadow(0 0 6px rgba(0,0,0,.9)); }
/* armory class chips: an even grid (3 per row) instead of a ragged wrap with one chip alone on a third row */
.gs-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.gs-chips button { min-width: 0; justify-content: center; padding: 0 4px; white-space: nowrap; letter-spacing: .03em; }
@media (max-width: 1500px) { .gs-chips button { font-size: .74rem; gap: 4px; } }
@media (min-width: 1700px) { .gs-chips { grid-template-columns: repeat(5, minmax(0, 1fr)); } .gs-chips button { font-size: .72rem; letter-spacing: 0; gap: 3px; padding: 0 2px; } }
/* game over: long names use a narrower face size so they fit beside EARNED / KILLS */
.go-party .gpn.lg { font-size: .84rem !important; letter-spacing: 0 !important; }
/* ultrawide (wider than 21:9): menus keep a comfortable width and sit centred; the slot bar is not stretched */
@media (min-aspect-ratio: 22/9) {
  #loadout > .gsm, #tree > .sk2, #settings > .st2 { width: 100%; max-width: 2300px; margin-left: auto; margin-right: auto; }
  .gs-tags { width: 100%; max-width: 980px; margin-left: auto; margin-right: auto; }
}
.go-party .gpn.lg { font-size: .74rem !important; }
/* class chips: three per row at every width (five in one row was too tight for "ASSAULT 7") */
@media (min-width: 1700px) { .gs-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gs-chips button { font-size: .8rem; letter-spacing: .03em; gap: 5px; padding: 0 4px; } }

/* ---- shop (lobby row 03): weapon skins - guns | 3D viewer + buy | skin cards ---- */
.mm-modal.shm { align-items: center; justify-content: center; padding: 24px; background: radial-gradient(ellipse 70% 70% at 50% 45%, rgba(10,10,10,.72), rgba(0,0,0,.92)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.shm-box { position: relative; display: flex; flex-direction: column; width: min(1240px, 100%); height: min(720px, 100%); background: linear-gradient(180deg, rgba(34,34,32,.97), rgba(13,13,12,.98)); border: 1px solid var(--bd2); box-shadow: 0 30px 90px rgba(0,0,0,.75); animation: sqIn .28s var(--ease) both; }
.shm-top { display: flex; align-items: flex-end; gap: 18px; padding: 16px 64px 14px 20px; border-bottom: 1px solid var(--bd); }
.shm-top > div { display: flex; flex-direction: column; line-height: 1; }
.shm-top small, .shm-h, .shm-nm small { font-size: .78rem; font-weight: 600; letter-spacing: .1em; color: var(--lab); text-transform: uppercase; }
.shm-top b { margin-top: 5px; font-size: 1.9rem; font-weight: 700; color: #fff; letter-spacing: .02em; }
.shm-bank { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.shm-bank b { color: var(--acc); font-size: 1.5rem; }
.shm-box .st-x { top: 16px; right: 16px; }
.shm-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; }
.shm-guns, .shm-list { display: flex; flex-direction: column; gap: 8px; padding: 14px; overflow-y: auto; min-height: 0; }
.shm-guns { border-right: 1px solid var(--bd); } .shm-list { border-left: 1px solid var(--bd); }
.shm-h { margin-bottom: 2px; }
.shm-gun, .shm-skin { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--bd); background: rgba(255,255,255,.03); cursor: pointer; text-align: left; color: #e8e4da; font-family: var(--cond); transition: background .15s, border-color .15s; }
.shm-gun { flex-direction: column; align-items: stretch; }
.shm-gun img { width: 100%; height: 78px; object-fit: contain; }
.shm-gun span, .shm-st { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.shm-gun b, .shm-st b { font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; color: #fff; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shm-gun small, .shm-st small { font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--lab); }
.shm-gun:hover, .shm-skin:hover { background: rgba(255,255,255,.08); }
.shm-gun.on, .shm-skin.on { border-color: var(--acc); background: var(--acc-a); }
.shm-th { flex: none; width: 118px; height: 60px; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.shm-th img { width: 100%; height: 100%; object-fit: contain; }
.shm-st small { color: var(--acc); font-size: .9rem; } .shm-st small.ow { color: #8fd08a; } .shm-st small.eq { color: #fff; }
.shm-mid { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.shm-stage { position: relative; flex: 1 1 auto; min-height: 220px; background: radial-gradient(ellipse 60% 60% at 50% 55%, rgba(255,255,255,.07), transparent 72%); }
.shm-hint { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: .72rem; font-weight: 600; letter-spacing: .14em; color: rgba(255,255,255,.35); pointer-events: none; }
.shm-info { display: flex; align-items: flex-end; gap: 18px; padding: 14px 18px 16px; border-top: 1px solid var(--bd); }
.shm-nm { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.shm-nm b { font-size: 1.7rem; font-weight: 700; color: #fff; letter-spacing: .02em; text-transform: uppercase; line-height: 1.1; }
.shm-nm p { margin: 4px 0 0; font-size: .92rem; line-height: 1.3; color: #b9b5ab; max-width: 62ch; }
.shm-act { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.shm-pr { font-size: 1.5rem; font-weight: 700; color: var(--acc); line-height: 1; } .shm-pr.ow { color: #8fd08a; font-size: 1.1rem; letter-spacing: .1em; }
.shm-buy { min-width: 250px; height: 46px; padding: 0 18px; border: 0; cursor: pointer; font-family: var(--cond); font-weight: 700; font-size: 1.15rem; letter-spacing: .08em; color: #111; background: var(--acc); transition: background .15s; }
.shm-buy:hover { background: var(--acc2); }
.shm-buy.ask { background: #fff; animation: shmAsk .7s ease-in-out infinite alternate; }
.shm-buy.ghost { color: #e8e4da; background: rgba(255,255,255,.06); border: 1px solid var(--bd2); } .shm-buy.ghost:hover { background: rgba(255,255,255,.14); }
.shm-buy.off { color: #8a877f; background: rgba(255,255,255,.05); border: 1px solid var(--bd); cursor: not-allowed; }
.shm-empty { margin: auto; color: var(--lab); }
@keyframes shmAsk { from { box-shadow: 0 0 0 0 rgba(255,255,255,.5); } to { box-shadow: 0 0 0 7px rgba(255,255,255,0); } }
@media (max-width: 900px) { .shm-body { grid-template-columns: 1fr; grid-auto-rows: min-content; overflow-y: auto; } .shm-guns, .shm-list { flex-direction: row; overflow-x: auto; border: 0; border-bottom: 1px solid var(--bd); } .shm-gun { flex: none; width: 150px; } .shm-skin { flex: none; width: 250px; } .shm-h { display: none; } .shm-list { order: 3; border-top: 1px solid var(--bd); border-bottom: 0; } .shm-stage { min-height: 240px; } .shm-info { flex-direction: column; align-items: stretch; } .shm-act { align-items: stretch; } .shm-buy { min-width: 0; } .mm-modal.shm { padding: 8px; } }

/* top bar: a squad member who is READY gets a green ring (wins over the "me" ring) */
.pill2 .p2-av.rdy { box-shadow: 0 0 0 2px #5fd66a, 0 0 10px rgba(95,214,106,.55); }
.pill2 .p2-av.rdy img { filter: none; }
/* friends button: the pending-invite count sat half under the bank next to it (later in the row = drawn on top) and its number
   was cut off; it now stacks above its neighbours and the button keeps a little room for it */
.pill2 .p2-sq { z-index: 2; overflow: visible; margin-right: 5px; }
.pill2 .p2-badge { z-index: 3; top: -5px; right: -6px; line-height: 1; white-space: nowrap; }
.pill2 { overflow: visible; }

/* ---- shop, 2nd layout: category tabs / weapon tabs / banner in the skin's own colour (--sk) / skin strip ---- */
.shm-box.shp { width: min(1360px, 100%); height: min(820px, 100%); overflow: hidden; }
.shp-top { display: flex; align-items: flex-end; gap: 26px; padding: 16px 64px 0 22px; }
.shp-ttl { display: flex; flex-direction: column; line-height: 1; padding-bottom: 12px; }
.shp-ttl small { font-size: .78rem; font-weight: 600; letter-spacing: .1em; color: var(--lab); }
.shp-ttl b { margin-top: 5px; font-size: 1.9rem; font-weight: 700; color: #fff; letter-spacing: .02em; white-space: nowrap; }
.shp-top .shm-bank { padding-bottom: 12px; }
.shp-cats { display: flex; align-self: stretch; align-items: flex-end; gap: 2px; margin-right: auto; overflow-x: auto; }
.shp-cat { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer; font-family: var(--cond); font-weight: 700; font-size: 1.05rem; letter-spacing: .1em; color: #a5a29a; white-space: nowrap; transition: color .15s, border-color .15s, background .15s; }
.shp-cat small { font-size: .78rem; font-weight: 700; padding: 1px 6px; border-radius: 9px; background: rgba(255,255,255,.08); color: #cfcbc2; }
.shp-cat:hover { color: #fff; background: rgba(255,255,255,.05); }
.shp-cat.on { color: #fff; border-bottom-color: var(--sk); }
.shp-cat.on small { background: var(--sk); color: #111; }
.shp-guns { display: flex; gap: 6px; padding: 10px 22px; border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); background: rgba(0,0,0,.28); overflow-x: auto; flex: none; }
.shp-gun { flex: none; display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 14px 0 8px; border: 1px solid transparent; background: rgba(255,255,255,.035); cursor: pointer; color: #e8e4da; font-family: var(--cond); text-align: left; transition: background .15s, border-color .15s; }
.shp-gi { width: 92px; height: 46px; display: flex; align-items: center; justify-content: center; }
.shp-gi img { width: 100%; height: 100%; object-fit: contain; }
.shp-gt { display: flex; flex-direction: column; line-height: 1.15; }
.shp-gt b { font-size: 1.02rem; font-weight: 700; letter-spacing: .05em; color: #fff; text-transform: uppercase; white-space: nowrap; }
.shp-gt small { font-size: .76rem; font-weight: 600; letter-spacing: .06em; color: var(--lab); }
.shp-gun:hover { background: rgba(255,255,255,.09); }
.shp-gun.on { border-color: var(--sk); background: color-mix(in srgb, var(--sk) 16%, rgba(255,255,255,.04)); }
.shp-gun.on .shp-gt small { color: var(--sk); }
.shp-banner { position: relative; flex: 1 1 auto; min-height: 260px; overflow: hidden; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.2) 40%, rgba(0,0,0,.6)); }
.shp-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 46% 52% at 58% 52%, color-mix(in srgb, var(--sk) 34%, transparent), transparent 72%), linear-gradient(100deg, color-mix(in srgb, var(--sk) 14%, transparent), transparent 46%); animation: shpGlow 5s ease-in-out infinite alternate; }
@keyframes shpGlow { from { opacity: .7; } to { opacity: 1; } }
.shp-banner .gs-view { position: absolute; inset: 0 0 0 22%; }
.shp-head { position: absolute; left: 26px; top: 22px; width: min(430px, 42%); pointer-events: none; text-shadow: 0 2px 14px rgba(0,0,0,.9); animation: opIn .35s var(--ease) both; }
.shp-head small { font-size: .82rem; font-weight: 700; letter-spacing: .14em; color: var(--sk); }
.shp-head h2 { margin: 6px 0 10px; font-family: var(--cond); font-size: clamp(2.2rem, 4.2vw, 3.6rem); font-weight: 700; line-height: .95; letter-spacing: .01em; color: #fff; text-transform: uppercase; }
.shp-head p { margin: 0; font-size: .95rem; line-height: 1.35; color: #cfcbc2; }
.shp-buy { position: absolute; right: 24px; bottom: 22px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.shp-buy .shm-pr { font-size: 2rem; text-shadow: 0 2px 12px rgba(0,0,0,.9); }
.shp-buy .shm-buy:not(.off):not(.ghost) { background: var(--sk); color: #0c0c0c; }
.shp-buy .shm-buy:not(.off):not(.ghost):hover { filter: brightness(1.15); }
.shp-buy .shm-buy.ask { background: #fff !important; }
.shp-banner .shm-hint { left: 26px; right: auto; bottom: 22px; text-align: left; }
.shp-skins { flex: none; display: flex; gap: 8px; padding: 12px 22px 16px; border-top: 1px solid var(--bd); background: rgba(0,0,0,.28); overflow-x: auto; }
.shp-skin { flex: none; width: 214px; display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--bd); background: rgba(255,255,255,.03); cursor: pointer; text-align: left; color: #e8e4da; font-family: var(--cond); transition: background .15s, border-color .15s, transform .15s; }
.shp-th { height: 92px; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.shp-th img { width: 100%; height: 100%; object-fit: contain; }
.shp-st { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.shp-st b { font-size: 1rem; font-weight: 700; letter-spacing: .04em; color: #fff; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shp-st small { flex: none; font-size: .86rem; font-weight: 700; color: var(--acc); } .shp-st small.ow { color: #8fd08a; } .shp-st small.eq { color: #fff; }
.shp-skin:hover { background: rgba(255,255,255,.08); transform: translateY(-2px); }
.shp-skin.on { border-color: var(--sk); background: color-mix(in srgb, var(--sk) 14%, rgba(255,255,255,.03)); }
@media (max-width: 900px) { .shp-top { flex-wrap: wrap; gap: 6px 14px; padding-right: 58px; } .shp-cats { order: 3; flex-basis: 100%; } .shp-banner .gs-view { inset: 34% 0 16% 0; } .shp-head { width: auto; right: 20px; left: 16px; top: 12px; } .shp-head p { display: none; } .shp-head h2 { font-size: 2rem; } .shp-buy { right: 14px; left: 14px; bottom: 12px; align-items: stretch; } .shp-banner .shm-hint { display: none; } .shp-skin { width: 170px; } .shp-th { height: 70px; } .shp-guns, .shp-skins { padding-left: 12px; padding-right: 12px; } }
.shp-head small { text-transform: uppercase; }
/* thumbnails render one after another on first open: a soft sweep shows they are loading instead of an empty black box */
.shp-th, .shp-gi { position: relative; background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%); background-size: 220% 100%; animation: shpLoad 1.4s linear infinite; }
.shp-th { background-color: rgba(0,0,0,.4); }
@keyframes shpLoad { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .shp-th, .shp-gi, .shp-glow { animation: none; } }

.shm-box.shp.still { animation: none; }
.shp.still .shp-top, .shp.still .shp-guns, .shp.still .shp-skins { animation: none; }
.shp-guns, .shp-skins { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--sk) 60%, #333) transparent; }
.shp-guns::after, .shp-skins::after { content: ''; flex: none; width: 14px; }

/* ================================================================ phone fit pass (phones held sideways: short landscape screens only)
   Checked with tools/ui_audit.mjs at 568x320, 667x375, 740x360, 844x390, 932x430. Nothing here applies above 560 px of height. */
/* ---- skin shop: it had no layout for a short screen - the price, the BUY button and the whole strip of skins were pushed
   off the bottom of the popup and the gun was a sliver. Now: one slim header row, a slim row of guns, then the gun (with its
   name top-left and price + button bottom-right) and the skins as a list down the right side that scrolls up and down. */
@media (max-height: 560px) and (orientation: landscape) {
  .mm-modal.shm { padding: calc(4px + var(--sat)) calc(4px + var(--sar)) calc(4px + var(--sab)) calc(4px + var(--sal)); }
  .shm-box.shp { display: grid; grid-template-columns: minmax(0, 1fr) clamp(150px, 25%, 210px); grid-template-rows: auto auto minmax(0, 1fr); width: 100%; height: 100%; }
  .shp-top { grid-column: 1 / -1; flex-wrap: nowrap; align-items: center; gap: 12px; height: 44px; padding: 0 52px 0 12px; }
  .shp-ttl { padding: 0; } .shp-ttl small { display: none; } .shp-ttl b { margin: 0; font-size: 1.15rem; }
  .shp-cats { order: 0; flex: 1 1 0; min-width: 0; align-items: stretch; }
  .shp-cat { height: auto; padding: 0 10px; gap: 5px; font-size: .86rem; letter-spacing: .06em; }
  .shp-top .shm-bank { padding: 0; } .shp-top .shm-bank small { font-size: .68rem; } .shp-top .shm-bank b { font-size: 1.05rem; }
  .shm-box.shp .st-x { top: 5px; right: 8px; width: 34px; height: 34px; }
  .shp-guns { grid-column: 1 / -1; gap: 4px; padding: 4px 10px; }
  .shp-gun { height: 40px; gap: 6px; padding: 0 10px 0 4px; }
  .shp-gi { width: 60px; height: 32px; }
  .shp-gt b { font-size: .86rem; } .shp-gt small { font-size: .66rem; }
  .shp-banner { grid-column: 1; grid-row: 3; min-height: 0; }
  .shp-banner .gs-view { inset: 0; }
  .shp-head { left: 12px; right: 12px; top: 8px; width: auto; }
  .shp-head small { font-size: .68rem; }
  .shp-head h2 { margin: 2px 0 0; font-size: 1.35rem; }
  .shp-head p, .shp-banner .shm-hint { display: none; }
  .shp-buy { left: 10px; right: 10px; bottom: 8px; flex-direction: row; align-items: center; justify-content: flex-end; gap: 10px; pointer-events: none; }
  .shp-buy .shm-pr { font-size: 1.25rem; }
  .shp-buy .shm-buy { min-width: 0; height: 38px; padding: 0 14px; font-size: .95rem; white-space: nowrap; pointer-events: auto; }
  .shp-skins { grid-column: 2; grid-row: 3; flex-direction: column; min-height: 0; gap: 6px; padding: 6px; overflow: hidden auto; border-top: 0; border-left: 1px solid var(--bd); }
  .shp-skins::after { display: none; }
  .shp-skin { width: auto; gap: 3px; padding: 5px; }
  .shp-th { height: 54px; }
  .shp-st b { font-size: .8rem; } .shp-st small { font-size: .74rem; }
}
@media (max-height: 560px) and (orientation: landscape) and (max-width: 700px) { .shp-ttl { display: none; } }
@media (max-height: 560px) and (orientation: landscape) and (max-width: 760px) { .shp-st { flex-direction: column; align-items: flex-start; gap: 0; } .shp-st b { max-width: 100%; } }
@media (max-height: 560px) and (min-height: 400px) and (orientation: landscape) and (min-width: 800px) {
  .shp-head { right: auto; width: min(300px, 44%); } .shp-head h2 { font-size: 1.6rem; }
  .shp-head p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: .78rem; line-height: 1.25; }
  .shp-th { height: 66px; }
}
/* ---- lobby: the screen kept 22 px free at the bottom for a keyboard hint that phones never show, so on short phones the
   last row (PATCH NOTES) and the record cards were cut off with no way to scroll to them */
@media (max-height: 560px) and (orientation: landscape) {
  body.phone #menu.mm { padding-bottom: calc(8px + var(--sab)); }
  /* top bar: "+" (invite) and "+" (get cash) were 20 and 22 px wide */
  body.phone .pill2 .p2-plus { width: 32px; margin-left: 0; }
  body.phone .pill2 .p2-buy { width: 30px; height: 30px; }
  body.phone .pill2 .p2-bank { height: 30px; }
  body.phone .lbp-top > div { flex: none; } body.phone .lbp-top b { white-space: nowrap; } body.phone .lbp-x { width: 32px; height: 32px; }
  body.phone .lbp-top > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .68rem; letter-spacing: .02em; }
  body.phone .lbp-f { white-space: nowrap; } body.phone .lbp-f span { letter-spacing: .04em; } body.phone .lbp-f b { font-size: 1rem; }
  /* settings: sliders and switches are easier to hit */
  body.phone #settings .sr-range input[type=range] { height: 32px !important; }
  body.phone #settings .sr-tog::before { content: ''; position: absolute; inset: -5px -8px; }
}
/* cash store: the POPULAR / BEST VALUE tags are drawn above the pack picture, not under its faded corner */
@media (max-height: 560px) and (orientation: landscape) { body.phone .st-tag { z-index: 1; } }
/* game over on narrow phones: the left side was squeezed to 170 px (SURVIVED ran under the report, the level-up note wrapped
   into a tall box that sat on RETURN TO LOBBY) */
@media (max-height: 560px) and (orientation: landscape) { body.phone #gameover .go-hero { margin-top: 12px; } }
@media (max-height: 560px) and (orientation: landscape) and (max-width: 620px) {
  body.phone #gameover .go-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; }
  body.phone #gameover .go-hero { gap: 8px; } body.phone #gameover .go-lab { font-size: 24px; }
  body.phone #gameover .go-lv { flex-wrap: nowrap; gap: 6px; padding: 5px 8px; } body.phone #gameover .go-lv span { display: none; } body.phone #gameover .go-lv b { font-size: .95rem; letter-spacing: .04em; }
  body.phone #gameover .go-lv em { font-size: .7rem; letter-spacing: .04em; padding: 2px 4px; }
  body.phone #gameover .go-right { padding: 8px 10px; } body.phone #gameover .go-right ul { column-gap: 10px; } body.phone #gameover .go-right li { font-size: .78rem; } body.phone #gameover .go-right li b { font-size: .86rem; }
  body.phone #gameover .go-right li { gap: 4px; } body.phone #gameover .go-right li svg { display: none; }
  body.phone #gameover .go-party div { gap: 5px; } body.phone #gameover .go-party b { font-size: .95rem; } body.phone #gameover .go-party .pav { width: 22px; height: 22px; }
}
/* squad popup: its buttons sit side by side, so the last one is not cut off at the bottom */
@media (max-height: 400px) and (orientation: landscape) { body.phone .sqm-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
@media (max-height: 370px) and (orientation: landscape) {
  body.phone #menuItems .op { height: 40px; } body.phone #menuItems .op.main { height: 48px; }
}
@media (max-height: 340px) and (orientation: landscape) {
  body.phone #menu .mm-brand { display: none !important; }
  body.phone #menuItems .op { height: 44px; } body.phone #menuItems .op.main { height: 54px; }
  body.phone .cc-w { min-height: 66px !important; } body.phone .cc-cl { min-height: 54px !important; }
  /* skill card: price and "points available" stay above the UNLOCK button */
  body.phone #tree .tr-detail .td-cost { padding: 4px 0; } body.phone #tree .tr-detail .td-st { margin-top: 6px; }
}
/* ---- loadout: the DONE button sat on top of the part list and the title took three lines, so the list of parts showed
   one or two rows (none at all on a 320 px tall phone) and the slot buttons were 16 px wide. Now the title is one line with
   DONE beside it, the screen runs to the bottom edge, and every button is at least 32 px tall. */
@media (max-height: 560px) and (orientation: landscape) {
  body.phone #loadout { padding-bottom: calc(8px + var(--sab)); scroll-padding-bottom: 0; }
  body.phone #loadout .sfoot { top: calc(10px + var(--sat)); bottom: auto; }
  body.phone #loadout .sfoot .done { height: 34px; min-height: 34px; min-width: 86px; padding: 0 12px; font-size: 1.05rem; }
  body.phone .gsm .gs-head { flex-direction: row; align-items: center; gap: 10px; min-height: 34px; padding-right: 104px; }
  body.phone .gsm .gs-crumb, body.phone .gsm .gs-lv { display: none; }
  body.phone .gsm .gs-head h1 { flex: 0 1 auto; min-width: 0; font-size: 1.35rem; }
  body.phone .gsm .gs-cls { flex: none; white-space: nowrap; }
  body.phone .gsm .gs-tabs button { height: 32px; }
  body.phone .gsm .gs-sideh { min-width: 0; }
  body.phone .gsm .gs-chips button { height: 32px; } body.phone .gsm .gs-chips button small { display: none; }
  body.phone .gsm .slt { height: 36px; }
  /* part rows: the price sits under the name, so long names are not cut short */
  body.phone .gsm .ao { grid-template-columns: 40px minmax(0, 1fr); row-gap: 0; padding-right: 6px; } body.phone .gsm .ao-img { grid-row: 1 / 3; } body.phone .gsm .ao-p { grid-column: 2; font-size: .74rem; }
}
/* narrow phones (up to 720 px wide): there is no room for five slot buttons under the gun, so they run across the gun and the
   stats, and the parts of the picked slot fill the space below them, two to a row */
@media (max-height: 560px) and (orientation: landscape) and (max-width: 720px) {
  body.phone .gsm { grid-template-rows: auto minmax(0, 1.15fr) auto minmax(0, 1fr); grid-template-areas: "head head head" "side stage stats" "side tags tags" "side list list"; }
  body.phone .gsm .gs-center, body.phone .gsm .gs-right { display: contents; }
  body.phone .gsm .gs-stage { grid-area: stage; min-width: 0; } body.phone .gsm .gs-tags { grid-area: tags; }
  body.phone .gsm .gs-stats { grid-area: stats; min-height: 0; overflow: hidden; padding: 4px 8px; gap: 2px; }
  body.phone .gsm .gs-bars { gap: 0; } body.phone .gsm .gs-bars .stat > span, body.phone .gsm .gs-bars .stat .sv { line-height: 1.15; }
  body.phone .gsm .gs-drawer { grid-area: list; min-height: 0; }
  body.phone .gsm .gd-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: min-content; align-content: start; gap: 3px; padding: 4px; }
}
@media (max-height: 340px) and (orientation: landscape) and (max-width: 720px) { body.phone .gsm .gs-att { display: none; } }
@media (max-height: 560px) and (orientation: landscape) and (max-width: 600px) { body.phone .gsm { --side: 150px; --rw: 176px; }
}

/* ================================================================ 2026-11-12 additions
   weekly leaderboard prize column, cash store sale / payment views, prize popup, settings: crosshair / colour-blind / key bindings */

/* ---- leaderboard: the prize for the #1 spot on the right (ui.js lbHTML) ---- */
@media (min-width: 1241px) { #menu.mm.lbwide { grid-template-columns: minmax(250px, 330px) minmax(340px, 800px) minmax(0, 1fr); } }
.lbp.has-pz { container-type: inline-size; }
.lbp-in { display: flex; }
.lbp-main { flex: 1 1 auto; min-width: 0; }
.lbp-pz { position: relative; flex: 0 0 clamp(250px, 40%, 330px); display: flex; flex-direction: column; margin: -12px -14px -12px 14px; padding: 14px 16px 12px; border-left: 1px solid rgba(240,200,90,.3);
  background: radial-gradient(120% 55% at 50% 0%, rgba(240,200,90,.17), transparent 62%), linear-gradient(180deg, rgba(34,29,16,.7), rgba(12,12,11,.78)); overflow: hidden; isolation: isolate; animation: lpzIn .55s var(--ease) both .08s; }
@keyframes lpzIn { from { opacity: 0; transform: translateX(14px); } }
.lbp.still .lbp-pz { animation: none; }
.lbp-pz::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(112deg, transparent 38%, rgba(255,232,160,.09) 50%, transparent 62%); background-size: 260% 100%; animation: lpzSheen 6s ease-in-out infinite; }
@keyframes lpzSheen { 0% { background-position: 130% 0; } 55%, 100% { background-position: -130% 0; } }
.lpz-h { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(240,200,90,.22); }
.lpz-ci { width: 30px !important; height: 30px !important; flex: none; color: #f0c85a; object-fit: contain; filter: drop-shadow(0 0 8px rgba(240,200,90,.55)); }
.lpz-h > div { display: flex; flex-direction: column; line-height: 1; }
.lpz-h small { font-size: .74rem; font-weight: 700; letter-spacing: .14em; color: #cdb878; margin-bottom: 3px; }
.lpz-h b { font-size: 1.55rem; font-weight: 700; color: #fff; letter-spacing: .03em; white-space: nowrap; }
.lpz-free { margin-left: auto; align-self: flex-start; padding: 2px 8px; font-size: .72rem; font-weight: 800; letter-spacing: .16em; color: #1a1406; background: linear-gradient(180deg, #ffe39a, #dcae3c); box-shadow: 0 0 14px rgba(240,200,90,.5); animation: lpzFree 2.4s ease-in-out infinite; }
@keyframes lpzFree { 50% { box-shadow: 0 0 22px rgba(240,200,90,.85); } }
.lpz-n { margin-top: 10px; display: flex; flex-direction: column; line-height: 1.05; }
.lpz-n small { font-size: .78rem; font-weight: 700; letter-spacing: .14em; color: var(--lab); }
.lpz-n b { font-size: 1.65rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; background: linear-gradient(90deg, #fff 20%, #f6dc8c 50%, #fff 80%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lpzName 4.5s linear infinite; }
@keyframes lpzName { to { background-position: -200% 0; } }
.lpz-stage { position: relative; flex: 1 1 auto; min-height: 170px; margin: 4px -10px 0; }
.lpz-view { position: absolute; inset: 0; z-index: 1; }
.lpz-view .wv-canvas { width: 100% !important; height: 100% !important; display: block; cursor: grab; }
.lpz-view .wv-canvas.grab { cursor: grabbing; }
.lpz-view img { width: 100%; height: 100%; object-fit: contain; }
.lpz-ring { position: absolute; left: 50%; top: 50%; width: 92%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(240,200,90,.24), rgba(240,200,90,.07) 42%, transparent 68%); animation: lpzPulse 3.4s ease-in-out infinite; }
@keyframes lpzPulse { 50% { transform: translate(-50%, -50%) scale(1.09); opacity: .7; } }
.lpz-floor { position: absolute; left: 14%; right: 14%; bottom: 6%; height: 16px; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse, rgba(240,200,90,.22), rgba(0,0,0,.45) 45%, transparent 72%); }
.lpz-f { display: flex; flex-direction: column; gap: 3px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); }
.lpz-f span { font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--lab); } .lpz-f span b { color: #f0c85a; font-size: 1.05rem; margin-left: 4px; letter-spacing: .02em; }
.lpz-f em { font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: #ebe4cf; }
.lpz-last { margin-top: 6px; font-size: .7rem; font-weight: 600; letter-spacing: .06em; color: var(--lab); } .lpz-last b { color: #fff; }
@container (max-width: 640px) {
  .lbp-in { flex-direction: column; }
  .lbp-pz { flex: none; margin: 12px -14px -12px; border-left: 0; border-top: 1px solid rgba(240,200,90,.3); animation-name: lpzUp; }
  .lpz-stage { min-height: 150px; }
}
@keyframes lpzUp { from { opacity: 0; transform: translateY(10px); } }

/* ---- cash store: sale (old price crossed out, new price, LIMITED), payment / sign-up views ---- */
.st-row { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.st-pk.sale { border-color: rgba(232,72,58,.55); box-shadow: 0 0 0 1px rgba(232,72,58,.25), 0 12px 40px rgba(232,72,58,.12); }
.st-lim { position: absolute; top: 10px; right: 10px; z-index: 1; font-style: normal; font-size: .72rem; font-weight: 800; letter-spacing: .14em; padding: 2px 8px; color: #fff; background: linear-gradient(180deg, #ff5a45, #c8261a); animation: stLim 1.8s ease-in-out infinite; }
@keyframes stLim { 50% { box-shadow: 0 0 16px rgba(255,80,60,.75); } }
.st-was { display: flex; align-items: center; justify-content: center; gap: 12px; margin: -4px 0 4px; }
.st-was s { position: relative; text-decoration: none; font-size: 1.15rem; font-weight: 700; color: #8f8b82; padding: 0 3px; }
.st-was s i::before, .st-was s i::after { content: ''; position: absolute; left: -3px; right: -3px; top: 50%; height: 2px; background: #ff4a38; box-shadow: 0 0 6px rgba(255,74,56,.6); transform: rotate(-18deg); transform-origin: center; animation: stX .5s var(--ease) both .35s; }
.st-was s i::after { transform: rotate(18deg); animation-delay: .5s; }
@keyframes stX { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.st-was > b { font-size: 1.6rem; font-weight: 700; color: #ffd36a; text-shadow: 0 0 16px rgba(255,200,90,.4); }
.st-ends { display: block; margin-bottom: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; color: #ff8a7a; font-variant-numeric: tabular-nums; }
.st-pk.sale .st-buy { background: linear-gradient(180deg, #ffd36a, #e6ac2e); }
.st-pk.sale .st-buy:hover { background: #ffe39a; }
.st-buy:disabled { opacity: .6; cursor: progress; }
.st-legal { margin: 14px 0 0; text-align: center; font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--lab); }
.st-load { padding: 50px 0; text-align: center; color: var(--lab); font-size: 1rem; letter-spacing: .1em; }
.st-msg { width: min(560px, 100%); }
.st-note { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 10px 6px; }
.st-note > b { font-size: 1.6rem; font-weight: 700; letter-spacing: .04em; color: #fff; }
.st-note > small { font-size: .82rem; font-weight: 700; letter-spacing: .14em; color: var(--lab); }
.st-note p { margin: 0; max-width: 420px; color: #cfcac0; font-size: 1rem; } .st-note p em { font-style: normal; color: var(--hl); font-weight: 700; }
.st-acts { display: flex; gap: 8px; justify-content: center; margin-top: 12px; width: 100%; } .st-acts .st-buy { width: auto; min-width: 180px; padding: 0 22px; }
.st-ghost { height: 44px; padding: 0 22px; border: 1px solid var(--bd2); background: rgba(255,255,255,.05); color: #fff; cursor: pointer; font-family: var(--cond); font-weight: 700; font-size: 1.05rem; letter-spacing: .08em; }
.st-ghost:hover { background: rgba(255,255,255,.14); }
.st-msg.paid .st-plus { font-size: clamp(3rem, 9vmin, 4.6rem); line-height: 1; color: #ffd36a; text-shadow: 0 0 30px rgba(255,200,90,.5); animation: stPop .6s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes stPop { from { transform: scale(.4); opacity: 0; } }
.st-burst { position: absolute; left: 50%; top: 40%; width: 380px; height: 380px; transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,211,106,.16) 0 8deg, transparent 8deg 22deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%); mask: radial-gradient(circle, #000 20%, transparent 65%); animation: stSpin 14s linear infinite; }
@keyframes stSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.st-spin { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--hl); animation: stSpin2 .8s linear infinite; }
@keyframes stSpin2 { to { transform: rotate(360deg); } }
.st-msg.fail .st-note > b { color: #ff9a8a; }

/* ---- prize popup: you won last week's leaderboard ---- */
.pzm { z-index: 520 !important; justify-content: center !important; align-items: center !important; padding: 20px !important; background: rgba(0,0,0,.7) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pzm-box { position: relative; width: min(620px, 100%); padding: 26px 26px 24px; text-align: center; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, rgba(40,33,17,.97), rgba(13,12,11,.98)); border: 1px solid rgba(240,200,90,.45); box-shadow: 0 0 60px rgba(240,200,90,.18), 0 30px 90px rgba(0,0,0,.7); animation: stIn .45s var(--ease) both; }
.pzm-rays { position: absolute; left: 50%; top: 42%; width: 900px; height: 900px; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; background: repeating-conic-gradient(rgba(240,200,90,.1) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 10%, transparent 55%); mask: radial-gradient(circle, #000 10%, transparent 55%); animation: stSpin 30s linear infinite; }
.pzm-h { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pzm-ci { width: 52px !important; height: 52px !important; color: #f0c85a; object-fit: contain; filter: drop-shadow(0 0 14px rgba(240,200,90,.7)); animation: stPop .7s cubic-bezier(.2,1.6,.4,1) both .1s; }
.pzm-h small { font-size: .82rem; font-weight: 700; letter-spacing: .18em; color: #cdb878; }
.pzm-h b { font-size: clamp(2rem, 6vmin, 2.8rem); font-weight: 700; line-height: 1; color: #fff; letter-spacing: .03em; }
.pzm-stage { position: relative; height: 210px; margin: 10px -10px 0; }
.pzm-view { position: absolute; inset: 0; } .pzm-view .wv-canvas { width: 100% !important; height: 100% !important; display: block; cursor: grab; }
.pzm-n small { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: var(--lab); }
.pzm-n b { font-size: 1.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #ffd36a; }
.pzm-box p { margin: 6px auto 0; max-width: 440px; color: #d6d0c3; } .pzm-box p em { font-style: normal; color: #ffd36a; font-weight: 700; }

/* ---- settings: crosshair picker, colour swatches, colour-blind preview ---- */
.sr.dim { opacity: .45; }
.xh-pick { display: flex; align-items: center; gap: 12px; }
.xh-prev { position: relative; flex: none; width: 46px; height: 46px; border: 1px solid var(--bd2); background: radial-gradient(circle, #3a3833, #191816); }
.xh-prev i, .xh-prev u { position: absolute; left: 50%; top: 50%; background: var(--xh-c, #fff); box-shadow: 0 0 0 1px rgba(0,0,0,.55); }
.xh-prev i.t, .xh-prev i.b { width: 2px; height: calc(7px * var(--xh-k, 1)); margin-left: -1px; }
.xh-prev i.l, .xh-prev i.r { height: 2px; width: calc(7px * var(--xh-k, 1)); margin-top: -1px; }
.xh-prev i.t { margin-top: calc(-3px - 7px * var(--xh-k, 1)); } .xh-prev i.b { margin-top: 3px; }
.xh-prev i.l { margin-left: calc(-3px - 7px * var(--xh-k, 1)); } .xh-prev i.r { margin-left: 3px; }
.xh-prev u { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; }
body.xh-dot .xh-prev i, body.xh-circle .xh-prev i, body.xh-off .xh-prev i, body.xh-off .xh-prev u { display: none; }
body.xh-dot .xh-prev u { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
body.xh-circle .xh-prev u { width: calc(18px * var(--xh-k, 1)); height: calc(18px * var(--xh-k, 1)); margin: calc(-9px * var(--xh-k, 1)) 0 0 calc(-9px * var(--xh-k, 1)); background: none; border: 2px solid var(--xh-c, #fff); box-sizing: border-box; }
.sr-sw { display: flex; gap: 6px; }
.sr-sw button { width: 30px; height: 30px; border: 2px solid rgba(255,255,255,.18); background: var(--sw); cursor: pointer; transition: transform .15s var(--ease), border-color .15s; }
.sr-sw button:hover { transform: translateY(-2px); }
.sr-sw button.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 12px var(--sw); }
.cb-prev { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 0 8px; }
.cb-prev > div { display: flex; flex-direction: column; gap: 5px; }
.cb-prev small { font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: var(--lab); }
.cb-prev span { display: flex; height: 26px; border: 1px solid var(--bd); }
.cb-prev span i { flex: 1; }
body.cb-on .cb-fix span { filter: url(#cbFilter); }

/* ---- settings: key bindings - a keyboard and a mouse you click to rebind ---- */
.st2-rows.kb-rows { padding: 0; }
.kb { position: relative; padding: 12px 18px 18px; }
.kb-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.kb-info { flex: 1; min-width: 0; min-height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: rgba(0,0,0,.28); border: 1px solid var(--bd); font-size: .95rem; color: #cfcac0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-info b { color: #fff; letter-spacing: .04em; } .kb-info em { margin-left: auto; font-style: normal; font-size: .78rem; letter-spacing: .1em; color: var(--lab); }
.kb-bar .sr-btn.arm { color: #111; background: #ff7a66; border-color: transparent; }
.kb-deck { display: grid; grid-template-columns: minmax(0, 1fr) clamp(120px, 17%, 150px); gap: 18px; align-items: start; padding: 14px; background: radial-gradient(120% 140% at 30% 0%, rgba(255,255,255,.05), transparent 60%), linear-gradient(180deg, #17171a, #0e0e10); border: 1px solid var(--bd2); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 40px rgba(0,0,0,.45); }
.kb-board { display: grid; gap: 5px; padding: 8px; background: linear-gradient(180deg, #0b0b0d, #141417); border: 1px solid rgba(255,255,255,.07); border-radius: 6px; box-shadow: inset 0 2px 8px rgba(0,0,0,.6); }
.kb-r { display: grid; grid-template-columns: repeat(64, minmax(0, 1fr)); gap: 5px; }
.kb-r:first-child { margin-bottom: 5px; }
.kc { --c: #8b8a86; position: relative; height: clamp(30px, 3.4vw, 42px); min-width: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; overflow: hidden;
  font-family: var(--cond); color: #a9a59c; border: 1px solid rgba(255,255,255,.09); border-radius: 5px; background: linear-gradient(180deg, #2a2a2e, #1d1d21 70%, #18181b); box-shadow: inset 0 -3px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07), 0 2px 3px rgba(0,0,0,.5);
  transition: transform .14s var(--ease), box-shadow .2s, border-color .2s, color .2s, background .2s; }
.kc b { font-size: clamp(.62rem, .95vw, .86rem); font-weight: 700; letter-spacing: .04em; line-height: 1; white-space: nowrap; }
.kc i { font-style: normal; font-size: clamp(.46rem, .62vw, .58rem); font-weight: 800; letter-spacing: .06em; line-height: 1; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--c); }
.kc-gap { display: block; }
.kc:hover { transform: translateY(-2px); color: #fff; border-color: rgba(255,255,255,.3); }
.kc.on { color: #fff; border-color: color-mix(in srgb, var(--c) 70%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 26%, #26262a), #1b1b1f 75%);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1), 0 0 10px color-mix(in srgb, var(--c) 45%, transparent), 0 0 1px var(--c); animation: kcGlow 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes kcGlow { 50% { box-shadow: inset 0 -3px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12), 0 0 18px color-mix(in srgb, var(--c) 65%, transparent), 0 0 2px var(--c); } }
.kc.on::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--c) 35%, transparent) 50%, transparent 70%); background-size: 300% 100%; background-position: 150% 0; animation: kcSweep 4.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes kcSweep { 0%, 55% { background-position: 150% 0; } 85%, 100% { background-position: -150% 0; } }
.kc.on:hover { transform: translateY(-3px); box-shadow: inset 0 -3px 0 rgba(0,0,0,.4), 0 0 22px color-mix(in srgb, var(--c) 75%, transparent), 0 0 2px var(--c); }
.kc.lock { cursor: default; } .kc.lock s { position: absolute; top: 3px; right: 4px; width: 7px; height: 6px; border: 1.5px solid currentColor; border-radius: 1px; opacity: .7; }
.kc.lock s::before { content: ''; position: absolute; left: .5px; bottom: 100%; width: 3px; height: 3px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 3px 3px 0 0; }
.kc.blk { opacity: .32; cursor: not-allowed; } .kc.blk:hover { transform: none; }
.kc.hit, .ms-z.hit { animation: kcHit .32s var(--ease) !important; }
@keyframes kcHit { 0% { transform: translateY(2px) scale(.94); background: color-mix(in srgb, var(--c) 70%, #fff); color: #111; box-shadow: 0 0 26px var(--c); } }
.kc.new, .ms-z.new { animation: kcNew .9s var(--ease) both !important; }
@keyframes kcNew { 0% { transform: scale(1.18); box-shadow: 0 0 0 3px var(--c), 0 0 30px var(--c); } 100% { transform: none; } }
.kc.sel, .ms-z.sel { outline: 2px solid #fff; outline-offset: 2px; z-index: 2; }
.kb.focus .kc:not(.lit), .kb.focus .ms-z:not(.lit) { opacity: .35; filter: saturate(.4); }
.kb .lit { transform: translateY(-3px) !important; box-shadow: 0 0 0 2px var(--c), 0 0 24px var(--c) !important; opacity: 1 !important; }
/* mouse */
.kb-mouse { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ms { position: relative; width: clamp(96px, 100%, 124px); aspect-ratio: .64; }
.ms-body { position: absolute; inset: 0; z-index: 0; border-radius: 48% 48% 46% 46% / 34% 34% 66% 66%; background: linear-gradient(160deg, #2c2c31, #151518 60%, #0f0f12); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -10px 20px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.55); pointer-events: none; }
.ms-cord { position: absolute; left: 50%; bottom: 100%; width: 2px; height: 16px; margin-left: -1px; background: linear-gradient(180deg, transparent, #3a3a40); pointer-events: none; }
.ms-z { --c: #8b8a86; position: absolute; z-index: 1; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: var(--cond); color: #8f8b84; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); transition: box-shadow .2s, background .2s, color .2s, transform .14s var(--ease); }
.ms-z b { font-size: .8rem; font-weight: 800; letter-spacing: .04em; pointer-events: none; }
.ms-z:hover { color: #fff; background: rgba(255,255,255,.1); }
.ms-z.on { color: #fff; background: color-mix(in srgb, var(--c) 24%, transparent); border-color: color-mix(in srgb, var(--c) 70%, transparent); box-shadow: inset 0 0 14px color-mix(in srgb, var(--c) 40%, transparent), 0 0 10px color-mix(in srgb, var(--c) 40%, transparent); }
.ms-l { left: 2%; top: 0; width: 46%; height: 40%; border-radius: 90% 8% 6% 10% / 70% 6% 6% 8%; }
.ms-r { right: 2%; top: 0; width: 46%; height: 40%; border-radius: 8% 90% 10% 6% / 6% 70% 8% 6%; }
.ms-wh { position: absolute; z-index: 2; left: 50%; top: 8%; width: 15%; height: 26%; margin-left: -7.5%; display: flex; flex-direction: column; gap: 2px; }
.ms-wh .ms-z { position: relative; inset: auto; flex: 1; width: 100%; border-radius: 3px; } .ms-wh .ms-z b { font-size: .5rem; }
.ms-wm { flex: 1.4 !important; background: repeating-linear-gradient(180deg, #3a3a40 0 2px, #222226 2px 4px) !important; } .ms-wm.on { box-shadow: 0 0 0 1px var(--c), 0 0 12px var(--c) !important; }
.ms-s4, .ms-s5 { left: -6%; width: 12%; height: 11%; border-radius: 4px 2px 2px 4px; } .ms-s5 { top: 46%; } .ms-s4 { top: 59%; } .ms-s4 b, .ms-s5 b { font-size: .55rem; }
.ms-list { width: 100%; display: grid; gap: 3px; }
.ms-li { display: flex; justify-content: space-between; gap: 6px; padding: 3px 6px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; color: var(--lab); border-left: 2px solid rgba(255,255,255,.1); background: rgba(255,255,255,.025); }
.ms-li.on { border-left-color: var(--c); } .ms-li.on b { color: var(--c); }
/* action list */
.kb-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 22px; margin-top: 14px; }
.kb-grp { display: contents; }
.kb-grp > small { grid-column: 1 / -1; margin-top: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; color: var(--lab); }
.kb-row { --c: #888; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 8px 4px 10px; border: 1px solid transparent; background: rgba(255,255,255,.025); transition: background .15s, border-color .15s; }
.kb-row:hover { background: rgba(255,255,255,.06); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.kb-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.kb-lab { flex: 1; min-width: 0; font-size: 1rem; font-weight: 600; color: #ebe7de; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-chips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.kb-chip { display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 4px 0 8px; font-size: .78rem; font-weight: 800; letter-spacing: .05em; color: #111; background: color-mix(in srgb, var(--c) 80%, #fff); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 35%, transparent); }
.kb-chip.lock { padding-right: 8px; opacity: .8; }
.kb-chip button { width: 18px; height: 18px; padding: 0; border: 0; background: transparent; color: rgba(0,0,0,.55); font-size: 1rem; line-height: 1; cursor: pointer; } .kb-chip button:hover { color: #000; background: rgba(0,0,0,.12); }
.kb-none { font-size: .74rem; font-weight: 800; letter-spacing: .12em; color: #ff8a7a; }
.kb-add { width: 26px; height: 26px; padding: 0; border: 1px dashed rgba(255,255,255,.3); background: transparent; color: #cfcac0; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.kb-add:hover { border-style: solid; border-color: var(--c); color: #fff; background: color-mix(in srgb, var(--c) 18%, transparent); }
/* "bind this key" popover */
.kb-pop { position: absolute; z-index: 20; width: min(420px, calc(100% - 8px)); padding: 10px 12px 12px; background: linear-gradient(180deg, rgba(30,30,33,.98), rgba(16,16,18,.98)); border: 1px solid var(--bd2); box-shadow: 0 18px 50px rgba(0,0,0,.7); animation: kbPop .2s var(--ease) both; }
@keyframes kbPop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.kb-pop-h { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.kb-pop-h b { flex: 1; font-size: .9rem; font-weight: 700; letter-spacing: .12em; color: #fff; }
.kb-pop-h > button { width: 28px; height: 28px; border: 1px solid var(--bd2); background: transparent; color: #fff; font-size: 1.1rem; cursor: pointer; }
.kb-pk { --c: #8b8a86; min-width: 34px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; border: 1px solid var(--c); border-radius: 4px; background: color-mix(in srgb, var(--c) 25%, #222); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 50%, transparent); }
.kb-pop > small { display: block; margin: 8px 0 4px; font-size: .68rem; font-weight: 700; letter-spacing: .16em; color: var(--lab); }
.kb-pop-g { display: flex; flex-wrap: wrap; gap: 4px; }
.kb-pop-g button { --c: #888; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #e6e2d9; cursor: pointer; font-family: var(--cond); font-size: .88rem; font-weight: 600; transition: background .15s, border-color .15s; }
.kb-pop-g button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.kb-pop-g button:hover { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); color: #fff; }
.kb-pop-g button.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 30%, transparent); color: #fff; }
.kb-pop-clr { margin-top: 10px; width: 100%; height: 32px; border: 1px solid rgba(255,110,90,.45); background: rgba(255,90,70,.08); color: #ff9a8a; cursor: pointer; font-family: var(--cond); font-weight: 700; letter-spacing: .1em; }
.kb-pop-clr:hover { background: rgba(255,90,70,.2); color: #fff; }
/* waiting for a key */
.kb-cap { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(6,6,7,.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fadeIn .18s both; }
@keyframes fadeIn { from { opacity: 0; } }
.kb-cbox { --c: #fff; position: relative; width: min(440px, 90%); padding: 34px 22px 26px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: crosshair; border: 2px solid var(--c); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 20%, transparent), rgba(14,14,16,.95) 70%); box-shadow: 0 0 40px color-mix(in srgb, var(--c) 40%, transparent); animation: kbCap 1.4s ease-in-out infinite; }
@keyframes kbCap { 50% { box-shadow: 0 0 70px color-mix(in srgb, var(--c) 70%, transparent); } }
.kb-pulse { position: absolute; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 0 var(--c); animation: kbPulse 1.2s ease-out infinite; }
@keyframes kbPulse { to { box-shadow: 0 0 0 16px transparent; } }
.kb-cbox small { font-size: .78rem; font-weight: 700; letter-spacing: .16em; color: var(--lab); }
.kb-cbox b { font-size: 1.8rem; font-weight: 700; color: #fff; letter-spacing: .03em; }
.kb-cbox span { color: #d8d3c8; font-size: .95rem; } .kb-cbox em { font-style: normal; font-size: .78rem; letter-spacing: .1em; color: var(--lab); }
.kb-row.listen { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
@media (max-width: 1100px) { .kb-list { grid-template-columns: minmax(0, 1fr); } .kb-deck { grid-template-columns: minmax(0, 1fr); } .kb-mouse { flex-direction: row; justify-content: center; } .ms { width: 96px; } .ms-list { max-width: 260px; } }
@media (prefers-reduced-motion: reduce) { .kc.on, .kc.on::after, .lbp-pz::before, .lpz-n b, .lpz-ring, .st-lim, .kb-cbox, .pzm-rays, .st-burst { animation: none !important; } }
/* settings opened from the in-match pause menu: a dark backdrop, so the pause screen does not show through the panel */
body.paused #settings.menuscreen.on { background: rgba(8,8,9,.9) !important; }
/* Settings > Video > Resolution dropdown */
.sr-sel { height: 38px; min-width: 250px; padding: 0 12px; font-family: var(--cond); font-weight: 700; font-size: 1rem; letter-spacing: .04em; color: #fff; background: rgba(255,255,255,.07); border: 1px solid var(--bd2); cursor: pointer; }
.sr-sel:hover, .sr-sel:focus { border-color: var(--hl); outline: none; }
.sr-sel option { background: #1b1b1e; color: #fff; }

/* ---- bug-report sweep (2026-11-12): landscape phones. The operations list ran off the bottom of the screen (it did not
   scroll): with five or six rows (BUG REPORT, PATCH NOTES, a guest's CREATE ACCOUNT) the last ones could not be reached at
   390-430 px tall. The wordmark is smaller there, the rows tighter, and whatever still does not fit scrolls in its column. */
@media (max-height: 560px) and (orientation: landscape) {
  #menu .mm-ops { min-height: 0; overflow: hidden; }
  #menu #menuItems { flex: 1 1 auto; min-height: 0; overflow: hidden auto; overscroll-behavior: contain; }
  #menu #menuItems > .op { flex-shrink: 0; }   /* (rows keep their height; a list that is still too long scrolls, never squeezes) */
}
@media (min-height: 371px) and (max-height: 460px) and (orientation: landscape) {
  body.phone #menu .mm-brand.l3d-on { width: clamp(160px, 19vw, 230px); }
  body.phone #menu .mm-brand { margin-bottom: 4px !important; }
  body.phone #menuItems .op { height: 40px; } body.phone #menuItems .op.lbrow { margin-top: 2px; } body.phone #menuItems .op.main { height: 50px; }
}