/* RetroWeb - estilos */
:root {
  --bg: #0d0f17;
  --bg2: #151826;
  --card: #1a1e2e;
  --line: #2a3047;
  --text: #e8eaf3;
  --muted: #8a91ab;
  --accent: #ff3d7f;
  --accent2: #36d6e7;
  --ok: #3ddc84;
  --warn: #ffb547;
  --err: #ff5470;
  --psx: #6f7cff;
  --n64: #ff8a3d;
  --radius: 12px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: radial-gradient(1200px 600px at 10% -10%, #1d1440 0%, transparent 60%), var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--font);
  min-height: 100vh;
}
a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: .9em; background: var(--bg2); padding: .1em .35em; border-radius: 4px; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
h3 { font-size: .95rem; margin: 1.25rem 0 .5rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
[hidden] { display: none !important; }

/* Barra superior */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1.25rem; background: rgba(13, 15, 23, .85); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { font-family: var(--mono); font-weight: 700; letter-spacing: .08em; color: var(--text); display: flex; align-items: center; gap: .6rem; text-transform: uppercase; }
.brand:hover { text-decoration: none; }
.brand-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); display: inline-block; }
.brand-dot.big { width: 18px; height: 18px; }
.brand-logo { height: 34px; width: auto; display: block; }
.brand-logo.big { height: auto; max-height: 120px; max-width: 100%; margin: 0 auto; }
.brand-icon { width: 30px; height: 30px; border-radius: 7px; object-fit: contain; }
.brand-icon.big { width: 64px; height: 64px; border-radius: 14px; }
.auth-logo:has(.brand-icon.big) { flex-direction: column; }
.topbar nav { display: flex; align-items: center; gap: 1rem; }
.who { color: var(--muted); }
a.who:hover { color: var(--text); text-decoration: none; }
.inline { display: inline-flex; gap: .4rem; align-items: center; margin: 0; }

/* Botones y formularios */
.btn, button.link {
  font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--text); padding: .55rem 1rem; transition: .15s;
}
.btn:hover:not(:disabled) { border-color: var(--accent2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover:not(:disabled) { filter: brightness(1.1); border-color: var(--accent); }
.btn.danger { color: var(--err); }
.btn.small { padding: .3rem .7rem; font-size: .85rem; }
.btn.wide { width: 100%; }
button.link { background: none; border: 0; padding: 0; color: var(--accent2); }
input[type=text], input[type=password], input[type=search], input:not([type]) {
  font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: .55rem .75rem; min-width: 0;
}
input:focus { outline: 2px solid var(--accent2); outline-offset: 1px; }
label { display: grid; gap: .3rem; color: var(--muted); font-size: .9rem; }
label.check { display: inline-flex; align-items: center; gap: .4rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.alert { background: rgba(255, 84, 112, .12); border: 1px solid var(--err); color: #ffc2cc; padding: .6rem .8rem; border-radius: 8px; }
.alert.ok { background: rgba(61, 220, 132, .1); border-color: var(--ok); color: #c4f5d9; }

/* Login */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.auth-card { width: min(360px, 100%); display: grid; gap: 1rem; }
.auth-logo { font-family: var(--mono); font-size: 1.3rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; gap: .7rem; justify-content: center; margin-bottom: .5rem; }

/* Biblioteca */
.wrap { max-width: 1400px; margin: 0 auto; padding: 1.25rem; }
.wrap.narrow { max-width: 1000px; }
.wrap.narrow .card { margin-bottom: 1.25rem; }
.toolbar { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.5rem; }
.tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.tabs a { padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line); color: var(--text); background: var(--bg2); }
.tabs a:hover { text-decoration: none; border-color: var(--accent2); }
.tabs a.active { background: var(--accent); border-color: var(--accent); }
.tabs small { opacity: .7; margin-left: .2rem; }
#q { width: min(280px, 100%); }
.sortbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.sortbar #q { flex: 0 1 320px; }
select {
  font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: .5rem 2rem .5rem .75rem; cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
select:focus { outline: 2px solid var(--accent2); outline-offset: 1px; }

/* Filas deslizables (vista "Todos") */
.row { margin-bottom: 1.75rem; }
.row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.row-head h2 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
.row-head h2 .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sys, var(--accent)); }
.row-head a { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.row-head a:hover { color: var(--accent2); }
.row-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 176px; gap: 1.25rem;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  padding: .35rem .25rem 1rem; margin: 0 -.25rem; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.row-track > .game { scroll-snap-align: start; }
.row-track::-webkit-scrollbar { height: 8px; }
.row-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* Tarjeta "Continuar": captura del último estado */
.game.continue { width: 100%; }
.row-track:has(.continue) { grid-auto-columns: 240px; }
.game.continue .cover { aspect-ratio: 4 / 3; }
.cover .shot { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.resume-badge {
  position: absolute; left: .5rem; bottom: .6rem; z-index: 3; font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  padding: .2rem .55rem; border-radius: 999px; background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.ptime { margin-left: auto; font-size: .72rem; color: var(--muted); }
.section { margin: 1.5rem 0 .75rem; color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 1.5rem 1.25rem; }
.game { color: var(--text); }
.game > a { display: grid; gap: .55rem; color: var(--text); }
.game > a:hover { text-decoration: none; }
.cover {
  position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--sys, #22273d) 35%, #151826), #0b0d14);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 18px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease;
}
/* Barra de color del sistema en la base de la carátula */
.cover::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--sys, var(--accent)); z-index: 3; }
.cover .bg { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(18px) saturate(1.3) brightness(.55); z-index: 0; }
.cover .art { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; padding: 8%; filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)); }
.nocover { position: relative; z-index: 1; height: 100%; display: grid; place-items: center; padding: 1rem; text-align: center; font-weight: 700; font-size: 1rem; line-height: 1.3; }
.play {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  background: rgba(8, 10, 18, .45); opacity: 0; transition: opacity .18s;
}
.play svg { width: 54px; height: 54px; padding: 13px 11px 13px 15px; border-radius: 50%; fill: #fff; background: var(--accent); box-shadow: 0 6px 20px rgba(255, 61, 127, .5); transform: scale(.85); transition: transform .18s; }
.game > a:hover .cover, .game > a:focus-visible .cover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,.55), 0 0 0 2px var(--sys, var(--accent)); }
.game > a:hover .play, .game > a:focus-visible .play { opacity: 1; }
.game > a:hover .play svg { transform: scale(1); }
.gtitle { font-size: .95rem; font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gmeta { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--muted); margin-top: -.25rem; min-width: 0; white-space: nowrap; }
.gmeta .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sys, var(--muted)); flex-shrink: 0; }
.region { margin-left: auto; font-size: .68rem; font-weight: 700; padding: .05rem .4rem; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; }
.badge { font-size: .7rem; font-weight: 700; padding: .15rem .45rem; border-radius: 5px; background: #333; color: #fff; text-transform: uppercase; letter-spacing: .04em; border: 1px solid rgba(255,255,255,.15); }
.empty { max-width: 560px; }

/* Reproductor */
.player-wrap { max-width: 1680px; margin: 0 auto; padding: .75rem 1.25rem 1.25rem; }
.player-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; min-width: 0; }
.player-head h1 { margin: 0; font-size: 1.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.back { flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--bg2); color: var(--text); }
.back:hover { border-color: var(--accent2); text-decoration: none; }
.back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.head-meta { margin: 0; font-size: .85rem; flex-shrink: 0; }
.head-meta .region { margin-left: .25rem; }
.sync { margin-left: auto; font-size: 1.1rem; color: var(--muted); transition: color .2s; flex-shrink: 0; }
.sync.ok { color: var(--ok); }
.sync.busy { color: var(--warn); animation: pulse 1s infinite; }
.sync.err { color: var(--err); }
.sync.off { color: #4fc3f7; }
.sync.off::after { content: ' 📴'; font-size: .8rem; }
@keyframes pulse { 50% { opacity: .35; } }
.player-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 1rem; align-items: start; }
.stage { display: grid; place-items: center; min-width: 0; }
.screen {
  width: 100%; aspect-ratio: var(--ar, 4 / 3); background: #000; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 0 0 1px #000, 0 20px 50px rgba(0,0,0,.55), 0 0 60px color-mix(in srgb, var(--sys, #000) 18%, transparent);
}
#game { width: 100%; height: 100%; }
.side { padding: 1rem; display: grid; gap: 1rem; align-content: start; }
.side h2 { margin: 0 0 .2rem; font-size: 1rem; }
.side h3 { margin: 0 0 .35rem; }
.side p.small { margin: 0 0 .5rem; }
.slots { list-style: none; padding: 0; margin: .6rem 0; display: grid; gap: .4rem; }
.slot { position: relative; display: flex; gap: .6rem; align-items: center; padding: .35rem; border-radius: 9px; border: 1px solid var(--line); cursor: pointer; background: var(--bg2); }
.slot:hover { border-color: var(--accent2); }
.slot.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.slot.empty .meta span { color: var(--muted); }
.thumb { width: 60px; aspect-ratio: 4 / 3; border-radius: 6px; background: #000; display: grid; place-items: center; overflow: hidden; color: var(--muted); font-family: var(--mono); flex-shrink: 0; font-size: .85rem; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.meta { display: grid; font-size: .8rem; line-height: 1.35; }
.del { position: absolute; right: .3rem; top: .2rem; background: none; border: 0; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: .1rem .35rem; border-radius: 4px; }
.del:hover { color: var(--err); background: rgba(255, 84, 112, .12); }
.side-actions { display: flex; gap: .5rem; }
.side-actions .btn { flex: 1; }
.admin-box { border-top: 1px solid var(--line); padding-top: .75rem; }
.admin-box summary { cursor: pointer; color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.admin-box[open] summary { margin-bottom: .6rem; }

.exp-note { flex: none; margin: -.25rem 0 .75rem; font-size: .85rem; color: var(--warn); background: rgba(255, 181, 71, .08); border: 1px solid rgba(255, 181, 71, .3); border-radius: 8px; padding: .4rem .75rem; }
.exp-note.err { color: #ffc2cc; background: rgba(255, 84, 112, .1); border-color: rgba(255, 84, 112, .4); }

/* PC: todo cabe en la pantalla, sin scroll de página */
@media (min-width: 961px) and (min-height: 520px) {
  body[data-view="player"] { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
  body[data-view="player"] .topbar { position: static; flex: none; }
  body[data-view="player"] .player-wrap { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; }
  .player-head { flex: none; }
  .player-grid { flex: 1; min-height: 0; align-items: stretch; }
  .stage { container-type: size; min-height: 0; }
  /* La pantalla toma el máximo tamaño posible respetando la proporción de la consola */
  .screen { width: min(100cqw, calc(100cqh * var(--arn, 1.3333))); height: auto; }
  .side { min-height: 0; max-height: 100%; overflow-y: auto; scrollbar-width: thin; }
}

/* Ficha en la cabecera del juego */
.title-block { min-width: 0; display: grid; }
.title-block h1 { margin: 0; font-size: 1.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.facts { margin: 0; display: flex; flex-wrap: wrap; gap: .1rem .4rem; align-items: center; font-size: .8rem; color: var(--muted); }
.facts .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sys, var(--muted)); }
.facts .ptime { margin-left: .4rem; }
.edit-form { display: grid; gap: .5rem; margin-bottom: 1rem; }
.edit-form input { width: 100%; }

/* Mi cuenta */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; gap: 1rem; }
.stats strong { display: block; font-size: 1.6rem; color: var(--accent); }
.stats span { color: var(--muted); font-size: .85rem; }
.stack-form { display: grid; gap: .8rem; max-width: 380px; }

/* Modo mando */
.pad-mode .pad-focus { outline: 3px solid var(--accent2) !important; outline-offset: 4px; border-radius: 12px; }
.pad-mode .game > a.pad-focus .cover { transform: translateY(-4px) scale(1.04); box-shadow: 0 16px 34px rgba(0,0,0,.55), 0 0 0 2px var(--accent2); }
.pad-mode .game > a.pad-focus .play { opacity: 1; }
.pad-hint { bottom: 1.5rem; }

/* Favoritos */
.game { position: relative; }
.fav {
  border: 0; cursor: pointer; padding: 0; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; background: rgba(13, 15, 23, .7);
  color: #fff; transition: transform .12s, color .12s, background .12s;
}
.game > .fav { position: absolute; top: .5rem; right: .5rem; z-index: 4; opacity: 0; backdrop-filter: none; }
.game:hover > .fav, .game > .fav.on, .game > .fav:focus-visible { opacity: 1; }
@media (hover: none) { .game > .fav { opacity: 1; } }  /* en móvil siempre visible */
.fav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.fav:hover { transform: scale(1.12); opacity: 1; }
.fav.on { color: #ffcc33; }
.fav.on svg { fill: currentColor; }
.fav.big { background: var(--bg2); border: 1px solid var(--line); width: 36px; height: 36px; }
.fav:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }

/* Carátula (admin) */
.cover-admin { display: flex; gap: .75rem; align-items: flex-start; }
.cover-thumb { width: 72px; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: var(--bg2); border: 1px solid var(--line); display: grid; place-items: center; text-align: center; flex-shrink: 0; }
.cover-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cover-form { display: flex; flex-wrap: wrap; gap: .4rem; }
.file-btn { display: inline-block; color: var(--text); font-size: .85rem; }
.ok-text { color: var(--ok); }
.err-text { color: var(--err); }

/* Avisos */
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 150%); background: var(--card); border: 1px solid var(--line); padding: .7rem 1.1rem; border-radius: 10px; transition: transform .25s; z-index: 50; max-width: calc(100% - 2rem); }
.toast.show { transform: translate(-50%, 0); }
.toast.ok { border-color: var(--ok); }
.toast.err { border-color: var(--err); }

/* Admin */
.table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: .9rem; }
.table th, .table td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { color: var(--muted); font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.actions input { width: 150px; padding: .3rem .5rem; }
.row-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.warnings { color: var(--warn); font-size: .88rem; padding-left: 1.2rem; }

@media (max-width: 960px) {
  .player-grid { grid-template-columns: 1fr; }
  .slots { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .head-meta { display: none; }
  .topbar { backdrop-filter: none; background: var(--bg); }
}
@media (max-width: 600px) {
  .row-track { grid-auto-columns: 136px; gap: .9rem; }
  .row-track:has(.continue) { grid-auto-columns: 200px; }
  .sortbar { width: 100%; }
  .sortbar select { flex: 1; min-width: 0; }
  .sortbar #q { flex: 1 1 100%; }
  .stats strong { font-size: 1.25rem; }
  /* Pestañas en una sola fila deslizable */
  .toolbar { gap: .75rem; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem .1rem; width: calc(100% + 2rem); }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { white-space: nowrap; flex-shrink: 0; }
  #q { width: 100%; }
  .cover .bg { display: none; }   /* sin desenfoque en móvil: más fluido */
  .grid { gap: 1.1rem .9rem; }
  .wrap, .player-wrap { padding: 1rem; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .8rem; }
  .table { display: block; overflow-x: auto; }
}

/* ── Reproductor: modo cine, discos, botón icono ───────────────────────── */
.icon-btn { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--bg2); color: var(--muted); cursor: pointer; }
.icon-btn:hover, .icon-btn[aria-pressed="true"] { color: var(--accent2); border-color: var(--accent2); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
body.cinema .side { display: none; }
body.cinema .player-grid { grid-template-columns: minmax(0, 1fr); }
body.cinema .topbar { display: none; }
body.cinema .exp-note, body.cinema .discs { display: none; }
.discs { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: -.25rem 0 .75rem; }
.disc { padding: .25rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); font-size: .85rem; }
.disc:hover { text-decoration: none; border-color: var(--accent2); }
.disc.active { background: var(--accent); border-color: var(--accent); }
.disc-badge { position: absolute; left: .5rem; bottom: .6rem; z-index: 3; font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; background: rgba(13, 15, 23, .8); border: 1px solid var(--line); }

/* ── Jugando ahora ─────────────────────────────────────────────────────── */
.now-playing { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin: -.5rem 0 1.25rem; font-size: .88rem; color: var(--muted); }
.now-playing strong { color: var(--text); font-weight: 600; }
.now-playing a { color: var(--text); background: var(--bg2); border: 1px solid var(--line); padding: .15rem .6rem; border-radius: 999px; }
.now-playing a:hover { text-decoration: none; border-color: var(--ok); }
.np-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse 1.6s infinite; }

/* ── Admin ─────────────────────────────────────────────────────────────── */
.admin-tabs { margin-bottom: 1.25rem; }
.admin .card { margin-bottom: 1.25rem; }
.admin details.card > summary { cursor: pointer; font-weight: 600; }
.table tr.dim td { color: var(--muted); }
.table .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .3rem; }
.warn-text { color: var(--warn); }
.small-stats { margin-top: 1rem; grid-template-columns: repeat(4, 1fr); }
.small-stats strong { font-size: 1.3rem; }
.dup-line { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .15rem 0; }
.invite-box { display: flex; gap: .5rem; margin-bottom: .5rem; }
.invite-box input { flex: 1; font-family: var(--mono); font-size: .85rem; }
.dropzone { margin: 1rem 0; padding: 2.25rem 1rem; border: 2px dashed var(--line); border-radius: var(--radius); display: grid; gap: .35rem; place-items: center; text-align: center; cursor: pointer; transition: .15s; }
.dropzone:hover, .dropzone:focus-visible, .dropzone.over { border-color: var(--accent2); background: rgba(54, 214, 231, .06); outline: none; }
.upload-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.up-item { border: 1px solid var(--line); border-radius: 9px; padding: .55rem .7rem; background: var(--bg2); }
.up-item.ok { border-color: rgba(61, 220, 132, .5); }
.up-item.err { border-color: rgba(255, 84, 112, .5); }
.up-name { font-size: .9rem; font-weight: 600; word-break: break-all; }
.up-bar { height: 6px; border-radius: 3px; background: var(--bg); margin: .4rem 0 .3rem; overflow: hidden; }
.up-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .2s; }
.meter { height: 12px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; margin-bottom: .4rem; }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--ok), var(--warn)); }
.bars { display: grid; gap: .5rem; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 80px; align-items: center; gap: .75rem; font-size: .88rem; }
.bar-row em { font-style: normal; color: var(--muted); text-align: right; }
.bar { height: 10px; background: var(--bg); border-radius: 5px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 5px; }
@media (max-width: 600px) {
  .small-stats { grid-template-columns: repeat(2, 1fr); }
  .bar-row { grid-template-columns: 100px 1fr 64px; }
  .admin-tabs { flex-wrap: nowrap; overflow-x: auto; }
}

.invite-msg { display: grid; gap: .6rem; margin-bottom: 1rem; }
.invite-msg textarea { width: 100%; font: inherit; font-size: .9rem; line-height: 1.45; color: var(--text); background: var(--bg); border: 1px solid var(--accent2); border-radius: 8px; padding: .7rem .8rem; resize: vertical; }
.invite-hello { font-size: 1.25rem; font-weight: 700; margin: 0; text-align: center; }

/* Panel lateral plegable */
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "▸"; color: var(--muted); font-size: .8rem; transition: transform .15s; }
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > summary h2, details.fold > summary h3 { margin: 0; }
details.fold > summary:hover h2, details.fold > summary:hover h3 { color: var(--accent2); }
.fold-info { margin-left: auto; font-size: .8rem; color: var(--muted); }
details.fold[open] > summary { margin-bottom: .5rem; }
.last-slot { margin: .6rem 0; }
#savesBox[open] ~ .last-slot { display: none; }
.slot.no-saves { cursor: default; padding: .6rem .7rem; }

/* ── Jugar online ──────────────────────────────────────────────────────── */
.np-peers { list-style: none; padding: 0; margin: .6rem 0; display: grid; gap: .35rem; }
.np-peers li { position: relative; display: flex; align-items: center; gap: .5rem; padding: .4rem 1.8rem .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); font-size: .88rem; }
.np-peers li.np-wait { color: var(--muted); border-style: dashed; padding-right: .5rem; }
.np-slot { font-family: var(--mono); font-weight: 700; font-size: .75rem; padding: .05rem .4rem; border-radius: 5px; background: var(--accent); color: #fff; }
.np-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-state { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.np-state.ok { color: var(--ok); } .np-state.warn { color: var(--warn); } .np-state.err { color: var(--err); }
.np-peers .del { top: 50%; transform: translateY(-50%); }
.np-chip { margin-left: auto; flex-shrink: 0; font-size: .8rem; font-family: var(--mono); padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.np-chip.ok { color: var(--ok); border-color: rgba(61, 220, 132, .5); }
.np-chip.warn { color: var(--warn); border-color: rgba(255, 181, 71, .5); }
.np-chip.err { color: var(--err); border-color: rgba(255, 84, 112, .5); }
.np-me { color: var(--accent2); }
.np-screen { position: relative; background: #000; }
.np-screen video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.np-overlay { position: absolute; inset: 0; display: grid; place-content: center; gap: .8rem; text-align: center; padding: 1rem; background: rgba(13, 15, 23, .72); }
.np-overlay[hidden] { display: none; }
.np-overlay p { margin: 0; font-size: 1.05rem; }
.np-keys { border-collapse: collapse; width: 100%; margin: .4rem 0; }
.np-keys th { text-align: left; font-weight: 500; color: var(--muted); padding: .15rem .4rem .15rem 0; }
.np-keys td { text-align: right; padding: .15rem 0; }
kbd { font-family: var(--mono); font-size: .8rem; padding: .05rem .4rem; border-radius: 4px; border: 1px solid var(--line); border-bottom-width: 2px; background: var(--bg2); }
input[type="range"] { width: 100%; accent-color: var(--accent); }

/* Pantalla completa del invitado: solo el vídeo (y los controles táctiles) */
body.np-full .topbar, body.np-full .player-head, body.np-full .side { display: none; }
body.np-full .player-wrap { padding: 0; max-width: none; }
body.np-full .player-grid { display: block; height: 100dvh; }
body.np-full .stage { height: 100dvh; container-type: size; }
body.np-full .np-screen { width: min(100cqw, calc(100cqh * var(--arn, 1.3333))); border-radius: 0; }

/* Controles táctiles */
.np-touch { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem;
  padding: .75rem max(.75rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
  pointer-events: none; user-select: none; -webkit-user-select: none; touch-action: none; }
.np-touch[hidden] { display: none; }
.np-touch > div { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.np-mid { flex-direction: row !important; position: absolute; left: 50%; top: .75rem; transform: translateX(-50%); }
.np-btn { width: 58px; height: 58px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); background: rgba(26, 30, 46, .7); color: var(--text);
  font: 700 1rem var(--font); touch-action: none; -webkit-tap-highlight-color: transparent; backdrop-filter: blur(4px); }
.np-btn.on { background: var(--accent); border-color: var(--accent); }
.np-btn.pill { width: auto; height: 32px; padding: 0 .9rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.np-btn.sh { width: 64px; height: 36px; border-radius: 10px; font-size: .85rem; }
.np-btn.c { width: 42px; height: 42px; font-size: .75rem; color: #ffd84a; }
.np-shoulders { display: flex; gap: .4rem; }
.np-row { display: flex; gap: .6rem; justify-content: center; }
.np-face { display: grid; gap: .6rem; }
.np-diamond { display: grid; grid-template: repeat(3, 50px) / repeat(3, 50px); }
.np-diamond.small { grid-template: repeat(3, 38px) / repeat(3, 38px); }
.np-diamond .t { grid-area: 1 / 2; } .np-diamond .l { grid-area: 2 / 1; } .np-diamond .r { grid-area: 2 / 3; } .np-diamond .b { grid-area: 3 / 2; }
.np-diamond .np-btn:not(.c) { width: 56px; height: 56px; margin: -2px; }
.np-dpad, .np-stick { position: relative; width: 140px; height: 140px; touch-action: none; }
@media (max-width: 380px) { .np-dpad, .np-stick { width: 120px; height: 120px; } .np-diamond { grid-template: repeat(3, 46px) / repeat(3, 46px); } .np-diamond .np-btn:not(.c) { width: 50px; height: 50px; } }
.np-dpad { background:
  linear-gradient(rgba(26, 30, 46, .75), rgba(26, 30, 46, .75)) center / 34% 100% no-repeat,
  linear-gradient(rgba(26, 30, 46, .75), rgba(26, 30, 46, .75)) center / 100% 34% no-repeat; border-radius: 12px; }
.np-stick { border-radius: 50%; background: rgba(26, 30, 46, .6); border: 2px solid rgba(255, 255, 255, .2); }
.np-knob { position: absolute; left: 33%; top: 33%; width: 34%; height: 34%; border-radius: 50%; background: rgba(255, 255, 255, .25); transition: transform .05s; pointer-events: none; }
.np-dpad .np-knob { border-radius: 8px; background: rgba(255, 255, 255, .12); }
/* En vertical: el vídeo arriba y los controles debajo, sin taparse */
@media (orientation: portrait) {
  body.np-has-touch .player-wrap { padding-bottom: 280px; }
  body.np-has-touch .side { display: none; }
}
@media (orientation: landscape) {
  body.np-has-touch .np-btn, body.np-has-touch .np-dpad, body.np-has-touch .np-stick { opacity: .75; }
  body.np-has-touch .np-dpad, body.np-has-touch .np-stick { width: 130px; height: 130px; }
}
.now-playing a.np-join { border-color: var(--accent); } .now-playing a.np-join strong { color: var(--accent); }
.invite-box input { min-width: 0; width: 0; }
.side { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.toast:not(.show) { visibility: hidden; }

/* ── Mi cuenta: verificación en dos pasos y sesiones ───────────────────── */
.badge { display: inline-block; font-size: .72rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); vertical-align: middle; margin-left: .3rem; }
.badge.ok { color: var(--ok); border-color: rgba(61, 220, 132, .5); }
.qr-box { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: .5rem 0 1rem; }
#qr { width: 180px; height: 180px; background: #fff; border-radius: 8px; overflow: hidden; }
#qr svg { width: 100%; height: 100%; display: block; }
.secret { font-size: .95rem; letter-spacing: .05em; word-break: break-all; max-width: 260px; }
.code-input { font-family: var(--mono); letter-spacing: .15em; font-size: 1.1rem; max-width: 12rem; }
.steps { padding-left: 1.2rem; margin: 0 0 .5rem; color: var(--muted); }
.recovery { border: 1px solid var(--warn); border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1rem; background: rgba(255, 181, 71, .06); }
.recovery pre { font-family: var(--mono); font-size: 1rem; columns: 2; background: var(--bg); padding: .6rem .8rem; border-radius: 8px; margin: .5rem 0; }
.session-list { list-style: none; padding: 0; margin: .5rem 0 1rem; display: grid; gap: .5rem; }
.session-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 9px; background: var(--bg2); }
.session-list li.mine { border-color: rgba(61, 220, 132, .45); }
.session-list li > div { display: grid; min-width: 0; }
.session-list li span.small { overflow-wrap: anywhere; }
label.check { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--muted); }
label.check input { width: auto; }
.btn.link { background: none; border: 0; color: var(--muted); }
.flash { max-width: 900px; margin: 1rem auto 0; padding: .7rem 1rem; border: 1px solid var(--warn); border-radius: 10px; background: rgba(255, 181, 71, .08); }
.session-list li > div > .badge { justify-self: start; margin: .15rem 0; }

/* ── Partidas: autoguardado y exportar ─────────────────────────────────── */
.slot.auto { border-style: dashed; }
.slot .dl { position: absolute; right: 1.9rem; top: .2rem; color: var(--muted); font-size: .95rem; padding: .1rem .35rem; border-radius: 4px; text-decoration: none; }
.slot .dl:hover { color: var(--accent2); background: rgba(54, 214, 231, .12); }

/* ── Colecciones (menú del reproductor) ────────────────────────────────── */
.col-menu { position: relative; }
.col-pop { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 30; width: 260px; padding: .8rem; display: grid; gap: .5rem; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.col-pop[hidden] { display: none; }
.col-pop ul { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto; display: grid; gap: .2rem; }
.col-pop label { display: flex; gap: .5rem; align-items: center; cursor: pointer; padding: .2rem .1rem; font-size: .9rem; }
.col-pop label input { width: auto; }
.col-pop .row-form input { flex: 1; min-width: 0; width: 0; }
.col-card .row-form input[name=name] { flex: 1; min-width: 160px; }
.col-games { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .3rem; }
.col-games li { position: relative; display: flex; gap: .6rem; align-items: baseline; padding: .3rem 2rem .3rem .5rem; border-radius: 7px; background: var(--bg2); }
.col-games .del { top: 50%; transform: translateY(-50%); }
.row-head small.muted { font-size: .78rem; font-weight: 400; margin-left: .4rem; }

/* ── Capturas ──────────────────────────────────────────────────────────── */
.shot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: .3rem 0 .6rem; }
.shot-grid > p { grid-column: 1 / -1; margin: 0; }
.shot-thumb { position: relative; padding: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #000; cursor: zoom-in; aspect-ratio: 4 / 3; }
.shot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-thumb span { position: absolute; left: 0; right: 0; bottom: 0; font-size: .65rem; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); padding: .5rem .3rem .15rem; text-align: left; }
.shot-thumb:hover { border-color: var(--accent2); }
.screen.flash-shot { animation: flashShot .3s; }
@keyframes flashShot { from { filter: brightness(2.2); } to { filter: none; } }
.lightbox { padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--text); max-width: min(96vw, 1100px); }
.lightbox::backdrop { background: rgba(0, 0, 0, .8); }
.lightbox img { display: block; max-width: 100%; max-height: 78vh; margin: 0 auto; image-rendering: pixelated; background: #000; }
.lb-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .6rem .8rem; }
.lb-info { flex: 1; font-size: .85rem; color: var(--muted); min-width: 160px; }
.gallery-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.gallery-head h1 { margin: 0; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.gal-item { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.gal-item button { display: block; width: 100%; padding: 0; border: 0; background: #000; cursor: zoom-in; aspect-ratio: 4 / 3; }
.gal-item img { width: 100%; height: 100%; object-fit: contain; display: block; image-rendering: pixelated; }
.gal-item figcaption { display: grid; gap: .1rem; padding: .5rem .7rem .6rem; font-size: .9rem; }
.pager { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.5rem 0; }
.pager a { padding: .25rem .7rem; border: 1px solid var(--line); border-radius: 7px; color: var(--text); }
.pager a.active { background: var(--accent); border-color: var(--accent); }

/* ── Biblioteca: novedades y aleatorio ─────────────────────────────────── */
.new-badge { background: var(--accent2) !important; color: #0d0f17 !important; }
.game.picked { animation: picked .7s ease; }
@keyframes picked { 0%, 100% { transform: none; } 30% { transform: scale(1.08); } 60% { transform: scale(.97); } }
#btnRandom { white-space: nowrap; }
@media (max-width: 600px) { .hide-sm { display: none; } }

/* ── Chat de la sala online ────────────────────────────────────────────── */
.np-chat { display: grid; gap: .4rem; }
.np-msgs { list-style: none; margin: 0; padding: .4rem .5rem; max-height: 170px; min-height: 60px; overflow-y: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; font-size: .85rem; display: grid; gap: .15rem; align-content: start; }
.np-msgs:empty::before { content: "Sin mensajes todavía"; color: var(--muted); font-size: .8rem; }
.np-msgs li { overflow-wrap: anywhere; }
.np-msgs li strong { color: var(--accent2); font-weight: 600; }
.np-msgs li.mine strong { color: var(--accent); }
.np-chat .row-form input { flex: 1; min-width: 0; width: 0; }
.np-chat-btn { display: none; position: relative; font-size: 1rem; }
body.np-has-touch .np-chat-btn { display: grid; }
.np-chat-btn[data-unread]::after { content: attr(data-unread); position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--accent); color: #fff; font-size: .65rem; display: grid; place-items: center; padding: 0 3px; }
/* Móvil: el panel lateral (chat, mando, volumen, salir) se abre como hoja inferior */
@media (orientation: portrait) {
  body.np-has-touch.chat-open .side { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 65vh; overflow-y: auto; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .6); }
}
@media (orientation: landscape) {
  body.np-has-touch .side { display: none; }
  body.np-has-touch.chat-open .side { display: grid; position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 50vw); z-index: 60; overflow-y: auto; border-radius: 0; }
}
.lang-switch { text-align: center; margin-top: 1rem; font-size: .85rem; color: var(--muted); }
.lang-switch strong { color: var(--text); font-weight: 600; }
.fast-toggle { margin-top: .6rem; color: var(--text); font-weight: 600; }

/* ── Completados ───────────────────────────────────────────────────────── */
.stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.done-btn.on { color: #ffcf3d; border-color: #ffcf3d; background: rgba(255, 207, 61, .1); }
.done-badge { position: absolute; left: .45rem; top: .45rem; z-index: 3; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(13, 15, 23, .82); border: 1px solid #ffcf3d; font-size: .85rem; }
.stats span a { color: inherit; }

/* ── Versión ───────────────────────────────────────────────────────────── */
.app-version { text-align: center; color: var(--muted); font-size: .75rem; font-family: var(--mono); margin: .4rem 0 0; opacity: .8; }
.ver-chip { display: inline-block; vertical-align: middle; margin-left: .5rem; font-size: .75rem; font-family: var(--mono); font-weight: 600; padding: .15rem .55rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.ver-chip:hover { text-decoration: none; color: var(--accent2); border-color: var(--accent2); }
.ver-chip.new { color: var(--warn); border-color: var(--warn); }
.version-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: .6rem; }
.version-head > div { display: grid; gap: .1rem; }
.version-head strong { font-size: 1.6rem; font-family: var(--mono); color: var(--accent); }
.pending-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.pending-list li { display: flex; gap: .6rem; align-items: baseline; }
.pend-tag { flex-shrink: 0; font-size: .72rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.pend-tag.waiting { color: var(--warn); border-color: rgba(255, 181, 71, .5); }
.pend-tag.todo { color: var(--accent2); border-color: rgba(54, 214, 231, .5); }
details.release { border-top: 1px solid var(--line); padding: .5rem 0; }
details.release > summary { cursor: pointer; font-family: var(--mono); }
details.release ul { margin: .4rem 0 .2rem; padding-left: 1.2rem; display: grid; gap: .25rem; font-size: .92rem; }
@media (max-width: 600px) { .pending-list li { flex-direction: column; gap: .2rem; } }

/* ── Multijugador ──────────────────────────────────────────────────────── */
.gmeta .mp { margin-left: auto; font-size: .72rem; color: var(--accent2); flex-shrink: 0; }
.gmeta .mp + .ptime { margin-left: .4rem; }
.multi-note { margin: -.25rem 0 1rem; }

/* ════════════════════════════════════════════════════════════════════════
   📺 Modo TV
   ════════════════════════════════════════════════════════════════════════ */
.tv-link span { font-size: .8rem; }
@media (max-width: 600px) { .tv-link span { display: none; } }
.tv-ask { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 80; display: grid; gap: .3rem; text-align: center;
  padding: 1rem 1.4rem; border-radius: 14px; background: var(--card); border: 2px solid var(--accent2); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.tv-ask span { color: var(--muted); font-size: .9rem; }
.tv-ask b { color: var(--text); }

body[data-view="tv"] { overflow: hidden; height: 100vh; }
body[data-view="tv"] .topbar, body[data-view="tv"] .flash { display: none; }
.tv { --hero: var(--accent); position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; font-size: clamp(14px, 1.15vw, 22px);
  background: radial-gradient(1200px 700px at 20% -10%, color-mix(in srgb, var(--hero) 28%, transparent), transparent 65%), var(--bg); transition: background .4s; }
.tv-top { flex: none; display: flex; align-items: center; gap: 1.5rem; padding: 1.2rem 3vw .4rem; }
.tv-brand { font-family: var(--mono); font-weight: 700; letter-spacing: .08em; display: flex; align-items: center; gap: .6rem; text-transform: uppercase; }
.tv-clock { margin-left: auto; font-family: var(--mono); font-size: 1.3em; }
.tv-user { color: var(--muted); }
.tv-exit { font: inherit; font-size: .85em; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 999px; padding: .35em .9em; cursor: pointer; }
.tv-exit:hover, .tv-exit:focus-visible { color: var(--text); border-color: var(--accent2); }
.tv-hero { flex: none; padding: 1.5vh 3vw 0; min-height: 13vh; }
.tv-hero h1 { margin: 0; font-size: 2.6em; line-height: 1.1; text-shadow: 0 4px 30px rgba(0, 0, 0, .6); }
.tv-hero p { margin: .4em 0 0; color: var(--muted); font-size: 1.1em; }
.tv-rows { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 1vh 0 4vh; scroll-behavior: smooth; }
.tv-rows::-webkit-scrollbar { display: none; }
.tv-row { margin-bottom: .5vh; }
.tv-row h2 { margin: 0 0 .5em 3vw; font-size: 1.25em; color: var(--muted); font-weight: 600; }
.tv-track { display: flex; gap: 1.4vw; overflow-x: auto; scrollbar-width: none; padding: 3vh 3vw 3vh; scroll-behavior: smooth; }
.tv-track::-webkit-scrollbar { display: none; }
.tv-card { position: relative; flex: none; width: clamp(140px, 13vw, 260px); aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; cursor: pointer;
  background: var(--bg2); border: 3px solid transparent; transition: transform .18s, border-color .18s, box-shadow .18s; }
.tv-card img { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.tv-nocover { width: 100%; height: 100%; display: grid; place-items: center; text-align: center; padding: 1em; font-weight: 700;
  background: linear-gradient(160deg, color-mix(in srgb, var(--sys) 45%, #000), #0d0f17); }
.tv-card.focus { transform: scale(1.12); border-color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--sys) 70%, transparent), 0 20px 50px rgba(0, 0, 0, .7); z-index: 2; }
.tv-badge { position: absolute; left: .5em; bottom: .5em; font-size: .75em; font-weight: 700; background: var(--accent); color: #fff; padding: .2em .6em; border-radius: 999px; }
.tv-done, .tv-fav { position: absolute; top: .45em; font-size: .9em; width: 1.8em; height: 1.8em; display: grid; place-items: center; border-radius: 50%; background: rgba(13, 15, 23, .82); }
.tv-done { left: .45em; border: 1px solid #ffcf3d; }
.tv-fav { right: .45em; color: #ffcf3d; }
.tv-empty { padding: 3vw; font-size: 1.3em; color: var(--muted); }
.tv-help { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .6em 2em; padding: .8em 3vw 1.2em; color: var(--muted); font-size: .85em; border-top: 1px solid var(--line); }
.tv-help b { display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; padding: 0 .35em; margin-right: .3em; border-radius: 50%; background: var(--bg2); border: 1px solid var(--line); color: var(--text); }
.tv-start { position: absolute; inset: 0; z-index: 50; display: grid; place-content: center; gap: 1.5em; text-align: center; padding: 2em; cursor: pointer;
  background: radial-gradient(900px 500px at 50% 30%, rgba(255, 61, 127, .22), transparent 70%), rgba(13, 15, 23, .97); }
.tv-start[hidden] { display: none; }
.tv-start .brand-logo.big, .tv-start .brand-icon.big { max-height: 18vh; }
.tv-start-cta { font-size: 2em; font-weight: 700; margin: 0; animation: pulse 1.6s infinite; }
.tv-start .muted { max-width: 46em; margin: 0 auto; }
.tv-player { position: absolute; inset: 0; z-index: 60; background: #000; }
.tv-player[hidden] { display: none; }
.tv-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.tv-player-hint { position: absolute; left: 50%; bottom: 3vh; transform: translateX(-50%); padding: .6em 1.2em; border-radius: 999px; background: rgba(13, 15, 23, .85);
  color: var(--text); font-size: .95em; opacity: 0; transition: opacity .4s; pointer-events: none; }
.tv-player-hint.show { opacity: 1; }

/* El juego dentro del modo TV: solo la pantalla, ocupando todo */
body.tv-play { background: #000; overflow: hidden; }
body.tv-play .topbar, body.tv-play .player-head, body.tv-play .side, body.tv-play .discs, body.tv-play .exp-note, body.tv-play .flash { display: none !important; }
body.tv-play .player-wrap { padding: 0; max-width: none; height: 100vh; }
body.tv-play .player-grid { display: block; height: 100vh; }
body.tv-play .stage { height: 100vh; container-type: size; }
body.tv-play .screen { width: min(100cqw, calc(100cqh * var(--arn, 1.3333))); border: 0; border-radius: 0; box-shadow: none; }
.tv-sound { position: fixed; left: 50%; top: 3vh; transform: translateX(-50%); z-index: 90; padding: .7rem 1.2rem; border-radius: 12px; background: rgba(13, 15, 23, .92);
  border: 1px solid var(--warn); font-size: 1rem; text-align: center; max-width: 90vw; }

/* ===========================================================================
   🔄 Centro de intercambio Pokémon
   =========================================================================== */
.trade h2 { margin-top: 0; }
.trade-rooms { display: grid; gap: .5rem; }
.trade-room { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); }
.trade-saves { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.trade-save { border: 1px solid var(--line); border-radius: 10px; padding: .7rem .8rem; background: var(--bg2); min-width: 0; }
.trade-save.bad { opacity: .6; }
.ts-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .2rem; }
.ts-party { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.ts-party span { font-size: .78rem; font-family: var(--mono); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: .1rem .4rem; }
.pver { font-size: .72rem; font-weight: 700; border-radius: 5px; padding: .05rem .4rem; color: #fff; background: #666; }
.pver-red { background: #d03b3b; } .pver-blue { background: #3b6fd0; } .pver-yellow { background: #e0b400; color: #222; }
.pwarn { color: var(--warn); font-size: .82rem; }
.pok { color: var(--ok); font-weight: 700; font-size: .85rem; }
.trade-new { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.trade-opt { display: flex; flex-direction: column; gap: .55rem; padding: .8rem; border: 1px dashed var(--line); border-radius: 10px; }
.trade-opt h3 { margin: 0; }
.trade-opt label, .dlg label { display: grid; gap: .25rem; font-size: .9rem; }
.trade-opt select, .dlg select { width: 100%; min-width: 0; }
.trade-rules summary { cursor: pointer; font-weight: 600; }
.trade-rules ul { margin: .6rem 0 0; padding-left: 1.2rem; line-height: 1.55; }

.trade-head { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.trade-code { font-family: var(--mono); font-weight: 700; letter-spacing: .15em; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: .2rem .55rem; }
.trade-status { color: var(--muted); }
.trade-warn { border: 1px solid var(--warn); color: var(--warn); border-radius: 10px; padding: .6rem .8rem; margin-bottom: .8rem; }
.trade-board { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .trade-board { grid-template-columns: minmax(0, 1fr); } .trade-mid { order: 3; } .trade-side.is-mine { order: -1; } }
.trade-side { min-width: 0; }
.ts-who { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pparty { list-style: none; margin: .7rem 0 .3rem; padding: 0; display: grid; gap: .35rem; }
.pmon { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 9px; background: var(--bg2); }
.pmon.pick { cursor: pointer; }
.pmon.pick:hover { border-color: var(--accent2); }
.pmon.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: color-mix(in srgb, var(--accent) 12%, var(--bg2)); }
.pdex { font-family: var(--mono); color: var(--muted); font-size: .8rem; }
.pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plv { font-family: var(--mono); font-size: .85rem; }
.trade-mid { display: flex; flex-direction: column; gap: .7rem; }
.trade-swap { display: grid; gap: .5rem; }
.pswap { text-align: center; font-size: 1.6rem; color: var(--accent2); line-height: 1; }
.pcard { border: 1px solid var(--line); border-radius: 12px; padding: .75rem .85rem; background: var(--card); display: grid; gap: .3rem; min-width: 0; overflow-wrap: anywhere; }
.pcard.empty { text-align: center; color: var(--muted); }
.pcard.empty div { font-size: 2rem; opacity: .4; }
.pc-name { font-weight: 700; font-size: 1.05rem; }
.ptype { display: inline-block; font-size: .72rem; font-weight: 700; color: #fff; text-shadow: 0 1px 1px #0008; background: var(--t); border-radius: 5px; padding: .05rem .45rem; margin-right: .25rem; }
.pevo { color: var(--warn); font-weight: 600; }
.trade-wait { text-align: center; padding: 1.5rem .5rem; }
.trade-wait .spinner { width: 34px; height: 34px; margin: 0 auto .7rem; border: 3px solid var(--line); border-top-color: var(--accent2); border-radius: 50%; animation: tradespin 1s linear infinite; }
@keyframes tradespin { to { transform: rotate(360deg); } }
.trade-done { margin-top: 1rem; border-color: var(--ok); }
.trade-done ul { padding-left: 1.2rem; line-height: 1.7; }
.dlg { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem; width: min(420px, calc(100% - 2rem)); }
.dlg::backdrop { background: #000a; }
.dlg h3 { margin-top: 0; }
.dlg .row-form { margin-top: 1rem; justify-content: flex-end; }
.poke-link { display: grid; gap: .3rem; }

.pmon.blocked { opacity: .55; }
.pblock { display: block; color: var(--warn); font-size: .75rem; white-space: normal; }
.pshiny { color: #ffd54a; }
.pitem { font-size: .85em; }
.pver-gold { background: #c9a227; color: #222; } .pver-silver { background: #9aa4b1; color: #222; } .pver-crystal { background: #4fb3d9; color: #fff; }
.plang { font-size: .68rem; font-weight: 700; font-family: var(--mono); border: 1px solid var(--line); border-radius: 4px; padding: 0 .3rem; color: var(--muted); }

/* ===========================================================================
   🎮 Modo portátil en el móvil (handheld.js): juego arriba y mando debajo
   =========================================================================== */
.stage { position: relative; }
.gbh-enter { position: absolute; right: .5rem; top: .5rem; z-index: 5; font: inherit; font-size: .85rem; font-weight: 600;
  padding: .45rem .8rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(13, 15, 23, .8); color: var(--text); }
.gbh-enter[hidden], .gbh-pad[hidden], .gbh-menu[hidden] { display: none !important; }

body.gb-hand { overflow: hidden; background: #000; --gbh-h: min(calc(100vw / var(--hh-ar, 1.333)), 50dvh); }
body.gb-hand .topbar, body.gb-hand .player-head, body.gb-hand .side, body.gb-hand .discs,
body.gb-hand .exp-note, body.gb-hand .flash { display: none !important; }
body.gb-hand:not(.hh-overlay) .ejs_virtualGamepad_parent, body.gb-hand:not(.hh-overlay) .ejs_virtualGamepad_open { display: none !important; }
body.gb-hand .player-wrap { padding: 0; max-width: none; }
body.gb-hand .stage { position: fixed; left: 0; right: 0; top: 0; height: var(--gbh-h); z-index: 30; background: #000; container-type: size; }
body.gb-hand .screen { width: min(100cqw, calc(100cqh * var(--hh-ar, 1.333))); height: auto; aspect-ratio: var(--hh-ar, 1.333);
  border: 0; border-radius: 0; box-shadow: none; }
/* La imagen ocupa todo su hueco (sin franjas negras) */
body.gb-hand #game, body.gb-hand #game .ejs_parent, body.gb-hand #game .ejs_canvas_parent { width: 100% !important; height: 100% !important; }
body.gb-hand #game canvas { width: 100% !important; height: 100% !important; object-fit: contain; }

/* Mando (vertical): hombros arriba, cruceta y botones en medio, SELECT/START debajo, todo lejos del borde inferior */
.gbh-pad { position: fixed; left: 0; right: 0; bottom: 0; top: var(--gbh-h); z-index: 31; touch-action: none; user-select: none; -webkit-user-select: none;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(.8rem, 3.5dvh, 2rem);
  padding: 3.2rem 1rem max(72px, calc(env(safe-area-inset-bottom) + 48px));
  background: radial-gradient(120% 90% at 50% 0%, #20243a 0%, #10121c 70%); border-top: 1px solid #2a3047; }
.gbh-sh { display: flex; justify-content: space-between; }
.gbh-shg { display: flex; gap: .5rem; }
.gbh-shb { font: 700 .85rem/1 var(--mono); color: #c8cbe0; min-width: 64px; height: 38px; padding: 0 .8rem; border-radius: 10px; border: 0;
  background: #2b2f40; box-shadow: 0 3px 0 #0008; touch-action: none; }
.gbh-mid { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.gbh-right { display: flex; align-items: center; gap: .6rem; }
.gbh-dpad { position: relative; width: min(40vw, 165px); aspect-ratio: 1; touch-action: none; flex: none; }
.gbh-cross, .gbh-cross::before { position: absolute; inset: 33% 0; border-radius: 8px; background: #2b2f40; box-shadow: 0 4px 0 #0007, inset 0 1px 0 #ffffff14; }
.gbh-cross::before { content: ''; inset: -100% 33%; }
.gbh-dpad[data-dir*="UP"] .gbh-cross::before { box-shadow: inset 0 26px 0 -14px var(--accent2), 0 4px 0 #0007; }
.gbh-dpad[data-dir*="DOWN"] .gbh-cross::before { box-shadow: inset 0 -26px 0 -14px var(--accent2), 0 4px 0 #0007; }
.gbh-dpad[data-dir*="LEFT"] .gbh-cross { box-shadow: inset 26px 0 0 -14px var(--accent2), 0 4px 0 #0007; }
.gbh-dpad[data-dir*="RIGHT"] .gbh-cross { box-shadow: inset -26px 0 0 -14px var(--accent2), 0 4px 0 #0007; }
.gbh-stick { border-radius: 50%; background: radial-gradient(circle, #23273a 0 55%, #1a1d2b 56%); box-shadow: inset 0 2px 8px #0009; }
.gbh-knob { position: absolute; inset: 28%; border-radius: 50%; background: #3a3f55; box-shadow: 0 4px 0 #0008; transition: transform .05s; }
.gbh-btn { width: min(17vw, 70px); height: min(17vw, 70px); flex: none; border-radius: 50%; border: 0; font: 700 1.1rem/1 var(--mono); color: #fff;
  background: #a3245a; box-shadow: 0 5px 0 #5c1233, inset 0 2px 0 #ffffff33; touch-action: none; padding: 0; }
.gbh-btn.on, .gbh-shb.on, .gbh-pill.on { translate: 0 3px; filter: brightness(1.3); }
.gbh-face { display: grid; gap: .5rem; }
.gbh-row { display: flex; gap: .55rem; justify-content: flex-end; }
.gbh-face .gbh-btn { width: min(15vw, 62px); height: min(15vw, 62px); }
.gbh-diamond { display: grid; grid-template: repeat(3, min(13vw, 52px)) / repeat(3, min(13vw, 52px)); }
.gbh-diamond .gbh-btn { width: min(14.5vw, 58px); height: min(14.5vw, 58px); place-self: center; }
.gbh-diamond .t { grid-area: 1 / 2; } .gbh-diamond .l { grid-area: 2 / 1; } .gbh-diamond .r { grid-area: 2 / 3; } .gbh-diamond .b { grid-area: 3 / 2; }
.gbh-c { grid-template: repeat(3, min(9vw, 36px)) / repeat(3, min(9vw, 36px)); }
.gbh-c .gbh-btn { width: min(10vw, 40px); height: min(10vw, 40px); font-size: .7rem; background: #c9a227; box-shadow: 0 4px 0 #6b5510; color: #222; }
/* Game Boy: A y B inclinados como en la consola */
.gbh-ab { display: flex; align-items: flex-start; gap: min(5vw, 22px); transform: rotate(-25deg); }
.gbh-ab .gbh-b { margin-top: 2.2rem; }
.is-gb .gbh-btn { width: min(19vw, 76px); height: min(19vw, 76px); font-size: 1.2rem; }
.gbh-ss { display: flex; gap: 1.6rem; justify-content: center; }
.gbh-pill { font: 700 .72rem/1 var(--mono); letter-spacing: .08em; color: #c8cbe0; padding: .6rem 1.1rem; border-radius: 999px; border: 0;
  background: #2b2f40; box-shadow: 0 3px 0 #0008; touch-action: none; }
.is-gb .gbh-pill { rotate: -20deg; }
.gbh-menu-btn { position: absolute; top: .5rem; right: .6rem; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #ffffff22;
  background: #0006; color: var(--text); font-size: 1.1rem; }
.gbh-menu { position: absolute; top: 3.2rem; right: .6rem; z-index: 2; display: grid; gap: .3rem; padding: .5rem; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 30px #000a; }
.gbh-menu button { font: inherit; text-align: left; padding: .6rem .8rem; border: 0; border-radius: 8px; background: transparent; color: var(--text); }
.gbh-menu button:active { background: var(--bg2); }
body.gb-hand .toast { z-index: 60; bottom: auto; top: 1rem; transform: translate(-50%, -150%); }
body.gb-hand .toast.show { transform: translate(-50%, 0); }

/* Horizontal, consolas que no son Game Boy: juego a pantalla completa con los botones de EmulatorJS */
body.gb-hand.hh-overlay .stage { inset: 0; height: auto; }

/* Horizontal, Game Boy: juego en el centro a toda la altura y mando a los lados */
@media (orientation: landscape) {
  body.gb-hand.hh-gb { background: #10121c; --gbh-w: min(calc(100dvh * 10 / 9), calc(100vw - 2 * 170px)); }
  body.gb-hand.hh-gb .stage { top: 0; bottom: 0; height: auto; left: calc((100vw - var(--gbh-w)) / 2); right: auto; width: var(--gbh-w); }
  .is-gb.gbh-pad { top: 0; background: transparent; border: 0; pointer-events: none; display: block; padding: 0; }
  .is-gb.gbh-pad > *, .is-gb .gbh-mid > *, .is-gb .gbh-ss > * { pointer-events: auto; }
  .is-gb .gbh-mid, .is-gb .gbh-ss { pointer-events: none; }
  .is-gb .gbh-dpad { position: absolute; left: max(12px, calc((100vw - var(--gbh-w)) / 4 - 70px)); top: 42%; transform: translateY(-50%);
    width: min(140px, calc((100vw - var(--gbh-w)) / 2 - 20px)); }
  .is-gb .gbh-right { position: absolute; right: max(10px, calc((100vw - var(--gbh-w)) / 4 - 75px)); top: 38%; transform: translateY(-50%); }
  .is-gb .gbh-btn { width: 62px; height: 62px; }
  /* SELECT/START más arriba para que no queden bajo los botones del sistema */
  .is-gb .gbh-ss { position: absolute; bottom: max(64px, calc(env(safe-area-inset-bottom) + 40px)); left: 0; right: 0; justify-content: space-between;
    padding: 0 max(1.2rem, calc((100vw - var(--gbh-w)) / 4 - 60px)); }
}
.gbh-right.has-c { flex-direction: column; gap: .4rem; }

/* Colores y forma de los mandos originales */
.n64-right { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; flex: none; padding-right: .6rem; }
.n64-right .gbh-c { margin-right: .5rem; }
.n64-ab { display: flex; align-items: flex-start; gap: .8rem; margin-right: .2rem; }
.n64-ab .n64-b { width: min(13vw, 52px); height: min(13vw, 52px); }
.n64-ab .n64-a { width: min(14.5vw, 58px); height: min(14.5vw, 58px); margin-top: 1.3rem; }
.hh-sys-n64 .gbh-stick { width: min(36vw, 150px); margin: 3.5rem 0 0 .9rem; }
.hh-sys-n64 .n64-a { background: #2f5fd0; box-shadow: 0 5px 0 #182f6b, inset 0 2px 0 #ffffff33; }
.hh-sys-n64 .n64-b { background: #1d9a4b; box-shadow: 0 5px 0 #0d4d24, inset 0 2px 0 #ffffff33; }
.hh-sys-n64 .gbh-c .gbh-btn { background: #f2c41f; box-shadow: 0 4px 0 #8a6d07; color: #3a2e00; }
.hh-sys-n64 .gbh-shb { background: #9da3ab; color: #1c1f26; box-shadow: 0 3px 0 #555b63; }
.hh-sys-n64 .gbh-shb[data-k="Z"] { border-radius: 10px 10px 18px 18px; background: #7c828a; }
.hh-sys-n64 .gbh-pill[data-k="START"] { width: 58px; height: 58px; padding: 0; border-radius: 50%; background: #d3312c; color: #fff;
  box-shadow: 0 4px 0 #6b1412, inset 0 2px 0 #ffffff33; font-size: .62rem; }
/* SNES (colores europeos/japoneses): A rojo, B amarillo, X azul, Y verde */
.hh-sys-snes .gbh-btn[data-k="A"] { background: #d1362f; box-shadow: 0 5px 0 #6b1412; }
.hh-sys-snes .gbh-btn[data-k="B"] { background: #e8b51c; box-shadow: 0 5px 0 #7a5d07; color: #2b2100; }
.hh-sys-snes .gbh-btn[data-k="X"] { background: #2f52b8; box-shadow: 0 5px 0 #172a63; }
.hh-sys-snes .gbh-btn[data-k="Y"] { background: #1f8f4a; box-shadow: 0 5px 0 #0d4824; }
/* PlayStation: botones grises con símbolos de color */
.hh-sys-psx .gbh-diamond .gbh-btn { background: #2d3038; box-shadow: 0 5px 0 #111; font-size: 1.5rem; }
.hh-sys-psx .gbh-btn[data-k="△"] { color: #3ec8a0; } .hh-sys-psx .gbh-btn[data-k="○"] { color: #ff5a6a; }
.hh-sys-psx .gbh-btn[data-k="✕"] { color: #8aa8ff; } .hh-sys-psx .gbh-btn[data-k="□"] { color: #ff8ad8; }
/* NES: A y B rojos */
.hh-sys-nes .gbh-btn { background: #c4252b; box-shadow: 0 5px 0 #5f1013; }
/* Mega Drive / Saturn: botones negros */
.hh-sys-segaMD .gbh-btn, .hh-sys-segaCD .gbh-btn, .hh-sys-sega32x .gbh-btn, .hh-sys-segaSaturn .gbh-btn { background: #24262c; box-shadow: 0 5px 0 #0a0a0c; }

.ts-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .55rem; flex-wrap: wrap; }
.pgroup { margin: .8rem 0 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.pboxes { margin-top: .6rem; border-top: 1px dashed var(--line); padding-top: .5rem; }
.pbox-sel select { max-width: 100%; }

/* 👁 Visor de partida Pokémon */
.pv-dexhead { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.pv-dexhead h2 { margin: 0; }
.pv-count { color: var(--muted); }
.pv-filter { display: flex; gap: .3rem; margin-left: auto; }
.pv-filter .btn.on { border-color: var(--accent2); color: var(--accent2); }
.pv-dex { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .3rem; margin: .8rem 0 .4rem; }
.pv-cell { display: flex; gap: .35rem; align-items: baseline; padding: .3rem .45rem; border-radius: 7px; border: 1px solid var(--line);
  font-size: .78rem; color: var(--muted); background: var(--bg2); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pv-cell.seen { color: #b9bdd0; }
.pv-cell.own { color: #fff; border-color: color-mix(in srgb, var(--ok) 60%, var(--line)); background: color-mix(in srgb, var(--ok) 14%, var(--bg2)); }
.pv-mons { display: grid; gap: .35rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); margin-top: .5rem; }
.pv-mon { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: center; text-align: left; font: inherit; color: var(--text);
  padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 9px; background: var(--bg2); cursor: pointer; }
.pv-mon:hover { border-color: var(--accent2); }
.pv-box { border-top: 1px solid var(--line); padding: .5rem 0; }
.pv-box summary { cursor: pointer; }

/* 📴 Sin conexión */
.off-box { display: grid; gap: .3rem; }
.off-badge { display: inline-block; min-width: 1.2em; padding: 0 .3em; border-radius: 99px; background: var(--accent, #ff3d7f); color: #fff; font-size: .7rem; text-align: center; }
body.is-offline .side .dl, body.is-offline .poke-link, body.is-offline #npBox { opacity: .45; pointer-events: none; }

/* 📖 Pokédex extendida */
.pv-filter { flex-wrap: wrap; }
.pv-search { flex: 1 1 200px; max-width: 320px; }
button.pv-cell { font: inherit; text-align: left; cursor: pointer; flex-direction: column; gap: .05rem; align-items: flex-start; }
button.pv-cell:hover { border-color: var(--accent2); }
.pv-cell .pdex { font-size: .78rem; color: var(--muted); }
.pv-how { font-size: .8rem; }
.pv-dlg { max-width: min(640px, 96vw); width: 100%; }
.pv-dlg h4 { margin: 1rem 0 .35rem; font-size: .95rem; }
.pv-chip { display: inline-block; padding: .1rem .5rem; border-radius: 99px; border: 1px solid var(--line); font-size: .82rem; }
.pv-chip.own { border-color: var(--ok); color: var(--ok); }
.pv-chip.seen { color: #b9bdd0; }
.pv-enc { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pv-enc td { padding: .35rem .4rem; border-top: 1px solid var(--line); vertical-align: top; }
.pv-enc td:last-child { white-space: nowrap; text-align: right; }
.pv-evo { line-height: 2; }
.pv-evo-n { display: inline-block; padding: .05rem .45rem; border-radius: 6px; border: 1px solid var(--line); cursor: pointer; }
.pv-evo-n.own { border-color: color-mix(in srgb, var(--ok) 60%, var(--line)); }
.pv-evo-n.cur { border-color: var(--accent2); color: var(--accent2); font-weight: 600; }
.pv-evo-a small { color: var(--muted); }
.pv-evo-br { display: inline-flex; flex-direction: column; vertical-align: middle; margin-left: .2rem; }
.pv-ver { border-top: 1px solid var(--line); padding: .35rem 0; }
.pv-ver summary { cursor: pointer; }
@media (max-width: 560px) { .pv-enc td:nth-child(2) { font-size: .8rem; } .pv-filter { margin-left: 0; } }

/* Móvil: cabecera del juego en filas → 1) volver + título completo y ficha, 2) botones. Debajo, el juego. */
@media (max-width: 760px) {
  .player-head { flex-wrap: wrap; align-items: flex-start; gap: .55rem .5rem; }
  .player-head .title-block { flex: 1 1 calc(100% - 50px); min-width: 0; gap: .25rem; }
  .player-head .title-block h1 {
    white-space: normal; text-overflow: clip; font-size: 1.15rem; line-height: 1.25; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .player-head .facts > span { white-space: nowrap; }
  .player-head .icon-btn, .player-head .fav.big { width: 40px; height: 40px; flex: none; }
}