:root {
  --bg: #0b1020;
  --panel: rgba(15, 23, 42, .86);
  --panel2: rgba(30, 41, 59, .88);
  --txt: #e5e7eb;
  --muted: #94a3b8;
  --accent: #38bdf8;
  --accent2: #a78bfa;
  --danger: #fb7185;
  --good: #34d399;
  --warn: #fbbf24;
  --line: rgba(148, 163, 184, .25);
}

* { box-sizing: border-box; }

/* 15.1.42.20 — autoridad global de scrollbars para la interfaz normal.
   El Manual y editores con identidad propia conservan sus reglas específicas
   declaradas más abajo con mayor especificidad. */
:root {
  --f2d-scrollbar-track: #07111d;
  --f2d-scrollbar-thumb: #526b82;
  --f2d-scrollbar-thumb-hover: #6f8da8;
  --f2d-scrollbar-border: #0c1c2d;
  scrollbar-color: var(--f2d-scrollbar-thumb) var(--f2d-scrollbar-track);
  scrollbar-width: thin;
}

* {
  scrollbar-color: var(--f2d-scrollbar-thumb) var(--f2d-scrollbar-track);
  scrollbar-width: thin;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track {
  background: linear-gradient(180deg, #050b13, var(--f2d-scrollbar-track));
  border: 1px solid rgba(82, 107, 130, .22);
  border-radius: 9px;
}
*::-webkit-scrollbar-thumb {
  min-height: 34px;
  background: linear-gradient(180deg, #607b93, var(--f2d-scrollbar-thumb));
  border: 2px solid var(--f2d-scrollbar-border);
  border-radius: 9px;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #86a6c1, var(--f2d-scrollbar-thumb-hover));
  background-clip: padding-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--txt);
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.18), transparent 34%),
    radial-gradient(circle at bottom right, rgba(167,139,250,.20), transparent 30%),
    linear-gradient(180deg, #020617, #0f172a 65%, #020617);
  min-height: 100vh;
  overflow-x: hidden;
}

button, select, input { font: inherit; }

button {
  border: 1px solid rgba(255,255,255,.14);
  color: var(--txt);
  background: linear-gradient(180deg, rgba(56,189,248,.26), rgba(37,99,235,.20));
  border-radius: 14px;
  padding: 10px 14px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}

button:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
  border-color: rgba(255,255,255,.28);
}

button:active { transform: translateY(1px) scale(.99); }
button.secondary { background: rgba(30, 41, 59, .78); }
button.danger { background: linear-gradient(180deg, rgba(251,113,133,.38), rgba(190,18,60,.26)); }
button.good { background: linear-gradient(180deg, rgba(52,211,153,.34), rgba(5,150,105,.24)); }
button.warn { background: linear-gradient(180deg, rgba(251,191,36,.32), rgba(180,83,9,.24)); }
button.small { padding: 7px 10px; border-radius: 10px; font-size: 13px; }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

input, select, textarea {
  border: 1px solid var(--line);
  color: var(--txt);
  background: rgba(15, 23, 42, .9);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  min-width: 0;
}

textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.fileButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.14);
  color: var(--txt);
  background: linear-gradient(180deg, rgba(52,211,153,.34), rgba(5,150,105,.24));
  border-radius: 14px;
  padding: 10px 14px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
}

.fileButton input { display: none; }

.app {
  width: min(1220px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 22px 0 32px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.brand { display: flex; align-items: center; gap: 12px; }

.logo {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(56,189,248,.95), rgba(167,139,250,.95));
  color: #020617;
  font-weight: 950;
  box-shadow: 0 12px 32px rgba(56,189,248,.18);
}

.brand h1 {
  font-size: clamp(20px, 3vw, 32px);
  margin: 0;
  line-height: 1;
  letter-spacing: -.03em;
}

.brand p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,.58);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.screen { display: none; }
.screen.active { display: block; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.26);
  backdrop-filter: blur(12px);
}

.hero {
  grid-column: span 8;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.side { grid-column: span 4; }
.wide { grid-column: 1 / -1; }
.half { grid-column: span 6; }
.third { grid-column: span 4; }

.heroTitle {
  font-size: clamp(34px, 6vw, 72px);
  line-height: .92;
  margin: 0 0 14px;
  letter-spacing: -.06em;
}

.heroTitle span {
  background: linear-gradient(90deg, #38bdf8, #a78bfa, #f472b6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.muted { color: var(--muted); }
.tiny { font-size: 12px; color: var(--muted); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.stack { display: grid; gap: 10px; }
.space { height: 12px; }

.menuButtons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.selectorList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.choice {
  border: 1px solid var(--line);
  background: rgba(15,23,42,.62);
  border-radius: 18px;
  padding: 14px;
  cursor: pointer;
  transition: border-color .12s ease, transform .12s ease, background .12s ease;
  min-height: 146px;
}

.choice:hover { transform: translateY(-2px); border-color: rgba(56,189,248,.55); }
.choice.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(56,189,248,.15) inset; background: rgba(56,189,248,.09); }
.choice.locked { opacity: .42; filter: grayscale(.7); cursor: not-allowed; }
.choice h3 { margin: 0 0 6px; }
.choice p { margin: 0; color: var(--muted); font-size: 13px; }

.swatch {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.25);
  box-shadow: inset 0 0 18px rgba(0,0,0,.28);
  flex: 0 0 auto;
}

.statbar {
  height: 8px;
  background: rgba(148,163,184,.20);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 7px;
}

.statbar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 999px;
}

.battleShell {
  display: grid;
  gap: 12px;
  min-height: calc(100dvh - 44px);
  grid-template-rows: auto auto minmax(0, auto) auto;
}

.hud {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.hudPlayer {
  background: rgba(15, 23, 42, .78);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px;
  min-height: 84px;
}

.hudPlayer.dead { opacity: .45; filter: grayscale(1); }
.hudPlayer strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.percent { font-size: 28px; font-weight: 950; letter-spacing: -.04em; line-height: 1; }
.defenseText { font-size: 11px; color: var(--muted); margin-top: 4px; }

#gameCanvas {
  width: 100%;
  height: auto;
  max-height: calc(100dvh - 225px);
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.16);
  background: #0f172a;
  box-shadow: 0 22px 70px rgba(0,0,0,.36);
}

.log {
  height: 130px;
  overflow: auto;
  background: rgba(2,6,23,.65);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #cbd5e1;
  white-space: pre-wrap;
}

.kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 7px;
  background: rgba(15,23,42,.75);
  color: #e2e8f0;
}

.modalShade {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, .76);
  backdrop-filter: blur(10px);
  z-index: 30;
  padding: 18px;
}

.modalShade.active { display: flex; }
.modalBox { max-width: 1100px; width: min(1100px, 100%); }

.notice {
  border: 1px solid rgba(251,191,36,.38);
  background: rgba(251,191,36,.08);
  border-radius: 16px;
  padding: 12px;
  color: #fde68a;
  font-size: 13px;
}

.goodNotice {
  border: 1px solid rgba(52,211,153,.35);
  background: rgba(52,211,153,.08);
  color: #bbf7d0;
}

@media (max-width: 800px) {
  .hero, .side, .half, .third { grid-column: 1 / -1; }
  .menuButtons { grid-template-columns: 1fr; }
  .hud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar { align-items: flex-start; flex-direction: column; }
}

.statsTableWrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(2, 6, 23, .45);
}

.statsTable {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
  font-size: 13px;
}

.statsTable th,
.statsTable td {
  border-bottom: 1px solid rgba(148, 163, 184, .18);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.statsTable th {
  color: #e2e8f0;
  background: rgba(15, 23, 42, .8);
  position: sticky;
  top: 0;
}

.statsTable tr:last-child td {
  border-bottom: 0;
}


.resultHeader {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
}

.resultCard {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: rgba(15, 23, 42, .72);
}

.resultCard h3 {
  margin: 0 0 6px;
}

.resultBadges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.resultBadge {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(2,6,23,.55);
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 12px;
  color: var(--muted);
}

@media (max-height: 760px) {
  .app {
    padding-top: 10px;
    width: min(1220px, calc(100vw - 16px));
  }

  .topbar {
    margin-bottom: 8px;
  }

  .brand p {
    display: none;
  }

  .hudPlayer {
    min-height: 68px;
    padding: 8px;
  }

  .percent {
    font-size: 22px;
  }

  .defenseText {
    font-size: 10px;
  }

  #gameCanvas {
    max-height: calc(100dvh - 190px);
    border-radius: 16px;
  }
}

@media (max-width: 900px) {
  .resultHeader {
    grid-template-columns: 1fr;
  }

  #gameCanvas {
    max-height: calc(100dvh - 250px);
  }
}

/* V6 map event config */
.inlineCheck {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(15, 23, 42, .55);
  color: var(--muted);
  font-size: 13px;
}

.mapConfigGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.configField {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  background: rgba(15, 23, 42, .55);
  border-radius: 14px;
  padding: 10px;
  color: var(--muted);
  font-size: 13px;
}

.configField input[type="number"] {
  width: 100%;
}

.configCheckbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.configCheckbox input {
  width: 18px;
  height: 18px;
}

/* V6.1: indicador temporal de mutación de stats en la HUD */
.statPopup {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(103, 232, 249, .35);
}

/* V6.3: configuración dinámica y consola */
.compactRuleGroup {
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 12px;
  background: rgba(15, 23, 42, .40);
}

.configSplit {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 14px;
}

.configPanel {
  border: 1px solid rgba(148, 163, 184, .22);
  background: rgba(2, 6, 23, .32);
  border-radius: 18px;
  padding: 14px;
}

@media (max-width: 850px) {
  .configSplit {
    grid-template-columns: 1fr;
  }
}

/* V6.4: misterio real y consola sin ayuda */
.mysteryChoice {
  display: grid;
  align-content: center;
  justify-items: start;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.14), transparent 30%),
    linear-gradient(135deg, rgba(56,189,248,.14), rgba(244,114,182,.11));
}

.mysteryLogo {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  margin-bottom: 10px;
  font-size: 38px;
  font-weight: 950;
  color: #020617;
  background: linear-gradient(135deg, #e5e7eb, #38bdf8, #f472b6);
  box-shadow: 0 12px 30px rgba(56,189,248,.22);
}

.commandOnlyBox input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.commandOk {
  border-color: rgba(52, 211, 153, .9) !important;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .16) !important;
}

.commandError {
  border-color: rgba(251, 113, 133, .9) !important;
  box-shadow: 0 0 0 3px rgba(251, 113, 133, .16) !important;
}

/* V6.5 online lobby */
.onlineConfigGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.onlineLocalPlayerRow {
  display: contents;
}

.roomRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(148, 163, 184, .18);
}

/* V9.2.1: HUD de mutación tóxica más claro */
.toxicStatHud {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(103, 232, 249, .34);
  border-radius: 13px;
  background: rgba(8, 47, 73, .40);
}

.toxicStatItem {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #e0f2fe;
  padding: 5px 7px;
  border-radius: 10px;
  background: rgba(15, 23, 42, .64);
}

.toxicStatItem b {
  font-size: 16px;
}

.toxicStatItem strong {
  font-size: 16px;
  letter-spacing: .02em;
  opacity: .92;
}

.toxicStatItem.center {
  grid-column: 1 / -1;
  font-size: 13px;
  background: rgba(14, 165, 233, .16);
  border: 1px solid rgba(125, 211, 252, .28);
}

.toxicStatItem.buff strong { color: #86efac; }
.toxicStatItem.nerf strong { color: #fca5a5; }

#joinOnlinePanel.onlineHidden,
#hostOnlinePanel.onlineHidden {
  display: none;
}


.modifierConfigRow {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  background: rgba(15,23,42,.42);
  border-radius: 14px;
  padding: 9px;
}

.modifierConfigRow input[type="number"] {
  width: 100%;
}

/* Update 7.2: pause menu shared with online clients + safer long config modals */
.modalBox,
#mapConfigModal .modalBox,
#modifierConfigModal .modalBox {
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

#modifierConfigBody {
  max-height: calc(100dvh - 82px);
  overflow-y: auto;
  padding-right: 4px;
}

.pauseMenuOverlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 12;
}

.pauseMenuOverlay.hidden {
  display: none;
}

.battleShell {
  position: relative;
}

.pauseMenuCard {
  width: min(560px, calc(100% - 28px));
  pointer-events: auto;
  background: rgba(15, 23, 42, .92);
  border: 1px solid rgba(148, 163, 184, .34);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,.42);
  backdrop-filter: blur(10px);
}

.modifierConfigRow {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 220px);
}

@media (max-width: 700px) {
  .modifierConfigRow {
    grid-template-columns: 1fr;
  }
}


.resultPortraitGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}

.resultPortraitCard {
  border: 1px solid color-mix(in srgb, var(--playerColor) 48%, rgba(255,255,255,.18));
  background: linear-gradient(180deg, color-mix(in srgb, var(--playerColor) 16%, rgba(15,23,42,.92)), rgba(15,23,42,.88));
  border-radius: 18px;
  padding: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.resultPortraitTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.resultPortraitPlace {
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(2,6,23,.45);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
  color: #e2e8f0;
}

.resultPortraitIcon {
  font-size: 26px;
}

.resultPortraitCard h4 {
  margin: 0;
}

.resultPortraitStats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.resultPortraitStats span,
.resultPlayerRank {
  border-radius: 999px;
  background: rgba(2,6,23,.42);
  border: 1px solid rgba(255,255,255,.10);
  padding: 4px 8px;
  font-size: 12px;
}

.resultPlayerBadge {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
}

.resultPlayerMeta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}


.resultWinnerSplash {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: radial-gradient(circle at top left, rgba(56,189,248,.20), transparent 42%), linear-gradient(135deg, rgba(15,23,42,.92), rgba(30,41,59,.82));
  border-radius: 22px;
  padding: 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

.resultWinnerSplash h2 {
  margin: 4px 0;
  font-size: clamp(24px, 4vw, 44px);
  letter-spacing: -.04em;
}

.resultWinnerLabel {
  color: #93c5fd;
  font-weight: 900;
  letter-spacing: .12em;
  font-size: 12px;
}

.resultWinnerScore {
  font-size: clamp(44px, 8vw, 82px);
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.35));
}

.resultCardGlow {
  background: linear-gradient(180deg, rgba(56,189,248,.11), rgba(15,23,42,.78));
}

.versionTimeline .notice {
  font-size: 14px;
  line-height: 1.45;
}


.modifierCompactSplit {
  grid-template-columns: minmax(270px, .85fr) minmax(320px, 1.15fr);
}

.compactTimingGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modifierGridCompact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.compactModifierRow {
  grid-template-columns: minmax(0, 1fr) 82px !important;
  padding: 7px 8px;
  border-radius: 12px;
}

.compactModifierName {
  gap: 6px;
  min-width: 0;
  font-size: 13px;
}

.compactModifierName span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compactWeight {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
}

.compactWeight input {
  min-width: 0;
  padding: 6px 7px;
  font-size: 12px;
}

@media (max-width: 900px) {
  .modifierCompactSplit,
  .compactTimingGrid {
    grid-template-columns: 1fr;
  }
}


.versionHomeCard .notice {
  padding: 10px;
}

.versionTimeline .notice strong {
  color: #e2e8f0;
}


.bindRowV9 {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(320px, 2fr);
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(148, 163, 184, .14);
}

.bindActionName {
  color: var(--txt);
  font-weight: 700;
}

.bindSlots {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .bindRowV9 {
    grid-template-columns: 1fr;
  }
  .bindSlots {
    justify-content: flex-start;
  }
}

.singleBindSlot { grid-template-columns: minmax(110px, auto) auto !important; }
.singleBindSlot .kbd { min-width: 110px; text-align: center; }

/* Update 9.3.3/9.4: roster online, chat de sala y limpieza de paneles */
.onlineLobbyCard,
.onlineChatCard,
.onlineBattlePanel {
  border-color: rgba(56, 189, 248, .25);
  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.78));
}

.onlineRosterGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.onlineRosterGrid.compact {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-top: 8px;
}

.onlineRosterHeader,
.onlineRosterEmpty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.35);
  border-radius: 14px;
  padding: 10px 12px;
  color: #dbeafe;
}

.onlinePlayerCard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--playerColor) 42%, rgba(255,255,255,.12));
  background: radial-gradient(circle at top left, color-mix(in srgb, var(--playerColor) 18%, transparent), transparent 48%), rgba(2,6,23,.42);
  border-radius: 16px;
  padding: 10px;
  min-width: 0;
}

.onlinePlayerAvatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--playerColor) 32%, rgba(15,23,42,.9));
  border: 1px solid color-mix(in srgb, var(--playerColor) 55%, rgba(255,255,255,.12));
  color: #f8fafc;
  font-weight: 950;
  box-shadow: inset 0 0 18px rgba(0,0,0,.22);
}

.onlinePlayerInfo {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.onlinePlayerInfo strong,
.onlinePlayerInfo span,
.onlinePlayerInfo small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.onlinePlayerInfo span { color: #bfdbfe; font-size: 13px; }
.onlinePlayerInfo small { color: var(--muted); font-size: 11px; }

.onlineChatInputRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 10px;
}

.chatLog {
  min-height: 160px;
  max-height: 230px;
  white-space: pre-wrap;
}

.onlineBattlePanel.hidden { display: none; }
.onlineBattlePanel { padding: 12px; }
.compactOnlineSelect {
  min-width: min(260px, 100%);
  padding: 8px;
}

@media (max-width: 720px) {
  .onlineChatInputRow { grid-template-columns: 1fr; }
  .onlinePlayerCard { grid-template-columns: auto minmax(0, 1fr); }
  .onlinePlayerCard button { grid-column: 1 / -1; }
  .onlineRosterHeader { align-items: flex-start; flex-direction: column; }
}

/* Update 9.4: roster/chat de sala solo visibles dentro de una sala real */
.onlineRoomOnly.hidden {
  display: none !important;
}

/* Update 9.4: polish visual general, chat separado y online más claro */
:root {
  --panelGlow: rgba(56, 189, 248, .18);
  --dangerGlow: rgba(248, 113, 113, .20);
  --goldGlow: rgba(250, 204, 21, .18);
}

body {
  background:
    radial-gradient(circle at 12% 6%, rgba(239, 68, 68, .16), transparent 24%),
    radial-gradient(circle at 86% 12%, rgba(56, 189, 248, .12), transparent 28%),
    linear-gradient(135deg, #020617 0%, #07111f 52%, #020617 100%);
}

.topbar {
  border-bottom: 1px solid rgba(248, 113, 113, .35);
  box-shadow: 0 16px 42px rgba(0,0,0,.26), inset 0 -1px rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
}

.logo {
  background: linear-gradient(135deg, #ef4444, #f97316 55%, #fde68a);
  color: #0f172a;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 12px 28px rgba(239,68,68,.30);
}

.card {
  position: relative;
  overflow: hidden;
  border-color: rgba(148, 163, 184, .22);
  background:
    linear-gradient(180deg, rgba(15,23,42,.94), rgba(15,23,42,.78)),
    radial-gradient(circle at top right, rgba(56,189,248,.10), transparent 40%);
  box-shadow: 0 16px 42px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.04);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(248,113,113,.65), rgba(56,189,248,.38), transparent);
  opacity: .65;
  pointer-events: none;
}

.hero {
  min-height: 360px;
  background:
    radial-gradient(circle at 80% 18%, rgba(248,113,113,.18), transparent 34%),
    radial-gradient(circle at 12% 74%, rgba(56,189,248,.14), transparent 32%),
    linear-gradient(135deg, rgba(15,23,42,.98), rgba(2,6,23,.84));
}

.heroTitle {
  letter-spacing: -.04em;
  text-shadow: 0 10px 35px rgba(0,0,0,.42);
}

.heroTitle span {
  color: #f97316;
  text-shadow: 0 0 22px rgba(249,115,22,.25);
}

button,
.fileButton {
  border-radius: 14px;
  font-weight: 850;
  box-shadow: 0 8px 18px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.08);
  transition: transform .12s ease, filter .12s ease, border-color .12s ease, box-shadow .12s ease;
}

button:hover,
.fileButton:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 12px 28px rgba(0,0,0,.24), 0 0 0 1px rgba(255,255,255,.06) inset;
}

button:active,
.fileButton:active {
  transform: translateY(0) scale(.99);
}

button.good {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  border-color: rgba(187,247,208,.36);
}

button.danger {
  background: linear-gradient(135deg, #991b1b, #ef4444);
  border-color: rgba(254,202,202,.32);
}

input,
select,
textarea {
  border-radius: 14px;
  border-color: rgba(148,163,184,.26);
  background: rgba(2,6,23,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(56,189,248,.62);
  box-shadow: 0 0 0 3px rgba(56,189,248,.12), inset 0 1px 0 rgba(255,255,255,.04);
}

.onlineChatCard {
  border-color: rgba(34,197,94,.32);
  background:
    radial-gradient(circle at top right, rgba(34,197,94,.11), transparent 35%),
    linear-gradient(180deg, rgba(15,23,42,.94), rgba(15,23,42,.78));
}

.onlineConsoleCard {
  border-color: rgba(148,163,184,.22);
  background:
    radial-gradient(circle at top right, rgba(148,163,184,.10), transparent 34%),
    linear-gradient(180deg, rgba(2,6,23,.94), rgba(15,23,42,.72));
}

.onlineTechLog {
  min-height: 96px;
  max-height: 170px;
  font-size: 12px;
  opacity: .78;
  white-space: pre-wrap;
  border-color: rgba(148,163,184,.14);
}

.chatLog {
  background: linear-gradient(180deg, rgba(2,6,23,.72), rgba(5,46,22,.22));
  border-color: rgba(34,197,94,.22);
}

.roomRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 14px;
  background: rgba(2,6,23,.36);
  margin: 8px 0;
}

.notice {
  border-radius: 14px;
}

.versionTimeline .notice {
  position: relative;
  padding-left: 16px;
}

.versionTimeline .notice::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 999px;
  background: rgba(248,113,113,.35);
}

@media (max-width: 780px) {
  .topbar,
  .brand,
  .row {
    align-items: stretch;
  }
  .hero {
    min-height: auto;
  }
  .roomRow {
    grid-template-columns: 1fr;
  }
}

/* V9.5 mini hotfix: volver a botones verdes claros y arreglar resultados finales */
button.good,
.fileButton {
  background: linear-gradient(180deg, rgba(52,211,153,.34), rgba(5,150,105,.24));
  border-color: rgba(255,255,255,.14);
  color: var(--txt);
}

button.good:hover,
.fileButton:hover {
  filter: brightness(1.12);
  border-color: rgba(255,255,255,.28);
}

.homeCoverSlot {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  width: min(560px, 100%);
  margin: 12px 0 16px;
  padding: 12px 14px;
  border: 1px dashed rgba(148, 163, 184, .30);
  border-radius: 18px;
  background:
    radial-gradient(circle at left, rgba(56,189,248,.10), transparent 40%),
    rgba(2,6,23,.28);
  color: #e2e8f0;
}

.homeCoverIcon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(15,23,42,.68);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 24px;
}

.homeCoverSlot strong,
.homeCoverSlot span {
  display: block;
}

.homeCoverSlot span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}

#modal.modalShade {
  align-items: flex-start;
  overflow-y: auto;
}

#modal .modalBox {
  width: min(1180px, calc(100vw - 28px));
  max-height: calc(100dvh - 36px);
  overflow: auto;
  margin: 18px auto;
  padding-bottom: 10px;
}

#modalText {
  color: var(--txt);
  min-height: 0;
}

.modalActions {
  position: sticky;
  bottom: -10px;
  z-index: 5;
  margin: 10px -4px -4px;
  padding: 12px 4px 4px;
  border-top: 1px solid rgba(148, 163, 184, .20);
  background: linear-gradient(180deg, rgba(15,23,42,.80), rgba(15,23,42,.98));
  backdrop-filter: blur(10px);
}

.resultQuickActions,
.resultLegendGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 14px;
}

.resultQuickActions {
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 16px;
  background: rgba(2,6,23,.36);
}

.resultLegendGrid .resultBadge {
  white-space: normal;
  line-height: 1.35;
}

.statsTableWrap {
  max-height: min(52dvh, 520px);
  overflow: auto;
}

.statsTable th {
  z-index: 2;
}

@media (max-width: 700px) {
  #modal .modalBox {
    width: calc(100vw - 16px);
    margin: 8px auto;
    max-height: calc(100dvh - 16px);
    border-radius: 18px;
    padding: 12px;
  }

  .modalActions {
    bottom: -12px;
  }

  .homeCoverSlot {
    grid-template-columns: 1fr;
  }
}

/* V9.5.1 hotfix: sala online más limpia y liviana */
.hidden { display: none !important; }

#screenOnline.onlineInRoom #joinOnlinePanel,
#screenOnline.onlineInRoom #hostOnlinePanel,
#screenOnline.onlineInRoom #onlineRoomRosterCard,
#screenOnline.onlineInRoom #onlineRoomChatCard {
  grid-column: span 6;
}

#screenOnline.onlineInRoom #onlineConsoleCard {
  grid-column: 1 / -1;
}

#screenOnline.onlineInRoom #joinOnlinePanel,
#screenOnline.onlineInRoom #hostOnlinePanel {
  align-self: start;
  border-color: rgba(52,211,153,.24);
}

#screenOnline.onlineInRoom #onlineRoomRosterCard,
#screenOnline.onlineInRoom #onlineRoomChatCard {
  align-self: start;
}

#screenOnline.onlineInRoom #roomDirectoryBox.hidden,
#screenOnline.onlineInRoom #joinRoomInput.hidden,
#screenOnline.onlineInRoom #joinRoomBtn.hidden,
#screenOnline.onlineInRoom #refreshRoomsBtn.hidden,
#screenOnline.onlineInRoom #joinHelpText.hidden {
  display: none !important;
}

#screenOnline.onlineInRoom #joinStatusBox {
  border-color: rgba(52,211,153,.28);
  background: rgba(5,150,105,.11);
}

#screenOnline.onlineInRoom .onlineTechLog {
  min-height: 72px;
  max-height: 120px;
}

@media (max-width: 820px) {
  #screenOnline.onlineInRoom #joinOnlinePanel,
  #screenOnline.onlineInRoom #hostOnlinePanel,
  #screenOnline.onlineInRoom #onlineRoomRosterCard,
  #screenOnline.onlineInRoom #onlineRoomChatCard,
  #screenOnline.onlineInRoom #onlineConsoleCard {
    grid-column: 1 / -1;
  }
}

/* V10: online dentro de sala en dos columnas reales: izquierda control/personaje, derecha jugadores + chat, consola abajo */
#screenOnline.onlineInRoom #hostOnlinePanel,
#screenOnline.onlineInRoom #joinOnlinePanel {
  grid-column: 1 / span 6;
}
#screenOnline.onlineInRoom #onlineRoomRosterCard,
#screenOnline.onlineInRoom #onlineRoomChatCard {
  grid-column: 7 / -1;
}
#screenOnline.onlineInRoom #onlineConsoleCard {
  grid-column: 1 / -1;
}
.compactSelectField {
  max-width: 190px;
}
@media (max-width: 820px) {
  #screenOnline.onlineInRoom #hostOnlinePanel,
  #screenOnline.onlineInRoom #joinOnlinePanel,
  #screenOnline.onlineInRoom #onlineRoomRosterCard,
  #screenOnline.onlineInRoom #onlineRoomChatCard,
  #screenOnline.onlineInRoom #onlineConsoleCard {
    grid-column: 1 / -1;
  }
}

/* V10.2: online sala sin hueco inútil entre roster y chat */
#screenOnline.onlineInRoom .grid {
  align-items: start;
}
#screenOnline.onlineInRoom #onlineRoomRosterCard {
  margin-bottom: 0;
}
#screenOnline.onlineInRoom #onlineRoomChatCard {
  margin-top: -6px;
}
#screenOnline.onlineInRoom #onlineRoomRosterCard .tiny,
#screenOnline.onlineInRoom #onlineRoomChatCard .tiny {
  margin: 4px 0 0;
}
#screenOnline.onlineInRoom .onlineRosterGrid {
  margin-top: 8px;
  gap: 8px;
}
#screenOnline.onlineInRoom .chatLog {
  min-height: 118px;
  max-height: 190px;
}


/* Update 10.2: columna derecha real para evitar hueco entre roster y chat */
#screenOnline.onlineInRoom #onlineRoomRightColumn {
  grid-column: 7 / -1;
  display: grid;
  gap: 12px;
  align-self: start;
}
#screenOnline.onlineInRoom #onlineRoomRightColumn.hidden {
  display: none !important;
}
#screenOnline.onlineInRoom #onlineRoomRightColumn #onlineRoomRosterCard,
#screenOnline.onlineInRoom #onlineRoomRightColumn #onlineRoomChatCard {
  grid-column: auto !important;
  margin: 0 !important;
  width: 100%;
}
#screenOnline.onlineInRoom #onlineRoomRightColumn .chatLog {
  min-height: 112px;
  max-height: 174px;
}
@media (max-width: 820px) {
  #screenOnline.onlineInRoom #onlineRoomRightColumn {
    grid-column: 1 / -1;
  }
}

/* Update 10.3: resultado online claro + revancha por votos */
.resultRematchMain.rematchPulse,
.rematchPulse {
  position: relative;
  isolation: isolate;
  box-shadow: 0 0 0 1px rgba(34,197,94,.45), 0 0 22px rgba(34,197,94,.38), inset 0 1px rgba(255,255,255,.18);
  transform: translateY(-1px);
}
.resultRematchMain.rematchPulse::after,
.rematchPulse::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 1px solid rgba(74,222,128,.44);
  animation: rematchPulse 1.35s ease-in-out infinite;
  z-index: -1;
}
@keyframes rematchPulse {
  0%, 100% { opacity: .20; transform: scale(.98); }
  50% { opacity: .75; transform: scale(1.04); }
}
.onlineRematchVoteStatus {
  display: grid;
  gap: 7px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(52,211,153,.35);
  background: rgba(6,95,70,.16);
  margin: 12px 0;
}
.onlineVoteBar {
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  background: rgba(2,6,23,.72);
  border: 1px solid rgba(148,163,184,.22);
}
.onlineVoteBar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #a3e635);
  transition: width .25s ease;
}
.onlineResultGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.onlineResultFighter {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.24);
  background: rgba(15,23,42,.64);
}
.onlineResultFighter strong { color: #e5e7eb; }
.onlineResultFighter span { color: #93c5fd; font-weight: 800; }
.onlineResultFighter small { color: var(--muted); }
.onlineResultSplash {
  border-color: rgba(52,211,153,.30);
}


/* Update 10.5: Background1 reemplaza el bloque de portada y queda detrás del menú inicial. */
#screenHome .hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(2,6,23,.62), rgba(2,6,23,.90)),
    radial-gradient(circle at 18% 16%, rgba(56,189,248,.22), transparent 34%),
    radial-gradient(circle at 86% 72%, rgba(248,113,113,.20), transparent 34%),
    url("assets/img/backgrounds/background1_menu.png"),
    linear-gradient(135deg, rgba(15,23,42,.98), rgba(2,6,23,.84));
  background-size: cover, cover, cover, cover, cover;
  background-position: center;
}

#screenHome .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2,6,23,.88), rgba(2,6,23,.54) 48%, rgba(2,6,23,.78)),
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.08), transparent 36%);
  pointer-events: none;
  z-index: -1;
}

.homeBackgroundBadge {
  display: inline-flex;
  width: fit-content;
  margin: 8px 0 14px;
  padding: 7px 10px;
  border: 1px solid rgba(125,211,252,.26);
  border-radius: 999px;
  background: rgba(2,6,23,.50);
  color: #bae6fd;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.audioSettingsBox {
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 18px;
  padding: 12px;
  background: rgba(2,6,23,.30);
}

.audioRow {
  display: grid;
  gap: 7px;
}

.audioRow label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #cbd5e1;
  font-size: 13px;
}

.audioRow input[type="range"] {
  width: 100%;
  padding: 0;
  accent-color: #38bdf8;
}

.audioMuteRow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e2e8f0;
  font-size: 13px;
}

.audioMuteRow input {
  min-width: auto;
}

/* Update 10.5: el badge de versión tiene más espacio para 10.5. */
.logo {
  width: 54px;
}

.modifierAdvancedValueBox {
  margin-top: 12px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(248,113,113,.28);
  background: rgba(127,29,29,.18);
}

.modifierAdvancedValueBox h3 {
  margin: 0 0 6px;
}

.postIntroFullscreenPrompt {
  position: fixed;
  z-index: 120;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  width: min(760px, calc(100vw - 28px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px 12px 18px;
  border: 1px solid rgba(125, 211, 252, .42);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(3, 14, 30, .97), rgba(12, 35, 61, .96));
  box-shadow: 0 16px 44px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .08);
  color: #e7f4ff;
  opacity: 0;
  transform: translate(-50%, -16px);
  transition: opacity .2s ease, transform .2s ease;
}

.postIntroFullscreenPrompt[hidden],
body.f2dMobileProfile .postIntroFullscreenPrompt,
body[data-f2d-input="touch"] .postIntroFullscreenPrompt {
  display: none;
}

.postIntroFullscreenPrompt.isVisible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.postIntroFullscreenCopy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.postIntroFullscreenCopy strong {
  color: #f8fbff;
  font-size: 17px;
}

.postIntroFullscreenCopy span {
  color: #aebed0;
  font-size: 13px;
  line-height: 1.35;
}

.postIntroFullscreenActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.postIntroFullscreenActions button {
  min-height: 42px;
  padding: 9px 13px;
}

#postIntroFullscreenClose {
  width: 42px;
  min-width: 42px;
  padding-inline: 0;
}

@media (max-width: 700px) {
  .postIntroFullscreenPrompt {
    align-items: stretch;
    gap: 10px;
    padding: 11px 12px;
  }

  .postIntroFullscreenActions button:first-child {
    white-space: nowrap;
  }
}

/* Update 10.7: Background1 de extremo a extremo y menú inicial más compacto/visible. */
body.homeActive {
  background: #020617;
}

body.homeActive::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(2,6,23,.18), rgba(2,6,23,.06) 48%, rgba(2,6,23,.22)),
    url("assets/img/backgrounds/background1_menu.png"),
    radial-gradient(circle at 20% 12%, rgba(56,189,248,.28), transparent 38%),
    linear-gradient(135deg, #020617, #0f172a);
  background-size: cover, cover, cover, cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: .82;
  pointer-events: none;
}

body.homeActive::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.08), transparent 34%),
    linear-gradient(180deg, rgba(2,6,23,.10), rgba(2,6,23,.38));
  pointer-events: none;
}

body.homeActive .app {
  position: relative;
  z-index: 1;
}

body.homeActive .topbar,
body.homeActive #screenHome .card {
  background: rgba(2,6,23,.46);
  backdrop-filter: blur(10px);
}

#screenHome .hero {
  min-height: 300px;
  justify-content: flex-start;
  gap: 16px;
  background:
    linear-gradient(90deg, rgba(2,6,23,.72), rgba(2,6,23,.34) 58%, rgba(2,6,23,.56)),
    radial-gradient(circle at 18% 16%, rgba(56,189,248,.16), transparent 34%),
    radial-gradient(circle at 86% 72%, rgba(248,113,113,.14), transparent 34%),
    url("assets/img/backgrounds/background1_menu.png"),
    linear-gradient(135deg, rgba(15,23,42,.86), rgba(2,6,23,.62));
  background-size: cover, cover, cover, cover, cover;
  background-position: center center;
}

#screenHome .hero::after {
  background:
    linear-gradient(90deg, rgba(2,6,23,.34), rgba(2,6,23,.08) 48%, rgba(2,6,23,.28)),
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.07), transparent 36%);
}

#screenHome .hero .muted {
  max-width: 760px;
  color: #dbeafe;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

#screenHome .hero .menuButtons {
  margin-top: 0;
}

.homeBackgroundBadge {
  margin: 8px 0 4px;
  background: rgba(2,6,23,.38);
}

/* Update 10.7: en estadísticas finales los botones quedan abajo, no pegados arriba por sticky. */
.modalActions {
  position: static;
  bottom: auto;
  z-index: auto;
  margin: 12px 0 0;
  padding: 12px 0 0;
  background: transparent;
  backdrop-filter: none;
}

/* Update 10.8: menú inicial más bajo pero sin obligar a scrollear, y fondo menos apagado. */
body.homeActive::before {
  opacity: .96;
  filter: saturate(1.18) brightness(1.10);
  background:
    linear-gradient(90deg, rgba(2,6,23,.08), rgba(2,6,23,.02) 48%, rgba(2,6,23,.10)),
    url("assets/img/backgrounds/background1_menu.png"),
    radial-gradient(circle at 20% 12%, rgba(56,189,248,.20), transparent 38%),
    linear-gradient(135deg, #020617, #0f172a);
  background-size: cover, cover, cover, cover;
  background-position: center center;
}

body.homeActive::after {
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.05), transparent 34%),
    linear-gradient(180deg, rgba(2,6,23,.04), rgba(2,6,23,.22));
}

#screenHome .hero {
  min-height: min(430px, calc(100dvh - 150px));
  justify-content: flex-start;
  gap: clamp(18px, 3.2dvh, 34px);
  padding-top: clamp(22px, 4dvh, 44px);
  background:
    linear-gradient(90deg, rgba(2,6,23,.54), rgba(2,6,23,.20) 58%, rgba(2,6,23,.34)),
    radial-gradient(circle at 18% 16%, rgba(56,189,248,.10), transparent 34%),
    radial-gradient(circle at 86% 72%, rgba(248,113,113,.09), transparent 34%),
    url("assets/img/backgrounds/background1_menu.png"),
    linear-gradient(135deg, rgba(15,23,42,.72), rgba(2,6,23,.44));
}

#screenHome .hero::after {
  background:
    linear-gradient(90deg, rgba(2,6,23,.20), rgba(2,6,23,.04) 48%, rgba(2,6,23,.18)),
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.06), transparent 36%);
}

#screenHome .hero .menuButtons {
  margin-top: clamp(4px, 1.6dvh, 18px);
  max-width: 720px;
}

.homeBackgroundBadge {
  margin: 10px 0 0;
}

@media (max-height: 760px) {
  #screenHome .hero {
    min-height: auto;
    padding-top: 18px;
    gap: 14px;
  }
  #screenHome .hero .menuButtons {
    margin-top: 2px;
  }
}

/* Update 10.8: los botones de resultados solo viven abajo del modal global, no arriba del resumen. */
.resultQuickActions { display: none !important; }

/* Update 11: estilo visual modular. El viejo sigue disponible con .visualStyleClassic. */
.visualStyleCrafted .card {
  border-color: rgba(226, 232, 240, .22);
  box-shadow: 0 18px 46px rgba(2, 6, 23, .38), inset 0 1px 0 rgba(255,255,255,.05);
}

.visualStyleCrafted button,
.visualStyleCrafted .fileButton {
  letter-spacing: .01em;
  box-shadow: 0 10px 22px rgba(2, 6, 23, .26), inset 0 1px 0 rgba(255,255,255,.08);
}

.visualStyleCrafted .choice {
  border-color: rgba(148, 163, 184, .26);
  background: linear-gradient(180deg, rgba(15,23,42,.78), rgba(15,23,42,.52));
}

.visualStyleCrafted .choice.selected {
  outline: 2px solid rgba(56,189,248,.75);
  box-shadow: 0 0 0 5px rgba(56,189,248,.11), 0 14px 30px rgba(2,6,23,.34);
}

.visualStyleClassic .card,
.visualStyleClassic .choice,
.visualStyleClassic button {
  filter: none;
}


/* Update 11.1: selección de color por personaje y look de arena retro más trabajado. */
.paletteSelector {
  margin-top: 10px;
  padding: 8px 9px;
  border-radius: 14px;
  background: rgba(2,6,23,.32);
  border: 1px solid rgba(226,232,240,.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.paletteSelector span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.paletteDots { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.paletteDot {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 9px;
  border: 2px solid rgba(255,255,255,.28);
  background: linear-gradient(135deg, var(--dot), var(--dot2));
  box-shadow: inset 0 -8px 14px rgba(0,0,0,.22), 0 5px 10px rgba(0,0,0,.20);
}
.paletteDot:hover { transform: translateY(-1px); }
.paletteDot.selected {
  outline: 2px solid #f8fafc;
  box-shadow: 0 0 0 4px rgba(56,189,248,.18), inset 0 -8px 14px rgba(0,0,0,.24);
}
.paletteDot.taken,
.paletteDot:disabled {
  opacity: .30;
  filter: grayscale(.85);
  cursor: not-allowed;
}

.visualStyleCrafted {
  --panel-ink: rgba(2,6,23,.84);
  --panel-line: rgba(226,232,240,.26);
}
.visualStyleCrafted .card {
  background:
    linear-gradient(180deg, rgba(15,23,42,.88), rgba(15,23,42,.60)),
    radial-gradient(circle at 18% 0%, rgba(56,189,248,.10), transparent 34%);
  border: 2px solid var(--panel-line);
  box-shadow: 0 16px 0 rgba(2,6,23,.20), 0 24px 46px rgba(2,6,23,.42), inset 0 2px 0 rgba(255,255,255,.08);
}
.visualStyleCrafted button,
.visualStyleCrafted .fileButton {
  border-width: 2px;
  text-shadow: 0 2px 0 rgba(0,0,0,.22);
}
.visualStyleCrafted .choice {
  border-width: 2px;
  background:
    linear-gradient(180deg, rgba(30,41,59,.88), rgba(15,23,42,.62)),
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.06), transparent 32%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 9px 0 rgba(2,6,23,.16);
}
.visualStyleCrafted .choice.selected {
  background:
    linear-gradient(180deg, rgba(30,64,175,.38), rgba(15,23,42,.78)),
    radial-gradient(circle at 22% 0%, rgba(125,211,252,.15), transparent 36%);
}
.visualStyleCrafted .swatch {
  border-radius: 10px;
  border-width: 3px;
}

/* Update 11.2: pausa con audio rápido y modo foto */
.pauseMenuCard {
  width: min(720px, calc(100% - 28px));
}

.pauseSubPanel {
  margin-top: 12px;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 16px;
  padding: 12px;
  background: rgba(2,6,23,.42);
}

.pauseSubPanel.hidden { display: none; }

.pauseSubPanel h3 {
  margin: 0 0 8px;
}

/* Update 11.3: pausa menos invasiva + modo foto usable */
.battleTutorialTips {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 14px;
  background: rgba(15,23,42,.66);
  color: #cbd5e1;
  font-size: 12px;
}

.battleTutorialTips.hidden { display: none; }

.pauseMenuOverlay {
  place-items: start end;
  padding: 18px;
  background: linear-gradient(90deg, rgba(2,6,23,.12), rgba(2,6,23,.38));
}

.pauseMenuCard {
  width: min(520px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  overflow-y: auto;
  border-radius: 18px;
  padding: 14px;
}

.pauseMenuCard h2 { margin: 0 0 4px; }
.pauseMenuCard > .muted { margin: 0 0 10px; }
.pauseMenuCard > .row { gap: 7px; }
.pauseMenuCard > .row button { padding: 8px 10px; border-radius: 11px; }

.pauseMenuOverlay.photoModeActive {
  place-items: end end;
  background: transparent;
  padding: 14px;
}

.pauseMenuOverlay.photoModeActive .pauseMenuCard {
  width: min(330px, calc(100% - 22px));
  background: rgba(15,23,42,.68);
  border-color: rgba(226,232,240,.22);
  box-shadow: 0 14px 42px rgba(0,0,0,.30);
  backdrop-filter: blur(5px);
}

.pauseMenuOverlay.photoModeActive #pauseAudioPanel { display: none; }

.photoPanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.photoPanelHeader h3 { margin: 0; }

.photoControlsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-width: 210px;
  margin: 0 auto 8px;
}

.photoControlsGrid button { min-width: 0; }
.photoActionRow { justify-content: center; gap: 6px; }
.photoModePanel .tiny { margin: 6px 0 0; text-align: center; }


/* Update 11.4: batalla más grande + pausa/foto abajo sin tapar el centro */
body.battleActive .app {
  width: min(100vw - 10px, 1540px);
  padding: 8px 0 10px;
}

body.battleActive .topbar {
  margin-bottom: 6px;
}

body.battleActive .brand p {
  display: none;
}

body.battleActive .logo {
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

body.battleActive .battleShell {
  gap: 6px;
  min-height: calc(100dvh - 76px);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

body.battleActive .hud {
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  gap: 5px;
}

body.battleActive .hudPlayer {
  min-height: 58px;
  padding: 7px;
  border-radius: 12px;
}

body.battleActive .percent {
  font-size: 22px;
}

body.battleActive #gameCanvas {
  width: 100%;
  height: min(calc(100dvh - 176px), calc((100vw - 10px) * 9 / 16));
  max-height: none;
  border-radius: 16px;
}

body.battleActive .battleShell > .card:not(.onlineBattlePanel) {
  padding: 8px 10px;
  border-radius: 14px;
}

.pauseMenuOverlay {
  place-items: end center;
  padding: 0 12px 18px;
  background: linear-gradient(180deg, transparent 0%, rgba(2,6,23,.36) 100%);
}

.pauseMenuCard {
  width: min(820px, calc(100% - 20px));
  max-height: min(42dvh, 360px);
  overflow-y: auto;
  padding: 12px;
  border-radius: 18px;
}

.pauseMenuCard > .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.pauseSubPanel {
  margin-top: 8px;
  padding: 9px;
}

.pauseMenuOverlay.photoModeActive {
  place-items: end center;
  padding: 0 12px 12px;
}

.pauseMenuOverlay.photoModeActive .pauseMenuCard {
  width: min(760px, calc(100% - 18px));
  max-height: 30dvh;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  align-items: start;
  background: rgba(15,23,42,.56);
}

.pauseMenuOverlay.photoModeActive .pauseMenuCard > h2,
.pauseMenuOverlay.photoModeActive .pauseMenuCard > p {
  display: none;
}

.pauseMenuOverlay.photoModeActive .pauseMenuCard > .row {
  grid-column: 1 / -1;
  justify-content: center;
}

.pauseMenuOverlay.photoModeActive #pausePhotoPanel {
  grid-column: 1 / -1;
  margin-top: 0;
}

.photoModePanel .tiny {
  display: none;
}

.photoControlsGrid {
  max-width: 260px;
}

@media (max-width: 760px) {
  body.battleActive #gameCanvas {
    height: min(calc(100dvh - 205px), calc((100vw - 10px) * 9 / 16));
  }
  .pauseMenuCard {
    max-height: 50dvh;
  }
}

/* Update 11.5: batalla casi a pantalla completa + HUD integrado tipo Smash */
body.battleActive {
  overflow: hidden;
}

body.battleActive .app {
  width: 100vw;
  max-width: none;
  min-height: 100dvh;
  padding: 0;
}

body.battleActive .topbar {
  display: none;
}

body.battleActive #screenBattle {
  min-height: 100dvh;
}

body.battleActive .battleShell {
  width: 100vw;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  gap: 0;
  grid-template-rows: minmax(0, 1fr);
}

.battleViewport {
  position: relative;
  width: min(100vw, calc(100dvh * 16 / 9));
  height: min(100dvh, calc(100vw * 9 / 16));
  max-width: 100vw;
  max-height: 100dvh;
  overflow: hidden;
  background: #020617;
  border-radius: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,.08) inset;
}

body.battleActive #gameCanvas {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #020617;
}

.battleQuickBar {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 8;
  display: flex;
  gap: 6px;
  opacity: .82;
}

.battleQuickBar button {
  padding: 7px 10px;
  border-radius: 10px;
}

.battleMatchPill {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  max-width: min(52vw, 560px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .72;
}

.battleClock {
  position: absolute;
  top: 10px;
  right: 16px;
  z-index: 9;
  min-width: 96px;
  padding: 8px 13px;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15,23,42,.88), rgba(2,6,23,.68));
  color: #f8fafc;
  text-align: center;
  font: 950 30px/1 system-ui, sans-serif;
  letter-spacing: -.04em;
  text-shadow: 0 3px 0 #020617, 0 0 14px rgba(255,255,255,.30);
}

.battleClock {
  display: inline-grid;
  grid-template-columns: 34px auto;
  align-items: center;
  gap: 9px;
  min-width: 130px;
  overflow: hidden;
}

.battleClock::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: var(--time-left, 100%);
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, #22c55e, #facc15, #ef4444);
  box-shadow: 0 0 14px rgba(250,204,21,.42);
  transition: width .22s linear;
}

.battleClockDial {
  width: 31px;
  height: 31px;
  position: relative;
  border: 2px solid rgba(248,250,252,.76);
  border-radius: 50%;
  background:
    conic-gradient(from -90deg, rgba(250,204,21,.95) var(--time-angle, 0deg), rgba(30,41,59,.88) 0),
    radial-gradient(circle, rgba(15,23,42,.95) 0 52%, transparent 53%);
  box-shadow: inset 0 0 0 4px rgba(2,6,23,.82), 0 0 14px rgba(148,163,184,.25);
}

.battleClockDial i,
.battleClockDial b {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 10px;
  border-radius: 99px;
  background: #f8fafc;
  transform-origin: 50% 88%;
  transform: translate(-50%, -88%) rotate(var(--time-angle, 0deg));
  box-shadow: 0 0 6px rgba(255,255,255,.65);
}

.battleClockDial b {
  height: 7px;
  opacity: .75;
  transform: translate(-50%, -88%) rotate(calc(var(--time-angle, 0deg) * .55));
}

.battleClockText {
  display: inline-block;
  min-width: 72px;
  text-align: left;
}

.battleClock.warning {
  border-color: rgba(250,204,21,.9);
  color: #fef3c7;
}

.battleClock.urgent {
  border-color: rgba(239,68,68,.95);
  color: #fee2e2;
  animation: battleClockUrgentPulse .48s ease-in-out infinite alternate;
}

.battleClock.urgent::after {
  background: linear-gradient(90deg, #f97316, #ef4444);
  box-shadow: 0 0 18px rgba(239,68,68,.70);
}

@keyframes battleClockUrgentPulse {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(1.035); filter: brightness(1.22); }
}

.smashHud {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 7px;
  pointer-events: none;
}

.smashHudPlayer {
  min-height: 74px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,.20);
  background: linear-gradient(180deg, rgba(15,23,42,.84), rgba(2,6,23,.62));
  box-shadow: 0 8px 0 rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(3px);
}

.smashPortrait {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 3px solid var(--fighter, #38bdf8);
  background:
    radial-gradient(circle at 38% 28%, rgba(255,255,255,.52), transparent 24%),
    linear-gradient(135deg, var(--fighter, #38bdf8), var(--fighter2, #0f172a));
  color: #fff;
  font: 950 26px/1 system-ui, sans-serif;
  text-shadow: 0 3px 0 rgba(0,0,0,.55);
}

.smashHudData {
  min-width: 0;
}

.smashHudData strong,
.smashHudData small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smashHudData strong {
  font-size: 13px;
  text-shadow: 0 2px 0 #020617;
}

.smashHudData small {
  margin-top: 1px;
  color: #cbd5e1;
  font-size: 10px;
}

.smashLives {
  margin-top: 4px;
  display: flex;
  gap: 2px;
  align-items: center;
  min-height: 16px;
}

.heart {
  color: #fb7185;
  font-size: 16px;
  line-height: 1;
  text-shadow: 0 2px 0 #450a0a;
}

.heartMore,
.heartCount,
.smashScore,
.smashDeaths {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(15,23,42,.72);
  color: #e5e7eb;
  font-size: 11px;
  font-weight: 900;
}

.smashDeaths { color: #fca5a5; }

.smashDamage {
  align-self: end;
  min-width: 58px;
  text-align: right;
  font: 950 34px/.86 system-ui, sans-serif;
  letter-spacing: -.07em;
  text-shadow: 0 4px 0 #020617, 0 0 12px rgba(255,255,255,.20);
}

.smashDamage span {
  font-size: 15px;
  letter-spacing: -.02em;
}

body.battleActive .battleShell > .card:not(.onlineBattlePanel),
body.battleActive #battleTutorialTips:not(.hidden) {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  max-width: min(760px, calc(100vw - 18px));
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(15,23,42,.48);
  backdrop-filter: blur(4px);
  opacity: .78;
}

body.battleActive .battleShell > .card:not(.onlineBattlePanel) {
  display: none;
}

body.battleActive .pauseMenuOverlay {
  position: fixed;
  inset: auto 8px 8px auto;
  width: min(820px, calc(100vw - 16px));
  height: auto;
  place-items: end end;
  padding: 0;
  background: transparent;
}

body.battleActive .pauseMenuCard {
  width: 100%;
  max-height: min(38dvh, 340px);
  background: rgba(15,23,42,.76);
  backdrop-filter: blur(6px);
}

@media (max-width: 760px) {
  .battleClock {
    min-width: 72px;
    font-size: 22px;
    padding: 7px 10px;
  }
  .smashHud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    bottom: 6px;
  }
  .smashHudPlayer {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    min-height: 60px;
    padding: 6px;
  }
  .smashPortrait {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }
  .smashDamage {
    min-width: 44px;
    font-size: 26px;
  }
}

/* Update 12: Baúl / Utilería + editores locales */
.utilityToolCard {
  min-height: 190px;
  justify-content: space-between;
}

.utilityEditorGrid {
  grid-template-columns: minmax(310px, .9fr) minmax(360px, 1.1fr);
}

.editorPanel textarea {
  min-height: 86px;
  resize: vertical;
}

.platformRows {
  display: grid;
  gap: 10px;
}

.platformEditorRow {
  display: grid;
  grid-template-columns: 110px repeat(4, minmax(70px, 1fr)) minmax(140px, 1fr) minmax(110px, 1fr) 74px;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 16px;
  background: rgba(15,23,42,.54);
}

.platformEditorRow label {
  display: grid;
  gap: 4px;
  font-size: .72rem;
  color: rgba(226,232,240,.72);
}

.platformEditorRow input,
.platformEditorRow select {
  width: 100%;
  min-width: 0;
}

.platformRowTitle {
  font-weight: 900;
  color: #f8fafc;
}

.platformRowTitle span {
  display: block;
  margin-top: 3px;
  font-size: .68rem;
  color: rgba(226,232,240,.65);
  font-weight: 700;
}

.miniButton {
  padding: 8px 10px;
  min-height: 34px;
  font-size: .78rem;
}

.weightBox {
  padding: 12px;
  border-radius: 18px;
  background: rgba(2,6,23,.42);
  border: 1px solid rgba(148,163,184,.2);
}

.weightMeter {
  width: 100%;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15,23,42,.85);
  border: 1px solid rgba(148,163,184,.2);
}

.weightMeter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #facc15, #ef4444);
  transition: width .18s ease;
}

.eventPickGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.eventPick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(15,23,42,.48);
  border: 1px solid rgba(148,163,184,.18);
  font-size: .82rem;
}

.mapEditorPreview {
  position: relative;
  width: 100%;
  min-height: 280px;
  overflow: hidden;
  border-radius: 22px;
  border: 2px solid rgba(226,232,240,.18);
  box-shadow: inset 0 0 28px rgba(2,6,23,.55);
}

.previewPlatform {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 10px 22px rgba(2,6,23,.35);
}

.previewPlatform span {
  position: absolute;
  left: 8px;
  top: -20px;
  font-size: .72rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 6px #020617;
}

.previewPlatform.solid {
  background: linear-gradient(180deg, #cbd5e1, #64748b);
}

.previewPlatform.pass {
  background: linear-gradient(180deg, rgba(56,189,248,.22), rgba(14,165,233,.10));
  border-color: rgba(125,211,252,.075);
  box-shadow: inset 0 0 0 1px rgba(125,211,252,.035), 0 7px 15px rgba(2,6,23,.22);
}

.previewPlatform.lava {
  background: repeating-linear-gradient(90deg, #fed7aa, #fed7aa 10px, #f97316 10px, #f97316 20px, #7f1d1d 20px, #7f1d1d 30px);
}

.customSavedItem {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(140px, .75fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  background: rgba(15,23,42,.46);
  border: 1px solid rgba(148,163,184,.18);
}

.customSavedItem span {
  color: rgba(226,232,240,.62);
  font-size: .76rem;
}

.characterEditorPreview {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 270px;
  padding: 18px;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 34%, rgba(255,255,255,.11), rgba(15,23,42,.8));
  border: 1px solid rgba(148,163,184,.18);
  text-align: center;
}

.customCharacterPreviewModel {
  position: relative;
  width: 96px;
  height: 132px;
  border-radius: 42px 42px 28px 28px;
  background: linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow: 0 18px 35px rgba(2,6,23,.45), inset 0 0 0 5px rgba(255,255,255,.18);
}

.customCharacterPreviewModel::before,
.customCharacterPreviewModel::after {
  content: "";
  position: absolute;
  top: 58px;
  width: 28px;
  height: 54px;
  border-radius: 20px;
  background: var(--c2);
  border: 4px solid rgba(255,255,255,.18);
}

.customCharacterPreviewModel::before { left: -22px; transform: rotate(18deg); }
.customCharacterPreviewModel::after { right: -22px; transform: rotate(-18deg); }

.customCharacterPreviewModel span {
  position: absolute;
  left: 22px;
  top: 28px;
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 0 0 5px rgba(2,6,23,.28);
}

@media (max-width: 980px) {
  .utilityEditorGrid {
    grid-template-columns: 1fr;
  }
  .platformEditorRow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .customSavedItem {
    grid-template-columns: 1fr;
  }
}

/* Update 12.1: Baúl menos comprimido + editores interactivos */
#screenUtility > .grid {
  align-items: stretch;
}
#screenUtility .utilityToolCard {
  grid-column: span 4;
  min-height: 132px;
  padding: 22px;
}
#screenUtility .utilityToolCard h3 {
  font-size: 1.25rem;
}
#screenUtility .wide {
  padding: 22px;
}
.utilityEditorGrid {
  grid-template-columns: minmax(360px, .82fr) minmax(460px, 1.18fr);
  align-items: start;
}
#screenMapEditor,
#screenCharacterEditor,
#screenUtility {
  padding-bottom: 34px;
}
.platformEditorRow.selected,
.customSavedItem:hover {
  border-color: rgba(56,189,248,.62);
  box-shadow: 0 0 0 2px rgba(56,189,248,.13), 0 16px 38px rgba(2,6,23,.26);
}
.mapEditorPreview {
  min-height: 420px;
  cursor: crosshair;
  user-select: none;
  touch-action: none;
  background-size: cover;
  background-position: center;
}
.previewPlatform {
  touch-action: none;
  cursor: grab;
  min-width: 14px;
  min-height: 9px;
}
.previewPlatform:active { cursor: grabbing; }
.previewPlatform.selected {
  outline: 3px solid rgba(250,204,21,.9);
  box-shadow: 0 0 0 6px rgba(250,204,21,.16), 0 18px 32px rgba(2,6,23,.42);
}
.previewPlatform.shape-rect { border-radius: 8px; }
.previewPlatform.shape-capsule { border-radius: 999px; }
.previewPlatform.shape-ellipse { border-radius: 50%; }
.previewPlatform.shape-hex {
  border-radius: 10px;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.previewPlatform .resizeHandle {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #facc15;
  border: 3px solid rgba(2,6,23,.85);
  cursor: nwse-resize;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
.customAttackGrid,
.customBodyGrid {
  display: grid;
  gap: 10px;
}
.customAttackRow,
.customBodyRow {
  display: grid;
  grid-template-columns: minmax(90px, .7fr) minmax(120px, 1fr) minmax(120px, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px;
  border-radius: 14px;
  background: rgba(15,23,42,.46);
  border: 1px solid rgba(148,163,184,.18);
}
.customBodyRow {
  grid-template-columns: minmax(90px, .65fr) minmax(130px, 1fr) minmax(88px, .45fr);
}
.customAttackRow strong,
.customBodyRow strong {
  font-size: .82rem;
  color: #f8fafc;
}
.characterEditorPreview {
  min-height: 420px;
}
.customGamePreviewStage {
  position: relative;
  width: min(100%, 420px);
  height: 230px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, #0f172a, #172554 55%, #14532d 56%, #052e16);
  border: 2px solid rgba(226,232,240,.18);
  box-shadow: inset 0 0 26px rgba(2,6,23,.48);
}
.customCharacterGameModel {
  position: absolute;
  left: 50%;
  bottom: 44px;
  width: calc(74px * var(--size));
  height: calc(118px * var(--size));
  transform: translateX(-50%);
  transform-origin: bottom center;
}
.customPreviewShadow {
  position: absolute;
  left: 50%;
  bottom: 36px;
  width: 120px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(0,0,0,.36);
  filter: blur(2px);
}
.customCharacterGameModel b {
  position: absolute;
  display: block;
  box-sizing: border-box;
  border: 3px solid rgba(255,255,255,.22);
  box-shadow: 0 8px 16px rgba(2,6,23,.24);
}
.customCharacterGameModel .bodyTorso {
  left: 20%; top: 34%; width: 60%; height: 40%;
  border-radius: 22px 22px 16px 16px;
  background: linear-gradient(160deg, var(--c1), var(--c2));
  transform: scale(var(--torso-scale));
}
.customCharacterGameModel .bodyHead {
  left: 26%; top: 8%; width: 48%; height: 34%;
  border-radius: 50%;
  background: var(--head-color);
  transform: scale(var(--head-scale));
}
.customCharacterGameModel .bodyArm {
  top: 42%; width: 22%; height: 38%;
  border-radius: 999px;
  background: var(--arms-color);
  transform: scale(var(--arms-scale));
}
.customCharacterGameModel .bodyArm.left { left: 2%; rotate: 20deg; }
.customCharacterGameModel .bodyArm.right { right: 2%; rotate: -20deg; }
.customCharacterGameModel .bodyLeg {
  top: 72%; width: 18%; height: 30%;
  border-radius: 999px;
  background: var(--legs-color);
  transform: scale(var(--legs-scale));
}
.customCharacterGameModel .bodyLeg.left { left: 28%; rotate: 8deg; }
.customCharacterGameModel .bodyLeg.right { right: 28%; rotate: -8deg; }
.customCharacterGameModel .bodyTail {
  left: -20%; top: 58%; width: 44%; height: 14%;
  border-radius: 999px;
  background: var(--tail-color);
  transform-origin: right center;
  transform: rotate(-18deg) scale(var(--tail-scale));
}
.customCharacterGameModel .bodyBack {
  left: -6%; top: 42%; width: 34%; height: 30%;
  border-radius: 12px;
  background: var(--back-color);
  transform: scale(var(--back-scale));
}
.customAttackSummary {
  max-width: 520px;
  line-height: 1.35;
}
@media (max-width: 980px) {
  #screenUtility .utilityToolCard {
    grid-column: 1 / -1;
  }
  .mapEditorPreview,
  .characterEditorPreview {
    min-height: 340px;
  }
  .customAttackRow,
  .customBodyRow {
    grid-template-columns: 1fr;
  }
}

/* Update 12.4: editores más libres y personaje por partes dinámicas */
.mapEditorPreview {
  min-height: clamp(460px, 56dvh, 720px);
  background-size: cover;
}
.previewPlatform.lava {
  background:
    linear-gradient(180deg, rgba(254,215,170,.75), transparent 14%),
    repeating-linear-gradient(0deg, rgba(69,10,10,.95) 0 14px, rgba(127,29,29,.95) 14px 28px, rgba(220,38,38,.84) 28px 42px, rgba(249,115,22,.74) 42px 56px),
    repeating-linear-gradient(90deg, #fed7aa 0 12px, #f97316 12px 24px, #7f1d1d 24px 36px);
  background-size: 100% calc(38px * var(--lava-depth, 1)), 100% 96px, 72px 100%;
  box-shadow: inset 0 0 calc(16px * var(--lava-depth, 1)) rgba(254,215,170,.25), 0 0 24px rgba(249,115,22,.35);
}
.weightMeter span {
  background: linear-gradient(90deg, #22c55e, #facc15 38%, #fb923c 68%, #ef4444 88%, #a855f7);
}
.characterEditorGridV2 {
  grid-template-columns: minmax(380px, 1fr) minmax(380px, 1fr);
  grid-template-areas:
    "datos datos"
    "preview partes"
    "stats ataques"
    "guardados guardados";
  gap: 18px;
  align-items: start;
}
.characterEditorGridV2 .wide {
  grid-column: 1 / -1;
}
.characterDataCard {
  grid-area: datos;
}
.characterDataWall {
  min-height: auto;
}
.characterDataWallFields {
  display: grid;
  grid-template-columns: minmax(220px, .45fr) minmax(300px, 1fr);
  gap: 12px;
  align-items: stretch;
}
.characterDataWallFields textarea {
  min-height: 42px;
  max-height: 78px;
  resize: vertical;
}
.characterEditorActions {
  justify-content: flex-end;
}
.characterPartsCard {
  grid-area: partes;
  min-height: 420px;
}
.characterPreviewCard {
  grid-area: preview;
  min-height: 420px;
}
.characterStatsCard {
  grid-area: stats;
}
.characterAttacksCard {
  grid-area: ataques;
}
.characterSaveCard {
  grid-area: guardados;
}
.bodyPartButtonGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.bodyPartButton {
  min-height: 62px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(30,41,59,.88), rgba(15,23,42,.64));
  border: 1px solid rgba(148,163,184,.28);
}
.bodyPartButton span { font-weight: 900; }
.bodyPartButton small { color: rgba(226,232,240,.62); font-size: .72rem; }
.bodyPartButton.selected {
  outline: 2px solid rgba(250,204,21,.8);
  box-shadow: 0 0 0 5px rgba(250,204,21,.14);
}
.bodyPartButton.ghost {
  opacity: .68;
  border-style: dashed;
}
.selectedBodyEditor {
  margin-top: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(2,6,23,.42);
  border: 1px solid rgba(148,163,184,.22);
}
.selectedBodyEditor.ghost {
  background: rgba(15,23,42,.28);
  border-style: dashed;
}
.selectedBodyTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.selectedBodyTop div {
  display: grid;
  gap: 2px;
}
.selectedBodyTop strong {
  font-size: 1.05rem;
}
.selectedBodyTop span {
  color: rgba(226,232,240,.62);
  font-size: .78rem;
}
.bodyPartPresetRow {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.customCharacterGameModel b {
  cursor: pointer;
  transition: opacity .15s ease, filter .15s ease, box-shadow .15s ease;
}
.customCharacterGameModel .bodyTorso {
  background: linear-gradient(160deg, var(--c1), var(--c2));
  opacity: var(--torso-opacity, 1);
  box-shadow: 0 8px 16px rgba(2,6,23,.24), 0 0 calc(var(--torso-glow, 0) * 22px) rgba(250,204,21,.85);
}
.customCharacterGameModel .bodyHead {
  opacity: var(--head-opacity, 1);
  box-shadow: 0 8px 16px rgba(2,6,23,.24), 0 0 calc(var(--head-glow, 0) * 22px) rgba(250,204,21,.85);
}
.customCharacterGameModel .bodyArm {
  opacity: var(--arms-opacity, 1);
  box-shadow: 0 8px 16px rgba(2,6,23,.24), 0 0 calc(var(--arms-glow, 0) * 22px) rgba(250,204,21,.85);
}
.customCharacterGameModel .bodyLeg {
  opacity: var(--legs-opacity, 1);
  box-shadow: 0 8px 16px rgba(2,6,23,.24), 0 0 calc(var(--legs-glow, 0) * 22px) rgba(250,204,21,.85);
}
.customCharacterGameModel .bodyTail {
  opacity: var(--tail-opacity, 1);
  box-shadow: 0 8px 16px rgba(2,6,23,.24), 0 0 calc(var(--tail-glow, 0) * 22px) rgba(250,204,21,.85);
}
.customCharacterGameModel .bodyBack {
  opacity: var(--back-opacity, 1);
  box-shadow: 0 8px 16px rgba(2,6,23,.24), 0 0 calc(var(--back-glow, 0) * 22px) rgba(250,204,21,.85);
}
.customCharacterGameModel b[style*="opacity: 0.24"],
.selectedBodyEditor.ghost + * {
  filter: grayscale(.25) saturate(.7);
}
@media (max-width: 1080px) {
  .characterEditorGridV2 {
    grid-template-columns: 1fr;
    grid-template-areas:
      "datos"
      "preview"
      "partes"
      "stats"
      "ataques"
      "guardados";
  }
  .characterDataCard,
  .characterPartsCard,
  .characterPreviewCard,
  .characterStatsCard,
  .characterAttacksCard {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .characterPreviewCard {
    position: static;
  }
}

/* Update 12.4: edición precisa, preview fija y colores por parte */
.utilityGuideButton {
  justify-self: flex-start;
}
.eventDynamicOptions.hidden,
.eventEditorBlock.hidden {
  display: none;
}
.eventEnableRow input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: #facc15;
}
.mapEditorPreview .previewPlatform {
  cursor: grab;
  touch-action: none;
}
.mapEditorPreview .previewPlatform:hover {
  outline: 2px solid rgba(250,204,21,.55);
}
.mapEditorPreview .previewPlatform:active {
  cursor: grabbing;
}
.previewPlatform .resizeHandle {
  width: 14px;
  height: 14px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  background: #fde68a;
  border: 2px solid rgba(15,23,42,.9);
  box-shadow: 0 0 0 3px rgba(250,204,21,.20);
}
.applyAllPartsBox {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(15,23,42,.36);
  border: 1px solid rgba(148,163,184,.18);
}
.bodyColorRow {
  align-items: end;
}
.characterPreviewCard {
  position: sticky;
  top: 86px;
  align-self: start;
  z-index: 6;
  max-height: calc(100dvh - 104px);
  overflow: auto;
}
.customCharacterGameModel .bodyTorso {
  background: linear-gradient(160deg, var(--torso-color, var(--c1)), var(--torso-secondary, var(--c2)));
}
.customCharacterGameModel .bodyHead { background: var(--head-color); }
.customCharacterGameModel .bodyArm { background: linear-gradient(180deg, var(--arms-color), var(--arms-secondary, var(--arms-color))); }
.customCharacterGameModel .bodyLeg { background: linear-gradient(180deg, var(--legs-color), var(--legs-secondary, var(--legs-color))); }
.customCharacterGameModel .bodyTail { background: linear-gradient(90deg, var(--tail-color), var(--tail-secondary, var(--tail-color))); }
.customCharacterGameModel .bodyBack { background: linear-gradient(160deg, var(--back-color), var(--back-secondary, var(--back-color))); }
@media (max-width: 1080px) {
  .characterPreviewCard {
    position: sticky;
    top: 8px;
    max-height: none;
  }
  .applyAllPartsBox {
    grid-template-columns: 1fr;
  }
}

/* Update 12.4: Manual tipo libro + editores más claros */
.manualBook {
  --paper: rgba(255,247,218,.92);
  color: #2b2118;
  display: grid;
  gap: 14px;
  padding: 10px;
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(120,53,15,.35), transparent 8%, transparent 92%, rgba(120,53,15,.35)),
    linear-gradient(180deg, #78350f, #451a03);
  border: 2px solid rgba(253,230,138,.72);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.08), 0 22px 60px rgba(0,0,0,.45);
}
.manualBookPage {
  min-height: 310px;
  padding: 26px 28px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.45), transparent 28%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(120,53,15,.08) 27px 28px),
    var(--paper);
  border: 1px solid rgba(120,53,15,.28);
}
.manualBookKicker {
  color: #92400e;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.manualBookPage h2 {
  margin: 4px 0 14px;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  color: #451a03;
  font-family: Georgia, 'Times New Roman', serif;
}
.manualBookPage p {
  color: #3b2b1f;
  line-height: 1.55;
  font-weight: 700;
}
.manualBookFooter {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.manualDots {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.manualDot {
  width: 12px;
  height: 12px;
  min-height: 12px;
  padding: 0;
  border-radius: 999px;
  background: rgba(253,230,138,.45);
  border: 1px solid rgba(253,230,138,.85);
}
.manualDot.active {
  background: #facc15;
  box-shadow: 0 0 0 5px rgba(250,204,21,.18);
}
.previewPlatform .cornerHandle {
  position: absolute;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fde68a;
  border: 2px solid rgba(15,23,42,.95);
  box-shadow: 0 0 0 4px rgba(250,204,21,.16);
  opacity: .42;
  transition: opacity .12s ease, transform .12s ease;
  touch-action: none;
}
.previewPlatform.selected .cornerHandle,
.previewPlatform:hover .cornerHandle {
  opacity: .92;
}
.previewPlatform .cornerHandle.lt { left: -7px; top: -7px; cursor: nwse-resize; }
.previewPlatform .cornerHandle.rt { right: -7px; top: -7px; cursor: nesw-resize; }
.previewPlatform .cornerHandle.lb { left: -7px; bottom: -7px; cursor: nesw-resize; }
.previewPlatform .cornerHandle.rb { right: -7px; bottom: -7px; cursor: nwse-resize; }
.previewPlatform[data-hover-mode='move'] { cursor: grab; }
.previewPlatform[data-hover-mode^='resize'] { outline: 2px solid rgba(250,204,21,.72); }
.previewPlatform[data-hover-mode^='resize'] .cornerHandle { opacity: 1; transform: scale(1.16); }
.previewPlatform .resizeHint { display: none; }
.previewPlatform .resizeHandle { display: none; }
.characterPreviewCard {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.characterPreviewToolbar {
  width: min(100%, 420px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 12px;
}
.customGamePreviewStage {
  perspective: 700px;
}
.customCharacterGameModel {
  transform: translateX(calc(-50% + var(--preview-side, 0px))) rotateY(var(--preview-rotate, 0deg)) scaleX(var(--preview-scale-x, 1));
  transition: transform .08s linear;
  transform-style: preserve-3d;
}
.customCharacterGameModel .bodyBack { opacity: calc(var(--back-opacity, 1) * var(--preview-back-alpha, 1)); }
.customCharacterGameModel .bodyHead { background: linear-gradient(160deg, var(--head-color), var(--head-secondary, var(--head-color))); }
.applyAllPartsBox {
  align-items: center !important;
}
.applyAllPartsButton {
  align-self: center;
  min-height: 46px;
  padding-inline: 18px;
  border-radius: 999px;
}
@media (max-width: 720px) {
  .manualBookFooter {
    grid-template-columns: 1fr;
  }
}

/* Update 12.5: Manual animado como libro + preview por animaciones */
#modal.manualModalActive .modalBox {
  max-width: min(1120px, 94vw);
  background: radial-gradient(circle at 50% 0%, rgba(120,53,15,.42), rgba(15,23,42,.96) 58%);
  border-color: rgba(253,230,138,.55);
  overflow: hidden;
  animation: manualModalSettle .34s ease both;
}
#modal.manualModalActive #modalTitle {
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: .08em;
  color: #fde68a;
}
.manualBookScene {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 18px 8px 4px;
  perspective: 1200px;
  min-height: 520px;
}
.manualClosedCover {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130px;
  height: 170px;
  transform: translate(-50%, -50%) scale(.28) rotate(-10deg);
  transform-origin: left center;
  border-radius: 12px 20px 20px 12px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.30), transparent 16%, transparent),
    linear-gradient(145deg, #7c2d12, #451a03 62%, #1c0701);
  border: 3px solid rgba(253,230,138,.72);
  box-shadow: 0 18px 42px rgba(0,0,0,.42), inset 10px 0 0 rgba(0,0,0,.26);
  display: grid;
  place-items: center;
  color: #fde68a;
  font: 900 1.05rem Georgia, serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  z-index: 3;
  animation: bookCoverFlyOpen 1.05s cubic-bezier(.22,.9,.25,1) forwards;
  pointer-events: none;
}
.manualClosedCover::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(253,230,138,.50);
  border-radius: 8px 16px 16px 8px;
}
.manualBookScene .manualBook {
  opacity: 0;
  transform: rotateX(8deg) scale(.86);
  animation: bookPagesAppear .62s ease .56s forwards;
}
.manualBook.open {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 16px;
  min-height: 430px;
  background:
    linear-gradient(90deg, rgba(69,26,3,.92), rgba(120,53,15,.92) 5%, transparent 12%, transparent 88%, rgba(120,53,15,.92) 95%, rgba(69,26,3,.92)),
    linear-gradient(180deg, #92400e, #451a03);
}
.manualBook.open::before {
  content: "";
  position: absolute;
  left: 50%; top: 22px; bottom: 72px;
  width: 18px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.10), rgba(0,0,0,.38));
  z-index: 2;
  pointer-events: none;
}
.manualBookLeft {
  border-radius: 20px 8px 8px 20px;
  transform-origin: right center;
  box-shadow: inset -18px 0 24px rgba(120,53,15,.14);
}
.manualBookRight {
  border-radius: 8px 20px 20px 8px;
  transform-origin: left center;
  box-shadow: inset 18px 0 24px rgba(120,53,15,.16);
  animation: pageTurnIn .48s ease .76s both;
}
.manualIndexList {
  list-style: none;
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 12px 0 0;
}
.manualIndexList button {
  width: 100%;
  min-height: 34px;
  text-align: left;
  background: rgba(120,53,15,.10);
  color: #451a03;
  border: 1px solid rgba(120,53,15,.18);
  box-shadow: none;
}
.manualIndexList .active button {
  background: rgba(250,204,21,.32);
  border-color: rgba(146,64,14,.45);
}
.manualNextPreview {
  margin-top: 18px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(120,53,15,.10);
  color: #78350f;
  font-weight: 900;
}
@keyframes bookCoverFlyOpen {
  0% { opacity: 0; transform: translate(-50%, 60%) scale(.12) rotate(-18deg); }
  32% { opacity: 1; transform: translate(-50%, -50%) scale(.72) rotate(-8deg); }
  62% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotateY(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.62) rotateY(-78deg); }
}
@keyframes bookPagesAppear {
  to { opacity: 1; transform: rotateX(0deg) scale(1); }
}
@keyframes pageTurnIn {
  0% { transform: rotateY(-28deg); filter: brightness(.92); }
  100% { transform: rotateY(0deg); filter: brightness(1); }
}
@keyframes manualModalSettle {
  from { transform: translateY(18px) scale(.97); }
  to { transform: translateY(0) scale(1); }
}

.characterPreviewToolbar.characterPoseToolbar {
  width: min(100%, 520px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.customCharacterGameModel {
  transform: translateX(-50%);
  transition: transform .16s ease, bottom .16s ease;
}
.customGamePreviewStage.preview-pose-walkRight .customCharacterGameModel {
  animation: previewWalkRight .75s ease-in-out infinite;
}
.customGamePreviewStage.preview-pose-walkLeft .customCharacterGameModel {
  animation: previewWalkLeft .75s ease-in-out infinite;
}
.customGamePreviewStage.preview-pose-jump .customCharacterGameModel {
  animation: previewJump .82s ease-in-out infinite;
}
.customGamePreviewStage.preview-pose-attack .customCharacterGameModel .bodyArm.right {
  animation: previewPunchRight .42s ease-in-out infinite;
}
.customGamePreviewStage.preview-pose-attack .customCharacterGameModel .bodyTorso {
  animation: previewAttackBody .42s ease-in-out infinite;
}
.customGamePreviewStage.preview-pose-walkRight .bodyLeg.left,
.customGamePreviewStage.preview-pose-walkLeft .bodyLeg.right {
  animation: previewLegA .38s ease-in-out infinite alternate;
}
.customGamePreviewStage.preview-pose-walkRight .bodyLeg.right,
.customGamePreviewStage.preview-pose-walkLeft .bodyLeg.left {
  animation: previewLegB .38s ease-in-out infinite alternate;
}
@keyframes previewWalkRight {
  0%,100% { transform: translateX(-58%) translateY(0) scaleX(1); }
  50% { transform: translateX(-42%) translateY(-3px) scaleX(1); }
}
@keyframes previewWalkLeft {
  0%,100% { transform: translateX(-42%) translateY(0) scaleX(-1); }
  50% { transform: translateX(-58%) translateY(-3px) scaleX(-1); }
}
@keyframes previewJump {
  0%,100% { transform: translateX(-50%) translateY(0); }
  46% { transform: translateX(-50%) translateY(-50px); }
}
@keyframes previewPunchRight {
  0%,100% { transform: scale(var(--arms-scale)) rotate(-20deg); }
  50% { transform: scale(var(--arms-scale)) rotate(-78deg) translateX(22px); }
}
@keyframes previewAttackBody {
  0%,100% { transform: scale(var(--torso-scale)); }
  50% { transform: scale(var(--torso-scale)) translateX(8px) rotate(4deg); }
}
@keyframes previewLegA { to { transform: scale(var(--legs-scale)) rotate(20deg) translateY(3px); } }
@keyframes previewLegB { to { transform: scale(var(--legs-scale)) rotate(-20deg) translateY(-2px); } }

.customCharacterGameModel .bodyTorso { background: var(--torso-color, var(--c1)) !important; }
.customCharacterGameModel .bodyHead { background: var(--head-color, var(--c1)) !important; }
.customCharacterGameModel .bodyArm { background: var(--arms-color, var(--c1)) !important; }
.customCharacterGameModel .bodyLeg { background: var(--legs-color, var(--c1)) !important; }
.customCharacterGameModel .bodyTail { background: var(--tail-color, var(--c1)) !important; }
.customCharacterGameModel .bodyBack { background: var(--back-color, var(--c1)) !important; }

.advancedAttackRow {
  grid-template-columns: minmax(128px, .72fr) minmax(120px, 1fr) minmax(160px, 1.15fr);
  position: relative;
}
.attackSlotTitle {
  display: flex;
  align-items: center;
  gap: 8px;
}
.attackInfoButton {
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border-radius: 50%;
  background: rgba(250,204,21,.18);
  border: 1px solid rgba(250,204,21,.55);
  color: #fde68a;
  font-weight: 1000;
}
.attackInfoText {
  display: none;
  grid-column: 1 / -1;
  margin: 0;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(2,6,23,.34);
  color: rgba(226,232,240,.78);
  font-size: .76rem;
  line-height: 1.35;
}
.customAttackRow.expanded .attackInfoText {
  display: block;
}
.bodyColorRow .configField {
  min-width: min(260px, 100%);
}
@media (max-width: 820px) {
  .manualBook.open {
    grid-template-columns: 1fr;
  }
  .manualBookLeft {
    display: none;
  }
  .manualBookRight {
    border-radius: 18px;
  }
  .advancedAttackRow {
    grid-template-columns: 1fr;
  }
}
.manualBook.open { position: relative; }

/* Update 12.6: manual cache/close reverse + map brush/zoom polish */
#modal.manualModalActive.manualClosing .manualClosedCover {
  animation: bookCoverFlyOpenReverse .62s cubic-bezier(.22,.9,.25,1) reverse forwards;
}
#modal.manualModalActive.manualClosing .manualBookScene .manualBook {
  animation: bookPagesDisappear .50s ease forwards;
}
#modal.manualModalActive.manualClosing .modalBox {
  animation: manualModalClose .62s ease forwards;
}
.manualBookScene.pageTurning .manualBookRight {
  animation: pageTurnIn .48s ease .24s both;
}
.manualPageFold {
  position: absolute;
  left: 50%;
  top: 42px;
  width: min(42%, 420px);
  height: 335px;
  z-index: 5;
  padding: 28px;
  border-radius: 10px 22px 22px 10px;
  color: #3b2b1f;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.65), transparent 30%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(120,53,15,.08) 27px 28px),
    rgba(255,247,218,.98);
  border: 1px solid rgba(120,53,15,.24);
  transform-origin: left center;
  box-shadow: 24px 18px 34px rgba(69,26,3,.28), inset 18px 0 22px rgba(120,53,15,.14);
  animation: manualPageFoldTurn .62s cubic-bezier(.25,.82,.28,1) forwards;
  pointer-events: none;
  overflow: hidden;
}
.manualPageFold h3 {
  margin: 0 0 12px;
  color: #451a03;
  font-family: Georgia, 'Times New Roman', serif;
}
.manualPageFold p {
  color: #3b2b1f;
  font-weight: 800;
  line-height: 1.45;
}
@keyframes bookCoverFlyOpenReverse {
  0% { opacity: 0; transform: translate(-50%, 60%) scale(.12) rotate(-18deg); }
  32% { opacity: 1; transform: translate(-50%, -50%) scale(.72) rotate(-8deg); }
  62% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotateY(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.62) rotateY(-78deg); }
}
@keyframes bookPagesDisappear {
  to { opacity: 0; transform: rotateX(8deg) scale(.84); }
}
@keyframes manualModalClose {
  to { opacity: 0; transform: translateY(34px) scale(.92); }
}
@keyframes manualPageFoldTurn {
  0% { opacity: .95; transform: rotateY(0deg) translateX(0); filter: brightness(1); }
  42% { opacity: 1; transform: rotateY(-72deg) translateX(-8px); filter: brightness(.94); }
  100% { opacity: 0; transform: rotateY(-156deg) translateX(-20px); filter: brightness(.80); }
}
.previewPlatform.shape-triangle {
  border-radius: 6px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.previewPlatform.shape-diamond {
  border-radius: 6px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.previewPlatform.shape-custom {
  border-radius: 0;
}
.mapViewTools {
  gap: 6px;
  flex-wrap: wrap;
}
.mapEditorPreview.brushMode {
  cursor: crosshair;
  box-shadow: inset 0 0 0 3px rgba(250,204,21,.45), inset 0 0 32px rgba(250,204,21,.12);
}
.brushPoint {
  position: absolute;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fde68a;
  color: #451a03;
  border: 2px solid rgba(15,23,42,.92);
  font-size: .65rem;
  font-weight: 1000;
  z-index: 10;
  pointer-events: none;
}
.brushPolyline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  pointer-events: none;
}
.brushPolyline polyline {
  fill: none;
  stroke: #fde68a;
  stroke-width: .7;
  stroke-dasharray: 2.4 1.8;
  filter: drop-shadow(0 0 3px rgba(250,204,21,.7));
}
#modal.manualModalActive.manualAlreadyOpen .manualClosedCover { display: none; }
#modal.manualModalActive.manualAlreadyOpen .manualBookScene .manualBook {
  opacity: 1;
  transform: none;
  animation: none;
}
#modal.manualModalActive.manualAlreadyOpen .manualBookRight {
  animation: none;
}
#modal.manualModalActive.manualAlreadyOpen .manualBookScene.pageTurning .manualBookRight {
  animation: pageTurnIn .48s ease .24s both;
}

/* Update 12.7: manual responsive, editor camera/lava y UX de creación */
#modal.manualModalActive .modalBox {
  max-height: min(94dvh, 920px);
  overflow: auto;
}
#modal.manualModalActive #modalText {
  max-height: calc(94dvh - 96px);
  overflow: auto;
  padding-right: 4px;
}
.manualBookScene {
  max-height: calc(94dvh - 130px);
  overflow: auto;
  scrollbar-width: thin;
}
.manualBook.open {
  min-height: min(430px, calc(94dvh - 220px));
}
.manualBookPage {
  max-height: calc(94dvh - 240px);
  overflow: auto;
}
.editorSubPanel {
  padding: 12px;
  border-radius: 18px;
  background: rgba(2,6,23,.34);
  border: 1px solid rgba(148,163,184,.18);
}
.mapEditorPreview.brushMode::after {
  content: "Pincel activo: dibujá y volvé cerca del primer punto para cerrarlo";
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 20;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(69,26,3,.86);
  color: #fde68a;
  border: 1px solid rgba(250,204,21,.42);
  font-size: .74rem;
  font-weight: 900;
  pointer-events: none;
}
.weightMeter {
  overflow: hidden;
}
.weightMeter span {
  max-width: 100%;
}
@media (max-width: 760px), (max-height: 680px) {
  #modal.manualModalActive .modalBox {
    width: min(100vw - 14px, 1120px);
    margin: 7px auto;
    max-height: calc(100dvh - 14px);
  }
  #modal.manualModalActive #modalText,
  .manualBookScene {
    max-height: calc(100dvh - 88px);
  }
  .manualBook.open {
    padding: 10px;
    min-height: 0;
  }
  .manualBookPage {
    max-height: calc(100dvh - 180px);
    padding: 16px;
  }
  .manualBookFooter {
    position: sticky;
    bottom: 0;
    background: rgba(69,26,3,.82);
    border-radius: 16px;
    padding: 8px;
  }
}

/* Update 12.8: ajustes avanzados dinámicos, pincel automático y escaleras custom */
.advancedMapOptions.hidden,
.advancedHint.hidden { display: none; }
.advancedEnableRow input[type="checkbox"] { width: 22px; height: 22px; accent-color: #facc15; }
.previewPlatform.ladder {
  background: repeating-linear-gradient(90deg, rgba(251,191,36,.92) 0 6px, rgba(120,53,15,.96) 6px 13px);
  border: 2px solid rgba(253,230,138,.9);
  box-shadow: inset 0 0 0 2px rgba(69,26,3,.35), 0 0 18px rgba(250,204,21,.18);
}
.previewPlatform.ladder::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: 12%; bottom: 12%;
  background: repeating-linear-gradient(0deg, transparent 0 20px, rgba(69,26,3,.85) 20px 26px);
  pointer-events: none;
}
.previewPlatform.shape-custom select,
.platformEditorRow select:disabled { opacity: .76; cursor: not-allowed; }
.battleMatchPill { display: none !important; }

/* Update 12.9: editor polish, redo, hielo y manual más fluido */
.previewPlatform.ice {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 7px, rgba(147,197,253,.30) 7px 15px),
    linear-gradient(180deg, rgba(219,234,254,.86), rgba(59,130,246,.50));
  border-color: rgba(191,219,254,.92);
  box-shadow: inset 0 0 18px rgba(255,255,255,.30), 0 0 22px rgba(96,165,250,.30);
}
.previewPlatform.hyperIce {
  background:
    repeating-linear-gradient(45deg, rgba(236,254,255,.68) 0 6px, rgba(6,182,212,.32) 6px 13px),
    linear-gradient(180deg, rgba(103,232,249,.92), rgba(14,116,144,.62));
  border-color: rgba(103,232,249,.95);
  box-shadow: inset 0 0 22px rgba(207,250,254,.36), 0 0 24px rgba(34,211,238,.34);
}
.previewPlatform.ladder {
  background:
    linear-gradient(90deg, rgba(146,64,14,.92) 0 12%, transparent 12% 42%, rgba(253,186,116,.88) 42% 58%, transparent 58% 88%, rgba(146,64,14,.92) 88% 100%),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(253,230,138,.90) 18px 24px, transparent 24px 38px),
    rgba(69,26,3,.48);
  border: 2px solid rgba(251,191,36,.78);
  border-radius: 8px;
  box-shadow: inset 0 0 18px rgba(0,0,0,.22), 0 0 18px rgba(251,191,36,.20);
}
.previewPlatform.ladder span {
  background: rgba(69,26,3,.82);
}
#modal.manualModalActive .manualNextPreview { display: none !important; }
.manualBookScene.pageTurningBack .manualPageFold {
  left: auto;
  right: 50%;
  transform-origin: right center;
  border-radius: 22px 10px 10px 22px;
  box-shadow: -24px 18px 34px rgba(69,26,3,.28), inset -18px 0 22px rgba(120,53,15,.14);
  animation-name: manualPageFoldTurnBack;
}
.manualBookScene.pageTurningMany .manualPageFold::after {
  content: "";
  position: absolute;
  inset: 8px 12px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255,247,218,.36), rgba(120,53,15,.08));
  transform: translateX(10px) rotateY(-10deg);
  opacity: .55;
  pointer-events: none;
}
.manualBookScene.pageTurningMany .manualPageFold {
  animation-duration: .82s;
}
.manualBookScene.pageTurningOne .manualPageFold {
  animation-duration: .64s;
}
.manualBookScene.pageTurningBack .manualBookRight {
  animation-name: pageTurnBackIn !important;
}
@keyframes manualPageFoldTurnBack {
  0% { opacity: .95; transform: rotateY(0deg) translateX(0); filter: brightness(1); }
  24% { opacity: 1; transform: rotateY(34deg) translateX(2px); filter: brightness(1.03); }
  56% { opacity: 1; transform: rotateY(104deg) translateX(10px); filter: brightness(.95); }
  100% { opacity: 0; transform: rotateY(164deg) translateX(24px); filter: brightness(.78); }
}
@keyframes pageTurnBackIn {
  0% { transform: rotateY(24deg); filter: brightness(.92); }
  42% { transform: rotateY(10deg); filter: brightness(.98); }
  100% { transform: rotateY(0deg); filter: brightness(1); }
}
@keyframes manualPageFoldTurn {
  0% { opacity: .95; transform: rotateY(0deg) translateX(0); filter: brightness(1); }
  22% { opacity: 1; transform: rotateY(-30deg) translateX(-2px); filter: brightness(1.02); }
  52% { opacity: 1; transform: rotateY(-98deg) translateX(-12px); filter: brightness(.94); }
  100% { opacity: 0; transform: rotateY(-166deg) translateX(-28px); filter: brightness(.78); }
}

/* Update 12.9.1: manual más fluido, scroll propio y fondos avanzados */
#modal.manualModalActive .modalBox,
#modal.manualModalActive #modalText,
.manualBookScene,
.manualBookPage {
  scrollbar-width: thin;
  scrollbar-color: rgba(146,64,14,.82) rgba(253,230,138,.24);
}
#modal.manualModalActive .modalBox::-webkit-scrollbar,
#modal.manualModalActive #modalText::-webkit-scrollbar,
.manualBookScene::-webkit-scrollbar,
.manualBookPage::-webkit-scrollbar { width: 12px; height: 12px; }
#modal.manualModalActive .modalBox::-webkit-scrollbar-track,
#modal.manualModalActive #modalText::-webkit-scrollbar-track,
.manualBookScene::-webkit-scrollbar-track,
.manualBookPage::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(253,230,138,.28), rgba(120,53,15,.18));
  border-radius: 999px;
  border: 1px solid rgba(120,53,15,.20);
}
#modal.manualModalActive .modalBox::-webkit-scrollbar-thumb,
#modal.manualModalActive #modalText::-webkit-scrollbar-thumb,
.manualBookScene::-webkit-scrollbar-thumb,
.manualBookPage::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #92400e, #451a03);
  border-radius: 999px;
  border: 2px solid rgba(253,230,138,.42);
}
.manualBookScene.pageTurning .manualStackFold {
  animation-delay: calc(var(--turn-i, 0) * 72ms);
  z-index: calc(20 - var(--turn-i, 0));
  transform: translateX(calc(var(--turn-i, 0) * 3px));
  opacity: calc(.96 - var(--turn-i, 0) * .07);
}
.manualBookScene.pageTurningMany .manualStackFold {
  animation-duration: .46s;
}
.manualBookScene.pageTurningMany .manualStackFold::before {
  content: "";
  position: absolute;
  inset: 5px 8px;
  border-radius: inherit;
  border-left: 1px solid rgba(120,53,15,.13);
  background: linear-gradient(90deg, rgba(255,247,218,.22), transparent);
  pointer-events: none;
}
.mapEditorPreview[data-bg-effect="lava"] { box-shadow: inset 0 0 0 2px rgba(251,146,60,.38), inset 0 -35px 80px rgba(127,29,29,.35); }
.mapEditorPreview[data-bg-effect="toxic"] { box-shadow: inset 0 0 0 2px rgba(34,197,94,.30), inset 0 0 70px rgba(21,128,61,.22); }
.mapEditorPreview[data-bg-effect="metro"] { box-shadow: inset 0 0 0 2px rgba(59,130,246,.30), inset 0 28px 60px rgba(15,23,42,.40); }
.previewPlatform.ice {
  background: linear-gradient(180deg, rgba(239,246,255,.92), rgba(96,165,250,.54));
  border-color: rgba(191,219,254,.92);
  box-shadow: inset 0 0 18px rgba(255,255,255,.34), 0 0 22px rgba(96,165,250,.30);
}
.previewPlatform.hyperIce {
  background: linear-gradient(180deg, rgba(207,250,254,.94), rgba(14,116,144,.64));
  border-color: rgba(103,232,249,.95);
  box-shadow: inset 0 0 22px rgba(207,250,254,.38), 0 0 24px rgba(34,211,238,.34);
}

/* Update 12.9.2: online/panel polish, manual scroll and platform hitbox clarity */
.onlineBattlePanel .onlinePlayerCard button.danger { display: none !important; }
.onlineBattlePanel .onlineRosterGrid.compact { max-height: 168px; overflow: auto; }
#modal.manualModalActive .modalBox,
#modal.manualModalActive #modalText,
.manualBookScene,
.manualBookPage {
  scrollbar-width: thin;
  scrollbar-color: #a16207 rgba(120, 53, 15, .18);
}
.manualBookScene.pageTurning .manualStackFold {
  animation-duration: .44s !important;
  animation-timing-function: cubic-bezier(.19,.88,.28,1) !important;
}
.manualBookScene.pageTurningMany .manualStackFold {
  animation-duration: .52s !important;
  animation-delay: calc(var(--turn-i, 0) * 42ms) !important;
}
.previewPlatform.shape-triangle,
.previewPlatform.shape-diamond,
.previewPlatform.shape-custom {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.12), 0 0 0 1px rgba(15,23,42,.28), 0 0 20px rgba(56,189,248,.10);
}

/* Update 12.9.3: fondos custom con opacidad y GIF replayable en preview */
.mapEditorPreview .mapEditorBgMedia {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--custom-bg-opacity, .72);
  pointer-events: none;
  z-index: 0;
}
.mapEditorPreview .previewPlatform,
.mapEditorPreview .brushPolyline,
.mapEditorPreview .brushPoint,
.mapEditorPreview .muted {
  z-index: 1;
}
.mapEditorPreview .previewPlatform { position: absolute; }
.onlineBattlePanel .onlineRosterHeader strong,
.onlineBattlePanel > .row > div > strong { font-size: .9rem; }
.previewPlatform { box-sizing: border-box; }

/* V12.9.4: durante la pelea online no se muestran paneles de sala encima/debajo del canvas. */
body.battleActive #onlineBattlePanel,
body.battleActive .onlineBattlePanel {
  display: none !important;
}

/* Update 12.9.4.1: editor de mapas más compacto y sin hueco entre preview y herramientas */
.mapEditorWorkspace {
  align-self: start;
  gap: 12px;
}
.mapEditorWorkspace .mapEditorPreview {
  min-height: clamp(360px, 48dvh, 610px);
}
.mapCreateToolbar {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(56,189,248,.28);
  background: linear-gradient(180deg, rgba(14,165,233,.14), rgba(15,23,42,.48));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.mapCreateToolbar h3 {
  margin: 0;
}
.mapCreateButtons {
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.mapCreateButtons button {
  min-height: 36px;
  padding: 8px 12px;
}
.mapElementEditorBlock {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.28);
}
.mapElementEditorBlock .platformRows {
  max-height: min(42dvh, 520px);
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(56,189,248,.8) rgba(15,23,42,.75);
}
.mapElementEditorBlock .platformRows::-webkit-scrollbar {
  width: 8px;
}
.mapElementEditorBlock .platformRows::-webkit-scrollbar-track {
  background: rgba(15,23,42,.75);
  border-radius: 999px;
}
.mapElementEditorBlock .platformRows::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #38bdf8, #818cf8);
  border-radius: 999px;
}
@media (max-width: 980px) {
  .mapCreateToolbar,
  .mapElementEditorBlock {
    padding: 10px;
  }
  .mapEditorWorkspace .mapEditorPreview {
    min-height: 330px;
  }
  .mapElementEditorBlock .platformRows {
    max-height: none;
    overflow: visible;
  }
}


/* Update 13.4: manual de usuario con secciones internas */
.manualSectionNav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(120,53,15,.10);
  border: 1px solid rgba(120,53,15,.20);
}
.manualSectionNav a {
  color: #451a03;
  font-weight: 900;
  text-decoration: none;
  background: rgba(253,230,138,.72);
  border: 1px solid rgba(120,53,15,.22);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .78rem;
}
.manualCharacterSection {
  margin: 14px 0 0;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.32);
  border: 1px solid rgba(120,53,15,.18);
}
.manualCharacterSection h3 {
  margin: 0 0 8px;
  color: #451a03;
  font-family: Georgia, 'Times New Roman', serif;
}

/* Update 13.99 candidate: flujo de selección vivo + materiales */
.qualitySelectionRoot { width: 100%; }
.qualityFlowShell { display: grid; gap: 16px; }
.qualityFlowHeader { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; }
.qualityStepTabs { display: flex; gap: 8px; flex-wrap: wrap; }
.qualityMapStep { display: grid; grid-template-columns: minmax(320px, 1.1fr) minmax(360px, 1.35fr); gap: 16px; align-items: start; }
.qualityMapHero canvas, .qualityConfirmHero canvas { width: 100%; border-radius: 20px; background: #0f172a; border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 0 0 2px rgba(255,255,255,.04); }
.qualityEventBadge { display: inline-flex; padding: 8px 12px; border-radius: 999px; font-weight: 900; background: rgba(250,204,21,.16); border: 1px solid rgba(250,204,21,.32); color: #fde68a; }
.qualityMapGridCard { min-height: 420px; }
.qualityMapGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 520px; overflow: auto; padding-right: 4px; }
.qualityMapCard, .qualityCharacterCard { position: relative; display: grid; gap: 6px; text-align: left; min-height: 126px; padding: 10px; border-radius: 18px; border: 1px solid rgba(148,163,184,.24); background: linear-gradient(180deg, rgba(30,41,59,.88), rgba(15,23,42,.74)); color: #e5e7eb; cursor: pointer; }
.qualityMapCard canvas { width: 100%; border-radius: 12px; background: #020617; }
.qualityMapCard strong, .qualityCharacterCard strong { font-size: .92rem; }
.qualityMapCard span, .qualityCharacterCard span { color: rgba(226,232,240,.68); font-size: .72rem; }
.qualityMapCard.selected, .qualityCharacterCard.selected, .qualityPlayerPanel:hover { outline: 2px solid rgba(250,204,21,.82); box-shadow: 0 0 0 5px rgba(250,204,21,.11); }
.qualityMapCard.locked, .qualityCharacterCard.locked { filter: grayscale(.78); opacity: .58; cursor: not-allowed; }
.qualityMapCard em, .qualityCharacterCard em { font-size: .7rem; color: #fecaca; font-style: normal; }
.qualityConfigPanel { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.qualityConfigTabs { display: flex; gap: 8px; flex-wrap: wrap; }
.qualityCharacterStep { display: grid; gap: 16px; }
.qualityPlayerPanels { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.qualityPlayerPanel { min-height: 330px; }
.qualityBigCharacterCanvas { width: 100%; min-height: 180px; border-radius: 18px; border: 1px solid rgba(148,163,184,.22); background: #0f172a; }
.qualityCharacterGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; max-height: 520px; overflow: auto; }
.qualityCharacterCard canvas { width: 100%; min-height: 92px; border-radius: 14px; background: #020617; }
.qualityStepFooter { display:flex; justify-content:space-between; gap:12px; }
.qualityConfirmStep { display: grid; grid-template-columns: minmax(320px, 1.1fr) minmax(300px,.9fr); gap: 16px; }
.qualityConfirmPlayer { display:flex; justify-content:space-between; gap:12px; padding:10px; border-radius:12px; background: rgba(15,23,42,.56); margin-bottom:8px; }
.platformSpecialMini { display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 6px; grid-column: 1 / -1; padding: 8px; border-radius: 12px; background: rgba(15,23,42,.38); border: 1px dashed rgba(148,163,184,.22); }
.platformSpecialMini label { font-size: .68rem; color: rgba(226,232,240,.72); }
.platformSpecialMini input { width: 100%; }
.mapEditorPreview .previewPlatform.material-grass { background: linear-gradient(180deg,#22c55e,#14532d); }
.mapEditorPreview .previewPlatform.material-dirt { background: linear-gradient(180deg,#92400e,#451a03); }
.mapEditorPreview .previewPlatform.material-marble { background: linear-gradient(180deg,#f8fafc,#94a3b8); }
.mapEditorPreview .previewPlatform.material-steel { background: linear-gradient(180deg,#64748b,#1e293b); }
.mapEditorPreview .previewPlatform.material-sand { background: linear-gradient(180deg,#facc15,#b45309); }
.mapEditorPreview .previewPlatform.material-void { background: linear-gradient(180deg,#020617,#312e81); }
.mapEditorPreview .previewPlatform.material-wood { background: linear-gradient(180deg,#a16207,#422006); }
.mapEditorPreview .previewPlatform.material-construction { background: repeating-linear-gradient(45deg,#f59e0b 0 12px,#111827 12px 22px); }
.mapEditorPreview .previewPlatform.material-ice { background: linear-gradient(180deg,#bae6fd,#0891b2); }
.mapEditorPreview .previewPlatform.material-lava { background: linear-gradient(180deg,#fb923c,#7f1d1d); }
.mapEditorPreview .previewPlatform.special-temporary::after { content:'⌛'; }
.mapEditorPreview .previewPlatform.special-bombTile::after { content:'💣'; }
.mapEditorPreview .previewPlatform.special-wind::after { content:'➤'; }
.mapEditorPreview .previewPlatform.special-bumper::after { content:'◆'; }
.mapEditorPreview .previewPlatform.special-portal::after { content:'◎'; }
.mapEditorPreview .previewPlatform[class*='special-']::after { position:absolute; inset:0; display:grid; place-items:center; font-weight:900; text-shadow:0 2px 6px #000; }
@media (max-width: 980px) { .qualityMapStep, .qualityConfirmStep, .qualityFlowHeader { grid-template-columns: 1fr; } .qualityConfigPanel { grid-template-columns: 1fr; } }

/* Update 13.991: quality cleanup after playtest notes */
.compactQualityHeader { grid-template-columns: 1fr auto !important; }
.compactQualityHeader .muted { margin: 4px 0 0; }
.qualityMapCard.iconOnly { min-height: 96px; padding: 6px; place-items: center; text-align: center; }
.qualityMapCard.iconOnly canvas { height: 86px; object-fit: cover; display:block; }
.qualityMapCard.iconOnly strong,
.qualityMapCard.iconOnly span { display: none; }
.qualityMapCard .lockBadge,
.qualityCharacterCard .lockBadge { position:absolute; right:8px; top:8px; background:rgba(15,23,42,.84); border-radius:999px; padding:3px 6px; font-size:.9rem; }
.qualityCharacterCard.iconOnly span { display:none; }
.qualityCharacterCard { text-align:center; align-content:start; }
.qualityCharacterCard strong { min-height: 1.1em; }
.qualityPlayerPanel.selected { outline: 3px solid rgba(250,204,21,.95); box-shadow: 0 0 0 7px rgba(250,204,21,.15), 0 18px 50px rgba(250,204,21,.10); background: linear-gradient(180deg, rgba(30,41,59,.98), rgba(15,23,42,.82)); }
.qualityPlayerPanel.selected::before { content:'Jugador activo'; position:absolute; right:14px; top:-10px; background:#facc15; color:#111827; border-radius:999px; padding:3px 10px; font-size:.72rem; font-weight:900; }
.qualityPlayerPanel { position:relative; }
.qualityBigCharacterCanvas { object-position:center bottom; }
.qualityStepFooter { justify-content:flex-end; }
.emojiCreateButtons { gap: 10px; }
.emojiCreateButtons button { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:6px; min-width: 112px; }
.emojiCreateButtons button b { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:rgba(255,255,255,.12); font-size:1.05rem; }
.mapElementEditorBlock { border: 1px solid rgba(250,204,21,.16); background: linear-gradient(180deg, rgba(15,23,42,.72), rgba(15,23,42,.48)); }
.platformEditorRow { align-items:start; }
.platformSpecialMini.dynamic { grid-template-columns: 1fr; }
.platformSpecialMini.compact { padding: 6px 10px; }
.specialDefaultLine { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.specialAdvancedToggle { margin-left:auto; }
.specialAdvancedGrid { display:grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 7px; }
.attackSlotTitle { align-items:center; }
.attackSlotActions { margin-left:auto; display:flex; gap:6px; }
.attackChoiceButtons { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.attackChoiceButton { padding:5px 8px; border-radius:999px; font-size:.75rem; border:1px solid rgba(148,163,184,.25); background:rgba(15,23,42,.62); color:#e5e7eb; }
.attackChoiceButton.selected { background:#facc15; color:#111827; border-color:#fde68a; font-weight:900; }
.manualIndexList { max-height: 58vh; overflow:auto; scroll-behavior:smooth; }

/* Update 13.991.x — recovery real de UX/editor */
.cleanIconGrid .qualityMapCard { min-height: 104px; }
.mapCardSection { display: grid; gap: 8px; margin-top: 8px; }
.mapCardSection h4 { margin: 8px 0 0; color: #e5e7eb; font-size: .95rem; letter-spacing: .02em; }
.customMapSection.empty { border-top: 1px solid rgba(148,163,184,.14); padding-top: 8px; }
.qualityMapHero h2 { margin-bottom: 8px; }
.qualityConfigPanel { justify-items: end; }
.qualityConfigPanel .qualityConfigTabs { justify-self: start; }
.mapElementEditorDynamic { gap: 12px; }
.mapElementCardGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
.mapElementCard { min-height: 62px; border-radius: 16px; display: grid; grid-template-columns: 1fr 1fr; place-items: center; padding: 8px; background: rgba(15,23,42,.72); border: 1px solid rgba(148,163,184,.24); color: #e5e7eb; }
.mapElementCard b { font-size: 1.25rem; }
.mapElementCard span { font-size: 1.05rem; }
.mapElementCard small { grid-column: 1 / -1; color: rgba(226,232,240,.62); font-weight: 800; }
.mapElementCard.selected { outline: 2px solid rgba(250,204,21,.92); background: linear-gradient(180deg, rgba(63,63,70,.85), rgba(15,23,42,.72)); box-shadow: 0 0 0 5px rgba(250,204,21,.10); }
.selectedMapElementEditor .platformEditorRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: 8px; }
.selectedMapElementEditor .platformRowTitle { grid-column: 1 / -1; }
.mapEditorPreview .previewPlatform.material-slow { background: linear-gradient(180deg,#67e8f9,#0e7490); }
.previewAttackChoiceButtons { display:flex; gap:6px; flex-wrap:wrap; padding-top:6px; border-top:1px solid rgba(148,163,184,.16); width:100%; }
.characterPreviewToolbar { align-items:center; }

/* Update 13.991.x: selección y editores menos saturados */
.mapSourceTabs{display:flex;gap:10px;margin:0 0 12px;position:sticky;top:0;z-index:2;background:linear-gradient(180deg,rgba(15,23,42,.95),rgba(15,23,42,.72));padding:4px 0 10px}
.singleMapSource .qualityMapGrid.cleanIconGrid{grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:12px}
.qualityMapGridCard .mapCardSection{min-height:0}
.qualityCharacterCard{position:relative;min-height:150px;padding-bottom:25px!important}
.qualityCharacterCard canvas{display:block;margin:0 auto;max-width:100%;height:auto}
.characterCardName{position:absolute;left:8px;right:8px;bottom:7px;text-align:center;font:900 12px system-ui;color:#f8fafc;text-shadow:0 2px 5px rgba(0,0,0,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.qualityPlayerPanel canvas{display:block;margin:8px auto 0;filter:drop-shadow(0 16px 16px rgba(0,0,0,.36))}
.paletteDot{box-shadow:0 0 0 2px rgba(255,255,255,.12),0 6px 12px rgba(0,0,0,.35)}
.paletteDot[disabled],.paletteDot.taken{opacity:.35;filter:grayscale(.45);cursor:not-allowed}
.attackSlotTitle{display:flex;align-items:center;gap:10px;width:100%}
.attackSlotActions{margin-left:auto;display:flex;align-items:center;gap:8px}
.attackRowSelectors{display:grid;grid-template-columns:minmax(120px,.85fr) minmax(150px,1.15fr);gap:10px;align-items:center}
.previewAttackChoicePanel{width:100%;display:flex;flex-direction:column;gap:7px;margin-top:10px;padding:10px;border:1px solid rgba(148,163,184,.24);border-radius:16px;background:rgba(15,23,42,.55)}
.previewAttackChoicePanel>span{text-transform:uppercase;letter-spacing:.08em;font:800 11px system-ui;color:#94a3b8}
.previewAttackChoiceButtons{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.realRendererPreview{display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden}
.realRendererPreview canvas{width:100%;max-width:520px;height:auto;border-radius:18px;border:1px solid rgba(148,163,184,.30);box-shadow:inset 0 0 34px rgba(15,23,42,.65)}
.platformSpecialMini.dynamic{padding:10px;border:1px solid rgba(148,163,184,.22);border-radius:15px;background:rgba(15,23,42,.42)}
.specialDefaultLine{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.mapElementCardGrid{grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:10px}
.mapElementCard{min-height:70px}
@media(max-width:900px){.attackRowSelectors{grid-template-columns:1fr}.singleMapSource .qualityMapGrid.cleanIconGrid{grid-template-columns:repeat(auto-fill,minmax(126px,1fr))}}

/* Update 13.991.4: selección/editor recovery */
.mapSourceTabsTop{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin:0 0 12px;
  padding:0 0 8px;
  position:sticky;
  top:0;
  z-index:3;
  background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(15,23,42,.82));
}
.qualityMapGrid.cleanIconGrid{
  grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  align-content:start;
}
.qualityMapCard.iconOnly{min-height:92px;padding:6px;}
.qualityMapCard.iconOnly canvas{height:82px;}
.qualityMapGridCard{overflow:hidden;}
.qualityCharacterCard.iconOnly{min-height:132px;padding:8px 8px 12px!important;}
.qualityCharacterCard.iconOnly .characterCardName{display:none!important;}
.qualityCharacterCard.iconOnly canvas{min-height:112px;}
.attackRowSelectors{display:grid;grid-template-columns:minmax(130px,.85fr) minmax(160px,1fr) auto;gap:8px;align-items:center;}
.attackDeleteInline{white-space:nowrap;justify-self:end;}
.attackSlotTitle{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.mapEditorPreview .previewPlatform.pass{
  outline-color:rgba(125,211,252,.045)!important;
  border-color:rgba(125,211,252,.055)!important;
  box-shadow:inset 0 0 0 1px rgba(125,211,252,.025)!important;
}
.mapEditorPreview .previewPlatform.material-grass{background:linear-gradient(180deg,#2fce6a,#166534 65%,#0f3d22);}
.mapEditorPreview .previewPlatform.material-grass::before{content:"";position:absolute;left:0;right:0;top:0;height:22%;background:repeating-linear-gradient(90deg,rgba(187,247,208,.45) 0 7px,transparent 7px 15px);opacity:.45;border-radius:inherit;}
.mapEditorPreview .previewPlatform.material-marble{background:linear-gradient(180deg,#f8fafc,#cbd5e1 54%,#94a3b8);}
.mapEditorPreview .previewPlatform.material-marble::before{content:"";position:absolute;inset:2px;background:linear-gradient(135deg,transparent 0 38%,rgba(100,116,139,.38) 39% 42%,transparent 43% 100%);opacity:.55;border-radius:inherit;}
.mapEditorPreview .previewPlatform.material-wood::before{content:"";position:absolute;inset:2px;background:repeating-linear-gradient(90deg,rgba(253,230,138,.22) 0 5px,transparent 5px 18px);border-radius:inherit;}
.mapEditorPreview .previewPlatform.material-steel::before{content:"";position:absolute;inset:2px;background:linear-gradient(90deg,rgba(255,255,255,.20),transparent 22%,rgba(255,255,255,.10) 55%,transparent);border-radius:inherit;}
.mapEditorPreview .previewPlatform.special-bombTile::after{font-size:clamp(16px, 2.6vw, 26px);filter:drop-shadow(0 2px 4px rgba(0,0,0,.8));}
@media(max-width:1080px){.attackRowSelectors{grid-template-columns:1fr}.attackDeleteInline{justify-self:stretch}}

/* Update 13.992.2 — Map layout fix: tabs are filters, not content columns */
.mapGridHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
}
.mapGridHeader .mapSourceTabsTop{
  position:static;
  margin:0;
  padding:0;
  background:transparent;
  flex:0 0 auto;
}
.qualityMapGridCard > .qualityMapGrid.cleanIconGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:12px;
  max-height:520px;
  overflow:auto;
  align-content:start;
}
@media(min-width:1180px){
  .qualityMapGridCard > .qualityMapGrid.cleanIconGrid{grid-template-columns:repeat(5,minmax(0,1fr));}
}
@media(min-width:920px) and (max-width:1179px){
  .qualityMapGridCard > .qualityMapGrid.cleanIconGrid{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media(max-width:919px){
  .qualityMapGridCard > .qualityMapGrid.cleanIconGrid{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));}
}
.emptyMapGridHint{
  grid-column:1/-1;
  padding:18px;
  border:1px dashed rgba(148,163,184,.28);
  border-radius:16px;
  color:rgba(226,232,240,.72);
  background:rgba(15,23,42,.45);
}


/* Update 13.993.2 — editor de mapas más directo y elementos especiales con lectura real */
.mapElementWorkbenchHeader .row{gap:8px;align-items:center;}
.mapElementEditorBlock{background:linear-gradient(180deg,rgba(15,23,42,.78),rgba(17,24,39,.62));}
.mapElementCard{grid-template-columns:auto 1fr;justify-items:start;text-align:left;border-radius:18px;background:linear-gradient(180deg,rgba(30,41,59,.78),rgba(15,23,42,.70));}
.mapElementCard b{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.10);}
.mapElementCard span{justify-self:end;opacity:.86;}
.mapElementCard small{justify-self:start;color:rgba(226,232,240,.72);}
.selectedMapElementEditor .platformEditorRow{border-radius:20px;border:1px solid rgba(148,163,184,.24);background:rgba(2,6,23,.28);padding:12px;}
.specialRuleNote{grid-column:1 / -1;margin:0;padding:7px 9px;border-radius:12px;background:rgba(15,23,42,.55);border:1px solid rgba(148,163,184,.18);}
.mapEditorPreview .previewPlatform.special-wind{background:repeating-linear-gradient(90deg,rgba(186,230,253,.10) 0 8px,rgba(56,189,248,.20) 8px 14px,rgba(15,23,42,.16) 14px 28px)!important;border-color:rgba(186,230,253,.13)!important;}
.mapEditorPreview .previewPlatform.special-bumper{background:repeating-linear-gradient(45deg,#facc15 0 10px,#111827 10px 18px)!important;border-color:rgba(254,240,138,.42)!important;box-shadow:0 0 0 2px rgba(250,204,21,.10),0 10px 22px rgba(2,6,23,.34);}
.mapEditorPreview .previewPlatform.special-portal{background:radial-gradient(circle at center,rgba(192,132,252,.52),rgba(49,46,129,.32) 46%,rgba(2,6,23,.52) 72%)!important;border-color:rgba(216,180,254,.36)!important;}
.mapEditorPreview .previewPlatform.special-wind::after{transform:rotate(var(--wind-angle,0deg));color:#bae6fd;}
.mapEditorPreview .previewPlatform.special-portal::after{color:#e9d5ff;filter:drop-shadow(0 0 10px rgba(192,132,252,.75));}
.mapEditorPreview .previewPlatform.pass:not(.special-wind):not(.special-portal){border-color:rgba(125,211,252,.045)!important;outline-color:rgba(125,211,252,.035)!important;}

/* Update 13.993.2 - botones directos y texturas especiales escalables */
.specialCreateButtons {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed rgba(148,163,184,.18);
}
.specialCreateHint {
  margin: 4px 0 0;
  color: rgba(226,232,240,.62);
}
.specialCreateButton b {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 14px rgba(2,6,23,.20);
}
.specialCreate-wind b { background: rgba(56,189,248,.18)!important; }
.specialCreate-portal b { background: rgba(168,85,247,.18)!important; }
.specialCreate-bumper b { background: rgba(250,204,21,.18)!important; }
.specialCreate-bombTile b { background: rgba(248,113,113,.18)!important; }
.specialCreate-temporary b { background: rgba(148,163,184,.18)!important; }
.windDirectionGrid {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}
.windDirectionGrid select,
.windDirectionGrid input[type='number'] {
  width: 100%;
}
.mapEditorPreview .previewPlatform.special-wind {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8,47,73,.26), rgba(14,116,144,.13)),
    repeating-linear-gradient(90deg, rgba(186,230,253,.10) 0 9px, rgba(56,189,248,.23) 9px 17px, rgba(15,23,42,.10) 17px 34px)!important;
  background-size: 100% 100%, clamp(42px, 22%, 132px) clamp(34px, 42%, 120px)!important;
  border-color: rgba(186,230,253,.16)!important;
}
.mapEditorPreview .previewPlatform.special-wind::before {
  content: "";
  position: absolute;
  inset: -22%;
  border-radius: inherit;
  background:
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(186,230,253,.20) 16px 19px, transparent 19px 42px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(125,211,252,.12) 38px 44px, transparent 44px 86px);
  background-size: clamp(70px, 30%, 180px) 100%, clamp(120px, 45%, 260px) 100%;
  transform: rotate(var(--wind-angle, 0deg));
  transform-origin: 50% 50%;
  opacity: .88;
  pointer-events: none;
}
.mapEditorPreview .previewPlatform.special-wind::after {
  content: "➤";
  transform: rotate(var(--wind-angle,0deg));
  color: #bae6fd;
  font-size: clamp(18px, min(24%, 44px), 46px);
  opacity: .92;
}
.mapEditorPreview .previewPlatform.special-portal {
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, rgba(233,213,255,.64), rgba(168,85,247,.35) 25%, rgba(49,46,129,.32) 58%, rgba(2,6,23,.58) 83%),
    conic-gradient(from 0deg, rgba(216,180,254,.14), rgba(59,130,246,.18), rgba(216,180,254,.14), rgba(2,6,23,.08))!important;
  background-size: 100% 100%, 100% 100%!important;
  border-color: rgba(216,180,254,.42)!important;
}
.mapEditorPreview .previewPlatform.special-portal::before {
  content: "";
  position: absolute;
  inset: clamp(3px, 8%, 14px);
  border-radius: inherit;
  border: clamp(2px, 4%, 8px) solid rgba(233,213,255,.22);
  box-shadow: inset 0 0 clamp(12px, 16%, 38px) rgba(192,132,252,.65), 0 0 clamp(8px, 12%, 30px) rgba(168,85,247,.42);
  pointer-events: none;
}
.mapEditorPreview .previewPlatform.special-portal::after {
  content: "◎";
  color: #f3e8ff;
  font-size: clamp(18px, min(30%, 52px), 56px);
  filter: drop-shadow(0 0 10px rgba(192,132,252,.75));
}
.mapEditorPreview .previewPlatform.special-bumper {
  background:
    radial-gradient(circle at 50% 45%, rgba(254,240,138,.36), transparent 30%),
    repeating-linear-gradient(45deg,#facc15 0 clamp(8px, 16%, 18px),#111827 clamp(8px, 16%, 18px) clamp(16px, 29%, 34px))!important;
  border-color: rgba(254,240,138,.50)!important;
}
.mapEditorPreview .previewPlatform.special-bumper::after {
  content: "◆";
  font-size: clamp(18px, min(28%, 46px), 50px);
  color: #fef08a;
}
.mapEditorPreview .previewPlatform.special-bombTile {
  background:
    radial-gradient(circle at 50% 48%, rgba(239,68,68,.28), transparent 34%),
    repeating-linear-gradient(135deg, rgba(127,29,29,.62) 0 clamp(10px, 12%, 22px), rgba(69,10,10,.40) clamp(10px, 12%, 22px) clamp(24px, 26%, 46px)),
    linear-gradient(180deg, rgba(120,53,15,.85), rgba(69,26,3,.95))!important;
  border-color: rgba(248,113,113,.34)!important;
}
.mapEditorPreview .previewPlatform.special-bombTile::after {
  content: "💣";
  font-size: clamp(17px, min(24%, 36px), 40px);
}
.mapEditorPreview .previewPlatform.special-temporary::after {
  content: "⌛";
  font-size: clamp(16px, min(22%, 34px), 38px);
}

/* Update 13.993.2 Nico pass — edición de tamaño real más cómoda */
.quickSizeBar{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  padding:7px 8px;
  border-radius:14px;
  background:rgba(15,23,42,.45);
  border:1px solid rgba(148,163,184,.16);
}
.quickSizeBar span{
  font:900 11px system-ui;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:rgba(226,232,240,.66);
  margin-right:4px;
}
.quickSizeBar button{
  min-height:28px;
  padding:4px 8px;
  border-radius:999px;
  font-size:.76rem;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(30,41,59,.76);
  color:#e5e7eb;
}
.quickSizeBar button:hover{
  border-color:rgba(250,204,21,.58);
  background:rgba(51,65,85,.86);
}
.mapEditorPreview .previewPlatform.special-portal{
  background:
    radial-gradient(ellipse at center,rgba(255,255,255,.22) 0 8%,rgba(233,213,255,.58) 9% 21%,rgba(168,85,247,.34) 32%,rgba(37,99,235,.22) 58%,rgba(2,6,23,.64) 84%),
    conic-gradient(from 90deg,rgba(216,180,254,.20),rgba(59,130,246,.22),rgba(126,34,206,.24),rgba(216,180,254,.20))!important;
  box-shadow:inset 0 0 clamp(12px,18%,42px) rgba(233,213,255,.24),0 0 clamp(8px,14%,34px) rgba(168,85,247,.20);
}
.mapEditorPreview .previewPlatform.special-bumper{
  background:
    radial-gradient(circle at 50% 45%,rgba(255,255,255,.36),transparent 22%),
    repeating-linear-gradient(45deg,#fef08a 0 clamp(7px,13%,17px),#facc15 clamp(7px,13%,17px) clamp(13px,24%,29px),#111827 clamp(13px,24%,29px) clamp(20px,35%,42px))!important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),0 10px 24px rgba(2,6,23,.34),0 0 clamp(8px,12%,24px) rgba(250,204,21,.16);
}
.mapEditorPreview .previewPlatform.special-bumper::before{
  content:"";
  position:absolute;
  inset:18%;
  border-radius:inherit;
  border:clamp(1px,3%,5px) solid rgba(17,24,39,.42);
  transform:rotate(45deg);
  pointer-events:none;
}


/* Update 13.993.3 — especiales editables desde preview y pausa real del portal */
.previewPlatform.special-portal .cornerHandle,
.previewPlatform.special-bumper .cornerHandle,
.previewPlatform.special-wind .cornerHandle,
.previewPlatform.special-bombTile .cornerHandle,
.previewPlatform.special-temporary .cornerHandle {
  width: 24px;
  height: 24px;
  opacity: .72;
  box-shadow: 0 0 0 6px rgba(250,204,21,.18), 0 0 16px rgba(250,204,21,.28);
}
.previewPlatform.special-portal .cornerHandle.lt,
.previewPlatform.special-bumper .cornerHandle.lt,
.previewPlatform.special-wind .cornerHandle.lt,
.previewPlatform.special-bombTile .cornerHandle.lt,
.previewPlatform.special-temporary .cornerHandle.lt { left: -11px; top: -11px; }
.previewPlatform.special-portal .cornerHandle.rt,
.previewPlatform.special-bumper .cornerHandle.rt,
.previewPlatform.special-wind .cornerHandle.rt,
.previewPlatform.special-bombTile .cornerHandle.rt,
.previewPlatform.special-temporary .cornerHandle.rt { right: -11px; top: -11px; }
.previewPlatform.special-portal .cornerHandle.lb,
.previewPlatform.special-bumper .cornerHandle.lb,
.previewPlatform.special-wind .cornerHandle.lb,
.previewPlatform.special-bombTile .cornerHandle.lb,
.previewPlatform.special-temporary .cornerHandle.lb { left: -11px; bottom: -11px; }
.previewPlatform.special-portal .cornerHandle.rb,
.previewPlatform.special-bumper .cornerHandle.rb,
.previewPlatform.special-wind .cornerHandle.rb,
.previewPlatform.special-bombTile .cornerHandle.rb,
.previewPlatform.special-temporary .cornerHandle.rb { right: -11px; bottom: -11px; }
.quickSizeBar.specialSizeTools {
  background: linear-gradient(135deg, rgba(88,28,135,.52), rgba(15,23,42,.58));
  border-color: rgba(216,180,254,.28);
}
.quickSizeBar.specialSizeTools button {
  min-height: 32px;
  padding-inline: 10px;
  background: rgba(30,41,59,.92);
}
.quickSizeBar.specialSizeTools span {
  color: #f3e8ff;
}

/* Update 13.993.3 — preview especial editable de verdad */
.mapEditorPreview .previewPlatform {
  touch-action: none;
  user-select: none;
}
.mapEditorPreview .previewPlatform .cornerHandle,
.mapEditorPreview .previewPlatform .sideHandle,
.mapEditorPreview .previewPlatform .rotateHandle {
  z-index: 9;
  pointer-events: auto;
}
.mapEditorPreview .previewPlatform .sideHandle {
  position: absolute;
  background: rgba(250,204,21,.50);
  border: 1px solid rgba(15,23,42,.92);
  box-shadow: 0 0 0 4px rgba(250,204,21,.13);
  opacity: .30;
  transition: opacity .12s ease, transform .12s ease;
  touch-action: none;
}
.mapEditorPreview .previewPlatform.selected .sideHandle,
.mapEditorPreview .previewPlatform:hover .sideHandle {
  opacity: .88;
}
.mapEditorPreview .previewPlatform .sideHandle.left,
.mapEditorPreview .previewPlatform .sideHandle.right {
  top: 22%;
  width: 18px;
  height: 56%;
  min-height: 28px;
  cursor: ew-resize;
}
.mapEditorPreview .previewPlatform .sideHandle.left { left: -9px; border-radius: 999px 0 0 999px; }
.mapEditorPreview .previewPlatform .sideHandle.right { right: -9px; border-radius: 0 999px 999px 0; }
.mapEditorPreview .previewPlatform .sideHandle.top,
.mapEditorPreview .previewPlatform .sideHandle.bottom {
  left: 22%;
  height: 18px;
  width: 56%;
  min-width: 28px;
  cursor: ns-resize;
}
.mapEditorPreview .previewPlatform .sideHandle.top { top: -9px; border-radius: 999px 999px 0 0; }
.mapEditorPreview .previewPlatform .sideHandle.bottom { bottom: -9px; border-radius: 0 0 999px 999px; }
.mapEditorPreview .previewPlatform.special-wind .rotateHandle {
  position: absolute;
  left: 50%;
  top: -36px;
  width: 28px;
  height: 28px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #e0f2fe, #38bdf8 58%, #075985 100%);
  border: 2px solid rgba(15,23,42,.95);
  box-shadow: 0 0 0 5px rgba(56,189,248,.18), 0 0 18px rgba(125,211,252,.55);
  cursor: grab;
  opacity: .42;
  touch-action: none;
}
.mapEditorPreview .previewPlatform.special-wind.selected .rotateHandle,
.mapEditorPreview .previewPlatform.special-wind:hover .rotateHandle {
  opacity: .95;
}
.mapEditorPreview .previewPlatform.special-wind .rotateHandle::after {
  content: "↻";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #082f49;
  font-weight: 900;
  font-size: 18px;
}
.mapEditorPreview .previewPlatform[data-hover-mode='rotate'] { outline: 2px solid rgba(125,211,252,.76); }
.mapEditorPreview .previewPlatform[data-hover-mode^='resize'] .sideHandle,
.mapEditorPreview .previewPlatform[data-hover-mode^='resize'] .cornerHandle { opacity: 1; transform: scale(1.10); }
.mapEditorPreview .previewPlatform.special-wind {
  background:
    radial-gradient(ellipse at center, rgba(186,230,253,.18), rgba(8,47,73,.10) 46%, rgba(2,6,23,.16) 75%),
    repeating-linear-gradient(90deg, rgba(224,242,254,.05) 0 11px, rgba(56,189,248,.26) 11px 19px, rgba(15,23,42,.06) 19px 38px) !important;
  border-color: rgba(186,230,253,.24)!important;
  box-shadow: inset 0 0 18px rgba(125,211,252,.18), 0 0 16px rgba(56,189,248,.10);
}
.mapEditorPreview .previewPlatform.special-wind::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(186,230,253,.28) 22px 26px, transparent 26px 54px),
    repeating-linear-gradient(90deg, transparent 0 48px, rgba(56,189,248,.18) 48px 57px, transparent 57px 112px);
  transform: rotate(var(--wind-angle, 0deg));
  opacity: .94;
}
.mapEditorPreview .previewPlatform.special-bumper {
  box-shadow: inset 0 0 20px rgba(250,204,21,.32), 0 0 0 2px rgba(250,204,21,.16), 0 14px 28px rgba(2,6,23,.42);
}
.mapEditorPreview .previewPlatform.special-portal {
  box-shadow: inset 0 0 24px rgba(168,85,247,.34), 0 0 24px rgba(168,85,247,.22);
}

/* Update 13.993.3.1 — editor limpio: esquinas escalan, centro mueve; viento no es plataforma */
.mapEditorPreview .previewPlatform .sideHandle { display: none !important; pointer-events: none !important; }
.mapEditorPreview .previewPlatform[data-hover-mode='move'] { cursor: grab; }
.mapEditorPreview .previewPlatform[data-hover-mode^='resize'] { cursor: nwse-resize; }
.mapEditorPreview .previewPlatform .cornerHandle { width: 18px; height: 18px; }
.mapEditorPreview .previewPlatform.special-portal .cornerHandle,
.mapEditorPreview .previewPlatform.special-bumper .cornerHandle,
.mapEditorPreview .previewPlatform.special-wind .cornerHandle,
.mapEditorPreview .previewPlatform.special-bombTile .cornerHandle,
.mapEditorPreview .previewPlatform.special-temporary .cornerHandle { width: 22px; height: 22px; }
.mapEditorPreview .previewPlatform.special-wind {
  background: transparent !important;
  border-color: transparent !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}
.mapEditorPreview .previewPlatform.special-wind span {
  background: rgba(8,47,73,.42);
  border: 1px solid rgba(125,211,252,.22);
}
.mapEditorPreview .previewPlatform.special-wind::before {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, transparent 0 20px, rgba(186,230,253,.44) 20px 24px, transparent 24px 58px),
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(56,189,248,.22) 42px 50px, transparent 50px 112px);
  background-size: 128px 100%, 224px 100%;
  animation: windPreviewFrames 1.05s linear infinite;
  transform: rotate(var(--wind-angle, 0deg));
  transform-origin: 50% 50%;
  opacity: .88;
  pointer-events: none;
}
.mapEditorPreview .previewPlatform.special-wind::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(186,230,253,.05), rgba(125,211,252,.20), rgba(186,230,253,.05));
  transform: rotate(var(--wind-angle, 0deg));
  opacity: .32;
  pointer-events: none;
}
@keyframes windPreviewFrames {
  from { background-position: 0 0, 0 0; }
  to { background-position: 128px 0, 224px 0; }
}
.selectedMapElementEditor .quickSizeBar { display: none !important; }
.mapElementWorkbenchHeader .tiny { opacity: .68; }


/* Update 13.993.3.4 — controles adaptativos rotados del elemento seleccionado */
.mapEditorPreview .previewPlatform {
  transform-origin: center center;
}
.mapEditorPreview .previewPlatform .cornerHandle,
.mapEditorPreview .previewPlatform .rotateHandle {
  display: none !important;
  pointer-events: none !important;
}
.mapEditorPreview .platformCornerControl,
.mapEditorPreview .platformRotateControl {
  position: absolute;
  z-index: 28;
  transform: translate(-50%, -50%) rotate(var(--control-rotation, 0deg));
  touch-action: none;
  user-select: none;
  pointer-events: auto;
}
.mapEditorPreview .platformCornerControl {
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border-radius: 50%;
  background: #fde68a;
  border: 2px solid rgba(15,23,42,.96);
  box-shadow: 0 0 0 5px rgba(250,204,21,.16), 0 0 18px rgba(250,204,21,.24);
}
.mapEditorPreview .platformCornerControl.lt,
.mapEditorPreview .platformCornerControl.rb { cursor: nwse-resize; }
.mapEditorPreview .platformCornerControl.rt,
.mapEditorPreview .platformCornerControl.lb { cursor: nesw-resize; }
.mapEditorPreview .platformRotateControl {
  width: 27px;
  height: 27px;
  min-height: 27px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 900;
  font-size: 17px;
  color: #082f49;
  background: radial-gradient(circle, #e0f2fe, #38bdf8 58%, #075985 100%);
  border: 2px solid rgba(15,23,42,.96);
  box-shadow: 0 0 0 5px rgba(56,189,248,.16), 0 0 18px rgba(125,211,252,.45);
  cursor: grab;
}
.mapEditorPreview .platformRotateControl:active { cursor: grabbing; }
.mapEditorPreview .previewPlatform.selected {
  outline: 2px solid rgba(250,204,21,.54);
  outline-offset: 3px;
}
.mapEditorPreview .previewPlatform.special-wind {
  background: transparent !important;
  border-color: transparent !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.mapEditorPreview .previewPlatform.special-wind::before {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, transparent 0 20px, rgba(186,230,253,.48) 20px 24px, transparent 24px 58px),
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(56,189,248,.24) 42px 50px, transparent 50px 112px);
  background-size: 128px 100%, 224px 100%;
  animation: windPreviewFrames 1.05s linear infinite;
  transform: rotate(var(--wind-angle, 0deg));
  transform-origin: 50% 50%;
  opacity: .88;
  pointer-events: none;
}
.mapEditorPreview .previewPlatform.special-wind::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(186,230,253,.04), rgba(125,211,252,.18), rgba(186,230,253,.04));
  transform: rotate(var(--wind-angle, 0deg));
  opacity: .28;
  pointer-events: none;
}
.mapEditorPreview .previewPlatform.special-portal,
.mapEditorPreview .previewPlatform.special-bumper,
.mapEditorPreview .previewPlatform.special-bombTile,
.mapEditorPreview .previewPlatform.special-temporary {
  overflow: visible !important;
}

/* Update 13.993.3.4 — controles anclados al elemento rotado y viento por partículas */
.mapEditorPreview .platformTransformOverlay {
  position: absolute;
  z-index: 30;
  transform-origin: center center;
  pointer-events: none;
  box-sizing: border-box;
}
.mapEditorPreview .platformTransformOverlay .platformCornerControl,
.mapEditorPreview .platformTransformOverlay .platformRotateControl {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  transform: translate(-50%, -50%);
}
.mapEditorPreview .platformTransformOverlay .platformCornerControl.lt { left: 0; top: 0; }
.mapEditorPreview .platformTransformOverlay .platformCornerControl.rt { left: 100%; top: 0; }
.mapEditorPreview .platformTransformOverlay .platformCornerControl.lb { left: 0; top: 100%; }
.mapEditorPreview .platformTransformOverlay .platformCornerControl.rb { left: 100%; top: 100%; }
.mapEditorPreview .platformTransformOverlay .platformRotateControl { left: 50%; top: calc(0% - 28px); }
.mapEditorPreview .platformTransformOverlay .platformCornerControl.lt,
.mapEditorPreview .platformTransformOverlay .platformCornerControl.rb { cursor: nwse-resize; }
.mapEditorPreview .platformTransformOverlay .platformCornerControl.rt,
.mapEditorPreview .platformTransformOverlay .platformCornerControl.lb { cursor: nesw-resize; }
.mapEditorPreview .platformCornerControl,
.mapEditorPreview .platformRotateControl {
  flex: none;
  line-height: 1;
}
.mapEditorPreview .previewPlatform.special-wind {
  background: transparent !important;
  border-color: transparent !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.mapEditorPreview .previewPlatform.special-wind::before,
.mapEditorPreview .previewPlatform.special-wind::after {
  display: none !important;
  content: none !important;
}
.mapEditorPreview .previewPlatform.special-wind span {
  background: rgba(8,47,73,.32);
  border: 1px solid rgba(125,211,252,.18);
  pointer-events: none;
}
.windParticleField {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.windParticle {
  position: absolute;
  left: calc(-1 * var(--len, 24px));
  top: var(--wy, 50%);
  width: var(--len, 24px);
  height: 2px;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(224,242,254,var(--a,.5)), rgba(125,211,252,var(--a,.5)), transparent);
  filter: drop-shadow(0 0 5px rgba(125,211,252,.28));
  animation: windParticleFlow var(--dur, 2.2s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes windParticleFlow {
  0% { transform: translateX(0) scaleX(.45); opacity: 0; }
  12% { opacity: calc(var(--a, .45) * .7); }
  50% { opacity: var(--a, .45); }
  84% { opacity: calc(var(--a, .45) * .42); }
  100% { transform: translateX(calc(100% + 140px)) scaleX(.95); opacity: 0; }
}
.mapEditorPreview .previewPlatform.special-portal::before,
.mapEditorPreview .previewPlatform.special-portal::after {
  background: transparent !important;
}
.mapEditorPreview .previewPlatform.special-portal {
  background: transparent !important;
  border-color: rgba(216,180,254,.20) !important;
  box-shadow: none !important;
  overflow: visible;
}
.mapEditorPreview .previewPlatform.special-portal::before {
  content: "" !important;
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 2px dashed rgba(216,180,254,.72);
  box-shadow: 0 0 16px rgba(168,85,247,.28), inset 0 0 18px rgba(96,165,250,.16);
  background: transparent !important;
  animation: portalPreviewRing 1.8s linear infinite;
  pointer-events: none;
}
.mapEditorPreview .previewPlatform.special-portal::after {
  content: "" !important;
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  border: 1px solid rgba(147,197,253,.55);
  background: transparent !important;
  box-shadow: 0 0 12px rgba(147,197,253,.22);
  animation: portalPreviewRing 1.25s linear reverse infinite;
  pointer-events: none;
}
@keyframes portalPreviewRing {
  to { transform: rotate(360deg); }
}

/* Update 13.993.3.5 — editor transform shame fix */
.mapEditorPreview .previewPlatform[data-hover-mode^='resize'] { cursor: grab !important; }
.mapEditorPreview .previewPlatform[data-hover-mode^='resize'] { outline: inherit; }
.mapEditorPreview .platformTransformOverlay {
  border: 1px dashed rgba(250,204,21,.42);
  outline: none;
}
.mapEditorPreview .platformTransformOverlay .platformCornerControl,
.mapEditorPreview .platformTransformOverlay .platformRotateControl {
  transform: translate(-50%, -50%) !important;
}
.mapEditorPreview .previewPlatform.special-wind {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.mapEditorPreview .previewPlatform.special-wind span {
  background: rgba(8,47,73,.22);
  border: 1px solid rgba(125,211,252,.14);
  opacity: .75;
}
.windParticleField {
  inset: -2% 0;
  border-radius: inherit;
}
.windParticle {
  height: var(--thick, 2px);
  animation: windParticleFlow var(--dur, 4.8s) linear infinite;
}
@keyframes windParticleFlow {
  0% { transform: translateX(0) scaleX(.35); opacity: 0; }
  16% { opacity: calc(var(--a, .45) * .82); }
  56% { opacity: var(--a, .45); }
  78% { opacity: calc(var(--a, .45) * .52); }
  100% { transform: translateX(calc(100% + var(--travel, 220px))) scaleX(1); opacity: 0; }
}
.mapEditorPreview .previewPlatform.special-portal {
  background: transparent !important;
  border-color: rgba(216,180,254,.18) !important;
  box-shadow: none !important;
}
.mapEditorPreview .previewPlatform.special-portal::before {
  animation: none !important;
  border-style: solid !important;
  opacity: .82;
}
.mapEditorPreview .previewPlatform.special-portal::after {
  animation: none !important;
  opacity: .52;
}
.compactAdvancedCheck {
  grid-column: span 2;
}
.platformSpecialMini:not(.advancedOpen) .specialAdvancedGrid {
  display: none !important;
}

/* Update 13.993.3.6 — viento lleno desde el primer frame y sin huecos al escalar */
.mapEditorPreview .previewPlatform.special-wind {
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.mapEditorPreview .previewPlatform.special-wind span {
  background: rgba(8,47,73,.18);
  border: 1px solid rgba(125,211,252,.10);
  opacity: .62;
}
.windParticleField {
  position: absolute;
  inset: 0 !important;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  contain: layout paint;
}
.windParticle {
  position: absolute;
  left: var(--wx, -12%);
  top: var(--wy, 50%);
  width: var(--len, 28px);
  height: var(--thick, 2px);
  border-radius: 999px;
  opacity: calc(var(--a, .45) * .54);
  background: linear-gradient(90deg, transparent, rgba(224,242,254,var(--a,.5)), rgba(125,211,252,var(--a,.5)), transparent);
  filter: drop-shadow(0 0 4px rgba(125,211,252,.22));
  animation: windParticleFlowFilled var(--dur, 6.2s) linear infinite;
  animation-delay: var(--delay, -1s);
  will-change: transform, opacity;
}
@keyframes windParticleFlowFilled {
  0% { transform: translateX(0) scaleX(.42); opacity: calc(var(--a, .45) * .34); }
  14% { opacity: calc(var(--a, .45) * .84); }
  56% { opacity: var(--a, .45); }
  82% { opacity: calc(var(--a, .45) * .54); }
  100% { transform: translateX(var(--travel, 260px)) scaleX(1); opacity: 0; }
}

/* Update 13.993.4 — viento textura real, no partículas sueltas que desaparecen */
.mapEditorPreview .previewPlatform.special-wind {
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.mapEditorPreview .previewPlatform.special-wind span {
  background: rgba(8,47,73,.13);
  border: 1px solid rgba(125,211,252,.08);
  opacity: .54;
}
.windTextureField {
  position: absolute;
  inset: 0 !important;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  contain: paint;
}
.windTextureField .windParticle { display: none !important; }
.windFlowLayer {
  position: absolute;
  inset: -6%;
  opacity: var(--wind-alpha, .48);
  will-change: background-position, transform;
  background-repeat: repeat;
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0 calc(var(--wind-gap, 14px) - 3px),
      rgba(224,242,254,.34) calc(var(--wind-gap, 14px) - 2px) calc(var(--wind-gap, 14px) - 1px),
      transparent var(--wind-gap, 14px)),
    repeating-linear-gradient(90deg,
      transparent 0 12px,
      rgba(186,230,253,.28) 16px calc(16px + var(--wind-dash, 34px)),
      transparent calc(30px + var(--wind-dash, 34px)) calc(50px + var(--wind-dash, 34px)));
  background-size:
    100% var(--wind-gap, 14px),
    calc(var(--wind-dash, 34px) * 2.4) 100%;
  animation: windTextureScroll var(--wind-speed, 4.8s) linear infinite;
  filter: drop-shadow(0 0 4px rgba(125,211,252,.18));
}
.windFlowLayer.mist {
  opacity: calc(var(--wind-alpha, .48) * .52);
  transform: translateY(calc(var(--wind-wave, 12px) * .42));
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0 calc(var(--wind-gap, 14px) * 1.65 - 3px),
      rgba(240,249,255,.26) calc(var(--wind-gap, 14px) * 1.65 - 2px) calc(var(--wind-gap, 14px) * 1.65),
      transparent calc(var(--wind-gap, 14px) * 1.65 + 3px)),
    repeating-linear-gradient(90deg,
      transparent 0 20px,
      rgba(125,211,252,.22) 24px calc(24px + var(--wind-dash, 34px) * .75),
      transparent calc(38px + var(--wind-dash, 34px)) calc(66px + var(--wind-dash, 34px)));
  animation-duration: calc(var(--wind-speed, 4.8s) * 1.55);
}
.windFlowLayer.gust {
  opacity: calc(var(--wind-alpha, .48) * .34);
  transform: translateY(calc(var(--wind-wave, 12px) * -.55));
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0 calc(var(--wind-gap, 14px) * 2.6 - 4px),
      rgba(224,242,254,.34) calc(var(--wind-gap, 14px) * 2.6 - 2px) calc(var(--wind-gap, 14px) * 2.6 + 2px),
      transparent calc(var(--wind-gap, 14px) * 2.6 + 8px)),
    repeating-linear-gradient(90deg,
      transparent 0 32px,
      rgba(240,249,255,.28) 38px calc(38px + var(--wind-dash, 34px) * 1.55),
      transparent calc(58px + var(--wind-dash, 34px) * 1.7) calc(100px + var(--wind-dash, 34px) * 1.7));
  animation-duration: calc(var(--wind-speed, 4.8s) * .72);
}
@keyframes windTextureScroll {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 0, var(--wind-travel, 420px) 0; }
}

/* Update 13.994.3 — selección/previews con menos texto y más imagen */
.selectionPosterFlow{gap:12px;}
.selectionCleanHeader{padding:12px 16px!important;background:linear-gradient(180deg,rgba(15,23,42,.92),rgba(15,23,42,.68));}
.selectionCleanHeader h2{letter-spacing:.02em;}
.posterMapStep{grid-template-columns:minmax(360px,1.04fr) minmax(430px,1.36fr);gap:14px;align-items:start;}
.stagePosterCard{padding:12px!important;overflow:hidden;background:linear-gradient(180deg,rgba(15,23,42,.86),rgba(2,6,23,.68));}
.stagePosterCanvasWrap{position:relative;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 55px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.04);}
.stagePosterCanvasWrap canvas{display:block;border:0!important;border-radius:0!important;box-shadow:none!important;}
.stagePosterOverlay{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:34px 16px 14px;background:linear-gradient(180deg,transparent,rgba(2,6,23,.76) 58%,rgba(2,6,23,.92));pointer-events:none;}
.stagePosterOverlay strong{font:950 clamp(1.15rem,2.4vw,1.9rem) system-ui;color:#f8fafc;text-shadow:0 4px 16px rgba(0,0,0,.85);line-height:.98;}
.stagePosterOverlay span{font:900 .8rem system-ui;white-space:nowrap;color:#fde68a;background:rgba(250,204,21,.16);border:1px solid rgba(250,204,21,.26);border-radius:999px;padding:7px 10px;box-shadow:0 8px 18px rgba(0,0,0,.24);}
.qualityPosterActions{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:8px;margin-top:10px;}
.posterMapGridCard{min-height:0;padding:12px!important;}
.cleanMapGridHeader{margin-bottom:10px!important;}
.cleanMapGridHeader h3{font-size:1rem;color:rgba(248,250,252,.9);}
.posterMapGrid{max-height:560px!important;gap:10px!important;padding-right:2px!important;}
.posterMapGrid .qualityMapCard.iconOnly{min-height:86px;padding:5px;border-radius:16px;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;}
.posterMapGrid .qualityMapCard.iconOnly:hover{transform:translateY(-2px);border-color:rgba(250,204,21,.36);box-shadow:0 14px 28px rgba(0,0,0,.24);}
.posterMapGrid .qualityMapCard.iconOnly.selected{outline:2px solid rgba(250,204,21,.92);box-shadow:0 0 0 5px rgba(250,204,21,.12),0 18px 35px rgba(250,204,21,.08);}
.posterMapGrid .qualityMapCard.iconOnly canvas{height:78px;border-radius:12px;}
.posterCharacterStep{grid-template-columns:1fr;gap:12px;}
.posterPlayerPanels{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;}
.posterPlayerPanel{min-height:300px;padding:12px!important;overflow:hidden;background:radial-gradient(circle at 50% 40%,rgba(148,163,184,.12),transparent 42%),linear-gradient(180deg,rgba(15,23,42,.88),rgba(2,6,23,.64));}
.posterPlayerPanel.selected::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(250,204,21,.18),transparent 42%);pointer-events:none;}
.qualityPlayerPanel.selected::before{content:""!important;padding:0!important;background:none!important;}
.playerPanelTop{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px;}
.playerPanelTop h3{margin:0;font:950 1rem system-ui;color:#f8fafc;}
.playerPanelTop span{max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:900 .82rem system-ui;color:#fde68a;background:rgba(250,204,21,.11);border:1px solid rgba(250,204,21,.22);border-radius:999px;padding:5px 8px;}
.posterRosterCard{padding:12px!important;}
.posterRosterHeader{justify-content:space-between;margin-bottom:10px;}
.playerTurnPill{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:28px;border-radius:999px;background:#facc15;color:#111827;font:950 .9rem system-ui;box-shadow:0 8px 20px rgba(250,204,21,.22);}
.posterCharacterGrid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:9px!important;max-height:500px!important;}
.posterCharacterGrid .qualityCharacterCard.iconOnly{min-height:134px;padding:6px 6px 22px!important;border-radius:17px;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;}
.posterCharacterGrid .qualityCharacterCard.iconOnly:hover{transform:translateY(-2px);border-color:rgba(250,204,21,.34);}
.posterCharacterGrid .qualityCharacterCard.iconOnly canvas{min-height:104px;border-radius:13px;}
.posterCharacterGrid .qualityCharacterCard.iconOnly .characterCardName{display:block!important;bottom:6px;font-size:11px;}
.randomRosterCard{display:grid;place-items:center;}
.randomRosterCard .mysteryLogo{font-size:3.7rem;line-height:1;}
.posterStepFooter{justify-content:flex-end;gap:10px;padding:12px!important;}
@media(max-width:980px){.posterMapStep{grid-template-columns:1fr}.qualityPosterActions{grid-template-columns:1fr}.stagePosterOverlay{align-items:flex-start;flex-direction:column}.posterMapGrid{max-height:420px!important}.posterCharacterGrid{max-height:430px!important}}

/* Update 13.995 — Character Creator Identity Standard */
.characterEditorGridV2 {
  grid-template-columns: minmax(420px, 1.1fr) minmax(380px, .9fr);
  grid-template-areas:
    "datos datos"
    "preview ataques"
    "preview partes"
    "stats partes"
    "guardados guardados";
}
.characterDataCard .muted {
  max-width: 760px;
}
.characterPreviewCard {
  position: sticky;
  top: 12px;
}
.characterIdentityMeter {
  width: min(100%, 420px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(2,6,23,.44);
  border: 1px solid rgba(148,163,184,.20);
  overflow: hidden;
  position: relative;
}
.characterIdentityMeter::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 5px;
  border-radius: 999px;
  background: rgba(148,163,184,.18);
}
.characterIdentityMeter > span {
  position: absolute;
  left: 10px;
  bottom: 8px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ef4444, #facc15, #22c55e, #38bdf8);
  box-shadow: 0 0 14px rgba(56,189,248,.28);
}
.characterIdentityMeter b {
  color: #f8fafc;
  font-weight: 1000;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .08em;
  z-index: 1;
}
.characterIdentityMeter small {
  color: rgba(226,232,240,.72);
  font-size: .72rem;
  z-index: 1;
  justify-self: end;
}
.customAttackRow.disabledAttack {
  opacity: .70;
  border-style: dashed;
  background: rgba(30,41,59,.25);
}
.customAttackRow.disabledAttack .attackSlotTitle strong::after {
  content: " · vacío";
  color: #fca5a5;
  font-weight: 800;
}
.attackRowSelectors {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) auto auto;
  gap: 7px;
  align-items: center;
}
.mapModeSwitch {
  padding: 4px;
  border-radius: 999px;
  background: rgba(2,6,23,.34);
  border: 1px solid rgba(148,163,184,.18);
}
.mapEditorPreview.eventEditorMode .previewPlatform {
  opacity: .28;
  filter: saturate(.55) contrast(.82);
  pointer-events: none;
}
.mapEditorPreview.eventEditorMode .previewPlatform span,
.mapEditorPreview.eventEditorMode .resizeHint {
  display: none;
}
.eventGhostLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 18;
}
.eventGhostZone {
  position: absolute;
  border-radius: 18px;
  border: 3px dashed var(--event-color, #38bdf8);
  background: color-mix(in srgb, var(--event-color, #38bdf8) 24%, transparent);
  box-shadow: 0 0 0 6px rgba(2,6,23,.18), 0 0 26px color-mix(in srgb, var(--event-color, #38bdf8) 42%, transparent);
  display: grid;
  place-items: center;
  text-align: center;
  color: #f8fafc;
  text-shadow: 0 2px 6px rgba(0,0,0,.75);
  animation: eventGhostPulse 1.9s ease-in-out infinite;
}
.eventGhostZone b {
  font-size: .78rem;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eventGhostZone span {
  position: absolute;
  right: 8px;
  top: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(2,6,23,.72);
  border: 1px solid rgba(255,255,255,.22);
  font-size: .72rem;
  display: grid;
  place-items: center;
}
@keyframes eventGhostPulse {
  0%,100% { transform: scale(1); opacity: .72; }
  50% { transform: scale(1.015); opacity: .96; }
}
@media (max-width: 980px) {
  .characterEditorGridV2 {
    grid-template-columns: 1fr;
    grid-template-areas:
      "datos"
      "preview"
      "ataques"
      "partes"
      "stats"
      "guardados";
  }
  .characterPreviewCard { position: static; }
  .attackRowSelectors { grid-template-columns: 1fr; }
}

/* Update 13.995.1 — reparación de creador de personajes y modo eventos real */
.characterEditorGridV2 {
  grid-template-columns: minmax(420px, 1.05fr) minmax(390px, .95fr) !important;
  grid-template-areas:
    "datos datos"
    "preview partes"
    "preview partes"
    "ataques ataques"
    "stats guardados" !important;
}
.characterPartsCard { grid-area: partes !important; }
.characterAttacksCard { grid-area: ataques !important; }
.characterPreviewCard { grid-area: preview !important; }
.characterStatsCard { grid-area: stats !important; }
.characterSaveCard { grid-area: guardados !important; }
.characterPartsCard .selectedBodyEditor { border-color: rgba(56,189,248,.26); }
.characterAttacksCard { border-color: rgba(251,191,36,.22); }
.eventCreateToolbar {
  border-color: rgba(56,189,248,.24);
  background: linear-gradient(180deg, rgba(14,165,233,.11), rgba(15,23,42,.20));
}
.eventCreateGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: stretch;
}
.eventCreateButton {
  min-height: 58px;
  justify-content: flex-start;
  text-align: left;
}
.eventCreateButton b { font-size: 1.25rem; }
.eventElementCard {
  min-height: 74px;
  border-color: rgba(56,189,248,.28) !important;
}
.eventElementCard span {
  font-size: .73rem;
  line-height: 1.05;
}
.eventListMode .mapElementCardGrid {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.selectedEventConfig {
  border: 1px solid rgba(56,189,248,.25);
  background: rgba(8,47,73,.18);
  border-radius: 18px;
  padding: 12px;
}
.eventGhostLayer.empty {
  display: grid;
  place-items: center;
  color: rgba(226,232,240,.68);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.mapEventWorkspace .mapEditorPreview {
  outline: 2px solid rgba(56,189,248,.20);
}
@media(max-width:980px){
  .characterEditorGridV2 { grid-template-areas:"datos" "preview" "partes" "ataques" "stats" "guardados" !important; grid-template-columns:1fr !important; }
}

/* Update 13.995.1.2 — reparación real de piezas, eventos editables y manual responsive */
.characterEditorGridV2 {
  grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr) !important;
  grid-template-areas:
    "datos datos"
    "preview partes"
    "ataques stats"
    "guardados guardados" !important;
}
.characterAttacksCard,
.characterStatsCard { min-width: 0; }
.characterSaveCard { grid-column: 1 / -1 !important; }
.characterSavedPreviewItem {
  display: grid !important;
  grid-template-columns: 70px minmax(160px,1fr) auto auto;
  align-items: center;
  gap: 10px;
}
.savedCharacterMeta { display:grid; gap:3px; min-width:0; }
.savedCharacterMeta strong,
.savedCharacterMeta span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.savedCharacterMini {
  width: 60px;
  height: 58px;
  position: relative;
  border-radius: 15px;
  background: radial-gradient(circle at 50% 80%, rgba(15,23,42,.72), rgba(2,6,23,.22));
  border: 1px solid rgba(148,163,184,.18);
  overflow: hidden;
}
.savedCharacterMini i { position:absolute; display:block; }
.savedCharacterMini .hidden { display:none; }
.savedCharacterMini .miniBack { left:8px; top:21px; width:14px; height:24px; border-radius:6px; background:rgba(148,163,184,.7); }
.savedCharacterMini .miniLegs { left:22px; bottom:7px; width:17px; height:20px; background:var(--legs); border-radius:4px; box-shadow:12px 0 0 var(--legs); }
.savedCharacterMini .miniTorso { left:19px; top:23px; width:27px; height:23px; background:var(--torso); border-radius:8px; border:2px solid rgba(255,255,255,.18); }
.savedCharacterMini .miniArms { left:12px; top:27px; width:10px; height:22px; background:var(--arms); border-radius:9px; box-shadow:28px 0 0 var(--arms); }
.savedCharacterMini .miniHead { left:22px; top:7px; width:24px; height:24px; background:var(--head); border-radius:7px; border:2px solid rgba(255,255,255,.20); }
.savedCharacterMini .miniTail { right:7px; bottom:16px; width:15px; height:8px; border-radius:999px; background:var(--legs); transform:rotate(-20deg); }
.eventGhostLayer { pointer-events: none; }
.eventGhostZone {
  pointer-events: auto;
  cursor: move;
  transform-origin: center center;
}
.eventGhostZone.selected {
  border-style: solid;
  box-shadow: 0 0 0 7px rgba(250,204,21,.15), 0 0 30px color-mix(in srgb, var(--event-color, #38bdf8) 52%, transparent);
  z-index: 3;
}
.eventCornerControl,
.eventRotateControl {
  position: absolute;
  z-index: 5;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(15,23,42,.86);
  background: #fef3c7;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
  padding: 0;
}
.eventCornerControl.lt { left:-9px; top:-9px; cursor:nwse-resize; }
.eventCornerControl.rt { right:-9px; top:-9px; cursor:nesw-resize; }
.eventCornerControl.lb { left:-9px; bottom:-9px; cursor:nesw-resize; }
.eventCornerControl.rb { right:-9px; bottom:-9px; cursor:nwse-resize; }
.eventRotateControl {
  right: 50%;
  top: -34px;
  transform: translateX(50%);
  width: 28px;
  height: 28px;
  font-weight: 1000;
  color: #451a03;
  cursor: grab;
}
.eventZoneGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(78px, 1fr));
  gap: 8px;
  align-items: end;
}
#modal.manualModalActive .modalBox {
  width: min(96vw, 1120px) !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100dvh - 16px) !important;
  overflow: hidden !important;
  box-sizing: border-box;
}
#modal.manualModalActive #modalText {
  max-width: 100%;
  max-height: calc(100dvh - 96px) !important;
  overflow: auto !important;
  box-sizing: border-box;
}
.manualBookScene,
.manualBook.open,
.manualBookLeft,
.manualBookRight,
.manualBookPage {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}
.manualBookScene { overflow: auto !important; }
.manualBook.open {
  display: grid !important;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: clamp(8px, 2vw, 18px);
}
.manualBookPage {
  overflow: auto !important;
  overflow-wrap: anywhere;
  word-break: normal;
}
.manualIndexList { max-width:100%; }
.manualIndexList button { white-space: normal; overflow-wrap:anywhere; }
@media (max-width: 980px) {
  .characterEditorGridV2 { grid-template-areas:"datos" "preview" "partes" "ataques" "stats" "guardados" !important; grid-template-columns:1fr !important; }
  .characterSavedPreviewItem { grid-template-columns:60px minmax(0,1fr); }
  .characterSavedPreviewItem button { width:100%; }
  .eventZoneGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px), (max-height: 680px) {
  .manualBook.open { grid-template-columns: 1fr !important; padding: 8px !important; }
  .manualBookLeft,
  .manualBookRight,
  .manualBookPage { max-height: none !important; }
  .manualBookPage { padding: 12px !important; }
  .manualBookFooter { position: sticky; bottom: 0; z-index: 5; }
}


/* Update 13.995.1.3: el avance de mapas a personajes va abajo, no metido dentro del poster. */
.selectionStepFooter {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:12px;
  margin-top:10px;
  border-top:1px solid rgba(148,163,184,.16);
}
.selectionNextButton {
  min-width:150px;
  font-weight:900;
}
.mapConfigOnlyActions {
  justify-content:center;
}


/* Update 13.995.1.9: manual responsive/mobile guard + no barra translúcida atravesando páginas */
#modal.manualModalActive .modalBox {
  width: min(98vw, 1260px) !important;
  max-height: calc(100dvh - 12px) !important;
  overflow: hidden !important;
}
#modal.manualModalActive #modalText {
  max-height: calc(100dvh - 78px) !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.manualBookScene {
  width: 100% !important;
  max-height: calc(100dvh - 92px) !important;
  overflow: hidden !important;
  padding: clamp(6px, 1.2vw, 14px) !important;
  min-height: 0 !important;
}
.manualBook.open {
  position: relative !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(12px, 2.4vw, 28px) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 150px) !important;
  overflow: hidden !important;
}
.manualBook.open::before {
  width: 10px !important;
  top: 18px !important;
  bottom: 18px !important;
  opacity: .34 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.manualBookPage {
  position: relative !important;
  z-index: 1 !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 184px) !important;
  overflow: auto !important;
  padding: clamp(12px, 2vw, 24px) !important;
}
.manualBookFooter {
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.manualDots { max-width: 100%; overflow-x: auto; padding-bottom: 2px; }
@media (max-width: 880px), (max-height: 650px) {
  #modal.manualModalActive .modalBox { width: 100vw !important; max-height: 100dvh !important; border-radius: 0 !important; }
  #modal.manualModalActive #modalText { max-height: calc(100dvh - 60px) !important; }
  .manualBookScene { max-height: calc(100dvh - 68px) !important; padding: 6px !important; }
  .manualBook.open { grid-template-columns: 1fr !important; max-height: calc(100dvh - 122px) !important; gap: 8px !important; padding: 8px !important; }
  .manualBook.open::before { display: none !important; }
  .manualBookLeft { display: none !important; }
  .manualBookRight { border-radius: 18px !important; }
  .manualBookPage { max-height: calc(100dvh - 150px) !important; padding: 12px !important; }
  .manualBookFooter { position: sticky !important; bottom: 0 !important; z-index: 4 !important; }
}
@media (max-width: 520px) {
  .manualBookFooter .secondary { width: 100%; }
  .manualBookPage h2 { font-size: 1.25rem !important; }
  .manualBookPage h3 { font-size: 1.05rem !important; }
  .manualBookPage p { font-size: .94rem !important; line-height: 1.55 !important; }
}

/* Update 13.995.2: auditoría real sin reordenar el creador de personajes */
#modal.manualModalActive .modalBox {
  width: min(100vw, 1280px) !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}
#modal.manualModalActive #modalText {
  max-height: calc(100dvh - 64px) !important;
  overflow: hidden !important;
}
.manualBookScene {
  max-height: calc(100dvh - 76px) !important;
  overflow: hidden !important;
  min-height: 0 !important;
}
.manualBook.open {
  max-height: calc(100dvh - 116px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  gap: clamp(10px, 2vw, 20px) !important;
}
.manualBook.open::before {
  display: none !important;
}
.manualBookLeft,
.manualBookRight {
  min-width: 0 !important;
  max-width: 100% !important;
}
.manualBookPage {
  max-height: calc(100dvh - 154px) !important;
  overflow: auto !important;
  overflow-wrap: anywhere !important;
  overscroll-behavior: contain !important;
}
.manualIndexList {
  max-height: calc(100dvh - 225px) !important;
  overflow: auto !important;
  padding-right: 4px !important;
}
.manualBookFooter {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 6 !important;
  background: linear-gradient(180deg, rgba(255,247,218,.78), rgba(255,247,218,.96)) !important;
  border-radius: 14px !important;
  padding: 6px !important;
}
@media (max-width: 560px) {
  #modal.manualModalActive .modalBox { border-radius: 0 !important; }
  .manualBook.open {
    grid-template-columns: 1fr !important;
    max-height: calc(100dvh - 108px) !important;
    padding: 8px !important;
  }
  .manualBookLeft { display: none !important; }
  .manualBookRight { border-radius: 18px !important; }
  .manualBookPage { max-height: calc(100dvh - 138px) !important; padding: 12px !important; }
}
@media (max-width: 560px) {
  .manualBookScene { padding: 4px !important; }
  .manualBook.open { padding: 6px !important; }
  .manualBookPage { font-size: .94rem !important; }
  .manualBookFooter { grid-template-columns: 1fr !important; }
  .manualDots { justify-content: flex-start !important; overflow-x: auto !important; }
}

/* 14.2.3 - Mundo Único: barra compacta dentro del HUD Smash sin reordenar pantallas. */
.uniqueWorldHud {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  margin-top: 5px;
  min-width: 118px;
}
.uniqueWorldHud > span {
  position: relative;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 23, 42, .74);
  border: 1px solid rgba(250, 204, 21, .26);
}
.uniqueWorldHud > span > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #facc15, #f97316);
  box-shadow: 0 0 10px rgba(250, 204, 21, .5);
}
.uniqueWorldHud > b {
  font-size: 9px;
  line-height: 1;
  color: #fde68a;
  letter-spacing: .04em;
  white-space: nowrap;
}
.uniqueWorldHud.ready > span {
  box-shadow: 0 0 16px rgba(250, 204, 21, .55);
}
.uniqueWorldHud.ready > b {
  color: #fef08a;
  text-shadow: 0 0 8px rgba(250, 204, 21, .65);
}
@media (max-width: 760px), (max-height: 560px) {
  .uniqueWorldHud { min-width: 86px; gap: 4px; }
  .uniqueWorldHud > b { font-size: 9px; }
}
.miniInlineNumber.uniqueWorldDurationField {
  display: inline-grid;
  grid-template-columns: auto 54px auto;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border: 1px solid rgba(250,204,21,.24);
  border-radius: 10px;
  background: rgba(15,23,42,.24);
  font-size: 10px;
  font-weight: 800;
  color: #fde68a;
}
.miniInlineNumber.uniqueWorldDurationField input {
  width: 52px;
  min-height: 26px;
  padding: 3px 5px;
}


/* 14.2.3 - spawn points del creador de mapas + manual con índice desktop */
.mapSpawnPanel {
  background: rgba(15,23,42,.30);
  border-color: rgba(56,189,248,.22);
}
.mapSpawnGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.spawnPointField {
  display: grid;
  grid-template-columns: auto auto minmax(52px, 1fr) auto minmax(52px, 1fr);
  gap: 5px;
  align-items: center;
  padding: 7px;
  border-radius: 12px;
  background: rgba(2,6,23,.32);
  border: 1px solid rgba(148,163,184,.18);
  font-size: .76rem;
}
.spawnPointField b { color: #fef3c7; }
.spawnPointField span { color: #93c5fd; font-weight: 900; }
.spawnPointField input { min-width: 0; padding: 5px 6px; }
.spawnPointField.extra { opacity: .82; }
.spawnPreviewGhost {
  position: absolute;
  width: 30px;
  height: 72px;
  transform: translate(-50%, 0);
  z-index: 26;
  pointer-events: none;
  opacity: .72;
}
.spawnPreviewGhost b {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(2,6,23,.78);
  color: #e0f2fe;
  border: 1px solid rgba(125,211,252,.58);
  font-size: 10px;
  font-weight: 1000;
}
.spawnPreviewGhost::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(226,232,240,.36);
  border: 2px solid rgba(226,232,240,.76);
}
.spawnPreviewGhost i {
  position: absolute;
  left: 8px;
  top: 19px;
  width: 14px;
  height: 28px;
  border-radius: 8px;
  background: rgba(125,211,252,.22);
  border: 2px solid rgba(226,232,240,.66);
}
.spawnPreviewGhost i::before,
.spawnPreviewGhost i::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 18px;
  height: 2px;
  background: rgba(226,232,240,.72);
}
.spawnPreviewGhost i::before { right: 10px; transform: rotate(-24deg); transform-origin: right center; }
.spawnPreviewGhost i::after { left: 10px; transform: rotate(24deg); transform-origin: left center; }
.spawnPreviewGhost em {
  position: absolute;
  left: 6px;
  top: 48px;
  width: 18px;
  height: 20px;
  border-left: 3px solid rgba(226,232,240,.72);
  border-right: 3px solid rgba(226,232,240,.72);
  transform: skewX(-5deg);
}
@media (max-width: 720px) {
  .mapSpawnGrid { grid-template-columns: 1fr; }
}
@media (min-width: 561px) {
  #modal.manualModalActive .manualBook.open { grid-template-columns: minmax(230px, .72fr) minmax(360px, 1.28fr) !important; }
  #modal.manualModalActive .manualBookLeft { display: block !important; }
}
@media (max-width: 560px) {
  #modal.manualModalActive .manualBook.open { grid-template-columns: 1fr !important; }
  #modal.manualModalActive .manualBookLeft { display: none !important; }
}


/* 14.2.3 - manual libro más legible: índice desktop, cierre visible y móvil sin animación rota */
#modal.manualModalActive .modalBox {
  background: linear-gradient(180deg, #7c3f16, #3b1a08) !important;
  border: 2px solid rgba(253,230,138,.68) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.52), inset 0 0 0 1px rgba(255,255,255,.10) !important;
}
#modal.manualModalActive #modalTitle {
  color: #fff7ed !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.manualFloatingClose {
  position: absolute;
  right: 18px;
  top: 12px;
  z-index: 20;
  min-height: 34px;
  padding: 7px 13px;
  border-radius: 999px;
  background: #451a03 !important;
  color: #ffedd5 !important;
  border: 1px solid rgba(253,230,138,.70) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
}
#modal.manualModalActive .manualBookScene {
  padding: 54px 14px 12px !important;
}
#modal.manualModalActive .manualBook.open {
  background: linear-gradient(180deg, #78350f, #451a03) !important;
  border: 1px solid rgba(253,230,138,.35);
  border-radius: 24px;
}
#modal.manualModalActive .manualBookPage {
  background: linear-gradient(180deg, #fff7df, #f5deb3 58%, #ecd29f) !important;
  color: #3b220c !important;
  border-color: rgba(120,53,15,.35) !important;
}
#modal.manualModalActive .manualBookFooter {
  margin-top: 18px !important;
  padding: 16px 14px !important;
  border-radius: 18px;
  background: rgba(69,26,3,.72) !important;
  border: 1px solid rgba(253,230,138,.32);
  gap: 18px !important;
}
#modal.manualModalActive .manualBookFooter .secondary {
  background: #7c2d12 !important;
  color: #ffedd5 !important;
  border: 1px solid rgba(253,230,138,.55) !important;
}
#modal.manualModalActive .manualDots {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,237,213,.13);
}
#modal.manualModalActive .modalActions {
  justify-content: flex-end;
  background: linear-gradient(180deg, rgba(69,26,3,.20), rgba(69,26,3,.86)) !important;
  border-top-color: rgba(253,230,138,.28) !important;
}
#modal.manualModalActive #modalCloseBtn {
  display: inline-flex !important;
  background: #451a03 !important;
  color: #ffedd5 !important;
  border-color: rgba(253,230,138,.65) !important;
}
@media (max-width: 560px) {
  #modal.manualModalActive .manualBookScene { padding: 48px 6px 8px !important; perspective: none !important; }
  #modal.manualModalActive .manualClosedCover,
  #modal.manualModalActive .manualPageFold,
  #modal.manualModalActive .manualStackFold { display: none !important; }
  #modal.manualModalActive .manualBookScene .manualBook,
  #modal.manualModalActive .manualBookRight { animation: none !important; transform: none !important; opacity: 1 !important; }
  #modal.manualModalActive .manualBookFooter { grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 10px !important; }
  .manualFloatingClose { top: 8px; right: 8px; }
}


/* 14.2.3 - manual como guía y spawn separado */
#modal.manualModalActive .modalBox {
  position: relative !important;
  width: min(1120px, calc(100vw - 34px)) !important;
  max-height: calc(100dvh - 28px) !important;
  overflow: auto !important;
}
#modal.manualModalActive .manualBookScene {
  padding: 14px 14px 4px !important;
  min-height: min(62dvh, 560px) !important;
}
#modal.manualModalActive .manualFloatingClose {
  position: sticky !important;
  float: right;
  top: 10px !important;
  right: 10px !important;
  margin: 0 0 8px auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 80;
}
#modal.manualModalActive #modalCloseBtn { display: none !important; }
#modal.manualModalActive .manualBookFooter {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(132px, .7fr) minmax(160px, 1.6fr) minmax(132px, .7fr) !important;
  align-items: center !important;
  margin: 12px 14px 16px !important;
  padding: 12px 14px !important;
  clear: both;
}
#modal.manualModalActive .manualBookRight { min-height: 440px; }
#modal.manualModalActive .manualCharacterSection {
  border-top: 1px solid rgba(120,53,15,.18);
  padding-top: 10px;
  margin-top: 10px;
}
#modal.manualModalActive .manualCharacterSection h3 { color: #78350f; margin: 0 0 6px; }
#modal.manualModalActive .manualCharacterSection p { font-size: .92rem !important; line-height: 1.42 !important; }
#modal.manualModalActive.manualBookClosing .manualBookScene .manualBook {
  animation: bookPagesDisappear .42s ease forwards !important;
}
#modal.manualModalActive.manualBookClosing .manualClosedCover {
  display: grid !important;
  animation: bookCoverFlyOpenReverse .42s cubic-bezier(.22,.9,.25,1) reverse forwards !important;
}
.mapSpawnCreateToolbar {
  margin-top: 12px;
  border-top: 1px solid rgba(148,163,184,.22);
  padding-top: 12px;
}
.spawnPreviewGhost {
  cursor: grab;
  pointer-events: auto;
}
.spawnPreviewGhost.selected {
  filter: drop-shadow(0 0 10px rgba(250,204,21,.75));
}
.spawnPointField.selected {
  outline: 2px solid rgba(250,204,21,.65);
  background: rgba(250,204,21,.08);
}
@media (max-width: 560px) {
  #modal.manualModalActive .manualBookFooter {
    grid-template-columns: 1fr !important;
    margin: 10px 6px 12px !important;
  }
  #modal.manualModalActive .manualFloatingClose {
    position: sticky !important;
    top: 6px !important;
  }
}


/* 14.2.3 - manual nav real abajo + spawns proporcionados */
#modal.manualModalActive .manualFloatingClose {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  float: none !important;
  margin: 0 !important;
  z-index: 100 !important;
}
#modal.manualModalActive .manualBookScene {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
  padding: 54px 14px 18px !important;
  overflow: auto !important;
}
#modal.manualModalActive .manualBook.open {
  flex: 0 0 auto !important;
  min-height: 0 !important;
}
#modal.manualModalActive .manualBookFooter {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  clear: both !important;
  flex: 0 0 auto !important;
  margin: 0 12px 10px !important;
  z-index: 2 !important;
}
.spawnPreviewGhost {
  width: 20px !important;
  height: 48px !important;
  opacity: .68 !important;
}
.spawnPreviewGhost b {
  top: -15px !important;
  font-size: 8px !important;
  padding: 1px 4px !important;
}
.spawnPreviewGhost::before {
  left: 5px !important;
  width: 10px !important;
  height: 10px !important;
  border-width: 1.5px !important;
}
.spawnPreviewGhost i {
  left: 5px !important;
  top: 12px !important;
  width: 10px !important;
  height: 19px !important;
  border-width: 1.5px !important;
}
.spawnPreviewGhost i::before,
.spawnPreviewGhost i::after {
  top: 4px !important;
  width: 12px !important;
  height: 1.5px !important;
}
.spawnPreviewGhost i::before { right: 7px !important; }
.spawnPreviewGhost i::after { left: 7px !important; }
.spawnPreviewGhost em {
  left: 5px !important;
  top: 32px !important;
  width: 10px !important;
  height: 13px !important;
  border-left-width: 2px !important;
  border-right-width: 2px !important;
}
@media (max-width: 560px) {
  #modal.manualModalActive .manualBookScene { padding: 48px 6px 12px !important; }
  #modal.manualModalActive .manualBookFooter { grid-template-columns: 1fr !important; margin: 0 4px 8px !important; }
  #modal.manualModalActive .manualFloatingClose { top: 8px !important; right: 8px !important; }
}


/* 14.2.3 Motor Odiseo */
.odysseyHeader{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;width:100%}.odysseyHeader h2{margin:0 0 6px}.odysseyGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;width:100%}.odysseyCard{background:linear-gradient(160deg,rgba(15,23,42,.92),rgba(30,41,59,.88));border:1px solid rgba(250,204,21,.22);border-radius:18px;padding:16px;box-shadow:0 18px 45px rgba(0,0,0,.22)}.odysseyCard h3{margin:0 0 8px}.odysseyCard p,.odysseyCard li{color:#dbeafe}.odysseyAttackAudit{border:1px solid rgba(148,163,184,.22);border-radius:12px;padding:9px 11px;margin:8px 0;background:rgba(2,6,23,.32)}.odysseyAttackAudit summary{cursor:pointer;display:flex;justify-content:space-between;gap:10px;color:#f8fafc}.odysseyAttackAudit summary span{color:#fde047}.odysseyAttackAudit ul{margin:8px 0 0 18px;padding:0}.odysseyAuditGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px;margin-top:8px;color:#bfdbfe}.odysseyAuditGrid small{background:rgba(15,23,42,.5);border-radius:8px;padding:5px 7px}

/* 14.2.3 Motor Odiseo compacto */
#screenCharacterAuthoring{overflow:auto;padding:14px 18px 28px}.odysseyShell{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(360px,1.2fr);gap:12px;align-items:start;max-width:1380px;margin:0 auto}.odysseyTopbar{grid-column:1/-1;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;background:linear-gradient(150deg,rgba(15,23,42,.94),rgba(30,41,59,.86));border:1px solid rgba(250,204,21,.24);border-radius:18px;padding:14px}.odysseyTopbar h2{margin:0 0 5px}.odysseyTopbar p{margin:0;color:#bfdbfe}.odysseyPanel{background:rgba(15,23,42,.72);border:1px solid rgba(148,163,184,.18);border-radius:16px;padding:12px;box-shadow:0 14px 30px rgba(0,0,0,.2)}.odysseyPanel h3{margin:0 0 10px}.odysseyCommandGrid{display:grid;grid-template-columns:max-content 1fr;gap:7px 10px;align-items:center}.odysseyCommandGrid code{background:#020617;border:1px solid rgba(250,204,21,.25);border-radius:8px;padding:4px 7px;color:#fde047}.odysseyCommandGrid span{color:#dbeafe}.odysseyActions{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px}.odysseyGrid{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}.odysseyCard{max-height:420px;overflow:auto}.odysseyTraceList{display:grid;gap:8px;max-height:330px;overflow:auto}.odysseyTraceList article{background:rgba(2,6,23,.42);border:1px solid rgba(148,163,184,.18);border-radius:12px;padding:8px}.odysseyTraceList small{display:block;color:#bfdbfe;margin:3px 0}.odysseyTraceList code{display:block;white-space:pre-wrap;word-break:break-word;color:#e5e7eb;font-size:11px}.odysseySheet{max-height:330px;overflow:auto;background:#020617;border:1px solid rgba(250,204,21,.18);border-radius:12px;padding:10px;color:#dbeafe;font-size:11px;white-space:pre-wrap}.tinyButton{font-size:11px;padding:5px 8px;margin-top:6px}@media (max-width:880px){.odysseyShell{grid-template-columns:1fr}.odysseyTopbar{flex-direction:column}.odysseyGrid{grid-template-columns:1fr}}

/* 14.2.3 Motor Odiseo oculto y entendible */
.odysseyLocked{max-width:720px;margin:38px auto;padding:24px;border-radius:22px;background:linear-gradient(150deg,rgba(15,23,42,.96),rgba(30,41,59,.9));border:1px solid rgba(250,204,21,.28);box-shadow:0 26px 70px rgba(0,0,0,.34)}
.odysseyLocked h2{margin:0 0 10px}.odysseyLocked p{color:#dbeafe}.odysseyWhat ol{margin:10px 0 0 20px;padding:0;color:#dbeafe}.odysseyWhat li{margin:5px 0}.odysseyMessage{grid-column:1/-1}.odysseyFormRow{display:grid;grid-template-columns:minmax(180px,1fr) minmax(170px,.75fr) max-content;gap:8px;align-items:center}.odysseyFormRow input,.odysseyFormRow select{width:100%;min-width:0}.odysseyBlueprintTool,.odysseyFrameTool{grid-column:1/-1}.odysseyButtonLine{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.odysseyFrameGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:8px;margin:10px 0}.odysseyFrameCard{background:rgba(2,6,23,.42);border:1px solid rgba(148,163,184,.18);border-radius:12px;padding:7px}.odysseyFrameCard b{display:block;color:#fde047}.odysseyFrameCard small{display:block;color:#bfdbfe;margin-bottom:5px}.odysseyFrameSvg{width:100%;height:118px;background:linear-gradient(180deg,rgba(15,23,42,.78),rgba(2,6,23,.8));border-radius:10px}.odysseySvgBody{fill:rgba(59,130,246,.38);stroke:#93c5fd;stroke-width:2}.odysseySvgHead{fill:rgba(251,191,36,.55);stroke:#fef3c7;stroke-width:2}.odysseySvgLimb{stroke:#bfdbfe;stroke-width:5;stroke-linecap:round}.odysseySvgTail{stroke:#fb923c;stroke-width:6;stroke-linecap:round}.odysseySvgPoint{fill:#facc15;stroke:#fff7ed;stroke-width:1.5}.odysseySvgHit{fill:rgba(239,68,68,.26);stroke:#f87171;stroke-width:2;stroke-dasharray:4 3}.odysseyShell .odysseyActions{align-content:start}.odysseyShell .odysseyActions h3{grid-column:1/-1}
@media (max-width:760px){.odysseyFormRow{grid-template-columns:1fr}.odysseyFrameGrid{grid-template-columns:1fr}.odysseyLocked{margin:16px 8px}}

/* 14.2.3 - Odiseo deja de dibujar muñecos cuadrados: rig visual y análisis de trace */
.odysseyAnalysis{display:grid;gap:8px}.odysseyAnalysis>p{margin:0 0 4px;color:#dbeafe}.odysseyAnalysisRow{background:rgba(2,6,23,.46);border:1px solid rgba(148,163,184,.2);border-radius:12px;padding:8px}.odysseyAnalysisRow b{display:block;color:#f8fafc}.odysseyAnalysisRow small{display:block;color:#bfdbfe;margin-top:2px}.odysseyAnalysisRow.good{border-color:rgba(34,197,94,.35)}.odysseyAnalysisRow.bad{border-color:rgba(248,113,113,.42);background:rgba(127,29,29,.18)}.odysseyAnalysisRow ul{margin:6px 0 0 18px;padding:0;color:#fecaca}.odysseyAnalysisRow p{margin:6px 0 0;color:#bbf7d0}.odysseyFileImport{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid rgba(250,204,21,.32);border-radius:10px;padding:8px 10px;background:rgba(2,6,23,.55);color:#fde047;font-weight:800;cursor:pointer;text-align:center}.odysseyFileImport input{display:none}.odysseyFrameSvg{height:152px}.odysseyFrameSvg.dragon,.odysseyFrameSvg.lego{background:radial-gradient(circle at 50% 45%,rgba(30,41,59,.92),rgba(2,6,23,.94))}.odysseySvgWing{fill:rgba(20,184,166,.50);stroke:#fb923c;stroke-width:4;stroke-linejoin:round}.odysseySvgDragonBody{fill:#f97316;stroke:#431407;stroke-width:3}.odysseySvgDragonBelly{fill:#fef3c7;stroke:rgba(67,20,7,.25);stroke-width:2}.odysseySvgDragonHead{fill:#fb923c;stroke:#431407;stroke-width:3;stroke-linejoin:round}.odysseySvgNeck{fill:none;stroke:#ea580c;stroke-width:12;stroke-linecap:round}.odysseySvgHorn{fill:none;stroke:#fff7ed;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.odysseySvgLimb.orange{stroke:#c2410c}.odysseySvgClaw{stroke:#fff7ed;stroke-width:4;stroke-linecap:round}.odysseySvgFlame{fill:#facc15;stroke:#fb923c;stroke-width:3}.odysseySvgLegoTorso{fill:#0b72d9;stroke:#020617;stroke-width:3;stroke-linejoin:round}.odysseySvgLegoHead{fill:#f3c78a;stroke:#020617;stroke-width:3}.odysseySvgMask{fill:#0f172a;stroke:#020617;stroke-width:1.5}.odysseySvgHeadband{stroke:#0a3972;stroke-width:7;stroke-linecap:round}.odysseySvgLimb.blue{stroke:#0b72d9}.odysseySvgLegoHand{fill:#f3c78a;stroke:#020617;stroke-width:2}.odysseySvgBoot{fill:#0f172a;stroke:#020617;stroke-width:2}.odysseySvgSpin{fill:none;stroke:#38bdf8;stroke-width:8;stroke-linecap:round;stroke-dasharray:14 8;opacity:.85}.odysseyFrameCard{min-height:205px}.odysseyAnalysisPanel{grid-column:1/-1}
@media (max-width:760px){.odysseyFrameSvg{height:130px}.odysseyFileImport{width:100%}}

/* 14.2.21: contadores de robo/flechas en el HUD, no encima del personaje. */
.combatChips{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:5px;
  max-width:180px;
}
.combatChip{
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:2px 6px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.02em;
  background:rgba(2,6,23,.72);
  color:#e5e7eb;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
}
.combatChip.thiefDebuff{color:#fde68a;border-color:rgba(250,204,21,.45);}
.combatChip.thiefBuff{color:#bbf7d0;border-color:rgba(34,197,94,.40);}
.combatChip.ottomanArrow{color:#fde68a;border-color:rgba(245,158,11,.46);}
.combatChip.flash{animation:combatChipPulse .42s ease-out infinite alternate;}
@keyframes combatChipPulse{from{transform:scale(1);filter:brightness(1)}to{transform:scale(1.05);filter:brightness(1.35)}}

.hudPlayer{position:relative;overflow:hidden}
.smashPortrait{position:relative;overflow:visible}
.hudResourceCorner{
  position:absolute;
  right:8px;
  top:7px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  pointer-events:none;
  z-index:3;
}

.hudBlockCorner{
  position:absolute;
  left:12px;
  top:56px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  pointer-events:none;
}

.resourceChip{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:2px 7px;
  background:rgba(2,6,23,.82);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  font-size:10px;
  font-weight:900;
  color:#e5e7eb;
  letter-spacing:.02em;
  white-space:nowrap;
}
.resourceChip.ottomanArrow{color:#fde68a;border-color:rgba(245,158,11,.46);}
.resourceChip.corrosionBlocks{color:#67e8f9;border-color:rgba(34,211,238,.40);}
.resourceChip.corrosionStatus{color:#c4b5fd;border-color:rgba(167,139,250,.42);}

.resourceChip.thiefShield{color:#fde68a;border-color:rgba(250,204,21,.45);}
.resourceChip.thiefShield.thiefBuff{color:#bbf7d0;border-color:rgba(34,197,94,.42);}
.resourceChip.thiefShield.thiefDebuff{color:#fde68a;border-color:rgba(250,204,21,.45);}
.resourceChip.flash{animation:combatChipPulse .42s ease-out infinite alternate;}


/* Update 14.2.30 — créditos finales con identidad Fighters 2D */
.creditsFinalPanel {
  position: relative;
  overflow: hidden;
  border-color: rgba(249, 115, 22, .38);
  background:
    radial-gradient(circle at 8% 12%, rgba(249,115,22,.20), transparent 28%),
    radial-gradient(circle at 92% 82%, rgba(250,204,21,.12), transparent 30%),
    linear-gradient(135deg, rgba(15,23,42,.96), rgba(2,6,23,.92));
  box-shadow: 0 22px 70px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
}
.creditsFinalPanel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, #facc15, #f97316, #ef4444);
  opacity: .95;
}
.creditsFinalPanel::after {
  content: "F2D";
  position: absolute;
  right: 24px;
  bottom: -18px;
  font-weight: 1000;
  font-size: clamp(70px, 12vw, 150px);
  letter-spacing: -.08em;
  color: rgba(249,115,22,.07);
  pointer-events: none;
}
.creditsHeaderLine,
.creditsTitleBlock,
.creditsPeopleGrid,
.creditsLinkPanel { position: relative; z-index: 1; }
.creditsHeaderLine {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.creditsKicker,
.creditRole {
  color: #fb923c;
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .76rem;
  text-shadow: 0 0 18px rgba(249,115,22,.22);
}
.creditsSeal {
  color: #451a03;
  background: linear-gradient(135deg, #fde68a, #f97316);
  border: 1px solid rgba(255,237,213,.58);
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 1000;
  box-shadow: 0 8px 24px rgba(249,115,22,.16);
}
.creditsTitleBlock h3 {
  margin: 2px 0 0;
  font-size: clamp(1.65rem, 3vw, 2.7rem);
  line-height: .96;
  letter-spacing: -.04em;
  color: #ffedd5;
  text-shadow: 0 12px 30px rgba(0,0,0,.42);
}
.creditsTitleBlock p {
  max-width: 820px;
  margin: 8px 0 2px;
  color: #fed7aa;
  font-weight: 750;
}
.creditsPeopleGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.creditPerson,
.creditsLinkPanel {
  border: 1px solid rgba(251,146,60,.26);
  border-radius: 18px;
  padding: 14px;
  background: rgba(2,6,23,.38);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}
.creditPerson.mainCredit {
  background:
    linear-gradient(135deg, rgba(249,115,22,.18), rgba(2,6,23,.36));
  border-color: rgba(251,146,60,.42);
}
.creditPerson strong {
  display: block;
  margin-top: 5px;
  color: #fff7ed;
  font-size: 1.25rem;
}
.creditPerson p {
  color: #cbd5e1;
  margin: 6px 0 0;
  line-height: 1.45;
}
.creditsLinkPanel { display: grid; gap: 10px; }
.creditsLinks .creditsLink {
  color: #fff7ed;
  border-color: rgba(251,146,60,.32);
  background: linear-gradient(135deg, rgba(249,115,22,.28), rgba(30,41,59,.72));
  text-decoration: none;
}
.creditsLinks .creditsLink:hover { border-color: rgba(253,230,138,.70); }
#modal.manualModalActive .manualBookPage.manualCreditsPage {
  background:
    radial-gradient(circle at 16% 10%, rgba(251,146,60,.32), transparent 28%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(120,53,15,.08) 27px 28px),
    rgba(255,247,218,.94);
}
#modal.manualModalActive .manualBookPage.manualCreditsPage h2 { color: #7c2d12; }
#modal.manualModalActive .manualBookPage.manualCreditsPage p:first-of-type {
  color: #9a3412;
  font-size: 1.03rem;
}
#modal.manualModalActive .manualBookPage.manualCreditsPage p strong,
#modal.manualModalActive .manualBookPage.manualCreditsPage .manualCharacterSection h3 { color: #c2410c; }
@media (max-width: 760px) {
  .creditsFinalPanel::after { opacity: .04; }
  .creditsTitleBlock h3 { font-size: 1.55rem; }
}

/* 14.2.30.4: modo secreto de trailer auto-dirigido */
body.trailerDirectorActive,
body.trailerDirectorActive * {
  cursor: none !important;
}
body.trailerDirectorActive #gameCanvas {
  outline: 3px solid rgba(249,115,22,.55);
  box-shadow: 0 0 38px rgba(249,115,22,.28), 0 0 80px rgba(15,23,42,.65) inset;
}
.trailerDirectorToast {
  position: fixed;
  left: 50%;
  top: 22px;
  transform: translate(-50%, -24px) scale(.96);
  opacity: 0;
  pointer-events: none;
  z-index: 99999;
  background: linear-gradient(135deg, rgba(15,23,42,.94), rgba(67,20,7,.92));
  color: #fff7ed;
  border: 1px solid rgba(249,115,22,.72);
  box-shadow: 0 18px 50px rgba(0,0,0,.40), 0 0 28px rgba(249,115,22,.24);
  border-radius: 18px;
  padding: 12px 18px;
  font-weight: 900;
  letter-spacing: .03em;
  transition: opacity .18s ease, transform .18s ease;
}
.trailerDirectorToast.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* 14.2.30.4: director real de trailer con captura, audio y overlay cinematográfico */
body.trailerDirectorActive,
body.trailerDirectorActive * {
  cursor: none !important;
}
.trailerDirectorDomOverlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  font-family: Arial, Helvetica, sans-serif;
}
.trailerDirectorDomOverlay.preflight {
  pointer-events: auto;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(249,115,22,.18), rgba(2,6,23,.92) 58%, rgba(0,0,0,.98));
  cursor: default !important;
}
.trailerDirectorDomOverlay.preflight * { cursor: default !important; }
.trailerConsentCard {
  width: min(720px, calc(100vw - 40px));
  border: 2px solid rgba(249,115,22,.86);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(15,23,42,.96), rgba(2,6,23,.98));
  box-shadow: 0 24px 80px rgba(0,0,0,.55), 0 0 35px rgba(249,115,22,.25);
  padding: 28px;
  color: #fff7ed;
  text-align: left;
}
.trailerConsentCard h2 {
  margin: 4px 0 10px;
  font-size: 42px;
  color: #f97316;
  letter-spacing: -.04em;
  text-shadow: 0 3px 0 rgba(0,0,0,.5);
}
.trailerConsentCard p {
  color: #fed7aa;
  font-size: 16px;
  line-height: 1.45;
}
.trailerRouteButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.trailerRouteButtons button {
  min-width: 170px;
}
.trailerTiny {
  font-size: 12px !important;
  color: #fdba74 !important;
  margin-bottom: 0;
}
.trailerTopCard {
  position: absolute;
  left: 34px;
  top: 30px;
  width: min(720px, calc(100vw - 68px));
  max-height: 178px;
  padding: 17px 22px 18px;
  border-radius: 22px;
  border: 2px solid rgba(249,115,22,.76);
  background: linear-gradient(140deg, rgba(2,6,23,.82), rgba(15,23,42,.70));
  box-shadow: 0 16px 44px rgba(0,0,0,.44), inset 0 0 22px rgba(249,115,22,.08);
  overflow: hidden;
  animation: trailerCardIn .42s ease both;
}
.trailerTopCard.uiMode {
  background: linear-gradient(140deg, rgba(17,24,39,.88), rgba(67,20,7,.66));
}
.trailerMiniLabel {
  color: #fde68a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.trailerTitle {
  color: #f97316;
  font-size: clamp(30px, 4.2vw, 54px);
  font-weight: 1000;
  letter-spacing: -.055em;
  line-height: .95;
  text-shadow: 0 3px 0 rgba(0,0,0,.65), 0 0 24px rgba(249,115,22,.24);
}
.trailerSubtitle {
  color: #fff7ed;
  font-size: clamp(15px, 2vw, 22px);
  font-weight: 800;
  line-height: 1.14;
  margin-top: 8px;
  max-width: 650px;
}
.trailerTag {
  display: inline-block;
  margin-top: 9px;
  max-width: 100%;
  color: #ffedd5;
  background: rgba(249,115,22,.18);
  border: 1px solid rgba(251,146,60,.45);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trailerRecorder {
  position: absolute;
  right: 34px;
  top: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fee2e2;
  font-weight: 1000;
  letter-spacing: .08em;
  text-shadow: 0 2px 0 #000;
}
.trailerRecDot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 18px #ef4444;
  animation: trailerRecPulse .85s infinite alternate;
}
.trailerProgress {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 22px;
  height: 8px;
  border-radius: 999px;
  background: rgba(15,23,42,.72);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
}
.trailerProgress div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f97316, #fde68a);
  box-shadow: 0 0 14px rgba(249,115,22,.75);
}
.trailerTransition {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(249,115,22,.05), rgba(2,6,23,.74));
  transition: opacity .12s linear;
}
.trailerTransition span {
  transform: rotate(-2deg);
  color: #f97316;
  font-weight: 1000;
  font-size: clamp(26px, 5vw, 76px);
  letter-spacing: -.05em;
  text-shadow: 0 5px 0 #000, 0 0 22px rgba(249,115,22,.35);
  border-top: 5px solid rgba(249,115,22,.7);
  border-bottom: 5px solid rgba(249,115,22,.7);
  padding: 8px 28px;
  background: rgba(2,6,23,.55);
}
.trailerDirectorToast {
  position: fixed;
  left: 50%;
  bottom: 38px;
  transform: translate(-50%, 20px);
  opacity: 0;
  z-index: 10000;
  pointer-events: none;
  background: rgba(2,6,23,.92);
  border: 1px solid rgba(249,115,22,.74);
  color: #ffedd5;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 900;
  box-shadow: 0 14px 34px rgba(0,0,0,.42);
  transition: opacity .18s ease, transform .18s ease;
}
.trailerDirectorToast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
@keyframes trailerCardIn {
  from { transform: translateY(-16px) scale(.985); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes trailerRecPulse {
  from { transform: scale(.85); opacity: .65; }
  to { transform: scale(1.14); opacity: 1; }
}
@media (max-width: 760px) {
  .trailerTopCard { left: 18px; right: 18px; top: 18px; width: auto; }
  .trailerRecorder { right: 22px; top: 24px; }
  .trailerProgress { left: 18px; right: 18px; }
}

/* 14.2.30.4: trailer con guía, cursor falso útil y barra fuera del combate */
.trailerDirectorDomOverlay.active {
  overflow: hidden;
}
.trailerDirectorDomOverlay.active .trailerProgress {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: auto;
  height: 5px;
  border-radius: 0;
  border: 0;
  background: rgba(2,6,23,.84);
  z-index: 4;
}
.trailerDirectorDomOverlay.active .trailerProgress div {
  background: linear-gradient(90deg, #ea580c, #f97316, #fde68a);
  box-shadow: 0 0 18px rgba(249,115,22,.82);
}
.trailerDirectorDomOverlay.active .trailerTopCard {
  top: 24px;
  left: 28px;
  width: min(640px, calc(100vw - 56px));
  max-height: 160px;
  padding: 15px 19px 16px;
  border-radius: 20px;
  border-color: rgba(249,115,22,.78);
  background: linear-gradient(140deg, rgba(2,6,23,.76), rgba(15,23,42,.62));
  backdrop-filter: blur(4px);
}
.trailerDirectorDomOverlay.active .trailerTopCard.uiMode {
  background: linear-gradient(140deg, rgba(17,24,39,.82), rgba(67,20,7,.62));
}
.trailerDirectorDomOverlay.active .trailerTitle {
  font-size: clamp(28px, 3.8vw, 48px);
}
.trailerDirectorDomOverlay.active .trailerSubtitle {
  font-size: clamp(14px, 1.7vw, 20px);
  max-width: 590px;
}
.trailerGuide {
  position: fixed;
  left: 28px;
  bottom: 28px;
  max-width: min(760px, calc(100vw - 56px));
  color: #fff7ed;
  font-size: clamp(15px, 1.7vw, 22px);
  font-weight: 950;
  line-height: 1.12;
  text-shadow: 0 3px 0 rgba(0,0,0,.72), 0 0 18px rgba(249,115,22,.22);
  z-index: 3;
  pointer-events: none;
}
.trailerGuide span {
  display: inline-block;
  padding: 10px 15px;
  border-left: 5px solid #f97316;
  border-radius: 0 15px 15px 0;
  background: linear-gradient(90deg, rgba(2,6,23,.76), rgba(2,6,23,.28));
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
.trailerRecorder {
  position: fixed;
  top: 16px;
  right: 24px;
  z-index: 5;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(2,6,23,.58);
  border: 1px solid rgba(254,226,226,.18);
}
.trailerTransition {
  pointer-events: none;
  background: radial-gradient(circle at 50% 48%, rgba(249,115,22,.04), rgba(2,6,23,.42));
  overflow: hidden;
}
.trailerTransition span {
  color: rgba(255,237,213,.92);
  font-size: clamp(28px, 6vw, 86px);
  opacity: .70;
  border: 0;
  background: transparent;
  text-shadow: 0 5px 0 #000, 0 0 32px rgba(249,115,22,.42);
}
.trailerTransition i,
.trailerTransition b {
  position: absolute;
  width: 38vw;
  height: 160vh;
  top: -30vh;
  transform: rotate(22deg);
  background: linear-gradient(180deg, rgba(249,115,22,.0), rgba(249,115,22,.62), rgba(253,186,116,.0));
  filter: blur(.5px);
}
.trailerTransition i { left: -16vw; animation: trailerWipeOne .55s ease-out both; }
.trailerTransition b { right: -16vw; animation: trailerWipeTwo .55s ease-out both; }
.trailerFakeCursor {
  position: fixed;
  width: 0;
  height: 0;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 5px 0 rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(249,115,22,.35));
  transition: left .10s linear, top .10s linear;
}
.trailerFakeCursor::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  border-left: 17px solid #fff7ed;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  transform: rotate(25deg);
}
.trailerFakeCursor::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 13px;
  width: 9px;
  height: 19px;
  border-radius: 4px;
  background: #f97316;
  transform: rotate(-18deg);
}
.trailerFakeCursor.clicking {
  animation: trailerCursorClick .22s ease both;
}
.trailerFakeCursor.clicking::after {
  box-shadow: 0 0 0 14px rgba(249,115,22,.22), 0 0 28px rgba(249,115,22,.55);
}
.trailerUseHint {
  position: fixed;
  z-index: 6;
  color: #111827;
  background: #fed7aa;
  border: 2px solid #f97316;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 1000;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  pointer-events: none;
}
.trailerGhostBlock {
  position: fixed;
  width: 48px;
  height: 48px;
  z-index: 5;
  pointer-events: none;
  border: 3px solid rgba(249,115,22,.86);
  background:
    linear-gradient(135deg, rgba(249,115,22,.62), rgba(17,24,39,.72)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 4px, transparent 4px 9px);
  box-shadow: 0 0 28px rgba(249,115,22,.38), inset 0 0 18px rgba(0,0,0,.38);
  animation: trailerGhostPlace .7s ease-in-out infinite alternate;
}
.trailerGhostSlash {
  position: fixed;
  width: 120px;
  height: 58px;
  z-index: 5;
  pointer-events: none;
}
.trailerGhostSlash::before,
.trailerGhostSlash::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 26px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #fff7ed, #f97316, transparent);
  box-shadow: 0 0 18px rgba(249,115,22,.72);
}
.trailerGhostSlash::before { transform: rotate(22deg); }
.trailerGhostSlash::after { transform: rotate(-22deg); }
@keyframes trailerCursorClick {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(1px,2px) scale(.88); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes trailerGhostPlace {
  from { transform: translateY(-4px) scale(.96); opacity: .68; }
  to { transform: translateY(4px) scale(1.03); opacity: 1; }
}
@keyframes trailerWipeOne {
  from { transform: translateX(-120%) rotate(22deg); }
  to { transform: translateX(230%) rotate(22deg); }
}
@keyframes trailerWipeTwo {
  from { transform: translateX(120%) rotate(22deg); }
  to { transform: translateX(-230%) rotate(22deg); }
}
@media (max-width: 760px) {
  .trailerDirectorDomOverlay.active .trailerTopCard { left: 16px; right: 16px; top: 18px; width: auto; }
  .trailerGuide { left: 16px; right: 16px; bottom: 16px; max-width: none; }
  .trailerRecorder { right: 16px; top: 12px; }
}

/* 14.2.30.4: trailer v3 con audio interno, texto más seguro y transiciones menos truchas */
.trailerDirectorDomOverlay.active .trailerTopCard {
  width: min(590px, calc(100vw - 56px));
  max-height: 152px;
  padding: 13px 17px 14px;
  background: linear-gradient(140deg, rgba(2,6,23,.68), rgba(15,23,42,.50));
  border-color: rgba(249,115,22,.70);
  box-shadow: 0 12px 38px rgba(0,0,0,.34), inset 0 0 18px rgba(249,115,22,.06);
}
.trailerDirectorDomOverlay.active .trailerTopCard.worldScene {
  border-color: rgba(253,224,71,.86);
  background: linear-gradient(140deg, rgba(2,6,23,.76), rgba(120,53,15,.58));
  box-shadow: 0 18px 52px rgba(0,0,0,.42), 0 0 30px rgba(253,224,71,.18);
}
.trailerDirectorDomOverlay.active .trailerTopCard.finalScene {
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 60px));
  text-align: center;
  background: linear-gradient(150deg, rgba(2,6,23,.82), rgba(67,20,7,.72));
}
.trailerDirectorDomOverlay.active .trailerTopCard.finalScene .trailerTag {
  font-size: clamp(18px, 2.6vw, 30px);
  padding: 9px 18px;
  margin-top: 12px;
  color: #fff7ed;
  border-color: rgba(253,186,116,.75);
  background: rgba(249,115,22,.24);
  white-space: normal;
  word-break: break-word;
}
.trailerScenePill {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #ffedd5;
  background: rgba(2,6,23,.68);
  border: 1px solid rgba(249,115,22,.42);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .07em;
  text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(0,0,0,.30);
}
.trailerScenePill strong {
  color: #fde68a;
}
.trailerGuide {
  max-width: min(680px, calc(100vw - 56px));
  bottom: 24px;
}
.trailerGuide span {
  padding: 9px 14px;
  background: linear-gradient(90deg, rgba(2,6,23,.70), rgba(2,6,23,.20));
}
.trailerDirectorDomOverlay.active .finalScene + .trailerGuide {
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  max-width: min(760px, calc(100vw - 56px));
}
.trailerDirectorDomOverlay.active .finalScene + .trailerGuide span {
  border-left: 0;
  border-radius: 999px;
  border: 1px solid rgba(249,115,22,.54);
}
.trailerTransition {
  display: grid;
  place-items: center;
  gap: 6px;
}
.trailerTransition span {
  max-width: 90vw;
  text-align: center;
  color: rgba(255,237,213,.94);
  font-size: clamp(24px, 5vw, 78px);
  line-height: .9;
  opacity: .82;
  letter-spacing: -.06em;
}
.trailerTransition em {
  color: rgba(253,186,116,.82);
  font-style: normal;
  font-size: clamp(12px, 1.5vw, 20px);
  font-weight: 1000;
  letter-spacing: .20em;
  text-transform: uppercase;
  text-shadow: 0 3px 0 #000;
}
.trailerTransition::before,
.trailerTransition::after {
  content: "";
  position: absolute;
  left: -10vw;
  right: -10vw;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(253,186,116,.70), transparent);
  box-shadow: 0 0 20px rgba(249,115,22,.40);
}
.trailerTransition::before { top: 34%; transform: rotate(-3deg); }
.trailerTransition::after { bottom: 32%; transform: rotate(3deg); }
.trailerEditorSteps {
  position: fixed;
  left: 28px;
  top: 198px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: #ffedd5;
  border: 1px solid rgba(249,115,22,.42);
  border-radius: 999px;
  background: rgba(2,6,23,.66);
  box-shadow: 0 12px 30px rgba(0,0,0,.30);
  pointer-events: none;
}
.trailerEditorSteps b {
  color: #fde68a;
  letter-spacing: .12em;
  font-size: 11px;
}
.trailerEditorSteps span {
  font-size: 13px;
  font-weight: 950;
}
.trailerGhostPlatform {
  position: fixed;
  width: 140px;
  height: 24px;
  z-index: 5;
  pointer-events: none;
  border-radius: 10px;
  border: 3px solid rgba(253,186,116,.82);
  background: linear-gradient(180deg, rgba(251,146,60,.78), rgba(124,45,18,.72));
  box-shadow: 0 0 28px rgba(249,115,22,.30), inset 0 0 12px rgba(255,255,255,.10);
  animation: trailerGhostPlace .7s ease-in-out infinite alternate;
}
.trailerGhostPart {
  position: fixed;
  width: 44px;
  height: 58px;
  z-index: 5;
  pointer-events: none;
  border: 3px solid rgba(96,165,250,.86);
  border-radius: 13px 13px 9px 9px;
  background:
    linear-gradient(180deg, rgba(59,130,246,.82), rgba(30,64,175,.74)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 3px, transparent 3px 7px);
  box-shadow: 0 0 26px rgba(96,165,250,.36), inset 0 0 16px rgba(0,0,0,.26);
  animation: trailerGhostPlace .8s ease-in-out infinite alternate;
}
.trailerUseHint {
  max-width: min(260px, 30vw);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 760px) {
  .trailerScenePill { right: 12px; bottom: 12px; font-size: 10px; padding: 6px 9px; }
  .trailerEditorSteps { left: 16px; top: 172px; max-width: calc(100vw - 32px); }
  .trailerUseHint { display: none; }
  .trailerDirectorDomOverlay.active .trailerTopCard.finalScene { left: 16px; right: 16px; transform: none; width: auto; }
}
.trailerDirectorDomOverlay.active .trailerTopCard.finalScene {
  animation: none;
}

/* 14.2.30.5: trailer v2 mejorado, sin REC visible, sin cursor falso ni pantallas reales de editores */
.trailerDirectorDomOverlay.active.trailerCleanCut .trailerRecorder,
.trailerDirectorDomOverlay.active.trailerCleanCut .trailerTransition,
.trailerDirectorDomOverlay.active.trailerCleanCut .trailerScenePill,
.trailerDirectorDomOverlay.active.trailerCleanCut .trailerFakeCursor,
.trailerDirectorDomOverlay.active.trailerCleanCut .trailerUseHint,
.trailerDirectorDomOverlay.active.trailerCleanCut .trailerEditorSteps,
.trailerDirectorDomOverlay.active.trailerCleanCut .trailerGhostBlock,
.trailerDirectorDomOverlay.active.trailerCleanCut .trailerGhostPlatform,
.trailerDirectorDomOverlay.active.trailerCleanCut .trailerGhostPart,
.trailerDirectorDomOverlay.active.trailerCleanCut .trailerGhostSlash,
.trailerDirectorDomOverlay.active.trailerCleanCut .trailerGuide {
  display: none !important;
}

.trailerDirectorDomOverlay.active.trailerCleanCut .trailerProgress {
  top: 0;
  height: 4px;
  background: rgba(2,6,23,.72);
}

.trailerDirectorDomOverlay.active.trailerCleanCut .trailerTopCard,
.trailerDirectorDomOverlay.active.trailerCleanCut .trailerTopCard.finalScene {
  position: fixed;
  left: 12px;
  top: 56px;
  right: auto;
  transform: none;
  width: min(500px, calc(100vw - 24px));
  max-height: none;
  padding: 12px 15px 13px;
  text-align: left;
  border-radius: 17px;
  border: 2px solid rgba(253,186,116,.70);
  background: linear-gradient(140deg, rgba(2,6,23,.72), rgba(15,23,42,.54));
  box-shadow: 0 12px 34px rgba(0,0,0,.32), inset 0 0 16px rgba(249,115,22,.05);
  backdrop-filter: blur(3px);
  animation: trailerCardIn .22s ease both;
}

.trailerDirectorDomOverlay.active.trailerCleanCut .trailerTopCard.worldScene {
  border-color: rgba(253,224,71,.85);
  background: linear-gradient(140deg, rgba(2,6,23,.76), rgba(120,53,15,.54));
}

.trailerDirectorDomOverlay.active.trailerCleanCut .trailerMiniLabel {
  font-size: 10px;
  letter-spacing: .16em;
  margin-bottom: 3px;
  color: #fed7aa;
}

.trailerDirectorDomOverlay.active.trailerCleanCut .trailerTitle {
  font-size: clamp(24px, 3.15vw, 39px);
  line-height: .95;
  color: #fb923c;
}

.trailerDirectorDomOverlay.active.trailerCleanCut .trailerSubtitle {
  font-size: clamp(13px, 1.45vw, 17px);
  line-height: 1.12;
  margin-top: 6px;
  max-width: 460px;
}

.trailerDirectorDomOverlay.active.trailerCleanCut .trailerGuideLine {
  margin-top: 8px;
  padding-left: 9px;
  border-left: 4px solid #f97316;
  color: #ffedd5;
  font-size: clamp(12px, 1.25vw, 15px);
  line-height: 1.14;
  font-weight: 850;
  text-shadow: 0 2px 0 rgba(0,0,0,.62);
}

.trailerDirectorDomOverlay.active.trailerCleanCut .trailerTag,
.trailerDirectorDomOverlay.active.trailerCleanCut .trailerTopCard.finalScene .trailerTag {
  margin-top: 8px;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  font-size: clamp(12px, 1.25vw, 15px);
  padding: 5px 10px;
  color: #fff7ed;
}

.trailerMockPanel {
  position: fixed;
  right: 7vw;
  top: 18vh;
  width: min(520px, 43vw);
  min-height: 330px;
  z-index: 4;
  pointer-events: none;
  border: 2px solid rgba(253,186,116,.55);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(2,6,23,.82), rgba(15,23,42,.62));
  box-shadow: 0 24px 70px rgba(0,0,0,.42), inset 0 0 28px rgba(249,115,22,.06);
  padding: 18px;
  color: #ffedd5;
  overflow: hidden;
}

.mockHeader {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fde68a;
  margin-bottom: 14px;
}
.mockHeader span { color: #fdba74; letter-spacing: .04em; }

.mockStageGrid {
  position: relative;
  height: 230px;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(circle at 68% 30%, rgba(251,146,60,.26), transparent 26%),
    linear-gradient(180deg, rgba(30,41,59,.86), rgba(15,23,42,.88));
  background-size: 32px 32px, 32px 32px, auto, auto;
  border: 1px solid rgba(253,186,116,.28);
}
.mockPlatform,
.mockBlock,
.mockLava,
.mockWind { position: absolute; display: block; }
.mockPlatform {
  height: 24px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fb923c, #9a3412);
  border: 2px solid rgba(255,247,237,.46);
  box-shadow: 0 7px 0 rgba(0,0,0,.25);
}
.mockPlatform.small { height: 18px; opacity: .86; }
.mockBlock {
  width: 46px;
  height: 46px;
  border-radius: 9px;
  background: repeating-linear-gradient(45deg, #fde68a 0 8px, #f97316 8px 16px);
  border: 3px solid #ffedd5;
  box-shadow: 0 0 24px rgba(249,115,22,.45);
}
.mockLava {
  left: 0; right: 0; bottom: 0; height: 38px;
  background: linear-gradient(180deg, rgba(251,146,60,.30), rgba(220,38,38,.90));
  box-shadow: 0 -8px 26px rgba(249,115,22,.42);
}
.mockWind {
  right: 10%; top: 24%; width: 92px; height: 92px; border-radius: 999px;
  border: 3px dashed rgba(186,230,253,.80);
  box-shadow: 0 0 30px rgba(56,189,248,.24);
}
.mockToolRow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.mockToolRow span,
.mockCards span,
.mockParts span {
  border-radius: 999px;
  padding: 7px 9px;
  text-align: center;
  font-weight: 950;
  background: rgba(249,115,22,.18);
  border: 1px solid rgba(253,186,116,.34);
}

.mockCharacterBuild {
  display: grid;
  grid-template-columns: 118px 1fr 120px;
  gap: 16px;
  min-height: 250px;
  align-items: center;
}
.mockParts,
.mockStats { display: grid; gap: 10px; }
.mockFighter {
  position: relative;
  width: 148px;
  height: 220px;
  margin: 0 auto;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 48%, rgba(96,165,250,.22), transparent 42%);
}
.mockFighter i,
.mockFighter em { position: absolute; display: block; }
.mockFighter .head { left: 52px; top: 22px; width: 44px; height: 44px; border-radius: 9px; background: #f3c78a; border: 3px solid #0f172a; }
.mockFighter .body { left: 43px; top: 68px; width: 62px; height: 70px; border-radius: 12px; background: linear-gradient(180deg, #38bdf8, #1d4ed8); border: 3px solid #0f172a; }
.mockFighter .arm { top: 80px; width: 24px; height: 72px; border-radius: 12px; background: #f97316; border: 3px solid #0f172a; }
.mockFighter .arm.a { left: 19px; transform: rotate(18deg); }
.mockFighter .arm.b { right: 19px; transform: rotate(-26deg); }
.mockFighter .leg { top: 138px; width: 25px; height: 62px; border-radius: 10px; background: #1e3a8a; border: 3px solid #0f172a; }
.mockFighter .leg.a { left: 48px; transform: rotate(5deg); }
.mockFighter .leg.b { right: 48px; transform: rotate(-5deg); }
.mockFighter em { right: 5px; top: 92px; width: 76px; height: 10px; border-radius: 999px; background: linear-gradient(90deg, transparent, #fff7ed, #f97316); transform: rotate(-18deg); box-shadow: 0 0 16px rgba(249,115,22,.65); }
.mockStats span { display: block; height: 16px; border-radius: 999px; background: linear-gradient(90deg, #fb923c, #fde68a); box-shadow: 0 0 18px rgba(249,115,22,.22); }

.homeMock { min-height: 230px; width: min(430px, 36vw); }
.mockLogo { font-size: clamp(44px, 7vw, 86px); font-weight: 1000; color: #f97316; text-shadow: 0 5px 0 #000; letter-spacing: -.08em; }
.mockCards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }

@media (max-width: 900px) {
  .trailerMockPanel { display: none; }
  .trailerDirectorDomOverlay.active.trailerCleanCut .trailerTopCard,
  .trailerDirectorDomOverlay.active.trailerCleanCut .trailerTopCard.finalScene {
    top: 52px;
    left: 10px;
    width: min(470px, calc(100vw - 20px));
  }
}

/* 14.2.30.6: trailer desde cero estilo v2 mejorado: solo pelea, texto opaco arriba izquierda, sin UI falsa */
body.trailerDirectorActive #gameCanvas {
  outline: none !important;
  box-shadow: none !important;
}
.trailerDirectorDomOverlay.active.trailerBattleCut .trailerProgress,
.trailerDirectorDomOverlay.active.trailerBattleCut .trailerMockPanel,
.trailerDirectorDomOverlay.active.trailerBattleCut .homeMock,
.trailerDirectorDomOverlay.active.trailerBattleCut .mapMock,
.trailerDirectorDomOverlay.active.trailerBattleCut .characterMock {
  display: none !important;
}
.trailerDirectorDomOverlay.active.trailerBattleCut .trailerTopCard,
.trailerDirectorDomOverlay.active.trailerBattleCut .trailerTopCard.finalScene,
.trailerDirectorDomOverlay.active.trailerBattleCut .trailerTopCard.worldScene {
  left: 8px !important;
  top: 8px !important;
  right: auto !important;
  transform: none !important;
  width: min(560px, calc(100vw - 16px)) !important;
  padding: 14px 17px 15px !important;
  border-radius: 0 20px 20px 0 !important;
  border: 2px solid rgba(253,186,116,.92) !important;
  border-left: 0 !important;
  background: linear-gradient(140deg, rgba(2,6,23,.96), rgba(15,23,42,.94)) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.52), inset 0 0 20px rgba(249,115,22,.10) !important;
  backdrop-filter: none !important;
  text-align: left !important;
  z-index: 20 !important;
}
.trailerDirectorDomOverlay.active.trailerBattleCut .trailerTopCard.worldScene {
  border-color: rgba(253,224,71,.98) !important;
  background: linear-gradient(140deg, rgba(24,10,3,.97), rgba(69,26,3,.94)) !important;
}
.trailerDirectorDomOverlay.active.trailerBattleCut .trailerMiniLabel {
  color: #fde68a !important;
  font-size: 10px !important;
  letter-spacing: .20em !important;
  margin-bottom: 4px !important;
}
.trailerDirectorDomOverlay.active.trailerBattleCut .trailerTitle {
  color: #fb923c !important;
  font-size: clamp(28px, 3.8vw, 46px) !important;
  line-height: .92 !important;
  text-shadow: 0 4px 0 rgba(0,0,0,.78), 0 0 22px rgba(249,115,22,.28) !important;
}
.trailerDirectorDomOverlay.active.trailerBattleCut .trailerSubtitle {
  color: #fff7ed !important;
  font-size: clamp(14px, 1.7vw, 19px) !important;
  line-height: 1.12 !important;
  margin-top: 8px !important;
  max-width: 520px !important;
}
.trailerDirectorDomOverlay.active.trailerBattleCut .trailerGuideLine {
  color: #ffedd5 !important;
  margin-top: 9px !important;
  padding-left: 10px !important;
  border-left: 4px solid #f97316 !important;
  font-size: clamp(12px, 1.28vw, 15px) !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
}
.trailerDirectorDomOverlay.active.trailerBattleCut .trailerTag,
.trailerDirectorDomOverlay.active.trailerBattleCut .trailerTopCard.finalScene .trailerTag {
  display: inline-block !important;
  max-width: 100% !important;
  margin-top: 9px !important;
  color: #fff7ed !important;
  background: rgba(249,115,22,.28) !important;
  border: 1px solid rgba(253,186,116,.70) !important;
  border-radius: 999px !important;
  padding: 6px 11px !important;
  font-size: clamp(12px, 1.3vw, 16px) !important;
  white-space: normal !important;
  word-break: break-word !important;
}
@media (max-width: 760px), (max-height: 620px) {
  .trailerDirectorDomOverlay.active.trailerBattleCut .trailerTopCard,
  .trailerDirectorDomOverlay.active.trailerBattleCut .trailerTopCard.finalScene,
  .trailerDirectorDomOverlay.active.trailerBattleCut .trailerTopCard.worldScene {
    width: min(470px, calc(100vw - 12px)) !important;
    padding: 10px 12px 11px !important;
  }
  .trailerDirectorDomOverlay.active.trailerBattleCut .trailerGuideLine { display: none !important; }
}

/* Update 14.3.7.16 — Map creator grid mode */
.mapEditorPreview.gridEditorMode {
  box-shadow: inset 0 0 0 2px rgba(34,197,94,.18), inset 0 0 44px rgba(14,165,233,.18), 0 12px 34px rgba(2,6,23,.32);
}
.mapGridOverlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.mapGridOverlay.empty {
  display: grid;
  place-items: center;
  color: rgba(226,232,240,.72);
  font-weight: 900;
}
.mapGridCell {
  position: absolute;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px dashed rgba(125,211,252,.32);
  background: rgba(14,165,233,.10);
  color: rgba(240,249,255,.92);
  font-size: .7rem;
  font-weight: 900;
  text-shadow: 0 2px 5px rgba(0,0,0,.85);
  overflow: hidden;
}
.mapGridCell.role-corruptible.solidCell {
  border-color: rgba(34,197,94,.58);
  background: linear-gradient(180deg, rgba(34,197,94,.26), rgba(21,128,61,.10));
}
.mapGridCell.role-corruptible.passCell {
  border-color: rgba(56,189,248,.58);
  background: linear-gradient(180deg, rgba(14,165,233,.10), rgba(56,189,248,.25));
}
.mapGridCell.role-blocked,
.mapGridCell.role-occupied {
  border-color: rgba(248,113,113,.55);
  background: repeating-linear-gradient(45deg, rgba(127,29,29,.22) 0 6px, rgba(248,113,113,.10) 6px 12px);
  color: rgba(254,226,226,.90);
}
.mapGridCell.rotatedCell {
  outline: 2px solid rgba(250,204,21,.48);
  outline-offset: -3px;
}
.mapGridCell b {
  position: relative;
  z-index: 1;
  font-size: .9rem;
}
.mapGridCell em {
  position: absolute;
  right: 3px;
  bottom: 1px;
  font-size: .52rem;
  font-style: normal;
  opacity: .75;
}
.mapGridLegend {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  max-width: min(92%, 760px);
  padding: 7px 9px;
  border-radius: 14px;
  background: rgba(2,6,23,.78);
  border: 1px solid rgba(125,211,252,.24);
  box-shadow: 0 8px 20px rgba(2,6,23,.34);
  color: #e0f2fe;
  font-size: .72rem;
}
.mapGridLegend span,
.gridModeStats span {
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(15,23,42,.62);
  border: 1px solid rgba(148,163,184,.18);
}
.gridCreateToolbar {
  border-color: rgba(34,197,94,.32);
  background: linear-gradient(180deg, rgba(34,197,94,.14), rgba(15,23,42,.52));
}
.gridModeStats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: .78rem;
  color: #d1fae5;
}
.mapGridWorkspace .mapEditorPreview .previewPlatform {
  box-shadow: 0 10px 22px rgba(2,6,23,.40), 0 0 0 2px rgba(255,255,255,.08);
}

/* Update 14.3.7.17 — grid QA: shape-aware cells for hex/diamond/triangle. */
.mapGridCell.shapeAwareCell {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 12px rgba(34,197,94,.12);
}
.mapGridCell.approxCell.shape-diamond,
.mapGridCell.approxCell.shape-hex,
.mapGridCell.approxCell.shape-triangle,
.mapGridCell.approxCell.shape-custom {
  border-style: dotted;
  background-image: repeating-linear-gradient(135deg, rgba(250,204,21,.14) 0 5px, transparent 5px 10px);
}
.mapGridCell.shape-diamond b { font-size: 1rem; }
.mapGridCell.shape-hex b { font-size: .95rem; }
.mapGridCell.obliqueCell::after {
  content: '≈';
  position: absolute;
  left: 3px;
  top: 1px;
  font-size: .66rem;
  color: rgba(250,204,21,.95);
}
.mapShapeGridNote {
  grid-column: 1 / -1;
  margin: 2px 0 4px;
  padding: 6px 8px;
  border: 1px solid rgba(125,211,252,.16);
  border-radius: 10px;
  background: rgba(15,23,42,.36);
}

/* Update 14.3.7.26 — grid contract: escenario completo tenue + celdas especiales fuertes */
.mapEditorPreview.gridEditorMode {
  overflow: hidden;
  background-size: cover;
}
.mapGridOverlay.stageWideGrid {
  z-index: 4;
  pointer-events: none;
}
.mapGridBaseCell {
  position: absolute;
  box-sizing: border-box;
  border-right: 1px solid rgba(125,211,252,.105);
  border-bottom: 1px solid rgba(125,211,252,.105);
  background: rgba(15,23,42,.018);
}
.mapGridCell {
  z-index: 2;
  opacity: .88;
  border-width: 1.5px;
  backdrop-filter: blur(1px);
}
.mapGridCell b {
  font-size: .78rem;
  opacity: .95;
}
.mapGridCell em { display: none !important; }
.mapGridCell.role-corruptible.solidCell {
  border-color: rgba(34,197,94,.72);
  background: linear-gradient(180deg, rgba(34,197,94,.20), rgba(21,128,61,.08));
}
.mapGridCell.role-corruptible.passCell {
  border-color: rgba(56,189,248,.70);
  background: linear-gradient(180deg, rgba(14,165,233,.08), rgba(56,189,248,.24));
}
.mapGridMiniLegend {
  position: absolute;
  right: 10px;
  bottom: 9px;
  z-index: 6;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(2,6,23,.58);
  border: 1px solid rgba(125,211,252,.20);
  color: rgba(224,242,254,.78);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .02em;
}
.mapGridNoSurface {
  position: absolute;
  left: 10px;
  bottom: 9px;
  z-index: 6;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(2,6,23,.52);
  color: rgba(226,232,240,.72);
  font-size: .68rem;
  font-weight: 800;
}
.mapGridLegend { display: none !important; }
.mapGridWorkspace .gridCreateToolbar p.tiny { display: none; }

/* Update 14.3.7.27 — grid raster: no cortar grilla al alejar mucho */
.mapGridBaseRaster {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .34;
  filter: blur(var(--grid-blur, 0px));
  background-position: var(--grid-x, 0%) var(--grid-y, 0%);
  background-size: var(--grid-w, 5%) var(--grid-h, 5%);
  background-image:
    linear-gradient(to right, rgba(125,211,252,.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(125,211,252,.18) 1px, transparent 1px);
}
.mapEditorPreview.gridEditorMode .previewPlatform {
  will-change: transform, left, top, width, height;
}
.mapGridCell {
  z-index: 2;
}


/* 14.3.7.30 — ladder materials and square/circle editor creation */
.mapEditorPreview .previewPlatform.ladder.material-wood{background:linear-gradient(90deg,#7c2d12 0 11%,transparent 11% 42%,#facc15 42% 58%,transparent 58% 89%,#7c2d12 89% 100%),repeating-linear-gradient(0deg,transparent 0 18px,#f59e0b 18px 24px,transparent 24px 38px),rgba(69,26,3,.58)!important;border-color:rgba(251,191,36,.78)!important;}
.mapEditorPreview .previewPlatform.ladder.material-steel{background:linear-gradient(90deg,#334155 0 11%,transparent 11% 42%,#cbd5e1 42% 58%,transparent 58% 89%,#334155 89% 100%),repeating-linear-gradient(0deg,transparent 0 18px,#94a3b8 18px 24px,transparent 24px 38px),rgba(15,23,42,.58)!important;border-color:rgba(203,213,225,.72)!important;}
.mapEditorPreview .previewPlatform.ladder.material-ice,.mapEditorPreview .previewPlatform.ladder.material-slow{background:linear-gradient(90deg,#0891b2 0 11%,transparent 11% 42%,#e0f2fe 42% 58%,transparent 58% 89%,#0891b2 89% 100%),repeating-linear-gradient(0deg,transparent 0 18px,#67e8f9 18px 24px,transparent 24px 38px),rgba(8,145,178,.28)!important;border-color:rgba(103,232,249,.78)!important;}
.mapEditorPreview .previewPlatform.ladder.material-lava{background:linear-gradient(90deg,#7f1d1d 0 11%,transparent 11% 42%,#fed7aa 42% 58%,transparent 58% 89%,#7f1d1d 89% 100%),repeating-linear-gradient(0deg,transparent 0 18px,#fb923c 18px 24px,transparent 24px 38px),rgba(127,29,29,.42)!important;border-color:rgba(251,146,60,.84)!important;}
.mapEditorPreview .previewPlatform.shape-ellipse{border-radius:50%!important;}
.mapEditorPreview .previewPlatform.shape-rect{border-radius:3px!important;}


/* 14.3.7.30 — La cuadrícula del editor es una capa del visor, no pseudo-elementos del mapa. */
.mapEditorPreview.gridEditorMode::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:.30;
  background-position:var(--editor-grid-x,0%) var(--editor-grid-y,0%);
  background-size:var(--editor-grid-w,5%) var(--editor-grid-h,5%);
  background-image:
    linear-gradient(to right, rgba(125,211,252,.20) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(125,211,252,.20) 1px, transparent 1px);
  filter:blur(var(--editor-grid-blur,0px));
}
.mapGridOverlay,.mapGridBaseRaster,.mapGridCell,.mapGridMiniLegend{display:none!important;}
.mapEditorPreview.gridEditorMode .previewPlatform{z-index:2;}


/* 14.3.7.31 — Escaleras legibles en preview y material evidente. */
.mapEditorPreview .previewPlatform.ladder{overflow:hidden!important;min-width:8px;box-shadow:inset 0 0 0 2px rgba(2,6,23,.35),0 0 22px rgba(15,23,42,.28)!important;}
.mapEditorPreview .previewPlatform.ladder::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,rgba(2,6,23,.42) 0 8%,transparent 8% 40%,rgba(255,255,255,.20) 48% 52%,transparent 60% 92%,rgba(2,6,23,.42) 92% 100%),repeating-linear-gradient(0deg,transparent 0 16px,rgba(255,255,255,.62) 16px 22px,transparent 22px 36px)!important;mix-blend-mode:screen;opacity:.82;}
.mapEditorPreview .previewPlatform.ladder::after{left:0!important;right:0!important;top:0!important;bottom:0!important;background:repeating-linear-gradient(0deg,transparent 0 16px,rgba(2,6,23,.38) 16px 18px,transparent 18px 34px)!important;opacity:.70;}
.mapEditorPreview .previewPlatform.ladder.material-grass{background:linear-gradient(90deg,#14532d 0 13%,transparent 13% 42%,#bbf7d0 42% 58%,transparent 58% 87%,#14532d 87% 100%),repeating-linear-gradient(0deg,transparent 0 16px,#22c55e 16px 23px,transparent 23px 36px),linear-gradient(180deg,#22c55e,#14532d)!important;border-color:rgba(134,239,172,.90)!important;}
.mapEditorPreview .previewPlatform.ladder.material-dirt{background:linear-gradient(90deg,#431407 0 13%,transparent 13% 42%,#d97706 42% 58%,transparent 58% 87%,#431407 87% 100%),repeating-linear-gradient(0deg,transparent 0 16px,#92400e 16px 23px,transparent 23px 36px),#7c2d12!important;border-color:rgba(217,119,6,.88)!important;}
.mapEditorPreview .previewPlatform.ladder.material-sand{background:linear-gradient(90deg,#b45309 0 13%,transparent 13% 42%,#fef3c7 42% 58%,transparent 58% 87%,#b45309 87% 100%),repeating-linear-gradient(0deg,transparent 0 16px,#fde68a 16px 23px,transparent 23px 36px),#fbbf24!important;border-color:rgba(253,230,138,.90)!important;}
.mapEditorPreview .previewPlatform.ladder.material-marble{background:linear-gradient(90deg,#94a3b8 0 13%,transparent 13% 42%,#ffffff 42% 58%,transparent 58% 87%,#94a3b8 87% 100%),repeating-linear-gradient(0deg,transparent 0 16px,#e5e7eb 16px 23px,transparent 23px 36px),#cbd5e1!important;border-color:rgba(248,250,252,.92)!important;}
.mapEditorPreview .previewPlatform.ladder.material-construction{background:linear-gradient(90deg,#78350f 0 13%,transparent 13% 42%,#facc15 42% 58%,transparent 58% 87%,#78350f 87% 100%),repeating-linear-gradient(0deg,transparent 0 16px,#f59e0b 16px 23px,transparent 23px 36px),repeating-linear-gradient(45deg,#facc15 0 12px,#111827 12px 20px)!important;border-color:rgba(250,204,21,.92)!important;}
.mapEditorPreview .previewPlatform.ladder.material-void,.mapEditorPreview .previewPlatform.ladder.material-corrupt{background:linear-gradient(90deg,#312e81 0 13%,transparent 13% 42%,#22d3ee 42% 58%,transparent 58% 87%,#312e81 87% 100%),repeating-linear-gradient(0deg,transparent 0 16px,#a78bfa 16px 23px,transparent 23px 36px),#020617!important;border-color:rgba(167,139,250,.90)!important;}
.mapEditorPreview .previewPlatform.ladder.material-lava{box-shadow:inset 0 0 0 2px rgba(127,29,29,.55),0 0 26px rgba(249,115,22,.42)!important;}

/* 14.3.9.36.2 — Laboratorio Odiseo de balance temporal */
.odysseyBalanceLab{grid-column:1/-1;border-color:rgba(34,197,94,.34);background:linear-gradient(160deg,rgba(4,24,33,.86),rgba(15,23,42,.82));}
.odysseyLabHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.odysseyLabHeader h3{margin:0 0 5px}.odysseyLabHeader p{margin:0;color:#bfdbfe}.odysseyLabSelectors{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:10px 0 12px}.odysseyLabSelectors label{display:grid;gap:5px;font-weight:900;color:#e0f2fe}.odysseyLabSelectors select{width:100%;min-width:0}.odysseyLabActions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}.odysseyLabPanels{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:12px}.odysseyLabCharacterPanel{background:rgba(2,6,23,.38);border-color:rgba(250,204,21,.24)}.odysseyLabCharacterPanel h3{margin:0 0 10px}.odysseyLabCharacterPanel details{border:1px solid rgba(148,163,184,.18);border-radius:12px;padding:8px;margin:8px 0;background:rgba(15,23,42,.42)}.odysseyLabCharacterPanel summary{cursor:pointer;font-weight:900;color:#f8fafc}.odysseyLabFieldGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:8px;margin-top:8px}.odysseyLabField{display:grid;gap:4px;background:rgba(2,6,23,.45);border:1px solid rgba(148,163,184,.16);border-radius:10px;padding:8px}.odysseyLabField span{font-size:12px;color:#e0f2fe;font-weight:900}.odysseyLabField small{font-size:10px;color:#93c5fd;line-height:1.25}.odysseyLabField input{width:100%;min-width:0;padding:8px 9px;border-radius:8px;border:1px solid rgba(96,165,250,.28);background:#020617;color:#fef3c7;font-weight:900}.odysseyLabAttack{margin:8px 0}.odysseyLabAttack summary{display:flex;justify-content:space-between;gap:8px}.odysseyLabAttack summary span{color:#fde047;font-size:12px}.odysseyLabFieldGrid.unique{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.compact{margin:4px 0}.odysseyLabOpenButton{box-shadow:0 0 0 1px rgba(34,197,94,.28),0 10px 24px rgba(16,185,129,.15)}
@media (max-width:900px){.odysseyLabPanels{grid-template-columns:1fr}.odysseyLabHeader{flex-direction:column}.odysseyLabSelectors{grid-template-columns:1fr}}

/* 14.3.9.36.2.1 — Odiseo Lab responsive/manual/readable pass */
#screenCharacterAuthoring{padding:clamp(10px,1.4vw,22px);}
.odysseyShell.odysseyLabMode{display:grid;grid-template-columns:1fr;gap:14px;max-width:min(1520px,calc(100vw - 28px));width:100%;margin:0 auto;}
.odysseyTopbarLab{position:sticky;top:8px;z-index:5;backdrop-filter:blur(10px);}
.odysseyBalanceLab{grid-column:1/-1;width:100%;max-width:none;border-color:rgba(34,197,94,.45);background:linear-gradient(150deg,rgba(3,25,29,.94),rgba(9,20,42,.88));}
.odysseyLabHeader{display:grid;grid-template-columns:minmax(260px,1fr) auto;align-items:start;gap:14px;margin-bottom:14px;}
.odysseyLabHeader h3{font-size:clamp(22px,2.1vw,34px);line-height:1.05;}
.odysseyLabHeader p{font-size:clamp(14px,1.1vw,17px);max-width:920px;}
.odysseyLabHeaderActions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.odysseyLabSelectors{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:12px;margin:12px 0 14px;}
.odysseyLabSelectors label{display:grid;gap:6px;font-weight:900;color:#e0f2fe;}
.odysseyLabSelectors select{width:100%;min-width:0;min-height:42px;font-size:15px;}
.odysseyLabActions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:10px 0 16px;}
.odysseyLabActions button{min-height:42px;}
.odysseyLabActions button:disabled{opacity:.45;filter:grayscale(.65);cursor:not-allowed;}
.odysseyLabPanels{display:grid;grid-template-columns:repeat(2,minmax(340px,1fr));gap:14px;align-items:start;}
.odysseyLabCharacterPanel{max-height:none;overflow:visible;background:linear-gradient(180deg,rgba(2,6,23,.60),rgba(2,20,24,.52));border-color:rgba(250,204,21,.28);}
.odysseyLabPanelTitle{display:flex;align-items:start;justify-content:space-between;gap:10px;margin-bottom:8px;}
.odysseyLabPanelTitle h3{margin:0;font-size:clamp(18px,1.35vw,24px);}
.odysseyLabCharacterPanel details{border:1px solid rgba(148,163,184,.18);border-radius:14px;padding:10px;margin:9px 0;background:rgba(15,23,42,.46);}
.odysseyLabCharacterPanel summary{cursor:pointer;font-weight:900;color:#f8fafc;font-size:15px;}
.odysseyLabFieldGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:9px;margin-top:9px;}
.odysseyLabFieldGrid.bodyStats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.odysseyLabField{display:grid;gap:5px;background:rgba(2,6,23,.50);border:1px solid rgba(96,165,250,.20);border-radius:12px;padding:9px;}
.odysseyLabField span{font-size:12px;color:#e0f2fe;font-weight:900;line-height:1.15;}
.odysseyLabField small{font-size:10.5px;color:#93c5fd;line-height:1.25;}
.odysseyLabField input{width:100%;min-width:0;padding:9px 10px;border-radius:9px;border:1px solid rgba(96,165,250,.32);background:#020617;color:#fef3c7;font-weight:900;font-size:14px;}
.odysseyLabAttack{margin:9px 0;border-color:rgba(96,165,250,.20)!important;}
.odysseyLabAttack summary{display:flex;justify-content:space-between;gap:10px;align-items:center;}
.odysseyLabAttack summary span{color:#fde047;font-size:12px;text-align:right;}
.odysseyLabAttackGroups{display:grid;gap:10px;margin-top:10px;}
.odysseyLabStatGroup{border:1px solid rgba(34,197,94,.16);background:rgba(2,6,23,.26);border-radius:12px;padding:9px;}
.odysseyLabStatGroup h5{margin:0 0 7px;color:#bbf7d0;font-size:13px;letter-spacing:.2px;}
.odysseyLabManual{border-color:rgba(250,204,21,.30);background:linear-gradient(150deg,rgba(30,41,59,.70),rgba(2,6,23,.60));}
.odysseyLabManual p{color:#dbeafe;margin:0 0 10px;}
.odysseyManualGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:9px;}
.odysseyManualGrid article{display:grid;gap:4px;border:1px solid rgba(148,163,184,.18);background:rgba(2,6,23,.38);border-radius:12px;padding:10px;}
.odysseyManualGrid b{color:#fde047;}
.odysseyManualGrid span{color:#c7d2fe;font-size:13px;line-height:1.25;}
@media (min-width:1500px){.odysseyLabPanels{grid-template-columns:repeat(2,minmax(520px,1fr));}.odysseyLabFieldGrid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}}
@media (max-width:1100px){.odysseyLabSelectors{grid-template-columns:repeat(2,minmax(180px,1fr));}.odysseyLabPanels{grid-template-columns:1fr}.odysseyLabHeader{grid-template-columns:1fr}.odysseyLabHeaderActions{justify-content:flex-start}.odysseyTopbarLab{position:relative;top:auto}}
@media (max-width:640px){.odysseyShell.odysseyLabMode{max-width:calc(100vw - 14px);}.odysseyLabSelectors{grid-template-columns:1fr}.odysseyLabActions{display:grid;grid-template-columns:1fr}.odysseyLabPanelTitle{display:grid}.odysseyLabFieldGrid,.odysseyLabFieldGrid.bodyStats{grid-template-columns:1fr}.odysseyManualGrid{grid-template-columns:1fr}}

/* 14.3.9.36.2 — Motor Odiseo inicial: menú útil, responsive y no todo abierto */
.odysseyHomeShell{grid-template-columns:1fr;gap:14px;max-width:min(1540px,calc(100vw - 28px));width:100%;}
.odysseyHomeHero{display:grid;grid-template-columns:minmax(320px,1fr) auto;align-items:center;background:radial-gradient(circle at 8% 0%,rgba(34,197,94,.16),transparent 36%),linear-gradient(135deg,rgba(15,23,42,.95),rgba(2,12,25,.92));border-color:rgba(34,197,94,.28);}
.odysseyKicker{margin:0 0 6px!important;color:#86efac!important;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;}
.odysseyHomeHero h2{font-size:clamp(28px,3vw,46px);line-height:1;margin:0 0 7px;}
.odysseyHomeHero p:not(.odysseyKicker){font-size:clamp(14px,1.1vw,18px);max-width:980px;}
.odysseyHeroActions{display:grid;grid-template-columns:1fr;gap:9px;min-width:190px;}
.odysseyPrimaryAction{font-size:16px;min-height:52px;box-shadow:0 16px 36px rgba(16,185,129,.18),inset 0 0 0 1px rgba(255,255,255,.12);}
.odysseyHomeMain{display:grid;grid-template-columns:minmax(280px,1.35fr) repeat(3,minmax(220px,1fr));gap:12px;}
.odysseyHomeCard{position:relative;overflow:hidden;border:1px solid rgba(96,165,250,.18);border-radius:18px;padding:15px;background:linear-gradient(180deg,rgba(15,23,42,.82),rgba(2,8,23,.72));box-shadow:0 16px 32px rgba(0,0,0,.18);display:grid;gap:8px;align-content:start;}
.odysseyHomeCardMain{border-color:rgba(34,197,94,.38);background:radial-gradient(circle at 16% 10%,rgba(34,197,94,.22),transparent 38%),linear-gradient(180deg,rgba(6,35,42,.90),rgba(2,8,23,.76));}
.odysseyCardIcon{font-size:24px;line-height:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));}
.odysseyHomeCard h3{margin:0;color:#f8fafc;font-size:clamp(17px,1.25vw,22px);}
.odysseyHomeCard p{margin:0;color:#bfdbfe;line-height:1.32;}
.odysseyHomeCard button{justify-self:start;margin-top:4px;}
.odysseyMiniActions{display:flex;gap:7px;flex-wrap:wrap;margin-top:4px;}
.odysseyMiniActions button{min-height:36px;}
.odysseyHomeStrip{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:10px;}
.odysseyHomeStrip article{border:1px solid rgba(148,163,184,.16);border-radius:14px;padding:10px 12px;background:rgba(2,6,23,.46);display:grid;gap:2px;}
.odysseyHomeStrip b{color:#fde047;font-size:clamp(16px,1.35vw,22px);}
.odysseyHomeStrip span{color:#93c5fd;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
.odysseyHomeManual,.odysseyHomeSection{grid-column:1/-1;background:linear-gradient(150deg,rgba(15,23,42,.74),rgba(2,8,23,.62));}
.odysseyHomeManual summary,.odysseyHomeSection summary{cursor:pointer;font-weight:1000;color:#f8fafc;font-size:clamp(16px,1.25vw,22px);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.odysseyHomeManual summary::-webkit-details-marker,.odysseyHomeSection summary::-webkit-details-marker{display:none;}
.odysseyHomeManual summary::after,.odysseyHomeSection summary::after{content:"abrir";font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#93c5fd;border:1px solid rgba(147,197,253,.25);border-radius:999px;padding:5px 8px;background:rgba(2,6,23,.32);}
.odysseyHomeManual[open] summary::after,.odysseyHomeSection[open] summary::after{content:"cerrar";color:#fde68a;border-color:rgba(250,204,21,.35);}
.odysseyHomeManualGrid{margin-top:12px;}
.odysseyHomeSectionBody{margin-top:12px;}
.odysseyActionGrid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-top:10px;}
.odysseyHomeTwoCols{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:12px;margin-top:12px;}
.odysseyHomeTwoCols section{border:1px solid rgba(148,163,184,.14);border-radius:14px;padding:12px;background:rgba(2,6,23,.30);}
.odysseyAuditGrid{margin-top:12px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.odysseyAuditGrid .odysseyCard{background:rgba(2,6,23,.40);border:1px solid rgba(148,163,184,.16);border-radius:14px;padding:10px;}
@media (max-width:1180px){.odysseyHomeMain{grid-template-columns:repeat(2,minmax(240px,1fr));}.odysseyHomeHero{grid-template-columns:1fr}.odysseyHeroActions{display:flex;flex-wrap:wrap;min-width:0}.odysseyHeroActions button{flex:1 1 170px}.odysseyHomeTwoCols{grid-template-columns:1fr}}
@media (max-width:720px){.odysseyHomeShell{max-width:calc(100vw - 14px);}.odysseyHomeMain{grid-template-columns:1fr}.odysseyHomeStrip{grid-template-columns:repeat(2,minmax(120px,1fr));}.odysseyFormRow{grid-template-columns:1fr}.odysseyHomeManual summary,.odysseyHomeSection summary{font-size:16px}.odysseyActionGrid{grid-template-columns:1fr}.odysseyHomeCard button,.odysseyMiniActions button{width:100%;}}

.odysseyLabSaveCard{display:grid;grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr) auto;gap:10px;align-items:end;margin:12px 0;padding:12px;border:1px solid rgba(250,204,21,.35);border-radius:14px;background:rgba(2,20,18,.58)}
.odysseyLabSaveCard label{display:flex;flex-direction:column;gap:6px;font-weight:800}
.odysseyLabSaveCard input,.odysseyLabSaveCard select{min-height:38px;border-radius:10px;border:1px solid rgba(148,163,184,.4);background:#08111f;color:#f8fafc;padding:0 10px;font-weight:800}
.odysseyLabSaveCard small{grid-column:1/-1;color:#93c5fd}
@media(max-width:780px){.odysseyLabSaveCard{grid-template-columns:1fr}}


/* Update 14.3.9.52: selector de skins visible por nombre, no sólo puntitos. */
.paletteSelectorBody{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:0;}
.paletteCurrentName{font:900 12px system-ui;color:#f8fafc;text-align:right;max-width:185px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px rgba(0,0,0,.65);}
.paletteDots{gap:8px;}
.paletteDot{width:31px;height:31px;min-height:31px;border-radius:10px;}

/* 14.3.9.60 — Character creator validation / identity completion */
.characterCompletionPanel {
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 14px;
  background: rgba(15, 23, 42, .72);
  padding: 10px 12px;
  display: grid;
  gap: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.characterCompletionPanel.valid { border-color: rgba(34, 197, 94, .32); }
.characterCompletionPanel.invalid { border-color: rgba(248, 113, 113, .42); }
.completionHeader {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font-size: .9rem;
}
.completionHeader span { color: #cbd5e1; font-size: .78rem; }
.completionBar {
  height: 7px;
  border-radius: 999px;
  background: rgba(30, 41, 59, .95);
  overflow: hidden;
}
.completionBar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f97316, #facc15, #22c55e);
}
.characterCompletionPanel ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: .78rem;
}
.characterCompletionPanel li.error { color: #fecaca; }
.characterCompletionPanel li.warning { color: #fde68a; }
.characterCompletionPanel li.ok { color: #bbf7d0; }

/* Update 14.3.9.60: mobile readiness guard, no mobile gameplay rewrite yet */
.mobileSupportCard {
  border-color: rgba(56, 189, 248, .26);
}
.mobileSupportArea {
  gap: 10px;
}
.mobileSupportSummary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 14px;
  background: rgba(2, 6, 23, .28);
}
.mobileSupportSummary span {
  color: #bfdbfe;
  font-size: 12px;
}
.mobileSupportSummary b { color: #f8fafc; }
.mobileSupportToggle {
  align-items: flex-start;
  gap: 9px;
}
.mobileRuntimeNotice {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 25;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid rgba(251, 191, 36, .42);
  background: linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(30, 41, 59, .82));
  color: #f8fafc;
  box-shadow: 0 14px 34px rgba(0,0,0,.32);
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.mobileRuntimeNotice strong {
  color: #fde047;
  font-size: 13px;
  white-space: nowrap;
}
.mobileRuntimeNotice span {
  color: #dbeafe;
  font-size: 12px;
}
body.f2dMobileWarningsOff .mobileRuntimeNotice { display: none !important; }
body.f2dTouchScaffoldOn.f2dTouchLikely #screenBattle .battleViewport::after {
  content: "Controles táctiles futuros: D-pad / salto / ataque / especial";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 52px;
  z-index: 17;
  padding: 8px 10px;
  border-radius: 13px;
  border: 1px dashed rgba(56,189,248,.36);
  color: rgba(219,234,254,.78);
  background: rgba(2,6,23,.34);
  text-align: center;
  font-size: 12px;
  pointer-events: none;
}
@media (pointer: coarse) {
  button, .fileButton, select, input[type="range"] {
    min-height: 42px;
  }
  .battleQuickBar button {
    min-height: 38px;
  }
}
@media (max-width: 860px), (max-height: 620px) {
  body.f2dSmallViewport .app {
    width: min(100vw - 12px, 1220px);
    padding-top: 10px;
  }
  body.f2dSmallViewport .topbar {
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }
  body.f2dSmallViewport .grid {
    gap: 10px;
  }
  body.f2dSmallViewport .card {
    padding: 11px;
    border-radius: 16px;
  }
  body.f2dSmallViewport .battleShell {
    gap: 8px;
  }
  body.f2dSmallViewport .battleViewport {
    max-height: calc(var(--f2d-viewport-height, 100vh) - 120px);
    min-height: 280px;
  }
  body.f2dSmallViewport #gameCanvas {
    max-height: calc(var(--f2d-viewport-height, 100vh) - 135px);
  }
  body.f2dSmallViewport .battleQuickBar {
    top: 6px;
    right: 6px;
    gap: 5px;
  }
  body.f2dSmallViewport .battleQuickBar button {
    padding: 6px 8px;
    font-size: 12px;
    border-radius: 10px;
  }
  body.f2dSmallViewport .battleMatchPill,
  body.f2dSmallViewport .battleClock {
    transform: scale(.88);
    transform-origin: top left;
  }
  body.f2dSmallViewport .pauseMenuCard {
    width: min(96vw, 780px);
    max-height: min(88vh, 620px);
    overflow: auto;
  }
  body.f2dSmallViewport .pauseMenuCard .row {
    gap: 7px;
  }
  body.f2dSmallViewport .pauseMenuCard button {
    flex: 1 1 140px;
  }
}
@media (max-width: 620px) {
  body.f2dSmallViewport .mobileRuntimeNotice {
    grid-template-columns: 1fr;
    gap: 3px;
    bottom: 8px;
    padding: 8px 10px;
  }
  body.f2dSmallViewport .mobileSupportSummary {
    grid-template-columns: 1fr;
  }
}
@media (orientation: portrait) and (pointer: coarse) {
  body.f2dPortrait.f2dTouchLikely #screenBattle .battleViewport {
    min-height: 420px;
  }
}

/* 14.3.9.60 — Manual UX/content pass: índice fijo, contenido responsive y navegación siempre visible */
#modal.manualModalActive .modalBox {
  width: min(1220px, calc(100vw - 18px)) !important;
  height: min(900px, calc(100dvh - 18px)) !important;
  max-height: calc(100dvh - 18px) !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  padding: clamp(8px, 1.2vw, 14px) !important;
}
#modal.manualModalActive #modalTitle {
  margin: 0 44px 6px 0 !important;
  line-height: 1.1 !important;
}
#modal.manualModalActive #modalText {
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  min-height: 0 !important;
}
#modal.manualModalActive .manualBookScene {
  position: relative !important;
  display: grid !important;
  grid-template-rows: 1fr auto !important;
  gap: 10px !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 42px 10px 10px !important;
  perspective: 1200px !important;
}
#modal.manualModalActive .manualFloatingClose {
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
  z-index: 120 !important;
  margin: 0 !important;
  min-height: 34px !important;
}
#modal.manualModalActive .manualBook.open {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(220px, .62fr) minmax(0, 1.38fr) !important;
  gap: clamp(10px, 1.5vw, 18px) !important;
  padding: clamp(8px, 1vw, 14px) !important;
}
#modal.manualModalActive .manualBook.open::before { display: none !important; }
#modal.manualModalActive .manualFoldLayer {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 12 !important;
}
#modal.manualModalActive .manualBookLeft,
#modal.manualModalActive .manualBookRight {
  display: block !important;
  min-height: 0 !important;
  max-height: none !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
#modal.manualModalActive .manualBookLeft {
  border-radius: 18px 10px 10px 18px !important;
}
#modal.manualModalActive .manualBookRight {
  border-radius: 10px 18px 18px 10px !important;
  animation: manualRightPageShift .34s cubic-bezier(.2,.75,.25,1) both !important;
}
#modal.manualModalActive .manualBookPage {
  height: 100% !important;
  max-height: none !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  padding: clamp(12px, 1.7vw, 22px) !important;
}
#modal.manualModalActive .manualIndexList {
  max-height: calc(100% - 58px) !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  padding-right: 4px !important;
}
#modal.manualModalActive .manualIndexList button {
  min-height: 32px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
#modal.manualModalActive .manualBookFooter {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(118px, .75fr) minmax(160px, 1.5fr) minmax(118px, .75fr) !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(69,26,3,.82), rgba(69,26,3,.92)) !important;
  border: 1px solid rgba(253,230,138,.22) !important;
  z-index: 30 !important;
}
#modal.manualModalActive .manualBookFooter .secondary {
  min-height: 34px !important;
  padding: 7px 10px !important;
  white-space: normal !important;
}
#modal.manualModalActive .manualDots {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  overflow-x: auto !important;
  gap: 6px !important;
  padding: 3px 2px !important;
}
#modal.manualModalActive .manualDot {
  flex: 0 0 auto !important;
  width: 11px !important;
  height: 11px !important;
  min-height: 11px !important;
}
#modal.manualModalActive .manualCharacterSection {
  border-top: 1px solid rgba(120,53,15,.18) !important;
  margin-top: 12px !important;
  padding-top: 10px !important;
}
#modal.manualModalActive .manualCharacterSection h3 {
  margin: 0 0 6px !important;
  color: #78350f !important;
  font-family: Georgia, 'Times New Roman', serif !important;
}
#modal.manualModalActive .manualCharacterSection p {
  margin: 5px 0 !important;
  font-size: .94rem !important;
  line-height: 1.42 !important;
}
#modal.manualModalActive .manualPageFold,
#modal.manualModalActive .manualStackFold {
  top: 54px !important;
  bottom: 68px !important;
  max-height: none !important;
}
@keyframes manualRightPageShift {
  0% { opacity: .35; transform: translateX(18px) rotateY(-8deg); filter: brightness(.94); }
  100% { opacity: 1; transform: translateX(0) rotateY(0); filter: brightness(1); }
}
@media (max-width: 820px), (max-height: 650px) {
  #modal.manualModalActive .modalBox {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  #modal.manualModalActive .manualBookScene {
    padding: 42px 6px 8px !important;
  }
  #modal.manualModalActive .manualBook.open {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    gap: 8px !important;
    padding: 6px !important;
  }
  #modal.manualModalActive .manualBookLeft {
    display: block !important;
    height: auto !important;
    max-height: 136px !important;
    border-radius: 16px !important;
    padding: 10px !important;
  }
  #modal.manualModalActive .manualBookLeft h2 { display: none !important; }
  #modal.manualModalActive .manualBookLeft .manualBookKicker { margin-bottom: 4px !important; }
  #modal.manualModalActive .manualIndexList {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 0 3px !important;
  }
  #modal.manualModalActive .manualIndexList li { flex: 0 0 auto !important; }
  #modal.manualModalActive .manualIndexList button {
    width: max-content !important;
    max-width: 210px !important;
    min-height: 30px !important;
    font-size: .78rem !important;
  }
  #modal.manualModalActive .manualBookRight {
    border-radius: 16px !important;
  }
  #modal.manualModalActive .manualBookFooter {
    grid-template-columns: 1fr !important;
  }
  #modal.manualModalActive .manualDots { justify-content: flex-start !important; }
  #modal.manualModalActive .manualPageFold,
  #modal.manualModalActive .manualStackFold { display: none !important; }
}

/* 14.3.9.62 — Battle window mode repair.
   La 14.3.9.61 dejó la batalla siempre como si estuviera en fullscreen real.
   En navegador normal eso achicaba/centraba la escena y mataba la lectura. */
body.battleActive:not(.f2dActualFullscreen) {
  overflow: auto !important;
}
body.battleActive:not(.f2dActualFullscreen) .app {
  width: min(1320px, calc(100vw - 18px)) !important;
  max-width: 1320px !important;
  min-height: auto !important;
  padding: 10px 0 14px !important;
}
body.battleActive:not(.f2dActualFullscreen) #screenBattle {
  min-height: auto !important;
}
body.battleActive:not(.f2dActualFullscreen) .battleShell {
  width: 100% !important;
  min-height: auto !important;
  display: grid !important;
  place-items: stretch !important;
  grid-template-rows: auto !important;
  gap: 10px !important;
}
body.battleActive:not(.f2dActualFullscreen) .battleViewport {
  justify-self: center !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 420px !important;
  max-height: none !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.08) inset !important;
}
body.battleActive:not(.f2dActualFullscreen) #gameCanvas {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  border-radius: 20px !important;
}
body.battleActive:not(.f2dActualFullscreen) .battleQuickBar {
  top: 10px !important;
  left: 10px !important;
}
@media (max-width: 860px), (max-height: 700px) {
  body.battleActive:not(.f2dActualFullscreen) .app {
    width: calc(100vw - 8px) !important;
    padding: 4px 0 10px !important;
  }
  body.battleActive:not(.f2dActualFullscreen) .battleViewport {
    min-height: 320px !important;
    border-radius: 14px !important;
  }
  body.battleActive:not(.f2dActualFullscreen) #gameCanvas {
    border-radius: 14px !important;
  }
  body.battleActive:not(.f2dActualFullscreen) .smashHud {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
  }
  body.battleActive:not(.f2dActualFullscreen) .smashHudPlayer {
    min-height: 64px !important;
    grid-template-columns: 50px minmax(0, 1fr) auto !important;
  }
}

/* 14.3.9.62 — Manual responsive QA: cerrar/navegar sin pelear con el tamaño de pantalla. */
#modal.manualModalActive {
  align-items: center !important;
  justify-content: center !important;
  padding: 6px !important;
}
#modal.manualModalActive .modalBox {
  width: min(1220px, calc(100vw - 12px)) !important;
  height: min(900px, calc(100dvh - 12px)) !important;
  max-height: calc(100dvh - 12px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}
#modal.manualModalActive #modalText {
  min-height: 0 !important;
}
#modal.manualModalActive .manualBookScene {
  min-height: 0 !important;
  overflow: hidden !important;
}
#modal.manualModalActive .manualFloatingClose {
  z-index: 500 !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.24) !important;
}
#modal.manualModalActive .manualBookFooter {
  flex: 0 0 auto !important;
  position: sticky !important;
  bottom: 0 !important;
}
#modal.manualModalActive .manualBookRight,
#modal.manualModalActive .manualBookLeft,
#modal.manualModalActive .manualIndexList {
  scrollbar-gutter: stable !important;
}
@media (max-width: 900px), (max-height: 680px) {
  #modal.manualModalActive .modalBox {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  #modal.manualModalActive .manualBookScene {
    grid-template-rows: minmax(0, 1fr) auto !important;
    padding: 38px 5px 6px !important;
  }
  #modal.manualModalActive .manualBook.open {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 6px !important;
  }
  #modal.manualModalActive .manualBookLeft {
    max-height: 118px !important;
    overflow: hidden !important;
  }
  #modal.manualModalActive .manualIndexList {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none !important;
  }
  #modal.manualModalActive .manualIndexList li {
    flex: 0 0 auto !important;
  }
  #modal.manualModalActive .manualIndexList button {
    max-width: 190px !important;
    white-space: normal !important;
  }
  #modal.manualModalActive .manualBookFooter {
    grid-template-columns: 1fr 1fr !important;
  }
  #modal.manualModalActive .manualDots {
    grid-column: 1 / -1 !important;
    order: 3 !important;
    justify-content: flex-start !important;
    max-width: 100% !important;
  }
}
@media (max-width: 560px), (max-height: 520px) {
  #modal.manualModalActive .manualBookLeft {
    max-height: 86px !important;
  }
  #modal.manualModalActive .manualBookPage {
    padding: 10px !important;
  }
  #modal.manualModalActive .manualBookFooter {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    padding: 6px !important;
  }
  #modal.manualModalActive .manualBookFooter button {
    width: 100% !important;
  }
}

/* 14.3.9.62 — Creator stability: jugable vs borrador visible sin contaminar selección. */
.creatorStabilityNote {
  margin: 4px 0 0 !important;
  color: #bfdbfe !important;
}
.characterSavedPreviewItem.playableCustomCharacter {
  border-color: rgba(52,211,153,.42) !important;
  background: linear-gradient(180deg, rgba(5,150,105,.14), rgba(15,23,42,.72)) !important;
}
.characterSavedPreviewItem.draftCustomCharacter {
  border-color: rgba(251,191,36,.38) !important;
  background: linear-gradient(180deg, rgba(251,191,36,.10), rgba(15,23,42,.72)) !important;
  opacity: .92;
}
.characterSavedPreviewItem.draftCustomCharacter .savedCharacterMeta span {
  color: #fde68a !important;
}


/* 14.3.9.63.1 — Battle window size hotfix.
   Fuera de F11 la partida NO debe quedar como una isla chica: ocupa el ancho útil del navegador.
   Puede haber scroll vertical si Chrome deja poca altura, pero el canvas no se achica hasta ser injugable. */
body.battleActive:not(.f2dActualFullscreen) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
body.battleActive:not(.f2dActualFullscreen) .app {
  width: 100vw !important;
  max-width: none !important;
  min-height: auto !important;
  padding: 8px 14px 14px !important;
}
body.battleActive:not(.f2dActualFullscreen) #screenBattle {
  width: 100% !important;
  min-height: auto !important;
}
body.battleActive:not(.f2dActualFullscreen) .battleShell {
  width: 100% !important;
  min-height: auto !important;
  display: grid !important;
  place-items: stretch !important;
  grid-template-rows: auto !important;
  gap: 10px !important;
}
body.battleActive:not(.f2dActualFullscreen) .battleViewport {
  display: block !important;
  justify-self: stretch !important;
  align-self: start !important;
  width: calc(100vw - 28px) !important;
  max-width: calc(100vw - 28px) !important;
  min-width: 0 !important;
  height: calc((100vw - 28px) * 9 / 16) !important;
  min-height: 560px !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 auto !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.08) inset !important;
}
body.battleActive:not(.f2dActualFullscreen) #gameCanvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border-radius: 18px !important;
}
body.battleActive:not(.f2dActualFullscreen) .battleQuickBar {
  top: 10px !important;
  left: 10px !important;
}
body.battleActive:not(.f2dActualFullscreen) .pauseMenuOverlay {
  position: fixed;
  inset: auto 10px 10px auto;
  width: min(820px, calc(100vw - 20px));
  height: auto;
  background: transparent;
  padding: 0;
  place-items: end end;
  z-index: 60;
}
body.battleActive:not(.f2dActualFullscreen) .pauseMenuCard {
  width: 100%;
  max-height: min(46dvh, 360px);
}
body.battleActive:not(.f2dActualFullscreen) .pauseMenuOverlay.photoModeActive {
  inset: 0;
  width: 100vw;
  height: 100dvh;
  place-items: end center;
  padding: 0 12px max(12px, env(safe-area-inset-bottom));
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}
body.battleActive:not(.f2dActualFullscreen) .pauseMenuOverlay.photoModeActive.photoSceneDragging {
  cursor: grabbing;
}
body.battleActive:not(.f2dActualFullscreen) .pauseMenuOverlay.photoModeActive .pauseMenuCard {
  width: min(720px, calc(100vw - 24px));
  max-height: min(38dvh, 310px);
}
.pauseMenuOverlay.photoModeActive .pauseMenuCard > h2,
.pauseMenuOverlay.photoModeActive .pauseMenuCard > p,
.pauseMenuOverlay.photoModeActive .pauseMenuCard > .row {
  display: none;
}
.pauseMenuOverlay.photoModeActive #pausePhotoPanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  margin: 0;
}
.photoPanelHeader {
  grid-column: 1 / -1;
}
.photoZoomControls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.photoZoomControls button {
  min-width: 40px;
}
.photoActionRow {
  margin: 0;
}
.photoCaptureButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.photoShutterIcon {
  width: 20px;
  height: 20px;
  border: 3px solid currentColor;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(15, 23, 42, .35);
}
.pauseAudioDialog {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: min(620px, calc(100vw - 32px));
  max-height: min(82dvh, 620px);
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(125, 211, 252, .34);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(10, 20, 39, .98), rgba(4, 10, 24, .98));
  box-shadow: 0 28px 90px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.pauseAudioDialog.hidden {
  display: none;
}
.pauseAudioDialogHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.pauseAudioDialogHeader span {
  display: block;
  color: #7dd3fc;
  font-size: .64rem;
  font-weight: 1000;
  letter-spacing: .15em;
}
.pauseAudioDialogHeader h3 {
  margin: 2px 0 0;
  font-size: clamp(1.35rem, 4vw, 2rem);
}
.pauseMenuOverlay.audioSettingsActive::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  background: rgba(2, 6, 23, .58);
  backdrop-filter: blur(2px);
}
.pauseMenuOverlay.audioSettingsActive .pauseMenuCard {
  opacity: .62;
  filter: saturate(.65);
  pointer-events: none;
}
@media (max-width: 900px), (max-height: 520px) {
  .pauseAudioDialog {
    width: min(660px, calc(100vw - 24px));
    max-height: calc(100dvh - max(18px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom)));
    padding: 12px 14px;
    border-radius: 16px;
  }
  .pauseAudioDialogHeader {
    margin-bottom: 7px;
  }
  .pauseAudioDialog .audioSettingsBox {
    gap: 7px;
  }
  .pauseAudioDialog .audioRow {
    gap: 3px;
  }
}
@media (max-width: 900px) {
  body.battleActive:not(.f2dActualFullscreen) .app { padding: 6px 8px 12px !important; }
  body.battleActive:not(.f2dActualFullscreen) .battleViewport {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    height: calc((100vw - 16px) * 9 / 16) !important;
    min-height: 360px !important;
    border-radius: 14px !important;
  }
  body.battleActive:not(.f2dActualFullscreen) #gameCanvas { border-radius: 14px !important; }
}

/* 14.3.9.63.1 — Creator UX cleanup: no mostrar auditorías internas ni borradores vacíos al jugador. */
.characterCompletionPanel,
.characterIdentityMeter,
.creatorStabilityNote,
.characterDraftsSection,
.draftCustomCharacter.emptyDraftNotice {
  display: none !important;
}

/* 14.3.10.3 — Battle viewport fit guard.
   En partida normal no debe aparecer scroll vertical del navegador: se usa el mayor 16:9 que entra en la ventana.
   F11/fullscreen conserva el modo inmersivo viejo. */
body.battleActive:not(.f2dActualFullscreen) {
  overflow: hidden !important;
  height: var(--f2d-viewport-height, 100dvh) !important;
}
body.battleActive:not(.f2dActualFullscreen) .app {
  width: var(--f2d-viewport-width, 100vw) !important;
  height: var(--f2d-viewport-height, 100dvh) !important;
  min-height: var(--f2d-viewport-height, 100dvh) !important;
  max-height: var(--f2d-viewport-height, 100dvh) !important;
  padding: var(--f2d-battle-app-padding, 6px 8px) !important;
  overflow: hidden !important;
}
body.battleActive:not(.f2dActualFullscreen) #screenBattle,
body.battleActive:not(.f2dActualFullscreen) .battleShell {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  gap: 0 !important;
}
body.battleActive:not(.f2dActualFullscreen) .battleViewport {
  display: block !important;
  width: min(calc(100vw - 16px), calc((100dvh - 12px) * 16 / 9)) !important;
  height: min(calc(100dvh - 12px), calc((100vw - 16px) * 9 / 16)) !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100dvh - 12px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 auto !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
body.battleActive:not(.f2dActualFullscreen) #gameCanvas {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border-radius: 16px !important;
}
body.battleActive:not(.f2dActualFullscreen) .onlineBattlePanel {
  position: fixed !important;
  right: 8px !important;
  bottom: 8px !important;
  width: min(420px, calc(100vw - 16px)) !important;
  max-height: min(36dvh, 280px) !important;
  overflow: auto !important;
  z-index: 52 !important;
}

/* Update 14.3.10.5: menú inicial cinematográfico con fade negro, acciones vivas y fondo tipo modo foto. */
body.homeActive {
  min-height: 100dvh;
  overflow: hidden;
  background: #02040b;
}

body.homeActive .app {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  padding: 0;
}

body.homeActive .topbar {
  display: none;
}

body.homeActive::before,
body.homeActive::after {
  display: none;
}

.homeCinematicScreen {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: #02040b;
}

.homeSceneCanvas {
  position: absolute;
  inset: 0;
  z-index: -4;
  width: 100%;
  height: 100%;
  display: block;
  background: #030712;
}

.homeCinematicShade {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.86) 0%,
      rgba(0,0,0,.74) 15%,
      rgba(0,0,0,.42) 25%,
      rgba(0,0,0,.15) 39%,
      rgba(0,0,0,.08) 100%),
    radial-gradient(circle at 78% 34%, rgba(56,189,248,.16), transparent 30%),
    linear-gradient(180deg, rgba(2,6,23,.08), rgba(2,6,23,.38));
}

.homeCinematicNoise {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .16;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 50% 50%, transparent 0, rgba(0,0,0,.38) 88%);
  mix-blend-mode: screen;
}

.homeMenuGrid {
  width: min(100%, 1480px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: clamp(22px, 4dvh, 52px) clamp(22px, 5vw, 70px);
  display: grid;
  grid-template-columns: minmax(260px, 410px) minmax(280px, 460px);
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 6vw, 110px);
}

body.homeActive #screenHome .card,
.homeMenuPanel,
.homeVersionPanel {
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.homeMenuPanel {
  grid-column: auto;
  min-height: auto !important;
  padding: 0;
  background: transparent !important;
  display: grid;
  align-content: center;
  gap: clamp(26px, 5dvh, 54px);
}

.homeMenuPanel::before,
.homeMenuPanel::after,
.homeVersionPanel::before {
  display: none !important;
}

.mainGameTitle {
  margin: 0 0 clamp(16px, 2.2dvh, 28px);
  font-family: Impact, Haettenschweiler, "Arial Black", "Segoe UI Black", system-ui, sans-serif;
  font-size: clamp(48px, 7.5vw, 104px);
  line-height: .78;
  letter-spacing: -.075em;
  color: #f8fafc;
  text-transform: uppercase;
  text-shadow: 0 9px 24px rgba(0,0,0,.55), 0 0 34px rgba(255,255,255,.08);
}

.mainGameTitle span {
  color: #f59e0b;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  text-shadow: 0 8px 24px rgba(0,0,0,.56), 0 0 26px rgba(245,158,11,.24);
}

.homeTagline {
  max-width: 360px !important;
  font-size: clamp(13px, 1.4vw, 16px);
  line-height: 1.42;
  color: rgba(226,232,240,.82) !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.72) !important;
}

.homeMenuButtons {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.9dvh, 20px) !important;
  width: min(300px, 100%);
  margin: 0 !important;
}

.homeNavButton {
  position: relative;
  appearance: none;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f8fafc !important;
  padding: 8px 4px !important;
  border-radius: 6px !important;
  font-family: "Trebuchet MS", "Arial Black", system-ui, sans-serif;
  font-size: clamp(19px, 2.2vw, 28px);
  font-weight: 950;
  letter-spacing: .015em;
  text-align: left;
  text-shadow: 0 4px 16px rgba(0,0,0,.72);
  transform-origin: left center;
  animation: homeNavDrift 5.8s ease-in-out infinite;
  transition: color .14s ease, transform .14s ease, text-shadow .14s ease, letter-spacing .14s ease;
}

.homeNavButton:nth-child(2) { animation-delay: -.9s; }
.homeNavButton:nth-child(3) { animation-delay: -1.8s; }
.homeNavButton:nth-child(4) { animation-delay: -2.7s; }

.homeNavButton::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 50%;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f59e0b, rgba(245,158,11,0));
  transform: translateY(-50%);
  opacity: 0;
  transition: width .16s ease, opacity .16s ease;
}

.homeNavButton:hover,
.homeNavButton:focus-visible {
  color: #facc15 !important;
  transform: translateX(8px) scale(1.13) rotate(-1.3deg);
  letter-spacing: .04em;
  filter: none !important;
  text-shadow: 0 7px 20px rgba(0,0,0,.80), 0 0 22px rgba(250,204,21,.32);
}

.homeNavButton:hover::before,
.homeNavButton:focus-visible::before {
  width: 28px;
  opacity: .95;
}

.homeVersionPanel {
  grid-column: auto;
  max-height: min(78dvh, 690px);
  overflow: auto;
  padding: 16px;
  border: 1px solid rgba(148,163,184,.22) !important;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(2,6,23,.56), rgba(2,6,23,.38)) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
}

.homeVersionPanel h2 {
  font-family: "Trebuchet MS", "Arial Black", system-ui, sans-serif;
  color: #f8fafc;
  letter-spacing: -.02em;
}

.homeVersionPanel .tiny,
.homeVersionPanel p {
  color: rgba(203,213,225,.74);
}

.homeVersionPanel .notice {
  border-color: rgba(148,163,184,.18);
  background: rgba(15,23,42,.46);
}

.homeVersionPanel .goodNotice {
  border-color: rgba(245,158,11,.25);
  background: rgba(15,23,42,.52);
  color: #e5e7eb;
}

.homeVersionPanel .goodNotice strong {
  color: #facc15;
}

@keyframes homeNavDrift {
  0%, 100% { transform: translateY(0) rotate(-.35deg); }
  50% { transform: translateY(-3px) rotate(.45deg); }
}

@media (max-width: 960px) {
  body.homeActive {
    overflow: auto;
  }
  .homeMenuGrid {
    min-height: 100dvh;
    grid-template-columns: 1fr;
    align-content: center;
    justify-content: stretch;
    gap: 24px;
    padding: 26px 18px 30px;
  }
  .homeCinematicShade {
    background:
      linear-gradient(90deg, rgba(0,0,0,.88), rgba(0,0,0,.46) 46%, rgba(0,0,0,.18) 100%),
      linear-gradient(180deg, rgba(2,6,23,.10), rgba(2,6,23,.46));
  }
  .homeVersionPanel {
    max-height: 38dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .homeNavButton {
    animation: none;
  }
  .homeNavButton:hover,
  .homeNavButton:focus-visible {
    transform: scale(1.08);
  }
}

/* Si después se quiere sacar el historial derecho sin tocar HTML: document.body.classList.add('homeVersionsHidden') */
body.homeVersionsHidden .homeVersionPanel {
  display: none !important;
}
body.homeVersionsHidden .homeMenuGrid {
  grid-template-columns: minmax(260px, 430px);
  justify-content: start;
}

/* Update 14.3.10.5 — menu seed scene + extras versions pass */
.homeMenuGrid {
  grid-template-columns: minmax(260px, 430px) !important;
  justify-content: start !important;
  gap: 0 !important;
}

.homeCinematicShade {
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.88) 0%,
      rgba(0,0,0,.78) 10%,
      rgba(0,0,0,.54) 20%,
      rgba(0,0,0,.24) 31%,
      rgba(0,0,0,.08) 45%,
      rgba(0,0,0,.04) 100%),
    radial-gradient(circle at 72% 35%, rgba(56,189,248,.12), transparent 30%),
    linear-gradient(180deg, rgba(2,6,23,.04), rgba(2,6,23,.34));
}

.mainGameTitle {
  cursor: pointer;
  user-select: none;
  letter-spacing: -.018em !important;
  line-height: .84 !important;
  transform-origin: left center;
  transition: transform .16s ease, filter .16s ease, text-shadow .16s ease, letter-spacing .16s ease;
}

.mainGameTitle span {
  letter-spacing: .004em !important;
}

.mainGameTitle:hover,
.mainGameTitle:focus-visible {
  transform: scale(1.055);
  filter: brightness(1.08);
  letter-spacing: -.005em !important;
  text-shadow: 0 11px 30px rgba(0,0,0,.68), 0 0 30px rgba(250,204,21,.20);
  outline: none;
}

.logoClickParticle {
  position: fixed;
  z-index: 9999;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #fff 0 18%, #facc15 28% 58%, rgba(249,115,22,.05) 72%);
  box-shadow: 0 0 16px rgba(250,204,21,.78);
  animation: logoParticleBurst1431051 .72s cubic-bezier(.18,.82,.2,1) forwards;
}

@keyframes logoParticleBurst1431051 {
  0% { opacity: 1; transform: translate(0,0) scale(.9) rotate(0deg); }
  78% { opacity: .92; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.15) rotate(var(--spin)); }
}

body.f2dScreenInverted .app,
body.f2dScreenInverted .modalShade {
  filter: invert(1) hue-rotate(180deg) contrast(1.03);
}

body.f2dScreenInverted::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.04), rgba(0,0,0,.08));
  mix-blend-mode: difference;
}

@media (max-width: 960px) {
  .homeMenuGrid {
    grid-template-columns: 1fr !important;
  }
}

/* Update 14.3.10.5.3 — UX cleanup, fallos y botones Volver rojos. */
button.backButton,
button.secondary.backButton {
  background: linear-gradient(180deg, rgba(248,113,113,.92), rgba(185,28,28,.88));
  border-color: rgba(254,202,202,.42);
  color: #fff7f7;
  box-shadow: 0 12px 28px rgba(127,29,29,.30), inset 0 1px 0 rgba(255,255,255,.18);
}
button.backButton:hover,
button.secondary.backButton:hover {
  filter: brightness(1.10);
  border-color: rgba(254,226,226,.70);
}
.utilityCleanGrid {
  align-items: stretch;
}
.utilityBackOnly {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  padding: 0 2px 2px;
}
.utilityCleanGrid .utilityToolCard {
  min-height: 148px;
}
.utilityCommandCard {
  order: 99;
}
.f2dCrashLogOverlay {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: none;
  max-width: min(420px, calc(100vw - 28px));
}
.f2dCrashLogOverlay.active { display: block; }
.f2dCrashLogCard {
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(15, 23, 42, .94);
  border: 1px solid rgba(148, 163, 184, .42);
  border-radius: 18px;
  padding: 14px;
  color: #e5e7eb;
  box-shadow: 0 26px 70px rgba(0,0,0,.42);
  backdrop-filter: blur(14px);
}
.f2dCrashLogCard p {
  margin: 7px 0 12px;
  color: #cbd5e1;
  font-size: 13px;
}

/* 14.3.10.5.3 — entrada móvil/gamepad base y logger sin lecturas pesadas */
.f2dTouchControls {
  position: fixed;
  inset: 0;
  z-index: 34;
  pointer-events: none;
  display: none;
}
body.f2dTouchBattle .f2dTouchControls { display: block; }
.f2dTouchStick,
.f2dTouchControls [data-touch-btn] {
  position: absolute;
  width: var(--s, 64px);
  height: var(--s, 64px);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.25);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), rgba(15,23,42,.70));
  color: #f8fafc;
  opacity: var(--o, .78);
  box-shadow: 0 12px 28px rgba(0,0,0,.35), inset 0 0 18px rgba(56,189,248,.18);
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  display: grid;
  place-items: center;
  font-weight: 950;
}
.f2dTouchStick,
.f2dTouchControls [data-touch-btn] {
  left: calc(var(--x, 50%) + var(--f2d-viewport-offset-x, 0px));
  top: calc(var(--y, 50%) + var(--f2d-viewport-offset-y, 0px));
  transform: translate(-50%, -50%);
}
.f2dTouchControls [data-touch-btn] { font-size: 22px; }
.f2dTouchStickKnob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  height: 44%;
  border-radius: 50%;
  transform: translate(calc(-50% + var(--stick-dx, 0) * 22px), calc(-50% + var(--stick-dy, 0) * 22px));
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.38);
  pointer-events: none;
}
.f2dTouchControls [data-touch-btn="jump"] { margin-bottom: 78px; }
.f2dTouchControls [data-touch-btn="heavy"] { margin-bottom: 54px; margin-right: 74px; }
.f2dTouchControls [data-touch-btn="special"] { margin-right: 132px; }
.f2dTouchControls [data-touch-btn="block"] { margin-bottom: 118px; margin-right: 10px; }
body:not(.f2dLandscape).f2dTouchLikely .f2dTouchControls { display: none; }
.mobileSupportSummary { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* 14.5 — intro cinemática seed y contrato de entrada */
.f2dCinematicIntro {
  position: fixed;
  inset: 0;
  z-index: 10020;
  background: #020617;
  overflow: hidden;
  animation: introFadeIn145 .34s ease-out both;
}
.f2dCinematicIntro.closing { animation: introFadeOut145 .5s ease-in forwards; }
.f2dCinematicIntro canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: auto;
}
.cinematicIntroText {
  position: absolute;
  left: 50%;
  bottom: 7vh;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(248,250,252,.78);
  text-shadow: 0 6px 22px rgba(0,0,0,.55);
  pointer-events: none;
}
.cinematicIntroText span {
  font: 850 clamp(16px, 1.8vw, 24px)/1.1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(2,6,23,.24);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  animation: introPromptPulse145 1.45s ease-in-out infinite;
}
@keyframes introFadeIn145 { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: scale(1); } }
@keyframes introFadeOut145 { to { opacity: 0; transform: scale(1.03); visibility: hidden; } }
@keyframes introPromptPulse145 { 0%,100% { opacity: .46; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }


/* 14.5.6 — transición de salteo con mano/cámara */
.f2dCinematicIntro.photoSkip .cinematicIntroText {
  opacity: 0;
  transition: opacity .18s ease-out;
}
.f2dCinematicIntro.photoSkip canvas {
  filter: saturate(1.08) contrast(1.04);
}

/* ============================================================================
   V14.5.11 — Extras con identidad + Manual "libro desgastado"
   Bloque final: pisa lo anterior por cascada; el estilo viejo queda intacto
   arriba como base. Texturas 100% procedurales (gradientes + feTurbulence en
   data-URI): cero assets externos, funciona en hosting estático.
   ============================================================================ */

.utilityToolCard {
  --acc: #94a3b8;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .22);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.utilityToolCard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
  opacity: .9;
}
.utilityToolCard:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--acc) 55%, transparent);
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--acc) 60%, transparent);
}
.utilityToolCard .utilityCardArt {
  display: flex;
  justify-content: center;
  padding: 4px 0 2px;
}
.utilityToolCard .utilityCardArt svg {
  width: 58px;
  height: 58px;
  filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--acc) 45%, transparent));
}
.utilityToolCard h3 { letter-spacing: .02em; }

/* — Historial: pergamino ámbar con línea de tiempo — */
.utilityCardVersions {
  --acc: #f59e0b;
  background:
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(245, 158, 11, .05) 17px 18px),
    linear-gradient(160deg, #241a08, #171208 60%, #12100a);
}
/* — Mapas: plano/blueprint teal con grilla — */
.utilityCardMaps {
  --acc: #2dd4bf;
  background:
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(45, 212, 191, .07) 15px 16px),
    repeating-linear-gradient(90deg, transparent 0 15px, rgba(45, 212, 191, .07) 15px 16px),
    linear-gradient(160deg, #05201e, #041412);
}
/* — Personajes: taller violeta con silueta de foco — */
.utilityCardChars {
  --acc: #a78bfa;
  background:
    radial-gradient(70% 55% at 50% 26%, rgba(167, 139, 250, .16), transparent 70%),
    linear-gradient(160deg, #1b1030, #120b1f);
}
/* — Manual: tapa de cuero con lomo — */
.utilityCardManual {
  --acc: #c9974f;
  background:
    var(--paper-noise, none),
    radial-gradient(120% 90% at 78% 12%, rgba(201, 151, 79, .16), transparent 55%),
    linear-gradient(160deg, #4a2f14, #2c1b0a 70%, #201306);
  border-color: rgba(201, 151, 79, .4);
}
.utilityCardManual::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 12px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(201, 151, 79, .25) 60%, transparent);
  border-right: 1px dashed rgba(233, 216, 166, .35); /* costura del lomo */
}
/* — Consola: terminal verde con scanlines — */
.utilityCardCommands {
  --acc: #4ade80;
  background:
    repeating-linear-gradient(0deg, rgba(74, 222, 128, .045) 0 2px, transparent 2px 4px),
    linear-gradient(160deg, #04180c, #020d06);
}
.utilityCardCommands h3 { font-family: "Cascadia Code", "Consolas", monospace; }
.utilityCardCommands h3::before { content: "> "; color: var(--acc); }

/* ===================== Manual: libro antiguo y desgastado ===================== */
:root {
  --paper-noise: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%25" height="100%25" filter="url(%23n)" opacity="0.5"/></svg>');
  --ink: #3b2b18;
  --paper-hi: #f2e6c4;
  --paper-lo: #d8c295;
}
/* Escritorio + tapa de cuero alrededor del libro */
.manualBookScene {
  background:
    var(--paper-noise),
    radial-gradient(120% 100% at 50% 0%, rgba(120, 72, 28, .25), transparent 60%),
    linear-gradient(165deg, #3d2612, #241505 70%, #180d03);
  border: 2px solid #6b4a22;
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 6px rgba(201, 151, 79, .14),
    inset 0 0 46px rgba(0, 0, 0, .65),
    0 18px 46px -18px rgba(0, 0, 0, .85);
  background-blend-mode: overlay, normal, normal;
}
/* Páginas: papel viejo con grano, vetas y esquinas quemadas */
.manualBookPage {
  background:
    var(--paper-noise),
    radial-gradient(130% 100% at 50% -8%, var(--paper-hi), var(--paper-lo) 74%, #c3a877),
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(122, 91, 44, .05) 26px 27px);
  background-blend-mode: multiply, normal, normal;
  color: var(--ink);
  border: 1px solid #a9884f;
  box-shadow:
    inset 0 0 34px rgba(97, 64, 20, .42),
    inset 0 0 5px rgba(60, 36, 8, .5);
  font-family: Georgia, "Times New Roman", serif;
}
.manualBookPage h2,
.manualBookPage h3 {
  color: #2c1d0b;
  font-family: Georgia, "Times New Roman", serif;
  border-bottom: 1px solid rgba(122, 91, 44, .5);
  padding-bottom: .18em;
  text-shadow: 0 1px 0 rgba(255, 244, 214, .55);
}
.manualBookPage h2::first-letter {
  font-size: 1.65em;
  color: #7a1f14; /* capitular de tinta roja, como los libros viejos */
}
.manualBookPage p { color: var(--ink); }
.manualBookPage a { color: #7a1f14; }
/* Manchas de uso: café y humedad, bien sutiles */
.manualBookRight::after,
.manualBookLeft::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46px 34px at 82% 12%, rgba(110, 71, 22, .16), transparent 70%),
    radial-gradient(30px 26px at 12% 86%, rgba(84, 52, 14, .14), transparent 70%),
    radial-gradient(70px 40px at 30% 30%, rgba(140, 100, 40, .07), transparent 75%);
}
/* Canto del libro: pila de páginas en los bordes exteriores */
.manualBookLeft { border-left: 7px solid transparent; }
.manualBookRight { border-right: 7px solid transparent; }
.manualBookLeft, .manualBookRight { position: relative; }
.manualBookLeft::before,
.manualBookRight::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 7px;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, #e7d5ab 0 2px, #bfa26d 2px 3px);
  opacity: .9;
}
.manualBookLeft::before { left: -7px; border-radius: 4px 0 0 4px; }
.manualBookRight::before { right: -7px; border-radius: 0 4px 4px 0; }
/* Sello de página + índice con puntillé + marcadores de tinta */
.manualBookKicker {
  color: #7a1f14;
  border: 1px solid rgba(122, 31, 20, .55);
  display: inline-block;
  padding: 1px 8px;
  border-radius: 3px;
  transform: rotate(-1.2deg);
  font-family: Georgia, serif;
  letter-spacing: .08em;
  background: rgba(122, 31, 20, .06);
}
.manualIndexList button { color: var(--ink); font-family: Georgia, serif; }
.manualIndexList li { border-bottom: 1px dotted rgba(122, 91, 44, .55); }
.manualIndexList li.active button { color: #7a1f14; font-weight: 700; }
.manualDots .manualDot { background: rgba(59, 43, 24, .35); border-color: rgba(59, 43, 24, .5); }
.manualDots .manualDot.active { background: #7a1f14; border-color: #7a1f14; }
.manualBookFooter .secondary {
  background: linear-gradient(180deg, #e9d8a6, #cdb277);
  color: #3b2b18;
  border: 1px solid #a9884f;
  text-shadow: 0 1px 0 rgba(255, 244, 214, .6);
}

/* ============================================================================
   V14.5.12 — Extras: cada apartado ES el objeto (libro/pergamino/plano/caja/CRT)
   + fondo de taller del panel. Bloque final: gana por cascada; lo anterior queda
   de base (paletas y texturas 14.5.11 siguen aplicando por clase).
   ============================================================================ */

/* Fondo del panel de Extras: mesa de taller de madera con viñeta y grano */
#screenUtility {
  background:
    var(--paper-noise),
    radial-gradient(120% 90% at 50% 0%, rgba(214, 160, 90, .10), transparent 55%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 3px, transparent 3px 118px),
    linear-gradient(170deg, #23150a, #150c04 62%, #0d0702);
  background-blend-mode: overlay, normal, normal, normal;
  box-shadow: inset 0 0 130px rgba(0, 0, 0, .8);
}

/* Objeto base: TODO el apartado es el botón */
.utilityObjectCard {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 205px;
  user-select: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.utilityObjectCard:hover { transform: translateY(-4px); filter: brightness(1.06); }
.utilityObjectCard:active { transform: translateY(-1px) scale(.985); }
.utilityObjectCard:focus-visible { outline: 2px solid var(--acc, #94a3b8); outline-offset: 3px; }
.utilityObjectCard .objectTitle { margin: 0; letter-spacing: .02em; }
.utilityObjectCard .objectHint { opacity: .75; margin: 0; }

/* — Pergamino: rollos arriba/abajo, tinta y sello de cera — */
.utilityCardVersions.utilityObjectCard {
  background:
    var(--paper-noise),
    radial-gradient(130% 100% at 50% -8%, var(--paper-hi), var(--paper-lo) 74%, #c3a877);
  background-blend-mode: multiply, normal;
  color: var(--ink);
  border-color: #a9884f;
  padding-top: 34px;
  padding-bottom: 36px;
}
.utilityCardVersions .inkTitle,
.utilityCardVersions .objectHint { color: var(--ink); font-family: Georgia, "Times New Roman", serif; }
.scrollRoll {
  position: absolute;
  left: -4px;
  right: -4px;
  height: 24px;
  background: linear-gradient(180deg, #6d4c22, #b08d52 45%, #4a3213);
  border: 1px solid #3a270e;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45), inset 0 2px 3px rgba(255, 235, 190, .35);
}
.scrollRollTop { top: 4px; }
.scrollRollBottom { bottom: 4px; }
.waxSeal {
  position: absolute;
  right: 14px;
  bottom: 32px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #dc4b3e, #8f1d12 62%, #6b120a);
  color: #ffd9d2;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 11px Georgia, serif;
  letter-spacing: .05em;
  transform: rotate(-10deg);
  box-shadow: 0 3px 7px rgba(0, 0, 0, .5), inset 0 0 0 4px rgba(255, 190, 180, .28);
}

/* — Plano plegado: pliegues, ruta y chinche — */
.utilityCardMaps.utilityObjectCard {
  background:
    linear-gradient(90deg, transparent 0 32.5%, rgba(255, 255, 255, .07) 33%, transparent 33.9%),
    linear-gradient(90deg, transparent 0 65.5%, rgba(0, 0, 0, .22) 66%, transparent 66.9%),
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(45, 212, 191, .08) 15px 16px),
    repeating-linear-gradient(90deg, transparent 0 15px, rgba(45, 212, 191, .08) 15px 16px),
    linear-gradient(160deg, #06413c, #052a26 60%, #041a17);
  justify-content: flex-end;
}
.mapRoute { position: absolute; inset: 8px 8px auto 8px; height: 52%; opacity: .9; pointer-events: none; }
.mapPin {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #fda4af, #dc2626 60%, #7f1d1d);
  box-shadow: 0 4px 6px rgba(0, 0, 0, .55), 0 0 0 2px rgba(255, 255, 255, .12);
}
.mapPin::after { content: ""; position: absolute; left: 6px; top: 15px; width: 3px; height: 9px; background: #9ca3af; }

/* — Caja de figura: banda de marca + ventana blister — */
.utilityCardChars.utilityObjectCard { padding-top: 30px; }
.figureBrand {
  position: absolute;
  inset: 0 0 auto 0;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 10px/1 "Cascadia Code", Consolas, monospace;
  letter-spacing: .22em;
  color: #ede9fe;
  background: linear-gradient(90deg, #6d28d9, #a855f7 50%, #6d28d9);
  border-bottom: 1px solid rgba(237, 233, 254, .35);
}
.figureWindow {
  margin: 4px auto 2px;
  width: 108px;
  height: 96px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 45%, rgba(255, 255, 255, .10));
  border: 2px solid rgba(196, 181, 253, .5);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .55), inset 0 2px 4px rgba(255, 255, 255, .22);
}
.figureWindow svg { width: 72px; height: 72px; }

/* — EL LIBRO: la tarjeta entera es la tapa — */
.utilityCardManual.utilityObjectCard {
  padding-left: 30px;
  padding-right: 22px;
  align-items: center;
  justify-content: center;
  border: 2px solid #8a5a25;
  border-radius: 10px 16px 16px 10px;
  box-shadow: inset 0 0 26px rgba(0, 0, 0, .55), inset -3px 0 6px rgba(0, 0, 0, .35), 0 10px 22px -10px rgba(0, 0, 0, .8);
  transition: transform .22s ease, box-shadow .22s ease;
}
.utilityCardManual.utilityObjectCard:hover {
  transform: perspective(640px) rotateY(-5deg) translateY(-3px); /* la tapa amaga a abrirse */
}
.bookSpine {
  position: absolute;
  inset: 0 auto 0 0;
  width: 18px;
  background: linear-gradient(90deg, #1c1006, #4a2f14 55%, rgba(0, 0, 0, .35));
  border-right: 2px dashed rgba(233, 216, 166, .4); /* costura del lomo */
}
.bookPagesEdge {
  position: absolute;
  inset: 5px 0 5px auto;
  width: 9px;
  background: repeating-linear-gradient(0deg, #efe0b5 0 2px, #c2a674 2px 3px);
  border-radius: 0 5px 5px 0;
  box-shadow: inset 2px 0 3px rgba(80, 52, 14, .5);
}
.bookRibbon {
  position: absolute;
  top: -3px;
  right: 26px;
  width: 15px;
  height: 42px;
  background: linear-gradient(180deg, #dc2626, #7f1d1d);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
.bookTitlePlate {
  padding: 10px 20px;
  border: 2px solid #caa24f;
  border-radius: 4px;
  background:
    linear-gradient(160deg, rgba(233, 216, 166, .16), rgba(120, 76, 24, .16)),
    rgba(20, 10, 2, .25);
  box-shadow: inset 0 0 0 1px rgba(60, 34, 6, .6), inset 0 1px 2px rgba(255, 236, 190, .3);
}
.bookTitle {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.28em;
  color: #f0dfae; /* dorado estampado */
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .8), 0 0 10px rgba(240, 223, 174, .25);
}
.bookHint { color: #d9c084; font-family: Georgia, serif; font-style: italic; }

/* — Monitor CRT: bisel plástico, pantalla curva y LED — */
.utilityCardCommands.utilityObjectCard {
  background: linear-gradient(165deg, #2a2f2b, #14171522 40%, #101311), linear-gradient(165deg, #262b27, #0e100e);
  border: 2px solid #3f4a42;
  border-radius: 16px;
  padding: 14px 14px 10px;
}
.crtScreen {
  position: relative;
  height: 96px;
  border-radius: 12px / 16px;
  background:
    repeating-linear-gradient(0deg, rgba(74, 222, 128, .07) 0 2px, transparent 2px 4px),
    radial-gradient(120% 130% at 50% 45%, #06240f, #020d06 78%);
  border: 3px solid #0a0d0b;
  box-shadow: inset 0 0 26px rgba(74, 222, 128, .22), inset 0 0 6px #000, 0 1px 0 rgba(255, 255, 255, .06);
  display: flex;
  align-items: center;
  padding: 0 14px;
  overflow: hidden;
}
.crtLine { color: #4ade80; font: 600 13px/1.3 "Cascadia Code", Consolas, monospace; text-shadow: 0 0 7px rgba(74, 222, 128, .8); animation: crtCaret 1.05s steps(1) infinite; }
@keyframes crtCaret { 50% { opacity: .55; } }
.crtTitle { color: #9fb3a6; font-family: "Cascadia Code", Consolas, monospace; }
.utilityCardCommands .objectHint { color: #7e948a; }
.crtLed {
  position: absolute;
  right: 16px;
  bottom: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 9px #4ade80, 0 0 2px #fff inset;
  animation: crtCaret 2.1s steps(1) infinite;
}

/* ============================================================================
   V14.5.13 — Reparación del layout de Extras + Manual libro de verdad.
   El DOM roto de 14.5.12 hacía que los objetos ocuparan todo el ancho; ahora el
   grid los contiene SIEMPRE (minmax con tope), centrados sobre la mesa, y el
   libro tiene formato de libro, doble textura de cuero y animaciones.
   ============================================================================ */

#screenUtility .utilityCleanGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 296px));
  justify-content: center;
  align-items: stretch;
  gap: 22px;
  padding: 26px 18px 34px;
}
#screenUtility .utilityBackOnly { grid-column: 1 / -1; justify-self: start; }
.utilityObjectCard { width: 100%; max-width: 320px; margin: 0 auto; min-height: 215px; }
.utilityCardVersions.utilityObjectCard { min-height: 215px; padding-left: 18px; padding-right: 18px; }
.utilityCardVersions .inkTitle { font-size: 1.02em; }

/* — EL LIBRO, versión de verdad: formato vertical, cuero repujado, animado — */
.utilityCardManual.utilityObjectCard {
  aspect-ratio: 3 / 4.05;
  max-width: 238px;
  min-height: 0;
  justify-self: center;
  background:
    var(--paper-noise),
    var(--paper-noise),
    radial-gradient(130% 100% at 74% 10%, rgba(214, 160, 90, .20), transparent 52%),
    radial-gradient(120% 130% at 50% 108%, rgba(0, 0, 0, .55), transparent 55%),
    linear-gradient(158deg, #5a3a19, #3a2410 55%, #241505);
  background-size: 160px 160px, 90px 90px, auto, auto, auto; /* doble grano = cuero */
  background-blend-mode: overlay, multiply, normal, normal, normal;
  border: 2px solid #8a5a25;
  border-radius: 8px 15px 15px 8px;
  box-shadow:
    inset 0 0 0 3px rgba(20, 10, 2, .55),
    inset 0 0 0 5px rgba(214, 170, 100, .18), /* repujado del marco */
    inset 0 0 30px rgba(0, 0, 0, .6),
    inset -4px 0 7px rgba(0, 0, 0, .38),
    0 14px 26px -12px rgba(0, 0, 0, .85);
  animation: bookFloat 3.4s ease-in-out infinite;
  transform-origin: 12% 50%; /* bisagra en el lomo */
  transition: transform .28s ease, box-shadow .28s ease;
}
.utilityCardManual.utilityObjectCard:hover {
  animation-play-state: paused;
  transform: perspective(720px) rotateY(-16deg) translateY(-4px); /* la tapa se abre */
  box-shadow:
    inset 0 0 0 3px rgba(20, 10, 2, .55),
    inset 0 0 0 5px rgba(214, 170, 100, .22),
    inset 0 0 30px rgba(0, 0, 0, .6),
    14px 18px 30px -12px rgba(0, 0, 0, .9);
}
@keyframes bookFloat {
  0%, 100% { transform: translateY(0) rotate(-.4deg); }
  50% { transform: translateY(-6px) rotate(.4deg); }
}
.bookTitle { animation: bookShine 5.5s ease-in-out infinite; }
@keyframes bookShine {
  0%, 78%, 100% { text-shadow: 0 1px 0 rgba(0, 0, 0, .8), 0 0 8px rgba(240, 223, 174, .2); }
  86% { text-shadow: 0 1px 0 rgba(0, 0, 0, .8), 0 0 20px rgba(255, 238, 180, .85), 0 0 34px rgba(255, 238, 180, .4); }
}
/* Esquineros metálicos dorados */
.bookCorner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 3px solid #caa24f;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7));
}
.bookCornerTL { top: 5px; left: 22px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.bookCornerBR { bottom: 5px; right: 12px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.utilityCardManual .bookTitlePlate { margin-top: 8px; }
.utilityCardManual .bookHint { position: absolute; bottom: 14px; left: 26px; right: 16px; text-align: center; }

/* La consola y el plano, contenidos (nunca full-width) y con proporción */
.utilityCardCommands.utilityObjectCard { max-width: 300px; }
.utilityCardMaps.utilityObjectCard { max-width: 300px; }

/* ============================================================================
   V14.5.14 — Manual Reader & Extras Polish. Bloque final: gana por cascada.
   ============================================================================ */

/* Sin flote: cualquier imprevisto lo rompía feo. El hover de tapa se queda. */
.utilityCardManual.utilityObjectCard {
  animation: none; /* 14.5.14: sin flote */
}

/* Volver de Extras a la DERECHA */
#screenUtility .utilityBackOnly { justify-self: end; }

/* Escenario (no tesoro): el boceto ocupa el plano */
.stageSketch { position: absolute; inset: 10px 10px auto 10px; height: 56%; pointer-events: none; opacity: .95; }

/* Consola sin título duplicado: la pantalla manda */
.utilityCardCommands.utilityObjectCard { justify-content: space-between; }
.utilityCardCommands .crtScreen { flex: 1 0 auto; min-height: 108px; }

/* ================= Dentro del libro ================= */

/* Índice: una sola barra. El título queda fijo; solo la lista scrollea. */
#modal .manualBookLeft {
  overflow: hidden; /* índice: una sola barra */
  display: flex;
  flex-direction: column;
}
#modal .manualBookLeft .manualBookKicker,
#modal .manualBookLeft h2 { flex: 0 0 auto; }
#modal .manualBookLeft .manualIndexList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 6px 0 0;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: #8a5f2b #e2d0a4;
}
#modal .manualBookLeft .manualIndexList::-webkit-scrollbar { width: 9px; }
#modal .manualBookLeft .manualIndexList::-webkit-scrollbar-track { background: #e2d0a4; border-radius: 8px; box-shadow: inset 0 0 4px rgba(97, 64, 20, .35); }
#modal .manualBookLeft .manualIndexList::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #9a6c31, #6d4a1d); border-radius: 8px; border: 2px solid #e2d0a4; }
#modal .manualBookLeft .manualIndexList li button { width: 100%; text-align: left; padding: 5px 6px; border-radius: 4px; }
#modal .manualBookLeft .manualIndexList li button:hover { background: rgba(122, 91, 44, .14); }

/* Papel mejor combinado: fibras diagonales + línea de margen de cuaderno viejo */
#modal .manualBookPage {
  background:
    var(--paper-noise),
    repeating-linear-gradient(48deg, rgba(122, 91, 44, .028) 0 2px, transparent 2px 7px),
    radial-gradient(130% 100% at 50% -8%, var(--paper-hi), var(--paper-lo) 74%, #c3a877),
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(122, 91, 44, .05) 26px 27px);
  background-blend-mode: multiply, normal, normal, normal;
}
#modal .manualBookRight { background-image:
    linear-gradient(90deg, transparent 42px, rgba(150, 32, 22, .30) 42px, rgba(150, 32, 22, .30) 43px, transparent 43px),
    var(--paper-noise),
    repeating-linear-gradient(48deg, rgba(122, 91, 44, .028) 0 2px, transparent 2px 7px),
    radial-gradient(130% 100% at 50% -8%, var(--paper-hi), var(--paper-lo) 74%, #c3a877); }
#modal .manualBookLeft { background-image:
    linear-gradient(270deg, transparent 42px, rgba(150, 32, 22, .30) 42px, rgba(150, 32, 22, .30) 43px, transparent 43px),
    var(--paper-noise),
    repeating-linear-gradient(48deg, rgba(122, 91, 44, .028) 0 2px, transparent 2px 7px),
    radial-gradient(130% 100% at 50% -8%, var(--paper-hi), var(--paper-lo) 74%, #c3a877); }
#modal .manualBookPage p { line-height: 1.58; }
#modal .manualBookPage h2 { letter-spacing: .04em; position: relative; }
#modal .manualBookPage h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, #b48a3c, transparent);
}

/* Vuelta de página 14.5.14: curl 3D con bisagra, sombra viva y hojas de papel reales */
#modal .manualBookScene { perspective: 1400px; }
#modal .manualBookScene .manualPageFold {
  background:
    var(--paper-noise),
    radial-gradient(130% 100% at 50% -8%, var(--paper-hi), var(--paper-lo) 78%);
  background-blend-mode: multiply, normal;
  border: 1px solid #a9884f;
  border-radius: 4px 10px 10px 4px;
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
}
#modal .manualBookScene.pageTurning.pageTurningForward .manualPageFold {
  transform-origin: left center;
  animation: manualCurlF .62s cubic-bezier(.22, .85, .3, 1) both;
  animation-delay: calc(var(--turn-i, 0) * .07s);
}
#modal .manualBookScene.pageTurning.pageTurningBack .manualPageFold {
  transform-origin: right center;
  animation: manualCurlB .62s cubic-bezier(.22, .85, .3, 1) both;
  animation-delay: calc(var(--turn-i, 0) * .07s);
}
@keyframes manualCurlF {
  0% { transform: rotateY(0deg); box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }
  55% { box-shadow: -26px 14px 30px rgba(0, 0, 0, .45); }
  100% { transform: rotateY(-158deg); box-shadow: 0 4px 10px rgba(0, 0, 0, .2); opacity: .96; }
}
@keyframes manualCurlB {
  0% { transform: rotateY(0deg); box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }
  55% { box-shadow: 26px 14px 30px rgba(0, 0, 0, .45); }
  100% { transform: rotateY(158deg); box-shadow: 0 4px 10px rgba(0, 0, 0, .2); opacity: .96; }
}
#modal .manualBookScene.pageTurning .manualBookRight { animation: manualSettle .5s ease-out both; }
@keyframes manualSettle {
  0% { opacity: .3; transform: rotateY(7deg); }
  100% { opacity: 1; transform: rotateY(0deg); }
}

/* ============================================================================
   V14.5.16 — Lector fiel, tríada sonora y menú fluido. Bloque final: gana.
   ============================================================================ */

/* Hojas del tamaño de la página derecha: se adaptan al libro abierto, siempre */
#modal.manualModalActive .manualFoldLayer {
  inset: 0 0 0 50% !important; /* hojas solo sobre la página derecha */
  perspective: 1400px;
}
#modal.manualModalActive .manualPageFold {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 14px 18px;
}
/* Tiempo total constante: de la primera a la última hoja SIEMPRE tarda lo mismo;
   el reparto de arranques depende de cuántas hojas sean, no acumula velocidad. */
#modal .manualBookScene.pageTurning.pageTurningForward .manualPageFold,
#modal .manualBookScene.pageTurning.pageTurningBack .manualPageFold {
  animation-duration: .5s;
  animation-delay: calc(var(--turn-i, 0) / max(var(--turn-total, 1) - 1, 1) * .28s);
}
/* Fidelidad del papel: el libro abierto recupera el grano de la tapa (el override
   de la línea de margen había pisado el blend y lavaba la textura). */
#modal .manualBookLeft,
#modal .manualBookRight {
  background-blend-mode: normal, multiply, normal, normal;
  box-shadow:
    inset 0 0 34px rgba(97, 64, 20, .46),
    inset 0 0 6px rgba(60, 36, 8, .55);
}

/* Boceto del creador de mapas más abajo: el texto ya no se superpone */
.stageSketch { inset: 32px 12px auto 12px; height: 45%; }
.utilityCardMaps .objectTitle { margin-top: auto; padding-top: 6px; }

/* Consola: la pantalla hacker va al medio ocupando el x casi entero */
.utilityCardCommands.utilityObjectCard { justify-content: center; }
.utilityCardCommands .crtScreen {
  width: calc(100% + 10px);
  margin: 0 -5px;
  min-height: 122px;
  justify-content: center;
}
.utilityCardCommands .crtLine { width: 100%; text-align: center; }
.utilityCardCommands .objectHint { text-align: center; margin-top: 8px; }

/* Editor de mapas: Volver a la DERECHA de la pantalla; los otros dos quedan a la izquierda */
.mapEditorActionsRow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mapEditorActionsRow .mapEditorBackButton { margin-left: auto; }

/* Menú fluido: textos y botones del Home escalan con la pantalla (clamp), nunca
   quedan chiquitos y centrados en monitores grandes ni desbordan en chicos. */
#screenHome .mainGameTitle { font-size: clamp(2.1rem, 1.1rem + 3vw, 4.6rem); }
#screenHome .homeTagline { font-size: clamp(.95rem, .78rem + .55vw, 1.4rem); }
#screenHome .homeMenuPanel { padding: clamp(16px, 1.2vw + 10px, 34px); }
#screenHome .homeMenuButtons { gap: clamp(10px, 1vw, 22px); }
#screenHome .homeNavButton {
  font-size: clamp(1rem, .82rem + .85vw, 1.75rem);
  padding: clamp(10px, .5vw + 8px, 19px) clamp(18px, 2.2vw, 38px);
  min-width: clamp(170px, 21vw, 330px);
}

/* ============================================================================
   V14.5.17 — Fábrica real y verdad de layout. Bloque final: gana.
   ============================================================================ */

/* Mapas: el TEXTO queda arriba fijo; el dibujo va debajo del texto, en flujo */
.utilityCardMaps.utilityObjectCard { justify-content: flex-start; }
.utilityCardMaps .objectTitle { margin-top: 0; padding-top: 2px; }
.stageSketch {
  position: static; /* dibujo debajo del texto: nunca más superpuesto */
  width: 100%;
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 8px;
}

/* Consola: la parte verde AL MEDIO vertical, ancho épico completo sin recortes */
.utilityCardCommands.utilityObjectCard { justify-content: flex-start; }
.utilityCardCommands .crtScreen {
  margin: auto 0; /* centrado vertical real en el espacio libre */
  width: 100%;
  min-height: 128px;
}
.utilityCardCommands .objectHint { margin-top: 0; }

/* Home: el título SIEMPRE en una línea, anclado arriba-izquierda; cuanto más
   grande la pantalla, más crece hacia ahí (nunca baja ni se parte en dos). */
#screenHome .homeMenuGrid { align-content: start; justify-items: start; }
#screenHome .homeMenuPanel { align-self: start; margin-top: clamp(16px, 2.5vh, 30px); }
#screenHome .mainGameTitle {
  white-space: nowrap; /* una línea, jamás dos */
  font-size: min(clamp(2.1rem, 1rem + 2.6vw, 4.2rem), 8.2vw);
  line-height: 1.02;
}

/* ============================================================================
   V14.5.18 — La hoja se arranca. Bloque final: gana por cascada.
   ============================================================================ */

/* Arranque de hoja: se desprende de arriba a abajo (el borde del lomo se rasga
   primero arriba), gira apenas y sale por la derecha. Animación por FRAMES
   (steps) con porcentajes: adaptable a cualquier tamaño de hoja. Volver atrás
   es exactamente la misma animación en reversa (la hoja vuelve a pegarse). */
#modal .manualBookScene.pageTurning.pageTurningForward .manualPageFold,
#modal .manualBookScene.pageTurning.pageTurningBack .manualPageFold {
  animation-name: manualTearF;
  animation-duration: .55s;
  animation-timing-function: steps(11);
  animation-fill-mode: both;
  animation-delay: calc(var(--turn-i, 0) / max(var(--turn-total, 1) - 1, 1) * .26s);
  transform-origin: right center;
}
#modal .manualBookScene.pageTurning.pageTurningBack .manualPageFold {
  animation-direction: reverse;
}
@keyframes manualTearF {
  0% {
    transform: translate(0, 0) rotate(0deg);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 1.5% 88%, 0.5% 66%, 1.8% 44%, 0.6% 22%);
  }
  30% {
    transform: translate(3%, -1%) rotate(1.5deg);
    clip-path: polygon(7% 0%, 100% 0%, 100% 100%, 0% 100%, 1.5% 88%, 0.5% 66%, 1.8% 44%, 4% 22%);
  }
  55% {
    transform: translate(14%, 0%) rotate(4deg);
    clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 3% 100%, 4% 88%, 3.5% 66%, 6% 44%, 8% 22%);
  }
  80% {
    transform: translate(58%, 3%) rotate(7deg);
    clip-path: polygon(11% 0%, 100% 0%, 100% 100%, 6% 100%, 7% 88%, 6.5% 66%, 8% 44%, 9.5% 22%);
  }
  100% {
    transform: translate(132%, 6%) rotate(10deg);
    opacity: .92;
    clip-path: polygon(11% 0%, 100% 0%, 100% 100%, 6% 100%, 7% 88%, 6.5% 66%, 8% 44%, 9.5% 22%);
  }
}
/* Durante el arranque, la página de abajo no anima nada (ni settle ni parpadeo) */
#modal .manualBookScene.pageTurning .manualBookRight { animation: none; }

/* ============================================================================
   V14.5.19 — Copyright del menú + botones táctiles solo en equipos con touch.
   ============================================================================ */

/* Copyright abajo-izquierda del menú inicial */
.homeCopyright {
  position: absolute;
  left: clamp(14px, 2vw, 34px);
  bottom: clamp(12px, 2vh, 26px);
  font-size: clamp(.7rem, .6rem + .35vw, .92rem);
  letter-spacing: .06em;
  color: rgba(226, 232, 240, .5);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  pointer-events: none;
  user-select: none;
  z-index: 6;
}

/* Botones táctiles: SOLO en equipos con touch real. En PC/netbook/monitor sin
   touch no se renderizan NI reciben clicks, aunque algún estado los intente mostrar.
   La media query (pointer: fine) + (hover: hover) = mouse sin dedo => fuera. */
@media (hover: hover) and (pointer: fine) {
  body:not(.f2dTouchLikely) .f2dTouchControls {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
}
/* Cinturón y tiradores: sin la clase de dispositivo táctil, nunca interactúa */
body:not(.f2dTouchLikely):not(.f2dTouchBattle) .f2dTouchControls {
  pointer-events: none;
}

/* 14.5.82 — roster-only selection + match settings gear */
.setupContinueRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.rosterOnlySelectionFlow { position: relative; }
.rosterOnlyHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.selectionHeaderKicker,
.selectionSettingsKicker {
  display: block;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  font-weight: 900;
  opacity: .68;
  margin-bottom: 4px;
}
.selectionHeaderActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.selectionCurrentStagePill {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.55);
  font-size: 12px;
  opacity: .9;
}
.selectionGearButton {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  font-size: 22px;
  display: grid;
  place-items: center;
  padding: 0;
}
.rosterOnlyFooter {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.selectionSettingsShade {
  position: fixed;
  inset: 0;
  z-index: 92;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(2,6,23,.76);
  backdrop-filter: blur(10px);
}
.selectionSettingsPanel {
  width: min(1180px, calc(100vw - 34px));
  max-height: min(880px, calc(100vh - 34px));
  overflow: auto;
  padding: 0;
  border-radius: 26px;
}
.selectionSettingsHeader {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  background: rgba(8,15,31,.96);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
}
.selectionSettingsHeader h2 { margin: 0; }
.selectionSettingsClose { min-width: 44px; }
.selectionSettingsBody {
  display: grid;
  gap: 16px;
  padding: 18px;
}
.selectionSettingsSection {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.58);
  border-radius: 22px;
  padding: 16px;
}
.selectionSettingsSectionTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.selectionSettingsSectionTitle span {
  display: block;
  font-size: 20px;
  font-weight: 900;
}
.selectionSettingsSectionTitle small {
  display: block;
  margin-top: 3px;
  opacity: .68;
}
.selectionRuleGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}
.selectionRuleHidden { display: none !important; }
.selectionSettingsToggle {
  min-height: 44px;
  align-self: end;
}
.selectionSettingsStageLayout {
  display: grid;
  grid-template-columns: minmax(300px, .85fr) minmax(420px, 1.45fr);
  gap: 16px;
  align-items: start;
}
.selectionSettingsStageHero {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 8px;
}
.selectionSettingsStageHero canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border-radius: 18px;
  background: #020617;
  border: 1px solid rgba(255,255,255,.12);
}
.selectionSettingsStageHero strong { font-size: 17px; }
.selectionSettingsStageGrid {
  max-height: 430px;
  overflow: auto;
  align-content: start;
  padding-right: 4px;
}
.selectionSettingsActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
@media (max-width: 900px) {
  .selectionRuleGrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .selectionSettingsStageLayout { grid-template-columns: 1fr; }
  .selectionSettingsStageHero { position: static; }
}
@media (max-width: 620px) {
  .selectionSettingsShade { padding: 8px; }
  .selectionSettingsPanel { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 18px; }
  .selectionSettingsHeader { padding: 14px; }
  .selectionSettingsBody { padding: 10px; }
  .selectionRuleGrid { grid-template-columns: 1fr; }
  .selectionHeaderActions { width: 100%; justify-content: space-between; }
  .rosterOnlyHeader { align-items: flex-start; flex-direction: column; }
  .selectionCurrentStagePill { max-width: 180px; }
}

/* 14.5.82 — Rounds: selección contextual + draft autoritativo. */
.roundsModeSettingsNotice{margin-top:14px;display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid rgba(244,63,94,.38);border-radius:16px;background:linear-gradient(135deg,rgba(127,29,29,.20),rgba(88,28,135,.18));}
.roundsModeSettingsNotice b{color:#fecdd3}.roundsModeSettingsNotice span{color:#cbd5e1;font-size:.9rem}
.roundsLockedStageSection{border-color:rgba(167,139,250,.30)}
.roundsFixedStageHero{max-width:620px;margin:0 auto}.roundsFixedStageHero canvas{width:100%;border-radius:18px;border:1px solid rgba(244,63,94,.28);background:#10091f}
.roundsModeOverlay{position:fixed;inset:0;z-index:90;pointer-events:none;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f8fafc}
.roundsModeOverlay.hidden{display:none}.roundsDim{position:absolute;inset:0;background:rgba(3,5,16,.66);backdrop-filter:blur(2px)}
.roundsTopHud{position:absolute;left:18px;right:18px;top:18px;display:flex;justify-content:space-between;align-items:flex-start;gap:18px;z-index:2}
.roundsOwnedGroup{max-width:min(48vw,560px);padding:10px 12px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(15,23,42,.78);box-shadow:0 12px 30px rgba(0,0,0,.28)}
.roundsOwnedGroup small{display:block;color:#cbd5e1;font-weight:800;margin-bottom:7px}.roundsOwnedList{display:flex;gap:7px;flex-wrap:wrap}.roundsOwnedEmpty{color:#64748b;font-size:.8rem}
.roundsOwnedCard{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:11px;background:rgba(88,28,135,.54);border:1px solid rgba(196,181,253,.24);font-size:.78rem}.roundsOwnedCard b{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#7f1d1d;color:#fff}
.roundsScore{display:flex;align-items:center;gap:12px;padding:9px 14px;border-radius:999px;background:rgba(15,23,42,.84);border:1px solid rgba(255,255,255,.15);font-weight:900}.roundsScore b{font-size:1.35rem;color:#fda4af}.roundsScore span{font-size:.8rem;color:#c4b5fd;text-transform:uppercase;letter-spacing:.12em}
.roundsDraftCenter{position:absolute;inset:96px 5vw 28px;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.roundsDraftHeading{text-align:center;max-width:760px}.roundsDraftHeading span{display:block;color:#fb7185;font-size:.78rem;font-weight:1000;letter-spacing:.22em}.roundsDraftHeading strong{display:block;margin-top:5px;font-size:clamp(1.5rem,3vw,2.65rem);line-height:1.02}.roundsDraftHeading small{display:block;margin-top:8px;color:#cbd5e1}
.roundsDraftCards{width:min(1120px,94vw);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px);align-items:stretch;pointer-events:auto}
.roundsDraftCard{position:relative;overflow:hidden;padding:0;min-height:330px;border-radius:24px;border:2px solid rgba(255,255,255,.14);background:#3b0764;box-shadow:0 20px 60px rgba(0,0,0,.38);transform:translateY(0) scale(1);transition:transform .18s ease,opacity .34s ease,filter .18s ease,box-shadow .18s ease,border-color .18s ease;text-align:left}
.roundsDraftCard:hover,.roundsDraftCard.selected{transform:translateY(-12px) scale(1.055);border-color:#fda4af;box-shadow:0 24px 70px rgba(244,63,94,.28),0 0 0 5px rgba(167,139,250,.12)}
.roundsCardArt{height:58%;min-height:190px;display:grid;place-items:center;background:linear-gradient(145deg,#7f1d1d,#dc2626);position:relative}.roundsCardArt:after{content:"";position:absolute;inset:14px;border:2px solid rgba(255,255,255,.15);border-radius:18px}.roundsCardArt span{font-size:clamp(4.5rem,9vw,8rem);font-weight:1000;color:#fff7ed;text-shadow:0 14px 28px rgba(0,0,0,.28)}
.roundsCardText{min-height:140px;padding:18px 18px 20px;background:linear-gradient(180deg,#5b21b6,#3b0764)}.roundsCardText strong{font-size:clamp(1.15rem,2vw,1.7rem)}.roundsCardText p{margin:8px 0 0;color:#ede9fe;line-height:1.32;font-weight:650}
.roundsDraftCard.chosen{transform:translateY(-18px) scale(1.1);filter:brightness(1.18);border-color:#fde68a;box-shadow:0 0 42px rgba(250,204,21,.48),0 28px 70px rgba(0,0,0,.42)}
.roundsDraftCard.discarded{transform:translateY(150px) scale(.7);opacity:.6;pointer-events:none}
.roundsDraftTimer{width:min(560px,78vw);height:18px;border-radius:999px;background:rgba(15,23,42,.78);border:1px solid rgba(255,255,255,.16);overflow:hidden;position:relative}.roundsDraftTimer span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#7c3aed,#fb7185);transition:width .1s linear}.roundsDraftTimer b{position:absolute;inset:0;display:grid;place-items:center;font-size:.72rem;text-shadow:0 1px 3px #000}
.roundsBuildDetails{position:absolute;left:18px;top:126px;z-index:4;max-width:min(440px,46vw);padding:14px;border-radius:18px;border:1px solid rgba(250,204,21,.3);background:rgba(15,23,42,.95);box-shadow:0 18px 55px rgba(0,0,0,.45);pointer-events:none}.roundsBuildDetails.hidden{display:none}.roundsBuildDetails h3{margin:0 0 10px}.roundsBuildDetails>div{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:780px){.roundsTopHud{top:10px;left:10px;right:10px}.roundsScore{display:none}.roundsOwnedGroup{max-width:100%}.roundsDraftCenter{inset:110px 12px 18px}.roundsDraftCards{gap:8px}.roundsDraftCard{min-height:260px;border-radius:16px}.roundsCardArt{min-height:145px}.roundsCardText{padding:12px;min-height:115px}.roundsCardText p{font-size:.78rem}.roundsBuildDetails{left:10px;right:10px;top:108px;max-width:none}}

/* 14.5.83 — selección de modo visual + selector de mapas restaurado + draft sin mouse */
.selectionModeStep{display:grid;gap:16px}
.selectionModeIntro{padding:4px 4px 0}.selectionModeIntro h3{margin:3px 0 6px;font-size:clamp(1.5rem,3vw,2.4rem)}.selectionModeIntro p{margin:0;color:#94a3b8;max-width:760px}
.selectionModeGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.selectionModeCard{position:relative;display:flex;min-height:190px;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px;border-radius:24px;border:2px solid rgba(148,163,184,.18);background:linear-gradient(160deg,rgba(15,23,42,.94),rgba(2,6,23,.78));text-align:left;overflow:hidden}
.selectionModeCard:before{content:"";position:absolute;inset:auto -35% -55% 15%;height:150px;border-radius:50%;filter:blur(20px);opacity:.18;pointer-events:none}.selectionModeCard[data-mode-accent='red']:before{background:#ef4444}.selectionModeCard[data-mode-accent='blue']:before{background:#38bdf8}.selectionModeCard[data-mode-accent='amber']:before{background:#f59e0b}.selectionModeCard[data-mode-accent='violet']:before{background:#8b5cf6}
.selectionModeCard:hover{transform:translateY(-4px);border-color:rgba(248,250,252,.38)}.selectionModeCard.selected{border-color:#f8fafc;box-shadow:0 0 0 4px rgba(255,255,255,.08),0 20px 55px rgba(0,0,0,.35)}
.selectionModeIcon{font-size:clamp(2.3rem,5vw,4rem);line-height:1;font-weight:1000;color:#f8fafc;text-shadow:0 10px 24px rgba(0,0,0,.35)}
.selectionModeCopy{display:grid;gap:7px;position:relative;z-index:1}.selectionModeCopy strong{font-size:1.3rem}.selectionModeCopy small{color:#cbd5e1;line-height:1.35;font-weight:650}
.selectionModeCheck{position:absolute;right:14px;top:14px;display:grid;place-items:center;width:30px;height:30px;border-radius:999px;background:#f8fafc;color:#020617;font-weight:1000;opacity:0;transform:scale(.6)}.selectionModeCard.selected .selectionModeCheck{opacity:1;transform:scale(1)}
.selectionModeRulePanel{display:grid;gap:14px;padding:18px}.selectionModeRuleHeader span{display:block;font-weight:950;font-size:1.08rem}.selectionModeRuleHeader small{display:block;margin-top:3px;color:#94a3b8}.selectionModeRuleControls{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.selectionModeRuleControls .configField{min-width:180px}.selectionModeIndicatorToggle{min-height:44px;padding:10px 13px;border:1px solid rgba(148,163,184,.2);border-radius:14px;background:rgba(15,23,42,.54)}
.selectionModeRoundsNote{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;border:1px solid rgba(167,139,250,.34);background:linear-gradient(135deg,rgba(88,28,135,.22),rgba(127,29,29,.18))}.selectionModeRoundsNote b{color:#ddd6fe;white-space:nowrap}.selectionModeRoundsNote span{color:#cbd5e1}
.selectionModeFooter{display:flex;justify-content:flex-end}.selectionModeFooter .selectionNextButton{min-width:min(320px,100%)}
@media(max-width:1050px){.selectionModeGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.selectionModeGrid{grid-template-columns:1fr}.selectionModeCard{min-height:150px}.selectionModeRuleControls{display:grid;grid-template-columns:1fr}.selectionModeRuleControls .configField{min-width:0}.selectionModeRoundsNote{flex-direction:column}}

/* El draft de Rounds se gobierna únicamente con controles del jugador. El mouse no
   selecciona, no confirma, no cambia el hover activo y no roba foco. */
.roundsDraftCards{pointer-events:none!important;user-select:none}
.roundsDraftCard{pointer-events:none!important;cursor:default!important;user-select:none}
.roundsDraftCard:not(.selected):not(.chosen):hover{transform:translateY(0) scale(1);border-color:rgba(255,255,255,.14);box-shadow:0 20px 60px rgba(0,0,0,.38)}
.roundsDraftCard.synergy{border-color:#facc15;background:#713f12;box-shadow:0 20px 60px rgba(0,0,0,.38),inset 0 0 0 1px rgba(253,224,71,.18)}
.roundsDraftCard.synergy .roundsCardArt{background:linear-gradient(145deg,#92400e,#eab308)}
.roundsDraftCard.synergy .roundsCardText{background:linear-gradient(180deg,#854d0e,#422006)}
.roundsDraftCard.synergy.selected{border-color:#fef08a;box-shadow:0 24px 70px rgba(234,179,8,.28),0 0 0 5px rgba(250,204,21,.13)}
.roundsOwnedCard.synergy{background:linear-gradient(135deg,rgba(133,77,14,.84),rgba(113,63,18,.72));border-color:rgba(250,204,21,.5);color:#fef3c7}

/* 14.5.85 — selector de modos por familias, sin capturas/referencias externas. */
.modeSelectRework14585{gap:18px}
.compactModeIntro14585{padding-bottom:2px}.compactModeIntro14585 h3{max-width:900px}
.selectionModeFamilyGrid14585{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:stretch}
.selectionModeFamilyGrid14585.standardOnly{grid-template-columns:1fr}
.selectionModeFamily14585{display:grid;grid-template-rows:auto 1fr;gap:10px;padding:10px;border:2px solid rgba(148,163,184,.14);border-radius:28px;background:linear-gradient(160deg,rgba(15,23,42,.82),rgba(2,6,23,.68));transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.selectionModeFamily14585.selected{border-color:rgba(248,250,252,.72);box-shadow:0 22px 65px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.07)}
.selectionModeFamilyHero14585{min-height:220px;padding:0;border:0;border-radius:20px;overflow:hidden;display:grid;grid-template-columns:minmax(210px,.9fr) minmax(220px,1.1fr);align-items:stretch;background:linear-gradient(135deg,rgba(15,23,42,.96),rgba(30,41,59,.78));text-align:left;box-shadow:none}
.selectionModeFamilyHero14585:hover{transform:none;filter:brightness(1.05)}
.selectionModeFamilyCopy14585{display:flex;flex-direction:column;justify-content:center;padding:24px;gap:6px}.selectionModeFamilyCopy14585>span{font-size:.72rem;letter-spacing:.18em;color:#94a3b8;font-weight:1000}.selectionModeFamilyCopy14585 strong{font-size:clamp(1.5rem,3vw,2.5rem);line-height:1}.selectionModeFamilyCopy14585 small{color:#cbd5e1;line-height:1.35;font-weight:650}
.selectionModeDiagram14585{position:relative;min-height:220px;overflow:hidden;background:radial-gradient(circle at 50% 28%,rgba(56,189,248,.20),transparent 34%),linear-gradient(180deg,#0f172a,#020617)}
.classicDiagram14585:after{content:"";position:absolute;left:12%;right:12%;bottom:28%;height:16px;border-radius:999px;background:linear-gradient(180deg,#94a3b8,#334155);box-shadow:0 14px 0 -4px rgba(15,23,42,.9)}
.modeFighter14585{position:absolute;bottom:calc(28% + 16px);width:26px;height:54px;border-radius:12px 12px 8px 8px;transform-origin:bottom center}.modeFighter14585:before{content:"";position:absolute;left:4px;top:-18px;width:18px;height:18px;border-radius:50%;background:inherit}.fighterA14585{left:31%;background:#38bdf8;transform:rotate(7deg)}.fighterB14585{right:31%;background:#fb7185;transform:rotate(-7deg)}
.modeHudLife14585,.modeHudClock14585{position:absolute;top:14px;padding:6px 9px;border-radius:999px;background:rgba(2,6,23,.72);border:1px solid rgba(255,255,255,.12);font-size:.72rem}.modeHudLife14585{left:14px;color:#fb7185;letter-spacing:.08em}.modeHudClock14585{right:14px;color:#f8fafc}
.roundsDiagram14585{background:radial-gradient(circle at 50% 45%,rgba(168,85,247,.34),transparent 42%),linear-gradient(145deg,#1e1b4b,#020617)}
.miniPerkCard14585{position:absolute;left:50%;top:50%;width:72px;height:106px;margin:-53px 0 0 -36px;border-radius:14px;border:2px solid rgba(255,255,255,.18);display:grid;place-items:center;font-size:2rem;font-weight:1000;background:linear-gradient(180deg,#991b1b 0 48%,#5b21b6 48%);box-shadow:0 18px 36px rgba(0,0,0,.35)}.perkBack14585{transform:translate(-55px,9px) rotate(-13deg);opacity:.45}.perkLeft14585{transform:translate(0,-10px) rotate(-2deg);z-index:2;color:#fff}.perkRight14585{transform:translate(55px,10px) rotate(13deg);color:#fff}.roundDivider14585{position:absolute;left:8%;right:8%;bottom:22px;height:2px;background:linear-gradient(90deg,transparent,#a78bfa,transparent)}
.selectionModeRuleChoices14585{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.roundsEndChoices14585{grid-template-columns:repeat(2,minmax(0,1fr))}
.selectionModeRuleChoice{min-height:92px;padding:12px 13px;border-radius:16px;background:rgba(15,23,42,.68);border:1px solid rgba(148,163,184,.18);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;text-align:left;box-shadow:none}.selectionModeRuleChoice:hover{transform:translateY(-2px);border-color:rgba(248,250,252,.36)}.selectionModeRuleChoice.selected{background:linear-gradient(135deg,rgba(30,64,175,.28),rgba(88,28,135,.26));border-color:rgba(248,250,252,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.selectionModeRuleChoice strong{font-size:1rem}.selectionModeRuleChoice small{color:#94a3b8;line-height:1.25}
.modeRulePanel14585{padding:16px 18px}.modeRulePanel14585 .selectionModeRuleControls{align-items:center}.modeRulePanel14585 .configField{min-width:220px}
.rosterOnlyFooter{justify-content:space-between}
@media(max-width:980px){.selectionModeFamilyGrid14585{grid-template-columns:1fr}.selectionModeFamilyHero14585{grid-template-columns:minmax(180px,.8fr) 1.2fr}.selectionModeFamilyGrid14585.standardOnly .selectionModeFamilyHero14585{grid-template-columns:minmax(180px,.7fr) 1.3fr}}
@media(max-width:650px){.selectionModeFamilyHero14585{grid-template-columns:1fr}.selectionModeDiagram14585{min-height:165px}.selectionModeFamilyCopy14585{padding:18px}.selectionModeRuleChoices14585,.roundsEndChoices14585{grid-template-columns:1fr}.modeRulePanel14585 .configField{min-width:0;width:100%}}

/* 14.5.86 — flujo de modos/reglas inspirado en la lectura visual de fighting games.
   La referencia roja/violeta se usa como lenguaje de composición, no como imagen/asset. */
.modeFamilyScreen14586,.rulesHub14586,.ruleEditor14586{display:grid;gap:18px}
.modeFamilyLead14586{padding:4px 2px}.modeFamilyLead14586 span,.savedRulesHeader14586 span,.ruleEditorTitle14586 span{font-size:.72rem;font-weight:1000;letter-spacing:.18em;color:#93c5fd}.modeFamilyLead14586 h3{margin:5px 0 0;font-size:clamp(1.45rem,3vw,2.35rem)}
.modeFamilyCards14586{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.modeFamilyCards14586.oneMode{grid-template-columns:minmax(0,760px);justify-content:center}
.modeFamilyCard14586{padding:0;overflow:hidden;position:relative;min-height:390px;border:3px solid rgba(255,255,255,.13);border-radius:10px;background:#3b0764;box-shadow:0 16px 0 rgba(2,6,23,.72),0 28px 62px rgba(0,0,0,.38);transform:translateY(0);transition:transform .13s ease,filter .13s ease,border-color .13s ease;clip-path:polygon(0 0,100% 0,100% 94%,96% 100%,0 100%)}
.modeFamilyCard14586:hover,.modeFamilyCard14586.selected{transform:translateY(-6px);filter:brightness(1.07);border-color:#60a5fa}.modeFamilyCard14586.selected{box-shadow:0 0 0 5px rgba(59,130,246,.20),0 16px 0 rgba(2,6,23,.72),0 30px 70px rgba(37,99,235,.22)}
.modeFamilyArt14586{height:44%;min-height:180px;position:relative;display:grid;place-items:center;background:linear-gradient(145deg,#991b1b,#ef233c 58%,#ff5a5f);overflow:hidden}.modeFamilyArt14586:after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;background:#2563eb;box-shadow:0 -2px 0 rgba(15,23,42,.55),0 3px 0 rgba(147,51,234,.7)}
.modeFamilyCopy14586{min-height:56%;padding:24px 26px 28px;text-align:left;background:linear-gradient(155deg,#a83fc0,#7e22ce 52%,#4c1d95);position:relative}.modeFamilyCopy14586 small{display:block;color:#e9d5ff;font-size:.72rem;font-weight:1000;letter-spacing:.17em}.modeFamilyCopy14586 strong{display:block;margin-top:4px;font-size:clamp(2rem,4vw,3.5rem);line-height:.94;text-transform:uppercase;font-style:italic;text-shadow:4px 4px 0 rgba(15,23,42,.45)}.modeFamilyCopy14586 p{margin:12px 0 0;color:#f5f3ff;font-weight:750}
.smashSlash14586{position:absolute;width:210px;height:26px;background:#fff;transform:rotate(-22deg);box-shadow:0 22px 0 rgba(15,23,42,.35)}.modeFamilyArt14586>b{position:relative;z-index:2;font-size:5rem;font-weight:1000;font-style:italic;text-shadow:6px 6px 0 #1e3a8a}.fighterDot14586{position:absolute;width:70px;height:98px;border-radius:44% 44% 28% 28%;background:#111827;border:7px solid #fff}.fighterDot14586.left{left:12%;bottom:18px;transform:rotate(9deg)}.fighterDot14586.right{right:12%;bottom:18px;transform:rotate(-9deg)}
.roundsArt14586{display:flex;align-items:center;justify-content:center;gap:12px}.roundBadge14586{position:relative;z-index:2;display:grid;place-items:center;width:86px;height:116px;background:#f8fafc;color:#7f1d1d;font-size:2.5rem;font-weight:1000;border:7px solid #111827;transform:rotate(-6deg);box-shadow:10px 10px 0 rgba(30,58,138,.7)}.roundBadge14586:nth-child(2){transform:translateY(-18px) rotate(2deg)}.roundBadge14586:nth-child(3){transform:rotate(8deg)}.tourneyBracket14586{position:absolute;inset:28px 12%;border-top:10px solid rgba(255,255,255,.5);border-bottom:10px solid rgba(255,255,255,.22);transform:skewX(-18deg)}
.modeFamilyFooter14586{justify-content:flex-end}.modeFamilyFooter14586 .selectionNextButton{min-width:220px;font-size:1.08rem;font-weight:1000}

.rulesFlow14586 #qualitySelectionStepRoot{min-width:0}.createRuleCard14586{padding:0;display:grid;grid-template-columns:minmax(180px,.42fr) 1fr;min-height:190px;overflow:hidden;border-radius:10px;border:3px solid rgba(96,165,250,.55);background:#4c1d95;box-shadow:0 13px 0 rgba(15,23,42,.72),0 25px 60px rgba(0,0,0,.3);text-align:left}.createRuleArt14586{display:grid;place-items:center;align-content:center;gap:4px;background:linear-gradient(145deg,#991b1b,#ef233c);border-right:7px solid #2563eb}.createRuleArt14586 b{font-size:4.5rem;line-height:.8}.createRuleArt14586 span{font-weight:1000;letter-spacing:.2em}.createRuleCopy14586{padding:28px;background:linear-gradient(150deg,#a83fc0,#6d28d9)}.createRuleCopy14586 strong{display:block;font-size:clamp(1.8rem,4vw,3rem);font-style:italic;text-transform:uppercase;text-shadow:4px 4px 0 rgba(15,23,42,.4)}.createRuleCopy14586 small{display:block;margin-top:10px;color:#ede9fe;font-weight:700}
.savedRulesSection14586{display:grid;gap:12px}.savedRulesHeader14586{display:flex;justify-content:space-between;align-items:end;padding:0 2px}.savedRulesHeader14586 b{font-size:1.15rem}.savedRulesGrid14586{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}.savedRuleCard14586{position:relative;min-height:176px;border:2px solid color-mix(in srgb,var(--rule-accent) 65%,white 8%);border-radius:9px;overflow:hidden;background:#3b0764;box-shadow:0 10px 0 color-mix(in srgb,var(--rule-accent) 32%,#020617),0 20px 45px rgba(0,0,0,.28)}.savedRuleCard14586.selected{box-shadow:0 0 0 4px color-mix(in srgb,var(--rule-accent) 30%,transparent),0 10px 0 color-mix(in srgb,var(--rule-accent) 40%,#020617),0 24px 55px rgba(0,0,0,.34)}.savedRuleUse14586{width:100%;height:100%;min-height:176px;padding:20px 18px 48px;border:0;border-radius:0;background:linear-gradient(158deg,color-mix(in srgb,var(--rule-accent) 86%,#ef233c),#991b1b 44%,#6d28d9 45%,#3b0764);text-align:left}.savedRuleStripe14586{position:absolute;left:0;right:0;top:43%;height:6px;background:#2563eb}.savedRuleUse14586 small{font-size:.67rem;font-weight:1000;letter-spacing:.18em}.savedRuleUse14586 strong{display:block;margin-top:25px;font-size:1.55rem;line-height:1;text-transform:uppercase;font-style:italic}.savedRuleUse14586 p{margin:8px 0 0;color:#f5f3ff;font-size:.84rem;font-weight:750}.savedRuleEdit14586{position:absolute;right:8px;bottom:8px;padding:7px 10px;border-radius:6px;background:rgba(15,23,42,.82);font-size:.72rem}.emptyRules14586{grid-column:1/-1;padding:24px;border:1px dashed rgba(148,163,184,.35);border-radius:12px;color:#94a3b8;text-align:center}

.ruleEditorMain14586{padding:20px;display:grid;gap:18px;border-top:7px solid var(--rule-preview);box-shadow:0 16px 0 rgba(2,6,23,.45),0 30px 70px rgba(0,0,0,.3)}.ruleEditorTitle14586{display:flex;justify-content:space-between;gap:12px;align-items:start}.ruleEditorTitle14586 h3{margin:4px 0 0;font-size:clamp(1.7rem,3.5vw,2.8rem)}.ruleIdentity14586{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:12px;align-items:end}.ruleAutoColor14586,.ruleColorPicker14586{display:flex;align-items:center;gap:8px;padding:11px 12px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(15,23,42,.58);font-weight:800}.ruleColorPicker14586 input{width:42px;height:34px;padding:2px;border:0;background:transparent}.ruleConditionGrid14586{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.ruleCondition14586{min-height:112px;padding:16px;border-radius:8px;text-align:left;background:linear-gradient(155deg,#7f1d1d 0 42%,#6d28d9 43% 100%);border:2px solid rgba(255,255,255,.13);box-shadow:inset 0 -4px 0 #2563eb}.ruleCondition14586.selected{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(37,99,235,.18),inset 0 -4px 0 #60a5fa}.ruleCondition14586 strong{display:block;font-size:1.2rem}.ruleCondition14586 small{display:block;margin-top:20px;color:#ede9fe;line-height:1.25}.ruleCoreValues14586{display:flex;gap:12px;flex-wrap:wrap}.ruleCoreValues14586 .configField{min-width:220px}.ruleAdvancedToggle14586{display:flex;justify-content:space-between;align-items:center;width:100%;padding:14px 16px;border-radius:8px;background:rgba(30,41,59,.88);font-weight:1000;text-transform:uppercase;letter-spacing:.08em}.ruleAdvancedToggle14586.open{border-color:#60a5fa}.ruleAdvancedToggle14586 b{font-size:1.5rem}.ruleAdvancedPanel14586{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px;border-radius:10px;background:rgba(2,6,23,.42);border:1px solid rgba(96,165,250,.2)}.advancedSwitch14586,.advancedAction14586{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:9px;background:rgba(30,41,59,.72);border:1px solid rgba(255,255,255,.1)}.advancedSwitch14586 input{margin-top:4px;transform:scale(1.2)}.advancedSwitch14586 span,.advancedAction14586 span{display:grid;gap:3px;flex:1}.advancedSwitch14586 b,.advancedAction14586 b{font-size:1rem}.advancedSwitch14586 small,.advancedAction14586 small{color:#94a3b8;line-height:1.3}.advancedAction14586{align-items:center}.stageChangeInterval14586{min-width:180px}.ruleEditorActions14586{display:flex;justify-content:space-between;gap:12px}.ruleSave14586{min-width:220px;font-weight:1000}.rosterFinalAction14586{justify-content:flex-end!important}.rosterFinalAction14586 .good{min-width:min(320px,100%);font-size:1.06rem;font-weight:1000}

@media(max-width:800px){.createRuleCard14586{grid-template-columns:1fr}.createRuleArt14586{min-height:120px;border-right:0;border-bottom:7px solid #2563eb}.ruleIdentity14586{grid-template-columns:1fr}.ruleConditionGrid14586,.ruleAdvancedPanel14586{grid-template-columns:1fr}.savedRulesGrid14586{grid-template-columns:1fr}.ruleEditorTitle14586{flex-direction:column}.ruleEditorActions14586{flex-direction:column}.ruleEditorActions14586>*{width:100%}}


/* 14.5.87 — pulido de selección de modos y reglas */
.modeFamilyCards14587{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.modeFamilyCards14587.oneMode{grid-template-columns:minmax(0,760px);justify-content:center}
.modeFamilyCard14587{min-height:420px;background:#1f1140;border-color:rgba(255,255,255,.10);box-shadow:0 12px 0 rgba(2,6,23,.75),0 30px 70px rgba(0,0,0,.42)}
.modeFamilyCard14587:hover{transform:translateY(-8px) scale(1.01)}.modeFamilyCard14587.disabled{opacity:.76;filter:saturate(.85)}
.modeFamilyCopy14587 strong{font-size:clamp(2.2rem,4vw,3.9rem);text-shadow:5px 5px 0 rgba(15,23,42,.56)}
.classicArenaArt14587{background:radial-gradient(circle at 50% 18%,rgba(125,211,252,.14),transparent 30%),linear-gradient(180deg,#081223 0%,#101f39 58%,#07111f 100%)}
.classicArenaBackdrop14587{position:absolute;inset:0;opacity:.32;background:linear-gradient(90deg,transparent 0 8%,rgba(255,255,255,.06) 8% 8.5%,transparent 8.5% 18%,rgba(255,255,255,.04) 18% 18.5%,transparent 18.5%)}
.classicArenaFloor14587{position:absolute;left:11%;right:11%;bottom:17%;height:28px;border-radius:20px 20px 12px 12px;background:linear-gradient(180deg,#8b9bb1,#334155);box-shadow:0 14px 0 -6px rgba(15,23,42,.96),0 0 0 3px rgba(255,255,255,.06) inset}
.modeSceneCharacter14587{position:absolute;bottom:calc(17% + 10px);width:132px;height:146px;z-index:2;image-rendering:auto}.modeSceneCharacter14587.left{left:18%}.modeSceneCharacter14587.right{right:18%;transform:scaleX(-1)}
.roundsCardArt14587{background:radial-gradient(circle at 50% 30%,rgba(59,130,246,.20),transparent 34%),linear-gradient(180deg,#191641,#090916 100%)}
.roundsBackline14587{position:absolute;left:12%;right:12%;bottom:18px;height:3px;background:linear-gradient(90deg,transparent,#60a5fa,#a855f7,#60a5fa,transparent)}
.roundsPerkStack14587{position:absolute;top:46px;width:86px;height:124px;border-radius:14px;border:2px solid rgba(255,255,255,.18);background:linear-gradient(180deg,#8f1017 0 46%,#5a1fb0 46%);display:grid;place-items:center;color:#fff;font-size:2rem;font-weight:1000;box-shadow:0 18px 38px rgba(0,0,0,.34)}
.roundsPerkStack14587.main{left:50%;margin-left:-43px;z-index:3}.roundsPerkStack14587.left{left:26%;transform:rotate(-12deg);opacity:.74}.roundsPerkStack14587.right{right:26%;transform:rotate(12deg);opacity:.74}.roundsHudPill14587{position:absolute;bottom:26px;padding:7px 12px;border-radius:999px;background:rgba(2,6,23,.76);border:1px solid rgba(255,255,255,.14);font-size:.72rem;font-weight:1000;letter-spacing:.14em}.roundsHudPill14587.left{left:16px;color:#e2e8f0}.roundsHudPill14587.right{right:16px;color:#c4b5fd}
.tournamentCardArt14587{background:radial-gradient(circle at 50% 30%,rgba(250,204,21,.18),transparent 32%),linear-gradient(180deg,#2c1700 0%,#0f1020 100%)}
.trophy14587{position:absolute;left:50%;top:48px;transform:translateX(-50%);font-size:4rem;filter:drop-shadow(0 8px 12px rgba(0,0,0,.35))}.tourneyNode14587{position:absolute;width:18px;height:18px;border-radius:50%;background:#f8fafc;border:3px solid #0f172a}.tourneyNode14587.left{left:18%}.tourneyNode14587.right{right:18%}.tourneyNode14587.top{top:46px}.tourneyNode14587.mid{top:98px}.tourneyNode14587.bot{top:150px}.tourneyLink14587{position:absolute;top:54px;bottom:62px;width:26%;border-top:4px solid rgba(255,255,255,.22);border-bottom:4px solid rgba(255,255,255,.22)}.tourneyLink14587.left{left:24%;border-right:4px solid rgba(255,255,255,.22)}.tourneyLink14587.right{right:24%;border-left:4px solid rgba(255,255,255,.22)}
.rulePresetName14587{font-size:1.85rem!important;line-height:.92!important;margin-top:18px!important}
.ruleEditorMain14587{border-top-width:10px}
.ruleIdentity14587{grid-template-columns:minmax(280px,1fr) auto}.ruleNameField14587 input{font-size:1.15rem;font-weight:900}.ruleFixedPalette14587{display:grid;grid-template-columns:auto 24px auto;gap:10px;align-items:center;padding:10px 14px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(15,23,42,.58);font-weight:800}.ruleFixedPalette14587 b{width:24px;height:24px;border-radius:50%;display:block}.ruleFixedPalette14587 small{color:#94a3b8;font-size:.78rem}
.ruleAdvancedPanel14587{grid-template-columns:1fr 1fr}.stagePoolWrap14587{grid-column:1/-1;display:grid;gap:8px;padding:12px 14px;border-radius:10px;background:rgba(15,23,42,.55);border:1px solid rgba(255,255,255,.08)}.stagePoolLabel14587{display:grid;gap:2px}.stagePoolLabel14587 small{color:#94a3b8}.stagePoolGrid14587{display:flex;flex-wrap:wrap;gap:8px}.stagePoolChip14587{padding:8px 12px;border-radius:999px;background:rgba(30,41,59,.86);border:1px solid rgba(148,163,184,.22);font-size:.82rem}.stagePoolChip14587.selected{background:linear-gradient(135deg,rgba(37,99,235,.42),rgba(124,58,237,.35));border-color:rgba(191,219,254,.64)}

/* 15.1.15 — preview clásica basada en una escena real del juego. */
.modePreviewSceneCanvas15115{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:auto}
.classicArenaArt14587{padding:0;background:#07111f}


/* 15.1.20.4 — la capacidad touch no equivale a estar jugando con touch.
   El overlay móvil sólo existe visualmente cuando el perfil activo dice touch. */
body:not([data-f2d-input="touch"]) .f2dTouchControls {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
body[data-f2d-input="touch"].f2dTouchBattle .f2dTouchControls {
  visibility: visible;
}

/* 15.1.21 — Rounds: claridad de serie, límite de rondas y HUD de draft/combate. */
.roundsRuleGearNote15121,
.roundsRuleLimitExplain15121{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:12px;
  padding:11px 13px;
  border:1px solid rgba(196,181,253,.22);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(76,29,149,.22),rgba(15,23,42,.66));
}
.roundsRuleGearNote15121 b,
.roundsRuleLimitExplain15121 b{color:#f5f3ff;white-space:nowrap}
.roundsRuleGearNote15121 span,
.roundsRuleLimitExplain15121 span{color:#cbd5e1;font-size:.82rem;line-height:1.35}
.roundsGearPerks15121{margin-top:10px}

.roundsSeriesProgress15121{
  width:min(760px,92vw);
  margin:14px auto 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:rgba(10,15,32,.78);
  box-shadow:0 12px 34px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.05);
}
.roundsSeriesPlayer15121{display:grid;grid-template-columns:auto auto;grid-template-areas:"name score" "remaining score";align-items:center;column-gap:10px;text-align:left}
.roundsSeriesPlayer15121.right{grid-template-columns:auto auto;grid-template-areas:"score name" "score remaining";text-align:right}
.roundsSeriesPlayer15121 small{grid-area:name;color:#e2e8f0;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roundsSeriesPlayer15121 b{grid-area:score;font-size:2rem;line-height:1;color:#fb7185;text-shadow:0 0 18px rgba(251,113,133,.3)}
.roundsSeriesPlayer15121 span{grid-area:remaining;color:#fda4af;font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.roundsSeriesGoal15121{text-align:center;padding:0 10px}
.roundsSeriesGoal15121 strong{display:block!important;margin:0!important;font-size:.82rem!important;letter-spacing:.12em;color:#fef3c7!important;white-space:nowrap}
.roundsSeriesGoal15121 small{display:block;margin-top:3px!important;color:#a78bfa!important;font-size:.7rem!important;font-weight:800}
.roundsHudScore15121{color:#f5f3ff!important}
.roundsHudRemaining15121{display:inline-flex;align-items:center;padding:2px 6px;border-radius:999px;background:rgba(124,58,237,.22);border:1px solid rgba(196,181,253,.22);color:#c4b5fd;font-size:.64rem;font-weight:950;letter-spacing:.05em}
.roundsHudCompact1514211{display:inline-grid;grid-template-columns:auto auto;align-items:end;gap:6px;color:#f5f3ff}
.roundsHudCompact1514211>span{display:inline-flex;align-items:baseline;gap:3px}
.roundsHudCompact1514211 small{color:#c4b5fd;font-size:.62rem;font-weight:900;white-space:nowrap}
.roundsHudCompact1514211 b{font-size:1rem;line-height:1;color:#fff}
.roundsHudCompact1514211 i{font-size:.7em;font-style:normal;color:#c4b5fd}
.roundsHudCompact1514211 em{font-size:.62rem;font-style:normal;color:#fde68a;white-space:nowrap}
.roundsHudNeed1514211{justify-content:flex-end}

@media(max-width:780px){
  .roundsSeriesProgress15121{gap:6px;padding:7px;grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr)}
  .roundsSeriesPlayer15121{column-gap:6px}
  .roundsSeriesPlayer15121 b{font-size:1.55rem}
  .roundsSeriesPlayer15121 small{font-size:.66rem}
  .roundsSeriesPlayer15121 span{font-size:.58rem}
  .roundsSeriesGoal15121{padding:0 3px}
  .roundsSeriesGoal15121 strong{font-size:.62rem!important;white-space:normal}
  .roundsSeriesGoal15121 small{font-size:.58rem!important}
  .roundsRuleGearNote15121,.roundsRuleLimitExplain15121{display:grid;gap:4px}
  .roundsRuleGearNote15121 b,.roundsRuleLimitExplain15121 b{white-space:normal}
}


/* 15.1.23 — Rounds: 1.5 s de lectura antes de aceptar inputs del draft. */
.roundsDraftInputLock15123{margin:10px auto 0;width:max-content;max-width:min(92vw,560px);padding:8px 15px;border:1px solid rgba(253,224,71,.4);border-radius:999px;background:rgba(69,26,3,.78);color:#fef08a;font-size:.72rem;font-weight:1000;letter-spacing:.13em;box-shadow:0 0 24px rgba(250,204,21,.12)}
.roundsDraftInputLock15123.hidden{display:none}
.roundsDraftInputLocked15123 .roundsDraftCard{filter:saturate(.72) brightness(.82);transform:translateY(0) scale(.985);border-color:rgba(255,255,255,.1);box-shadow:0 14px 42px rgba(0,0,0,.32)}
.roundsDraftInputLocked15123 .roundsDraftCard.selected{transform:translateY(0) scale(.985);border-color:rgba(253,224,71,.22);box-shadow:0 14px 42px rgba(0,0,0,.32)}

/* 15.1.24 — Rounds: rarezas, cierre de serie y lectura fuerte del tipo de regla. */
.roundsCardRarity15124,.roundsCardSynergyRarity15124{
  display:inline-flex!important;align-items:center;width:max-content;margin:0 6px 6px 0;padding:4px 7px;border-radius:999px;
  font-size:.61rem!important;font-weight:1000;letter-spacing:.13em;line-height:1;color:#07111f!important;text-shadow:none!important
}
.roundsCardRarity15124{background:var(--rarity);box-shadow:0 0 16px color-mix(in srgb,var(--rarityGlow) 52%,transparent);border:1px solid color-mix(in srgb,var(--rarityGlow) 70%,white 12%)}
.roundsCardSynergyRarity15124{background:color-mix(in srgb,var(--synergy) 82%,white 18%);border:1px solid color-mix(in srgb,var(--synergy) 70%,white 25%)}
.roundsDraftCard[style*="--rarity"]{border-color:color-mix(in srgb,var(--rarity) 74%,white 12%);box-shadow:0 20px 60px rgba(0,0,0,.38),inset 0 0 0 1px color-mix(in srgb,var(--rarity) 32%,transparent)}
.roundsDraftCard[style*="--rarity"] .roundsCardArt{background:linear-gradient(145deg,color-mix(in srgb,var(--rarity) 72%,#4c0519),color-mix(in srgb,var(--rarity) 58%,#dc2626))}
.roundsDraftCard[style*="--rarity"] .roundsCardText{background:linear-gradient(180deg,color-mix(in srgb,var(--rarity) 30%,#5b21b6),#24043f)}
.roundsDraftCard[style*="--rarity"].selected{border-color:var(--rarityGlow);box-shadow:0 24px 70px color-mix(in srgb,var(--rarity) 28%,transparent),0 0 0 5px color-mix(in srgb,var(--rarity) 16%,transparent)}
.roundsOwnedCard{position:relative;border-color:color-mix(in srgb,var(--rarity,#7c3aed) 58%,white 12%)}
.roundsOwnedCard .roundsCardRarity15124,.roundsOwnedCard .roundsCardSynergyRarity15124{padding:2px 5px;margin:0;font-size:.48rem!important}
.roundsRoundRemainingCallout15124{margin:12px auto 2px;padding:10px 16px;width:max-content;max-width:min(760px,92vw);border-left:5px solid #fbbf24;border-right:5px solid #38bdf8;background:rgba(2,6,23,.82);box-shadow:0 12px 34px rgba(0,0,0,.35);color:#fff;font-size:clamp(.92rem,2vw,1.35rem);font-weight:1000;letter-spacing:.045em;text-transform:uppercase}
.roundsRarityRule15124{border-color:rgba(103,232,249,.32);background:linear-gradient(135deg,rgba(15,23,42,.76),rgba(8,145,178,.16))}
.roundsRarityRule15124 b{color:#a5f3fc}

/* El color ya no es una rayita decorativa: el tipo de regla contamina la tarjeta y la condición. */
.savedRuleCard14586{border-color:color-mix(in srgb,var(--rule-accent) 86%,white 12%)!important;box-shadow:0 10px 0 color-mix(in srgb,var(--rule-accent) 56%,#020617),0 20px 45px rgba(0,0,0,.31)!important}
.savedRuleUse14586{position:relative;background:linear-gradient(150deg,color-mix(in srgb,var(--rule-accent) 74%,#3b0764),#2e1065 52%,#18052d)!important}
.savedRuleUse14586:before{content:"";position:absolute;inset:0 auto 0 0;width:13px;background:var(--rule-accent);box-shadow:0 0 28px color-mix(in srgb,var(--rule-accent) 72%,transparent)}
.savedRuleStripe14586{height:8px!important;background:var(--rule-accent)!important;box-shadow:0 0 20px color-mix(in srgb,var(--rule-accent) 65%,transparent)}
.ruleTypeBadge15124{position:absolute;right:14px;top:13px;padding:6px 9px;border-radius:999px;background:var(--rule-accent);color:#fff;font-size:.62rem;font-weight:1000;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 0 20px color-mix(in srgb,var(--rule-accent) 60%,transparent)}
.ruleCondition14586{position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--condition-accent) 45%,white 10%)!important;background:linear-gradient(155deg,color-mix(in srgb,var(--condition-accent) 42%,#450a0a) 0 42%,#4c1d95 43% 100%)!important}
.ruleCondition14586:before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--condition-accent);box-shadow:0 0 18px color-mix(in srgb,var(--condition-accent) 60%,transparent)}
.ruleCondition14586.selected{border-color:var(--condition-accent)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--condition-accent) 28%,transparent),inset 0 -6px 0 var(--condition-accent)!important;filter:brightness(1.12)}
.ruleFixedPalette14587 b{box-shadow:0 0 18px currentColor,0 0 0 3px rgba(255,255,255,.12)}

.roundsResultSeries15124{display:grid;gap:14px;margin:18px 0;padding:18px;border:1px solid rgba(103,232,249,.28);border-radius:18px;background:linear-gradient(145deg,rgba(8,47,73,.62),rgba(46,16,101,.52));box-shadow:0 18px 46px rgba(0,0,0,.26)}
.roundsResultSeriesHead15124{display:flex;justify-content:space-between;gap:18px;align-items:end}
.roundsResultSeriesHead15124 span{display:block;color:#67e8f9;font-size:.68rem;font-weight:1000;letter-spacing:.18em}
.roundsResultSeriesHead15124 h3{margin:4px 0 0;font-size:clamp(1.2rem,2.5vw,1.9rem)}
.roundsResultSeriesHead15124>b{padding:7px 10px;border-radius:999px;background:#0f172a;color:#f8fafc;font-size:.68rem;letter-spacing:.12em;white-space:nowrap}
.roundsResultPlayers15124{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.roundsResultPlayer15124{overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:15px;background:rgba(2,6,23,.68)}
.roundsResultPlayer15124.leader{border-color:rgba(250,204,21,.48);box-shadow:inset 0 0 0 1px rgba(250,204,21,.13)}
.roundsResultPlayer15124>header{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px 14px;background:rgba(15,23,42,.8)}
.roundsResultPlayer15124>header>div{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}.roundsResultPlayer15124>header>div>span{grid-row:1/3;font-size:1.3rem}.roundsResultPlayer15124>header strong{font-size:1.05rem}.roundsResultPlayer15124>header small{color:#94a3b8}.roundsResultPlayer15124>header>b{font-size:1.8rem;color:#f8fafc}.roundsResultPlayer15124>header>b small{display:block;font-size:.55rem;color:#94a3b8;letter-spacing:.08em;text-align:right}
.roundsResultBuild15124{display:grid;gap:8px;padding:12px}
.roundsResultCard15124{display:grid;grid-template-columns:46px 1fr;gap:10px;padding:9px;border-left:5px solid var(--rarity);border-radius:10px;background:rgba(30,41,59,.64)}
.roundsResultCard15124.synergy{box-shadow:inset 0 0 0 1px rgba(250,204,21,.18)}
.roundsResultCardArt15124{display:grid;place-items:center;min-height:46px;border-radius:9px;background:color-mix(in srgb,var(--rarity) 35%,#3b0764);font-size:1.55rem;font-weight:1000}
.roundsResultCard15124 strong{display:block}.roundsResultCard15124 small{display:block;margin-top:3px;color:#cbd5e1;line-height:1.25}
.roundsResultCardMeta15124{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}.roundsResultRarity15124,.roundsResultSynergy15124{padding:3px 6px;border-radius:999px;font-size:.53rem;font-weight:1000;letter-spacing:.1em;color:#07111f}.roundsResultRarity15124{background:var(--rarity);box-shadow:0 0 12px color-mix(in srgb,var(--rarityGlow) 48%,transparent)}.roundsResultSynergy15124{background:var(--synergy)}
.roundsResultEmpty15124{padding:18px;color:#64748b;text-align:center}
@media(max-width:760px){.roundsResultPlayers15124{grid-template-columns:1fr}.roundsResultSeriesHead15124{align-items:flex-start;flex-direction:column}.roundsRoundRemainingCallout15124{font-size:.82rem}.roundsCardRarity15124,.roundsCardSynergyRarity15124{font-size:.5rem!important}}

/* 15.1.25 — Rounds: el draft es parte obligatoria del modo; su tiempo y cantidad de cartas son reglas. */
.roundsDraftCards.roundsDraftCount-1{grid-template-columns:minmax(0,420px);justify-content:center}
.roundsDraftCards.roundsDraftCount-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.roundsDraftCards.roundsDraftCount-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.roundsDraftCards.roundsDraftCount-4{grid-template-columns:repeat(4,minmax(0,1fr));width:min(1240px,96vw)}
.roundsDraftCards.roundsDraftCount-5{grid-template-columns:repeat(5,minmax(0,1fr));width:min(1380px,97vw);gap:clamp(8px,1.2vw,16px)}
.roundsDraftCards.roundsDraftCount-6{grid-template-columns:repeat(3,minmax(0,1fr));width:min(1180px,95vw);gap:14px}
.roundsDraftCards.roundsDraftCount-4 .roundsDraftCard,
.roundsDraftCards.roundsDraftCount-5 .roundsDraftCard{min-height:300px}
.roundsDraftCards.roundsDraftCount-5 .roundsCardText{padding:clamp(10px,1.1vw,16px)}
.roundsDraftCards.roundsDraftCount-5 .roundsCardText p{font-size:clamp(.72rem,.8vw,.88rem)}
.roundsDraftRuleGrid15125{margin-top:10px}
@media(max-width:780px){
  .roundsDraftCards.roundsDraftCount-3,
  .roundsDraftCards.roundsDraftCount-4,
  .roundsDraftCards.roundsDraftCount-5,
  .roundsDraftCards.roundsDraftCount-6{grid-template-columns:repeat(2,minmax(0,1fr));max-height:calc(100vh - 330px);overflow-y:auto;padding:8px 4px 22px}
  .roundsDraftCards.roundsDraftCount-1{grid-template-columns:minmax(0,1fr)}
}

/* 15.1.26 — Rounds draft: recorrido vertical automático sin perder la lectura superior. */
.roundsModeOverlay{overflow:hidden}
.roundsTopHud{z-index:8}
.roundsDraftCenter{
  justify-content:flex-start;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  scroll-padding-top:210px;
  padding:0 1vw 34px;
  scrollbar-gutter:stable;
}
.roundsDraftHeading{
  position:sticky;
  top:0;
  z-index:7;
  width:min(820px,94vw);
  padding:10px 20px 16px;
  border-bottom:1px solid rgba(148,163,184,.18);
  background:linear-gradient(180deg,rgba(3,5,16,.98) 0%,rgba(3,5,16,.94) 72%,rgba(3,5,16,0) 100%);
}
.roundsDraftCards{
  flex:0 0 auto;
  scroll-margin-top:205px;
  padding-top:12px;
}
.roundsDraftCard{scroll-margin-block:220px 54px}
.roundsDraftTimer{flex:0 0 auto;margin-bottom:18px}
@media(max-width:780px){
  .roundsDraftCenter{scroll-padding-top:245px;padding-left:0;padding-right:0}
  .roundsDraftHeading{width:100%;padding:8px 10px 14px}
  .roundsDraftCards.roundsDraftCount-3,
  .roundsDraftCards.roundsDraftCount-4,
  .roundsDraftCards.roundsDraftCount-5,
  .roundsDraftCards.roundsDraftCount-6{max-height:none;overflow:visible;padding:8px 4px 22px}
  .roundsDraftCard{scroll-margin-block:250px 42px}
}

/* 15.1.41 — viewport visual real, safe-area y perfil pequeño activo. */
.f2dTouchControls {
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
body.f2dVerySmallViewport .battleQuickBar { transform: scale(.88); transform-origin: top right; }
body.f2dShortLandscape .topbar { display: none; }
body.f2dShortLandscape .battleViewport { max-height: var(--f2d-viewport-height, 100vh); }

/* 15.1.42.1 — perfil móvil explícito y bloqueo de orientación vertical. */
.mobileSupportHeader{display:flex;align-items:center;justify-content:space-between;gap:14px}
.mobileSupportHeader span{display:block;margin-bottom:4px;color:#7dd3fc;font-size:.68rem;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}
.mobileSupportHeader>b{padding:7px 10px;border:1px solid rgba(125,211,252,.32);border-radius:999px;background:rgba(8,47,73,.52);color:#e0f2fe;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase}
.mobileProfileControls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mobileProfileControls button{min-width:0;padding:10px 8px;font-size:.78rem;line-height:1.15}
.mobileProfileControls button.selected{border-color:#7dd3fc;background:linear-gradient(135deg,rgba(3,105,161,.82),rgba(14,116,144,.58));box-shadow:0 0 0 2px rgba(125,211,252,.14)}
.f2dOrientationGate{position:fixed;inset:0;z-index:2147483000;display:grid;grid-template-columns:auto minmax(0,440px);align-content:center;justify-content:center;align-items:center;gap:28px;padding:max(26px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(26px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));background:radial-gradient(circle at 50% 26%,rgba(14,116,144,.28),transparent 38%),linear-gradient(155deg,#020617 0%,#07111f 52%,#0c4a6e 150%);color:#f8fafc;text-align:left;overflow:auto;overscroll-behavior:none}
.f2dOrientationGate.hidden{display:none!important}
.f2dOrientationDevice{width:116px;height:190px;padding:9px;border:5px solid #e0f2fe;border-radius:23px;transform:rotate(90deg);box-shadow:0 0 0 6px rgba(14,116,144,.38),0 24px 65px rgba(0,0,0,.5);animation:f2dRotatePhone 1.6s ease-in-out infinite alternate}
.f2dOrientationDevice span{display:block;width:100%;height:100%;border-radius:12px;background:linear-gradient(145deg,#38bdf8,#0e7490 46%,#082f49);box-shadow:inset 0 0 30px rgba(255,255,255,.18)}
.f2dOrientationCopy{display:grid;gap:8px;max-width:440px}
.f2dOrientationCopy small{color:#67e8f9;font-weight:1000;letter-spacing:.12em}
.f2dOrientationCopy strong{font-size:clamp(2rem,8vw,4rem);line-height:.95;letter-spacing:0;font-style:italic;text-transform:uppercase;text-shadow:4px 4px 0 rgba(8,47,73,.75)}
.f2dOrientationCopy p{margin:4px 0 0;color:#e0f2fe;font-size:clamp(1rem,3.8vw,1.25rem);font-weight:750;line-height:1.35}
.f2dOrientationCopy em{color:#bae6fd;font-size:.82rem;font-style:normal}
.f2dOrientationDesktopEscape{grid-column:1/-1;justify-self:center;max-width:240px;margin-top:4px}
body.f2dOrientationBlocked{overflow:hidden!important;overscroll-behavior:none;touch-action:none}
body.f2dOrientationBlocked>.app{pointer-events:none;user-select:none}
@keyframes f2dRotatePhone{from{transform:rotate(82deg) scale(.96)}to{transform:rotate(90deg) scale(1.02)}}
@media(max-width:760px){
  .mobileProfileControls{grid-template-columns:1fr}
  .f2dOrientationGate{grid-template-columns:1fr;justify-items:center;text-align:center;gap:22px}
  .f2dOrientationDevice{width:94px;height:158px}
  .f2dOrientationCopy{justify-items:center}
}
@media(prefers-reduced-motion:reduce){.f2dOrientationDevice{animation:none}}

/* 15.1.42.1 mobile pass 2 — editor táctil fullscreen jugable */
.f2dTouchLayoutEditor { position:fixed; inset:0; z-index:10040; pointer-events:none; }
.f2dTouchLayoutEditor.hidden { display:none; }
.f2dTouchEditorBar { pointer-events:auto; position:absolute; left:0; right:0; top:0; min-height:74px; padding:10px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); display:flex; align-items:center; gap:10px; justify-content:space-between; background:linear-gradient(180deg,rgba(2,6,23,.96),rgba(15,23,42,.91)); border-bottom:1px solid rgba(255,255,255,.18); box-shadow:0 10px 32px rgba(0,0,0,.35); }
.f2dTouchEditorIdentity { display:grid; gap:2px; }
.f2dTouchEditorIdentity small { font-size:10px; letter-spacing:.14em; color:#7dd3fc; }
.f2dTouchEditorIdentity strong { font-size:clamp(15px,2.3vw,23px); letter-spacing:0; }
.f2dTouchEditorBar label { display:flex; align-items:center; gap:7px; font-size:12px; }
.f2dTouchEditorBar select { min-width:126px; padding:7px 9px; }
.f2dTouchVisiblePlayersLabel select { min-width:52px; }
.f2dTouchEditorActions { display:flex; gap:7px; }
.f2dTouchEditorActions button { padding:8px 11px; }
.f2dTouchEditorHint { pointer-events:none; position:absolute; top:82px; left:50%; transform:translateX(-50%); max-width:min(680px,88vw); padding:7px 13px; border-radius:999px; background:rgba(2,6,23,.76); border:1px solid rgba(125,211,252,.35); color:#e0f2fe; font-size:12px; text-align:center; }
body.f2dTouchEditorOpen { overflow:hidden; }
body.f2dTouchEditorOpen #screenBattle { position:fixed; inset:0; z-index:10020; display:block!important; background:#020617; }
body.f2dTouchEditorOpen #screenBattle > .battleShell { width:var(--f2d-viewport-width, 100vw); height:var(--f2d-viewport-height, 100dvh); max-width:none; margin:0; padding:0; }
body.f2dTouchEditorOpen #screenBattle .battleTopbar, body.f2dTouchEditorOpen #screenBattle .battleActions, body.f2dTouchEditorOpen #screenBattle .battleMeta { visibility:hidden; }
body.f2dTouchEditorOpen #screenBattle .battleViewport { position:absolute; inset:var(--f2d-battle-top-reserve, 52px) auto auto 50%; width:min(var(--f2d-viewport-width, 100vw), calc(var(--f2d-battle-available-height, calc(var(--f2d-viewport-height, 100dvh) - 52px)) * 16 / 9)); height:min(var(--f2d-battle-available-height, calc(var(--f2d-viewport-height, 100dvh) - 52px)), calc(var(--f2d-viewport-width, 100vw) * 9 / 16)); margin:0; transform:translateX(-50%); border-radius:0; }
body.f2dTouchEditorOpen #gameCanvas { width:100%!important; height:100%!important; max-height:none!important; border-radius:0!important; }
body.f2dTouchEditorOpen .f2dTouchControls { display:block!important; z-index:calc(10030 + var(--touch-player-layer, 0)); }
body.f2dTouchEditorOpen .f2dTouchControls[data-touch-selected="true"] { z-index:10035; filter:drop-shadow(0 0 9px var(--touch-player-color)); }
body.f2dTouchEditorOpen .f2dTouchControls[data-touch-locked="true"] { opacity:.58; }
body.f2dTouchEditorOpen .f2dTouchControls[data-touch-locked="true"] :is(.f2dTouchStick,[data-touch-btn]) { pointer-events:none; }
body.f2dTouchEditorOpen .f2dTouchControls[data-touch-editable="true"] :is(.f2dTouchStick,[data-touch-btn]),
body.f2dTouchEditorOpen .f2dTouchControls[data-touch-input-enabled="true"] :is(.f2dTouchStick,[data-touch-btn]) { pointer-events:auto; }
body.f2dTouchEditing .f2dTouchControls[data-touch-editable="true"] :is(.f2dTouchStick,[data-touch-btn]) { outline:3px solid var(--touch-player-color); cursor:grab; animation:f2dTouchEditPulse 1.2s ease-in-out infinite alternate; }
body.f2dTouchEditing .f2dTouchControls[data-touch-editable="true"] :is(.f2dTouchStick,[data-touch-btn])::after { content:attr(aria-label); position:absolute; left:50%; top:calc(100% + 5px); transform:translateX(-50%); color:#fff; font-size:10px; padding:2px 5px; border-radius:5px; background:rgba(2,6,23,.88); white-space:nowrap; }
body.f2dTouchDragging .f2dTouchControls[data-touch-editable="true"] :is(.f2dTouchStick,[data-touch-btn]) { animation:none; }
@keyframes f2dTouchEditPulse { from{outline-color:color-mix(in srgb,var(--touch-player-color) 45%,transparent)} to{outline-color:var(--touch-player-color)} }
@media(max-width:900px){ .f2dTouchEditorIdentity strong{display:none}.f2dTouchEditorBar{gap:5px}.f2dTouchEditorBar label{font-size:9px}.f2dTouchEditorBar select{min-width:104px}.f2dTouchVisiblePlayersLabel select{min-width:45px}.f2dTouchEditorActions button{padding:7px 7px;font-size:10px}.f2dTouchEditorHint{top:60px} }
body.f2dTouchEditorOpen #screenBattle .battleQuickBar,
body.f2dTouchEditorOpen #screenBattle .battleMatchPill,
body.f2dTouchEditorOpen #screenBattle > .battleShell > .card,
body.f2dTouchEditorOpen #onlineBattlePanel,
body.f2dTouchEditorOpen #pauseMenuOverlay { display:none!important; }


/* 15.1.42.2 — dynamic keyboard/touch settings + protected incident access */
.controlSettingsPane.hidden { display: none !important; }
.controlsSettingsCard { transition: border-color .1s ease, background-color .1s ease; }
.controlsSettingsCard[data-control-mode="touch"] { border-color: rgba(56,189,248,.34); }
.f2dCrashAccessGate, .f2dCrashPasswordGate, .f2dCrashDetails { display: grid; gap: 12px; }
.f2dCrashAccessGate[hidden], .f2dCrashPasswordGate[hidden], .f2dCrashDetails[hidden] { display: none !important; }
.f2dCrashAccessGate > strong, .f2dCrashPasswordGate > strong { color:#fff; font-size:1.25rem; }
.f2dCrashPasswordGate input { flex:1; min-width:180px; }
.f2dCrashPasswordError { min-height:1em; color:#fca5a5; font-weight:850; }

/* 15.1.42.3 checkpoint 2/3 — touch ownership, training dummy y HUD adaptable. */
html[data-f2d-touch-gesture-policy="native-scroll-unless-owned"] body[data-f2d-input="touch"]:not(.f2dOrientationBlocked):not(.f2dTouchEditorOpen),
html[data-f2d-touch-gesture-policy="native-scroll-unless-owned"] body[data-f2d-input="touch"]:not(.f2dOrientationBlocked):not(.f2dTouchEditorOpen) .app,
html[data-f2d-touch-gesture-policy="native-scroll-unless-owned"] body[data-f2d-input="touch"]:not(.f2dOrientationBlocked):not(.f2dTouchEditorOpen) .screen.active,
html[data-f2d-touch-gesture-policy="native-scroll-unless-owned"] body[data-f2d-input="touch"]:not(.f2dOrientationBlocked):not(.f2dTouchEditorOpen) .modalBox {
  touch-action: pan-x pan-y;
}
html[data-f2d-touch-gesture-policy="native-scroll-unless-owned"] body[data-f2d-input="touch"] button,
html[data-f2d-touch-gesture-policy="native-scroll-unless-owned"] body[data-f2d-input="touch"] a,
html[data-f2d-touch-gesture-policy="native-scroll-unless-owned"] body[data-f2d-input="touch"] input,
html[data-f2d-touch-gesture-policy="native-scroll-unless-owned"] body[data-f2d-input="touch"] select,
html[data-f2d-touch-gesture-policy="native-scroll-unless-owned"] body[data-f2d-input="touch"] textarea,
html[data-f2d-touch-gesture-policy="native-scroll-unless-owned"] body[data-f2d-input="touch"] label,
html[data-f2d-touch-gesture-policy="native-scroll-unless-owned"] body[data-f2d-input="touch"] .card {
  touch-action: manipulation;
}
html[data-f2d-touch-gesture-policy="native-scroll-unless-owned"] body[data-f2d-input="touch"] .qualitySelectionRoot,
html[data-f2d-touch-gesture-policy="native-scroll-unless-owned"] body[data-f2d-input="touch"] .roundsDraftCenter,
html[data-f2d-touch-gesture-policy="native-scroll-unless-owned"] body[data-f2d-input="touch"] .roundsDraftCards,
html[data-f2d-touch-gesture-policy="native-scroll-unless-owned"] body[data-f2d-input="touch"] .manualBookPage,
html[data-f2d-touch-gesture-policy="native-scroll-unless-owned"] body[data-f2d-input="touch"] .manualIndexList {
  touch-action: pan-x pan-y;
}
html[data-f2d-touch-gesture-policy="native-scroll-unless-owned"] body[data-f2d-input="touch"] .mapEditorPreview,
html[data-f2d-touch-gesture-policy="native-scroll-unless-owned"] body[data-f2d-input="touch"] .mapEditorPreview *,
html[data-f2d-touch-gesture-policy="native-scroll-unless-owned"] body[data-f2d-input="touch"] [data-touch-stick],
html[data-f2d-touch-gesture-policy="native-scroll-unless-owned"] body[data-f2d-input="touch"] [data-touch-btn],
html[data-f2d-touch-gesture-policy="native-scroll-unless-owned"] body.f2dTouchBattle #screenBattle .battleViewport {
  touch-action: none;
}
body.f2dNativeTouchScrolling .f2dTouchControls:not(:has([data-touch-stick]:active)):not(:has([data-touch-btn]:active)) {
  pointer-events: none;
}

body.f2dTouchEditorOpen .f2dTouchEditorBar {
  min-height: 52px;
  padding-top: 6px;
  padding-bottom: 6px;
  gap: 8px;
}
body.f2dTouchEditorOpen .f2dTouchEditorBar select { min-width: 120px; padding: 6px 8px; }
body.f2dTouchEditorOpen .f2dTouchEditorActions button { padding: 6px 9px; }
body.f2dTouchEditorOpen .f2dTouchEditorHint {
  top: 58px;
  max-width: min(650px, 86vw);
  padding: 5px 11px;
  font-size: 11px;
  transition: opacity .18s ease, transform .18s ease;
}
#f2dTouchLayoutEditor[data-testing] .f2dTouchEditorHint {
  opacity: 0;
  transform: translate(-50%, -8px);
}
body.f2dTouchEditorOpen #screenBattle .battleViewport {
  inset: var(--f2d-battle-top-reserve, 52px) auto auto 50%;
  width: min(var(--f2d-viewport-width, 100vw), calc(var(--f2d-battle-available-height, calc(var(--f2d-viewport-height, 100dvh) - 52px)) * 16 / 9));
  height: min(var(--f2d-battle-available-height, calc(var(--f2d-viewport-height, 100dvh) - 52px)), calc(var(--f2d-viewport-width, 100vw) * 9 / 16));
  transform: translateX(-50%);
}
body.f2dTouchEditorOpen #screenBattle .hud {
  left: max(6px, env(safe-area-inset-left));
  right: max(6px, env(safe-area-inset-right));
  bottom: max(5px, env(safe-area-inset-bottom));
  top: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(3px, .7vw, 7px);
}
body.f2dTouchEditorOpen #screenBattle .smashHudPlayer {
  min-height: clamp(46px, 15dvh, 66px) !important;
  grid-template-columns: clamp(32px, 7dvh, 46px) minmax(0, 1fr) auto !important;
  gap: clamp(4px, .8vw, 8px);
  padding: clamp(4px, .7vh, 7px);
  border-radius: clamp(8px, 1.8vw, 14px);
  background: linear-gradient(180deg, rgba(15,23,42,.86), rgba(2,6,23,.72));
}
body.f2dTouchEditorOpen #screenBattle .smashPortrait {
  width: clamp(30px, 7dvh, 44px);
  height: clamp(30px, 7dvh, 44px);
  border-width: 2px;
  border-radius: 9px;
  font-size: clamp(16px, 4dvh, 22px);
}
body.f2dTouchEditorOpen #screenBattle .smashHudData strong { font-size: clamp(9px, 2.5dvh, 13px); }
body.f2dTouchEditorOpen #screenBattle .smashHudData small { font-size: clamp(7px, 1.9dvh, 10px); }
body.f2dTouchEditorOpen #screenBattle .smashLives { margin-top: 1px; min-height: 10px; gap: 1px; }
body.f2dTouchEditorOpen #screenBattle .heart { font-size: clamp(10px, 2.8dvh, 15px); }
body.f2dTouchEditorOpen #screenBattle .smashDamage {
  min-width: 38px;
  font-size: clamp(22px, 6.3dvh, 33px);
  line-height: .88;
}
body.f2dTouchEditorOpen #screenBattle .smashDamage span { font-size: clamp(10px, 2.7dvh, 14px); }
body.f2dTouchEditorOpen #screenBattle .hudResourceCorner { display: flex !important; }

@media (max-height: 420px) {
  body.f2dTouchEditorOpen .f2dTouchEditorIdentity strong { display: none; }
  body.f2dTouchEditorOpen .f2dTouchEditorIdentity small { font-size: 8px; }
  body.f2dTouchEditorOpen .f2dTouchEditorHint { max-width: 66vw; }
  body.f2dTouchEditorOpen #screenBattle .smashHudPlayer { min-height: 46px !important; }
}

/* 15.1.42.3 final — manual scroll router + horizontal manual gestures. */
html[data-f2d-touch-gesture-policy="manual-scroll-unless-owned"] body[data-f2d-input="touch"] {
  overscroll-behavior: contain;
}
html[data-f2d-touch-gesture-policy="manual-scroll-unless-owned"] body[data-f2d-input="touch"]:not(.f2dTouchBattle):not(.f2dTouchEditorOpen) .screen.active,
html[data-f2d-touch-gesture-policy="manual-scroll-unless-owned"] body[data-f2d-input="touch"]:not(.f2dTouchBattle):not(.f2dTouchEditorOpen) .modalBox,
html[data-f2d-touch-gesture-policy="manual-scroll-unless-owned"] body[data-f2d-input="touch"]:not(.f2dTouchBattle):not(.f2dTouchEditorOpen) .card {
  touch-action: none;
}
html[data-f2d-touch-gesture-policy="manual-scroll-unless-owned"] body[data-f2d-input="touch"] [data-touch-stick],
html[data-f2d-touch-gesture-policy="manual-scroll-unless-owned"] body[data-f2d-input="touch"] [data-touch-btn],
html[data-f2d-touch-gesture-policy="manual-scroll-unless-owned"] body[data-f2d-input="touch"] .mapEditorPreview,
html[data-f2d-touch-gesture-policy="manual-scroll-unless-owned"] body[data-f2d-input="touch"] .mapEditorPreview *,
html[data-f2d-touch-gesture-policy="manual-scroll-unless-owned"] body[data-f2d-input="touch"] input[type="range"] {
  touch-action: none !important;
}
#modal.manualModalActive .manualBookRight.manualSwipeTracking {
  animation: none !important;
  transition: none !important;
  transform: translateX(var(--manual-swipe-x, 0px)) rotateY(calc(var(--manual-swipe-progress, 0) * -5deg)) !important;
  will-change: transform;
}
#modal.manualModalActive .manualBookRight.manualSwipeSnap {
  animation: none !important;
  transition: transform .18s cubic-bezier(.2,.75,.25,1) !important;
  transform: translateX(var(--manual-swipe-x, 0px)) !important;
  will-change: transform;
}
#modal.manualModalActive .manualBookRight {
  touch-action: none !important;
}

/* En un dispositivo muy ancho y bajo el libro conserva índice izquierdo + hoja derecha. */
@media (orientation: landscape) and (max-height: 650px) and (min-width: 700px) {
  #modal.manualModalActive .modalBox {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding: 5px 7px !important;
  }
  #modal.manualModalActive #modalTitle {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
  }
  #modal.manualModalActive #modalText {
    grid-row: 1 / -1 !important;
  }
  #modal.manualModalActive .manualBookScene {
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 5px !important;
    padding: 38px 5px 5px !important;
  }
  #modal.manualModalActive .manualBook.open {
    grid-template-columns: clamp(180px, 27vw, 300px) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 5px !important;
  }
  #modal.manualModalActive .manualBookLeft {
    display: block !important;
    height: 100% !important;
    max-height: none !important;
    border-radius: 14px 7px 7px 14px !important;
    padding: 9px !important;
  }
  #modal.manualModalActive .manualBookLeft h2 {
    display: block !important;
    margin: 2px 0 5px !important;
    font-size: 1rem !important;
  }
  #modal.manualModalActive .manualBookLeft .manualBookKicker {
    margin: 0 0 2px !important;
    font-size: .62rem !important;
  }
  #modal.manualModalActive .manualIndexList {
    display: grid !important;
    max-height: calc(100% - 40px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 3px 2px 0 !important;
    touch-action: none !important;
  }
  #modal.manualModalActive .manualIndexList li {
    width: 100% !important;
  }
  #modal.manualModalActive .manualIndexList button {
    width: 100% !important;
    max-width: none !important;
    min-height: 26px !important;
    padding: 4px 7px !important;
    font-size: .70rem !important;
  }
  #modal.manualModalActive .manualBookRight {
    display: block !important;
    height: 100% !important;
    max-height: none !important;
    border-radius: 7px 14px 14px 7px !important;
    padding: 10px 13px !important;
    overflow-y: auto !important;
  }
  #modal.manualModalActive .manualBookRight h2 {
    margin: 2px 0 7px !important;
    font-size: clamp(1.2rem, 3.8vh, 1.65rem) !important;
  }
  #modal.manualModalActive .manualBookRight h3 {
    margin: 7px 0 3px !important;
    font-size: .96rem !important;
  }
  #modal.manualModalActive .manualBookRight p {
    margin: 4px 0 !important;
    font-size: clamp(.78rem, 2.35vh, .94rem) !important;
    line-height: 1.38 !important;
  }
  #modal.manualModalActive .manualBookFooter {
    min-height: 27px !important;
    grid-template-columns: 1fr !important;
    padding: 3px 7px !important;
    margin: 0 !important;
  }
  body[data-f2d-input="touch"] #modal.manualModalActive .manualPrevButton,
  body[data-f2d-input="touch"] #modal.manualModalActive .manualNextButton {
    display: none !important;
  }
  #modal.manualModalActive .manualDots {
    justify-content: center !important;
    overflow-x: auto !important;
    min-height: 18px !important;
  }
  #modal.manualModalActive .manualDot {
    width: 9px !important;
    height: 9px !important;
    min-height: 9px !important;
  }
  #modal.manualModalActive .manualPageFold,
  #modal.manualModalActive .manualStackFold {
    display: none !important;
  }
}

/* 15.1.42.4 — viewport desplazable real para cada interfaz móvil. */
html[data-f2d-touch-gesture-policy="manual-scroll-unless-owned"] body[data-f2d-input="touch"]:not(.f2dTouchBattle):not(.f2dTouchEditorOpen):not(.f2dOrientationBlocked) {
  height: var(--f2d-viewport-height, 100dvh);
  min-height: 0;
  overflow: hidden !important;
}
html[data-f2d-touch-gesture-policy="manual-scroll-unless-owned"] body[data-f2d-input="touch"]:not(.f2dTouchBattle):not(.f2dTouchEditorOpen):not(.f2dOrientationBlocked) > .app {
  width: min(1220px, 100vw);
  height: var(--f2d-viewport-height, 100dvh);
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
html[data-f2d-touch-gesture-policy="manual-scroll-unless-owned"] body[data-f2d-input="touch"]:not(.f2dTouchBattle):not(.f2dTouchEditorOpen):not(.f2dOrientationBlocked) > .app > .topbar {
  grid-row: 1;
  min-height: 0;
}
html[data-f2d-touch-gesture-policy="manual-scroll-unless-owned"] body[data-f2d-input="touch"]:not(.f2dTouchBattle):not(.f2dTouchEditorOpen):not(.f2dOrientationBlocked) > .app > .screen.active {
  grid-row: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  touch-action: none;
}
html[data-f2d-touch-gesture-policy="manual-scroll-unless-owned"] body[data-f2d-input="touch"].f2dShortLandscape:not(.f2dTouchBattle):not(.f2dTouchEditorOpen):not(.f2dOrientationBlocked) > .app {
  grid-template-rows: minmax(0, 1fr);
}
html[data-f2d-touch-gesture-policy="manual-scroll-unless-owned"] body[data-f2d-input="touch"].f2dShortLandscape:not(.f2dTouchBattle):not(.f2dTouchEditorOpen):not(.f2dOrientationBlocked) > .app > .screen.active {
  grid-row: 1;
}
/* Las interfaces internas pueden seguir usando carriles horizontales, pero la pantalla completa siempre conserva descenso vertical. */
html[data-f2d-touch-gesture-policy="manual-scroll-unless-owned"] body[data-f2d-input="touch"] .qualitySelectionRoot,
html[data-f2d-touch-gesture-policy="manual-scroll-unless-owned"] body[data-f2d-input="touch"] #qualitySelectionStepRoot {
  min-height: min-content;
  overflow: visible;
}

/* 15.1.42.7 checkpoint — recuperación visual automática ante colapso sostenido.
   No toca Canvas de batalla ni simulación; elimina composición CSS costosa mientras
   RuntimeFpsMonitor confirma que el hilo principal está críticamente degradado. */
body.f2dPerformanceEmergency .screen *,
body.f2dPerformanceEmergency .screen *::before,
body.f2dPerformanceEmergency .screen *::after,
body.f2dPerformanceEmergency .modalShade *,
body.f2dPerformanceEmergency .modalShade *::before,
body.f2dPerformanceEmergency .modalShade *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.f2dPerformanceEmergency .logoClickParticle,
body.f2dPerformanceEmergency .menuDecorParticle,
body.f2dPerformanceEmergency .selectionAmbientParticle { display:none !important; }
body.f2dPerformanceEmergency #homeSceneCanvas,
body.f2dPerformanceEmergency canvas[data-mode-preview-scene] { image-rendering:pixelated; }

/* 15.1.42.10 — easter egg del título limitado y progresivo. */
.logoClickParticle {
  width: var(--particle-size, 8px);
  height: var(--particle-size, 8px);
  margin-left: calc(var(--particle-size, 8px) * -.5);
  margin-top: calc(var(--particle-size, 8px) * -.5);
  background: radial-gradient(circle, #fff 0 16%, hsl(var(--particle-hue, 48deg) 96% 62%) 28% 58%, transparent 74%);
  box-shadow: 0 0 calc(16px * var(--particle-glow, 1)) hsla(var(--particle-hue, 48deg) 96% 62% / .78);
  animation-duration: var(--particle-duration, 720ms);
}
body.f2dLogoHoldActive .mainGameTitle {
  transform: scale(calc(1.02 + min(.12, (var(--f2d-logo-hold-intensity, 1) - 1) * .045)));
  filter: hue-rotate(var(--f2d-logo-hold-hue, 0deg)) saturate(calc(1 + (var(--f2d-logo-hold-intensity, 1) - 1) * .24));
}
body.f2dScreenInverted .app,
body.f2dScreenInverted .modalShade {
  filter: invert(1) hue-rotate(var(--f2d-inversion-hue, 180deg)) saturate(var(--f2d-inversion-saturation, 1.05)) contrast(var(--f2d-inversion-contrast, 1.03));
}

/* 15.1.42.10 — perfiles táctiles P1–P4, draft Rounds y borradores de reglas. */
.f2dTouchControls {
  --touch-player-color: #f8fafc;
  --touch-player-accent: rgba(248,250,252,.34);
}
.f2dTouchStick,
.f2dTouchControls [data-touch-btn] {
  border-color: color-mix(in srgb, var(--touch-player-color) 70%, transparent);
  box-shadow: 0 12px 28px rgba(0,0,0,.35), inset 0 0 20px var(--touch-player-accent), 0 0 14px color-mix(in srgb, var(--touch-player-color) 28%, transparent);
}
.f2dTouchStickKnob { border-color: color-mix(in srgb, var(--touch-player-color) 64%, transparent); }
#f2dTouchLayoutEditor { --touch-player-color:#f8fafc; --touch-player-accent:rgba(248,250,252,.34); }
#f2dTouchLayoutEditor .f2dTouchEditorBar {
  border-bottom-color: color-mix(in srgb, var(--touch-player-color) 55%, transparent);
  box-shadow: 0 10px 32px rgba(0,0,0,.35), inset 0 -2px 0 var(--touch-player-accent);
}
#f2dTouchLayoutEditor .f2dTouchEditorIdentity small { color: var(--touch-player-color); }
#f2dTouchEditorPlayer {
  border: 2px solid var(--touch-player-color);
  background: linear-gradient(135deg, color-mix(in srgb, var(--touch-player-color) 24%, #020617), color-mix(in srgb, var(--touch-player-accent) 32%, #0f172a));
  color: var(--touch-player-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--touch-player-accent) 55%, transparent), 0 0 16px color-mix(in srgb, var(--touch-player-color) 42%, transparent);
  font-weight: 900;
}
body.f2dTouchRoundsOverlay .roundsTouchConfirm151421 {
  border-color: color-mix(in srgb, var(--rounds-touch-player-color, #f8fafc) 78%, transparent);
  box-shadow: 0 0 0 2px var(--rounds-touch-player-accent, rgba(248,250,252,.28)), 0 10px 28px rgba(0,0,0,.42);
}
.continueRuleDraft1514210 {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:stretch;
  padding:8px;
  border:1px solid rgba(125,211,252,.32);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(8,47,73,.56),rgba(15,23,42,.72));
}
.continueRuleDraftMain1514210 { min-width:0; display:grid; justify-items:start; gap:2px; text-align:left; }
.continueRuleDraftMain1514210 span { color:#7dd3fc; font-size:.64rem; font-weight:1000; letter-spacing:.11em; }
.continueRuleDraftMain1514210 strong { color:#f8fafc; font-size:1rem; }
.continueRuleDraftMain1514210 small { color:#bae6fd; font-size:.72rem; }