/* Guerra de Cristales en el motor real: marcador, suministros, vista rival y resultado. Letra >= 14 px, botones >= 48 px. */
.lanes-hud{ position:fixed; inset:0; z-index:16; pointer-events:none; font-family:var(--ui-font, monospace); color:var(--hud-ink); }
.lanes-hud.hidden{ display:none; }
.lanes-hud .ln-score{ position:absolute; top:calc(4px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%); display:grid; grid-template-columns:1fr 92px 1fr; gap:10px; align-items:center; width:min(500px,56vw); padding:4px 10px 6px; background:var(--hud-panel-bg); border:1px solid var(--hud-panel-line); border-top:3px solid var(--mode-accent); border-radius:var(--hud-panel-r); }
.ln-team{ display:flex; flex-direction:column; gap:2px; font-size:14px; line-height:1.1; }
.ln-amber{ text-align:right; align-items:flex-end; }
.ln-blue b{ color:var(--team-a); } .ln-amber b{ color:var(--team-b); }
.ln-bar{ display:block; width:100%; height:8px; background:var(--hud-track); border:1px solid #000; border-radius:5px; overflow:hidden; }
.ln-bar u{ display:block; height:100%; text-decoration:none; } .ln-blue .ln-bar u{ background:linear-gradient(90deg,#2f6fa8,var(--team-a)); } .ln-amber .ln-bar u{ background:linear-gradient(270deg,#b4561a,var(--team-b)); float:right; }
.ln-clock{ text-align:center; display:flex; flex-direction:column; } .ln-time{ font-size:20px; } .ln-wave{ font-size:14px; color:var(--mode-accent-2); }
.lanes-hud .ln-note{ position:absolute; top:calc(70px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%); font-size:15px; color:var(--mode-accent-2); text-shadow:2px 2px 0 #000; text-align:center; max-width:60vw; }
.lanes-hud .ln-chip{ pointer-events:auto; position:absolute; left:50%; bottom:calc(6px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); min-height:48px; padding:6px 14px; display:flex; flex-direction:column; align-items:center; gap:1px; font:inherit; font-size:14px; color:var(--hud-gold); background:var(--ui-btn-sec); border:2px solid #000; box-shadow:var(--ui-hi), var(--ui-shadow-sm); border-radius:var(--hud-panel-r); cursor:pointer; }
.lanes-hud.ln-supply .ln-chip{ border-color:var(--ember3); box-shadow:0 0 14px #ffcf5c88; animation:lnPulse 1.1s ease-in-out infinite; }
@keyframes lnPulse{ 50%{ box-shadow:0 0 24px #ffcf5cdd; } }
.lanes-hud .ln-shop{ pointer-events:auto; position:absolute; left:calc(136px + env(safe-area-inset-left,0px)); bottom:calc(66px + env(safe-area-inset-bottom,0px)); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; width:calc(100vw - 136px - 212px); padding:8px; background:var(--hud-panel-bg); border:2px solid var(--ember3); border-radius:var(--hud-panel-r); box-shadow:var(--ui-shadow-sm); }
.lanes-hud .ln-shop.hidden{ display:none; }
.lanes-hud.ln-shop-open .ln-rival{ display:none; }
.ln-buy{ min-height:56px; padding:4px 3px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; font:inherit; color:var(--hud-ink); background:var(--ui-btn-sec); border:2px solid var(--ui-line-hi); box-shadow:var(--ui-hi); border-radius:8px; cursor:pointer; }
.ln-buy b{ font-size:14px; line-height:1.05; } .ln-buy span{ font-size:14px; color:var(--hud-gold); } .ln-buy small{ display:none; }
.ln-buy.ln-send{ background:linear-gradient(180deg,#4a1a1a,#2a0e0e); border-color:var(--team-d); }
.ln-buy:disabled{ opacity:.45; cursor:default; }
.lanes-hud .ln-rival{ position:absolute; bottom:calc(6px + env(safe-area-inset-bottom,0px)); left:calc(128px + env(safe-area-inset-left,0px)); padding:3px; background:var(--hud-panel-bg); border:1px solid var(--hud-panel-line); border-top:3px solid var(--mode-accent); border-radius:var(--hud-panel-r); }
.ln-rival canvas{ display:block; width:200px; height:150px; }
.ln-horde{ font-size:14px; line-height:1.25; padding:2px 4px 0; color:var(--hud-gold); max-width:200px; } .ln-horde b{ color:var(--team-b); } .ln-horde i{ color:var(--hud-dim); font-style:normal; } .ln-horde span{ margin-right:6px; font-size:15px; }
.ln-pips{ font-size:14px; color:var(--hud-dim); } .ln-pips em{ font-style:normal; font-size:16px; margin-right:2px; } .ln-pips em.on{ color:var(--mode-accent-2); } .ln-pips em.off{ color:var(--panel-b); } .ln-pips small{ font-size:14px; }
.lanes-hud .ln-feed{ position:absolute; top:calc(70px + env(safe-area-inset-top,0px)); right:calc(10px + env(safe-area-inset-right,0px)); max-width:30vw; font-size:14px; line-height:1.25; text-align:right; text-shadow:0 2px 3px #000; }
.lanes-hud .ln-cards{ pointer-events:auto; position:absolute; left:50%; top:calc(84px + env(safe-area-inset-top,0px)); transform:translateX(-50%); width:min(680px,66vw); padding:10px 12px 12px; background:var(--hud-panel-bg); border:3px solid var(--mode-accent); border-radius:var(--hud-panel-r); box-shadow:var(--ui-shadow), 0 0 24px color-mix(in srgb, var(--mode-accent) 40%, transparent); }
.lanes-hud .ln-cards.hidden{ display:none; }
.ln-cards-title{ text-align:center; font-family:var(--ui-font-brand); font-size:14px; line-height:1.4; color:var(--mode-accent-2); letter-spacing:.04em; margin-bottom:6px; text-shadow:2px 2px 0 #000; } .ln-cards-title small{ display:block; font-size:14px; letter-spacing:0; font-family:var(--ui-font); color:var(--hud-dim); }
.ln-cards-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.ln-card{ min-height:92px; padding:8px 6px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font:inherit; color:var(--hud-ink); background:var(--ui-btn); border:2px solid #000; box-shadow:var(--ui-bevel); border-radius:10px; cursor:pointer; }
.ln-card:hover,.ln-card:focus-visible{ border-color:var(--mode-accent); box-shadow:var(--ui-bevel), 0 0 14px color-mix(in srgb, var(--mode-accent) 55%, transparent); outline:none; }
.ln-card-ico{ font-size:30px; line-height:1; color:var(--mode-accent-2); text-shadow:0 0 10px var(--mode-accent); } .ln-card b{ font-size:16px; } .ln-card-desc{ font-size:14px; color:var(--hud-dim); line-height:1.2; } .ln-card small{ font-size:14px; color:var(--ui-new); }
.ln-cards-timer{ display:block; height:6px; margin-top:8px; background:var(--hud-track); border-radius:3px; overflow:hidden; } .ln-cards-timer u{ display:block; height:100%; background:var(--mode-accent); text-decoration:none; }
@media (max-height:520px){ .lanes-hud .ln-cards{ top:calc(80px + env(safe-area-inset-top,0px)); width:min(640px,64vw); padding:5px 8px 7px; } .ln-card{ min-height:64px; padding:4px 4px; gap:1px; } .ln-card-desc{ line-height:1.1; } .ln-card-ico{ font-size:24px; } .ln-cards-title{ font-size:16px; margin-bottom:3px; } .ln-rival canvas{ width:210px; height:61px; } .ln-horde{ max-width:210px; } }
.lanes-result{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; background:rgba(8,5,3,.82); font-family:var(--ui-font, monospace); }
.lanes-result.hidden{ display:none; }
.ln-res-card{ width:min(620px,94vw); max-height:94vh; overflow:auto; padding:16px 20px; background:linear-gradient(160deg,var(--ui-bg-1),var(--ui-bg-2)); border:3px solid #000; border-top:4px solid var(--mode-accent); box-shadow:var(--ui-hi), var(--ui-shadow); border-radius:var(--hud-panel-r); color:var(--hud-ink); text-align:center; }
.ln-res-kicker{ font-size:14px; color:var(--mode-accent); letter-spacing:.1em; } .ln-res-card h2{ margin:4px 0; font-family:var(--ui-font-brand); font-size:20px; line-height:1.3; color:var(--mode-accent-2); text-shadow:3px 3px 0 #000; } .ln-res-card p{ font-size:15px; margin:4px 0 8px; }
.ln-res-card table{ width:100%; border-collapse:collapse; font-size:14px; } .ln-res-card th,.ln-res-card td{ padding:5px 6px; border-bottom:1px solid var(--ui-line); text-align:right; } .ln-res-card th:first-child,.ln-res-card td:first-child{ text-align:left; } .ln-res-card tr.me td{ color:var(--hud-gold); font-weight:700; }
.ln-res-btns{ display:flex; gap:10px; justify-content:center; margin-top:12px; flex-wrap:wrap; } .ln-res-btns button{ min-height:52px; padding:8px 18px; font:inherit; font-size:18px; color:var(--hud-ink); background:var(--ui-btn-hot); border:3px solid #000; box-shadow:var(--ui-bevel), var(--ui-shadow-sm); border-radius:8px; cursor:pointer; } .ln-res-btns .ln-exit{ background:var(--ui-btn-sec); color:var(--hud-dim); }

/* Coliseo: marcador de cuatro equipos, espectador y mapa de los dos fosos */
.col-hud .col-score{ position:absolute; top:calc(4px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%); display:flex; gap:8px; align-items:stretch; padding:4px 8px; background:var(--hud-panel-bg); border:1px solid var(--hud-panel-line); border-top:3px solid var(--mode-accent); border-radius:var(--hud-panel-r); }
.col-teams{ display:flex; gap:6px; }
.col-team{ border-left:4px solid var(--tc); padding:1px 6px; font-size:14px; line-height:1.15; min-width:74px; white-space:nowrap; } .col-team b{ color:var(--tc); display:block; }
.col-team em{ font-style:normal; font-size:14px; margin-right:2px; } .col-team em.on{ color:var(--mode-accent-2); } .col-team em.off{ color:var(--panel-b); }
.col-team.me{ background:rgba(255,255,255,.07); } .col-team.fighting{ box-shadow:inset 0 0 0 1px var(--tc); }
.col-mid{ display:flex; flex-direction:column; justify-content:center; text-align:center; padding-left:8px; border-left:1px solid var(--hud-panel-line); } .col-round{ font-size:15px; color:var(--mode-accent-2); } .col-clock{ font-size:14px; white-space:nowrap; }
.col-hud .col-note{ top:calc(66px + env(safe-area-inset-top,0px)); }
.col-hud .col-feed{ top:calc(70px + env(safe-area-inset-top,0px)); }
.col-hud .col-spec{ pointer-events:auto; position:absolute; left:50%; top:calc(96px + env(safe-area-inset-top,0px)); transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--hud-panel-bg); border:2px solid var(--mode-accent); border-radius:var(--hud-panel-r); font-size:14px; }
.col-hud .col-spec.hidden{ display:none; }
.col-spec button{ min-width:48px; min-height:48px; padding:4px 12px; font:inherit; font-size:18px; color:var(--hud-ink); background:var(--ui-btn-sec); border:2px solid var(--ui-line-hi); box-shadow:var(--ui-hi); border-radius:8px; cursor:pointer; } .col-spec .col-pit{ font-size:14px; }
.col-spec-name{ max-width:34vw; }
@media (max-height:520px){ .col-team{ min-width:64px; padding:1px 4px; } .col-hud .col-spec{ top:calc(90px + env(safe-area-inset-top,0px)); } }

.lanes-hud .ln-recall{ pointer-events:auto; position:absolute; left:calc(50% + 74px); bottom:calc(6px + env(safe-area-inset-bottom,0px)); min-width:56px; min-height:48px; padding:4px 10px; display:flex; flex-direction:column; align-items:center; gap:0; font:inherit; font-size:14px; color:var(--hud-ink); background:var(--ui-btn-sec); border:2px solid #000; box-shadow:var(--ui-hi), var(--ui-shadow-sm); border-radius:var(--hud-panel-r); cursor:pointer; }
.lanes-hud .ln-recall b{ font-size:15px; color:var(--hud-gold); } .lanes-hud .ln-recall.on{ border-color:var(--mode-accent-2); box-shadow:0 0 14px color-mix(in srgb, var(--mode-accent-2) 65%, transparent); } .lanes-hud .ln-recall:disabled{ opacity:.45; }
.ln-clock .ln-epics{ font-size:14px; white-space:nowrap; color:var(--ui-epic); }

.ln-shop-hint{ grid-column:1 / -1; font-size:14px; line-height:1.2; color:var(--hud-dim); text-align:center; }
.ln-buy.ln-item{ background:linear-gradient(180deg,#2a1a3a,#170e22); border-color:var(--ui-epic); }

/* Mismo bloque de estado que la campaña: el nombre del modo ("Guerra de Cristales") ocupa su propia fila en vez de cortarse con "…" */
body.lanes-on #hud-arena-line{ grid-column:1 / -1; color:var(--mode-accent-2); }
body.lanes-on #hud .top-pill{ border-left:3px solid var(--mode-accent); }
/* Menú de pausa: el mismo de la campaña; solo cambia el acento y el rótulo del modo */
body[data-mode] #pause-screen .arena-title{ color:var(--mode-accent); }
body[data-mode="coliseo"] #pause-screen .arena-title::after{ content:" · Coliseo"; }
body[data-mode="cristales"] #pause-screen .arena-title::after{ content:" · Guerra de Cristales"; }
body[data-mode] #pause-screen #resume-btn{ box-shadow:var(--ui-bevel), 0 0 0 2px var(--mode-accent); }

/* ---------- AMIGO / ENEMIGO / NEUTRAL (tokens --ally --enemy --neutral --self en ui-kit.css; lógica en js/arenas/lanes/lanes-sides.js) ----------
   Verde = aliado (marco liso, escudo) · Rojo = enemigo (marco grueso con muescas, espada) · Ámbar = neutral. El color del EQUIPO queda en el nombre. */
.ln-side{ display:inline-block; width:14px; height:14px; margin-right:4px; vertical-align:-2px; background:var(--ally); -webkit-mask:var(--ico-shield) center/contain no-repeat; mask:var(--ico-shield) center/contain no-repeat; filter:drop-shadow(1px 1px 0 #000); }
.lanes-hud{ --ico-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2h12v7c0 3-3 5-6 6-3-1-6-3-6-6z'/%3E%3C/svg%3E"); --ico-sword:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M15 1v4L7 13l-1-1L14 4zM1 10l2-1 4 4-1 2-2-1-1 1-2-2 1-1z'/%3E%3C/svg%3E"); }
[data-side="enemy"] > .ln-side, [data-side="enemy"] .ln-side{ background:var(--enemy); -webkit-mask-image:var(--ico-sword); mask-image:var(--ico-sword); }
[data-side="ally"] .ln-side, [data-side="self"] .ln-side{ background:var(--ally); }
.ln-team .ln-name::after{ content:attr(data-tag); margin-left:6px; font-weight:400; }
.ln-team[data-side="ally"] .ln-name::after{ color:var(--ally-hi); } .ln-team[data-side="enemy"] .ln-name::after{ color:var(--enemy-hi); }
.ln-team[data-side] .ln-bar{ position:relative; height:10px; }
.ln-team[data-side="ally"] .ln-bar{ border:2px solid var(--ally-dark); } .ln-team[data-side="ally"] .ln-bar u{ background:var(--ally); }
.ln-team[data-side="enemy"] .ln-bar{ border:2px solid var(--enemy-dark); box-shadow:0 0 0 1px var(--enemy); } .ln-team[data-side="enemy"] .ln-bar u{ background:var(--enemy); }
.ln-team[data-side="enemy"] .ln-bar::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 calc(25% - 2px), var(--enemy-dark) calc(25% - 2px) 25%); }
.ln-horde b{ color:var(--ally-hi); }
/* Coliseo: el borde izquierdo del equipo es del bando (liso = aliado, discontinuo = rival); el nombre conserva el color del equipo */
.col-team[data-side="ally"]{ border-left:4px solid var(--ally); } .col-team[data-side="enemy"]{ border-left:4px dashed var(--enemy); }
.col-team[data-side="enemy"] .ln-side{ margin-right:3px; }
/* lista de compañeros (campaña): en Cristales/Coliseo la vida del aliado es verde */
body.lanes-on .ally-hp-fill:not(.shield-seg){ background:linear-gradient(90deg,var(--ally-dark),var(--ally)); }
/* Leyenda del minimapa (colores = LNA_MINI en lanes-art-draw.js): botón ? de 44 px y panel de 14 px+ */
.lanes-hud .ln-rival{ pointer-events:none; }
.ln-legend-btn{ pointer-events:auto; position:absolute; top:0; left:0; width:44px; height:44px; padding:0; font:inherit; font-size:18px; font-weight:700; color:var(--hud-ink); background:transparent; border:0; cursor:pointer; text-shadow:2px 2px 0 #000; }
.ln-legend{ pointer-events:auto; position:absolute; left:0; bottom:100%; margin-bottom:4px; width:min(300px,44vw); display:grid; grid-template-columns:1fr 1fr; gap:2px 8px; padding:6px 8px; font-size:14px; line-height:1.2; color:var(--hud-ink); background:var(--hud-panel-bg); border:1px solid var(--hud-panel-line); border-radius:var(--hud-panel-r); }
.ln-legend.hidden{ display:none; }
.ln-legend span{ display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ln-legend i{ flex:0 0 12px; width:12px; height:12px; border:1px solid #000; }

/* POSTGAME: recompensas en la pantalla de resultado (js/systems/postgame.js). Letra >= 14 px. */
.ln-res-pg{ margin:6px 0 10px; padding:8px 12px; text-align:left; background:rgba(0,0,0,.28); border:2px solid var(--ui-line); border-left:4px solid var(--mode-accent); border-radius:6px; font-size:15px; line-height:1.35; }
.ln-res-pg > b{ display:block; color:var(--mode-accent-2); letter-spacing:.06em; font-size:14px; margin-bottom:4px; }
.ln-res-pg p{ font-size:14px; margin:3px 0; text-align:left; } .ln-res-pg small{ display:block; color:var(--hud-dim); font-size:14px; margin-top:4px; }
.ln-pg-got{ display:flex; flex-wrap:wrap; gap:4px 16px; color:var(--hud-gold); font-weight:700; font-size:16px; }
.ln-pg-lines{ margin:3px 0 4px 18px; padding:0; font-size:14px; color:var(--hud-dim); }
.ln-pg-meter{ display:grid; gap:2px; margin:6px 0; font-size:14px; } .ln-pg-meter b{ color:var(--hud-ink); }
.ln-pg-bar{ display:block; height:10px; background:#000; border:2px solid #000; border-radius:3px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--ui-line); } .ln-pg-bar u{ display:block; height:100%; background:var(--hud-gold); }
.ln-pg-cap{ color:var(--enemy-hi,#ff9a8a); } .ln-pg-ach{ color:var(--mode-accent-2); } .ln-pg-training{ border-left-color:var(--hud-dim); }
@media (max-height:420px){ .ln-res-pg{ padding:6px 10px; margin:4px 0 6px; } .ln-pg-lines{ display:none; } .ln-res-card{ padding:10px 14px; } .ln-res-card table{ font-size:14px; } }

/* Lobby: estado del postgame / entrenamiento (index.html #pg-lobby) */
.pg-lobby{ font-size:14px; line-height:1.3; margin:4px 0; color:var(--ui-ink,#e8dcc4); } .pg-lobby b{ color:var(--mode-accent-2,#ffd76a); }
.pg-train{ display:flex; align-items:center; gap:8px; font-size:14px; min-height:32px; cursor:pointer; } .pg-train input{ width:20px; height:20px; } .pg-train.hidden{ display:none; }