:root {
  --bg: #070b0f;
  --panel: rgba(9, 16, 22, 0.78);
  --panel2: rgba(17, 26, 34, 0.86);
  --line: rgba(223, 183, 111, 0.35);
  --gold: #d9a953;
  --gold2: #f0d088;
  --blue: #48a9ff;
  --red: #ff594d;
  --green: #73d16d;
  --text: #f3ead9;
  --muted: #b9a98d;
  --shadow: rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
button { font: inherit; color: inherit; }
#gameCanvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; background: radial-gradient(circle at 50% 42%, #28333d, #0b1015 52%, #06090d 78%); }

.topbar {
  position: fixed; left: 18px; right: 18px; top: 14px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 14px; pointer-events: none;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 10px 18px 11px; border: 1px solid var(--line); background: linear-gradient(90deg, rgba(8, 12, 17, 0.95), rgba(8, 12, 17, 0.70)); box-shadow: 0 10px 30px var(--shadow), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(14px); pointer-events: auto; }
.brand-mark { color: var(--gold); font-size: 30px; width: 34px; text-align: center; filter: drop-shadow(0 0 10px rgba(217, 169, 83, .45)); }
h1 { margin: 0; font-size: clamp(30px, 4vw, 58px); line-height: 0.86; letter-spacing: -2px; text-transform: uppercase; color: #f6efe1; text-shadow: 0 3px 0 #2b2116, 0 0 20px rgba(255,255,255,.14); font-weight: 950; }
.brand p { margin: 6px 0 0; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.8px; }
.status-pill { pointer-events: auto; min-width: 180px; text-align: center; padding: 14px 18px; border: 1px solid rgba(95, 183, 255, .55); background: linear-gradient(135deg, rgba(19, 54, 82, .92), rgba(7, 12, 18, .85)); color: #dff3ff; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 0 25px rgba(72, 169, 255, .2); }
.status-pill.red { border-color: rgba(255, 89, 77, .55); background: linear-gradient(135deg, rgba(88, 23, 19, .92), rgba(7, 12, 18, .85)); color: #ffe2df; box-shadow: 0 0 25px rgba(255, 89, 77, .2); }
.scoreboard { pointer-events: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; max-width: 430px; }
.score-chip { border: 1px solid var(--line); background: rgba(8, 13, 18, .82); padding: 10px 12px; font-weight: 800; font-size: 13px; text-transform: uppercase; color: var(--gold2); }
.score-chip b { color: #fff; }

.glass { border: 1px solid var(--line); background: linear-gradient(160deg, var(--panel), rgba(5, 9, 14, .65)); backdrop-filter: blur(12px); box-shadow: 0 18px 45px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05); }
.left-panel, .right-panel { position: fixed; top: 128px; z-index: 4; width: 315px; max-height: calc(100vh - 205px); overflow: auto; padding: 16px; }
.left-panel { left: 18px; }
.right-panel { right: 18px; }
.section-title { color: var(--gold2); font-weight: 950; text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px; border-bottom: 1px solid rgba(217,169,83,.28); padding-bottom: 8px; margin-bottom: 12px; }
.mt { margin-top: 18px; }

.unit-card { min-height: 248px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.22); padding: 12px; }
.unit-card.empty { display: flex; align-items: center; justify-content: center; text-align: center; color: var(--muted); }
.unit-head { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.unit-title { font-size: 19px; font-weight: 950; text-transform: uppercase; }
.unit-class { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.team-tag { padding: 4px 8px; font-size: 11px; border-radius: 999px; font-weight: 900; }
.team-blue { color: #e7f6ff; background: rgba(72,169,255,.22); border: 1px solid rgba(72,169,255,.45); }
.team-red { color: #ffe4e1; background: rgba(255,89,77,.22); border: 1px solid rgba(255,89,77,.45); }
.hpbar { height: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.35); margin: 12px 0; overflow: hidden; }
.hpbar > div { height: 100%; background: linear-gradient(90deg, #2ecf6a, #b8ff65); width: 100%; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.stat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); padding: 8px; }
.stat label { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; }
.stat strong { font-size: 18px; }
.ability-note { margin-top: 12px; padding: 10px; border-left: 3px solid var(--gold); background: rgba(217,169,83,.08); color: #f3dfbb; font-size: 13px; }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.action, .end-turn, .ghost-btn, .hud-btn, .start-btn, .mode-card { cursor: pointer; border: 1px solid rgba(255,255,255,.14); background: var(--panel2); transition: transform .14s ease, border-color .14s ease, background .14s ease, opacity .14s ease; }
.action { min-height: 58px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 10px 12px; font-weight: 950; text-transform: uppercase; letter-spacing: .5px; }
.action span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.action:hover, .end-turn:hover, .ghost-btn:hover, .hud-btn:hover, .start-btn:hover, .mode-card:hover { transform: translateY(-1px); border-color: var(--gold); }
.action.active { outline: 2px solid var(--gold); box-shadow: 0 0 24px rgba(217,169,83,.2); }
.action:disabled, .end-turn:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.action.blue { border-left: 4px solid var(--blue); }
.action.red { border-left: 4px solid var(--red); }
.action.gold { border-left: 4px solid var(--gold); }
.action.green { border-left: 4px solid var(--green); }
.end-turn { width: 100%; margin-top: 10px; padding: 14px; text-transform: uppercase; font-weight: 950; background: linear-gradient(135deg, rgba(217,169,83,.25), rgba(12,17,22,.86)); color: #fff2d1; }
.ghost-btn { width: 100%; margin-top: 8px; padding: 11px; color: var(--muted); background: rgba(255,255,255,.04); }
.objective-copy { margin-top: 0; color: #d9ceb8; font-size: 14px; line-height: 1.38; }
.objectives { display: grid; gap: 8px; }
.objective-row { display: flex; align-items: center; justify-content: space-between; padding: 10px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.04); }
.obj-left { display: flex; align-items: center; gap: 10px; }
.obj-badge { width: 34px; height: 34px; display: grid; place-items: center; font-weight: 950; border: 1px solid var(--line); background: rgba(217,169,83,.12); color: var(--gold2); }
.owner { font-weight: 900; font-size: 12px; padding: 4px 7px; border-radius: 4px; }
.owner.neutral { color: var(--muted); background: rgba(255,255,255,.08); }
.owner.blue { color: #dff3ff; background: rgba(72,169,255,.2); }
.owner.red { color: #ffe4df; background: rgba(255,89,77,.2); }
.legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; color: #ddcfb7; font-size: 13px; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; border: 1px solid rgba(255,255,255,.25); }
.dot.normal { background: #5c4631; }
.dot.difficult { background: #765b8a; }
.dot.high { background: #8f7236; }
.dot.cover { background: #3b6470; }
.battle-log { height: 168px; overflow: auto; padding-right: 4px; font-size: 12px; color: #c9b899; display: flex; flex-direction: column; gap: 6px; }
.log-item { border-left: 2px solid rgba(217,169,83,.5); padding-left: 8px; line-height: 1.35; }

.bottom-hud { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5; display: flex; gap: 8px; padding: 8px; border: 1px solid var(--line); background: rgba(7, 10, 14, .75); backdrop-filter: blur(10px); box-shadow: 0 16px 36px rgba(0,0,0,.4); }
.hud-btn { padding: 10px 13px; background: rgba(255,255,255,.06); color: #f2e7d0; }
.hud-btn.primary { background: rgba(217,169,83,.18); color: var(--gold2); }
.toast { position: fixed; top: 100px; left: 50%; transform: translateX(-50%) translateY(-12px); z-index: 10; opacity: 0; pointer-events: none; padding: 12px 16px; border: 1px solid var(--line); color: #fff4d7; background: rgba(9, 13, 17, .9); box-shadow: 0 14px 35px rgba(0,0,0,.35); transition: opacity .18s ease, transform .18s ease; font-weight: 800; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.modal { position: fixed; inset: 0; z-index: 20; display: none; align-items: flex-start; justify-content: center; background: radial-gradient(circle at center, rgba(30, 38, 48, .74), rgba(0,0,0,.82)); backdrop-filter: blur(10px); padding: 12px; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; }
.modal.open { display: flex; }
.modal-card { width: min(620px, 94vw); border: 1px solid var(--line); background: linear-gradient(160deg, rgba(12,18,24,.96), rgba(3,6,10,.94)); box-shadow: 0 25px 80px rgba(0,0,0,.65); padding: 28px; position: relative; margin: auto 0; }
.modal-card.wide { width: min(980px, 94vw); }
.modal-logo { font-size: 52px; line-height: .85; font-weight: 1000; letter-spacing: -2px; text-transform: uppercase; color: #fff0d2; text-shadow: 0 3px 0 #2b2116; }
.modal h2 { margin: 12px 0 6px; color: var(--gold2); text-transform: uppercase; letter-spacing: 1px; }
.modal p { color: #d4c3a7; line-height: 1.45; }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; }
.mode-card { text-align: left; padding: 16px; min-height: 95px; background: rgba(255,255,255,.05); }
.mode-card strong { display: block; font-size: 18px; color: #fff; }
.mode-card span { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; }
.mode-card.selected { border-color: var(--gold); box-shadow: 0 0 30px rgba(217,169,83,.18); background: rgba(217,169,83,.12); }
.start-btn { width: 100%; padding: 15px; color: #1b1206; background: linear-gradient(135deg, #ffdd8b, #bd7d28); border: 0; text-transform: uppercase; font-weight: 1000; }
.small-note { margin-top: 12px; color: #998b74; font-size: 12px; text-align: center; }
.close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); cursor: pointer; font-size: 25px; }
.help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.help-grid > div { border: 1px solid rgba(255,255,255,.1); padding: 14px; background: rgba(255,255,255,.04); }
.help-grid b { color: var(--gold2); }
.help-grid p { margin: 8px 0 0; font-size: 14px; }

@media (max-width: 1050px) {
  .left-panel, .right-panel { width: 285px; top: 116px; }
  .right-panel { display: none; }
  .brand p { display: none; }
}
@media (max-width: 720px) {
  .topbar { left: 8px; right: 8px; top: 8px; align-items: flex-start; }
  .brand { padding: 9px 10px; }
  .brand-mark { display: none; }
  h1 { font-size: 32px; }
  .status-pill { min-width: auto; padding: 10px; font-size: 12px; }
  .scoreboard { display: none; }
  .left-panel { left: 8px; right: 8px; bottom: 72px; top: auto; width: auto; max-height: 42vh; padding: 12px; }
  .unit-card { min-height: 130px; }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .ability-note { display: none; }
  .bottom-hud { left: 8px; right: 8px; transform: none; overflow-x: auto; justify-content: flex-start; }
  .hud-btn { white-space: nowrap; }
  .mode-grid, .help-grid { grid-template-columns: 1fr; }
}

/* Ajustes Miljueguitos / iframe: evita scroll externo y mejora mobile dentro del contenedor del portal. */
html, body {
  min-width: 0;
  min-height: 0;
  height: 100%;
  height: 100svh;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
#app, #gameCanvas {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  max-width: 100%;
  max-height: 100%;
  touch-action: none;
}
button, .left-panel, .right-panel, .battle-log {
  touch-action: manipulation;
}
.modal-card { touch-action: pan-y; }

@media (max-height: 680px) and (orientation: landscape) {
  .topbar { top: 8px; left: 8px; right: 8px; }
  .brand { padding: 7px 10px; }
  .brand-mark, .brand p { display: none; }
  h1 { font-size: 30px; letter-spacing: -1px; }
  .status-pill { padding: 9px 12px; min-width: 150px; font-size: 12px; }
  .score-chip { padding: 7px 8px; font-size: 11px; }
  .left-panel { top: 76px; left: 8px; width: 285px; max-height: calc(100svh - 145px); padding: 10px; }
  .right-panel { display: none; }
  .unit-card { min-height: 120px; }
  .ability-note { display: none; }
  .bottom-hud { bottom: 8px; padding: 6px; }
  .hud-btn { padding: 8px 10px; font-size: 12px; }
}

@media (max-width: 520px) {
  .topbar { align-items: center; }
  .status-pill { display: none; }
  .left-panel { max-height: 46svh; }
  .actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .action { min-height: 48px; padding: 8px; font-size: 11px; }
  .action span { font-size: 10px; }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .modal-card { padding: 20px; }
  .modal-logo { font-size: 40px; }
}

/* Online multiplayer additions */
.mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.online-box {
  margin: 14px 0 10px;
  border: 1px solid rgba(98, 189, 255, .28);
  background: rgba(8, 18, 28, .72);
  border-radius: 18px;
  padding: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.online-box.hidden { display: none; }
.online-title {
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #bfe9ff;
  margin-bottom: 10px;
}
.online-actions { display: grid; gap: 10px; }
.start-btn.secondary {
  margin-top: 0;
  width: 100%;
  background: linear-gradient(180deg, #1b8bc6, #0b4468);
  border: 1px solid rgba(155, 225, 255, .55);
}
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: stretch; }
.join-row input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(213, 173, 101, .42);
  background: rgba(0,0,0,.34);
  color: #fff4d7;
  border-radius: 12px;
  padding: 0 12px;
  font-weight: 900;
  font-size: 15px;
  text-transform: uppercase;
  outline: none;
}
.join-row input:focus { border-color: rgba(92, 190, 255, .9); box-shadow: 0 0 0 3px rgba(64, 169, 255, .16); }
.online-status {
  margin-top: 10px;
  color: rgba(255, 244, 215, .78);
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
}
.online-status strong { color: #ffe0a2; }
.online-status a { color: #9fdcff; }
.status-pill.waiting { background: rgba(213, 173, 101, .18); border-color: rgba(213, 173, 101, .6); color: #ffe0a2; }
.score-chip.online-chip { border-color: rgba(98,189,255,.45); color: #c9ecff; }
@media (max-width: 760px) {
  .mode-grid { grid-template-columns: 1fr; }
  .join-row { grid-template-columns: 1fr; }
}

/* Facciones / selección previa */
.start-card {
  width: min(1180px, 96vw);
  max-height: min(92svh, 900px);
  overflow: auto;
}
.team-select-shell {
  margin: 18px 0 16px;
  border: 1px solid rgba(217,169,83,.24);
  background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(0,0,0,.18));
  padding: 16px;
}
.team-select-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .9fr);
  gap: 14px;
  align-items: end;
  margin-bottom: 14px;
}
.team-select-header span, .picker-title, .team-preview-eyebrow {
  color: var(--gold2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 950;
}
.team-select-header h3 {
  margin: 3px 0 0;
  color: #fff1d5;
  text-transform: uppercase;
  font-size: 19px;
}
.team-select-header p {
  margin: 0;
  color: #bda989;
  font-size: 13px;
  line-height: 1.35;
}
.team-pickers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.picker-title { margin-bottom: 8px; }
.blue-title { color: #a9dcff; }
.red-title { color: #ffb7af; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.team-choice {
  position: relative;
  min-height: 118px;
  padding: 12px 12px 12px 56px;
  border: 1px solid color-mix(in srgb, var(--team-accent) 45%, transparent);
  background:
    radial-gradient(circle at 18px 22px, color-mix(in srgb, var(--team-accent) 28%, transparent), transparent 55px),
    linear-gradient(145deg, color-mix(in srgb, var(--team-color) 28%, rgba(255,255,255,.04)), rgba(0,0,0,.25));
  text-align: left;
  overflow: hidden;
}
.team-choice::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--team-accent);
  opacity: .8;
}
.team-choice.selected {
  outline: 2px solid var(--team-accent);
  box-shadow: 0 0 28px color-mix(in srgb, var(--team-accent) 26%, transparent);
}
.team-choice-emblem {
  position: absolute;
  left: 12px;
  top: 13px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--team-accent) 48%, rgba(255,255,255,.12));
  background: rgba(0,0,0,.22);
  color: var(--team-accent);
  font-size: 21px;
  font-weight: 1000;
}
.team-choice-name {
  color: #fff6e4;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 15px;
}
.team-choice-tagline {
  margin-top: 7px;
  color: #d4c6ad;
  font-size: 12px;
  line-height: 1.32;
}
.team-previews {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.team-preview {
  border: 1px solid color-mix(in srgb, var(--team-accent) 35%, rgba(255,255,255,.1));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--team-color) 24%, rgba(0,0,0,.35)), rgba(0,0,0,.22));
  padding: 14px;
}
.team-preview-head {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: center;
}
.team-preview-emblem {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--team-accent);
  color: var(--team-accent);
  background: rgba(0,0,0,.24);
  font-size: 29px;
  font-weight: 1000;
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--team-accent) 15%, transparent);
}
.team-preview h3 {
  margin: 2px 0 2px;
  color: #fff4da;
  text-transform: uppercase;
  font-size: 20px;
}
.team-preview p {
  margin: 0;
  color: #d7c8ad;
  font-size: 13px;
  line-height: 1.33;
}
.team-style, .team-passive {
  margin-top: 10px;
  color: #ccbda0;
  font-size: 12px;
  line-height: 1.35;
  padding: 10px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.07);
}
.team-style b, .team-passive b { color: var(--team-accent); }
.roster-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.roster-card {
  min-height: 132px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.19);
  padding: 9px;
}
.roster-top {
  display: flex;
  align-items: center;
  gap: 7px;
}
.roster-top strong {
  color: #fff2d8;
  font-size: 12px;
  line-height: 1.1;
}
.roster-card small {
  display: block;
  color: var(--team-accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 900;
}
.roster-card p {
  margin: 6px 0 0;
  color: #bfae91;
  font-size: 11px;
  line-height: 1.25;
}
.mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}
.mini-stats span {
  padding: 2px 5px;
  color: #fff5dd;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.06);
  font-size: 10px;
  font-weight: 900;
}
.role-dot {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--team-accent);
  box-shadow: 0 0 12px var(--team-accent);
}
.role-dot.heavy { border-radius: 3px; transform: rotate(45deg); }
.role-dot.sniper { background: #f1d066; }
.role-dot.medic { background: #83f191; }
.role-dot.engineer { background: #ff9e53; }
.role-dot.scout { background: #9ed6ff; }
.unit-card { border-color: color-mix(in srgb, var(--unit-accent, #d9a953) 25%, rgba(255,255,255,.1)); }
.unit-class { color: var(--unit-accent, var(--muted)); }

@media (max-width: 940px) {
  .team-select-header, .team-pickers, .team-previews { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .roster-grid { grid-template-columns: 1fr; }
}

.modal-card, .left-panel, .right-panel, .bottom-hud, .online-box, .team-select-shell { box-shadow: 0 20px 55px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.04); }
.team-choice.selected, .mode-card.selected { transform: translateY(-2px); }


/* Main menu pro flow: mode first, faction second */
.menu-pro {
  position: relative;
  overflow: hidden;
  width: min(1220px, 96vw);
  padding: 0;
  border-color: rgba(217,169,83,.34);
  background:
    radial-gradient(circle at 18% 10%, rgba(217,169,83,.18), transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(72,169,255,.15), transparent 30%),
    linear-gradient(145deg, rgba(12,18,24,.98), rgba(4,7,12,.96));
}
.menu-glow {
  position: absolute;
  inset: -30%;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.05) 44%, transparent 53% 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 72px);
  opacity: .55;
}
.menu-header-pro {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(280px, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 28px 30px 20px;
  border-bottom: 1px solid rgba(217,169,83,.22);
}
.menu-copy h2 { margin: 0 0 6px; }
.menu-copy p { margin: 0; max-width: 650px; }
.menu-steps {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.menu-steps span {
  border: 1px solid rgba(255,255,255,.13);
  color: rgba(255,244,215,.55);
  background: rgba(0,0,0,.2);
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.menu-steps span.active {
  color: #fff1d0;
  border-color: rgba(217,169,83,.65);
  box-shadow: 0 0 24px rgba(217,169,83,.16);
  background: rgba(217,169,83,.14);
}
.menu-step {
  position: relative;
  padding: 22px 30px 26px;
}
.menu-step.hidden { display: none; }
.pro-mode-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}
.pro-mode-card {
  position: relative;
  min-height: 240px;
  padding: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 12%, rgba(217,169,83,.13), transparent 36%),
    linear-gradient(150deg, rgba(255,255,255,.08), rgba(0,0,0,.25));
}
.pro-mode-card::after {
  content: '';
  position: absolute;
  inset: auto -18% -28% -18%;
  height: 100px;
  background: radial-gradient(ellipse at center, rgba(217,169,83,.18), transparent 68%);
}
.mode-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(217,169,83,.46);
  color: var(--gold2);
  background: rgba(0,0,0,.2);
  font-size: 28px;
  margin-bottom: 18px;
  box-shadow: inset 0 0 24px rgba(217,169,83,.12);
}
.pro-mode-card strong { font-size: 25px; }
.pro-mode-card span { font-size: 14px; line-height: 1.45; }
.pro-mode-card small {
  position: absolute;
  left: 22px;
  bottom: 18px;
  color: rgba(255,244,215,.58);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 950;
}
.mode-hint {
  margin-top: 14px;
  color: #b9a98d;
  text-align: center;
  font-size: 13px;
}
.faction-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
}
.back-mode-btn {
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.055);
  color: #e9dcc4;
  padding: 12px 14px;
  font-weight: 900;
}
.back-mode-btn:hover { border-color: var(--gold); }
.selected-mode-badge {
  display: inline-block;
  color: #9fdcff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 950;
  margin-bottom: 4px;
}
.faction-topbar h3 {
  margin: 0;
  color: #fff1d5;
  text-transform: uppercase;
  font-size: 25px;
  letter-spacing: -.02em;
}
.faction-topbar p {
  margin: 5px 0 0;
  color: #cbbda4;
  font-size: 13px;
}
.faction-layout-pro {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.faction-picker-panel {
  border: 1px solid rgba(217,169,83,.22);
  background: rgba(0,0,0,.18);
  padding: 14px;
}
.faction-grid-pro { grid-template-columns: 1fr; }
.pro-faction-choice {
  min-height: 132px;
  padding-right: 14px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pro-faction-choice:hover { transform: translateY(-2px); }
.choice-mini-squad {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}
.choice-mini {
  width: 18px;
  height: 25px;
  position: relative;
  display: inline-block;
  border-bottom: 4px solid var(--team-accent);
  opacity: .92;
}
.choice-mini::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5d2b8;
}
.choice-mini::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 10px;
  height: 13px;
  border-radius: 3px 3px 1px 1px;
  background: var(--team-color);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.choice-mini.ninja::before { background: #151018; }
.choice-mini.medieval::after { background: #9ea4aa; }
.choice-mini.gladiator::after { background: #6b301b; }
.faction-rule-note {
  margin-top: 12px;
  padding: 11px;
  color: #c8b798;
  border: 1px dashed rgba(217,169,83,.28);
  background: rgba(217,169,83,.055);
  font-size: 12px;
  line-height: 1.35;
}
.team-preview-featured {
  min-height: 100%;
  padding: 18px;
  overflow: hidden;
  position: relative;
}
.team-preview-featured::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--team-accent) 20%, transparent), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--team-color) 17%, transparent), transparent 60%);
  pointer-events: none;
}
.team-preview-featured > * { position: relative; }
.featured-head { margin-bottom: 12px; }
.squad-stage {
  position: relative;
  height: 230px;
  margin: 14px 0;
  border: 1px solid color-mix(in srgb, var(--team-accent) 24%, rgba(255,255,255,.08));
  background:
    radial-gradient(ellipse at 50% 85%, color-mix(in srgb, var(--team-accent) 17%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.24));
  overflow: hidden;
}
.squad-stage::before {
  content: '';
  position: absolute;
  left: 8%; right: 8%; bottom: 26px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.48), transparent 68%);
}
.squad-hero {
  --x: calc(12% + (var(--slot) * 14%));
  position: absolute;
  left: var(--x);
  bottom: 26px;
  width: 82px;
  height: 150px;
  transform: translateX(-50%) scale(calc(.82 + (var(--slot) % 3) * .05));
}
.squad-base {
  position: absolute;
  left: 16px;
  bottom: 0;
  width: 50px;
  height: 15px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--team-accent) 72%, #111);
  box-shadow: 0 8px 18px rgba(0,0,0,.34), inset 0 -3px 0 rgba(0,0,0,.26);
}
.squad-body {
  position: absolute;
  left: 26px;
  bottom: 14px;
  width: 30px;
  height: 94px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--team-color) 82%, #fff 8%), color-mix(in srgb, var(--team-color) 82%, #000 18%));
  border-radius: 13px 13px 7px 7px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 9px 12px 20px rgba(0,0,0,.35);
}
.squad-body::before,
.squad-body::after {
  content: '';
  position: absolute;
  top: 30px;
  width: 8px;
  height: 45px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--team-color) 76%, #000 10%);
}
.squad-body::before { left: -9px; transform: rotate(10deg); }
.squad-body::after { right: -9px; transform: rotate(-10deg); }
.squad-head {
  position: absolute;
  left: 5px;
  top: -28px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e3c6a0;
  border: 2px solid rgba(0,0,0,.28);
}
.squad-weapon {
  position: absolute;
  right: -24px;
  top: 26px;
  width: 48px;
  height: 6px;
  border-radius: 8px;
  background: var(--team-accent);
  transform: rotate(-13deg);
  box-shadow: 0 0 10px color-mix(in srgb, var(--team-accent) 45%, transparent);
}
.squad-hero.heavy .squad-body { width: 38px; left: 22px; height: 104px; }
.squad-hero.heavy .squad-weapon { width: 58px; height: 9px; }
.squad-hero.sniper .squad-weapon { width: 66px; height: 4px; }
.squad-hero.medic .squad-body::after { background: #e9fff1; }
.squad-hero.scout { transform: translateX(-50%) scale(.78); }
.squad-hero.ninja .squad-head { background: #151018; }
.squad-hero.ninja .squad-body { border-radius: 18px 18px 8px 8px; background: linear-gradient(180deg, #19111d, #070509); }
.squad-hero.ninja .squad-weapon { background: #c084ff; }
.squad-hero.medieval .squad-body { background: linear-gradient(180deg, #aeb5bb, #687078); }
.squad-hero.medieval .squad-head { background: #aeb5bb; border-radius: 45% 45% 38% 38%; }
.squad-hero.gladiator .squad-body { background: linear-gradient(180deg, #8a4428, #3b1c12); }
.squad-hero.gladiator .squad-head { background: #d9ba92; }
.squad-label {
  position: absolute;
  left: 50%;
  bottom: -19px;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #fff6df;
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .8;
}
.compact-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.compact-roster .roster-card { min-height: 112px; }
.compact-roster .roster-card p { display: none; }
@media (max-width: 980px) {
  .menu-header-pro { grid-template-columns: 1fr; }
  .menu-steps { justify-content: flex-start; }
  .pro-mode-grid, .faction-layout-pro { grid-template-columns: 1fr; }
  .compact-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .menu-header-pro, .menu-step { padding-left: 18px; padding-right: 18px; }
  .faction-topbar { grid-template-columns: 1fr; }
  .squad-stage { height: 200px; }
  .squad-hero { width: 66px; transform: translateX(-50%) scale(.72); }
  .compact-roster { grid-template-columns: 1fr; }
}


.menu-pro { width: min(1360px, 96vw); max-height: calc(100svh - 24px); overflow: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.menu-step, .faction-picker-panel, .faction-grid-pro, .team-preview-featured, .online-box { touch-action: pan-y; }
.menu-section-label { margin: 6px 0 12px; color: #f0d088; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
.battle-mode-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-bottom: 14px; }
.battle-card { min-height: 128px; }
.menu-continue-btn { margin-top: 4px; }
.faction-grid-pro { max-height: 610px; overflow: auto; padding-right: 4px; }
.team-choice-visual { margin-top: 10px; border: 1px solid rgba(255,255,255,.06); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.18)); min-height: 92px; border-radius: 14px; overflow: hidden; }
.team-choice-render { width: 100%; height: 90px; }
.team-choice-render canvas, .menu-unit-render canvas { width: 100% !important; height: 100% !important; display:block; }
.team-preview-featured::before { background: radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--team-accent) 22%, transparent), transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--team-color) 12%, transparent), transparent 60%); }
.squad-stage { display:none; }
.menu-render-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 0 16px; }
.menu-render-card { border: 1px solid color-mix(in srgb, var(--team-accent) 24%, rgba(255,255,255,.08)); background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18)); min-height: 270px; display:flex; flex-direction:column; overflow:hidden; }
.menu-unit-render { height: 170px; position: relative; background: radial-gradient(circle at 50% 78%, color-mix(in srgb, var(--team-accent) 18%, transparent), transparent 38%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.05)); }
.menu-render-meta { padding: 10px 12px 12px; display:flex; flex-direction:column; gap:6px; }
.menu-render-role { color: var(--team-accent); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 900; }
.menu-render-name { font-size: 18px; line-height: 1.05; font-weight: 900; color: #fff3d5; }
.menu-render-ability { color: #ccbda0; font-size: 12px; line-height: 1.35; min-height: 34px; }
.render-mini-stats { display:flex; gap: 8px; flex-wrap: wrap; font-size: 11px; color: #f3ead9; }
.render-mini-stats span { padding: 4px 6px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); }
.team-style, .team-passive { padding: 12px 14px; border: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.16); margin-bottom: 10px; }
.compact-roster { grid-template-columns: repeat(3, minmax(0,1fr)); }
.team-choice-selected-note { color:#c6ddb8; font-size:11px; text-transform:uppercase; letter-spacing:.08em; margin-top:6px; }
@media (max-width: 980px) { .battle-mode-grid, .menu-render-grid, .compact-roster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .battle-mode-grid, .menu-render-grid, .compact-roster { grid-template-columns: 1fr; } .faction-grid-pro { max-height:none; } .menu-pro { max-height: calc(100svh - 14px); padding: 18px; } }


/* Fit start menu to viewport without visible scrollbars */
#startModal {
  overflow: hidden !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
}
#startModal .menu-pro {
  width: min(1220px, 96vw);
  max-width: none;
  max-height: none !important;
  overflow: hidden !important;
  transform-origin: top center;
  will-change: transform;
}
#startModal .faction-grid-pro {
  max-height: none !important;
  overflow: visible !important;
}
#startModal .menu-header-pro { padding: 22px 24px 16px; gap: 18px; }
#startModal .menu-step { padding: 18px 24px 20px; }
#startModal .pro-mode-card { min-height: 205px; }
#startModal .team-preview-featured { padding: 14px; }
#startModal .small-note { margin-top: 8px; }
@media (max-width: 1280px) {
  #startModal .menu-header-pro { grid-template-columns: auto minmax(220px,1fr) auto; }
  #startModal .pro-mode-card { min-height: 190px; }
}
@media (max-width: 980px) {
  #startModal .menu-header-pro { grid-template-columns: 1fr; text-align: center; }
  #startModal .menu-steps { justify-content: center; }
}


/* FIX v3: menu sin scroll visible y con flujo completo */
#startModal {
  overflow: hidden !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
}
#startModal .menu-pro {
  width: min(1180px, 96vw) !important;
  max-height: none !important;
  overflow: hidden !important;
  transform-origin: center center;
}
#startModal .menu-header-pro {
  padding: clamp(14px, 2.2vh, 22px) clamp(18px, 2vw, 26px) clamp(10px, 1.8vh, 16px) !important;
  gap: 16px !important;
}
#startModal .modal-logo { font-size: clamp(36px, 5vw, 58px); }
#startModal .menu-copy h2 { font-size: clamp(20px, 2.2vw, 30px); margin-bottom: 4px; }
#startModal .menu-copy p { font-size: clamp(12px, 1.2vw, 15px); line-height: 1.35; }
#startModal .menu-step { padding: clamp(12px, 2vh, 20px) clamp(18px, 2vw, 26px) clamp(12px, 2vh, 20px) !important; }
#startModal .menu-section-label { margin: 0 0 8px !important; }
#startModal .pro-mode-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.2vw, 14px) !important;
  margin: 0 0 clamp(10px, 1.6vh, 16px) !important;
}
#startModal .pro-mode-card {
  min-height: clamp(122px, 19vh, 168px) !important;
  padding: clamp(12px, 1.7vh, 18px) !important;
}
#startModal .pro-mode-card .mode-icon,
#startModal .battle-card .mode-icon {
  width: clamp(38px, 5vh, 50px) !important;
  height: clamp(38px, 5vh, 50px) !important;
  font-size: clamp(18px, 2.6vh, 25px) !important;
  margin-bottom: clamp(8px, 1.4vh, 14px) !important;
}
#startModal .pro-mode-card strong,
#startModal .battle-card strong { font-size: clamp(19px, 2.4vw, 27px) !important; }
#startModal .pro-mode-card span,
#startModal .battle-card span { font-size: clamp(11px, 1.1vw, 14px) !important; line-height: 1.28 !important; }
#startModal .pro-mode-card small,
#startModal .battle-card small { left: clamp(12px, 1.7vh, 18px) !important; bottom: clamp(9px, 1.4vh, 14px) !important; font-size: clamp(9px, 1vw, 12px) !important; }
#startModal .battle-mode-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.2vw, 14px) !important;
  margin-bottom: clamp(10px, 1.5vh, 16px) !important;
}
#startModal .battle-card {
  min-height: clamp(106px, 16vh, 142px) !important;
  padding: clamp(11px, 1.5vh, 16px) !important;
  position: relative;
}
#startModal .mode-hint { display: none !important; }
#startModal .menu-continue-btn {
  width: min(420px, 100%);
  display: block;
  margin: 0 auto !important;
  padding: clamp(11px, 1.8vh, 15px) !important;
}
#startModal .small-note { display: none !important; }
#startModal .faction-grid-pro { max-height: none !important; overflow: visible !important; }
#startModal .team-choice-visual { display: none !important; }
#startModal .team-choice { min-height: auto !important; padding: clamp(10px, 1.3vh, 14px) !important; }
#startModal .faction-layout-pro { grid-template-columns: 330px minmax(0, 1fr) !important; gap: 14px !important; }
#startModal .faction-topbar { margin-bottom: 10px !important; }
#startModal .faction-topbar h3 { font-size: clamp(20px, 2vw, 25px); }
#startModal .faction-topbar p { font-size: clamp(11px, 1.05vw, 13px); }
#startModal .team-preview-featured { padding: 12px !important; }
#startModal .menu-render-grid { gap: 10px !important; margin: 10px 0 !important; }
#startModal .menu-render-card { min-height: 215px !important; }
#startModal .menu-unit-render { height: 130px !important; }
#startModal .menu-render-name { font-size: 15px !important; }
#startModal .menu-render-ability { display: none !important; }
#startModal .compact-roster { display: none !important; }
@media (max-width: 900px) {
  #startModal .menu-header-pro { grid-template-columns: 1fr !important; text-align: center; }
  #startModal .menu-steps { justify-content: center; }
  #startModal .pro-mode-grid, #startModal .battle-mode-grid { grid-template-columns: 1fr !important; }
  #startModal .faction-layout-pro { grid-template-columns: 1fr !important; }
}