/* The Glitch Gala — UI styles. Theme accent is set via --accent (room theme). */
:root {
  --bg: #0c0c18;
  --bg2: #151528;
  --panel: rgba(20, 20, 40, 0.92);
  --panel-solid: #181830;
  --line: #2e2e55;
  --text: #f1eee6;
  --muted: #a39f95;
  --accent: #ffd700;
  --good: #4ecdc4;
  --bad: #ff6b6b;
  --warn: #ffa502;
  --glitch: #a29bfe;
  --radius: 12px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; height: 100dvh; }
body {
  background: radial-gradient(ellipse at top, #1d1a3a 0%, var(--bg) 60%);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  overflow: hidden;
}
button, input, select { font: inherit; }
a { color: var(--accent); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 13px; margin: 6px 0; }
.note { background: rgba(255, 215, 0, 0.08); border: 1px solid var(--line); padding: 8px 10px; border-radius: 8px; margin: 8px 0; }
.code { font-family: var(--mono); letter-spacing: 2px; color: var(--accent); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.row.spread { justify-content: space-between; }
kbd { background: #2a2a48; border: 1px solid #44447a; border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-family: var(--mono); font-size: 12px; }

#app { height: 100%; }
.screen { display: none; height: 100%; overflow: auto; padding: 20px; }
.screen.active { display: block; }
/* The game screen is never display:none — Phaser needs a real size (a 0x0 parent
   breaks WebGL framebuffers). When inactive it is hidden with visibility instead. */
#screen-game { display: block; position: fixed; inset: 0; padding: 0; overflow: hidden; visibility: hidden; z-index: -1; pointer-events: none; }
#screen-game.active { visibility: visible; z-index: 1; pointer-events: auto; }

/* ---------- buttons & inputs ---------- */
.btn { border: 1px solid transparent; border-radius: 10px; padding: 9px 16px; cursor: pointer; color: var(--text); background: #2a2a48; transition: transform .08s, filter .15s; }
.btn:hover:not(:disabled) { filter: brightness(1.15); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(135deg, var(--accent), #e6a800); color: #1a1400; font-weight: 700; }
.btn.secondary { background: #34345e; border-color: #4a4a86; }
.btn.danger { background: #5a1f2a; border-color: #8a2d3d; }
.btn.ghost { background: transparent; border-color: var(--line); }
.btn.tiny { padding: 3px 9px; font-size: 12px; border-radius: 7px; }
input[type=text], input[type=password], input[type=number], select {
  background: #10101f; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-width: 0;
}
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }
.field-label { font-size: 13px; color: var(--muted); margin-top: 8px; }
.form-grid { display: grid; gap: 10px; }

/* ---------- home ---------- */
.brand { text-align: center; margin: 10px 0 18px; }
.brand h1 { font-size: clamp(32px, 5vw, 54px); margin: 0; letter-spacing: 2px; background: linear-gradient(90deg, #ffd700, #fd79a8, #a29bfe); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 40px rgba(255, 215, 0, .15); }
.subtitle { color: var(--muted); margin: 6px 0; }
.motd { color: var(--accent); min-height: 1em; }
.home-grid { display: grid; grid-template-columns: 300px 1fr; gap: 18px; max-width: 1100px; margin: 0 auto; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.card h2, .card h3 { margin-top: 0; }
.profile-card { display: flex; flex-direction: column; gap: 8px; }

/* ── compact look summary row on the profile card ────────────────── */
.profile-look-summary {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-top: 1px solid var(--line);
}
.look-swatch-wrap { display: flex; gap: 4px; flex-shrink: 0; }
.look-swatch {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  display: inline-block; flex-shrink: 0;
}
.look-swatch-accent { transform: translateX(-6px); }
.look-swatch-lg { width: 26px; height: 26px; }
.look-label { flex: 1; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#open-appearance-btn { flex-shrink: 0; }

/* ── Appearance modal ─────────────────────────────────────────────── */
/* .modal-card.appearance-modal-card, not bare .appearance-modal-card: the element carries both
   classes, and .modal-card's own `width: min(420px, 96vw)` (defined later in this file, see the
   "Appearance modal" section far below) has equal specificity — a later same-specificity rule wins
   the cascade regardless of which one looks more "specific" to a reader, so without the compound
   selector bumping specificity here, .modal-card's 420px silently capped this modal on every screen
   size, no matter how wide. Confirmed via screenshot: still narrow on a large desktop viewport. */
.modal-card.appearance-modal-card {
  max-width: 780px; width: 96vw;
  max-height: 90vh; overflow-y: auto;
}
.appearance-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.appearance-modal-header h3 { margin: 0; }
.appearance-modal-body {
  display: grid;
  /* minmax(0, 1fr), not bare 1fr: a bare 1fr track expands to minmax(auto, 1fr), which refuses to
     shrink below its content's intrinsic width — on a narrow screen this pushed the controls column
     wider than the card, and since the game's <body> is overflow:hidden (unlike the admin console's
     overflow:auto), the excess was silently clipped instead of scrolling. */
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 20px;
}
.appearance-preview-col {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  position: sticky; top: 0; align-self: start;
}
.appearance-preview-canvas {
  display: block; border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  width: 160px; height: 160px;
}
.appearance-swatch-row { display: flex; gap: 8px; }
.appearance-controls-col { display: flex; flex-direction: column; gap: 14px; }
/* .ap-section is a <details> element — collapsible so a player only has to look at the section
   they're currently adjusting instead of the whole "Edit Your Look" popup at once. */
.ap-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.ap-section-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; user-select: none;
}
.ap-section-title::-webkit-details-marker { display: none; }
.ap-section-title::before { content: '▸'; display: inline-block; font-size: 10px; transition: transform .15s ease; flex-shrink: 0; }
.ap-section[open] > .ap-section-title::before { transform: rotate(90deg); }
.ap-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 400px) { .ap-two-col { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .appearance-modal-body { grid-template-columns: 1fr; }
  /* position:static, not the base rule's sticky: in the single-column stack the preview would
     otherwise stay pinned at the top and overlap whatever scrolls underneath it (confirmed — it sat
     on top of the Accessory section's controls) instead of just being the first stacked block. This
     override MUST come after the base .appearance-preview-col rule above — a same-specificity
     selector earlier in source order loses the cascade regardless of the media query matching,
     which is exactly why this fix silently did nothing the first time it was written before the base
     rule instead of after it. */
  .appearance-preview-col { display: flex; flex-direction: row; align-items: center; gap: 14px; position: static; }
}

.avatar-preview { position: relative; width: 72px; height: 90px; margin: 0 auto 6px; }
.avatar-body { position: absolute; bottom: 0; left: 8px; width: 56px; height: 64px; border-radius: 28px 28px 14px 14px; border: 3px solid rgba(0, 0, 0, .5); background: var(--accent); }
.avatar-body::after { content: ""; position: absolute; top: 14px; left: 18px; width: 30px; height: 16px; border-radius: 8px; background: #bfe9ff; border: 2px solid rgba(0, 0, 0, .4); }
.avatar-hat { position: absolute; top: -4px; left: 0; right: 0; text-align: center; font-size: 30px; z-index: 1; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.swatch[aria-checked=true] { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.profile-stats { font-size: 13px; color: var(--muted); display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 6px; }
.profile-stats b { color: var(--text); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; flex-wrap: wrap; }
.tab { background: none; border: none; color: var(--muted); padding: 8px 14px; cursor: pointer; border-bottom: 2px solid transparent; }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.room-list { display: grid; gap: 8px; max-height: 52vh; overflow: auto; }
.room { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.room .name { font-weight: 600; }
.room .meta { font-size: 12px; color: var(--muted); }
.phase-tag { font-size: 11px; padding: 2px 7px; border-radius: 99px; background: #2a2a48; }
.phase-tag.lobby { background: #1f4a3f; }
.phase-tag.playing, .phase-tag.meeting, .phase-tag.reveal { background: #4a1f3a; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.table th { color: var(--muted); font-weight: 500; }
.howto { max-height: calc(100vh - 220px); overflow-y: auto; padding-right: 8px; }
.howto-section { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.howto-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.howto-banner {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(162, 155, 254, 0.12) 100%);
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.howto-banner h4 {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: normal;
}
.howto-banner p {
  margin: 0;
  font-size: 13.5px;
  color: #f1f5f9;
  line-height: 1.5;
}
.howto-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 16px;
}
.howto-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  text-decoration: none;
  transition: all 0.2s;
}
.howto-link-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.howto h3 { margin: 12px 0 8px; font-size: 16px; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.howto h4 { margin: 12px 0 4px; font-size: 13.5px; color: #fff; text-transform: uppercase; letter-spacing: 0.5px; }
.howto p { margin: 6px 0; line-height: 1.6; font-size: 13.5px; color: #e2e8f0; }
.howto ul { padding-left: 20px; line-height: 1.7; margin: 6px 0 10px; font-size: 13.5px; color: #cbd5e1; }
.howto li { margin-bottom: 4px; }
.howto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.howto-card { background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 10px 12px; }
.howto-card strong { display: block; margin-bottom: 3px; font-size: 13.5px; }
.howto-card p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.howto kbd { background: #202038; border: 1px solid #4a4a70; border-radius: 4px; padding: 1px 5px; font-size: 11.5px; font-family: inherit; font-weight: 600; color: #ffd700; box-shadow: 0 1px 2px rgba(0,0,0,0.4); display: inline-block; }
.c-socialite { color: #ffd700; font-weight: 600; }
.c-glitch { color: #a29bfe; font-weight: 600; }
.c-detective { color: #70a1ff; font-weight: 600; }
.c-medic { color: #7bed9f; font-weight: 600; }
.c-engineer { color: #ffa502; font-weight: 600; }
.c-jester { color: #fd79a8; font-weight: 600; }
.c-sheriff { color: #f0932b; font-weight: 600; }
.c-mayor { color: #eccc68; font-weight: 600; }
.c-tracker { color: #1dd1a1; font-weight: 600; }
.c-shapeshifter { color: #be2edd; font-weight: 600; }
.c-illusionist { color: #e056fd; font-weight: 600; }
.c-chronoweaver { color: #54a0ff; font-weight: 600; }
.c-oracle { color: #c7ecee; font-weight: 600; }
.c-bountyhunter { color: #d63031; font-weight: 600; }
.c-arsonist { color: #ff4d4d; font-weight: 600; }
.c-doubleagent { color: #6c5ce7; font-weight: 600; }
.c-seeker { color: #00cec9; font-weight: 600; }
.c-hider { color: #7bed9f; font-weight: 600; }
.c-survivor { color: #2ecc71; font-weight: 600; }
.c-infected { color: #e84393; font-weight: 600; }
.c-sun { color: #ffd700; font-weight: 600; }
.c-moon { color: #70a1ff; font-weight: 600; }
.c-thief { color: #f1c40f; font-weight: 600; }
.c-warden { color: #3498db; font-weight: 600; }
.c-ember { color: #e17055; font-weight: 600; }
.footer { text-align: center; margin-top: 20px; font-size: 12px; }

/* ---------- lobby ---------- */
.lobby-head { display: flex; justify-content: space-between; align-items: center; max-width: 1300px; margin: 0 auto 12px; }
.lobby-head h2 { margin: 0; }
.lobby-grid { display: grid; grid-template-columns: 320px 1fr 280px; gap: 16px; max-width: 1300px; margin: 0 auto; align-items: start; }
.player-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.player-list li { display: flex; align-items: center; gap: 8px; background: var(--bg2); border-radius: 8px; padding: 6px 8px; }
.player-list .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(0,0,0,.4); flex: none; }
.player-list .pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-list .tag { font-size: 11px; padding: 1px 6px; border-radius: 99px; background: #2a2a48; color: var(--muted); }
.player-list .tag.ready { background: #1f4a3f; color: #9ff5d6; }
.player-list .tag.host { background: #4a3f1f; color: #ffe9a0; }
.player-list .tag.off { background: #4a1f1f; color: #ffb0b0; }
.rules-card { max-height: calc(100vh - 120px); display: flex; flex-direction: column; }
.rules-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.rules-head h3 { margin: 0; }
/* Pickers + rules scroll together so the sticky Apply bar never covers a squeezed form. */
.rules-scroll { overflow: auto; flex: 1; min-height: 0; padding-right: 4px; scroll-padding-bottom: 12px; }
.rules-form { padding-right: 0; }
.rules-form fieldset { border: 1px solid var(--line); border-radius: 10px; margin: 0 0 10px; padding: 8px 12px; }
.rules-form legend { color: var(--accent); padding: 0 6px; font-weight: 600; }
.rule { display: grid; grid-template-columns: 1fr 150px; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px dashed rgba(255,255,255,.05); }
.rule:last-child { border-bottom: none; }
.rule .rlabel { font-size: 14px; }
.rule .rhelp { font-size: 12px; color: var(--muted); }
.rule.changed .rlabel::after { content: " •"; color: var(--accent); }
.rule.locked { opacity: .6; }
.rule .rinput { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.rule input[type=range] { width: 90px; accent-color: var(--accent); }
.rule output { font-family: var(--mono); font-size: 12px; min-width: 44px; text-align: right; }
.rule .multi { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.rule .multi label { flex-direction: row; font-size: 12px; gap: 3px; color: var(--text); }
.sticky-actions { border-top: 1px solid var(--line); padding-top: 8px; }
.feedback { font-size: 13px; color: var(--warn); }
.profile-edit summary { cursor: pointer; color: var(--muted); margin-top: 8px; font-weight: 600; }
.profile-edit summary:hover { color: var(--accent); }

/* ---------- collapsible rules builder ---------- */
.rules-head-title { display: flex; align-items: center; gap: 8px; }
.rules-toggle-btn { display: flex; align-items: center; gap: 6px; font-size: 15px; cursor: pointer; padding: 4px 8px; border-radius: 8px; border: none; background: transparent; color: var(--text); }
.rules-toggle-btn:hover { background: rgba(255, 255, 255, 0.08); }
.rules-toggle-btn b { color: var(--text); }
.rules-chevron { display: inline-block; transition: transform .2s ease; font-size: 13px; color: var(--accent); }
.rules-summary-chip { font-size: 12px; color: var(--accent); background: rgba(255, 215, 0, 0.12); border: 1px solid rgba(255, 215, 0, 0.28); border-radius: 99px; padding: 2px 10px; font-weight: 500; }
.rules-card.collapsed { max-height: none; }
.rules-card.collapsed #rules-scroll-area,
.rules-card.collapsed #rules-sticky-actions,
.rules-card.collapsed #preset-desc,
.rules-card.collapsed #rules-preset-row,
.rules-card.collapsed #rules-feedback { display: none !important; }
.rules-card.collapsed .rules-summary-chip { display: inline-block !important; }
.rules-card.collapsed .rules-chevron { transform: rotate(-90deg); }

/* ---------- character preview & guest appearance ---------- */
.look-preview-container { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 8px 0 10px; }
.look-preview-canvas-wrap { position: relative; width: 70px; height: 80px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(255, 215, 0, 0.08) 0%, transparent 72%); border-radius: 8px; }
.look-canvas { display: block; }
.look-preview-meta { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.look-preview-name { font-weight: 700; color: var(--accent); }
.look-selects-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.look-selects-row select { flex: 1 1 calc(50% - 4px); min-width: 105px; padding: 6px 10px; font-size: 13px; text-overflow: ellipsis; }

/* Custom color picker & clash warning */
.custom-color-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 4px; padding: 6px 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.custom-color-label { font-size: 13px; font-weight: 600; color: var(--text); }
.custom-color-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 30px; height: 30px; padding: 0; border: 2px solid rgba(255, 255, 255, 0.25); border-radius: 50%; cursor: pointer; background: none; }
.custom-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.custom-color-input::-webkit-color-swatch { border: none; border-radius: 50%; }
.custom-color-hex { font-family: monospace; font-size: 12px; color: var(--text2); }
.color-clash-warning { font-size: 12px; color: #ff6b6b; background: rgba(255, 107, 107, 0.12); border: 1px solid rgba(255, 107, 107, 0.35); border-radius: 6px; padding: 4px 8px; margin-top: 4px; }

/* Multi-device account / login panel */
.account-card {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.account-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.account-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.status-dot.guest {
  background: #a0aec0;
  box-shadow: 0 0 6px rgba(160, 174, 192, 0.5);
}
.status-dot.active {
  background: #2ecc71;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.7);
}
.account-active-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.account-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--accent);
}
.account-key-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--bg2);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
}
.account-key-bar code {
  font-family: monospace;
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}
.account-nav-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
  gap: 4px;
}
.acc-tab {
  flex: 1;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text2);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: all .15s ease;
}
.acc-tab:hover {
  color: var(--text);
}
.acc-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.acc-tab-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.acc-hint {
  font-size: 11px;
  color: var(--text2);
  line-height: 1.4;
  margin: 0 0 4px;
}
.acc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.acc-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
}
.acc-field input {
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
}
.pw-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.pw-input-wrap input {
  padding-right: 36px;
}
.pw-toggle-btn {
  position: absolute;
  right: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  opacity: 0.65;
}
.pw-toggle-btn:hover {
  opacity: 1;
}
.acc-submit-btn {
  margin-top: 4px;
  width: 100%;
  padding: 8px;
  font-weight: 700;
}
.acc-logged-in {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.acc-cta-btn {
  background: var(--accent);
  color: #111;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-weight: 700;
  cursor: pointer;
  display: inline-block;
  margin-top: 6px;
  transition: opacity .15s ease;
}
.acc-cta-btn:hover {
  opacity: 0.9;
}

/* Guest appearances in lobby */
.guest-avatar-wrap { width: 32px; height: 38px; display: flex; align-items: center; justify-content: center; flex: none; }
.guest-avatar-canvas { display: block; }
.guest-charm { font-size: 13px; margin-left: 2px; }
.lobby-guest-lineup { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; padding: 4px 2px 10px; margin-bottom: 8px; }
.lobby-guest-lineup:empty { display: none; }
.lineup-card { min-width: 0; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.lineup-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
.lineup-card.is-me { border-color: var(--accent); box-shadow: 0 0 10px rgba(255, 215, 0, 0.25); }
.lineup-name { font-size: 11px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lineup-badge { font-size: 9px; padding: 1px 4px; border-radius: 99px; background: #1f4a3f; color: #9ff5d6; }

/* ---------- game ---------- */
#phaser-game { position: absolute; inset: 0; }
#phaser-game canvas { display: block; }
#fog { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#hud-top { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; justify-content: center; z-index: 20; max-width: min(720px, calc(100vw - 480px)); pointer-events: none; }
#hud-top > * { pointer-events: auto; }
.hud-pill { background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px; font-size: 13px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
#hud-role { max-width: 175px; overflow: hidden; text-overflow: ellipsis; }
#hud-timer.warning { color: var(--bad); animation: pulse 1s infinite; }
.progress { position: relative; width: clamp(120px, 15vw, 175px); height: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; flex-shrink: 0; }
.progress .bar { height: 100%; width: 0; background: linear-gradient(90deg, #2ecc71, var(--good)); transition: width .4s; }
.progress span { position: absolute; inset: 0; display: block; line-height: 20px; text-align: center; font-size: 11px; font-weight: 600; text-shadow: 0 1px 2px #000; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-panel { position: absolute; z-index: 20; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; max-width: 250px; }
#hud-missions { top: 50px; left: 10px; max-height: 45vh; overflow: auto; max-width: min(320px, calc(100vw - 20px)); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: max-height 0.2s ease, padding 0.15s ease, border-radius 0.15s ease; }
#hud-missions:empty { display: none !important; }
.hud-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; user-select: none; }
.hud-panel-title { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--accent); }
.hud-panel-count { font-size: 11px; opacity: 0.85; font-weight: normal; color: var(--muted); }
.hud-panel-toggle { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--muted); font-size: 11px; line-height: 1; padding: 3px 6px; cursor: pointer; border-radius: 6px; transition: all 0.15s ease; display: inline-flex; align-items: center; justify-content: center; }
.hud-panel-toggle:hover { background: rgba(255, 255, 255, 0.2); color: #fff; border-color: var(--accent); }
.hud-panel-body { margin-top: 6px; }
#hud-missions.collapsed { max-height: none; overflow: visible; padding: 4px 10px; border-radius: 99px; cursor: pointer; background: var(--panel); border-color: var(--line); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); width: auto; max-width: max-content; }
#hud-missions.collapsed:hover { border-color: var(--accent); background: rgba(30, 24, 55, 0.95); box-shadow: 0 0 10px rgba(255, 215, 0, 0.25); }
#hud-missions.collapsed .hud-panel-header { gap: 6px; }
#hud-missions.collapsed .hud-panel-body { display: none !important; }
#hud-missions.collapsed .hud-panel-toggle { padding: 1px 4px; }
#hud-missions .m { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
#hud-missions .m.done { color: var(--good); text-decoration: line-through; opacity: .7; }
#hud-missions .m.sab { color: var(--bad); }
#hud-events { bottom: 90px; left: 10px; max-height: 26vh; overflow: hidden; }
#hud-events div { padding: 1px 0; }
#minimap { position: absolute; top: 10px; right: 10px; z-index: 20; background: rgba(10, 10, 20, .8); border: 1px solid var(--accent); border-radius: 8px; }
#minimap.big { width: min(420px, calc(100vw - 20px)); height: min(270px, 45vh); }
#sabotage-banner { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 21; background: rgba(120, 20, 40, .9); border: 2px solid var(--bad); border-radius: 10px; padding: 8px 16px; font-weight: 700; animation: pulse 1s infinite; text-align: center; }
#impersonation-banner { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 22; background: rgba(140, 20, 20, .92); border: 2px solid #ff4444; border-radius: 10px; padding: 10px 18px; font-weight: 700; color: #fff; box-shadow: 0 0 20px rgba(255, 68, 68, .5); text-align: center; }
#ghost-banner { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 19; background: rgba(60, 60, 110, .85); border-radius: 10px; padding: 6px 14px; font-size: 13px; }
#status-banner { position: absolute; top: 54px; left: 50%; transform: translateX(-50%); z-index: 19; background: rgba(30, 22, 55, .94); border: 1px solid var(--accent); box-shadow: 0 4px 18px rgba(0, 0, 0, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 99px; padding: 5px 16px; font-size: 13px; font-weight: 500; color: #fff; text-align: center; white-space: normal; word-break: normal; overflow-wrap: break-word; line-height: 1.35; width: max-content; max-width: min(650px, calc(100vw - 480px)); min-width: min(260px, calc(100vw - 32px)); box-sizing: border-box; pointer-events: none; }
#td-panel { position: absolute; top: 160px; right: 10px; z-index: 21; display: flex; flex-direction: column; gap: 6px; align-items: center; background: rgba(14, 12, 28, 0.92); border: 1px solid var(--line); border-radius: 14px; padding: 8px 14px; backdrop-filter: blur(12px); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55); max-width: min(360px, 96vw); max-height: calc(100vh - 260px); overflow: auto; pointer-events: auto; }
.td-row { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; }
.td-stats { font-size: 13px; font-weight: 600; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 4px; flex-wrap: wrap; }
.td-build { display: flex; gap: 6px; align-items: center; justify-content: center; }
.td-count { font-size: 11px; font-family: var(--mono); color: var(--muted); padding: 2px 6px; background: rgba(255, 255, 255, 0.05); border-radius: 6px; }
.td-tower { background: rgba(255, 215, 0, 0.08); border: 1px solid rgba(255, 215, 0, 0.25); border-radius: 8px; padding: 4px 8px; width: 100%; }
.td-tname { font-weight: 600; font-size: 12px; color: var(--accent); margin-right: 4px; }
.td-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; font-size: 12px; font-weight: 600; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; transition: all 0.15s ease; }
.td-btn:hover { border-color: var(--accent); background: rgba(255, 255, 255, 0.08); transform: translateY(-1px); }
.td-btn.sel { border-color: var(--accent); background: rgba(255, 215, 0, 0.18); box-shadow: 0 0 10px rgba(255, 215, 0, 0.35); }
.td-btn.poor { opacity: 0.55; border-color: rgba(255, 100, 100, 0.3); }
.td-btn.wide { padding: 4px 12px; }
.td-btn small { font-size: 10px; opacity: 0.85; margin-left: 2px; }
.td-btn kbd { font-size: 9px; font-family: var(--mono); padding: 1px 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--muted); margin-left: 4px; }
.td-perk { font-size: 12px; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.td-perk select { background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 3px 8px; font-size: 11px; }
.td-label { font-size: 11px; font-weight: 600; color: var(--muted); }
#minimap.big ~ #td-panel { top: 290px; }
/* Touch: tuck the build panel under the HUD pills, clear of the joystick (left) and action grid (right). */
body.touch #td-panel { top: 52px; right: auto; left: max(8px, env(safe-area-inset-left)); max-width: calc(100vw - 150px); max-height: 46dvh; padding: 6px 8px; gap: 4px; }
body.touch .td-btn { padding: 6px 8px; min-height: 36px; }
body.touch .td-btn kbd { display: none; }
body.touch .td-perk select { max-width: 150px; }
@media (orientation: landscape) and (max-height: 520px) { body.touch #td-panel { top: 38px; max-height: 40dvh; } }
.td-tools { display: inline-flex; gap: 4px; margin-left: auto; }
.td-icon { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 6px; width: 24px; height: 22px; cursor: pointer; font-size: 12px; line-height: 1; padding: 0; }
.td-icon.on { color: var(--accent); border-color: var(--accent); }
.td-affix { font-size: 11px; font-weight: 700; color: #ffd166; background: rgba(255, 209, 102, 0.12); border: 1px solid rgba(255, 209, 102, 0.35); border-radius: 99px; padding: 1px 8px; }
.td-sel { font-size: 11px; line-height: 1.3; text-align: center; max-width: 330px; }
.td-preview { font-size: 12px; gap: 8px; background: rgba(255, 255, 255, 0.04); border-radius: 8px; padding: 3px 8px; }
.td-pips { display: inline-flex; gap: 2px; vertical-align: middle; }
.td-pips i { width: 6px; height: 6px; border-radius: 50%; background: #2d3436; display: inline-block; }
.td-pips i.on { background: #ffd700; box-shadow: 0 0 4px rgba(255, 215, 0, 0.8); }
.td-hot { animation: pulse 0.8s infinite; }
#td-panel.compact { padding: 5px 8px; gap: 4px; }
#td-panel.compact .td-btn { padding: 4px 7px; }
#td-banner { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); z-index: 30; pointer-events: none; text-align: center; padding: 10px 26px; border-radius: 14px; background: radial-gradient(ellipse at center, rgba(40, 20, 60, 0.85), rgba(10, 8, 20, 0.6)); border: 1px solid rgba(255, 107, 154, 0.5); box-shadow: 0 0 40px rgba(255, 107, 154, 0.35); }
#td-banner.show { animation: td-banner-in 2.6s ease forwards; }
.td-banner-title { font-size: 34px; font-weight: 800; letter-spacing: 1px; color: #fff; text-shadow: 0 0 12px rgba(255, 107, 154, 0.9); }
.td-banner-sub { font-size: 14px; color: #ffd166; margin-top: 4px; }
@keyframes td-banner-in { 0% { opacity: 0; transform: translateX(-50%) scale(0.7); } 12% { opacity: 1; transform: translateX(-50%) scale(1.05); } 20% { transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-12px); } }
body.touch .td-banner-title { font-size: 24px; }
body.touch .td-sel, body.touch .td-preview { display: none; }
#prompt { position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%); z-index: 20; background: rgba(0, 0, 0, .75); border: 1px solid var(--accent); border-radius: 8px; padding: 6px 14px; font-size: 14px; }
#action-bar { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; justify-content: center; max-width: 96vw; }
.act { position: relative; min-width: 76px; height: 64px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; font-weight: 600; font-size: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; overflow: hidden; }
.act small { font-size: 10px; color: var(--muted); font-family: var(--mono); }
.act.mini { min-width: 44px; height: 44px; font-size: 18px; }
.act.ready { border-color: var(--accent); box-shadow: 0 0 12px rgba(255, 215, 0, .35); }
.act.danger.ready { border-color: var(--bad); box-shadow: 0 0 12px rgba(255, 107, 107, .5); }
.act:disabled { opacity: .4; cursor: not-allowed; }
.act .cd { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); display: grid; place-items: center; font-family: var(--mono); font-size: 16px; }
.sab-menu { display: flex; gap: 4px; margin-left: 8px; }
.glitch-only, .role-only { display: none; }
body.is-glitch .glitch-only { display: flex; }
body.is-glitch .act.glitch-only { display: flex; }
body.has-ability .role-only { display: flex; }
#emote-bar { position: absolute; right: 10px; top: 250px; z-index: 20; display: flex; flex-direction: column; gap: 4px; }
body.in-meeting #emote-bar { z-index: 61; }
.emote-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: 18px; cursor: pointer; }
.emote-btn:hover { border-color: var(--accent); }
.vote-card .emote { font-size: 20px; }
#joystick { position: absolute; left: 24px; bottom: 110px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, .06); border: 2px solid rgba(255, 255, 255, .15); z-index: 22; touch-action: none; }
#joystick .knob { position: absolute; left: 35px; top: 35px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 215, 0, .45); }
#joystick .knob.sprint { background: rgba(255, 140, 26, .75); box-shadow: 0 0 16px rgba(255, 140, 26, .8); }

/* fixed, not absolute: an absolutely-positioned overlay is anchored to the scrolled document, so on
   any page where the trigger sits below the fold (the admin console's long scrollable tabs; a modal
   opened partway down a page in general) it renders off-screen above the current scroll position
   instead of covering the viewport. Fixed behaves identically inside #screen-game (already pinned to
   the viewport via position:fixed;inset:0, with no ancestor that redefines the fixed containing
   block), so this is a pure bug fix, not a behavior change, for every existing overlay use. */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(5, 5, 15, .78); display: grid; place-items: center; padding: 16px; }
#modal { position: fixed; z-index: 200; }
.reveal-card { text-align: center; animation: pop .5s ease-out; }
.reveal-card h2 { font-size: 64px; margin: 6px 0; }
.reveal-card p { font-size: 18px; max-width: 520px; }
.meeting-card, .minigame-card, .modal-card { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 16px; padding: 18px; width: min(760px, 96vw); max-height: 92vh; overflow: auto; }
.minigame-card { width: min(520px, 96vw); }
.modal-card { width: min(420px, 96vw); }
.timer { font-family: var(--mono); font-size: 22px; color: var(--accent); }
.evidence-board { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px dashed var(--accent); border-radius: 10px; padding: 8px 10px; margin: 8px 0; font-size: 13px; }
.evidence-board #evidence-text { flex: 1; }
.vote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 10px 0; }
.vote-card { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 2px solid var(--line); border-radius: 10px; padding: 8px; cursor: pointer; color: var(--text); text-align: left; }
.vote-card:disabled { cursor: default; }
.vote-card.dead { opacity: .4; text-decoration: line-through; }
.vote-card.mine { border-color: var(--accent); }
.vote-card .badge { margin-left: auto; font-size: 11px; color: var(--good); }
.vote-card .votes { font-size: 12px; color: var(--accent); }
.meeting-result { background: rgba(255, 215, 0, .07); border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 16px; }

/* minigames */
.mg-bar { position: relative; height: 38px; background: #10101f; border: 1px solid var(--line); border-radius: 8px; margin: 14px 0; overflow: hidden; }
.mg-zone { position: absolute; top: 0; bottom: 0; background: rgba(78, 205, 196, .45); border-left: 2px solid var(--good); border-right: 2px solid var(--good); }
.mg-needle { position: absolute; top: -2px; bottom: -2px; width: 4px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.mg-pads { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0; }
.mg-pad { height: 90px; border-radius: 14px; border: 3px solid rgba(0, 0, 0, .35); cursor: pointer; opacity: .55; transition: opacity .1s, transform .1s; font-size: 20px; font-weight: 700; color: rgba(0,0,0,.6); }
.mg-pad.lit { opacity: 1; transform: scale(1.04); box-shadow: 0 0 22px currentColor; }
.mg-wires { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 80px; margin: 14px 0; }
.mg-wire { height: 38px; border-radius: 8px; border: 2px solid rgba(0,0,0,.4); cursor: pointer; }
.mg-wire.selected { outline: 3px solid #fff; }
.mg-wire.done { opacity: .25; cursor: default; }
.mg-hold { width: 100%; height: 90px; font-size: 18px; }
.mg-code { font-family: var(--mono); font-size: 42px; text-align: center; letter-spacing: 12px; margin: 16px 0; color: var(--accent); }
.mg-dots { text-align: center; font-size: 22px; letter-spacing: 6px; }
.mg-status { text-align: center; min-height: 1.4em; font-weight: 600; }
.mg-status.good { color: var(--good); } .mg-status.bad { color: var(--bad); }

/* ---------- end ---------- */
.end-card { max-width: 820px; margin: 30px auto; text-align: center; }
.end-card h1 { font-size: 42px; margin: 0; }
.end-card .table { margin: 14px 0; text-align: left; }
.awards { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0; }
.award { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.award b { color: var(--accent); display: block; }
.won { color: var(--good); } .lost { color: var(--bad); }

/* ---------- spectator betting ---------- */
.predict-panel { position: fixed; left: 10px; top: 70px; z-index: 25; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; max-width: 220px; }
.predict-title { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.predict-options { display: flex; flex-wrap: wrap; gap: 6px; }
.predict-options button { font-size: 12px; padding: 4px 10px; }
.predict-options button.picked { border-color: var(--accent); color: var(--accent); }
.predict-status { font-size: 12px; color: var(--muted); margin-top: 6px; }
.end-predictions { font-size: 13px; margin: 8px 0; color: var(--muted); }
.end-predictions b { color: var(--good); }

/* ---------- chat / toasts / misc ---------- */
#chat-panel { position: fixed; right: 10px; bottom: 10px; width: 320px; z-index: 30; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); transition: transform .2s ease, opacity .2s ease, width .2s ease; }
body.in-game #chat-panel { bottom: 90px; width: 290px; }
body.in-meeting #chat-panel { z-index: 60; }
.chat-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; border-radius: 11px 11px 0 0; }
.chat-header-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.chat-header-btns { display: flex; gap: 2px; }
.chat-tool-btn { padding: 2px 6px; font-size: 13px; border-radius: 6px; }
.chat-tool-btn:hover { background: rgba(255, 255, 255, 0.12); color: var(--accent); }
.chat-badge { background: var(--accent); color: #12101f; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 99px; box-shadow: 0 0 8px rgba(255, 215, 0, 0.5); }
#chat-panel.minimized { height: auto; }
#chat-panel.minimized #chat-messages,
#chat-panel.minimized .chat-input-row { display: none !important; }
#chat-panel.minimized .chat-header { border-bottom: none; border-radius: 11px; }
#chat-panel.closed { display: none !important; }
.chat-fab-btn { position: fixed; right: 12px; bottom: 12px; z-index: 35; background: var(--panel); border: 1px solid var(--accent); border-radius: 99px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 215, 0, 0.25); display: flex; align-items: center; gap: 6px; transition: transform .15s, box-shadow .15s; }
.chat-fab-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 215, 0, 0.45); }
body.in-game .chat-fab-btn { bottom: 90px; }
#chat-messages { height: 170px; overflow-y: auto; padding: 8px 10px; font-size: 13px; line-height: 1.45; }
#chat-messages .ch-dead { color: #9aa8ff; font-style: italic; }
#chat-messages .ch-glitch { color: var(--glitch); }
#chat-messages .ch-system { color: var(--accent); }
.chat-input-row { display: flex; gap: 4px; padding: 6px; border-top: 1px solid var(--line); }
.chat-input-row input { flex: 1; }
.chat-input-row select { width: 90px; font-size: 12px; }
#toasts { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; max-width: min(600px, calc(100vw - 32px)); }
.toast { background: rgba(20, 20, 40, .96); border: 1px solid var(--accent); border-radius: 10px; padding: 8px 16px; font-size: 14px; animation: pop .25s ease-out; max-width: min(580px, calc(100vw - 36px)); text-align: center; }
.toast.good { border-color: var(--good); } .toast.bad { border-color: var(--bad); }
#announce-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 400; background: linear-gradient(90deg, #4a3f1f, #6b5a1f); color: #fff6d0; text-align: center; padding: 8px; font-weight: 600; }
#corner-controls { position: fixed; left: 12px; bottom: 12px; z-index: 40; display: flex; gap: 6px; align-items: center; background: rgba(14, 12, 28, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 4px 8px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); pointer-events: auto; }
body.in-game #corner-controls { bottom: 12px; top: auto; left: 12px; }
.conn { font-size: 12px; color: var(--muted); }
.conn.bad { color: var(--bad); }

@keyframes pulse { 50% { opacity: .65; } }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

@media (max-width: 1120px) {
  .lobby-grid { grid-template-columns: 1fr 1fr; }
  .settings-card { grid-column: 1 / -1; }
  #hud-top { left: 10px; right: auto; transform: none; max-width: calc(100vw - 165px); justify-content: flex-start; flex-wrap: wrap; gap: 4px; }
  #hud-missions { top: 62px; left: 10px; max-width: min(290px, calc(100vw - 165px)); }
  .hud-pill { padding: 3px 8px; font-size: 12px; }
  .progress { width: clamp(100px, 14vw, 145px); height: 20px; }
  #minimap { width: 140px; height: 90px; }
  #toasts { left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); align-items: center; top: 68px; }
  .toast { max-width: calc(100vw - 40px); font-size: 12px; padding: 5px 12px; }
  #status-banner { left: 50%; transform: translateX(-50%); max-width: min(600px, calc(100vw - 24px)); min-width: min(240px, calc(100vw - 24px)); width: max-content; top: 104px; font-size: 12px; padding: 5px 14px; border-radius: 99px; }
}
@media (max-width: 860px) {
  #corner-controls { bottom: 74px !important; left: 10px !important; padding: 2px 6px; gap: 3px; font-size: 11px; }
  #corner-controls .btn.tiny { padding: 2px 5px; font-size: 11px; }
  #action-bar { bottom: 8px; max-width: calc(100vw - 20px); gap: 4px; }
  .act { min-width: 58px; height: 50px; font-size: 11px; }
}
@media (max-width: 760px) {
  .home-grid, .lobby-grid { grid-template-columns: 1fr; }
  .home-grid .main-card { order: -1; }
  .screen { padding: 12px; }
  #hud-missions, #hud-events { display: none; }
  #minimap { width: 130px; height: 84px; }
  #status-banner { top: 96px; font-size: 11.5px; padding: 4px 10px; max-width: calc(100vw - 20px); }
  #chat-panel { width: calc(100vw - 20px); }
  body.in-game #chat-panel { display: none; }
  body.in-game.chat-open #chat-panel { display: flex; }
  .act { min-width: 54px; height: 48px; }
  .progress { width: 110px; }
  .rule { grid-template-columns: 1fr; }
}

/* ---------- Lumens & adventure (v2) ---------- */
.avatar-canvas { display: block; margin: 0 auto; width: 120px; height: 120px; }
.lumen-mini { width: 34px; height: 38px; flex: none; }
.c-mayor { color: #eccc68; } .c-tracker { color: #1dd1a1; } .c-shapeshifter { color: #be2edd; }
.map-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.map-card { background: var(--bg2); border: 2px solid var(--line); border-radius: 10px; padding: 6px; cursor: pointer; color: var(--text); text-align: left; }
.map-card canvas { width: 100%; height: 56px; display: block; border-radius: 6px; background: #0b0a14; }
.map-card b { display: block; font-size: 13px; margin-top: 4px; }
.map-random-row { display: flex; gap: 6px; align-items: center; grid-column: 1 / -1; flex-wrap: wrap; }
.map-random-row select, .map-random-row input { background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }
.map-random-row input { width: 96px; }
.map-card span { font-size: 11px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.map-card.selected { border-color: var(--accent); box-shadow: 0 0 12px rgba(255, 215, 0, .25); }
.map-card:disabled { cursor: default; }
.achievement-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; max-height: 55vh; overflow: auto; }
.ach { display: flex; gap: 10px; align-items: center; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.ach .icon { font-size: 26px; }
.ach b { display: block; font-size: 13px; }
.ach span { font-size: 12px; color: var(--muted); }
.ach.locked { opacity: .45; filter: grayscale(1); }
.ach .times { margin-left: auto; font-size: 11px; color: var(--accent); }
#inventory { position: absolute; right: 10px; top: 160px; z-index: 20; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.item-slot { min-width: 64px; height: 64px; font-size: 26px; }
.item-slot.has { border-color: var(--accent); box-shadow: 0 0 14px rgba(255, 215, 0, .35); }
.item-slot:not(.has) { border-style: dashed; }
.item-slot:not(.has) #item-icon { opacity: .3; filter: grayscale(1); font-size: 22px; }
#effects { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.effect { background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: 2px 10px; font-size: 12px; font-family: var(--mono); }
.mg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.mg-card { height: 80px; font-size: 32px; border-radius: 12px; border: 2px solid var(--line); background: linear-gradient(135deg, #2a2350, #1a1633); color: var(--muted); cursor: pointer; transition: transform .15s; }
.mg-card.up { background: #f5eed8; color: #000; transform: rotateY(0deg) scale(1.03); }
.mg-card.done { border-color: var(--good); opacity: .6; }
.mg-dials { display: flex; justify-content: space-around; margin: 16px 0; }
.mg-dial { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mg-track { position: relative; width: 26px; height: 180px; background: #10101f; border: 1px solid var(--line); border-radius: 13px; touch-action: none; }
.mg-target { position: absolute; left: -8px; right: -8px; height: 10px; margin-bottom: -5px; background: rgba(255, 215, 0, .5); border: 1px solid var(--accent); border-radius: 4px; }
.mg-knob { position: absolute; left: -4px; width: 32px; height: 20px; margin-bottom: -10px; background: #a29bfe; border-radius: 8px; cursor: grab; outline: none; }
.mg-knob:focus { box-shadow: 0 0 0 2px #fff; }
.mg-knob.ok { background: var(--good); }
.mg-val { font-family: var(--mono); font-size: 13px; }
.end-mine { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0; }
.end-mine .ach { animation: pop .5s ease-out; }
body.reduced-motion * { animation: none !important; transition: none !important; }
.meeting-bell { animation: ring .6s ease-in-out 3; display: inline-block; }
@keyframes ring { 25% { transform: rotate(18deg); } 75% { transform: rotate(-18deg); } }
body.snuffed #fog { background: radial-gradient(circle, rgba(120,0,20,.0) 30%, rgba(120,0,20,.65) 100%) !important; }
body.nightfall #fog { background: radial-gradient(circle, rgba(5,5,20,.25) 15%, rgba(2,2,12,.9) 100%) !important; transition: background 1.2s ease; }

/* ---------- game modes ---------- */
.mode-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 6px 0; }
.mode-card { background: var(--bg2); border: 2px solid var(--line); border-radius: 10px; padding: 8px 6px; cursor: pointer; color: var(--text); text-align: center; font-size: 12px; }
.mode-card .mi { display: block; font-size: 26px; }
.mode-card b { display: block; font-size: 12px; margin-top: 2px; }
.mode-card.selected { border-color: var(--accent); box-shadow: 0 0 12px rgba(255, 215, 0, .3); }
.mode-card:disabled { cursor: default; }
.mode-blurb { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
body.arcade .classic-only { display: none !important; }
body.can-tag #act-kill { display: flex; }
#hud-missions .howto-line { font-size: 12px; color: var(--muted); padding: 2px 0; }
#hud-missions .mode-title { font-weight: 700; color: var(--accent); }
.scoreboard { display: flex; gap: 10px; justify-content: space-between; font-weight: 700; }
.scoreboard .sun { color: #ffd700; } .scoreboard .moon { color: #9fc5ff; }
body.tagged-flash #fog { background: radial-gradient(circle, rgba(140,200,255,0) 30%, rgba(140,200,255,.55) 100%) !important; }
@media (max-width: 760px) { .mode-picker { grid-template-columns: repeat(3, 1fr); } }

.map-card span { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }


/* ================================================================ mobile / touch
   body.touch is set on touch devices. Layout works in portrait and landscape:
   joystick bottom-left, big action buttons bottom-right, compact HUD, toggles
   for chat / emotes / missions / big map, safe areas for notches. */
.install-row { justify-content: center; margin: 4px 0 0; }
#touch-bar { position: absolute; z-index: 23; display: flex; gap: 6px; }
.tb { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-size: 20px; color: var(--text); touch-action: manipulation; }
.tb.on { border-color: var(--accent); box-shadow: 0 0 10px rgba(255, 215, 0, .35); }
#touch-extra { position: absolute; z-index: 21; display: flex; flex-direction: column; gap: 6px; }

body.touch { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.touch input, body.touch textarea { -webkit-user-select: text; user-select: text; }
body.touch button, body.touch .map-card, body.touch .mode-card { touch-action: manipulation; }
body.touch #screen-game { touch-action: none; padding: 0; }
body.touch .screen { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }

/* HUD placement on touch devices (any orientation) */
body.touch #hud-top { top: max(8px, env(safe-area-inset-top)); flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 180px); gap: 5px; }
body.touch .hud-pill { padding: 4px 10px; font-size: 13px; }
body.touch .progress { width: 150px; height: 20px; }
body.touch #minimap { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); width: 150px; height: 96px; }
body.touch #minimap.big { left: auto; right: max(8px, env(safe-area-inset-right)); width: min(560px, calc(100vw - 72px - env(safe-area-inset-left) - env(safe-area-inset-right))); height: min(56vh, 360px); z-index: 45; }
body.touch #touch-bar { left: max(8px, env(safe-area-inset-left)); top: max(8px, env(safe-area-inset-top)); flex-direction: column; }
body.touch #hud-missions { display: none; top: 60px; left: 60px; max-height: 50vh; z-index: 44; }
body.touch.show-missions #hud-missions { display: block; }
body.touch #hud-events { display: none; }
body.touch #emote-bar { display: none; right: auto; left: 60px; top: max(8px, env(safe-area-inset-top)); flex-direction: row; flex-wrap: wrap; max-width: 260px; z-index: 44; }
body.touch.show-emotes #emote-bar { display: flex; }
body.touch #joystick { left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); width: 140px; height: 140px; }
body.touch #joystick .knob { left: 42px; top: 42px; width: 56px; height: 56px; }
body.touch #action-bar {
  left: auto; transform: none; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(3, 68px); gap: 7px; max-width: none; justify-content: end; direction: rtl;
}
body.touch #action-bar > * { direction: ltr; }
body.touch .act { min-width: 0; width: 68px; height: 60px; font-size: 12px; border-radius: 14px; }
body.touch .act small { display: none; }
body.touch .sab-menu { grid-column: 1 / -1; margin: 0; justify-content: flex-end; }
body.touch .act.mini { width: 46px; height: 46px; }
body.touch #inventory { top: auto; right: max(10px, env(safe-area-inset-right)); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 150px); }
body.touch #touch-extra { right: calc(max(10px, env(safe-area-inset-right)) + 80px); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 150px); }
body.touch #prompt { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 150px); max-width: 60vw; font-size: 13px; text-align: center; }
body.touch #status-banner { top: 104px; max-width: calc(100vw - 24px); width: max-content; min-width: min(240px, calc(100vw - 24px)); font-size: 12px; text-align: center; border-radius: 99px; }
body.touch #sabotage-banner, body.touch #ghost-banner { top: 64px; max-width: 70vw; font-size: 12px; text-align: center; }
body.touch #corner-controls { display: none; }
body.touch.in-game #chat-panel { display: none; }
body.touch.in-game.chat-open #chat-panel { display: flex; left: 60px; right: 60px; top: max(8px, env(safe-area-inset-top)); bottom: auto; width: auto; z-index: 46; }
body.touch.in-game.chat-open #chat-messages { height: 22vh; }
body.touch .overlay { padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
body.touch .meeting-card, body.touch .minigame-card { max-height: 94dvh; padding: 12px; }
body.touch .vote-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
body.touch .mg-wires { gap: 10px 40px; }
body.touch .mg-pad { height: 72px; }
body.touch .reveal-card h2 { font-size: 44px; }

/* Portrait phones: action grid gets a 4th row budget, HUD pills stack under the minimap */
@media (orientation: portrait) and (max-width: 600px) {
  body.touch #hud-top { left: 60px; right: 166px; max-width: none; transform: none; justify-content: flex-start; }
  body.touch .progress { width: 130px; }
  body.touch #minimap { width: 120px; height: 90px; }
  body.touch #action-bar { grid-template-columns: repeat(2, 70px); }
  body.touch #inventory { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 214px); }
  body.touch #touch-extra { right: calc(max(10px, env(safe-area-inset-right)) + 156px); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 10px); }
  body.touch #prompt { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 170px); }
  body.touch #joystick { width: 128px; height: 128px; }
  body.touch #joystick .knob { left: 36px; top: 36px; }
  .lobby-grid .rules-card { max-height: none; }
}
/* Landscape phones: very little height, so shrink everything vertically */
@media (orientation: landscape) and (max-height: 520px) {
  body.touch #hud-top { top: 6px; }
  body.touch .hud-pill { padding: 3px 8px; font-size: 12px; }
  body.touch #minimap { width: 128px; height: 80px; }
  body.touch .act { height: 50px; width: 62px; }
  body.touch #action-bar { grid-template-columns: repeat(4, 62px); gap: 6px; }
  body.touch #joystick { width: 118px; height: 118px; }
  body.touch #joystick .knob { left: 33px; top: 33px; width: 50px; height: 50px; }
  body.touch #inventory { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 118px); }
  body.touch #touch-extra { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 118px); right: calc(max(10px, env(safe-area-inset-right)) + 76px); flex-direction: row; }
  body.touch #prompt { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 118px); }
  body.touch.in-game.chat-open #chat-messages { height: 30vh; }
  .screen { padding: 8px 12px; }
  .brand h1 { font-size: 28px; margin: 4px 0; }
  .lobby-grid { grid-template-columns: 1fr 1fr; }
  .lobby-grid .settings-card { grid-column: auto; }
  .rules-card { max-height: calc(100dvh - 90px); }
}
/* Narrow screens in general (lobby / home / end) */
@media (max-width: 600px) {
  .rules-head { flex-direction: column; align-items: stretch; }
  .mode-picker { grid-template-columns: repeat(3, 1fr); }
  .map-picker { grid-template-columns: repeat(2, 1fr); }
  .end-card h1 { font-size: 30px; }
  .table { font-size: 12px; }
  .brand h1 { font-size: 30px; }
}
/* Touch, outside the game: chat collapses to its input row (expands while typing) and screens scroll clear of it */
/* scroll-padding-bottom tells scrollIntoView() to clear the fixed chat bar, not just the raw viewport */
body.touch:not(.in-game) .screen { padding-bottom: calc(96px + env(safe-area-inset-bottom)); scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
body.touch:not(.in-game) #chat-panel { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); width: auto; }
body.touch:not(.in-game) #chat-messages { height: 0; padding: 0 10px; transition: height .2s; }
body.touch:not(.in-game) #chat-panel:focus-within #chat-messages { height: 32vh; padding: 8px 10px; }

/* Admin-uploaded images for items, accessories and charms. */
img.content-img { object-fit: contain; vertical-align: middle; image-rendering: auto; }
#item-icon img.content-img { width: 100%; height: 100%; max-width: 32px; max-height: 32px; }
/* Texture-pack page backgrounds: keep text readable on busy images. */
.screen.skinned { background-attachment: fixed; }
.screen.skinned > * { position: relative; }

/* Features switched off server-wide by the admin. */
body.no-chat #chat-panel, body.no-chat #tb-chat, body.no-chat .lobby-chat { display: none !important; }
body.no-emotes #emote-bar, body.no-emotes #tb-emotes { display: none !important; }

/* Branding Header */
.brand-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.brand-logo {
  max-height: 48px;
  max-width: 48px;
  object-fit: contain;
  border-radius: 8px;
}

/* Tournaments & Brackets */
.tourn-hero {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(29, 26, 58, 0.6));
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}
.tourn-actions {
  margin-top: 12px;
  gap: 8px;
}
.tourn-champ-banner {
  background: #ffe9a0;
  color: #1b1530;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 12px;
}
.tourn-champ-text {
  color: var(--accent);
  font-weight: bold;
}
.bracket-display {
  display: flex;
  overflow-x: auto;
  padding: 10px 4px;
  min-height: 180px;
  -webkit-overflow-scrolling: touch;
}
.bracket-tree {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: stretch;
}
.bracket-round {
  display: flex;
  flex-direction: column;
  min-width: 170px;
}
.round-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  margin-bottom: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.matches-list {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-grow: 1;
  gap: 14px;
}
.match-card {
  background: rgba(27, 21, 48, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s, border-color 0.15s;
}
.match-card:hover {
  border-color: var(--accent);
}
.match-card.is-me-match {
  border-color: #ffd700;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.match-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 4px;
}
.match-badge {
  font-size: 9px;
  text-transform: uppercase;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
}
.match-player {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.match-player:last-child {
  border-bottom: none;
}
.match-player.is-winner {
  color: #ffd700;
  font-weight: bold;
}
.match-player .m-score {
  font-weight: 600;
  margin-left: 6px;
  opacity: 0.85;
}
.is-me {
  background: rgba(255, 215, 0, 0.1) !important;
}

@media (max-width: 600px) {
  .tourn-layout {
    grid-template-columns: 1fr !important;
  }
  .bracket-round {
    min-width: 140px;
  }
  .match-card {
    padding: 6px 8px;
  }
}


/* ===== Admin Impersonation Banner (shown to the player being watched/controlled) ===== */
.admin-impersonation-banner {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9900;
  background: linear-gradient(135deg, rgba(255, 45, 85, 0.95), rgba(160, 30, 60, 0.95));
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 100, 130, 0.5);
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 10px 20px;
  box-shadow: 0 4px 24px rgba(255, 45, 85, 0.4);
  animation: imp-banner-pulse 2s ease-in-out infinite;
  max-width: 520px;
  width: max-content;
}
@keyframes imp-banner-pulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(255, 45, 85, 0.4); }
  50% { box-shadow: 0 4px 40px rgba(255, 45, 85, 0.75); }
}
.imp-banner-content { display: flex; align-items: center; gap: 12px; }
.imp-icon { font-size: 22px; flex-shrink: 0; }
.imp-main-text { display: block; font-weight: 700; font-size: 13px; color: #fff; }
.imp-sub-text { display: block; font-size: 11px; color: rgba(255,255,255,0.75); margin-top: 2px; }

/* ===== Admin header (public/js/admin-bar.js): shown while an admin spectates, controls or watches =====
   Full-width, fixed at the top. Its height is published as --admin-bar-h so the game screen, lobby,
   toasts and banners move down beneath it instead of being covered. Wraps on narrow screens. */
:root { --admin-bar-h: 0px; }
.admin-control-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9900;
  background: linear-gradient(135deg, rgba(30, 50, 100, 0.97), rgba(20, 35, 75, 0.97));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(100, 150, 255, 0.4);
  box-shadow: 0 4px 24px rgba(60, 100, 255, 0.3);
  padding: 6px 12px;
  padding-top: max(6px, env(safe-area-inset-top));
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.admin-ctrl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.admin-ctrl-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-ctrl-left > div { min-width: 0; }
.admin-ctrl-icon { font-size: 20px; }
.admin-ctrl-title { display: block; font-weight: 700; font-size: 13px; color: #c8d8ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-ctrl-sub { display: block; font-size: 11px; color: rgba(180,200,255,0.65); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-ctrl-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.admin-ctrl-tools { display: flex; gap: 6px 14px; align-items: center; flex-wrap: wrap; }
.admin-control-bar.collapsed .admin-ctrl-tools { display: none; }
.admin-ctrl-group { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; min-width: 0; }
.admin-ctrl-label { font-size: 11px; color: rgba(180,200,255,0.75); }
.admin-ctrl-select, .admin-ctrl-input {
  background: rgba(10, 18, 40, 0.85); color: #e6edff; border: 1px solid rgba(100, 150, 255, 0.35);
  border-radius: 8px; padding: 4px 6px; font-size: 12px; min-height: 30px; min-width: 0;
}
.admin-ctrl-select { max-width: 220px; }
#admin-player-select { min-width: 120px; }
#admin-chat-scope { flex: 0 0 auto; min-width: 120px; }
.admin-ctrl-chat { flex: 1 1 280px; }
.admin-ctrl-input { flex: 1 1 auto; width: 100%; }
.admin-control-bar .btn.tiny { min-height: 30px; }
body.admin-bar-on .screen:not(#screen-game) { padding-top: calc(20px + var(--admin-bar-h)); }
body.admin-bar-on #screen-game { top: var(--admin-bar-h); }
body.admin-bar-on #toasts { top: calc(60px + var(--admin-bar-h)); }
body.admin-bar-on #announce-banner { top: var(--admin-bar-h); }
@media (max-width: 640px) {
  .admin-control-bar { padding: 4px 8px; gap: 4px; }
  .admin-ctrl-row { flex-wrap: nowrap; }
  .admin-ctrl-icon { display: none; }
  .admin-ctrl-actions { flex-wrap: nowrap; }
  .admin-ctrl-tools { gap: 4px; }
  .admin-ctrl-label { display: none; }
  .admin-ctrl-group { width: 100%; }
  .admin-ctrl-group .admin-ctrl-select { flex: 1 1 auto; max-width: none; min-width: 0; }
  #admin-chat-scope { min-width: 0; max-width: 42%; }
  .admin-ctrl-chat { flex-basis: 100%; }
  .admin-control-bar .btn.tiny { padding: 4px 8px; }
}
/* God tools drawer (admin-god.js) */
.admin-god { border-top: 1px solid rgba(100, 150, 255, 0.25); padding-top: 6px; max-height: min(55vh, 460px); overflow: auto; overscroll-behavior: contain; }
.god-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; position: sticky; top: 0; background: rgba(20, 35, 75, 0.98); padding-bottom: 4px; z-index: 1; }
.god-tabs .btn.active, #admin-god-btn.active { outline: 2px solid #7fb0ff; }
.god-page { display: flex; flex-direction: column; gap: 6px; }
.god-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.god-note { font-size: 11px; color: rgba(180, 200, 255, 0.75); }
.god-num { width: 84px; flex: 0 0 auto; }
.god-list { margin: 0; padding-left: 18px; max-height: 200px; overflow: auto; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
.god-list:empty { display: none; }
.admin-control-bar.collapsed .admin-god { display: none; }
[data-act="stealth"].on { outline: 2px solid #7fb0ff; }
/* Pause banner + spectator camera controls */
#pause-banner { position: fixed; top: calc(40% + var(--admin-bar-h)); left: 50%; transform: translateX(-50%); z-index: 350; background: rgba(20, 30, 60, .95); border: 2px solid #7fb0ff; border-radius: 12px; padding: 12px 20px; font-weight: 700; text-align: center; max-width: calc(100vw - 32px); pointer-events: none; }
#spec-cam { position: fixed; bottom: 64px; left: 50%; transform: translateX(-50%); z-index: 45; display: flex; gap: 6px; align-items: center; background: rgba(14, 12, 28, 0.8); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 99px; padding: 4px 8px; max-width: calc(100vw - 32px); }
#spec-cam-label { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
#spec-cam .btn.tiny { min-height: 32px; min-width: 32px; }
@media (max-width: 640px) { #spec-cam { bottom: 112px; } }
/* Admin chat lines in the room chat */
.ch-admin { color: #9fc2ff; font-weight: 600; }

/* ---------------------------------------------------------------- photo mode */
body.photo-mode #screen-game > *:not(#phaser-game):not(#fog) { display: none !important; }
body.photo-mode #chat-panel,
body.photo-mode #chat-fab-btn,
body.photo-mode #toasts,
body.photo-mode #announce-banner,
body.photo-mode #corner-controls { display: none !important; }
.photo-mode-bar {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9800;
  display: flex;
  gap: 10px;
  background: rgba(10, 12, 24, 0.72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 8px 14px;
}

/* ---------------------------------------------------------------- landing */
.landing-brand { margin-top: clamp(24px, 8vh, 90px); }
.landing-choices {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 460px;
  margin: 28px auto 0;
}
.landing-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  width: 100%;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: transform .15s, border-color .15s, background .15s;
}
.landing-choice:hover { transform: translateY(-2px); border-color: var(--accent); }
.landing-choice-icon { font-size: 22px; }
.landing-choice-title { font-size: 16px; font-weight: 700; margin-top: 2px; }
.landing-choice-desc { font-size: 12px; color: var(--muted); }
.landing-choice-primary { background: linear-gradient(135deg, rgba(255, 215, 0, 0.18), rgba(253, 121, 168, 0.12)); border-color: rgba(255, 215, 0, 0.4); }
.landing-choice-ghost { background: transparent; }

/* ---------------------------------------------------------------- match highlights */
.end-highlights { margin: 10px 0; text-align: left; }
.end-highlights summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
#end-highlights-list { max-height: 260px; overflow-y: auto; margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.hl-row { display: flex; gap: 10px; font-size: 13px; padding: 4px 8px; background: var(--bg2); border-radius: 6px; }
.hl-time { color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* ---------------------------------------------------------------- battle pass */
.battlepass-widget { margin-top: 10px; }
.battlepass-widget .progress { width: 100%; margin-top: 4px; }

/* ---------------------------------------------------------------- friends */
#friends-btn { position: relative; }
#friends-btn .chat-badge { position: absolute; top: -6px; right: -6px; }
.friends-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; margin: 6px 0 14px; }
.friend-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--bg2); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
#friend-requests h4, .friends-list + h4 { margin-top: 10px; }

/* ---------------------------------------------------------------- HUD Objective & Mode Rules Modal */
.hud-btn {
  cursor: pointer;
  background: rgba(18, 16, 32, 0.85);
  border: 1px solid var(--accent);
  color: var(--text);
  font: inherit;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
  user-select: none;
}
.hud-btn:hover {
  background: var(--panel);
  border-color: #ffe066;
  transform: translateY(-1px);
}
.mode-rules-card {
  line-height: 1.5;
}
.mode-rules-section {
  margin-bottom: 14px;
}
.mode-rules-section h4 {
  margin: 0 0 6px 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.mode-rules-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.3);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
}
.mode-rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.25);
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.mode-rule-item {
  display: flex;
  flex-direction: column;
}
.mode-rule-item span {
  color: var(--muted);
  font-size: 11px;
}
.mode-rule-item b {
  color: var(--text);
}

/* ---------------------------------------------------------------- Build Version & Cloudflare Badge */
.build-ver-tag {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.65;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.lobby-footer {
  margin-top: 24px;
  text-align: center;
  padding: 8px;
}
.build-number-badge {
  position: fixed;
  bottom: 12px;
  right: 14px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(18, 14, 30, 0.78);
  border: 1px solid rgba(246, 130, 31, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--muted, rgba(255, 255, 255, 0.6));
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  user-select: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.build-number-badge.hidden {
  display: none !important;
}
.build-number-badge:hover {
  border-color: rgba(246, 130, 31, 0.7);
  color: var(--text, #fff);
  box-shadow: 0 3px 14px rgba(246, 130, 31, 0.25);
}
.build-number-badge .build-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f6821f;
  box-shadow: 0 0 6px rgba(246, 130, 31, 0.75);
  flex-shrink: 0;
}
.build-number-badge .build-cf-label {
  font-weight: 500;
  opacity: 0.85;
}
.build-number-badge .build-cf-num {
  color: #f6821f;
  font-weight: 600;
}
/* The badge and the floating chat button share the bottom-right corner; lift the badge above it. */
body:has(#chat-fab-btn:not(.hidden)) .build-number-badge {
  bottom: 58px;
}
body.in-game .build-number-badge,
body.in-game .build-ver-tag {
  display: none !important;
}

@media (max-width: 640px) {
  .build-number-badge {
    bottom: 8px;
    right: 8px;
    font-size: 10px;
    padding: 2px 8px;
  }
}

/* ---------------------------------------------------------------- Mobile Touch Chat Isolation */
body.touch.in-game #chat-fab-btn {
  display: none !important;
}

/* ---------------------------------------------------------------- Gamepad / Controller Glyphs & Mode */
body.controller-mode #joystick {
  display: none !important;
}

body.controller-mode #touch-bar {
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
body.controller-mode #touch-bar:hover {
  opacity: 1;
}

.act small.glyph-controller {
  background: #1e1b2e;
  color: #ffd700;
  border: 1px solid rgba(255, 215, 0, 0.6);
  border-radius: 99px;
  padding: 1px 5px;
  font-weight: 700;
  font-size: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* ---------------------------------------------------------------- Client Mods Manager */
.mod-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  transition: border-color 0.15s, background 0.15s;
}
.mod-row.enabled {
  border-color: rgba(255, 215, 0, 0.4);
  background: rgba(255, 215, 0, 0.05);
}
.mod-row.error {
  border-color: rgba(255, 75, 75, 0.5);
  background: rgba(255, 75, 75, 0.08);
}
.mod-info {
  flex: 1;
}
.mod-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 2px;
}
.mod-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
}
.mod-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mod-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--muted);
}
.mod-badge.builtin {
  background: rgba(77, 171, 247, 0.15);
  color: #74c0fc;
}
.mod-badge.global {
  background: rgba(0, 206, 201, 0.2);
  color: #00cec9;
  border: 1px solid rgba(0, 206, 201, 0.4);
}




/* ---------------------------------------------------------------- Room bots (lobby) */
.bot-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 10px; padding: 6px 8px; border: 1px dashed var(--line); border-radius: 10px; }
.bot-controls select, select.bot-level { background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 2px 6px; font-size: 12px; width: auto; }
.bot-controls .bot-all { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; }
.player-list .tag.bot { background: rgba(126, 232, 250, 0.15); color: #7ee8fa; border: 1px solid rgba(126, 232, 250, 0.4); white-space: nowrap; }
/* Bot rows carry a difficulty picker + remove button: let the name shrink and the row wrap inside the 320px column. */
.player-list li { flex-wrap: wrap; min-width: 0; }
select.bot-level { max-width: 108px; padding: 1px 4px; }

/* ===== Docked UI never covers content (variables published by public/js/layout.js) =====
   --chat-dock: height the chat covers while docked full-width along the bottom (0 when floating or closed).
   --chat-side: width of the floating bottom-right chat (desktop), so corner items sit to its left.
   --admin-bar-h: the admin header (see the admin header block). */
:root { --chat-dock: 0px; --chat-side: 0px; }
.screen:not(#screen-game) { padding-bottom: calc(20px + var(--chat-dock)); }
.build-number-badge { bottom: calc(12px + var(--chat-dock)); right: calc(14px + var(--chat-side)); }
/* Lumen Bastion: the build panel owns the top-right column on desktop, so the item slot and emotes
   move to its left instead of hiding underneath it. */
body:not(.touch):has(#td-panel:not(.hidden)) #inventory,
body:not(.touch):has(#td-panel:not(.hidden)) #emote-bar { right: calc(min(360px, 96vw) + 22px); }
/* Toasts on the end screen sit below its title instead of on top of it. */
body:has(#screen-end.active) #toasts { top: auto; bottom: calc(24px + var(--chat-dock)); }
/* ✨ Auto accent swatch (color-picker.js) */
.swatch.swatch-auto { background: linear-gradient(135deg, #444, #888); color: #fff; font-size: 12px; line-height: 24px; text-align: center; }

/* Touch HUD: the pills start right of the left touch toolbar in every orientation (portrait already did;
   landscape phones put the role pill underneath the 💬 button). */
@media (max-width: 1120px) {
  body.touch #hud-top { left: calc(max(8px, env(safe-area-inset-left)) + 52px); }
}
/* Role reveal: a readable card over the busy level instead of bare text. */
.reveal-card { background: rgba(10, 10, 24, 0.72); border: 1px solid var(--line); border-radius: 18px; padding: 20px 32px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); max-width: min(620px, calc(100vw - 32px)); }
/* Saved colour schemes (color-picker.js renderSchemes): primary + accent, applied in one tap */
.schemes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.scheme { display: flex; gap: 4px; align-items: center; }
.scheme-chip { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s; }
.scheme-chip:hover:not(:disabled) { border-color: var(--accent); }
.scheme-chip[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 10px rgba(255, 215, 0, 0.25); }
.scheme-chip:disabled { opacity: .45; cursor: not-allowed; }
.scheme.empty .scheme-chip { border-style: dashed; color: var(--muted); justify-content: center; }
.scheme-dot { width: 24px; height: 24px; border-radius: 50%; flex: none; border: 2px solid rgba(255, 255, 255, 0.25); display: grid; place-items: center; font-size: 11px; }
.scheme-name { font-size: 13px; font-weight: 600; }
.scheme-act { min-width: 32px; min-height: 32px; }
.hint-inline { font-weight: 400; font-size: 11px; }