/* 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; }
.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 h3 { margin-bottom: 4px; }
.howto ul { padding-left: 18px; line-height: 1.7; }
.c-socialite { color: #ffd700; } .c-glitch { color: #a29bfe; } .c-detective { color: #70a1ff; } .c-medic { color: #7bed9f; } .c-engineer { color: #ffa502; } .c-jester { color: #fd79a8; }
.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; 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; align-items: center; gap: 10px; margin: 8px 0 4px; padding: 6px 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 8px; }
.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: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin-bottom: 8px; }
.lobby-guest-lineup:empty { display: none; }
.lineup-card { flex: none; width: 68px; 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: 60px; 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; transition: background .3s; }
#hud-top { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; z-index: 20; }
.hud-pill { background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px; font-weight: 600; white-space: nowrap; }
#hud-timer.warning { color: var(--bad); animation: pulse 1s infinite; }
.progress { position: relative; width: 220px; height: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.progress .bar { height: 100%; width: 0; background: linear-gradient(90deg, #2ecc71, var(--good)); transition: width .4s; }
.progress span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 600; text-shadow: 0 1px 2px #000; }
.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: 10px; left: 10px; max-height: 45vh; overflow: auto; }
#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: 420px; height: 270px; }
#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; }
#admin-control-bar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 25; background: rgba(20, 25, 45, .95); border: 2px solid var(--accent); border-radius: 12px; padding: 6px 14px; display: flex; align-items: center; gap: 12px; font-weight: 600; color: #ffd700; box-shadow: 0 4px 16px rgba(0, 0, 0, .6); }
#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; }
#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: 160px; 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); }

.overlay { position: absolute; 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); }
.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); }

/* ---------- 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; }
.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: 90vw; }
.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: 10px; bottom: 10px; z-index: 40; display: flex; gap: 8px; align-items: center; }
body.in-game #corner-controls { bottom: auto; top: 50%; }
.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: 1100px) {
  .lobby-grid { grid-template-columns: 1fr 1fr; }
  .settings-card { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .home-grid, .lobby-grid { grid-template-columns: 1fr; }
  .screen { padding: 12px; }
  #hud-missions, #hud-events { display: none; }
  #minimap { width: 140px; height: 90px; }
  #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: 62px; height: 54px; }
  .progress { width: 120px; }
  .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-sheriff { color: #f0932b; } .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); }
.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; }
#emote-bar { top: 250px !important; }
.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); }
#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); }
#status-banner { position: absolute; top: 98px; left: 50%; transform: translateX(-50%); z-index: 19; background: rgba(40, 30, 70, .9); border: 1px solid var(--glitch); border-radius: 10px; padding: 6px 14px; font-size: 13px; }
.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; }

/* ---------- 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; }
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)); }
body.touch #screen-game { padding: 0; }

/* 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, 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) {
  .home-grid, .lobby-grid { grid-template-columns: 1fr; }
  .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 */
body.touch:not(.in-game) .screen { 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;
  }
}