:root {
  --bg: #07030f;
  --panel: rgba(20, 9, 34, .88);
  --line: rgba(255, 200, 240, .13);
  --text: #f5eefc;
  --muted: #b3a5c9;
  --gold: #ffd23b;
  --red: #ff2a5f;
  --pink: #ff3da8;
  --purple: #9d4dff;
  --neon: linear-gradient(90deg, #ff2a5f, #e0287f 50%, #9d4dff);
  --p1: #4fc3ff;
  --p2: #ff5a6e;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --heavy: "Segoe UI Black", "Arial Black", "Segoe UI", sans-serif;
  --display: "Chakra Petch", "Segoe UI Black", "Arial Black", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font); }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; image-rendering: pixelated; }
#ui { position: fixed; inset: 0; pointer-events: none; }
.screen { position: absolute; inset: 0; pointer-events: auto; display: flex; flex-direction: column; align-items: center; padding: 28px 16px;
  background: radial-gradient(ellipse at 15% 0%, rgba(255, 30, 90, .22), transparent 50%), radial-gradient(ellipse at 90% 100%, rgba(140, 50, 255, .25), transparent 55%), rgba(7, 3, 15, .88); overflow-y: auto; }
.screen.overlay { background: rgba(7, 3, 15, .74); backdrop-filter: blur(3px); justify-content: center; }
h2 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 3.2vw, 40px); letter-spacing: .08em; margin: 4px 0 18px; text-shadow: 0 0 18px rgba(255, 42, 95, .55), 0 3px 0 #000; }
h3 { font-family: var(--heavy); margin: 0 0 8px; font-size: 16px; letter-spacing: .05em; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- Inicio (estilo consola) ---------- */
.screen.title { isolation: isolate; align-items: stretch; justify-content: flex-start; gap: clamp(10px, 2.2vh, 26px);
  padding: clamp(14px, 3vh, 34px) clamp(16px, 4vw, 64px) 16px; overflow-x: hidden;
  background: linear-gradient(90deg, rgba(7, 3, 15, .96) 0%, rgba(9, 3, 20, .86) 36%, rgba(12, 4, 28, .58) 66%, rgba(9, 3, 20, .74) 100%),
    linear-gradient(0deg, rgba(7, 3, 15, .94) 0%, transparent 40%), linear-gradient(180deg, rgba(7, 3, 15, .7) 0%, transparent 22%),
    radial-gradient(ellipse at 72% 55%, rgba(120, 30, 160, .35), transparent 60%); }
.ps-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.ps-bg .aur { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; animation: aur 16s ease-in-out infinite alternate; }
.ps-bg .a1 { width: 48vw; height: 48vw; left: -14vw; top: -22vw; background: radial-gradient(circle, #ff1f5a, transparent 65%); }
.ps-bg .a2 { width: 54vw; height: 54vw; right: -18vw; bottom: -30vw; background: radial-gradient(circle, #7d2bff, transparent 65%); animation-delay: -8s; }
.ps-bg .a3 { width: 30vw; height: 30vw; left: 38vw; top: 30vh; background: radial-gradient(circle, #ff2bd0, transparent 65%); opacity: .22; animation-duration: 22s; }
@keyframes aur { to { transform: translate(6vw, 5vh) scale(1.18); } }
.ps-bg .grid { position: absolute; left: -50%; right: -50%; bottom: -6%; height: 44%; transform: perspective(380px) rotateX(64deg); transform-origin: 50% 100%;
  background-image: linear-gradient(rgba(255, 42, 110, .55) 1px, transparent 1px), linear-gradient(90deg, rgba(160, 80, 255, .5) 1px, transparent 1px);
  background-size: 64px 64px; opacity: .45; animation: gridmove 2.6s linear infinite;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 80%); mask-image: linear-gradient(to top, #000 0%, transparent 80%); }
@keyframes gridmove { to { background-position: 0 64px, 0 0; } }
.ps-bg::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); }

.ps-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ps-brand { display: flex; flex-direction: column; line-height: 1; margin: 0; font-size: inherit; }
.ps-brand .b1 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.4vw, 46px); letter-spacing: .02em; padding-top: .14em; line-height: .95;
  background: linear-gradient(90deg, #fff 0%, #ffd6e4 28%, #ff3d7a 62%, #b14dff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px rgba(255, 42, 95, .5)); }
.ps-brand .b2 { font-family: var(--display); font-weight: 700; font-size: clamp(12px, 1.4vw, 18px); letter-spacing: .95em; margin-top: 4px; color: #fff;
  text-shadow: 0 0 10px #b14dff, 0 0 24px #ff2a6a; }
.ps-status { display: flex; align-items: center; gap: 16px; }
.ps-clock { font-family: var(--display); font-weight: 600; font-size: 22px; color: #efe4ff; letter-spacing: .04em; text-shadow: 0 0 12px rgba(157, 77, 255, .7); }
.ps-user { display: flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(22, 8, 38, .72); backdrop-filter: blur(8px); transition: border-color .15s, box-shadow .15s; }
.ps-user:hover { border-color: var(--red); box-shadow: 0 0 20px rgba(255, 42, 95, .45); }
.ps-user .av { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 30% 25%, #ff3d7a, #4d1596 75%); box-shadow: 0 0 0 2px rgba(255, 255, 255, .22), 0 0 16px rgba(255, 42, 95, .55); }
.ps-user .av.guest { color: #fff; }
.ps-user .nm { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.ps-user .nm b { font-family: var(--display); font-size: 16px; letter-spacing: .02em; }
.ps-user .nm small { color: var(--muted); font-size: 12px; }
.ps-tile .ico svg, .ps-card .ico svg, .ps-user .av svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ps-user .av svg { width: 22px; height: 22px; }

.ps-tiles { flex: none; display: flex; align-items: flex-end; gap: clamp(10px, 1.4vw, 18px); padding: 26px 8px 6px; margin: 0 -8px; scrollbar-width: none; }
.ps-tiles::-webkit-scrollbar { display: none; }
.ps-tile { position: relative; flex: none; width: clamp(80px, 7.6vw, 108px); aspect-ratio: 1; border-radius: 20px; display: grid; place-items: center; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16); color: #fff; transform-origin: 50% 100%;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--c1) 45%, transparent), transparent 70%),
    linear-gradient(150deg, color-mix(in srgb, var(--c1) 50%, #12061f), color-mix(in srgb, var(--c2) 42%, #090312));
  transition: transform .22s cubic-bezier(.2, .9, .3, 1.25), box-shadow .22s, margin .22s; }
.ps-tile .art { display: grid; place-items: center; margin-top: -10px; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .55)); }
.ps-tile .ico { position: absolute; left: 8px; top: 8px; width: 20px; height: 20px; opacity: .92; }
.ps-tile .lbl { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 6px 7px; font-family: var(--display); font-weight: 700; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; background: linear-gradient(transparent, rgba(5, 0, 12, .8)); }
.ps-tile .live { position: absolute; right: 9px; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: #ff2a5f;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 12px #ff2a5f; animation: blinkdot 1.2s infinite; }
@keyframes blinkdot { 50% { opacity: .2; } }
.ps-tile::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .38) 50%, transparent 58%); transform: translateX(-100%); pointer-events: none; }
.ps-tile.focus { transform: scale(1.24); margin: 0 14px; z-index: 2; border-color: transparent;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--c1), 0 14px 40px color-mix(in srgb, var(--c1) 60%, transparent), 0 0 60px color-mix(in srgb, var(--c2) 50%, transparent); }
.ps-tile.focus::after { animation: shine 1.4s ease .12s; }
@keyframes shine { to { transform: translateX(100%); } }

.ps-hero { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: clamp(12px, 3vw, 48px); }
.ps-hero-text { max-width: 640px; }
.ps-hero .kicker { display: flex; align-items: center; gap: 12px; color: #ff7aa8; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; font-size: 13px; }
.ps-hero .kicker::before { content: ''; width: 36px; height: 2px; background: var(--neon); box-shadow: 0 0 10px var(--red); }
.ps-hero .ps-title { text-shadow: none; font-family: var(--display); font-weight: 700; font-size: clamp(42px, 7vw, 108px); line-height: .95; margin: 4px 0 16px; padding-top: .16em; letter-spacing: .01em; overflow-wrap: anywhere;
  background: linear-gradient(180deg, #fff 0%, #ffe6ef 42%, #ff5a8c 74%, #b44dff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 42, 95, .45)); }
.ps-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ps-meta span { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: #f5ebff;
  background: rgba(157, 77, 255, .16); border: 1px solid rgba(196, 130, 255, .38); }
.ps-hero p { color: #dccfec; font-size: clamp(14px, 1.25vw, 17px); line-height: 1.55; max-width: 540px; margin: 0 0 24px; }
.ps-play { display: inline-flex; align-items: center; gap: 12px; padding: 14px 34px 14px 14px; border: 0; border-radius: 999px; color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: .08em; text-transform: uppercase; background: var(--neon);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25), 0 10px 34px rgba(255, 42, 95, .45), 0 0 50px rgba(157, 77, 255, .35); transition: transform .15s, box-shadow .15s; }
.ps-play i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #d0185d; font-style: normal; font-size: 13px; }
.ps-play:hover { transform: translateY(-2px) scale(1.03); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4), 0 14px 44px rgba(255, 42, 95, .6), 0 0 70px rgba(157, 77, 255, .5); }
.ps-hero-art { position: relative; flex: none; width: clamp(200px, 30vw, 430px); aspect-ratio: 34 / 28; display: grid; place-items: center; }
.ps-hero-art::before { content: ''; position: absolute; inset: 6% 4% 2%; border-radius: 50%; filter: blur(22px); animation: glow 3.4s ease-in-out infinite;
  background: radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--c1) 60%, transparent), color-mix(in srgb, var(--c2) 35%, transparent) 45%, transparent 70%); }
.ps-hero-art::after { content: ''; position: absolute; left: 20%; right: 20%; bottom: 9%; height: 13%; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c1) 75%, #fff);
  box-shadow: 0 0 22px var(--c1), inset 0 0 18px var(--c2); }
.ps-hero-art canvas { position: relative; z-index: 1; width: 100%; height: auto; image-rendering: pixelated; }
@keyframes glow { 50% { transform: scale(1.07); opacity: .78; } }
.ps-hero.in .ps-hero-text > * { animation: rise .45s cubic-bezier(.2, .8, .2, 1) both; }
.ps-hero.in .ps-hero-text > :nth-child(2) { animation-delay: .04s; } .ps-hero.in .ps-hero-text > :nth-child(3) { animation-delay: .08s; }
.ps-hero.in .ps-hero-text > :nth-child(4) { animation-delay: .12s; } .ps-hero.in .ps-hero-text > :nth-child(5) { animation-delay: .16s; }
.ps-hero.in .ps-hero-art { animation: artin .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes artin { from { opacity: 0; transform: translateX(40px) scale(.92); } }

.ps-row { flex: none; display: flex; gap: 12px; flex-wrap: wrap; }
.ps-card { display: flex; align-items: center; gap: 12px; flex: 1 1 220px; max-width: 330px; padding: 11px 16px 11px 11px; border-radius: 16px; text-align: left;
  border: 1px solid rgba(255, 255, 255, .13); background: rgba(22, 9, 40, .72); backdrop-filter: blur(10px); transition: transform .15s, border-color .15s, box-shadow .15s, background .15s; }
.ps-card .ico { width: 42px; height: 42px; flex: none; padding: 10px; border-radius: 12px; color: #fff; background: linear-gradient(145deg, rgba(255, 42, 95, .32), rgba(157, 77, 255, .32)); }
.ps-card b { display: block; font-family: var(--display); font-weight: 700; letter-spacing: .04em; font-size: 15.5px; }
.ps-card small { color: var(--muted); font-size: 12.5px; }
.ps-card.focus, .ps-card:hover { border-color: var(--red); background: rgba(52, 12, 48, .85); transform: translateY(-2px); box-shadow: 0 0 0 1px var(--red), 0 0 26px rgba(255, 42, 95, .35); }
.ps-hints { flex: none; display: flex; gap: 22px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; }
.ps-hints .r { margin-left: auto; letter-spacing: .08em; text-transform: uppercase; }
.ps-hints kbd { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; margin-right: 4px; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); color: #fff; font: 700 11px var(--font); }

/* ---------- Botones de menú (pausa, resultados…) ---------- */
.menu-list { display: flex; flex-direction: column; gap: 10px; width: min(360px, 100%); }
.menu-list.row { flex-direction: row; flex-wrap: wrap; justify-content: center; width: auto; }
.menu-list button { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: .1em; padding: 13px 22px; border-radius: 12px; color: var(--text);
  background: linear-gradient(180deg, rgba(42, 16, 66, .95), rgba(18, 7, 32, .95)); border: 1px solid var(--line);
  transform: skewX(-8deg); transition: transform .12s, border-color .12s, background .12s, box-shadow .12s; }
.menu-list button.focus, .menu-list button:hover { border-color: var(--red); color: #fff; transform: skewX(-8deg) scale(1.04);
  background: linear-gradient(90deg, rgba(255, 42, 95, .42), rgba(157, 77, 255, .42)); box-shadow: 0 0 24px rgba(255, 42, 95, .45); }

/* ---------- Selección ---------- */
.select { padding: 14px 14px 10px; }
.sel-head { text-align: center; }
.sel-head h2 { margin: 0 0 4px; font-size: clamp(18px, 2.4vw, 28px); }
.hint { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.sel-body { display: grid; grid-template-columns: minmax(220px, 280px) 1fr minmax(220px, 280px); gap: 12px; width: 100%; flex: 1; min-height: 0; }
.center { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
.filters input { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .4); color: var(--text); font-size: 14px; outline: none; }
.filters input:focus { border-color: var(--purple); box-shadow: 0 0 12px rgba(157, 77, 255, .4); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.chip { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 20px; border: 1.5px solid var(--c); background: transparent; color: var(--c); }
.chip.on, .chip:hover { background: var(--c); color: #120f1c; }
.grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; padding: 4px; align-content: start; }
.cell { position: relative; height: 92px; border-radius: 10px; border: 2px solid transparent; background: rgba(255, 255, 255, .04);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 4px 2px; overflow: hidden; }
.cell:hover { background: rgba(255, 255, 255, .1); }
.cell .spr { image-rendering: pixelated; background-repeat: no-repeat; background-position: 0 0; margin-bottom: auto; margin-top: auto; }
.cell span { font-size: 10px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cell.cur { border-color: var(--pc); box-shadow: 0 0 12px var(--pc); background: rgba(255, 255, 255, .12); }
.cell.pick0 { background: rgba(79, 195, 255, .2); }
.cell.pick1 { background: rgba(255, 90, 110, .2); }
.cell.pick0.pick1 { background: linear-gradient(90deg, rgba(79, 195, 255, .25), rgba(255, 90, 110, .25)); }
.empty { color: var(--muted); padding: 30px; grid-column: 1 / -1; text-align: center; }
.card { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; align-items: center; overflow-y: auto; min-height: 0; }
.card.locked { border-color: var(--pc); box-shadow: 0 0 18px color-mix(in srgb, var(--pc) 40%, transparent); }
.card .who { font-family: var(--heavy); color: var(--pc); letter-spacing: .1em; font-size: 13px; }
.card .wait { color: var(--muted); margin: auto; }
.card canvas { width: 220px; max-width: 100%; height: auto; image-rendering: pixelated;
  background: radial-gradient(ellipse at 50% 85%, color-mix(in srgb, var(--pc) 25%, transparent), transparent 70%); border-radius: 12px; }
.card .nm { font-family: var(--heavy); font-size: 20px; }
.card .star { color: var(--gold); }
.card .dex { color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.tys { display: flex; gap: 5px; margin-bottom: 6px; }
.tys span { font-size: 11px; font-weight: 800; color: #16121f; padding: 2px 9px; border-radius: 10px; }
.stat { display: grid; grid-template-columns: 32px 1fr 34px; align-items: center; gap: 6px; width: 100%; font-size: 11px; font-weight: 800; color: var(--muted); }
.stat i { height: 7px; background: rgba(255, 255, 255, .1); border-radius: 4px; overflow: hidden; }
.stat b { display: block; height: 100%; border-radius: 4px; }
.stat em { font-style: normal; color: var(--text); text-align: right; }
.kit { list-style: none; padding: 0; margin: 8px 0 0; width: 100%; display: flex; flex-direction: column; gap: 5px; }
.kit li { border-left: 4px solid var(--c); background: rgba(255, 255, 255, .04); border-radius: 6px; padding: 5px 8px; }
.kit li div { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.kit b { font-size: 13px; }
.kit small { font-size: 10px; color: var(--c); font-weight: 700; white-space: nowrap; }
.kit p { margin: 2px 0 0; font-size: 11px; color: var(--muted); line-height: 1.3; }
.sel-foot { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.sel-foot button, .opt button, .bind button { padding: 10px 18px; border-radius: 10px; border: 2px solid var(--line); background: rgba(30, 24, 60, .9); font-weight: 800; }
.sel-foot button:hover, .sel-foot button.focus, .opt button:hover, .opt button.focus, .bind button:hover, .bind button.focus { border-color: var(--red); box-shadow: 0 0 14px rgba(255, 42, 95, .35); }
.sel-foot button.on { border-color: var(--pink); color: #ffb3dc; }
.sel-foot .go { background: var(--neon); color: #fff; border-color: rgba(255, 255, 255, .35); font-family: var(--display); font-weight: 700; letter-spacing: .06em; box-shadow: 0 6px 22px rgba(255, 42, 95, .4); }
.sel-foot .go:disabled { opacity: .35; cursor: not-allowed; }

/* ---------- Arena ---------- */
.arenas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; width: min(1200px, 100%); }
.acard { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 10px; border-radius: 14px;
  border: 2px solid var(--line); background: var(--panel); transition: transform .12s, border-color .12s; }
.acard canvas { width: 100%; height: auto; border-radius: 8px; image-rendering: auto; }
.acard b { font-family: var(--heavy); font-size: 16px; }
.acard small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.acard.focus, .acard:hover { border-color: var(--red); box-shadow: 0 0 22px rgba(255, 42, 95, .4); transform: translateY(-3px); }
.acard.rnd .q { width: 100%; aspect-ratio: 300/192; display: grid; place-items: center; font-family: var(--display); font-size: 60px; color: var(--pink);
  background: repeating-linear-gradient(45deg, rgba(255, 210, 59, .08) 0 12px, transparent 12px 24px); border-radius: 8px; }
.opts { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; width: min(760px, 100%); }
.opt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.opt span { min-width: 170px; font-weight: 800; color: var(--muted); }
.opt button { padding: 6px 14px; }
.opt button.on { background: var(--neon); color: #fff; border-color: transparent; }
.opt input[type=range] { flex: 1; accent-color: var(--red); }

/* ---------- Guía / controles ---------- */
.guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; width: min(1200px, 100%); }
.guide section { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
.guide h3 { color: #ff7aa8; }
.guide p { margin: 6px 0; font-size: 13.5px; line-height: 1.5; color: #d9d3ee; }
.binds { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; width: min(860px, 100%); }
.bcol { background: var(--panel); border: 2px solid var(--pc); border-radius: 14px; padding: 12px; }
.bcol h3 { color: var(--pc); }
.bind { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); }
.bind span { color: var(--muted); font-weight: 700; font-size: 13px; }
.bind button { padding: 5px 12px; min-width: 120px; }
.bind button.wait { border-color: var(--pink); color: #ffb3dc; animation: blink .6s infinite; }
@keyframes blink { 50% { opacity: .4; } }
.note { color: var(--muted); font-size: 12.5px; max-width: 860px; text-align: center; line-height: 1.5; }

/* ---------- Resultados ---------- */
.res-win { display: flex; align-items: center; gap: 18px; }
.res-win canvas { width: 300px; height: 240px; image-rendering: pixelated; background: radial-gradient(ellipse at 50% 85%, color-mix(in srgb, var(--pc) 35%, transparent), transparent 70%); }
.res-win .who { font-family: var(--heavy); color: var(--pc); font-size: 22px; letter-spacing: .1em; }
.res-win .nm { font-family: var(--heavy); font-size: clamp(34px, 5vw, 60px); line-height: 1; }
.res-win .score { font-family: var(--heavy); color: var(--gold); font-size: 30px; margin-top: 6px; }
.res-stats { border-collapse: collapse; margin: 12px 0 18px; background: var(--panel); border-radius: 12px; overflow: hidden; min-width: min(520px, 100%); }
.res-stats td, .res-stats th { padding: 6px 18px; text-align: center; border-bottom: 1px solid var(--line); }
.res-stats th { color: var(--muted); font-size: 13px; }
.res-stats td { font-family: var(--heavy); font-size: 18px; }
.res-stats small { color: var(--muted); font-family: var(--font); }

/* ---------- Online ---------- */
.menu-list button.hot { border-color: #7dff9a; color: #c8ffd6; background: linear-gradient(180deg, #1d4a2e, #102a1a); }
.menu-list button.hot.focus, .menu-list button.hot:hover { border-color: var(--red); color: #fff; }
.search { justify-content: center; }
.search-box { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px 28px; min-width: min(420px, 100%); max-width: 560px; text-align: center; }
.search-box canvas { width: 220px; height: auto; image-rendering: pixelated; }
.search-box .nm { font-family: var(--heavy); font-size: 22px; }
.search-box .star { color: var(--gold); }
.search-box .status { color: #d9d3ee; font-weight: 700; min-height: 22px; line-height: 1.45; }
.search-box .status.err { color: #ff9a8a; }
.search-box .elapsed { color: var(--muted); font-family: var(--heavy); letter-spacing: .1em; }
.radar { position: relative; width: 70px; height: 70px; margin: 6px 0; }
.radar i { position: absolute; inset: 0; border: 3px solid #7dff9a; border-radius: 50%; opacity: 0; animation: radar 2.1s ease-out infinite; }
.radar i:nth-child(2) { animation-delay: .7s; } .radar i:nth-child(3) { animation-delay: 1.4s; }
@keyframes radar { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(1.3); opacity: 0; } }
.versus { justify-content: center; }
.vs-row { display: flex; align-items: center; gap: clamp(10px, 4vw, 60px); flex-wrap: wrap; justify-content: center; }
.vs-side { display: flex; flex-direction: column; align-items: center; animation: vsin .5s ease-out both; }
.vs-side:last-child { animation-name: vsin2; }
.vs-side .who { font-family: var(--heavy); color: var(--pc); letter-spacing: .15em; font-size: 20px; }
.vs-side canvas { width: 260px; max-width: 40vw; height: auto; image-rendering: pixelated;
  background: radial-gradient(ellipse at 50% 85%, color-mix(in srgb, var(--pc) 35%, transparent), transparent 70%); }
.vs-side .nm { font-family: var(--heavy); font-size: clamp(22px, 3vw, 34px); }
.vs-mid { font-family: var(--display); font-weight: 700; font-size: clamp(48px, 8vw, 104px); color: #fff; text-shadow: 0 0 18px var(--red), 0 0 40px var(--purple), 0 4px 0 #2a0018; animation: vspop .6s .3s ease-out both; }
.vs-arena { margin-top: 18px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
@keyframes vsin { from { transform: translateX(-60px); opacity: 0; } }
@keyframes vsin2 { from { transform: translateX(60px); opacity: 0; } }
@keyframes vspop { from { transform: scale(2.5); opacity: 0; } }

.vs-side .pl { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; min-height: 30px; }
.vs-side .pl b { font-size: 17px; }
.vs-side .pl small { color: var(--muted); font-weight: 700; }

/* ---------- Cuenta, perfil y ranking ---------- */
.mini { display: inline-block; flex: none; background-repeat: no-repeat; background-position: 0 0; image-rendering: pixelated; vertical-align: middle; }
.field { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .4); color: var(--text); font: inherit; font-size: 15px; outline: none; }
.field:focus { border-color: var(--purple); box-shadow: 0 0 12px rgba(157, 77, 255, .4); }
.acc-box { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: min(400px, 100%); background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px 22px; }
.acc-box .note { margin: 0 0 4px; }
.acc-box .spin { margin: 10px auto 0; }
.acc-box button { padding: 11px 16px; border-radius: 10px; border: 2px solid var(--line); background: rgba(30, 24, 60, .9); font-weight: 800; }
.acc-box button:hover, .acc-box button.focus { border-color: var(--red); box-shadow: 0 0 14px rgba(255, 42, 95, .35); }
.acc-box button.go { background: var(--neon); color: #fff; border-color: rgba(255, 255, 255, .35); font-family: var(--display); font-weight: 700; letter-spacing: .06em; }
.acc-box button.link { background: none; border: none; color: var(--muted); font-weight: 600; text-decoration: underline; padding: 4px; }
.acc-box button.link:hover, .acc-box button.link.focus { color: #ff7aa8; }
.acc-box button:disabled, .prof button:disabled { opacity: .45; cursor: wait; }
.acc-row { display: flex; gap: 10px; }
.acc-row button { flex: 1; }
.acc-msg { min-height: 20px; color: #9effb4; font-weight: 700; font-size: 13.5px; text-align: center; line-height: 1.4; }
.acc-msg.err { color: #ff9a8a; }
.prof { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; justify-content: center; width: min(900px, 100%); }
.prof-card { width: 250px; }
.prof-main { flex: 1; min-width: min(420px, 100%); display: flex; flex-direction: column; gap: 10px; }
.prof-main h3 { margin: 6px 0 0; color: var(--muted); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.prof-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.prof-stats div { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 6px; text-align: center; }
.prof-stats b { display: block; font-family: var(--display); font-weight: 700; font-size: 28px; background: linear-gradient(180deg, #fff, #ff5a8c 70%, #b44dff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.prof-stats span { color: var(--muted); font-size: 12px; font-weight: 700; }
.prof-mons { display: flex; gap: 8px; flex-wrap: wrap; }
.prof-mons > div { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 110px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.prof-mons small { color: var(--muted); }
.prof-mons .note { margin: 0; text-align: left; }
.prof-edit { display: flex; gap: 8px; flex-wrap: wrap; }
.prof-edit .field { flex: 1; min-width: 160px; }
.prof-edit button { padding: 10px 14px; border-radius: 10px; border: 2px solid var(--line); background: rgba(30, 24, 60, .9); font-weight: 800; }
.prof-edit button:hover, .prof-edit button.focus { border-color: var(--red); box-shadow: 0 0 14px rgba(255, 42, 95, .35); }
.prof .acc-msg { text-align: left; }
.rank-box { width: min(720px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px; max-height: calc(100vh - 230px); overflow-y: auto; }
.rank-box .spin { margin: 30px auto; }
.rank-box .note, .rank-box .acc-msg { margin: 24px auto; }
.rank { width: 100%; border-collapse: collapse; }
.rank th { color: var(--muted); font-size: 12px; letter-spacing: .06em; padding: 6px 8px; position: sticky; top: -8px; background: #120e22; }
.rank td { padding: 4px 8px; text-align: center; border-top: 1px solid var(--line); font-weight: 700; }
.rank .l { text-align: left; }
.rank td.l { font-size: 15px; }
.rank .pos { font-family: var(--heavy); color: var(--muted); }
.rank tr:nth-child(2) .pos { color: #ffd23b; text-shadow: 0 0 10px rgba(255, 210, 59, .6); } .rank tr:nth-child(3) .pos { color: #d7e0ea; } .rank tr:nth-child(4) .pos { color: #e09a5a; }
.rank tr.me td { background: rgba(255, 42, 95, .16); }

/* ---------- Carga ---------- */
.loading { justify-content: center; gap: 14px; color: var(--muted); }
.spin { width: 42px; height: 42px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--red); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .sel-body { grid-template-columns: 1fr; }
  .card { max-height: 260px; }
  .res-win { flex-direction: column; }
  .prof-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .screen.title { background: rgba(7, 3, 15, .86); }
  .ps-tiles { overflow-x: auto; padding: 22px 12px 8px; margin: 0 -12px; }
  .ps-tile { width: 72px; border-radius: 16px; }
  .ps-tile .lbl { font-size: 10.5px; }
  .ps-tile.focus { transform: scale(1.14); margin: 0 8px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c1), 0 8px 22px color-mix(in srgb, var(--c1) 55%, transparent); }
  .ps-hero { flex: none; flex-direction: column-reverse; align-items: stretch; justify-content: flex-start; gap: 4px; }
  .ps-hero-art { width: min(230px, 62vw); align-self: center; }
  .ps-hero .ps-title { font-size: clamp(34px, 11vw, 56px); }
  .ps-hero p { margin-bottom: 18px; }
  .ps-card { flex-basis: 100%; max-width: none; }
  .ps-clock, .ps-hints { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-bg *, .ps-hero.in *, .ps-tile::after, .ps-hero-art::before, .ps-tile .live { animation: none !important; }
}