:root {
  --bg: #1d3316;
  --panel: rgba(16, 26, 13, 0.94);
  --line: rgba(255, 255, 255, 0.12);
  --text: #f2f5ea;
  --muted: #b5c2a6;
  --accent: #f2b33d;
  --accent-ink: #2b1d02;
  --green: #7dd957;
  --red: #ff5b4a;
  --blue: #5fb4ff;
  --gold: #ffd23d;
  --purple: #c49bff;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#cv { position: fixed; inset: 0; display: block; touch-action: none; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.row { display: flex; gap: 8px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }

/* ---------- buttons & inputs ---------- */
.btn {
  font: inherit;
  font-weight: 700;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 16px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
}
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.ghost { background: transparent; }
.btn.big { width: 100%; padding: 14px; font-size: 17px; }
.btn.small { padding: 7px 12px; font-size: 13px; }
.btn:disabled { opacity: 0.45; }
input {
  font: inherit;
  color: var(--text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  width: 100%;
  -webkit-user-select: text;
  user-select: text;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- menu ---------- */
.screen {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, var(--safe-t)) 16px max(16px, var(--safe-b));
  overflow-y: auto;
  background: radial-gradient(circle at 50% 30%, rgba(40, 70, 30, 0.55), rgba(10, 20, 8, 0.85));
}
.card {
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  margin: auto;
}
h1 { margin: 0; font-size: 30px; letter-spacing: 0.5px; text-align: center; color: var(--gold); text-shadow: 0 3px 0 #6b4a10; }
h2 { margin: 0; font-size: 20px; }
.sub { margin: -6px 0 4px; text-align: center; color: var(--muted); font-size: 13px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.or { text-align: center; color: var(--muted); font-size: 13px; }
.code-input { text-transform: uppercase; letter-spacing: 6px; font-weight: 800; text-align: center; font-size: 20px; }
.error { color: var(--red); margin: 0; text-align: center; font-weight: 600; }
.resume { border: 1px solid rgba(242, 179, 61, 0.5); background: rgba(242, 179, 61, 0.1); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.resume .row .btn.primary { flex: 1; }
.menu-top { display: flex; justify-content: flex-end; margin: -10px -6px -14px 0; }
.lang-btn { padding: 4px 10px; }
/* invite mode (opened from a friend's link): name + one big "Join" button, nothing else */
.invite-box { text-align: center; padding: 10px; border-radius: 14px; background: rgba(255, 210, 61, 0.1); border: 1px solid rgba(255, 210, 61, 0.45); }
.invite-t { font-weight: 800; font-size: 17px; margin-bottom: 2px; }
.invite-box b { color: var(--gold); letter-spacing: 2px; }
.menu-card:not(.invite) .invite-only { display: none; }
.menu-card.invite #btn-play, .menu-card.invite #btn-create, .menu-card.invite .or,
.menu-card.invite .code-row, .menu-card.invite .menu-links, .menu-card.invite .sub { display: none; }
.menu-card.invite .menu-b { flex: 0 0 auto; }
.menu-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.menu-links .btn { flex: 1 1 auto; }
.menu-a, .menu-b { display: flex; flex-direction: column; gap: 12px; }
input[type="checkbox"] { accent-color: var(--accent); }
#name.locked { opacity: 0.85; background: rgba(255, 255, 255, 0.04); cursor: default; }
#btn-home { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* how to play */
.modal-card.guide-card { width: min(620px, 100%); }
.guide { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.g-sec { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.g-sec b { display: block; margin-bottom: 2px; }
.g-sec p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.35; }
.g-sec p b { display: inline; color: var(--text); margin: 0; }

/* settings */
.toggle.select { justify-content: space-between; }
.toggle select { font: inherit; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: var(--text); border: 1px solid var(--line); }
.toggle select option { background: #1d3316; }

/* end-of-run share row */
#end .row .btn { flex: 1; font-size: 13px; }

/* contextual tip (ui/tips.js) */
/* small, button-free, never catches a finger: sits under the wave info and fades by itself */
.tip {
  margin-top: 6px; max-width: min(380px, calc(100vw - 260px)); pointer-events: none;
  padding: 5px 10px; border-radius: 10px; text-align: center;
  background: rgba(16, 26, 13, 0.78); border: 1px solid rgba(255, 210, 61, 0.45);
  font-size: 12.5px; font-weight: 600; line-height: 1.3; text-shadow: 0 1px 2px #000;
  animation: tip-in 0.35s ease-out;
}
.tip.out { opacity: 0; transition: opacity 0.6s; }
@keyframes tip-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- lobby ---------- */
.sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(460px, 100%);
  z-index: 20;
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  padding: 16px 16px max(14px, var(--safe-b));
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 70vh;
  overflow-y: auto;
}
.lobby-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.big-code { font-size: 34px; font-weight: 900; letter-spacing: 6px; color: var(--gold); }
.players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.players li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); }
.players .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.players .tag { margin-left: auto; font-size: 12px; color: var(--muted); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
/* pointer arrows (friends, quests, logs) sit above the HUD so buttons never hide them */
#marks { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
#hud.hidden ~ #marks { display: none; }
.hud-left { position: absolute; left: max(10px, var(--safe-l)); top: max(8px, var(--safe-t)); width: 150px; }
.bar { position: relative; height: 15px; border-radius: 8px; background: rgba(0, 0, 0, 0.55); overflow: hidden; margin-bottom: 4px; border: 1px solid rgba(255, 255, 255, 0.15); }
.bar > div { height: 100%; width: 100%; transition: width 0.12s; }
.bar.hp > div { background: linear-gradient(90deg, #3fae3a, #8ee05a); }
.bar.hp.low > div { background: linear-gradient(90deg, #c0262b, #ff6a3d); }
.bar.sh { height: 7px; }
.bar.sh > div { background: var(--blue); }
.bar span { position: absolute; inset: 0; font-size: 11px; font-weight: 800; text-align: center; line-height: 14px; text-shadow: 0 1px 2px #000; }
.money { font-weight: 900; font-size: 18px; color: var(--gold); text-shadow: 0 2px 3px rgba(0, 0, 0, 0.7); }
#team { margin-top: 4px; font-size: 12px; }
#team div { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; text-shadow: 0 1px 2px #000; white-space: nowrap; }
#team .mini { width: 46px; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, 0.5); overflow: hidden; flex: none; }
#team .mini b { display: block; height: 100%; background: #8ee05a; }

.hud-center {
  position: absolute;
  top: max(8px, var(--safe-t));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: min(440px, 52vw);
}
.pill { padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); font-weight: 800; font-size: 14px; white-space: nowrap; }
.pill.small { font-size: 12px; font-weight: 600; }
.combo { font-weight: 900; color: var(--gold); text-shadow: 0 2px 4px #000; font-size: 15px; }
.bossbar { width: 100%; text-align: center; margin-top: 2px; }
.bossbar .n { font-weight: 800; color: #ffb3a8; text-shadow: 0 1px 3px #000; font-size: 12px; }
.bossbar .t { height: 9px; border-radius: 6px; background: rgba(0, 0, 0, 0.6); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2); }
.bossbar .f { height: 100%; background: linear-gradient(90deg, #c0262b, #ff6a3d); transition: width 0.15s; }

.hud-right { position: absolute; right: max(10px, var(--safe-r)); top: max(8px, var(--safe-t)); display: flex; flex-direction: column; gap: 8px; }
.rbtn {
  pointer-events: auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  background: rgba(10, 16, 8, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  touch-action: none;
  position: relative;
  padding: 0;
}
.rbtn:active { background: rgba(255, 255, 255, 0.25); }
.rbtn.small { width: 42px; height: 42px; font-size: 18px; }
.rbtn.off { opacity: 0.4; }
.rbtn.shop { position: absolute; right: max(12px, var(--safe-r)); top: calc(max(8px, var(--safe-t)) + 104px); width: 46px; height: 46px; }
.rbtn.shop.pulse { animation: glow 1s infinite; border-color: var(--gold); }
@keyframes pulse { 50% { transform: scale(1.12); box-shadow: 0 0 18px rgba(255, 210, 61, 0.7); } }
/* "look here" without moving anything: only the frame glows */
@keyframes glow { 50% { box-shadow: 0 0 0 3px var(--glow, #ffd23d), 0 0 18px var(--glow, #ffd23d); } }
.rbtn.act { position: absolute; right: max(14px, var(--safe-r)); }
#b-rocket { bottom: calc(max(14px, var(--safe-b)) + 150px); width: 62px; height: 62px; }
#b-dash { bottom: calc(max(14px, var(--safe-b)) + 82px); }
#b-gun { bottom: calc(max(14px, var(--safe-b)) + 82px); right: calc(max(14px, var(--safe-r)) + 70px); width: 50px; height: 50px; font-size: 20px; }
#b-drag { bottom: calc(max(14px, var(--safe-b)) + 150px); right: calc(max(14px, var(--safe-r)) + 76px); width: 64px; height: 56px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
#b-drag b { font-size: 20px; }
#b-drag span { font-size: 10px; font-weight: 800; white-space: nowrap; }
#b-drag.on { border-color: #ff9b3a; background: rgba(255, 155, 58, 0.25); }
#b-gun span { position: absolute; right: -5px; bottom: -5px; font-size: 13px; }
#b-gun { border-width: 3px; }

/* weapon picker over the 🔫 button: owned guns, tap one (wraps into more columns on short screens) */
.gunpick {
  position: absolute; right: calc(max(14px, var(--safe-r)) + 64px); bottom: calc(max(14px, var(--safe-b)) + 140px);
  display: flex; flex-direction: column-reverse; flex-wrap: wrap-reverse; align-content: flex-end; gap: 6px;
  max-height: calc(100vh - 230px); pointer-events: auto; z-index: 7;
}
.gunpick button {
  display: flex; align-items: center; gap: 8px; width: 150px; height: 44px; padding: 0 10px; border-radius: 12px;
  background: rgba(16, 26, 13, 0.9); border: 2px solid rgba(255, 255, 255, 0.18); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; touch-action: none;
}
.gunpick button.on { border-color: var(--gold); background: rgba(255, 210, 61, 0.18); }
.gunpick button b { font-size: 20px; }
.gunpick button span { display: flex; flex-direction: column; gap: 3px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gunpick em { display: flex; gap: 2px; }
.gunpick em i { width: 9px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); }
.gunpick em i.on { background: var(--accent); }

/* push-to-talk: hold to record (red + a bar filling up to the time limit) */
/* under the minimap, in the flow of the left column: never on top of it, whatever the team list */
.quickbar { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 10px; pointer-events: auto; }
.quickbar .rbtn { position: relative; width: 46px; height: 46px; font-size: 20px; }
.rbtn.voice { overflow: hidden; }
/* switched-off toggle: dim with a red slash */
.qbtn .ico { width: 24px; height: 24px; color: #fff; position: relative; z-index: 1; }
.qbtn .ico .slash { display: none; stroke: #ff5a4a; stroke-width: 2.6; }
.qbtn.off { opacity: 0.6; }
.qbtn.off .ico .slash { display: inline; }
/* volume slider popping out of a quick button */
.qvol { position: fixed; z-index: 30; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 23px;
  background: rgba(10, 16, 8, 0.85); border: 1px solid rgba(255, 255, 255, 0.25); pointer-events: auto; touch-action: none; }
.qvol input[type="range"] { width: 150px; height: 28px; accent-color: #fff; touch-action: none; }
.qvol b { min-width: 40px; font-size: 13px; font-weight: 800; color: #fff; text-align: right; }
.qvol.muted input, .qvol.muted b { opacity: 0.4; }
.qvol .qv-tog { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.qvol .qv-tog .ico { width: 20px; height: 20px; }
/* the mic button while on air: red, no slash, level bar inside */
.rbtn.voice.live { opacity: 1; }
.rbtn.voice.live .ico .slash { display: none; }
/* live voice: red while on air, the bar inside shows your voice level */
.rbtn.voice i { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: rgba(255, 255, 255, 0.3); z-index: 0; transform: scaleY(0); transform-origin: bottom; transition: transform 0.08s; pointer-events: none; }
.rbtn.voice.live { background: rgba(220, 40, 30, 0.85); border-color: #ff8a7a; box-shadow: 0 0 14px rgba(255, 80, 60, 0.7); }
input[type="range"] { accent-color: var(--accent); width: 140px; }

/* element picker: one tap = that element for every weapon; each button shows how much the
   current target resists it (green ✓ = full damage, red −70% = resisted) */
.elbar { position: absolute; right: max(12px, var(--safe-r)); top: calc(max(8px, var(--safe-t)) + 162px); display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 8px; pointer-events: auto; }
.elpick { display: flex; gap: 6px; padding: 4px; border-radius: 28px; background: rgba(0, 0, 0, 0.35); }
.elbar button.elmain { width: 46px; height: 46px; font-size: 20px; opacity: 1; transform: none; }
.elbar button.elmain b { font-weight: normal; }
.elbar button {
  position: relative; width: 44px; height: 44px; border-radius: 50%; font-size: 20px; line-height: 1; padding: 0;
  background: rgba(0, 0, 0, 0.45); border: 2px solid rgba(255, 255, 255, 0.18); color: #fff; cursor: pointer; touch-action: none;
  transition: transform 0.12s, border-color 0.12s, background 0.12s; opacity: 0.75;
}
.elbar button.on { opacity: 1; transform: scale(1.12); border-width: 3px; }
.elbar button[data-el="fire"].on { border-color: #ff6a2a; background: rgba(255, 106, 42, 0.3); }
.elbar button[data-el="lightning"].on { border-color: #ffe14a; background: rgba(255, 225, 74, 0.25); }
.elbar button[data-el="ice"].on { border-color: #7fd8ff; background: rgba(127, 216, 255, 0.25); }
.elbar button[data-el="earth"].on { border-color: #c9a063; background: rgba(201, 160, 99, 0.3); }
.elbar button i {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: 900;
  padding: 0 4px; border-radius: 6px; line-height: 14px; white-space: nowrap; pointer-events: none;
}
.elbar button i:empty { display: none; }
.elbar button i.good { background: #2f8a2a; color: #eaffdf; }
.elbar button i.bad { background: #a8281e; color: #ffe6e2; }
.elbar button i.mid { background: #8a6a1e; color: #fff4d6; }
#b-rocket span {
  position: absolute; right: -4px; bottom: -4px; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px;
  background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 900; line-height: 22px; z-index: 4;
}
#b-rocket.empty { opacity: 0.5; }
.ready {
  position: absolute; left: 50%; bottom: calc(max(16px, var(--safe-b)) + 6px); transform: translateX(-50%); pointer-events: auto;
  width: 240px; padding: 12px 10px; font-size: 16px; white-space: nowrap; text-align: center; touch-action: manipulation;
  transition: background 0.15s, box-shadow 0.15s;
}
.ready:active { transform: translateX(-50%) scale(0.97); }
.ready.on { background: var(--green); color: #10240c; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 18px rgba(125, 255, 138, 0.6); }
/* diagnostics overlay: F3 or ?debug=1 */
.dbg { position: absolute; left: 50%; transform: translateX(-50%); bottom: 8px; margin: 0; padding: 4px 8px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.65); color: #b8ffb0; font: 11px/1.35 ui-monospace, Consolas, monospace; pointer-events: none; z-index: 9; white-space: pre; }
.net {
  position: absolute; left: 50%; top: 40%; transform: translateX(-50%);
  background: rgba(150, 20, 10, 0.85); padding: 8px 16px; border-radius: 12px; font-weight: 700; text-align: center;
}

#minimap { display: block; margin-top: 6px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.25); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); opacity: 0.92; }

/* boss portrait (В9) */
.boss-intro {
  position: fixed; left: 0; right: 0; top: 18%; z-index: 17; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  opacity: 0; transform: translateX(-60px);
}
.boss-intro.show { animation: bossIn 2.6s ease-out forwards; }
.boss-intro canvas { width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 60, 40, 0.45), rgba(0, 0, 0, 0.75) 70%); border: 3px solid #ff5b4a; box-shadow: 0 0 30px rgba(255, 60, 40, 0.6); }
.boss-intro div { display: flex; flex-direction: column; text-shadow: 0 3px 10px #000; }
.boss-intro small { color: #ff7a6b; font-weight: 900; letter-spacing: 6px; font-size: 14px; }
.boss-intro b { font-size: 30px; font-weight: 900; color: #fff; }
@keyframes bossIn {
  0% { opacity: 0; transform: translateX(-80px) scale(0.9); }
  12% { opacity: 1; transform: translateX(0) scale(1.05); }
  20%, 80% { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(80px) scale(0.95); }
}

/* ---------- banner & toasts ---------- */
.banner {
  position: fixed; left: 0; right: 0; top: 24%; z-index: 15; text-align: center; pointer-events: none;
  opacity: 0; transform: scale(0.9); transition: opacity 0.3s, transform 0.3s; padding: 0 16px;
}
.banner.show { opacity: 1; transform: scale(1); }
#banner-t { font-size: 30px; font-weight: 900; text-shadow: 0 3px 10px #000, 0 0 2px #000; }
#banner-s { display: block; font-size: 15px; font-weight: 700; color: var(--muted); text-shadow: 0 2px 6px #000; margin-top: 2px; }
.banner.red #banner-t { color: #ff7a6b; }
.banner.green #banner-t { color: var(--green); }
.banner.gold #banner-t { color: var(--gold); }
.banner.purple #banner-t { color: var(--purple); }
#toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(max(16px, var(--safe-b)) + 70px); z-index: 16; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; width: min(420px, 90vw); }
.toast { background: rgba(0, 0, 0, 0.72); padding: 7px 14px; border-radius: 10px; font-weight: 700; font-size: 14px; animation: toast 3s forwards; text-align: center; }
.toast.red { color: #ff9b8f; }
.toast.green { color: #a8f08a; }
.toast.gold { color: var(--gold); }
@keyframes toast { 0% { opacity: 0; transform: translateY(8px); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- modals ---------- */
.modal {
  position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: max(10px, var(--safe-t)) max(10px, var(--safe-r)) max(10px, var(--safe-b)) max(10px, var(--safe-l));
}
.modal-card {
  width: min(640px, 100%); max-height: 100%; overflow-y: auto; background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.modal-card.narrow { width: min(380px, 100%); }
.modal-head { display: flex; align-items: center; gap: 12px; }
.modal-head h2 { flex: 1; }
.modal-head .rbtn { position: static; }
/* shop: two grids of small tiles, side by side on a wide screen -> no scrolling on phones */
.modal-card.shop-card { width: min(980px, 100%); padding: 10px 12px; gap: 6px; }
.shop-body { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .shop-body { grid-template-columns: 1fr 1fr; } }
.shop-h { font-weight: 800; font-size: 13px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-h .muted { font-weight: 600; font-size: 11px; }
.shop-col { min-width: 0; }
/* fixed even rows (6 weapons: 3+3, 7 upgrades: 4+3, class: up to 4); minmax(0) lets tiles
   shrink instead of pushing the grid off a phone screen */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
#shop-weapons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 5px 3px 4px;
  border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); text-align: center;
}
.tile[data-eq] { cursor: pointer; }
.tile.eq { border-color: var(--gold); background: rgba(255, 210, 61, 0.12); }
.tile.lock .ic { filter: grayscale(0.7); opacity: 0.7; }
.tile .ic { font-size: 19px; line-height: 1.1; position: relative; }
.tile .ic .el { position: absolute; right: -11px; bottom: -3px; font-size: 11px; }
.tile .nm { font-weight: 800; font-size: 11px; line-height: 1.15; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .ds { font-size: 9.5px; line-height: 1.15; color: var(--muted); height: 2.3em; overflow: hidden; }
.tile .lv { display: flex; gap: 2px; width: 100%; justify-content: center; min-height: 3px; }
.tile .lv i { flex: 1; max-width: 9px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.15); }
.tile .lv i.on { background: var(--accent); }
.tile button {
  width: 100%; padding: 5px 2px; font: inherit; font-size: 12px; font-weight: 800; border: 0; border-radius: 8px;
  background: var(--accent); color: var(--accent-ink); cursor: pointer; touch-action: manipulation; white-space: nowrap;
}
.tile button:disabled { background: rgba(255, 255, 255, 0.12); color: var(--muted); cursor: default; }
.toggle { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.toggle input { width: 20px; height: 20px; }

@media (max-height: 460px) {
  .hud-left { width: 130px; }
  #team { display: none; }
  #minimap { width: 76px !important; height: 76px !important; }
  .boss-intro canvas { width: 100px; height: 100px; }
  .boss-intro b { font-size: 22px; }
  .rbtn.shop { top: max(8px, var(--safe-t)); right: calc(max(10px, var(--safe-r)) + 104px); }
  .hud-right { flex-direction: row-reverse; }
  #banner-t { font-size: 24px; }
  .banner { top: 18%; }
  .sheet {
    left: auto; right: 0; top: 0; bottom: 0; transform: none; width: min(340px, 48vw);
    max-height: none; border-radius: 20px 0 0 20px; border-bottom: 1px solid var(--line);
    padding: max(12px, var(--safe-t)) max(12px, var(--safe-r)) 12px 14px;
  }
  .big-code { font-size: 26px; }
  .modal-card.shop-card .modal-head h2 { font-size: 18px; }
  .tip { font-size: 11.5px; max-width: min(340px, calc(100vw - 300px)); }
  .elbar { top: calc(max(8px, var(--safe-t)) + 56px); }
  .elbar button.elmain { width: 42px; height: 42px; font-size: 18px; }
  #b-use { bottom: calc(max(14px, var(--safe-b)) + 150px); right: calc(max(14px, var(--safe-r)) + 150px); }
  .quickbar { gap: 6px; margin-top: 8px; }
  .quickbar .rbtn { width: 40px; height: 40px; font-size: 17px; }
  .gunpick { bottom: calc(max(14px, var(--safe-b)) + 76px); right: calc(max(14px, var(--safe-r)) + 130px); max-height: calc(100vh - 170px); }
  .gunpick button { width: 136px; height: 40px; }
  .elbar button { width: 40px; height: 40px; font-size: 18px; }
  .card { padding: 14px 14px; gap: 8px; }
  h1 { font-size: 24px; }
  /* shop on short screens: upgrades in 4 columns without the description line */
  #shop-items .tile .ds, #shop-clsitems .tile .ds { display: none; }
  .modal-card { gap: 7px; padding: 10px 12px; }
  .modal-card .btn { padding-top: 8px; padding-bottom: 8px; }
  #pause .modal-card { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  #pause .modal-head, #pause p { grid-column: 1 / -1; }
  #pause p { margin: 0; }
  .modal-card.shop-card .muted.small.center { display: none; }
}

/* main menu on a phone held sideways: two columns so nothing hides below the fold */
@media (max-height: 460px) and (min-width: 560px) {
  .card.menu-card { width: min(820px, 100%); flex-direction: row; flex-wrap: wrap; align-items: stretch; column-gap: 18px; }
  .menu-card .menu-top { width: 100%; margin: -6px 0 -10px; }
  .menu-a, .menu-b { flex: 1 1 0; gap: 8px; justify-content: center; }
  .menu-card .sub { margin: 0; }
}

/* phone held upright: the centre column is narrow, give the tip the width between the corners */
@media (max-aspect-ratio: 3/4) {
  .tip { max-width: calc(100vw - 140px); }
  /* element buttons as a column on the right edge, under the shop */
  .elbar { flex-direction: column; align-items: flex-end; gap: 10px; top: calc(max(8px, var(--safe-t)) + 168px); }
  .elpick { flex-direction: column; gap: 12px; }
}

/* invite screen stays a narrow single column, also on a phone held sideways */
@media (max-height: 460px) and (min-width: 560px) {
  .card.menu-card.invite { width: min(440px, 100%); flex-direction: column; flex-wrap: nowrap; }
  .menu-card.invite .menu-a, .menu-card.invite .menu-b { flex: 0 0 auto; }
}

/* ---------- minimal SVG icon buttons (ui/icons.js) ---------- */
.rbtn .ico { width: 26px; height: 26px; color: #fff; position: relative; z-index: 1; pointer-events: none; }
.rbtn.small .ico { width: 21px; height: 21px; }
.ico .slash { display: none; stroke: #ff5a4a; stroke-width: 2.6; }
.off > .ico .slash { display: inline; }
.rbtn.shop .ico { width: 24px; height: 24px; }
/* element colours */
[data-el="fire"] .ico { color: #ff8a3c; }
[data-el="lightning"] .ico { color: #ffe14a; }
[data-el="ice"] .ico { color: #8fe0ff; }
[data-el="earth"] .ico { color: #d9b07a; }
.elbar button .ico { width: 24px; height: 24px; pointer-events: none; }
.elbar button.elmain b { display: inline-flex; }
/* weapon button: small swap arrows in the corner */
#b-gun .swap { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(10, 16, 8, 0.9); display: flex; align-items: center; justify-content: center; }
#b-gun .swap .ico { width: 13px; height: 13px; }
/* drag button: icon + short label */
#b-drag .ico { width: 22px; height: 22px; }
/* context action: feed the giant / meat crate */
#b-use { bottom: calc(max(14px, var(--safe-b)) + 218px); right: calc(max(14px, var(--safe-r)) + 76px); width: 64px; height: 56px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-color: #ffb347; }
#b-use b { display: inline-flex; }
#b-use b .ico { width: 22px; height: 22px; color: #ffcf8a; }
#b-use span { font-size: 10px; font-weight: 800; white-space: nowrap; }
.shamanpanel { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(max(14px, var(--safe-b)) + 96px); z-index: 7; width: min(320px, calc(100vw - 32px));
  padding: 10px 12px; border-radius: 14px; background: rgba(14, 10, 22, 0.88); border: 1px solid rgba(125, 243, 255, 0.55); pointer-events: auto; font-size: 13px; }
.shamanpanel p { margin: 6px 0; line-height: 1.35; }
.shamanpanel .sp-head { display: flex; align-items: center; justify-content: space-between; }
.shamanpanel .sp-head b { color: #7df3ff; font-size: 15px; }
.shamanpanel .sp-x { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; color: #fff; }
.shamanpanel .sp-has { color: #b4ff5a; font-weight: 700; }
.shamanpanel .sp-pray { color: #ffd23d; font-weight: 800; }
.shamanpanel .sp-bar { position: relative; height: 18px; border-radius: 9px; background: rgba(255, 255, 255, 0.12); overflow: hidden; margin: 6px 0; }
.shamanpanel .sp-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ffb347, #ffd23d); }
.shamanpanel .sp-bar span { position: relative; display: block; text-align: center; font-weight: 800; font-size: 12px; line-height: 18px; text-shadow: 0 1px 2px #000; }
.shamanpanel .sp-give { width: 100%; height: 40px; border-radius: 12px; border: 0; background: #ffd23d; color: #2a1e00; font-weight: 900; font-size: 15px; }
.shamanpanel .sp-give:disabled { opacity: 0.45; }
.boxpanel { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(max(14px, var(--safe-b)) + 96px); z-index: 6;
  display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 14px; background: rgba(10, 16, 8, 0.72); border: 1px solid rgba(255, 179, 71, 0.55); pointer-events: auto; }
.boxpanel .row { display: flex; align-items: center; gap: 4px; min-height: 32px; }
.boxpanel .row > span { min-width: 44px; font-size: 11px; font-weight: 800; color: #ffcf8a; display: inline-flex; }
.boxpanel .row > span .ico { width: 20px; height: 20px; }
.boxpanel .mi { width: 32px; height: 32px; padding: 0; border-radius: 9px; border: 1px solid rgba(255, 207, 138, 0.6); background: rgba(255, 179, 71, 0.18); color: #ffcf8a; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.boxpanel .mi:active { transform: scale(0.9); }
.boxpanel .mi.full { opacity: 0.35; }
.boxpanel .mi .ico { width: 20px; height: 20px; }
.boxpanel .slot { width: 32px; height: 32px; border-radius: 9px; border: 1px dashed rgba(255, 255, 255, 0.25); }
.boxpanel .more, .boxpanel .empty { font-style: normal; font-size: 12px; font-weight: 800; color: rgba(255, 255, 255, 0.7); padding: 0 4px; }
.carry { font-weight: 900; font-size: 15px; color: #ffcf8a; text-shadow: 0 2px 4px #000; margin-top: -2px; }
/* cooldown: a dark sector sweeping away (--cd from 1 to 0) + seconds left */
.rbtn .cd { position: absolute; inset: -1px; border-radius: 50%; z-index: 2; pointer-events: none; text-decoration: none;
  background: conic-gradient(rgba(0, 0, 0, 0.62) calc(var(--cd, 0) * 360deg), transparent 0); }
.rbtn .cdt { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; font-style: normal;
  font-weight: 900; font-size: 15px; text-shadow: 0 1px 3px #000; pointer-events: none; }
.rbtn.cooling .ico { opacity: 0.45; }
.rbtn.ready-now { animation: ready-pop 0.35s ease-out; }
@keyframes ready-pop { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); } 50% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.25); } 100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } }

/* shop and weapon list: the same line icons as the HUD */
.tile .ic .ico { width: 26px; height: 26px; color: #f2f5ea; }
.tile.eq .ic .ico { color: var(--gold); }
.tile.lock .ic .ico { color: #9aa58f; }
.gunpick button b .ico { width: 24px; height: 24px; color: #fff; }
.gunpick button.on b .ico { color: var(--gold); }

/* boss shield over the health bar (quest Guardian) */
.bossbar .t { position: relative; }
.bossbar .t .sf { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #6cc8ff, #b8ecff); opacity: 0.9; }

/* room list / new room / PIN (ui/roomlist.js) */
.rooms-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; }
.rooms-list li button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.06); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rooms-list li button:hover { border-color: rgba(255, 210, 61, 0.6); }
.rooms-list .rt { flex: 1; min-width: 0; }
.rooms-list .rt b { display: block; font-size: 15px; }
.rooms-list .rt span { font-size: 12px; opacity: 0.7; }
.rooms-list .rn { font-weight: 900; white-space: nowrap; }
.rooms-list .rl { width: 22px; text-align: center; }
.tabs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.tabs2 .btn.on { background: var(--accent); color: #10240c; border-color: transparent; }
#newroom-pin, #pinask-pin { width: 100%; margin: 4px 0 10px; letter-spacing: 6px; }
.lobby-title { font-weight: 800; margin-top: 2px; }
.lobby-pin { font-size: 13px; color: var(--gold); font-weight: 800; }

/* quest board list (ui/questpick.js) */
.qp-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.qp-list button { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; border: 1px solid rgba(255, 210, 61, 0.5); background: rgba(255, 210, 61, 0.08); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.qp-list button:disabled { opacity: 0.5; border-color: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.04); cursor: default; }
.qp-list b { font-size: 16px; }
.qp-list span { font-size: 13px; opacity: 0.85; }
.qp-list .qp-r { color: var(--gold); font-weight: 800; }
.qp-list .qp-s { font-weight: 900; }

/* quest vote (a friend proposed a quest) */
.qvote { margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(14, 22, 10, 0.9); border: 1px solid rgba(255, 210, 61, 0.6); pointer-events: auto; max-width: 340px; text-align: center; }
.qvote p { margin: 0 0 8px; font-weight: 700; font-size: 14px; }
.qvote .row { justify-content: center; gap: 8px; }

/* class buff button: class colour, glows while the buff is on */
#b-buff { bottom: calc(max(14px, var(--safe-b)) + 78px); right: calc(max(14px, var(--safe-r)) + 132px); width: 58px; height: 58px; border-width: 3px; border-color: var(--cls, #fff); }
#b-buff b { display: inline-flex; }
#b-buff b .ico { width: 28px; height: 28px; color: var(--cls, #fff); }
#b-buff.on { --glow: var(--cls); box-shadow: 0 0 0 3px var(--cls), 0 0 22px var(--cls); animation: glow 1s infinite; }
/* class choice in the shaman's panel */
.sp-cls { display: grid; gap: 8px; margin-top: 8px; }
.sp-cls button { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 12px; border: 2px solid var(--c); background: rgba(255, 255, 255, 0.06); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.sp-cls button b { color: var(--c); font-size: 15px; }
.sp-cls button span { font-size: 12px; opacity: 0.85; }
.sp-need { color: #ffd23d; font-weight: 900; }
/* the shaman's panel never runs off a short (landscape phone) screen */
.shamanpanel { max-height: calc(100vh - 120px - var(--safe-b)); overflow-y: auto; bottom: calc(max(10px, var(--safe-b)) + 60px); }
@media (max-height: 560px) { .sp-cls { grid-template-columns: repeat(3, 1fr); } .sp-cls button span { display: none; } }

/* shop: what the next level gives, now -> after (always shown, even on short screens) */
.tile .st { font-size: 11px; font-weight: 800; color: var(--gold); line-height: 1.2; text-align: center; }
/* light the chapter's campfire */
.ready.light { background: linear-gradient(180deg, #ffb347, #ff7a2a); color: #2a1400; --glow: #ffd27a; animation: glow 1.2s infinite; }

.shamanpanel .sp-k { margin: 10px 0 2px; font-weight: 900; color: #ffd23d; }

/* the class card in the shop: what the buff and the passives give now */
.clscard { margin: 4px 0 8px; padding: 8px 10px; border-radius: 10px; border: 2px solid var(--cls, #fff); background: rgba(0, 0, 0, 0.3); font-size: 12px; line-height: 1.4; }
.clscard b { color: var(--cls, #fff); font-size: 13px; }
.clscard p { margin: 3px 0 0; }
.clscard .muted { opacity: 0.75; font-size: 11px; }
.tile.pas { border-style: dashed; }