/* 2 CONTRA 2 (js/team.js) y TORNEO (js/tournament.js) */
/* Selección: tercera fila de modos bajo TORRE / DUELO 2P (antes de las tarjetas, que empiezan en 35 %) */
#tm-modes{ position:absolute; top:134px; right:2.5%; display:flex; gap:10px; z-index:5; }
#screen-select:is(.is-online, .is-training, .arc-tower) #tm-modes{ display:none; }
#tm-hint{ display:none; position:absolute; top:70px; left:50%; transform:translateX(-50%); z-index:5; white-space:nowrap;
  font-size:9px; color:#cbd5ff; text-shadow:2px 2px 0 #000; background:rgba(12,16,32,.7); padding:8px 12px; border-radius:6px; pointer-events:none; }
#screen-select.tm-pick #tm-hint{ display:block; }
#screen-select.tm-pick .card-hotspot.taken::after{ content:attr(data-tm); }

/* HUD: reserva bajo los rounds; el nombre del activo en dorado */
.tm-res{ display:none; align-items:center; gap:8px; margin-top:8px; font-size:9px; text-shadow:2px 2px 0 #000; }
#screen-battle.tm-on .tm-res{ display:flex; }
#screen-battle.tm-on .hud-name{ color:var(--gold); }
.hud-p2 .tm-res{ flex-direction:row-reverse; }
.tm-res img{ width:38px; height:38px; object-fit:contain; image-rendering:pixelated; background:rgba(12,16,32,.65); border:2px solid #000; border-radius:4px; }
.hud-p2 .tm-res img{ transform:scaleX(-1); }
.tm-res b{ width:110px; height:10px; background:#2a0b0b; border:2px solid #000; border-radius:2px; overflow:hidden; }
.tm-res b i{ display:block; height:100%; width:0; background:linear-gradient(#d8e0ff,#8e9cc8); }
.tm-res em{ font-style:normal; font-size:8px; color:#8ea0c8; }
.tm-res.is-ready em{ color:var(--green); }
.tm-res.is-out{ opacity:.45; }
.tm-res.is-out span{ text-decoration:line-through; }
.tm-ghost{ position:absolute; left:0; bottom:0; z-index:1; opacity:0; pointer-events:none; background:no-repeat 0 0 / 100% 100%;
  image-rendering:pixelated; transform-origin:bottom center; }

/* Torneo: configuración */
.tn-panel{ width:90%; padding:22px 26px; }
.tn-panel h2{ margin-bottom:14px; }
.tn-row{ display:flex; gap:12px; justify-content:center; margin-bottom:14px; }
.tn-slots{ display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; }
.tn-slot{ display:flex; align-items:center; gap:10px; padding:4px 10px; background:rgba(36,49,86,.45); border:3px solid #000; border-radius:6px; }
.tn-slot > span{ width:24px; font-size:14px; color:var(--gold); text-align:center; }
.tn-slot button{ min-height:44px; padding:6px 10px; font-family:inherit; font-size:9px; color:#fff; cursor:pointer;
  background:var(--navy); border:3px solid #000; box-shadow:0 2px 0 #000; border-radius:4px; }
.tn-k{ width:150px; }
.tn-k.k-j1{ background:#39a0ff; color:#05101f; }
.tn-k.k-j2{ background:var(--red); }
.tn-c{ flex:1; display:flex; align-items:center; gap:10px; text-align:left; }
.tn-slot img, .tn-e img{ width:36px; height:36px; object-fit:contain; image-rendering:pixelated; }
.tn-slot button:hover, .tn-slot button:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

/* Torneo: llave (columnas por ronda unidas por líneas) */
.tn-br{ display:flex; justify-content:center; gap:30px; }
.tn-col{ width:270px; display:flex; flex-direction:column; }
.tn-col h3{ margin:0 0 8px; font-size:10px; text-align:center; }
.tn-ms{ flex:1; display:flex; flex-direction:column; justify-content:space-around; gap:10px; }
.tn-m{ position:relative; background:rgba(36,49,86,.45); border:3px solid #000; border-radius:6px; }
.tn-m::after{ content:""; position:absolute; top:50%; right:-19px; width:16px; border-top:3px solid #56628a; }
.tn-col:last-child .tn-m::after{ display:none; }
.tn-m.is-next{ border-color:var(--gold); box-shadow:0 0 14px rgba(255,207,63,.5); }
.tn-e{ display:flex; align-items:center; gap:6px; min-height:34px; padding:3px 8px; font-size:8px; }
.tn-e img{ width:28px; height:28px; }
.tn-e + .tn-e{ border-top:2px solid rgba(0,0,0,.55); }
.tn-e small{ margin-left:auto; font-size:7px; color:#8ea0c8; }
.tn-e.is-w{ color:var(--gold); }
.tn-e.is-l{ opacity:.4; }
.tn-e.is-tbd{ color:#56628a; }
.tn-note, .tn-next{ margin-top:14px; font-size:10px; line-height:1.8; text-align:center; color:#cbd5ff; }
.tn-next{ color:var(--gold); }
.tn-ann{ text-align:center; text-shadow:4px 4px 0 #000; }
.tn-ann small{ display:block; margin-bottom:22px; font-size:18px; color:var(--gold); }
.tn-ann b{ display:block; font-size:30px; font-weight:normal; }
.tn-ann i{ display:block; margin:16px 0; font-size:22px; font-style:normal; color:var(--red); }

/* Torneo: campeón y copa (solo CSS) */
.tn-champ{ display:flex; align-items:center; justify-content:center; gap:34px; }
.tn-champ > img{ width:auto; height:250px; image-rendering:pixelated; }
.tn-champ b{ display:block; font-size:18px; font-weight:normal; color:var(--gold); }
.tn-champ small{ display:block; margin:10px 0 18px; font-size:9px; color:#8ea0c8; }
.tn-champ p{ font-size:10px; line-height:1.9; color:#cbd5ff; }
.tn-cup{ position:relative; width:110px; height:150px; flex:none; }
.tn-cup::before{ content:""; position:absolute; left:12px; top:0; width:78px; height:78px; border:4px solid #000; border-radius:4px 4px 44px 44px;
  background:linear-gradient(90deg,#c8860a,#fff3a0 35%,var(--gold) 60%,#c8860a); box-shadow:-14px 10px 0 -6px var(--gold), 14px 10px 0 -6px var(--gold); }
.tn-cup::after{ content:""; position:absolute; left:28px; bottom:0; width:46px; height:68px; border:4px solid #000; border-top:0;
  background:linear-gradient(var(--gold-dark),var(--gold-dark)) 50% 0 / 14px 44px no-repeat, linear-gradient(90deg,#c8860a,var(--gold)) 0 100% / 100% 22px no-repeat; }