/* COMMANDO — menus and touch controls. Dark military panels with an orange accent. */
:root {
  --bg: #07090b; --panel: rgba(12, 16, 20, .9); --panel2: rgba(22, 28, 34, .92); --line: rgba(255, 255, 255, .12);
  --text: #eef2ec; --dim: #9aa69c; --acc: #ff9a3c; --acc2: #ffcf7a; --good: #5cff8a; --bad: #ff6a6a;
  --cut: 14px;
  --head: "Black Ops One", Impact, sans-serif;
}
html, body {
  margin: 0; height: 100%; background: var(--bg); overflow: hidden;
  touch-action: none; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  font-family: Rajdhani, "Segoe UI", system-ui, sans-serif; color: var(--text);
}
#game { position: fixed; inset: 0; }
canvas { display: block; image-rendering: pixelated; }
.hidden { display: none !important; }

/* ---------- overlays and cards ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 10; display: flex; align-items: flex-start; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(5, 8, 10, .45), rgba(3, 5, 6, .82));
  padding: 16px; box-sizing: border-box; overflow: auto; scrollbar-width: thin; scrollbar-color: #4a5a4e transparent;
}
.card {
  margin: auto; width: min(460px, 100%); box-sizing: border-box; padding: 26px 26px 20px;
  background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  display: flex; flex-direction: column; gap: 12px; text-align: center; position: relative;
  box-shadow: inset 0 3px 0 var(--acc);
}
.card.narrow { width: min(400px, 100%); }
.card.wide { width: min(660px, 100%); text-align: left; }
.card.huge { width: min(1080px, 100%); }
.logo { font: 400 clamp(36px, 8vw, 64px) var(--head); color: var(--acc); letter-spacing: .04em; text-shadow: 0 4px 0 #4a1d04, 0 0 30px rgba(255, 140, 40, .35); line-height: 1; }
.logo.small { font-size: 30px; text-shadow: 0 3px 0 #4a1d04; }
.tag { margin: 0; color: var(--dim); letter-spacing: .22em; text-transform: uppercase; font-size: 14px; }
.fine { margin: 2px 0 0; font-size: 14px; color: var(--dim); line-height: 1.4; }
h2 { font: 400 32px var(--head); letter-spacing: .06em; margin: 0; color: var(--acc); text-align: center; }
h3 { margin: 8px 0 0; font-size: 15px; letter-spacing: .18em; color: var(--acc2); text-transform: uppercase; }
.sub { margin: 0; color: var(--dim); font-size: 15px; letter-spacing: .04em; }
.center { text-align: center; }
.msg { min-height: 20px; font-size: 15px; color: var(--acc2); }
.note { padding: 12px 14px; background: rgba(255, 154, 60, .12); border: 1px solid rgba(255, 154, 60, .4); font-size: 16px; }
.hint { margin: 2px 0; font-size: 15px; line-height: 1.45; color: var(--dim); }
.hint b { color: var(--acc2); }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 17px; }
.center-row { justify-content: center; }
.score { font-size: 26px; margin: 0; }
.score b, .earned b { color: var(--acc2); }
.earned { margin: 0; font-size: 22px; display: flex; align-items: center; justify-content: center; gap: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 16px; text-align: left; }
th, td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
th { color: var(--acc2); }
ul { margin: 4px 0; padding-left: 20px; text-align: left; font-size: 16px; line-height: 1.5; color: #cfd9cc; }

/* ---------- buttons and inputs ---------- */
.btn, .nav-btn, button {
  font: 700 17px Rajdhani, system-ui, sans-serif; letter-spacing: .12em; color: var(--text); cursor: pointer;
  padding: 12px 18px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(40, 50, 56, .85);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background .12s, transform .08s;
}
button:hover, button:focus-visible { background: rgba(70, 86, 94, .95); outline: none; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: default; }
.btn.primary { background: linear-gradient(180deg, #ff9a3c, #d96a14); color: #1a0d02; border-color: #ffc27a; }
.btn.primary:hover, .btn.primary:focus-visible { background: linear-gradient(180deg, #ffb066, #ea7a20); }
.btn.ghost { background: rgba(255, 255, 255, .04); }
.btn.small { padding: 7px 12px; font-size: 14px; }
.btn.on { background: rgba(255, 154, 60, .45); border-color: var(--acc); }
.btn.google { display: flex; align-items: center; justify-content: center; gap: 12px; background: #f4f4f4; color: #1f1f1f; border-color: #fff; font-size: 18px; padding: 14px; }
.btn.google:hover, .btn.google:focus-visible { background: #fff; }
.btn.google .g { font: 700 24px Arial, sans-serif; color: #4285f4; }
input {
  flex: 1; min-width: 120px; font: 700 18px Rajdhani, system-ui, sans-serif; letter-spacing: .06em; color: #fff;
  padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .45); outline: none;
  -webkit-user-select: text; user-select: text;
}
input:focus { border-color: var(--acc); }
.code { font-size: 24px; letter-spacing: .25em; color: var(--acc2); -webkit-user-select: text; user-select: text; }

/* ---------- home ---------- */
.overlay.home { flex-direction: column; padding: 0; background: linear-gradient(90deg, rgba(3, 5, 6, .9) 0%, rgba(3, 5, 6, .55) 45%, rgba(3, 5, 6, .15) 100%); }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px;
  padding-left: calc(22px + env(safe-area-inset-left)); padding-right: calc(22px + env(safe-area-inset-right));
  background: linear-gradient(180deg, rgba(0, 0, 0, .6), transparent); box-sizing: border-box; width: 100%;
}
.chips { display: flex; gap: 10px; align-items: center; }
.chip {
  display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 17px; letter-spacing: .06em;
  background: rgba(0, 0, 0, .55); border: 1px solid var(--line);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.chip.big { font-size: 24px; padding: 8px 18px; }
.chip.profile { cursor: pointer; text-transform: none; }
.chip .gear { font-style: normal; color: var(--dim); }
.avatar { width: 26px; height: 26px; border-radius: 50%; }
.coin { width: 18px; height: 18px; border-radius: 50%; display: inline-block; background: radial-gradient(circle at 35% 35%, #fff3b0, #ffd23c 45%, #b98a10); box-shadow: 0 0 0 2px #6b4a08; }
.chip.big .coin { width: 24px; height: 24px; }
.home-body { flex: 1; display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: 24px; padding: 8px 28px 24px; box-sizing: border-box; width: 100%; min-height: 0; padding-left: calc(28px + env(safe-area-inset-left)); }
.nav { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.nav-btn { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 14px 20px; background: rgba(14, 18, 22, .82); border-left: 4px solid rgba(255, 255, 255, .15); }
.nav-btn b { font: 400 26px var(--head); letter-spacing: .06em; }
.nav-btn small { font-size: 13px; letter-spacing: .14em; color: var(--dim); text-transform: uppercase; }
.nav-btn.primary { border-left-color: var(--acc); background: linear-gradient(90deg, rgba(255, 140, 40, .32), rgba(14, 18, 22, .85)); }
.nav-btn:hover, .nav-btn:focus-visible { border-left-color: var(--acc); background: rgba(40, 46, 52, .92); }
.nav-row { display: flex; gap: 10px; }
.nav-btn.small { flex: 1; align-items: center; font-size: 14px; padding: 10px; border-left: none; }
.best-line { color: var(--dim); font-size: 15px; letter-spacing: .1em; }
.best-line b { color: var(--acc2); }
.invites { display: flex; flex-direction: column; gap: 6px; }
.invite { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(255, 154, 60, .18); border: 1px solid rgba(255, 154, 60, .6); font-size: 15px; }
.invite span { flex: 1; }

.showcase { display: flex; align-items: center; justify-content: center; gap: 24px; min-height: 0; }
.showcase .hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.showcase .hero img { width: min(34vh, 320px); aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .6)); }
.showcase .hero .name { font: 400 clamp(34px, 6vh, 58px) var(--head); color: var(--c); letter-spacing: .06em; text-shadow: 0 4px 0 rgba(0, 0, 0, .6); }
.showcase .hero .role { letter-spacing: .3em; text-transform: uppercase; color: var(--dim); font-size: 15px; }
.showcase .info { max-width: 360px; display: flex; flex-direction: column; gap: 10px; background: rgba(0, 0, 0, .5); padding: 16px; border-left: 4px solid var(--c); }
.showcase .info .ab { display: flex; gap: 12px; align-items: center; }
.showcase .info .ab img { width: 54px; height: 54px; image-rendering: pixelated; }
.showcase .info .ab b { color: var(--acc2); font-size: 20px; }
.showcase .stats { display: flex; gap: 14px; font-size: 16px; color: #cfd9cc; }
.showcase .arrow { font-size: 26px; padding: 10px 16px; }
.showcase .fav { font-size: 13px; letter-spacing: .2em; color: var(--dim); text-transform: uppercase; }

/* ---------- slots, lists ---------- */
.slots, .list { display: flex; flex-direction: column; gap: 6px; font-size: 17px; }
.list i { color: #8a998a; }
.slot { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: rgba(255, 255, 255, .06); border-left: 5px solid var(--c); font-size: 17px; }
.slot b { color: var(--c); font-size: 20px; min-width: 34px; }
.slot .grow { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot button { font-size: 13px; padding: 5px 10px; }
.slot.empty { border-left-color: rgba(255, 255, 255, .15); color: #7f8f80; background: rgba(255, 255, 255, .03); }
.slot.empty b { color: #7f8f80; }
.slot img.face { width: 38px; height: 38px; image-rendering: pixelated; }
.slot .nm { color: var(--c); font-size: 17px; }
.item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(255, 255, 255, .06); }
.item .grow { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item button { font-size: 13px; padding: 5px 10px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #55645a; flex: none; }
.dot.on { background: var(--good); box-shadow: 0 0 8px var(--good); }
.best { color: var(--acc2); font-size: 15px; }

/* ---------- agent select ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.card-a, .cards .agent {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 10px; letter-spacing: .04em;
  border: 2px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .4);
}
.cards .agent img { width: 100%; max-width: 140px; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; }
.cards .agent b { font: 400 22px var(--head); color: var(--c); letter-spacing: .06em; }
.cards .agent small { font-size: 12px; letter-spacing: .16em; color: var(--dim); text-transform: uppercase; }
.cards .agent.look { border-color: var(--c); box-shadow: inset 0 0 22px -6px var(--c); }
.cards .agent.taken { opacity: .45; }
.cards .agent.taken img { filter: grayscale(1); }
.cards .agent .marks { position: absolute; top: 6px; right: 6px; display: flex; gap: 3px; }
.cards .agent .marks i { width: 18px; height: 18px; border-radius: 50%; font: 700 12px/18px sans-serif; color: #000; font-style: normal; }
.agent-info { display: flex; align-items: center; gap: 14px; text-align: left; font-size: 17px; min-height: 64px; padding: 10px 14px; background: rgba(255, 255, 255, .05); border-left: 4px solid var(--acc); }
.agent-info img { width: 58px; height: 58px; image-rendering: pixelated; }
.agent-info .ab { color: var(--acc2); font-weight: 700; }
.picks { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pick { padding: 6px 12px; border-left: 5px solid var(--c); background: rgba(255, 255, 255, .06); font-size: 16px; }
.pick b { color: var(--c); }
.mini-cards { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.mini { display: flex; flex-direction: column; align-items: center; width: 92px; padding: 6px; border: 2px solid rgba(255, 255, 255, .15); }
.mini img { width: 64px; height: 64px; image-rendering: pixelated; }
.mini span { font-size: 14px; color: var(--c); }
.mini.on { border-color: var(--c); box-shadow: inset 0 0 16px -6px var(--c); }

/* ---------- shop ---------- */
.shop-head { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; text-align: left; }
.shop-item { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-top: 3px solid var(--c, var(--acc)); }
.shop-item .top { display: flex; gap: 10px; align-items: center; }
.shop-item .icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 28px; background: rgba(0, 0, 0, .4); flex: none; }
.shop-item .icon img { width: 40px; height: 40px; image-rendering: pixelated; }
.shop-item b { font-size: 19px; letter-spacing: .04em; }
.shop-item .kind { font-size: 12px; letter-spacing: .18em; color: var(--dim); text-transform: uppercase; }
.shop-item p { margin: 0; font-size: 15px; color: #cfd9cc; flex: 1; }
.shop-item .price { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 18px; color: var(--acc2); }
.shop-item.owned { border-top-color: var(--good); }
.shop-item .owned-tag { color: var(--good); font-weight: 700; letter-spacing: .14em; }

/* ---------- settings ---------- */
.set-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.set-row > span { flex: 1; color: var(--dim); letter-spacing: .06em; }
.set-row > b { color: var(--acc2); }
.seg { display: flex; gap: 4px; }

/* ---------- toast ---------- */
#toast {
  position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 40; padding: 12px 22px;
  background: rgba(12, 16, 20, .96); border: 1px solid var(--acc); font-size: 18px; font-weight: 700; letter-spacing: .04em;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* ---------- admin drawer ---------- */
#admin {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100%); z-index: 30; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(20, 10, 12, .97), rgba(10, 8, 10, .97)); border-left: 3px solid #ff4a5a; font-size: 16px;
  box-shadow: -20px 0 40px rgba(0, 0, 0, .5);
}
.admin-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.admin-title { flex: 1; display: flex; flex-direction: column; }
.admin-title b { font: 400 26px var(--head); color: #ff6a7a; letter-spacing: .12em; }
.admin-title small { color: var(--dim); font-size: 13px; }
.admin-tabs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 0 10px 10px; border-bottom: 1px solid var(--line); }
.admin-tabs button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; font-size: 18px; letter-spacing: 0; }
.admin-tabs button span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.admin-tabs button.on, #admin .btn.on { background: rgba(255, 74, 90, .4); border-color: #ff7a8a; }
#admin-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.admin-foot { padding: 8px 12px; font-size: 12px; color: #ff9aa6; border-top: 1px solid var(--line); }
.admin-tip { margin: 0; color: var(--dim); font-size: 14px; }
.admin-sec { font-size: 13px; letter-spacing: .2em; color: #ff9aa6; text-transform: uppercase; margin-top: 4px; }
.admin-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-row > b { flex: 1; }
.admin-row input { min-width: 60px; padding: 6px 8px; font-size: 15px; }
.admin-card { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-left: 5px solid var(--c); background: rgba(255, 255, 255, .06); flex-wrap: wrap; }
.admin-card > img { width: 54px; height: 54px; image-rendering: pixelated; }
.admin-card .grow { flex: 1; min-width: 140px; }
.admin-card .btns { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
.admin-card .btns button { font-size: 12px; padding: 6px 9px; }
.admin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.admin-grid.wide { grid-template-columns: 1fr 1fr; }
.admin-grid .tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; font-size: 13px; }
.admin-grid .tile img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.noimg { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; opacity: .4; }
.admin-shop { display: grid; grid-template-columns: 1fr 70px auto; gap: 6px; align-items: center; padding: 8px; background: rgba(255, 255, 255, .05); }
.admin-shop input { padding: 6px 8px; font-size: 14px; min-width: 0; }
.admin-shop textarea { grid-column: 1 / -1; font: 600 14px Rajdhani, sans-serif; background: rgba(0, 0, 0, .4); color: #fff; border: 1px solid var(--line); padding: 6px; resize: vertical; }

/* ---------- touch controls ---------- */
#touch { position: fixed; inset: 0; z-index: 5; pointer-events: auto; touch-action: none; --ts: 1; }
#stick { position: absolute; width: calc(150px * var(--ts)); height: calc(150px * var(--ts)); margin: calc(-75px * var(--ts)) 0 0 calc(-75px * var(--ts));
  left: calc(120px + env(safe-area-inset-left)); top: 72%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .22);
  background: radial-gradient(circle, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); opacity: .45; pointer-events: none; }
#stick.on { opacity: 1; }
#knob { position: absolute; left: 50%; top: 50%; width: 44%; height: 44%; margin: -22% 0 0 -22%; border-radius: 50%; background: rgba(255, 255, 255, .35); border: 2px solid rgba(255, 255, 255, .6); }
#dpad { display: none; position: absolute; pointer-events: none; width: calc(186px * var(--ts)); height: calc(186px * var(--ts));
  left: calc(22px + env(safe-area-inset-left)); bottom: calc(22px + env(safe-area-inset-bottom)); }
#touch.dpad-mode #dpad { display: block; }
#touch.dpad-mode #stick { display: none; }
#dpad .dp { position: absolute; width: 33.4%; height: 33.4%; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255, 255, 255, .28); background: rgba(16, 20, 26, .5); color: rgba(255, 255, 255, .85); font: 700 calc(22px * var(--ts)) system-ui, sans-serif; }
#dpad .up { left: 33.3%; top: 0; } #dpad .down { left: 33.3%; bottom: 0; } #dpad .left { left: 0; top: 33.3%; } #dpad .right { right: 0; top: 33.3%; }
#dpad .dp.on { background: rgba(255, 154, 60, .45); border-color: rgba(255, 154, 60, .95); }
#btns .tb { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, .3); background: rgba(16, 20, 26, .38); color: rgba(255, 255, 255, .9);
  font: 700 calc(15px * var(--ts)) Rajdhani, system-ui, sans-serif; letter-spacing: .06em; pointer-events: none; }
#btns .tb.on { background: rgba(255, 154, 60, .5); border-color: rgba(255, 154, 60, .95); transform: scale(.94); }
#b-shoot { width: calc(110px * var(--ts)); height: calc(110px * var(--ts)); right: calc(150px * var(--ts) + env(safe-area-inset-right)); bottom: calc(34px + env(safe-area-inset-bottom)); }
#b-jump { width: calc(100px * var(--ts)); height: calc(100px * var(--ts)); right: calc(26px + env(safe-area-inset-right)); bottom: calc(100px * var(--ts) + env(safe-area-inset-bottom)); }
#b-ability { width: calc(82px * var(--ts)); height: calc(82px * var(--ts)); right: calc(180px * var(--ts) + env(safe-area-inset-right)); bottom: calc(160px * var(--ts) + env(safe-area-inset-bottom));
  --cd: 0; background: conic-gradient(rgba(0, 0, 0, .7) calc(var(--cd) * 360deg), rgba(90, 160, 255, .35) 0); border-color: rgba(140, 190, 255, .7); }
#b-pause { position: absolute; width: 46px; height: 46px; padding: 0; left: calc(10px + env(safe-area-inset-left)); margin-left: 0; top: 36%; border-radius: 50%; clip-path: none; background: rgba(16, 20, 26, .55); }

#rotate {
  display: none; position: fixed; inset: 0; z-index: 50; background: var(--bg); color: #cfd9cc; gap: 18px; padding: 24px; box-sizing: border-box;
  font: 700 22px Rajdhani, system-ui, sans-serif; text-align: center; align-items: center; justify-content: center; flex-direction: column; line-height: 1.6;
}
#rotate .turn { font-size: 64px; line-height: 1; }
#rotate small { font-size: 15px; font-weight: 600; opacity: .7; max-width: 300px; }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }

/* ---------- small and short screens (phones sideways) ---------- */
@media (max-height: 560px), (max-width: 760px) {
  .overlay { padding: 8px; }
  .card { padding: 14px 16px; gap: 8px; }
  h2 { font-size: 24px; }
  .btn, button { padding: 8px 12px; font-size: 15px; }
  .topbar { padding: 8px 14px; }
  .logo.small { font-size: 22px; }
  .home-body { grid-template-columns: minmax(230px, 300px) 1fr; padding: 4px 14px 10px; gap: 14px; }
  .nav { gap: 6px; }
  .nav-btn { padding: 8px 14px; }
  .nav-btn b { font-size: 19px; }
  .nav-btn small { display: none; }
  .showcase { gap: 12px; }
  .showcase .hero img { width: 26vh; }
  .showcase .info { padding: 10px; font-size: 14px; }
  .showcase .info .ab img { width: 38px; height: 38px; }
  .cards { grid-template-columns: repeat(7, 1fr); gap: 5px; }
  .cards .agent { padding: 4px; }
  .cards .agent b { font-size: 14px; }
  .cards .agent small { display: none; }
  .agent-info { font-size: 13px; min-height: 0; padding: 6px 10px; }
  .agent-info img { width: 36px; height: 36px; }
  .slot { padding: 5px 10px; font-size: 15px; }
  ul, table { font-size: 14px; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
}
@media (max-width: 560px) {
  .home-body { grid-template-columns: 1fr; }
  .showcase { display: none; }
}
.admin-shop select { font: 600 14px Rajdhani, sans-serif; background: rgba(0, 0, 0, .45); color: #fff; border: 1px solid var(--line); padding: 5px; }
/* home showcase: the agent with arrows either side, the ability card beside it (or under it when narrow) */
.overlay.home { overflow-x: hidden; }
.showcase { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "prev hero next" "info info info"; align-items: center; justify-items: center; gap: 10px 14px; align-content: center; }
.showcase [data-act="show-prev"] { grid-area: prev; }
.showcase [data-act="show-next"] { grid-area: next; }
.showcase .hero { grid-area: hero; }
.showcase .info { grid-area: info; width: min(520px, 100%); max-width: none; box-sizing: border-box; }
@media (min-width: 1250px) {
  .showcase { grid-template-columns: auto auto minmax(260px, 380px) auto; grid-template-areas: "prev hero info next"; }
}
@media (max-height: 560px) and (min-width: 600px) {
  .showcase { grid-template-columns: auto auto minmax(180px, 1fr) auto; grid-template-areas: "prev hero info next"; gap: 8px; }
  .showcase .hero img { width: 30vh; }
  .showcase .hero .name { font-size: 26px; }
  .showcase .hero .role, .showcase .fav { font-size: 11px; letter-spacing: .16em; }
  .showcase .info { font-size: 13px; gap: 6px; }
  .showcase .arrow { padding: 8px 10px; font-size: 18px; }
}

/* ---------- bars (health / speed) ---------- */
.stat-rows { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 10px; font-size: 12px; letter-spacing: .18em; color: var(--dim); }
.stat-rows b { color: var(--text); font-size: 14px; letter-spacing: .04em; }
.info .stat-rows, .agent-card .stat-rows { grid-template-columns: auto 1fr; }
.bar { height: 8px; background: rgba(255, 255, 255, .1); position: relative; overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--c, var(--acc)), #fff8); }
.showcase .hero.locked img { filter: grayscale(.9) brightness(.55); }

/* ---------- agent select (full screen) ---------- */
.overlay.select-screen { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 12px; padding: 14px 22px 10px;
  background: radial-gradient(ellipse at 30% 40%, rgba(30, 36, 44, .55), rgba(3, 5, 6, .9)); }
.sel-top { display: flex; align-items: center; gap: 16px; }
.sel-top h2 { margin: 0; flex: none; }
.sel-top .picks { flex: 1; justify-content: flex-end; }
.pick { display: flex; flex-direction: column; min-width: 90px; padding: 5px 12px; border-left: 4px solid var(--c); background: rgba(0, 0, 0, .45); font-size: 13px; letter-spacing: .1em; }
.pick b { color: var(--c); font-size: 15px; }
.pick span { color: var(--dim); }
.pick.done span { color: var(--good); }
.sel-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 1fr); gap: 26px; align-items: center; }
.sel-hero { position: relative; height: 100%; min-height: 160px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--c) 45%, transparent), transparent 62%); }
.sel-hero img { max-height: 100%; max-width: 100%; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .7)); animation: selIn .35s ease-out; }
.sel-hero.locked img { filter: grayscale(.95) brightness(.45) drop-shadow(0 18px 24px rgba(0, 0, 0, .7)); }
.lock-badge { position: absolute; font-size: 64px; filter: drop-shadow(0 4px 8px #000); }
@keyframes selIn { from { opacity: 0; transform: translateX(-24px) scale(.96); } to { opacity: 1; transform: none; } }
.sel-info { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; background: rgba(0, 0, 0, .55); border-left: 5px solid var(--c); text-align: left; }
.sel-name { font: 400 clamp(40px, 7vh, 76px) var(--head); color: var(--c); letter-spacing: .06em; line-height: 1; text-shadow: 0 4px 0 rgba(0, 0, 0, .6); }
.sel-role { letter-spacing: .32em; text-transform: uppercase; color: var(--dim); font-size: 15px; margin-top: -6px; }
.sel-ab { display: flex; gap: 14px; align-items: flex-start; padding: 10px; background: rgba(255, 255, 255, .05); }
.sel-ab img { width: 60px; height: 60px; image-rendering: pixelated; flex: none; }
.sel-ab small { display: block; font-size: 11px; letter-spacing: .24em; color: var(--dim); }
.sel-ab b { font-size: 21px; color: var(--acc2); }
.sel-ab p { margin: 2px 0 0; font-size: 15px; color: #cfd9cc; line-height: 1.35; }
.big-btn { font-size: 20px; padding: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.sel-note, .sel-wait { font-size: 13px; letter-spacing: .14em; color: var(--dim); text-transform: uppercase; text-align: center; }
.sel-wait { color: var(--good); font-size: 16px; padding: 12px; }
.sel-tiles { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.sel-tiles .tile { position: relative; width: 112px; padding: 6px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(0, 0, 0, .5); border: 2px solid rgba(255, 255, 255, .12); border-bottom: 3px solid var(--c); letter-spacing: .06em; }
.sel-tiles .tile img { width: 78px; height: 78px; object-fit: contain; image-rendering: pixelated; }
.sel-tiles .tile b { font: 400 16px var(--head); color: var(--c); }
.sel-tiles .tile.look { border-color: var(--c); background: color-mix(in srgb, var(--c) 22%, rgba(0, 0, 0, .6)); transform: translateY(-4px); }
.sel-tiles .tile.locked img { filter: grayscale(1) brightness(.5); }
.sel-tiles .tile.taken { opacity: .4; }
.sel-tiles .tile .price { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--acc2); }
.sel-tiles .tile .price .coin { width: 12px; height: 12px; }
.sel-tiles .tile .marks { position: absolute; top: 4px; right: 4px; display: flex; gap: 2px; }
.sel-tiles .tile .marks i { width: 16px; height: 16px; border-radius: 50%; font: 700 11px/16px sans-serif; color: #000; font-style: normal; }
.sel-hint { font-size: 13px; }
.mini.locked img { filter: grayscale(1) brightness(.5); }

/* ---------- shop: agents ---------- */
.shop-tabs { display: flex; gap: 6px; }
.shop-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; text-align: left; }
.agent-card { display: flex; gap: 12px; padding: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-top: 3px solid var(--c); }
.agent-card .ac-art { width: 110px; flex: none; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, color-mix(in srgb, var(--c) 35%, transparent), transparent 70%); }
.agent-card .ac-art img { width: 110px; height: 110px; object-fit: contain; image-rendering: pixelated; }
.agent-card:not(.owned) .ac-art img { filter: grayscale(.85) brightness(.6); }
.agent-card .ac-body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.agent-card .ac-name { font: 400 26px var(--head); color: var(--c); letter-spacing: .06em; line-height: 1; }
.agent-card .ac-role { font-size: 12px; letter-spacing: .24em; color: var(--dim); text-transform: uppercase; }
.agent-card .ac-ab { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #cfd9cc; }
.agent-card .ac-ab img { width: 34px; height: 34px; image-rendering: pixelated; flex: none; }
.agent-card .ac-ab b { color: var(--acc2); }
.agent-card .price { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 18px; color: var(--acc2); }

@media (max-height: 560px), (max-width: 760px) {
  .overlay.select-screen { padding: 8px 12px 6px; gap: 6px; }
  .sel-top h2 { font-size: 20px; }
  .pick { min-width: 60px; padding: 3px 8px; font-size: 11px; }
  .pick b { font-size: 12px; }
  .sel-main { grid-template-columns: minmax(0, .8fr) minmax(250px, 1.2fr); gap: 12px; }
  .sel-info { padding: 10px 12px; gap: 6px; }
  .sel-name { font-size: 32px; }
  .sel-role { font-size: 11px; }
  .sel-ab img { width: 40px; height: 40px; }
  .sel-ab b { font-size: 16px; }
  .sel-ab p { font-size: 12px; }
  .big-btn { font-size: 15px; padding: 8px; }
  .sel-tiles .tile { width: 74px; padding: 3px 2px 4px; }
  .sel-tiles .tile img { width: 46px; height: 46px; }
  .sel-tiles .tile b { font-size: 12px; }
  .sel-hint { display: none; }
  .shop-agents { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .agent-card .ac-art, .agent-card .ac-art img { width: 70px; height: 70px; }
}

#admin .tile.admin-only { grid-column: 1 / -1; flex-direction: row; gap: 14px; justify-content: flex-start; padding: 12px 16px; border-color: #ffd23c; background: linear-gradient(90deg, rgba(255, 210, 60, .25), rgba(40, 20, 10, .8)); }
#admin .tile.admin-only span { font-size: 14px; color: #ffe98a; text-align: left; }
#b-dash { width: calc(70px * var(--ts)); height: calc(70px * var(--ts)); right: calc(36px + env(safe-area-inset-right)); bottom: calc(215px * var(--ts) + env(safe-area-inset-bottom)); border-color: rgba(120, 255, 170, .7); }

/* phones: the SKILL button is the ability icon with its cooldown */
#b-ability.has-icon { width: calc(104px * var(--ts)); height: calc(104px * var(--ts)); background-size: cover, 84%; background-position: center; background-repeat: no-repeat;
  background-color: rgba(10, 13, 16, .7); font: 700 calc(34px * var(--ts)) Rajdhani, sans-serif; text-shadow: 0 2px 4px #000; border-width: 3px;
  right: calc(170px * var(--ts) + env(safe-area-inset-right)); bottom: calc(150px * var(--ts) + env(safe-area-inset-bottom)); image-rendering: pixelated; }
#b-ability.has-icon.ready { box-shadow: 0 0 18px 2px rgba(255, 210, 60, .65); }
#b-dash { --cd: 0; background: conic-gradient(rgba(0, 0, 0, .7) calc(var(--cd) * 360deg), rgba(120, 255, 170, .25) 0); }

.mode-seg { display: flex; gap: 6px; }
.mode-seg .btn { font-size: 15px; padding: 9px 14px; }

/* ================= touch controls, final layout =================
   Left: the D-pad (default) or joystick appears under the thumb.
   Right: an even cluster — FIRE (big, orange), JUMP (blue), SKILL (the ability icon), DASH (green). */
#dpad { display: none; position: absolute; pointer-events: none; width: calc(170px * var(--ts)); height: calc(170px * var(--ts));
  left: calc(26px + env(safe-area-inset-left)); bottom: calc(26px + env(safe-area-inset-bottom)); top: auto;
  border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03) 70%); border: 2px solid rgba(255, 255, 255, .16);
  opacity: .55; transition: opacity .12s; }
#dpad.on { opacity: 1; }
#touch.dpad-mode #dpad { display: block; }
#dpad .dp { position: absolute; width: 34%; height: 34%; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .35); background: rgba(20, 26, 34, .65);
  color: rgba(255, 255, 255, .9); font: 700 calc(20px * var(--ts)) system-ui, sans-serif; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
#dpad .up { left: 33%; top: 2%; } #dpad .down { left: 33%; bottom: 2%; } #dpad .left { left: 2%; top: 33%; } #dpad .right { right: 2%; top: 33%; }
#dpad .dp.on { background: rgba(255, 154, 60, .75); border-color: #ffd39a; color: #1a0d02; }

#btns .tb { border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; box-sizing: border-box;
  font: 800 calc(16px * var(--ts)) Rajdhani, system-ui, sans-serif; letter-spacing: .08em; color: #fff; text-shadow: 0 2px 3px rgba(0, 0, 0, .7);
  border: 3px solid var(--bc); background: radial-gradient(circle at 50% 35%, var(--b1), var(--b2)); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .3); opacity: .9; }
#btns .tb.on { transform: scale(.92); filter: brightness(1.35); opacity: 1; }
#b-shoot { --bc: #ffb066; --b1: rgba(255, 120, 50, .75); --b2: rgba(140, 40, 10, .7);
  width: calc(118px * var(--ts)); height: calc(118px * var(--ts)); right: calc(150px * var(--ts) + env(safe-area-inset-right)); bottom: calc(24px * var(--ts) + env(safe-area-inset-bottom)); font-size: calc(19px * var(--ts)); }
#b-jump { --bc: #8ac8ff; --b1: rgba(70, 150, 255, .7); --b2: rgba(20, 50, 120, .7);
  width: calc(100px * var(--ts)); height: calc(100px * var(--ts)); right: calc(28px * var(--ts) + env(safe-area-inset-right)); bottom: calc(34px * var(--ts) + env(safe-area-inset-bottom)); }
#b-dash { --bc: #8affb8; --b1: rgba(60, 220, 130, .65); --b2: rgba(10, 90, 50, .7);
  width: calc(78px * var(--ts)); height: calc(78px * var(--ts)); right: calc(36px * var(--ts) + env(safe-area-inset-right)); bottom: calc(156px * var(--ts) + env(safe-area-inset-bottom));
  background: conic-gradient(rgba(0, 0, 0, .7) calc(var(--cd) * 360deg), transparent 0), radial-gradient(circle at 50% 35%, var(--b1), var(--b2)); }
#b-ability, #b-ability.has-icon { --bc: #c9a8ff; --b1: rgba(80, 60, 120, .75); --b2: rgba(20, 14, 34, .8);
  width: calc(96px * var(--ts)); height: calc(96px * var(--ts)); right: calc(146px * var(--ts) + env(safe-area-inset-right)); bottom: calc(160px * var(--ts) + env(safe-area-inset-bottom)); }
#b-ability.has-icon { background-color: rgba(10, 13, 16, .8); font-size: calc(32px * var(--ts)); }
#b-ability.has-icon { background-size: 100% 100%, 86% 86% !important; background-position: center, center !important; background-repeat: no-repeat, no-repeat !important; }

/* ---------- home: the squad standing together (Fortnite style lobby) ---------- */
.home-body { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) minmax(210px, 270px); }
.stage { display: flex; align-items: flex-end; justify-content: center; min-height: 0; min-width: 0; padding-bottom: 3vh; }
.fig { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; --h: 38vh; }
.fig.me { --h: 50vh; flex-grow: 1.35; z-index: 2; }
.fig .tag { margin-bottom: 8px; padding: 4px 12px 5px; text-align: center; background: rgba(0, 0, 0, .6); border-bottom: 3px solid var(--c);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); max-width: 150%; box-sizing: border-box; position: relative; z-index: 3; }
.fig .tag b { display: block; font: 400 20px var(--head); letter-spacing: .04em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fig .tag small { display: block; color: var(--c); letter-spacing: .22em; font-size: 12px; font-weight: 700; white-space: nowrap; }
.fig.me .tag b { font-size: 26px; }
.fig .body { height: var(--h); width: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; z-index: 1; }
.fig .body.flip { transform: scaleX(-1); }
.fig.me .body { cursor: pointer; }
.fig .body img { height: var(--h); width: 220%; flex: none; object-fit: contain; object-position: 50% 100%; image-rendering: pixelated; transform-origin: 50% 100%;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .65)); animation: figIdle 2.8s ease-in-out infinite; }
.fig:nth-child(2n) .body img { animation-delay: -1.1s; }
/* your own agent on hover: the same 1-px white outline as the locker (rule further down), no glow */
@keyframes figIdle { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.02); } }
.fig .pad { width: 86%; height: 26px; margin-top: -14px; border-radius: 50%; opacity: .75;
  background: radial-gradient(ellipse at center, var(--c) 0%, transparent 70%); box-shadow: 0 0 34px -6px var(--c); }
.fig.me .pad { opacity: 1; }
.fig .change { margin-top: 10px; font-size: 13px; padding: 7px 14px; }
.fig .x { position: absolute; top: 0; right: 6px; font-size: 13px; padding: 3px 9px; z-index: 3; }
.fig.empty { --c: #4f5e55; }
.fig.empty .slot-in { height: var(--h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.fig.empty .plus { width: 72px; height: 72px; padding: 0; font-size: 38px; line-height: 1; border-radius: 50%; clip-path: none; color: var(--dim);
  border: 2px dashed rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .4); }
.fig.empty .plus:hover { color: #fff; border-color: var(--acc); }
.fig.empty small { letter-spacing: .25em; color: var(--dim); font-size: 12px; }
.fig.empty .btn { font-size: 13px; padding: 6px 12px; }
.play-dock { position: relative; z-index: 4; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding-bottom: 8px; padding-right: env(safe-area-inset-right); min-width: 0; }
.play-dock .mode-seg { display: flex; flex-direction: column; gap: 6px; }
.play-dock .mode-seg .btn { text-align: left; font-size: 15px; }
.dock-status { font-size: 14px; color: var(--dim); letter-spacing: .04em; line-height: 1.3; min-height: 18px; }
.play-big { font: 400 42px var(--head); letter-spacing: .08em; padding: 16px 18px; color: #1a0f04; border: none;
  background: linear-gradient(180deg, #ffd86a, #ff9a3c 60%, #e2711c); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .25); }
.play-big:hover:not([disabled]) { filter: brightness(1.1); }
.play-big[disabled] { font-size: 24px; background: rgba(60, 66, 70, .9); color: var(--dim); box-shadow: none; }
.dock-row { display: flex; gap: 6px; }
.dock-row .btn { flex: 1; }
.home .msg { min-height: 0; }
.pop { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .6); }
.pop-card { width: min(420px, 92%); max-height: 80%; overflow: auto; box-sizing: border-box; padding: 18px; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: inset 0 3px 0 var(--acc); }
@media (max-height: 560px), (max-width: 760px) {
  .home-body { grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) minmax(140px, 180px); }
  .fig { --h: 30vh; } .fig.me { --h: 40vh; }
  .fig .tag { padding: 2px 6px 3px; margin-bottom: 4px; }
  .fig .tag b { font-size: 13px; } .fig.me .tag b { font-size: 16px; }
  .fig .tag small { font-size: 9px; letter-spacing: .12em; }
  .fig .change { font-size: 11px; padding: 4px 8px; margin-top: 4px; }
  .fig.empty .plus { width: 44px; height: 44px; font-size: 24px; }
  .fig.empty small { display: none; }
  .fig.empty .btn { font-size: 11px; padding: 4px 8px; }
  .play-big { font-size: 26px; padding: 10px; }
  .play-dock .mode-seg .btn { font-size: 12px; padding: 6px 8px; }
  .dock-status { font-size: 11px; }
  .dock-row .btn { font-size: 12px; padding: 6px 8px; }
}
@media (max-width: 560px) { .home-body { grid-template-columns: 1fr; } .stage { display: none; } }

/* ---------- local co-op: everyone's agent standing in a row ---------- */
#lobby .card.wide { width: min(1040px, 100%); }
.lineup { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.lfig { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 10px; text-align: center; min-height: 250px; box-sizing: border-box;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .4)); border-top: 3px solid var(--c); }
.lfig .lhead { align-self: stretch; display: flex; justify-content: space-between; align-items: center; }
.lfig .lhead b { color: var(--c); font: 400 18px var(--head); }
.lfig .x { font-size: 12px; padding: 2px 8px; }
.lfig .body { height: 150px; display: flex; align-items: flex-end; justify-content: center; }
.lfig .body img { height: 150px; width: auto; image-rendering: pixelated; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .6)); }
.lfig .lname { font: 400 18px var(--head); color: var(--ac); letter-spacing: .04em; }
.lfig .arrows { display: flex; gap: 6px; min-height: 30px; }
.lfig .arrows .btn { padding: 4px 12px; font-size: 14px; }
.lfig small { font-size: 11px; color: var(--dim); line-height: 1.25; }
.lfig.empty { justify-content: center; color: var(--dim); border-top-color: rgba(255, 255, 255, .15); }
.lfig.empty b { font: 400 22px var(--head); }
@media (max-height: 560px), (max-width: 760px) {
  .lfig { min-height: 0; padding: 4px; }
  .lfig .body, .lfig .body img { height: 80px; }
  .lfig small { display: none; }
}
/* the locker shows the whole agent */
.sel-hero img { aspect-ratio: auto; height: 100%; width: auto; }

.chip.install-btn { cursor: pointer; font: 700 15px Rajdhani, sans-serif; letter-spacing: .12em; color: #1a0f04; border: none;
  background: linear-gradient(180deg, #8affb8, #3ccf7a); }
.chip.install-btn:hover { filter: brightness(1.1); }
@media (max-height: 560px), (max-width: 760px) { .chip.install-btn { font-size: 12px; padding: 5px 9px; } }

/* home: the menu is a tab bar along the top, the squad gets the whole width */
.home .topbar { gap: 18px; }
.topnav { flex: 1; display: flex; gap: 2px; justify-content: center; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topnav::-webkit-scrollbar { display: none; }
.topnav button { flex: none; clip-path: none; border: none; background: none; padding: 10px 14px; font: 400 18px var(--head); letter-spacing: .08em;
  color: rgba(238, 242, 236, .62); border-bottom: 3px solid transparent; }
.topnav button:hover, .topnav button:focus-visible { color: #fff; background: rgba(255, 255, 255, .06); }
.topnav button.on { color: #fff; border-bottom-color: var(--acc); }
.home-body { grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); padding-left: calc(18px + env(safe-area-inset-left)); }
.stage { padding: 0 2vw 3vh; }
.fig { --h: 44vh; } .fig.me { --h: 58vh; }
.fig .body img { width: 240%; }
.play-dock .best-line { text-align: right; }
@media (max-height: 560px), (max-width: 760px) {
  .home .topbar { gap: 8px; }
  .topnav button { font-size: 12px; padding: 6px 7px; letter-spacing: .04em; }
  .home-body { grid-template-columns: minmax(0, 1fr) minmax(140px, 180px); }
  .fig { --h: 38vh; } .fig.me { --h: 52vh; }
  .play-dock .best-line { font-size: 11px; }
}
/* figures scale with the narrower of the two screen sides so a tall or narrow window does not pile them up */
.fig { --h: min(44vh, 21vw); } .fig.me { --h: min(58vh, 28vw); }
@media (max-width: 1100px) {
  .home .logo.small { display: none; }
  .topnav { justify-content: flex-start; }
  .topnav button { font-size: 14px; padding: 8px 9px; }
}
@media (max-height: 560px), (max-width: 760px) {
  .fig { --h: min(38vh, 17vw); } .fig.me { --h: min(52vh, 24vw); }
  .chip.install-btn { white-space: nowrap; }
}
@media (max-width: 1450px) {
  .home .logo.small { display: none; }
  .topnav { justify-content: flex-start; }
  .topnav button { font-size: 16px; padding: 8px 11px; }
}
.fig .tag { overflow: visible; clip-path: none; border-radius: 3px; }
.fig .tag .x { position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; padding: 0; font-size: 12px; line-height: 22px; border-radius: 50%; clip-path: none;
  border: none; background: #c0392b; color: #fff; z-index: 4; }
.fig .tag .x:hover { background: #ff5a4a; }

/* ---------- home: centred squad with room between them ---------- */
.stage { gap: 1.6vw; padding: 0 3vw 3vh; }
.fig { max-width: 19vw; }
.fig.me { max-width: 24vw; }
.fig.empty { flex-grow: .5; max-width: 11vw; }
.fig .body img { width: 165%; }
.fig.bot .body { cursor: pointer; }
.bot-pick { display: flex; gap: 6px; }
.bot-pick button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; width: 64px; clip-path: none; border: 2px solid var(--c); background: rgba(0, 0, 0, .55); font-size: 12px; }
.bot-pick button:hover { background: rgba(255, 255, 255, .12); }
.bot-pick img { width: 48px; height: 48px; image-rendering: pixelated; }
/* the mode button in the dock */
.mode-card { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 10px 14px; border-left: 4px solid var(--acc);
  background: linear-gradient(90deg, rgba(255, 140, 40, .22), rgba(10, 14, 18, .88)); }
.mode-card small { font-size: 11px; letter-spacing: .22em; color: var(--acc2); }
.mode-card b { font: 400 26px var(--head); letter-spacing: .05em; }
.mode-card span { font-size: 13px; color: var(--dim); letter-spacing: .04em; }
.mode-card:hover:not([disabled]) { filter: brightness(1.15); }
/* the mode picker */
.modes-pop { position: fixed; z-index: 40; background: rgba(2, 4, 6, .78); backdrop-filter: blur(3px); }
.modes-card { width: min(1180px, 96vw); max-height: 94vh; overflow: auto; box-sizing: border-box; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.modes-head { display: flex; align-items: center; justify-content: space-between; }
.modes-head h2 { text-align: left; }
.modes { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 14px; }
.mode-tile { position: relative; display: flex; flex-direction: column; min-height: 420px; background: #0b0f13; border: 2px solid rgba(255, 255, 255, .12); overflow: hidden;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.mode-tile.selected { border-color: var(--acc); box-shadow: inset 0 0 0 2px var(--acc); }
.mode-tile .mt-art { height: 150px; flex: none; background: var(--bg) center / cover no-repeat; image-rendering: pixelated; position: relative; }
.mode-tile .mt-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, #0b0f13); }
.mode-tile .mt-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; margin-top: -26px; position: relative; }
.mode-tile .mt-body > b { font: 400 40px var(--head); letter-spacing: .05em; text-shadow: 0 3px 0 #000; }
.mode-tile.story .mt-body > b { color: #7cff8a; } .mode-tile.duels .mt-body > b { color: #ff8a4a; } .mode-tile.custom .mt-body > b { color: #9ac8ff; }
.mode-tile p { margin: 0; color: #cfd9cc; font-size: 15px; line-height: 1.4; flex: 1; }
.mt-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mt-sizes .btn { font: 400 24px var(--head); padding: 12px 0; }
.cust { display: grid; grid-template-columns: auto 1fr; gap: 7px 10px; align-items: center; font-size: 12px; letter-spacing: .16em; color: var(--dim); flex: 1; }
.cust .seg { display: flex; gap: 4px; flex-wrap: wrap; }
.cust .seg button { flex: 1; padding: 6px 6px; font-size: 13px; letter-spacing: .06em; clip-path: none; }
.cust .seg button.on { background: rgba(255, 154, 60, .45); border-color: var(--acc); }
.lobby-mode { display: flex; align-items: center; gap: 10px; }
.lobby-mode span { font-size: 12px; letter-spacing: .2em; color: var(--dim); }
.lobby-mode b { font: 400 22px var(--head); color: var(--acc2); }
@media (max-height: 560px), (max-width: 860px) {
  .modes-card { padding: 10px; gap: 8px; }
  .modes { grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; }
  .mode-tile { min-height: 0; }
  .mode-tile .mt-art { height: 60px; }
  .mode-tile .mt-body { padding: 0 8px 8px; gap: 6px; margin-top: -14px; }
  .mode-tile .mt-body > b { font-size: 22px; }
  .mode-tile p { font-size: 11px; }
  .mt-sizes .btn { font-size: 16px; padding: 6px 0; }
  .cust { gap: 4px 6px; font-size: 9px; letter-spacing: .08em; }
  .cust .seg button { padding: 3px 4px; font-size: 10px; }
  .mode-card { padding: 6px 8px; } .mode-card b { font-size: 16px; } .mode-card small, .mode-card span { font-size: 9px; }
}
.fig.empty.picking { flex-grow: 1; max-width: none; z-index: 4; }
@media (max-height: 560px), (max-width: 760px) { .bot-pick button { width: 48px; font-size: 10px; } .bot-pick img { width: 34px; height: 34px; } }

/* ---------- idle loops (idle.png) and interface icons (ui_icons.png) ---------- */
.idle { position: relative; overflow: hidden; flex: none; }
.idle img { display: block; height: 100%; max-width: none; image-rendering: pixelated; animation: none !important; }
.fig .body .idle { height: var(--h); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .65)); }
.fig .body .idle img { height: 100%; object-fit: fill; filter: none; }
.lfig .body .idle { height: 150px; }
.lfig .body .idle img { height: 100%; filter: none; }
.sel-hero .idle { height: 100%; max-height: 100%; }
.sel-hero .idle img { height: 100%; max-height: none; aspect-ratio: auto; filter: none; }
@media (max-height: 560px), (max-width: 760px) { .lfig .body .idle { height: 80px; } }
.ico { width: 1.1em; height: 1.1em; object-fit: contain; vertical-align: -0.15em; margin-right: .3em; image-rendering: pixelated; }
.mode-tile .mt-body > b .ico { width: 1em; height: 1em; }
.topnav .ico { width: 1.1em; height: 1.1em; }
.fig.empty .plus .ico { width: 60%; height: 60%; margin: 0; }
.tb.ico { color: transparent !important; }
.tb.ico::before { content: ""; position: absolute; inset: 20%; background: var(--ico) center / contain no-repeat; image-rendering: pixelated; }

/* your own figure: click it to change agent — a ring circles under you, the label shows over you on hover */
.fig.me .body { position: relative; }
.fig .pad.ring { position: relative; cursor: pointer; overflow: visible; }
.fig .pad.ring svg { position: absolute; inset: -8px -6%; width: 112%; height: calc(100% + 16px); overflow: visible; }
.fig .pad.ring ellipse { fill: none; stroke: var(--c); stroke-width: 2.5; stroke-dasharray: 9 6; vector-effect: non-scaling-stroke; animation: ringRun 1.6s linear infinite; }
@keyframes ringRun { to { stroke-dashoffset: -30; } }
.fig.me .change-hint { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none;
  font: 400 18px var(--head); letter-spacing: .08em; padding: 6px 12px; background: rgba(0, 0, 0, .7); border: 2px solid var(--c);
  opacity: 0; transition: opacity .15s; white-space: nowrap; }
.fig.me:hover .change-hint { opacity: 1; }
.dock-status:empty { display: none; }
@media (hover: none) { .fig.me .change-hint { opacity: .85; top: auto; bottom: 30px; font-size: 11px; padding: 3px 7px; } }

/* ui_icons.png in */
.ui-icons .coin { background: var(--coin-img) center / contain no-repeat; box-shadow: none; border-radius: 0; image-rendering: pixelated; }
#b-pause.ico-btn::before { content: ""; position: absolute; inset: 24%; background: var(--ico) center / contain no-repeat; image-rendering: pixelated; }
.mode-card b .ico { width: .9em; height: .9em; }
.best-line .ico { width: 1.2em; height: 1.2em; }

/* ---------- home layouts: B = CARDS, C = COMMAND (A = the lineup above) ---------- */
#dock-extra:empty { display: none; }
.lobby-b .stage { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 14px; padding: 0 1vw 2vh; }
.cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2vw; align-items: end; }
.cslot { --ch: min(52vh, 27vw); height: var(--ch); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
  padding: 10px 6px 12px; box-sizing: border-box; border: 2px solid var(--c); text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(8, 10, 13, .92) 62%); }
.cslot.me { height: calc(var(--ch) * 1.1); border-width: 3px; box-shadow: 0 0 26px -6px var(--c); }
.cslot .cs-art { flex: 1; min-height: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; }
.cslot .cs-art > img { height: 100%; width: 100%; object-fit: contain; object-position: 50% 100%; image-rendering: pixelated; }
.cslot .cs-art .idle { height: 100%; }
.cslot b { font: 400 20px var(--head); letter-spacing: .03em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cslot small { font-size: 12px; letter-spacing: .16em; color: var(--c); font-weight: 700; }
.cslot .btn { font-size: 12px; padding: 5px 10px; }
.cslot .crown { position: absolute; top: 8px; left: 8px; }
.cslot .x { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; padding: 0; font-size: 12px; line-height: 22px; border-radius: 50%; clip-path: none; border: none; background: #c0392b; color: #fff; }
.cslot.empty { border: 2px dashed rgba(255, 255, 255, .22); background: rgba(8, 10, 13, .6); justify-content: center; gap: 8px; }
.cslot.empty .plus { width: 60px; height: 60px; padding: 0; border-radius: 50%; clip-path: none; border: 2px solid rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .5); font-size: 28px; }
.cslot.empty .plus .ico { width: 55%; height: 55%; margin: 0; }
.cslot.empty small { color: var(--dim); }

.lobby-c .stage { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 2vw; align-items: stretch; padding: 1vh 0 2vh; }
.dossier, .roster { background: rgba(6, 9, 12, .86); border: 1px solid var(--line); padding: 14px; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: auto; }
.kick { font-size: 11px; letter-spacing: .3em; color: var(--acc2); font-weight: 700; }
.dossier h4 { margin: 0; font: 400 26px var(--head); }
.dossier p { margin: 0; font-size: 14px; color: var(--dim); line-height: 1.35; }
.st-list { display: flex; flex-direction: column; gap: 5px; }
.st-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; font-weight: 700; font-size: 14px; color: #8a968c;
  background: rgba(255, 255, 255, .05); border-left: 3px solid rgba(255, 255, 255, .2); }
.st-row.done { background: rgba(92, 255, 138, .12); border-left-color: #5cff8a; color: var(--text); }
.st-row.done span:last-child { color: #5cff8a; }
.st-row.next { background: rgba(255, 154, 60, .22); border-left-color: var(--acc); color: var(--text); }
.st-row.next span:last-child { color: var(--acc2); }
.dossier .btn { margin-top: auto; display: flex; align-items: center; justify-content: center; }
.cmd-hero { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; text-align: center; }
.cmd-hero .nm { font: 400 clamp(30px, 7vh, 58px) var(--head); color: var(--c); line-height: 1; text-shadow: 0 4px 0 rgba(0, 0, 0, .6); }
.cmd-hero .role { letter-spacing: .24em; font-size: 13px; color: #cfd9cc; font-weight: 700; }
.cmd-hero .body { height: min(44vh, 24vw); display: flex; align-items: flex-end; justify-content: center; cursor: pointer; }
.cmd-hero .body > img { height: 100%; width: auto; image-rendering: pixelated; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .7)); }
.cmd-hero .body .idle { height: 100%; }
.cmd-hero .pad { width: min(320px, 60%); height: 26px; margin-top: -18px; border-radius: 50%; background: radial-gradient(ellipse at center, var(--c), transparent 70%); }
.lobby-c .play-dock { justify-content: flex-end; }
.roster { flex: 1; }
.roster .row-m { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.roster .row-m .grow { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster .row-m .ico { width: 20px; height: 20px; margin: 0; display: inline-block; }
.roster .row-m .swap { cursor: pointer; text-decoration: underline dotted; }
.roster .row-m .x { width: 20px; height: 20px; padding: 0; font-size: 11px; border-radius: 50%; clip-path: none; border: none; background: #c0392b; color: #fff; }
.roster .row-btns { display: flex; gap: 6px; }
.roster .row-btns .btn { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.roster .slot-in { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* ---------- the VS screen before a duel ---------- */
.overlay.vs-screen { display: block; padding: 0; background: #05070a; overflow: hidden; }
.vs-half { position: absolute; top: 0; bottom: 0; width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; }
.vs-half.a { left: 0; background: linear-gradient(135deg, #0d2a4d, #06101c); }
.vs-half.b { right: 0; background: linear-gradient(225deg, #4d0d0d, #1c0606); }
.vs-team { font: 400 clamp(30px, 8vh, 64px) var(--head); letter-spacing: .05em; }
.vs-half.a .vs-team { color: #4da6ff; } .vs-half.b .vs-team { color: #ff5a4f; }
.vs-line { display: flex; align-items: flex-end; gap: 2vw; }
.vs-fig { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; animation: vsIn .4s ease-out both; }
.vs-fig .body { height: min(34vh, 12vw); display: flex; align-items: flex-end; justify-content: center; }
.vs-fig .body > img { height: 100%; width: auto; image-rendering: pixelated; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .7)); }
.vs-fig .body .idle { height: 100%; }
.vs-fig.flip .body { transform: scaleX(-1); }
.vs-fig b { font: 400 clamp(14px, 3vh, 22px) var(--head); }
.vs-fig small { font-size: 12px; letter-spacing: .2em; font-weight: 700; color: var(--c); }
@keyframes vsIn { from { opacity: 0; transform: translateY(30px); } }
.vs-badge { position: absolute; left: 50%; top: 46%; width: 18vh; height: 18vh; margin: -9vh 0 0 -9vh; border-radius: 50%; background: #0a0d10; border: 4px solid #ffd23c;
  display: flex; align-items: center; justify-content: center; font: 400 8vh var(--head); color: #ffd23c; box-shadow: 0 0 40px rgba(255, 210, 60, .35); animation: vsPop .5s ease-out; }
@keyframes vsPop { from { transform: scale(2.4); opacity: 0; } }
.vs-top { position: absolute; top: 3vh; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 8px 20px; white-space: nowrap;
  background: rgba(0, 0, 0, .6); border: 1px solid var(--line); font-weight: 700; letter-spacing: .18em; font-size: clamp(11px, 2.2vh, 16px); }
.vs-btns { position: absolute; bottom: 4vh; left: 0; right: 0; display: flex; justify-content: center; align-items: stretch; gap: 12px; }
.vs-btns .vs-ready { font: 400 clamp(22px, 5vh, 36px) var(--head); padding: 10px 60px; color: #1a0f04; border: none;
  background: linear-gradient(180deg, #ffd86a, #ff9a3c 60%, #e2711c); }

@media (max-height: 560px), (max-width: 760px) {
  .cslot b { font-size: 13px; } .cslot small { font-size: 9px; letter-spacing: .08em; } .cslot .btn { font-size: 10px; padding: 3px 6px; }
  .lobby-c .stage { grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); }
  .dossier, .roster { padding: 8px; gap: 5px; } .dossier h4 { font-size: 16px; } .dossier p { display: none; }
  .st-row { font-size: 10px; padding: 3px 6px; } .roster .row-m { font-size: 12px; }
  .cmd-hero .role { font-size: 9px; letter-spacing: .1em; }
  /* the phone layout (E): tabs show only their icons */
  .ui-icons .topnav button .ico + span { display: none; }
  .ui-icons .topnav button .ico { width: 22px; height: 22px; margin: 0; }
  .vs-btns .vs-ready { padding: 6px 30px; }
}

/* behind the menus the jungle scene fills the whole window (the game canvas is letterboxed to 16:9) and pans slowly */
body:not(.playing) #game { background: #07090b url(assets/atlas/bg15_1.png) 0 50% / auto 100% repeat-x; image-rendering: auto; animation: bgPan 160s linear infinite; }
/* the menu backdrop is scaled smoothly (sharp pixels turned its soft, out-of-focus areas into big squares) */
body:not(.playing) #game canvas { visibility: hidden; }
@keyframes bgPan { to { background-position: -300vh 50%; } }

/* ---------- motion: entrances, idle shimmer, hover ---------- */
@keyframes riseIn { from { opacity: 0; transform: translateY(40px); } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-24px); } }
@keyframes slideL { from { opacity: 0; transform: translateX(-60px); } }
@keyframes slideR { from { opacity: 0; transform: translateX(60px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes shine { 0%, 62% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(220%) skewX(-20deg); } }
@keyframes padPulse { 50% { opacity: .45; transform: scaleX(.92); } }
@keyframes glowPulse { 50% { box-shadow: 0 0 26px 2px rgba(255, 170, 60, .55), inset 0 -5px 0 rgba(0, 0, 0, .25); } }
/* the squad (lineup and cards) rises in one after another, nametags drop on top */
.enter .fig, .enter .cslot { animation: riseIn .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d, 0s) - var(--el, 0s)); }
.fig:nth-child(2), .cslot:nth-child(2) { --d: .08s; }
.fig:nth-child(3), .cslot:nth-child(3) { --d: .16s; }
.fig:nth-child(4), .cslot:nth-child(4) { --d: .24s; }
.fig:nth-child(5), .cslot:nth-child(5) { --d: .32s; }
.enter .fig .tag { animation: dropIn .45s ease-out both; animation-delay: calc(.45s - var(--el, 0s)); }
.enter .topbar { animation: dropIn .4s ease-out both; }
.enter .play-dock { animation: slideR .5s .15s cubic-bezier(.2, .8, .2, 1) both; }
.enter .dossier { animation: slideL .5s .1s cubic-bezier(.2, .8, .2, 1) both; }
.enter .cmd-hero { animation: riseIn .6s .2s cubic-bezier(.2, .8, .2, 1) both; }
/* PLAY: a light sweep every few seconds and a soft glow */
.play-big { position: relative; overflow: hidden; animation: glowPulse 2.4s ease-in-out infinite; transition: transform .12s; }
.play-big::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: shine 3.2s ease-in-out infinite; pointer-events: none; }
.play-big:hover:not([disabled]) { transform: scale(1.03); }
.play-big:active:not([disabled]) { transform: scale(.97); }
.play-big[disabled] { animation: none; } .play-big[disabled]::after { display: none; }
/* tabs: the underline grows in, hover lifts */
.topnav button { transition: color .15s, transform .15s, border-color .25s; }
.topnav button:hover { transform: translateY(-2px); }
.topnav button.on { animation: fadeIn .3s; }
/* pads breathe; the mode card and cards lift on hover */
.fig:not(.me) .pad { animation: padPulse 2.6s ease-in-out infinite; }
.mode-card { transition: transform .15s, filter .15s; }
.mode-card:hover:not([disabled]) { transform: translateX(-4px); }
.cslot { transition: transform .18s, box-shadow .18s; }
.cslot:hover { transform: translateY(-6px); box-shadow: 0 10px 30px -8px var(--c, #fff); }
.cslot.me:hover { transform: translateY(-6px); }
.fig .body { transition: transform .2s; }
.fig.me .body:hover { transform: translateY(-4px); }
/* VS screen: the teams slide in from their sides */
.enter .vs-half.a { animation: slideL .5s cubic-bezier(.2, .8, .2, 1) both; }
.enter .vs-half.b { animation: slideR .5s cubic-bezier(.2, .8, .2, 1) both; }
.enter .vs-badge { animation: vsPop .5s .35s ease-out both; }
.vs-fig:nth-child(2) { animation-delay: .1s; } .vs-fig:nth-child(3) { animation-delay: .2s; }
/* locker: the hero slides in, tiles rise */
.enter .sel-main { animation: fadeIn .4s ease-out both; }
.enter .sel-tiles .tile { animation: riseIn .4s ease-out both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; } }

img { -webkit-user-drag: none; user-drag: none; }
.lobby-c .stage { grid-template-columns: minmax(0, 1fr); }
@media (max-height: 560px), (max-width: 760px) { .lobby-c .stage { grid-template-columns: minmax(0, 1fr); } }

/* COMMAND: the agent alone, lifts and glows on hover with CHANGE AGENT over it */
.cmd-hero { cursor: pointer; }
.cmd-hero .body { position: relative; transition: transform .2s, filter .2s; }
.cmd-hero:hover .body { transform: translateY(-8px) scale(1.03); filter: drop-shadow(0 0 18px var(--c)); }
.cmd-hero .change-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; white-space: nowrap;
  font: 400 20px var(--head); letter-spacing: .08em; padding: 7px 14px; background: rgba(0, 0, 0, .72); border: 2px solid var(--c); opacity: 0; transition: opacity .15s; }
.cmd-hero:hover .change-hint { opacity: 1; }
.cmd-hero:hover .pad { opacity: 1; filter: brightness(1.3); }
@media (hover: none) { .cmd-hero .change-hint { opacity: .85; top: auto; bottom: 8px; font-size: 12px; padding: 3px 8px; } }
/* the install chip stays small */
.chip.install-btn { padding: 6px 12px; }
@media (max-width: 1450px) { .chip.install-btn .lbl { display: none; } }
/* admin GIVE board */
#admin .give-who { display: flex; flex-direction: column; gap: 6px; }
#admin .give-who input, #admin .give-coins input { font: 600 15px Rajdhani, sans-serif; background: rgba(0, 0, 0, .45); color: #fff; border: 1px solid var(--line); padding: 7px 10px; }
#admin .give-coins input { width: 110px; }
#admin .give-people { display: flex; flex-wrap: wrap; gap: 5px; max-height: 120px; overflow: auto; }
#admin .give-people .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5cff8a; margin-right: 5px; }
#admin .give-target { padding: 8px 10px; background: rgba(255, 210, 60, .12); border-left: 3px solid #ffd23c; font-size: 15px; }
#admin .give-tile small { font-size: 11px; color: var(--dim); }
#admin .give-tile.owned { border-color: #5cff8a; background: rgba(92, 255, 138, .14); }
#admin .give-tile.owned small { color: #5cff8a; }
#admin .give-icon { font-size: 28px; line-height: 1; }
#admin .admin-sec .btn { margin-left: 8px; font-size: 11px; padding: 3px 8px; }

/* COMMAND now shows the whole squad like the lineup; the hover glow only on your own figure, no label */
.lobby-c .stage { display: flex; align-items: flex-end; justify-content: center; padding: 0 3vw 3vh; }
.fig.me .change-hint { display: none !important; }
/* the roster panel gets the same cut corners as the other cards */
.roster, .dossier { clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
/* the mode picker's local co-op line */
.mode-local { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; }
.modes { grid-template-rows: auto auto; }
/* messages */
.notice { position: fixed; left: 50%; top: 84px; transform: translateX(-50%); z-index: 60; width: min(560px, 92vw); display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; background: linear-gradient(90deg, rgba(40, 26, 8, .97), rgba(12, 16, 20, .97)); border: 2px solid var(--acc);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); animation: dropIn .35s ease-out; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.notice-body { flex: 1; }
.notice small { font-size: 11px; letter-spacing: .26em; color: var(--acc2); font-weight: 700; }
.notice p { margin: 4px 0 0; font-size: 17px; line-height: 1.35; }
#admin .give-msg input { flex: 1; font: 600 15px Rajdhani, sans-serif; background: rgba(0, 0, 0, .45); color: #fff; border: 1px solid var(--line); padding: 7px 10px; }

/* friends: room between the code, the add box and the lists */
#fr-body { display: flex; flex-direction: column; gap: 14px; }
#fr-body .row { gap: 14px; }
#fr-body .row .code { margin: 0 4px; }
#fr-body input { flex: 1; min-width: 180px; }
#fr-body h3 { margin-top: 10px; }

/* ---------- ranks ---------- */
.rank-ico { display: inline-block; vertical-align: middle; flex: none; image-rendering: pixelated; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.rank-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; letter-spacing: .1em; color: var(--rc); white-space: nowrap; }
.rank-chip b { font: 400 15px var(--head); letter-spacing: .06em; }
.rank-chip small { color: var(--dim); font-size: 11px; letter-spacing: .08em; }
#menu-rank { display: inline-flex; }
.fig .tag small .rank-ico, .cslot small .rank-ico { margin-right: 4px; vertical-align: -2px; }
/* the home-screen name tag: only the name, plain (banner + title live on View Profile; no glow) */
.fig .tag { cursor: pointer; background: none; border: 0; clip-path: none; padding: 0 4px; box-shadow: none; filter: none; }
.fig .tag b { text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; }
/* sits well above the head (user: move it upwards) */
.fig .tag { margin-bottom: clamp(18px, 4vh, 44px); }
.fig.me .tag { margin-bottom: clamp(22px, 5vh, 56px); }
.fig .tag:hover { filter: brightness(1.2); }
.cslot b[data-act] { cursor: pointer; }
.over-rank { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); animation: riseIn .5s ease-out; }
.over-rank .up { color: var(--good); font: 400 22px var(--head); } .over-rank .down { color: var(--bad); font: 400 22px var(--head); }
.over-rank .promo { font: 400 26px var(--head); color: #ffd23c; animation: vsPop .5s ease-out; }
.over-rank .demo { font: 400 18px var(--head); color: var(--bad); }
.over-rank small { color: var(--dim); }
/* ---------- a squad member's options ---------- */
.member-pop { position: fixed; z-index: 70; min-width: 220px; display: flex; flex-direction: column; background: rgba(10, 13, 16, .97); border: 1px solid var(--line);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); box-shadow: 0 12px 30px rgba(0, 0, 0, .6); animation: dropIn .18s ease-out; }
.member-pop .mp-head { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; background: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .55)), var(--bn); }
.member-pop .mp-head b { font: 400 20px var(--head); }
.member-pop button { clip-path: none; border: none; border-top: 1px solid var(--line); background: transparent; text-align: left; padding: 11px 14px; font-size: 14px; }
.member-pop button:hover { background: rgba(255, 154, 60, .2); }
.member-pop button.danger { color: #ff8a7a; }
.roster .row-m { width: 100%; clip-path: none; border: none; background: transparent; padding: 4px 2px; text-align: left; cursor: pointer; }
.roster .row-m:hover { background: rgba(255, 255, 255, .06); }
/* ---------- profile card ---------- */
.profile-pop { position: fixed; z-index: 65; background: rgba(2, 4, 6, .78); backdrop-filter: blur(3px); }
.profile-card { width: min(640px, 94vw); max-height: 92vh; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 14px; box-sizing: border-box;
  background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: inset 0 3px 0 var(--acc); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); animation: riseIn .3s ease-out; }
.pf-banner { position: relative; display: flex; align-items: flex-end; gap: 14px; min-height: 210px; padding: 14px 18px 12px; box-sizing: border-box; overflow: hidden;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .4)), var(--bn); }
.pf-fig { height: 200px; flex: none; display: flex; align-items: flex-end; }
.pf-fig > img { height: 100%; width: auto; image-rendering: pixelated; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); }
.pf-fig .idle { height: 100%; }
.pf-id { flex: 1; display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; min-width: 0; text-shadow: 0 2px 4px #000; }
.pf-name { font: 400 clamp(22px, 4vw, 34px) var(--head); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-name small { font: 700 12px Rajdhani, sans-serif; letter-spacing: .2em; color: var(--dim); }
.pf-title { font-weight: 700; letter-spacing: .24em; color: var(--acc2); font-size: 13px; }
.pf-rank { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.pf-rank b { font: 400 22px var(--head); }
.pf-bar { width: 160px; height: 6px; background: rgba(255, 255, 255, .15); margin: 3px 0; }
.pf-bar i { display: block; height: 100%; }
.pf-rank small { font-size: 11px; color: #cfd9cc; letter-spacing: .1em; }
.pf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pf-stat { display: flex; flex-direction: column; align-items: center; padding: 10px 6px; background: rgba(255, 255, 255, .05); border-top: 2px solid var(--acc); }
.pf-stat b { font: 400 24px var(--head); } .pf-stat small { font-size: 11px; letter-spacing: .18em; color: var(--dim); }
.pf-note { margin: 0; color: var(--dim); text-align: center; }
.pf-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
/* ---------- locker looks ---------- */
.locker-tabs { display: flex; gap: 4px; margin-left: auto; }
.locker-tabs .btn { clip-path: none; }
.look-preview { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; width: min(640px, 100%); margin: 0 auto; }
.look-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.swatch { display: block; width: 100%; height: 54px; background: var(--bn); border: 1px solid rgba(255, 255, 255, .2); }
.swatch.big { height: 70px; }
.title-tile b, .title-preview { font: 400 16px var(--head); letter-spacing: .06em; color: var(--acc2); text-align: center; padding: 14px 4px; }
.title-preview { background: rgba(0, 0, 0, .35); }
.look-item .top { margin-top: 6px; }
/* ---------- the two new mode tiles ---------- */
.modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mode-tile.custom { grid-column: span 2; }
.mode-tile.ffa .mt-body > b { color: #ff5aa8; } .mode-tile.horde .mt-body > b { color: #ffd23c; }
.mt-sizes.two { grid-template-columns: repeat(2, 1fr); }
.mt-sizes.two .btn { font-size: 18px; }
.mode-tile { min-height: 340px; }
@media (max-height: 560px), (max-width: 860px) {
  .modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mode-tile { min-height: 0; }
  .pf-banner { min-height: 130px; } .pf-fig { height: 120px; }
  .pf-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } .pf-stat b { font-size: 16px; } .pf-stat small { font-size: 8px; letter-spacing: .06em; }
}

/* idle figures: the body fills the box, anything taller (an emote's thrown grenade) pokes out above it */
.fig .body .idle, .cslot .cs-art .idle, .lfig .body .idle, .sel-hero .idle, .vs-fig .body .idle, .pf-fig .idle, .cmd-hero .body .idle { height: calc(100% * var(--ik, 1)); flex: none; overflow: hidden; }
.fig .body .idle { height: calc(var(--h) * var(--ik, 1)); }
/* phones sideways: the mode picker fits more on one screen */
@media (max-height: 560px) {
  .mode-tile { min-height: 0 !important; }
  .mode-tile .mt-art { height: 48px !important; }
  .mode-tile .mt-body { margin-top: -12px; gap: 5px; }
  .mode-tile .mt-body > b { font-size: 20px; }
  .mode-tile p { font-size: 11px; line-height: 1.25; }
  .mt-sizes .btn, .mt-sizes.two .btn { font-size: 14px; padding: 5px 0; }
  .mode-tile .btn.primary { padding: 6px 8px; font-size: 13px; }
}

#admin .ranks-grid .tile { padding: 6px 4px; gap: 4px; }
#admin .ranks-grid .tile span { font-size: 11px; }
#admin .ranks-grid .tile.on { border-color: #ffd23c; background: rgba(255, 210, 60, .18); }
#admin .give-rank .btn { font-size: 13px; }
/* menus: the scene behind the squad is softly out of focus (like a lobby) — slightly enlarged so the blur has no edges */
body:not(.playing) #game { filter: blur(3px) brightness(.92); transform: scale(1.04); }

/* ---------- your agent: a crisp 1-pixel white outline instead of a glow (hover, and in the locker) ---------- */
.fig .body .idle, .fig .body > img, .cslot .cs-art .idle, .cmd-hero .body .idle { filter: none; }
.fig .body:hover .idle, .fig .body:hover > img, .cslot:hover .cs-art .idle, .cslot:hover .cs-art > img, .sel-hero .idle, .sel-hero > img {
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff); }
.cmd-hero:hover .body { filter: none; }
.cslot:hover { box-shadow: none; }
/* titles: a coloured line under the name */
.ttl { display: block; font-style: normal; font: 700 11px Rajdhani, sans-serif; letter-spacing: .2em; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.fig .tag .ttl { margin: 1px 0 2px; }
.member-pop .mp-head .ttl { font-size: 12px; }
.vs-fig .ttl { font-size: 12px; }
/* the shop's BACK sits at the top */
.shop-head { display: flex; align-items: center; gap: 14px; }
.shop-head h2 { flex: 1; text-align: left; }
/* settings: keyboard rows */
.keys-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.key-row .btn { min-width: 120px; }
.key-row .btn.on { animation: glowPulse 1s infinite; }
/* touch: moving the buttons */
#touch-edit-bar { display: none; }
#touch.editing { background: rgba(0, 0, 0, .55); z-index: 50; }
#touch.editing #touch-edit-bar { display: flex; position: absolute; top: 74px; left: 50%; transform: translateX(-50%); align-items: center; gap: 10px;
  padding: 8px 14px; background: rgba(10, 13, 16, .95); border: 1px solid var(--acc); font-weight: 700; letter-spacing: .08em; z-index: 3; }
#touch.editing #btns .tb, #touch.editing #b-pause { outline: 2px dashed #ffd23c; outline-offset: 4px; cursor: grab; touch-action: none; }
#touch.editing #dpad { opacity: .35; }
/* the leaderboard */
.lb-me { margin-bottom: 8px; }
.lb-list { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow: auto; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .75)), var(--bn, rgba(255, 255, 255, .05)); }
.lb-row.me { outline: 2px solid var(--acc); }
.lb-row .pos { width: 28px; font: 400 18px var(--head); color: var(--acc2); text-align: right; }
.lb-row b { font-size: 16px; } .lb-row .grow { flex: 1; } .lb-row small { color: var(--dim); min-width: 64px; text-align: right; }
.lb-row .ttl { display: inline; margin-left: 6px; }

/* ---------- the starter choice ---------- */
.overlay.starter-screen { flex-direction: column; align-items: center; justify-content: center; gap: 2vh; background: radial-gradient(ellipse at center, rgba(5, 8, 10, .35), rgba(3, 5, 6, .85)); }
.starter-head { text-align: center; max-width: 720px; }
.starter-cards { display: flex; gap: 3vw; justify-content: center; flex-wrap: wrap; }
.starter-card { width: min(340px, 42vw); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; box-sizing: border-box;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(8, 10, 13, .92) 55%); border: 2px solid var(--c);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); animation: riseIn .5s ease-out both; transition: transform .15s; }
.starter-card:nth-child(2) { animation-delay: .1s; }
.starter-card:hover { transform: translateY(-6px); }
.starter-card .st-fig { height: min(36vh, 300px); display: flex; align-items: flex-end; justify-content: center; }
.starter-card .st-fig .idle { height: 100%; }
.starter-card .st-fig > img { height: 100%; width: auto; image-rendering: pixelated; }
.starter-card:hover .st-fig .idle { filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff); }
.starter-card .st-name { font: 400 40px var(--head); color: var(--c); line-height: 1; }
.starter-card .st-role { letter-spacing: .3em; font-size: 12px; color: var(--dim); font-weight: 700; }
.starter-card .stat-rows { width: 100%; }
.starter-card .st-ab { display: flex; gap: 10px; align-items: center; text-align: left; font-size: 13px; }
.starter-card .st-ab img { width: 44px; height: 44px; image-rendering: pixelated; }
.starter-card .st-ab p { margin: 2px 0 0; color: #cfd9cc; }
.starter-card .big-btn { width: 100%; }
@media (max-height: 560px) {
  .starter-card { padding: 8px; gap: 4px; } .starter-card .st-fig { height: 28vh; } .starter-card .st-name { font-size: 24px; }
  .starter-card .st-ab p { display: none; } .starter-head .sub { font-size: 11px; }
}

/* ---------- invites: the window and the JOIN box ---------- */
#invite-pop .item .grow small { display: block; font-size: 10px; letter-spacing: .14em; color: var(--dim); font-weight: 700; }
#invite-pop .item .dot.on + .grow small { color: #7dff9a; }
#invite-pop .sub { margin: 4px 0 10px; }
#invite-msg:empty { display: none; }
.invites .invite { flex-wrap: wrap; font-size: 14px; }
.invites .invite > span { flex: 1 1 100%; }
.invites .invite .btn.primary { flex: 1; }

/* ---------- loading screen ---------- */
.loading { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: #07090b; transition: opacity .5s ease; }
.loading.out { opacity: 0; pointer-events: none; }
.loading .ld-bg { position: absolute; inset: -20px; background: #07090b url(assets/atlas/bg15_1.png) center / cover no-repeat; filter: blur(6px) brightness(.35); }
.loading .ld-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(420px, 80vw); text-align: center; }
.loading .ld-icon { width: clamp(72px, 18vh, 128px); height: auto; border-radius: 22%; animation: ldBob 2.4s ease-in-out infinite; }
.loading .ld-logo { font: 400 clamp(30px, 8vh, 58px) 'Black Ops One', Impact, sans-serif; color: #ff8a28; letter-spacing: .06em; line-height: 1; text-shadow: 0 3px 0 #000; }
.loading .ld-bar { width: 100%; height: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.loading .ld-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff8a28, #ffd23c); transition: width .25s ease; }
.loading .ld-text { font: 700 13px Rajdhani, sans-serif; letter-spacing: .3em; color: #cfd9cc; }
.loading .ld-tip { font: 600 14px Rajdhani, sans-serif; color: #8b978a; min-height: 1.2em; }
@keyframes ldBob { 50% { transform: translateY(-6px); } }
@media (max-height: 420px) { .loading .ld-box { gap: 8px; } .loading .ld-tip { font-size: 12px; } }

/* ---------- email sign-in ---------- */
.or-line { display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: 11px; letter-spacing: .25em; font-weight: 700; margin: 4px 0; }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .15); }
.email-form { display: flex; flex-direction: column; gap: 8px; }
.email-form input { width: 100%; box-sizing: border-box; padding: 11px 12px; font: 600 16px Rajdhani, sans-serif; color: #fff; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .2); outline: none; }
.email-form input:focus { border-color: var(--acc); }
.email-form .em-row { display: flex; gap: 8px; }
.email-form .em-row .btn { flex: 1; }
.linkish { align-self: center; background: none; border: 0; color: var(--dim); font: 600 13px Rajdhani, sans-serif; text-decoration: underline; cursor: pointer; padding: 2px; }
.linkish:hover { color: #fff; }
@media (max-height: 520px) { .login-card .tag, .login-card .fine { display: none; } .email-form input { padding: 8px 10px; } }
@media (max-height: 520px) {
  .login-card { padding-top: 10px; padding-bottom: 10px; gap: 6px; }
  .login-card .logo { font-size: 30px; }
  .btn.google { padding: 8px; font-size: 15px; }
  .email-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .email-form .em-row, .email-form .linkish { grid-column: 1 / -1; }
  .email-form .em-row .btn, #offline-btn { padding-top: 7px; padding-bottom: 7px; }
  .or-line { margin: 0; }
}

/* rank emblem in front of every name on the home screen */
.fig .tag { display: flex; align-items: center; justify-content: center; gap: 6px; }
.fig .tag .rank-ico { flex: none; }
.cslot b .rank-ico { margin-right: 6px; vertical-align: -4px; }
.lb-row .lb-x { margin-left: 8px; background: #5a1d1d; border-color: #ff5a4a; }

/* locker, banners / titles tab: the preview at the top, the tiles straight under it (not pushed to the bottom) */
#select.looks .sel-main { flex: 0 0 auto; display: block; }
#select.looks .look-preview { max-width: 760px; margin: 0 auto; }
#select.looks .sel-tiles { margin-top: 6px; }

/* ---------- movement control: fixed where it is (movable in MOVE BUTTONS) ---------- */
#stick { left: calc(130px * var(--ts) + env(safe-area-inset-left)); top: auto; bottom: calc(40px * var(--ts) + env(safe-area-inset-bottom));
  margin: 0 0 0 calc(-75px * var(--ts)); opacity: .7; }
#stick.on { opacity: 1; }
#touch.dpad-mode #stick { display: none; }
#touch:not(.dpad-mode) #dpad { display: none; }
#dpad { opacity: .8; }
#touch.editing #stick, #touch.editing #dpad { opacity: 1; outline: 2px dashed #ffd23c; outline-offset: 6px; }

/* ---------- settings ---------- */
.settings-card { width: min(760px, 94vw); max-height: 92vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.set-head { display: flex; align-items: center; gap: 14px; }
.set-head h2 { margin: 0; }
.set-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); }
.set-tabs button { flex: 1; padding: 10px 6px; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; color: var(--dim);
  font: 700 15px Rajdhani, sans-serif; letter-spacing: .14em; cursor: pointer; }
.set-tabs button:hover { color: #fff; }
.set-tabs button.on { color: var(--acc); border-bottom-color: var(--acc); }
.set-page { display: flex; flex-direction: column; gap: 4px; }
.set-page.hidden { display: none; }
.settings-card .set-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.set-label { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-label b { font: 700 17px Rajdhani, sans-serif; color: #fff; letter-spacing: .04em; }
.set-label small { color: var(--dim); font-size: 13px; }
.set-value { color: var(--acc2); font-size: 17px; }
.btn.toggle { min-width: 64px; }
.btn.toggle.on { background: var(--acc); color: #1a0d02; border-color: var(--acc); }
.ctl-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 6px; }
.ctl-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; background: rgba(0, 0, 0, .35);
  border: 2px solid var(--line); color: #fff; cursor: pointer; font: inherit; }
.ctl-card:hover { border-color: rgba(255, 255, 255, .4); }
.ctl-card.on { border-color: var(--acc); background: rgba(255, 154, 60, .12); }
.ctl-card b { font: 400 20px var(--head); letter-spacing: .06em; }
.ctl-card small { color: var(--dim); font-size: 13px; text-align: center; }
.ctl-pic { position: relative; width: 96px; height: 96px; }
.stick-pic { border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); background: radial-gradient(circle, rgba(255, 255, 255, .1), transparent 70%); }
.stick-pic i { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -6px; border-radius: 50%; background: rgba(255, 255, 255, .45); border: 2px solid #fff; }
.dpad-pic i { position: absolute; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255, 255, 255, .45);
  background: rgba(20, 26, 34, .8); border-radius: 6px; font-style: normal; font-size: 14px; }
.dpad-pic .u { left: 32px; top: 0; } .dpad-pic .d { left: 32px; bottom: 0; } .dpad-pic .l { left: 0; top: 32px; } .dpad-pic .r { right: 0; top: 32px; }
.ctl-card.on .dpad-pic .r, .ctl-card.on .stick-pic i { background: var(--acc); border-color: #ffd39a; }
.keys-list { display: flex; flex-direction: column; }
@media (max-height: 520px) {
  .settings-card { max-height: 96vh; padding: 10px 14px; gap: 6px; }
  .settings-card .set-row { padding: 6px 2px; }
  .set-label small { display: none; }
  .ctl-pic { width: 64px; height: 64px; }
  .stick-pic i { width: 26px; height: 26px; margin: -13px 0 0 -4px; }
  .dpad-pic i { width: 21px; height: 21px; font-size: 10px; } .dpad-pic .u, .dpad-pic .d { left: 21px; } .dpad-pic .l, .dpad-pic .r { top: 21px; }
  .ctl-card { padding: 8px; }
}

/* an agent's passive (where the health / speed bars were) */
.passive { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-left: 3px solid var(--c, var(--acc)); background: rgba(0, 0, 0, .3); text-align: left; width: 100%; box-sizing: border-box; }
.passive small { font-size: 10px; letter-spacing: .25em; color: var(--dim); font-weight: 700; }
.passive b { font: 700 16px Rajdhani, sans-serif; color: var(--c, #fff); }
.passive span { font-size: 13px; color: #cfd9cc; }

/* online duel: who has not pressed READY yet */
.vs-fig.not-ready .body { opacity: .45; filter: grayscale(.6); }
.vs-fig.not-ready small { color: #ff8a7a; }

/* settings: a gear button in the top-left corner of the home screen */
.set-corner { flex: none; width: 46px; height: 46px; padding: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(0, 0, 0, .45); border: 1px solid var(--line); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.set-corner img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.set-corner:hover { border-color: var(--acc); background: rgba(255, 154, 60, .15); }
@media (max-height: 520px) { .set-corner { width: 36px; height: 36px; padding: 4px; } }

/* the D-pad is four separate buttons: no round joystick base behind them */
#dpad { background: none; border: 0; border-radius: 0; opacity: .9; }
#dpad .dp { border-radius: 12px; }
/* the gear art has its own round frame: no box around it */
.set-corner { background: none; border: 0; clip-path: none; padding: 0; width: 48px; height: 48px; transition: transform .15s; }
.set-corner:hover { background: none; transform: rotate(30deg) scale(1.06); }
@media (max-height: 520px) { .set-corner { width: 38px; height: 38px; padding: 0; } }

/* red number badges on the top tabs */
.topnav button { position: relative; }
.topnav .badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px;
  background: #e8302a; color: #fff; font: 800 11px/18px Rajdhani, sans-serif; font-style: normal; text-align: center; border: 2px solid #0b0f13;
  animation: badgePop .35s cubic-bezier(.2, 1.6, .4, 1) both; pointer-events: none; }
@keyframes badgePop { from { transform: scale(0); } }

/* ---------- bullet colours + name colours ---------- */
.bullet-sample { display: inline-flex; gap: 5px; align-items: center; padding: 6px 2px; }
.bullet-sample i { width: 16px; height: 6px; border-radius: 3px; background: var(--bc); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); }
.bullet-sample.rainbow i:nth-child(1) { background: #ff4a4a; } .bullet-sample.rainbow i:nth-child(2) { background: #4ae06a; } .bullet-sample.rainbow i:nth-child(3) { background: #4a9dff; }
.name-sample { font: 700 17px Rajdhani, sans-serif; color: #fff; text-shadow: 1px 1px 0 #000; }
.name-sample.rainbow { background: linear-gradient(90deg, #ff4a4a, #ffd23c, #4ae06a, #4ad8ff, #c46bff, #ff4a4a); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; animation: rainbowSlide 3s linear infinite; }
@keyframes rainbowSlide { to { background-position: 200% 0; } }
.look-samples { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 8px; }
.look-tile small { color: var(--dim); font-size: 11px; }

/* name colour tiles: the name itself is the preview (not overridden by the tile's text colour) */
.look-tile .name-sample { display: block; max-width: 100%; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.look-tile .name-sample.rainbow { color: transparent; }
/* the BULLETS / NAMES preview: agent, name over it, shots flying out */
.look-stage { position: relative; display: flex; align-items: center; gap: 0; height: 190px; margin: 10px auto 0; max-width: 560px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .45)); border-bottom: 3px solid rgba(255, 255, 255, .12); overflow: hidden; }
.look-stage .ls-fig { position: relative; flex: none; width: 160px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.look-stage .ls-fig .name-sample { font-size: 18px; margin-bottom: 4px; }
.look-stage .ls-body { height: 140px; display: flex; align-items: flex-end; }
.look-stage .ls-body .idle, .look-stage .ls-body > img { height: 100%; }
.look-stage .ls-shots { position: absolute; left: 150px; right: 0; top: 108px; height: 8px; }
.look-stage .ls-shots i { position: absolute; left: 0; width: 22px; height: 7px; border-radius: 4px; background: var(--bc); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6);
  animation: shotFly 1.2s linear infinite; }
.look-stage .ls-shots i:nth-child(2) { animation-delay: .4s; } .look-stage .ls-shots i:nth-child(3) { animation-delay: .8s; }
.look-stage .ls-shots.rainbow i { animation: shotFly 1.2s linear infinite, shotHue 1.2s linear infinite; background: #ff4a4a; }
.look-stage .ls-shots.rainbow i:nth-child(2) { animation-delay: .4s, .4s; } .look-stage .ls-shots.rainbow i:nth-child(3) { animation-delay: .8s, .8s; }
@keyframes shotFly { from { transform: translateX(0); opacity: 1; } 90% { opacity: 1; } to { transform: translateX(380px); opacity: 0; } }
@keyframes shotHue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@media (max-height: 520px) { .look-stage { height: 120px; } .look-stage .ls-body { height: 84px; } .look-stage .ls-shots { top: 66px; } }
.look-stage { width: min(560px, 90vw); }

/* D-pad diagonals: the corners between two arrows are pressable (up-right, down-left …) */
#dpad .dg { position: absolute; width: 30%; height: 30%; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .22); box-sizing: border-box; }
#dpad .ul { left: 2%; top: 2%; } #dpad .ur { right: 2%; top: 2%; } #dpad .dl { left: 2%; bottom: 2%; } #dpad .dr { right: 2%; bottom: 2%; }
#dpad .dg.on { background: rgba(255, 154, 60, .45); border-style: solid; border-color: #ffd39a; }

/* water rescue: ROPE / HOOK shown over a touch button while it does that */
#btns .tb .tb-over { position: absolute; inset: -3px; border-radius: 50%; background: #1a2028 center / 66% no-repeat; border: 3px solid #ffd23c;
  image-rendering: pixelated; animation: overPulse .8s ease-in-out infinite; pointer-events: none; }
@keyframes overPulse { 50% { transform: scale(1.08); border-color: #fff3b0; } }


/* ---------- fancy bullets (CG.Cosmetics.BULLETS[..].fx): one shot with its trail in the shop / locker tiles and the preview ---------- */
.bullet-sample.fx { position: relative; display: block; width: 74px; height: 18px; padding: 0; }
.bullet-sample.fx i, .look-stage .ls-shots.fx i { width: 16px; height: 8px; border-radius: 4px; background: var(--bc); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); }
.bullet-sample.fx i { position: absolute; right: 4px; top: 5px; }
.look-stage .ls-shots.fx i { width: 22px; height: 9px; }
.bullet-sample.fx i::before, .ls-shots.fx i::before { content: ''; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); pointer-events: none; }
.fx-trail i::before { width: 56px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bc) 75%, transparent)); }
.fx-petals i::before { width: 54px; height: 16px;
  background: radial-gradient(ellipse 4px 2.5px at 10% 30%, #ffd8ea 98%, transparent), radial-gradient(ellipse 4px 2.5px at 35% 75%, #ff8ac0 98%, transparent),
    radial-gradient(ellipse 4px 2.5px at 62% 25%, #ffb0d8 98%, transparent), radial-gradient(ellipse 4px 2.5px at 88% 65%, #ffd8ea 98%, transparent); }
.fx-flame i, .fx-ember i { background: radial-gradient(circle at 75% 50%, #fff6c0 0 25%, var(--bc) 62%); }
.fx-flame i::before, .fx-ember i::before { width: 46px; height: 12px; border-radius: 50% 0 0 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 60, 20, .55) 45%, rgba(255, 170, 40, .9)); animation: fxFlick .18s steps(2) infinite alternate; }
.fx-ember i::before { background: linear-gradient(90deg, transparent, rgba(160, 0, 0, .6) 40%, rgba(255, 60, 20, .95)); }
.fx-zap i::before { width: 44px; height: 12px; background: #fff27a; animation: fxFlick .12s steps(2) infinite alternate;
  clip-path: polygon(0 50%, 20% 10%, 35% 70%, 52% 15%, 68% 80%, 84% 25%, 100% 45%, 100% 60%, 84% 42%, 68% 98%, 52% 32%, 35% 88%, 20% 28%, 0 62%); }
.fx-stars i::before { width: 56px; height: 14px; animation: fxTwinkle .5s steps(2) infinite alternate;
  background: radial-gradient(circle at 12% 30%, #fff 0 1.5px, transparent 2px), radial-gradient(circle at 30% 70%, #7ae8ff 0 1.5px, transparent 2px),
    radial-gradient(circle at 50% 35%, #ff8ad8 0 2px, transparent 2.5px), radial-gradient(circle at 72% 65%, #fff 0 1.5px, transparent 2px),
    radial-gradient(circle at 90% 40%, #c08aff 0 2px, transparent 2.5px), linear-gradient(90deg, transparent, rgba(192, 138, 255, .45)); }
.fx-void i { background: #14051f !important; box-shadow: 0 0 0 2px #9a4aff !important; }
.fx-void i::before { width: 46px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, transparent, rgba(138, 58, 255, .75)); }
@keyframes fxFlick { to { transform: translateY(-50%) scaleY(.7); opacity: .8; } }
@keyframes fxTwinkle { to { opacity: .55; } }

/* locker look tiles: the one in use keeps its place (no jump) and gets the accent outline all round */
.sel-tiles .look-tile { --c: var(--acc); }
.sel-tiles .tile.look-tile.look { transform: none; border-color: var(--acc); }
/* the title on a banner sits on its own dark plate, so it reads on any banner */
.pf-banner .pf-title { align-self: flex-start; background: rgba(0, 0, 0, .62); padding: 3px 10px; border-radius: 3px; text-shadow: none; }
.look-tile b { overflow-wrap: anywhere; }
/* painted bullets (bullets.png): the sprite itself, no pill */
.bullet-sample.fx i.art { width: 34px; height: 18px; top: 0; border-radius: 0; box-shadow: none !important; image-rendering: pixelated; }
.look-stage .ls-shots.painted i { width: 46px; height: 24px; top: -8px; border-radius: 0; box-shadow: none !important; image-rendering: pixelated; }
.bullet-sample.fx i.art::before, .ls-shots.painted i::before { right: 70%; }