/* css/menus.css — Pantallas de menú: título, modos, galería, ficha de campeón, tienda, selección de arena y preparación. */
/* ---------- Screens ---------- */
.screen{
  position:fixed; inset:0; z-index:20;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: calc(16px + env(safe-area-inset-top,0px)) calc(18px + env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) calc(18px + env(safe-area-inset-left,0px));
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255,122,46,0.10), transparent 60%),
    linear-gradient(180deg, #0d0705 0%, #070403 100%);
  text-align:center;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  touch-action:pan-y; overscroll-behavior:contain; /* scroll vertical con el dedo, sin arrastrar la página */
}
.brand{
  font-family:var(--font-pixel); font-size:1.35rem; letter-spacing:0; margin:0 0 10px 0; line-height:1.6;
  color:var(--ember3);
  text-shadow: 3px 3px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
}
.brand-sub{font-family:var(--font-retro); color:var(--text-dim); font-size:1.05rem; letter-spacing:0.1em; margin-bottom:28px;}
.arena-title{font-family:var(--font-retro); font-size:1.5rem; color:var(--ember1); margin-bottom:26px; letter-spacing:0.03em; text-shadow:2px 2px 0 #000;}

/* ---------- Pantalla de título ---------- */
#title-screen{
  background:
    radial-gradient(circle at 12% 92%, rgba(255,110,30,0.42), transparent 42%),
    radial-gradient(circle at 88% 14%, rgba(180,210,255,0.20), transparent 40%),
    radial-gradient(circle at 88% 14%, rgba(230,235,255,0.55), transparent 6%),
    linear-gradient(100deg, #2a0f08 0%, #200d0c 28%, #150e14 48%, #0a1018 66%, #070f14 100%),
    linear-gradient(180deg, #0d0705 0%, #05070a 100%);
}
.title-fire-glow{
  position:absolute; left:0; right:0; bottom:0; height:40%;
  background:linear-gradient(0deg, rgba(255,110,30,0.22), transparent 70%),
             linear-gradient(90deg, rgba(255,110,30,0.20), transparent 55%, rgba(140,190,255,0.10));
  animation:titleFlicker 2.6s ease-in-out infinite; pointer-events:none;
}
@keyframes titleFlicker{ 0%,100%{opacity:0.75;} 50%{opacity:1;} }
/* Escena del título: ejército de héroes pixelados (title-scene.js) detrás del logo y el botón */
#title-screen{ justify-content:flex-start; padding-top:max(5vh, env(safe-area-inset-top)); overflow:hidden; }
#title-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
#title-screen > :not(canvas):not(.title-fire-glow){ position:relative; z-index:1; }
#title-screen .title-brand{ font-size:clamp(2.2rem, 11vh, 3.4rem); letter-spacing:0.06em; margin-top:0; }
#title-screen .brand-sub{ font-size:clamp(0.62rem, 3.2vh, 1.05rem); }
#title-screen .brand-sub{ margin-bottom:0; text-shadow:0 2px 4px #000; }
#title-continue-btn{ margin-top:auto; margin-bottom:max(4vh, calc(env(safe-area-inset-bottom) + 10px)); }
.title-brand{ font-size:3.1rem; }
.title-heroes{ display:flex; gap:18px; margin:22px 0 30px; }
.title-hero{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; background:rgba(10,6,4,0.6); border:1.5px solid currentColor;
  box-shadow:0 0 14px currentColor; opacity:0.9;
}

/* ---------- Selección de modo de juego ---------- */
.mode-card{
  width:100%; max-width:380px; text-align:left; margin-bottom:12px; padding:16px 18px;
  background:linear-gradient(160deg, var(--panel), #0f0805); border:3px solid #000;
  border-radius:0; color:var(--text); font-family:inherit; cursor:pointer;
  box-shadow: inset 1px 1px 0 rgba(255,180,120,0.18), 4px 4px 0 #000;
}
.mode-card:active{ transform:translate(2px,2px); box-shadow: inset 1px 1px 0 rgba(255,180,120,0.18), 2px 2px 0 #000; }
.mode-card-icon{ font-size:1.4rem; margin-bottom:4px; }
.mode-card-title{ font-family:var(--font-retro); font-size:1.3rem; letter-spacing:0.04em; color:var(--ember3); margin-bottom:3px; }
.mode-card-note{ margin-top:4px; font-family:var(--font-retro); font-size:0.8rem; line-height:1.25; color:#e8c46a; }
#run-intro .ri-first{ font-size:0.9rem; color:#e8c46a; border-top:1px solid rgba(176,138,74,0.35); padding-top:3px; }
#run-intro .ri-first[hidden]{ display:none; }
.mode-card-desc{ font-family:var(--font-retro); font-size:0.95rem; color:var(--text-dim); line-height:1.3; }
.mode-card-soon{ opacity:0.45; cursor:default; }
.mainmenu-play{ border-color:var(--ember1); }

/* ---------- Galería de Campeones ---------- */
#gallery-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px; width:100%; max-width:420px;
  margin-bottom:18px; max-height:60vh; overflow-y:auto; padding:4px;
}
.gallery-card{
  background:linear-gradient(160deg, var(--panel), #0f0805); border:3px solid #000;
  border-radius:0; padding:12px 10px; text-align:center; cursor:pointer; color:var(--text);
  font-family:var(--font-retro); position:relative;
  box-shadow: inset 1px 1px 0 rgba(255,180,120,0.18), 3px 3px 0 #000;
}
.gallery-card.locked{ opacity:0.6; }
.gallery-card-icon{ font-size:1.8rem; margin-bottom:6px; }
.gallery-card-name{ font-size:1.05rem; margin-bottom:2px; }
.gallery-card-role{ font-size:0.85rem; color:var(--text-dim); margin-bottom:6px; }
.gallery-card-lvl{ font-size:0.92rem; color:var(--ember3); }
.gallery-card-lock{
  position:absolute; top:8px; right:8px; font-size:0.85rem;
}
.gallery-card-price{ font-size:0.88rem; color:#ffd76a; margin-top:2px; }

/* ---------- Ficha individual de campeón ---------- */
#champdetail-body{ width:100%; max-width:420px; text-align:left; font-family:var(--font-retro); }
.cd-header{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.cd-icon{ font-size:2.6rem; }
.cd-title{ font-size:1.5rem; color:var(--ember3); }
.cd-role{ font-size:1rem; color:var(--text-dim); }
.cd-section{
  background:rgba(10,6,4,0.6); border:2px solid #000; border-radius:0;
  padding:10px 12px; margin-bottom:10px; font-size:1.05rem; line-height:1.4;
  box-shadow: 2px 2px 0 #000;
}
.cd-section-title{ color:var(--ember3); margin-bottom:5px; font-size:0.95rem; letter-spacing:0.03em; text-transform:uppercase; }
.cd-stat-row{ display:flex; justify-content:space-between; padding:2px 0; }
.cd-unlock-box{ text-align:center; padding:16px; }
.cd-unlock-price{ font-size:1.6rem; color:#ffd76a; margin:8px 0; }

/* ---------- Tienda (stub) ---------- */
.shop-soon-box{
  background:rgba(10,6,4,0.5); border:3px dashed #000; border-radius:0;
  padding:28px 20px; text-align:center; width:100%; max-width:360px;
  font-family:var(--font-retro);
}

/* ---------- Selección de arena ---------- */
#arena-grid{ width:100%; max-width:380px; }
.arena-card{
  width:100%; text-align:left; margin-bottom:12px; padding:16px 18px;
  background:linear-gradient(160deg, var(--panel), #0f0805); border:3px solid #000;
  border-radius:0; color:var(--text); font-family:var(--font-retro); cursor:pointer; position:relative;
  box-shadow: inset 1px 1px 0 rgba(255,180,120,0.18), 4px 4px 0 #000;
}
.arena-card.selected{ border-color:var(--ember1); }
.arena-card-icon{ font-size:1.4rem; margin-bottom:4px; }
.arena-card-title{ font-size:1.3rem; color:var(--ember3); margin-bottom:3px; }
.arena-card-desc{ font-size:0.95rem; color:var(--text-dim); line-height:1.3; }
.arena-card-badge{
  position:absolute; top:12px; right:14px; font-size:0.6rem; font-weight:700; letter-spacing:0.04em;
  color:var(--ember3); background:rgba(255,122,46,0.14); border:1px solid var(--ember1);
  border-radius:6px; padding:2px 7px;
}
.arena-card.locked{ opacity:0.4; cursor:default; }

/* ---------- Preparación previa a la partida ---------- */
#prep-summary{ width:100%; max-width:380px; margin-bottom:20px; }
.prep-row{
  display:flex; align-items:center; gap:10px; background:var(--panel-a); border:1px solid var(--panel-b);
  border-radius:12px; padding:12px 14px; margin-bottom:10px; text-align:left;
}
.prep-row .prep-icon{ font-size:1.6rem; flex:none; }
.prep-row .prep-title{ font-size:0.9rem; font-weight:700; }
.prep-row .prep-sub{ font-size:0.7rem; color:var(--text-dim); margin-top:2px; }
.prep-equip-line{ font-size:0.68rem; color:var(--text-dim); margin-top:8px; }
.prep-equip-line b{ color:var(--text); }

.champ-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  width:100%; max-width:420px; margin-bottom:22px;
}
.champ-card{
  background:linear-gradient(160deg, var(--panel), #0f0805);
  border:3px solid #000;
  border-radius:0; padding:14px 10px 12px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  cursor:pointer; transition:border-color .15s, transform .15s;
  box-shadow: inset 1px 1px 0 rgba(255,180,120,0.18), 3px 3px 0 #000;
  font-family:var(--font-retro);
}
.champ-card.selected{border-color:var(--ember1); transform:translate(-1px,-1px); box-shadow: inset 1px 1px 0 rgba(255,180,120,0.18), 4px 4px 0 var(--ember1);}
.champ-icon{width:52px; height:52px; border-radius:0; display:flex; align-items:center; justify-content:center; font-size:1.5rem; border:2px solid #000;}
.champ-preview{width:52px; height:52px; border-radius:0; border:2px solid #000; image-rendering:pixelated; image-rendering:crisp-edges;}
.champ-name{font-size:1.15rem;}
.champ-role{font-size:0.85rem; color:var(--text-dim); line-height:1.25;}
.champ-lvl{font-size:0.85rem; color:var(--ember3); margin-top:2px;}
/* Concepto (arte en producción): silueta con el brillo del campeón, nunca el sprite sin aprobar */
.champ-card.concept canvas, .cx-champ-card.concept canvas, .shop-champ-row.concept canvas{ filter:brightness(0) drop-shadow(0 0 3px rgba(255,190,240,.85)); }
.champ-unlock-how{font-size:0.78rem; color:#ffb0e8; margin-top:3px; line-height:1.25;}

.btn{
  font-family:var(--font-retro); font-size:1.35rem; font-weight:400; letter-spacing:0.02em;
  color:var(--text); background:linear-gradient(180deg, #4a2210, #2a1208);
  border:3px solid #000; border-radius:0;
  padding:11px 30px; cursor:pointer;
  box-shadow: inset 2px 2px 0 rgba(255,180,120,0.35), inset -2px -2px 0 rgba(0,0,0,0.5), 4px 4px 0 #000;
  image-rendering:pixelated;
}
.btn:active{transform:translate(2px,2px); box-shadow: inset 2px 2px 0 rgba(255,180,120,0.35), inset -2px -2px 0 rgba(0,0,0,0.5), 2px 2px 0 #000;}
.btn.secondary{background:#141010; border-color:#000; color:var(--text-dim); font-size:1.1rem; padding:8px 20px;}
.btn.wide{width:100%; max-width:340px;}

.save-line{font-family:var(--font-retro); font-size:0.95rem; color:var(--text-dim); margin-top:18px; line-height:1.5;}
.save-code-row{ display:flex; gap:8px; margin-top:10px; width:100%; max-width:380px; }
.btn.small{ font-size:0.85rem; padding:7px 6px; flex:1; }
.save-line b{color:var(--ember3);}

/* Menú compacto para pantallas bajas en horizontal (iPhone acostado) */
@media (orientation: landscape) and (max-height: 520px){
  .screen{ justify-content:flex-start; padding-top:calc(10px + env(safe-area-inset-top,0px)); }
  .brand{ font-size:0.85rem; margin-top:2px; }
  .brand-sub{ font-size:0.72rem; margin-bottom:10px; }
  .arena-title{ font-size:0.85rem; margin-bottom:10px; }
  /* 12 guardianes en 2 filas de 6, con el sprite bien visible (antes 34 px: casi no se distinguían) */
  .champ-grid{ grid-template-columns:repeat(6,1fr); gap:6px; max-width:840px; margin-bottom:10px; }
  .champ-card{ padding:6px 4px 6px; gap:2px; }
  .champ-icon{ width:34px; height:34px; font-size:1rem; }
  .champ-preview{ width:64px; height:64px; }
  .champ-name{ font-size:0.72rem; }
  .champ-role{ display:none; }
  .champ-lvl{ font-size:0.72rem; margin-top:0; }
  .btn{ padding:9px 24px; font-size:0.9rem; }
  .btn.secondary{ padding:6px 16px; font-size:0.75rem; }
  .save-line{ margin-top:8px; font-size:0.72rem; line-height:1.4; }
  .buff-cards{ gap:8px; }
  .buff-card{ padding:9px 8px; min-width:110px; }
  .buff-card .ico{ font-size:1.1rem; margin-bottom:2px; }
  .buff-name{ font-size:0.78rem; }
  .buff-desc{ font-size:0.72rem; }
  #vote-note{ margin-top:8px; font-size:0.75rem; }
}

/* ---------- Tienda: catálogo de campeones ---------- */
.shop-section-title{ font-family:var(--font-retro); color:var(--ember3); font-size:1.1rem; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:8px; }
#shop-champ-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px; width:100%; max-width:440px;
  max-height:58vh; overflow-y:auto; padding:4px; margin-bottom:12px;
}
.shop-champ-card{ display:flex; flex-direction:column; align-items:center; padding:10px 8px; }
.shop-champ-anim, .cd-anim, .lobby-anim{ border:2px solid #000; image-rendering:pixelated; image-rendering:crisp-edges; }
.shop-champ-anim{ width:72px; height:72px; margin-bottom:6px; }
.shop-owned{ font-size:0.8rem; color:#7dffa0; margin-top:3px; }
.shop-owned.locked{ color:var(--text-dim); }
.shop-soon-small{ padding:10px 14px; font-size:0.85rem; color:var(--text-dim); }
.cd-anim{ width:64px; height:64px; flex:none; }
.cd-owned-line{ font-size:0.95rem; color:#7dffa0; }

/* ---------- Sala (lobby) previa a la partida ---------- */
.lobby-sub{ font-family:var(--font-retro); font-size:0.9rem; color:var(--text-dim); margin:-6px 0 10px; }
#lobby-slots{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:100%; max-width:440px; margin-bottom:12px; }
.lobby-slot{
  position:relative; background:linear-gradient(160deg, var(--panel), #0f0805); border:3px solid #000;
  padding:18px 4px 8px; text-align:center; font-family:var(--font-retro);
  box-shadow: inset 1px 1px 0 rgba(255,180,120,0.18), 3px 3px 0 #000;
  display:flex; flex-direction:column; align-items:center; min-width:0;
}
.lobby-slot.you{ border-color:var(--ember1); }
.lobby-slot.empty{ opacity:0.55; justify-content:center; }
.lobby-empty{ font-size:1.6rem; color:var(--text-dim); }
.lobby-anim{ width:100%; max-width:96px; height:auto; aspect-ratio:1/1; }
.lobby-tag{ position:absolute; top:3px; left:50%; transform:translateX(-50%); font-size:0.62rem; letter-spacing:0.06em; padding:0 5px; border:1px solid #000; }
.lobby-tag.you{ background:var(--ember1); color:#1a0c05; }
.lobby-tag.bot{ background:#2a2f3a; color:#b9c4d8; }
.lobby-name{ font-size:0.85rem; margin-top:4px; line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.lobby-meta{ font-size:0.7rem; color:var(--text-dim); }
.lobby-ready{ font-size:0.7rem; color:#7dffa0; margin-top:2px; }
.lobby-equip-title{ font-family:var(--font-retro); color:var(--ember3); font-size:1rem; text-transform:uppercase; letter-spacing:0.03em; margin:4px 0 6px; text-align:left; }
@media (max-width: 380px){
  #lobby-slots{ gap:5px; }
  .lobby-name{ font-size:0.72rem; }
}
@media (orientation: landscape) and (max-height: 520px){
  #shop-champ-grid{ grid-template-columns:repeat(5,1fr); max-width:760px; max-height:64vh; gap:8px; }
  .shop-champ-card{ padding:6px 4px; }
  .shop-champ-anim{ width:60px; height:60px; }
  .shop-champ-card .gallery-card-name{ font-size:0.9rem; }
  .shop-champ-card .gallery-card-price, .shop-owned{ font-size:0.72rem; }
  #lobby-slots{ max-width:560px; }
}
.lobby-note{ font-size:0.72rem; color:var(--text-dim); margin:-4px 0 4px; text-align:left; }

/* ---------- B1: sala online en la pre-sala ---------- */
#net-bar{ width:100%; max-width:560px; margin:-4px 0 10px; text-align:left; font-size:0.78rem; }
.net-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.net-name{ display:flex; gap:4px; align-items:center; color:var(--text-dim); font-size:0.72rem; }
.net-name input, #title-join-name input{ width:110px; padding:4px 6px; background:#140c08; color:var(--text); border:2px solid #000; font:inherit; }
.net-code{ font-family:var(--font-retro); color:var(--ember3); font-size:1rem; margin-right:4px; }
.net-hint{ color:var(--text-dim); font-size:0.66rem; margin-top:4px; line-height:1.4; }
.net-link{ font-size:0.6rem; color:#8fb8ff; word-break:break-all; margin-top:3px; }
.net-err{ color:#ff9a7a; font-size:0.7rem; margin-top:4px; }
.net-off{ color:var(--text-dim); font-size:0.68rem; }
.btn.small{ padding:5px 10px; font-size:0.72rem; }
.btn.ready-on{ background:#1f5a2e; border-color:#3ddc71; color:#c8ffd8; }
.lobby-tag.host{ background:#8a6a1e; color:#fff3c4; }
.lobby-tag.friend{ background:#1e4a6a; color:#cfe8ff; }
.lobby-ready.wait{ color:#8fb8ff; }
.lobby-ready.off{ color:#ff9a7a; }
.net-wait{ font-size:0.9rem; color:var(--text-dim); padding:18px; }
#title-join-name{ display:flex; gap:6px; align-items:center; justify-content:center; margin-top:10px; color:var(--text-dim); font-size:0.8rem; position:relative; z-index:2; }
#title-join-name.hidden{ display:none; }
#title-join-btn{ margin-top:8px; position:relative; z-index:2; }
.title-join-status{ margin-top:6px; font-size:0.72rem; color:var(--text-dim); position:relative; z-index:2; max-width:420px; }
.build-tag{ position:absolute; bottom:calc(6px + env(safe-area-inset-bottom,0px)); left:0; right:0; font-size:0.55rem; letter-spacing:0.12em; color:rgba(255,207,92,0.55); z-index:2; }
#net-toast{ position:fixed; left:50%; top:calc(14px + env(safe-area-inset-top,0px)); transform:translateX(-50%); z-index:60;
  background:#1a0f0a; border:2px solid var(--ember1); color:var(--text); padding:8px 14px; font-size:0.8rem; opacity:0; pointer-events:none; }
#net-toast.show{ animation:netToast 3.2s ease forwards; }
@keyframes netToast{ 0%{opacity:0;} 8%{opacity:1;} 85%{opacity:1;} 100%{opacity:0;} }
/* aviso de conexión del invitado (js/net/net-game.js: netConnRefresh): reconectando / anfitrión sin responder */
#net-conn{ position:fixed; left:50%; top:calc(56px + env(safe-area-inset-top,0px)); transform:translateX(-50%); z-index:59; pointer-events:none;
  max-width:min(92vw,560px); padding:7px 14px; border-radius:8px; background:rgba(20,14,8,0.92); border:1px solid #ffb347; color:#ffe2b0;
  font-weight:bold; font-size:0.8rem; line-height:1.3; text-align:center; box-shadow:0 4px 14px rgba(0,0,0,0.5); animation:netConnPulse 1.6s ease-in-out infinite; }
#net-conn.hidden{ display:none; }
@keyframes netConnPulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.7; } }
#net-debug-btn{ position:fixed; left:50%; transform:translateX(-50%); top:calc(2px + env(safe-area-inset-top,0px)); z-index:61;
  font:700 0.55rem monospace; padding:2px 5px; background:rgba(0,0,0,0.55); color:#8fb8ff; border:1px solid #2a4a6a; opacity:0.6; }
#net-debug-panel{ position:fixed; left:50%; transform:translateX(-50%); top:calc(22px + env(safe-area-inset-top,0px)); z-index:61;
  width:min(340px, 92vw); max-height:70vh; overflow:auto; background:rgba(6,10,16,0.92); border:1px solid #2a4a6a; color:#cfe8ff; font:0.62rem/1.35 monospace; padding:6px 8px; text-align:left; }
#net-debug-panel .nd-head{ display:flex; justify-content:space-between; margin-bottom:4px; }
#net-debug-panel .nd-head button{ background:none; border:none; color:#cfe8ff; }
#net-debug-panel .nd-row{ display:flex; justify-content:space-between; gap:8px; border-bottom:1px solid rgba(80,120,160,0.2); }
#net-debug-panel .nd-row span:last-child{ text-align:right; word-break:break-all; }
#net-debug-panel .nd-log{ margin-top:6px; color:#9fb8cf; }
#prep-screen{ justify-content:flex-start; } /* contenido alto (equipo/árbol): que se pueda scrollear desde arriba */
/* "Comenzar" quedaba al final de 4 pantallas de inventario: ahora queda siempre a mano, pegado abajo */
#prep-start-btn{ position:sticky; bottom:calc(6px + env(safe-area-inset-bottom,0px)); z-index:6; flex-shrink:0;
  box-shadow:0 -6px 14px rgba(0,0,0,0.65), 4px 4px 0 #000; }
/* celulares apaisados: las arenas en dos columnas (antes, una tarjeta por pantalla: 5 pantallas de scroll) */
@media (max-height:500px) and (orientation:landscape){
  #arena-grid{ max-width:760px; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
  #arena-grid .arena-card{ margin-bottom:0; padding:10px 12px; }
  #arena-grid .arena-card-icon{ font-size:1.1rem; margin-bottom:2px; }
  #arena-grid .arena-card-title{ font-size:1.1rem; padding-right:70px; }
  #arena-grid .arena-card-desc{ font-size:0.85rem; line-height:1.2; }
}
/* B1: cuadro para unirse pegando el enlace/código (ahora dentro de la Sala) */
.multi-box{ font-family:var(--font-retro); width:min(560px, 92vw); background:rgba(20,12,8,0.7); border:2px solid #000; box-shadow:inset 0 0 0 1px rgba(255,160,90,0.15);
  padding:10px 12px; margin:6px 0; display:flex; flex-direction:column; gap:6px; }
.multi-title{ font-family:var(--font-retro); color:var(--ember3); font-size:0.85rem; }
.multi-input{ width:100%; box-sizing:border-box; padding:8px; background:#140c08; color:var(--text); border:2px solid #000; font:inherit; font-size:0.8rem; }
.net-name select{ padding:4px; background:#140c08; color:var(--text); border:2px solid #000; font:inherit; }
/* selector de campeón dentro de la sala online */
.net-champs{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.net-champ{ padding:3px 7px; font-size:0.68rem; background:#1c120c; color:var(--text); border:2px solid #000; cursor:pointer; }
.net-champ.sel{ border-color:var(--ember3); color:var(--ember3); }
.net-champ:disabled{ opacity:0.35; cursor:default; }
/* Arena de la Sala: se elige ahí mismo (solo o anfitrión) sin salir; los invitados ven cuál eligió el anfitrión */
#lobby-arena{ width:100%; max-width:560px; margin:-4px 0 8px; text-align:left; font-family:var(--font-retro); }
#lobby-arena.hidden{ display:none; }
.la-head{ color:var(--ember3); font-size:0.85rem; letter-spacing:0.06em; }
.la-by{ color:var(--text-dim); letter-spacing:0; font-size:0.8rem; }
.la-strip{ display:flex; gap:6px; overflow-x:auto; overscroll-behavior-x:contain; padding:3px 1px 5px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.la-chip{ flex:none; display:flex; align-items:center; gap:5px; min-height:40px; padding:4px 10px; white-space:nowrap; cursor:pointer;
  background:#1c120c; color:var(--text); border:2px solid #000; font:inherit; font-size:0.85rem; box-shadow:2px 2px 0 #000; }
.la-chip.sel{ border-color:var(--ember3); color:var(--ember3); background:#2a180c; box-shadow:0 0 0 1px var(--ember1), 2px 2px 0 #000; }
.la-chip:disabled{ opacity:0.4; cursor:default; }
.la-tag{ font-size:0.72rem; padding:0 4px; border:1px solid #7dffa0; color:#7dffa0; }
.la-tag.next{ border-color:var(--ember3); color:#1a0c05; background:var(--ember3); }
.la-done{ color:#7dffa0; font-size:0.8rem; }
.la-desc{ display:block; color:var(--text-dim); font-size:0.78rem; line-height:1.2; }
.la-card{ display:flex; gap:8px; align-items:center; padding:5px 8px; margin-top:3px; background:#1c120c; border:2px solid var(--ember3); box-shadow:2px 2px 0 #000; }
.la-ico{ font-size:1.4rem; flex:none; }
.la-txt{ display:flex; flex-direction:column; min-width:0; }
.la-name{ color:var(--ember3); font-size:0.95rem; font-weight:normal; }
.la-warn{ color:#ffcf5c; font-size:0.78rem; margin-top:4px; line-height:1.25; }
.vic-next-note{ margin-top:10px; padding:6px 8px; border:1px dashed rgba(255,207,92,0.45); color:var(--text); font-size:0.8rem; line-height:1.3; text-align:left; }
.lobby-tag.p0{ background:#ff7a2e; } .lobby-tag.p1{ background:#3fa7ff; } .lobby-tag.p2{ background:#4fd16a; } .lobby-tag.p3{ background:#c77dff; }
.lobby-slot.pc0{ border-color:#ff7a2e; } .lobby-slot.pc1{ border-color:#3fa7ff; } .lobby-slot.pc2{ border-color:#4fd16a; } .lobby-slot.pc3{ border-color:#c77dff; }
.net-wait-host{ color:#ffcf5c; font-size:0.7rem; margin-top:4px; }
.lobby-tag.p0,.lobby-tag.p1,.lobby-tag.p2,.lobby-tag.p3{ color:#0b0705; font-weight:bold; }
/* Centrado "seguro": si el contenido de una pantalla no entra (iPhone apaisado), se scrollea desde
   arriba en vez de cortarse la parte de arriba (pasaba en ARENA con la primera tarjeta). Cuando sí
   entra, queda centrado exactamente igual que antes. */
.screen:not(#title-screen){ justify-content:flex-start; }
.screen:not(#title-screen) > :first-child{ margin-top:auto; }
.screen:not(#title-screen) > :last-child{ margin-bottom:auto; }
/* Sala: unirse a la sala de un amigo pegando el enlace o el código */
.net-join-box{ margin-top:8px; padding:6px 8px; border:1px dashed rgba(255,160,90,0.35); background:rgba(20,12,8,0.45); }
.net-join-box .net-row{ flex-wrap:nowrap; }
.net-join-box .multi-input{ flex:1; min-width:0; width:auto; }
/* Modo campaña: "Tu primer campeón" (regalo) */
#starter-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(128px, 1fr)); gap:10px; width:min(900px, 94vw); margin:10px auto; }
.starter-card{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 6px; }
.starter-card.sel{ outline:3px solid #ffcf5c; box-shadow:0 0 18px rgba(255,190,80,0.45); }
.starter-anim{ width:110px; height:110px; image-rendering:pixelated; }
.starter-lore{ font-size:0.56rem; line-height:1.25; color:var(--text-dim); text-align:center; }
.starter-confirm{ position:sticky; bottom:8px; margin:8px auto; padding:10px 14px; width:min(420px, 92vw); text-align:center;
  background:rgba(20,12,8,0.94); border:2px solid #ffcf5c; }
/* Regalo inicial, paso 2: la skin de regalo (js/ui/starter-select.js) */
.starter-step{ display:flex; flex-direction:column; align-items:center; width:100%; }
.starter-step.hidden{ display:none; }
#starter-skin-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; width:min(900px, 94vw); margin:10px auto; }
.starter-skin-card{ position:relative; width:150px; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 6px; }
.starter-skin-card.sel{ outline:3px solid #ffcf5c; box-shadow:0 0 18px rgba(255,190,80,0.45); }
.starter-skin-tag{ font-size:0.62rem; line-height:1.2; text-align:center; }
.starter-skin-card .starter-lore{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.starter-skin-vale{ width:220px; cursor:default; }
.starter-skin-own{ position:absolute; top:6px; left:50%; z-index:2; transform:translateX(-50%) rotate(-6deg); padding:3px 9px; white-space:nowrap;
  font-size:0.8rem; color:#1a0f06; background:#ffcf5c; border:2px solid #fff3c4; box-shadow:0 0 14px rgba(255,200,90,0.7); animation:starterOwn 0.45s steps(4) both; }
.starter-skin-card.owned{ outline:3px solid #ffcf5c; box-shadow:0 0 26px rgba(255,200,90,0.7); }
@keyframes starterOwn{ from{ transform:translateX(-50%) rotate(-6deg) scale(1.8); opacity:0; } to{ transform:translateX(-50%) rotate(-6deg) scale(1); opacity:1; } }
body.reduce-motion .starter-skin-own{ animation:none; }
.champ-card.locked{ opacity:0.55; filter:grayscale(0.7); }
/* Tienda de objetos del día */
.shop-items-list{ max-height:none; width:100%; max-width:560px; }
.shop-offer{ display:flex; flex-direction:column; gap:4px; }
.shop-offer.sold{ opacity:0.45; }
.shop-buy{ align-self:flex-end; padding:6px 14px; font-size:0.72rem; }
/* chat de la sala (js/net/net-chat.js): compacto, pulgar-amigable, no tapa los lugares */
#net-chat{ width:100%; max-width:560px; margin:0 0 10px; text-align:left; border:1px solid #3a2c22; background:rgba(18,12,8,0.82); }
#net-chat .nc-head{ display:flex; justify-content:space-between; align-items:center; padding:4px 8px; font-size:0.7rem; color:#e8d8b8; border-bottom:1px solid #2a2018; }
#net-chat .nc-toggle{ background:none; border:1px solid #5a4430; color:#e8d8b8; min-width:30px; height:24px; font-size:0.72rem; }
#net-chat .nc-log{ max-height:96px; overflow-y:auto; padding:4px 8px; font-size:0.72rem; line-height:1.35; color:#dccfb8; }
#net-chat .nc-line{ word-break:break-word; }
#net-chat .nc-line.mine{ color:#fff3d8; }
#net-chat .nc-name[data-mute]{ cursor:pointer; text-decoration:underline dotted; }
#net-chat .nc-empty{ color:#8a7a66; font-style:italic; }
#net-chat .nc-quick{ display:flex; flex-wrap:nowrap; overflow-x:auto; gap:4px; padding:4px 8px; -webkit-overflow-scrolling:touch; }
#net-chat .nc-chip{ flex:none; background:#2a1e14; border:1px solid #5a4430; color:#f0e0c0; padding:5px 8px; font-size:0.68rem; border-radius:12px; min-height:30px; }
#net-chat .nc-chip:disabled{ opacity:0.4; }
#net-chat .nc-row{ display:flex; gap:6px; padding:4px 8px 6px; }
#net-chat .nc-row input{ flex:1; min-width:0; background:#0e0a07; border:1px solid #4a3a2a; color:#f0e4cc; padding:6px 8px; font-size:16px; }
#net-chat .nc-notice{ min-height:14px; padding:0 8px 4px; font-size:0.64rem; color:#ffb070; }
#net-chat .nc-row .btn{ flex:none; width:auto; min-width:84px; margin:0; }
.arena-card-done{ font-size:0.72rem; color:#7dffa8; margin-top:4px; font-weight:700; }
.arena-card.locked .arena-card-desc b{ color:#ffd76a; }
.arena-card.fresh{ box-shadow:0 0 0 2px #ffd76a, 0 0 18px rgba(255,215,106,0.45); animation:arenaFresh 1.6s ease-in-out infinite; }
.arena-card-badge.fresh{ color:#1a0e06; background:#ffd76a; border-color:#ffd76a; }
@keyframes arenaFresh{ 0%,100%{ box-shadow:0 0 0 2px #ffd76a, 0 0 10px rgba(255,215,106,0.3); } 50%{ box-shadow:0 0 0 2px #ffd76a, 0 0 24px rgba(255,215,106,0.7); } }

/* ---------- Tienda en pestañas (BUGFIX 01) ---------- */
#shop-gold-line{ margin-bottom:12px; }
#go-stats{ font-size:1.6rem; } /* resultado de la derrota (Nivel · bajas · Performance) */
.shop-tabs{ display:flex; gap:6px; width:100%; max-width:760px; margin-bottom:8px; }
.shop-tab{ flex:1; padding:9px 6px; border-radius:9px; border:1px solid var(--panel-b); background:var(--panel-a); color:var(--text-dim); font-family:inherit; font-weight:700; font-size:0.85rem; cursor:pointer; }
.shop-tab.on{ color:var(--ember3); border-color:var(--ember1); background:rgba(255,122,46,0.12); }
.shop-test-note{ max-width:760px; margin:2px auto 8px; text-align:center; }
#shop-panel .lobby-note{ margin:0 0 8px; }
#shop-panel{ width:100%; max-width:760px; max-height:60vh; overflow-y:auto; padding-right:4px; box-sizing:border-box; }
.shop-champ-list, .shop-item-list, .shop-skin-list{ display:flex; flex-direction:column; gap:8px; }
.shop-champ-row{ display:flex; gap:10px; align-items:center; background:var(--panel-a); border:1px solid var(--panel-b); border-radius:10px; padding:8px; }
.shop-champ-row.owned{ border-color:#2f6b45; }
.shop-champ-info{ flex:1; min-width:0; }
.shop-champ-name{ font-weight:700; font-size:0.95rem; }
.shop-champ-role{ font-size:0.72rem; color:#ffd9a8; margin:2px 0; }
.shop-champ-lore{ font-size:0.68rem; color:var(--text-dim); line-height:1.3; }
.shop-skills{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.shop-skill{ font-size:0.6rem; border:1px solid var(--panel-b); border-radius:5px; padding:1px 5px; color:var(--text); }
.shop-skill.ult{ border-color:#c9a13a; color:#ffd76a; }
.shop-champ-buy, .shop-item-buy{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none; }
.shop-price{ font-weight:700; color:#ffd76a; font-size:0.85rem; }
.shop-st{ font-size:0.64rem; color:var(--text-dim); }
.shop-st.own{ color:#7dffa8; } .shop-st.lock{ color:#c9b08a; } .shop-st.sel{ color:#ffd76a; }
.shop-champ-name .shop-st{ margin-left:6px; font-weight:400; }
.shop-item{ display:flex; gap:8px; align-items:center; background:var(--panel-a); border:1px solid var(--panel-b); border-left:4px solid var(--ic); border-radius:9px; padding:7px 9px; cursor:pointer; }
.shop-item-meta{ flex:1; min-width:0; }
.shop-item-name{ font-weight:700; font-size:0.78rem; }
.shop-item-sub{ font-size:0.62rem; color:var(--text-dim); margin:1px 0 2px; }
.shop-eff{ font-size:0.58rem; color:#8fb8ff; line-height:1.3; }
.shop-eff.item-proc{ color:#ffb020; } .shop-eff.item-mythic{ color:#ff6a6a; } .shop-eff.item-unique{ color:#e0b0ff; } .shop-eff.item-build{ color:#ffc24a; } .shop-eff.item-mage{ color:#c9a8ff; } .shop-eff.item-effect{ color:#ffe08a; }
.shop-tiers{ display:flex; flex-wrap:wrap; gap:3px; margin-top:4px; }
.shop-tier{ font-size:0.56rem; padding:2px 5px; border-radius:5px; border:1px solid var(--tc); background:transparent; color:var(--tc); cursor:pointer; font-family:inherit; }
.shop-tier.on{ background:var(--tc); color:#120b06; font-weight:700; }
.shop-set{ background:rgba(61,220,113,0.05); border:1px solid #2f6b45; border-radius:11px; padding:8px; margin-bottom:10px; }
.shop-set-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; margin-bottom:4px; }
.shop-set-name{ color:#3ddc71; font-weight:700; font-size:0.9rem; }
.shop-set-theme{ font-size:0.62rem; color:var(--text-dim); }
.shop-set-count{ margin-left:auto; font-size:0.66rem; color:#cfe9d6; }
.shop-set-skin{ font-size:0.6rem; color:#ffd76a; }
.shop-set-bonus{ margin-bottom:6px; }
.shop-bonus{ font-size:0.62rem; color:var(--text-dim); padding:1px 0; }
.shop-bonus.on{ color:#7dffa8; } .shop-bonus.ready{ color:#ffe08a; }
.shop-set-pieces{ display:flex; flex-direction:column; gap:6px; }
.shop-set-buyall{ margin-top:6px; width:100%; }
.shop-skin{ display:flex; gap:10px; align-items:center; background:var(--panel-a); border:1px solid var(--panel-b); border-radius:10px; padding:8px; }
.shop-skin.active{ border-color:#ffd76a; box-shadow:0 0 12px rgba(255,215,106,0.25); }
.shop-skin-img{ width:84px; height:84px; object-fit:contain; image-rendering:pixelated; background:#0c0a10; border-radius:8px; flex:none; }
.shop-skin-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.shop-skin-name{ font-weight:700; color:#ffd76a; font-size:0.9rem; }
.shop-bought{ animation:shopBought 0.9s ease-out; }
@keyframes shopBought{ 0%{ box-shadow:0 0 0 3px #ffd76a, 0 0 26px rgba(255,215,106,0.8); } 100%{ box-shadow:none; } }
@media (max-width:520px){ .shop-champ-row{ flex-wrap:wrap; } .shop-champ-buy{ flex-direction:row; align-items:center; width:100%; justify-content:space-between; } .shop-item{ flex-wrap:wrap; } .shop-item-buy{ flex-direction:row; align-items:center; width:100%; justify-content:space-between; } }
#shop-panel{ text-align:left; }
.shop-btn{ padding:6px 14px; border-radius:8px; border:1px solid #c98a3a; background:linear-gradient(180deg,#8a4a1c,#5a2a0e); color:#ffe8c8; font-family:inherit; font-weight:700; font-size:0.78rem; cursor:pointer; }
.shop-btn.sec{ background:var(--panel-b); border-color:var(--panel-b); color:var(--text); }
.shop-btn:disabled{ opacity:0.4; cursor:default; }
.shop-item .item-icon-img{ width:44px; height:44px; }
/* Orden canónico de la campaña: número de arena, arenas en construcción y separador postgame */
.arena-card-num{ color:#ffd76a; font-variant-numeric:tabular-nums; }
.arena-card.soon{ opacity:0.55; border-style:dashed; }
.arena-card.soon .arena-card-desc i{ color:#b9a98a; font-style:normal; font-size:0.85rem; }
.arena-card-badge.soon{ color:#cfc4ae; background:rgba(120,110,90,0.18); border-color:#6f6452; }
.arena-grid-sep{ grid-column:1 / -1; text-align:center; letter-spacing:0.3em; font-size:0.8rem; color:#b59ae0; margin:6px 0 -2px; opacity:0.85; }

/* ---------- UNIRSE CON CÓDIGO (Modos de juego y Sala) + código de la sala del anfitrión ---------- */
.join-card{ cursor:default; text-align:center; }
.join-card:active{ transform:none; }
.join-code-row{ display:flex; gap:6px; align-items:center; margin-top:8px; }
.join-code-row .multi-input{ flex:1; min-width:0; width:auto; }
.net-code-input{ font-family:var(--font-retro); font-size:1.15rem !important; letter-spacing:0.18em; text-transform:uppercase; text-align:center; }
.net-code-input::placeholder{ letter-spacing:0.04em; text-transform:none; font-size:0.9rem; }
.net-join-go{ font-weight:700; min-width:92px; }
.join-code-meta{ display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; justify-content:center; margin-top:6px; font-size:0.7rem; color:var(--text-dim); }
.join-code-meta input{ width:110px; }
.join-status, #net-join-status{ min-height:1em; }
.join-status.ok, #net-join-status.ok{ color:#9fe0a8; }
.net-join-title{ font-family:var(--font-retro); color:var(--ember3); font-size:1.05rem; letter-spacing:0.04em; }
.net-room-code{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 10px; margin:6px 0; padding:6px 10px;
  border:2px solid rgba(255,160,90,0.55); background:rgba(40,20,10,0.7); }
.net-room-code-lbl{ font-family:var(--font-retro); font-size:0.9rem; color:var(--text-dim); letter-spacing:0.08em; }
.net-room-code-val{ font-family:var(--font-retro); font-size:1.9rem; line-height:1; color:#ffd27a; letter-spacing:0.22em; text-shadow:2px 2px 0 #000; user-select:all; -webkit-user-select:all; }
.lobby-skin{ font-size:0.62rem; color:#e3b8ff; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.shop-skin-anim{ width:84px; height:84px; flex:none; background:#0c0a10; border-radius:8px; }
.shop-skin-equip{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
@media (max-width:520px){ .shop-skin{ flex-wrap:wrap; } .shop-skin-img, .shop-skin-anim{ width:64px; height:64px; } }
/* skins en la Sala */
.prep-skins{ margin-top:8px; text-align:left; }
.prep-skins-title{ font-size:0.8rem; color:#e3b8ff; margin-bottom:4px; }
.prep-skins-list{ display:flex; flex-direction:column; gap:6px; }
.prep-skin{ display:flex; gap:8px; align-items:center; padding:5px 6px; border:1px solid var(--panel-b); background:var(--panel-a); }
.prep-skin.on{ border-color:#ffd76a; }
.prep-skin-anim{ width:56px; height:56px; flex:none; background:#0c0a10; }
.prep-skin-info{ flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.prep-skin-name{ font-weight:700; font-size:0.8rem; color:#ffd76a; width:100%; }
.prep-skin-sub{ font-size:0.66rem; color:var(--text-dim); }
.prep-skin-on{ font-size:0.72rem; color:#9fe0a8; }
/* Celular horizontal / pantallas bajas: UN solo scroll (el de la pantalla). Las listas con scroll propio
   de 150-230 px (tienda, inventario, galerías) quedaban anidadas dentro de una pantalla que también
   scrollea: con el dedo había que "acertarle" a la caja correcta y el contenido de abajo costaba alcanzarlo. */
@media (max-height:600px), (pointer:coarse) and (max-height:760px){
  #shop-panel, .inv-list, .inv-list.tall, #gallery-grid, #shop-champ-grid, .chest-host .chest-items{ max-height:none !important; overflow:visible !important; }
}

/* ---------- SALAS ABIERTAS (Multijugador, js/net/net-rooms.js) + sala pública (Sala online) ---------- */
.mode-rooms{ margin-top:10px; padding-top:8px; border-top:1px dashed rgba(255,160,90,0.35); text-align:left; }
.mode-rooms-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mode-rooms-title{ font-family:var(--font-retro); color:var(--ember3); font-size:1.05rem; letter-spacing:0.04em; }
#mode-rooms-refresh{ min-width:40px; }
.mode-rooms-list{ display:flex; flex-direction:column; gap:5px; margin-top:6px; max-height:260px; overflow-y:auto; }
.mr-row{ display:flex; align-items:center; gap:8px; padding:5px 8px; background:#1c120c; border:2px solid #4a3424; box-shadow:2px 2px 0 #000; }
.mr-ico{ font-size:1.3rem; flex:none; }
.mr-main{ display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.2; }
.mr-arena{ color:var(--ember3); font-size:0.9rem; }
.mr-diff{ font-size:0.72rem; }
.mr-sub{ color:var(--text-dim); font-size:0.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mr-count{ flex:none; font-size:0.78rem; color:#e8d8b8; font-variant-numeric:tabular-nums; }
.mr-join{ flex:none; min-width:84px; }
.mode-rooms-status{ min-height:1em; margin-top:4px; }
.hub-rooms-live{ color:#7dffa0; }
.net-pub-chk{ display:inline-flex; align-items:center; gap:4px; font-size:0.72rem; color:var(--text-dim); cursor:pointer; }
.net-pub-chk input{ width:auto; margin:0; }
/* ---------- INTERCAMBIO en la Sala (js/net/net-trade.js) ---------- */
#net-trade{ width:100%; max-width:560px; margin:0 0 10px; padding:6px 8px; text-align:left; border:1px solid #3a2c22; background:rgba(18,12,8,0.82); }
#net-trade .tr-head{ font-family:var(--font-retro); color:var(--ember3); font-size:1rem; letter-spacing:0.04em; margin-bottom:4px; }
#net-trade .tr-sub{ font-family:inherit; color:var(--text-dim); font-size:0.68rem; letter-spacing:0; }
#net-trade .tr-line{ font-size:0.76rem; color:#e8d8b8; margin:3px 0; }
.tr-card{ margin:4px 0; padding:4px 6px; border:2px solid var(--ic, #4a3424); background:#1c120c; box-shadow:2px 2px 0 #000; }
.tr-item{ display:flex; align-items:center; gap:8px; min-width:0; text-align:left; }
.tr-item .tr-ico{ width:36px; height:36px; flex:none; }
.tr-item-txt{ display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.tr-item-name{ font-size:0.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tr-item-sub{ font-size:0.66rem; color:var(--text-dim); }
.tr-targets{ flex-wrap:wrap; }
.tr-to{ border-width:2px; border-style:solid; }
.tr-pending{ font-size:0.7rem; color:#ffcf5c; margin-top:4px; line-height:1.25; }
.tr-log{ font-size:0.7rem; color:#9fe0a8; margin-top:3px; }
.tr-picker{ max-width:560px; }
.tr-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:6px; margin:6px 0; }
.tr-pick{ display:flex; flex-direction:column; align-items:stretch; gap:2px; padding:5px 6px; background:#1c120c; border:2px solid #4a3424; color:inherit; cursor:pointer; text-align:left; }
.tr-pick:hover{ filter:brightness(1.15); }
.tr-pick.off{ opacity:0.55; cursor:default; }
.tr-why{ font-size:0.64rem; color:#ffb080; }
.tr-bound-h{ margin-top:8px; }
.prep-sec.trade-ask{ box-shadow:0 0 0 2px #7dffa0, 2px 2px 0 #000; }