/* SepeGames — pantalla de inicio al estilo de la consola, con peepos */

:root {
  /* Unidad: 1 % del ancho de un lienzo 16:9 que cabe en la pantalla */
  --u: min(1vw, 1.7778vh);
  --bg: #EBEBEB;
  --ink: #2D2D2D;
  --ink-soft: #6E6E6E;
  --accent: #2CC4C4;
  --accent-ring: #45D8D8;
  --circle: #FAFAFA;
  --circle-shadow: 0 0.25em 0.6em rgba(0, 0, 0, 0.12);
  --slot: #F7F7F7;
  --slot-line: #DCDCDC;
  --line: #B9B9B9;
  --tile-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.12);
  color-scheme: light;
}
:root[data-theme='dark'] {
  --bg: #2D2D2D;
  --ink: #F2F2F2;
  --ink-soft: #B5B5B5;
  --accent: #3B9FD8;
  --accent-ring: #3B9FD8;
  --circle: #353535;
  --circle-shadow: 0 0.25em 0.6em rgba(0, 0, 0, 0.35);
  --slot: #1E1E1E;
  --slot-line: #1E1E1E;
  --line: #C8C8C8;
  --tile-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink); overflow: hidden;
  font-family: 'Nunito', system-ui, sans-serif; font-optical-sizing: auto; text-rendering: optimizeLegibility;
  transition: background-color 0.35s, color 0.35s;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus { outline: none; }
img { display: block; }

.hm { position: relative; height: 100dvh; display: flex; flex-direction: column; font-size: var(--u); }

/* ---------- Arriba ---------- */
.hm__top { display: flex; align-items: center; justify-content: space-between; padding: 3.7em 5.6em 0 3.5em; }
.user { position: relative; display: flex; align-items: center; gap: 1em; }
.user__pic { width: 4.2em; height: 4.2em; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #8BD36A, #3E8E2C); box-shadow: 0 0.12em 0.4em rgba(0, 0, 0, 0.25); display: grid; place-items: end center; transition: transform 0.2s; }
.user__pic img { width: 92%; margin-bottom: -8%; }
.user:hover .user__pic, .user.is-focus .user__pic { transform: scale(1.06); box-shadow: 0 0 0 0.25em var(--bg), 0 0 0 0.5em var(--accent-ring); }
.user__tip { font-size: 1.5em; color: var(--ink-soft); opacity: 0; transform: translateX(-0.4em); transition: opacity 0.2s, transform 0.2s; white-space: nowrap; }
.user:hover .user__tip, .user.is-focus .user__tip, .user.is-in .user__tip { opacity: 1; transform: none; }
.user.is-in .user__tip { color: var(--ink); }
.user__coins { display: inline-flex; align-items: center; gap: 0.25em; margin-left: 0.6em; color: var(--ink-soft); }
.user__coins img { width: 1.05em; height: 1.05em; }

.status { display: flex; align-items: center; gap: 1.6em; }
.status__clock { font-size: 2.15em; font-weight: 600; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.status__wifi { width: 2.1em; height: 2.1em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.status__wifi circle { fill: currentColor; stroke: none; }
.status__batt { position: relative; width: 2.6em; height: 1.35em; border: 0.17em solid currentColor; border-radius: 0.25em; padding: 0.13em; }
.status__batt::after { content: ''; position: absolute; right: -0.42em; top: 0.3em; width: 0.22em; height: 0.5em; background: currentColor; border-radius: 0 0.1em 0.1em 0; }
.status__batt i { display: block; height: 100%; width: var(--batt, 100%); background: currentColor; border-radius: 0.08em; }

/* ---------- Juegos ---------- */
.hm__games { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding-top: 1em; }
.hm__title {
  margin: 0 0 0.55em 3.1em; height: 1.35em; max-width: 42em; overflow: hidden; white-space: nowrap;
  font-size: 2.5em; font-weight: 400; line-height: 1.35; color: var(--accent);
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.row {
  list-style: none; margin: 0; padding: 0.4em 6em 0.8em 7.3em; display: flex; align-items: center; gap: 1.45em;
  overflow-x: auto; overflow-y: visible; scrollbar-width: none; touch-action: pan-y; overscroll-behavior-x: contain;
}
.row.is-dragging { cursor: grabbing; }
.row.is-dragging .tile__btn { pointer-events: none; }
.tile img { -webkit-user-drag: none; user-drag: none; }
.row::-webkit-scrollbar { display: none; }
.tile { flex: none; position: relative; width: 19.1em; aspect-ratio: 1; transition: width 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tile__btn { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.tile__art { position: absolute; inset: 0; overflow: hidden; background: var(--slot); box-shadow: var(--tile-shadow); }
.tile__art img { width: 100%; height: 100%; object-fit: cover; }
/* Seleccionado: más grande, con el marco de color que late */
.tile.is-on { width: 21.5em; }
.tile.is-on .tile__art { inset: 0.42em; }
.tile.is-on::before {
  content: ''; position: absolute; inset: 0; border: 0.34em solid var(--accent-ring); border-radius: 0.15em; pointer-events: none;
  animation: ring 1.6s ease-in-out infinite;
}
.row:not(.is-active) .tile.is-on::before { animation: none; opacity: 0; }
.row:not(.is-active) .tile.is-on { width: 19.1em; }
.row:not(.is-active) .tile.is-on .tile__art { inset: 0; }
@keyframes ring { 50% { border-color: color-mix(in srgb, var(--accent-ring) 45%, #fff); } }
:root[data-theme='dark'] .tile.is-on::before { animation-name: ring-dark; }
@keyframes ring-dark { 50% { border-color: color-mix(in srgb, var(--accent-ring) 55%, #fff); } }
/* Hueco vacío (como en la consola) */
.tile.is-empty .tile__art { background: var(--slot); border: 0.12em solid var(--slot-line); box-shadow: none; display: grid; place-items: center; }
.tile.is-empty img { width: 42%; height: auto; opacity: 0.12; filter: grayscale(1); }
/* Carátula provisional de Sepesca */
.art-sepesca {
  position: absolute; inset: 0; display: grid; place-items: end center; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 0%, #FFB86B 0%, #FF7FA0 38%, transparent 62%), linear-gradient(180deg, #FFB46A 0%, #FF8C8C 42%, #23B5C8 43%, #157C9E 100%);
}
.art-sepesca img { width: 62%; margin-bottom: 6%; position: relative; z-index: 1; }
.art-sepesca b {
  position: absolute; z-index: 2; left: 0; right: 0; top: 9%; text-align: center; font-size: 3.6em; font-weight: 700; color: #fff; letter-spacing: 0.02em;
  text-shadow: 0 0.06em 0 #0B4E66, 0.04em 0.04em 0 #0B4E66, -0.04em 0.04em 0 #0B4E66;
}
.art-sepesca::after { content: ''; position: absolute; left: 0; right: 0; top: 43%; height: 3%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0 6%, transparent 6% 12%); }
.tile__soon { position: absolute; z-index: 3; right: 0.6em; bottom: 0.6em; padding: 0.2em 0.7em; border-radius: 1em; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 1.15em; font-weight: 600; }

/* ---------- Botones redondos ---------- */
.dock { position: relative; display: flex; justify-content: center; gap: 1.95em; padding: 2.4em 0 4.6em; }
.dock__btn {
  width: 6.65em; height: 6.65em; border-radius: 50%; display: grid; place-items: center; background: var(--circle); box-shadow: var(--circle-shadow);
  transition: transform 0.15s, box-shadow 0.15s, background-color 0.35s;
}
.dock__btn svg { width: 3.7em; height: 3.7em; fill: none; stroke: var(--ic); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dock__btn svg .fill { fill: var(--ic); stroke: none; }
.dock__btn.is-on { box-shadow: var(--circle-shadow), 0 0 0 0.28em var(--bg), 0 0 0 0.6em var(--accent-ring); }
.dock__btn:active { transform: scale(0.94); }
.dock__label {
  position: absolute; left: var(--x, 50%); top: calc(var(--u) * 10.1); translate: -50% 0; white-space: nowrap;
  font-size: 1.55em; color: var(--accent); opacity: 0; transition: opacity 0.15s;
}
.dock.is-active .dock__label { opacity: 1; }

/* ---------- Abajo ---------- */
.hm__bar { position: relative; display: flex; align-items: center; justify-content: space-between; margin: 0 2.6em 0 1em; padding: 1.8em 3em 2.8em 3em; border-top: 0.24em solid var(--line); }
.hm__console { width: 5.5em; height: 2.4em; fill: none; stroke: currentColor; stroke-width: 2.2; }
.hm__console .screen { fill: none; }
.hm__console .fill { fill: currentColor; stroke: none; }
/* El peepo que asoma por encima de la raya */
.hm__peepo { position: absolute; left: 9.5em; top: -9.2em; width: 10em; height: 9em; overflow: hidden; pointer-events: none; }
.hm__peepo img { width: 100%; transform: translateY(100%); transform-origin: 50% 100%; animation: peek 7s ease-in-out infinite; filter: drop-shadow(0 0.3em 0.4em rgba(0, 0, 0, 0.25)); }
/* Sube, mira a un lado y al otro, y se vuelve a esconder */
@keyframes peek {
  0%, 12% { transform: translateY(100%) rotate(0); }
  19% { transform: translateY(16%) rotate(-4deg); }
  23% { transform: translateY(22%) rotate(-3deg); }
  36% { transform: translateY(22%) rotate(5deg); }
  50% { transform: translateY(20%) rotate(-2deg); }
  56% { transform: translateY(22%) rotate(0); }
  64%, 100% { transform: translateY(100%) rotate(0); }
}
.hints { display: flex; gap: 3.4em; margin-left: auto; }
.hint { display: inline-flex; align-items: center; gap: 0.55em; font-size: 2.05em; }
.hint__pm { font-weight: 700; letter-spacing: -0.05em; }
.hint__a { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 0.8em; font-weight: 700; }

/* ---------- Aviso ---------- */
.toast {
  position: fixed; left: 50%; bottom: 14vh; translate: -50% 0; margin: 0; padding: 0.8em 1.6em; border-radius: 3em;
  background: var(--ink); color: var(--bg); font-size: max(15px, calc(var(--u) * 1.6)); box-shadow: 0 0.6em 1.4em rgba(0, 0, 0, 0.25);
  opacity: 0; transform: translateY(0.6em); transition: opacity 0.2s, transform 0.25s; pointer-events: none;
}
.toast.is-on { opacity: 1; transform: none; }

/* ---------- Modo reposo ---------- */
.sleep { position: fixed; inset: 0; z-index: 50; background: #000; display: grid; place-items: end center; padding-bottom: 12vh; color: #777; font-size: max(14px, calc(var(--u) * 1.5)); animation: off 0.5s ease both; cursor: pointer; }
.sleep[hidden] { display: none; }
.sleep p { margin: 0; opacity: 0; animation: hint 1s 2s ease forwards; }
@keyframes off { from { opacity: 0; } }
@keyframes hint { to { opacity: 1; } }

/* ---------- Al abrir un juego ---------- */
.launch { position: fixed; z-index: 40; pointer-events: none; opacity: 0; }
.launch img { width: 100%; height: 100%; object-fit: cover; }
.launch.is-go { opacity: 1; transition: left 0.42s cubic-bezier(0.6, 0, 0.3, 1), top 0.42s cubic-bezier(0.6, 0, 0.3, 1), width 0.42s cubic-bezier(0.6, 0, 0.3, 1), height 0.42s cubic-bezier(0.6, 0, 0.3, 1), filter 0.42s; }
.launch.is-fade { filter: brightness(0); }

/* Al entrar: los juegos llegan desde la derecha */
.tile { animation: in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes in { from { opacity: 0; transform: translateX(3em); } }

/* ---------- Móvil en vertical ---------- */
@media (max-aspect-ratio: 1/1) {
  :root { --u: 1.9vw; }
  .hm__top { padding: 5em 5em 0 4em; }
  .hm__title { margin-left: 2.1em; font-size: 3em; }
  .row { padding-left: 5em; padding-right: 5em; scroll-padding-left: 5em; }
  .tile { width: 30em; }
  .tile.is-on { width: 33.5em; }
  .row:not(.is-active) .tile.is-on { width: 30em; }
  .dock { flex-wrap: wrap; gap: 3em; padding: 5em 3em 7em; }
  .dock__btn { width: 10.5em; height: 10.5em; }
  .dock__btn svg { width: 5.6em; height: 5.6em; }
  .dock__label { top: auto; bottom: calc(var(--u) * 2.2); font-size: 2.6em; }
  .hint { font-size: 2.6em; }
  .hints { gap: 2.2em; }
  .hm__bar { padding-left: 2em; padding-right: 2em; }
  .hm__console { display: none; }
  .hm__peepo { left: 4em; width: 13em; height: 11.7em; top: -11.9em; }
  .status__clock { font-size: 3.2em; }
  .status__wifi { width: 3.2em; height: 3.2em; }
  .status__batt { font-size: 1.5em; }
  .user__pic { width: 7em; height: 7em; }
  .user__tip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tile, .hm__peepo img, .tile.is-on::before { animation: none; }
  .launch.is-go { transition: none; }
}

/* ---------- Juegos que aún no están: en gris ---------- */
.tile.is-soon .tile__art img { filter: grayscale(1) contrast(0.9) brightness(1.02); opacity: 0.75; }
:root[data-theme='dark'] .tile.is-soon .tile__art img { filter: grayscale(1) brightness(0.75); opacity: 0.85; }

/* Botones redondos: al pasar el ratón solo se marcan un poco (no cambian la selección) */
.dock__btn:hover:not(.is-on) { box-shadow: var(--circle-shadow), 0 0 0 0.28em var(--bg), 0 0 0 0.6em color-mix(in srgb, var(--accent-ring) 35%, transparent); }

/* ---------- Sonido y volumen (barra por segmentos, como la de la consola) ---------- */
.vol { display: inline-flex; align-items: center; gap: 0.9em; font-size: 2.05em; }
.vol__btn { width: 1.6em; height: 1.6em; display: grid; place-items: center; border-radius: 50%; }
.vol__btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.vol__btn svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vol__spk { fill: currentColor; }
.vol__x { display: none; }
.vol__btn.is-off .vol__waves { display: none; }
.vol__btn.is-off .vol__x { display: inline; }
.vol__bar {
  --v: 70%; -webkit-appearance: none; appearance: none; width: 8.4em; height: 0.75em; margin: 0; cursor: pointer; background: none;
  /* 16 rayitas: rellenas hasta el volumen elegido */
  background: linear-gradient(90deg, var(--ink) var(--v), color-mix(in srgb, var(--ink) 22%, transparent) var(--v));
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(6.25% - 0.12em), transparent calc(6.25% - 0.12em) 6.25%);
  mask: repeating-linear-gradient(90deg, #000 0 calc(6.25% - 0.12em), transparent calc(6.25% - 0.12em) 6.25%);
}
.vol__bar::-webkit-slider-thumb { -webkit-appearance: none; width: 0.1em; height: 0.62em; background: transparent; }
.vol__bar::-moz-range-thumb { width: 0.1em; height: 0.62em; border: 0; background: transparent; }
.vol__bar:focus-visible { outline: 0.1em solid var(--accent-ring); outline-offset: 0.3em; }
.hint__b { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 0.8em; font-weight: 700; }

/* ---------- Ventanas de la consola (misiones, tienda, ranking y logros) ---------- */
.sys {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--bg); color: var(--ink); font-family: inherit; font-size: var(--u);
}
.sys[open] { display: flex; flex-direction: column; animation: sys-in 0.22s ease-out; }
@keyframes sys-in { from { opacity: 0; } }
.sys::backdrop { background: var(--bg); }
.sys__head { display: flex; align-items: center; gap: 1.2em; padding: 2.6em 5em 1.8em 3.6em; border-bottom: 0.2em solid var(--line); }
.sys__icon svg { width: 3.6em; height: 3.6em; fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sys__icon .fill { fill: var(--accent); stroke: none; }
.sys__title { margin: 0; flex: 1; font-size: 2.6em; font-weight: 400; }
.sys__right { display: inline-flex; align-items: center; gap: 0.6em; font-size: 1.7em; color: var(--ink-soft); }
.sys__right img { width: 1.9em; height: 1.9em; border-radius: 50%; object-fit: contain; object-position: 50% 20%; background: radial-gradient(circle at 50% 35%, #8BD36A, #3E8E2C); }
.sys__right b { display: inline-flex; align-items: center; gap: 0.2em; margin-left: 0.6em; color: var(--ink); font-weight: 700; }
.coin { width: 1.05em; height: 1.05em; vertical-align: -0.15em; }
.sys__main { flex: 1; min-height: 0; display: grid; grid-template-columns: 26em minmax(0, 1fr); }
.sys__nav { padding: 1.4em 0 1.4em 3.2em; border-right: 0.12em solid var(--slot-line); overflow-y: auto; display: flex; flex-direction: column; gap: 0.3em; }
.sys__item {
  display: flex; align-items: center; gap: 1em; padding: 1em 1.2em; margin-right: 1.6em; border-radius: 0.4em; text-align: left;
  font-size: 1.75em; color: var(--ink); position: relative;
}
.sys__item img { width: 2.2em; height: 2.2em; border-radius: 0.25em; object-fit: cover; }
.sys__item small { margin-left: auto; font-size: 0.65em; color: var(--ink-soft); }
.sys__item.is-soon img { filter: grayscale(1); opacity: 0.7; }
.sys__item:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.sys__item.is-on { color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.sys__item.is-on::before { content: ''; position: absolute; left: -0.6em; top: 20%; bottom: 20%; width: 0.22em; border-radius: 1em; background: var(--accent); }
.sys__body { overflow-y: auto; padding: 2.2em 5em 3em 3.4em; font-size: 1.45em; line-height: 1.45; }
.sys__lead { margin: 0 0 1.2em; color: var(--ink-soft); }
.sys__note { margin: 1.2em 0 0; color: var(--ink-soft); font-size: 0.9em; }
.sys__empty { color: var(--ink-soft); }
.sys__bar { display: flex; align-items: center; justify-content: space-between; margin: 0 2.6em 0 1em; padding: 1.6em 3em 2.4em; border-top: 0.24em solid var(--line); }
.sys__bar .hint { font-size: 2.05em; }
.sys__msg { font-size: 1.7em; color: var(--accent); }
.sys__btn { padding: 0.5em 1.2em; border-radius: 2em; background: var(--accent); color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: 0.3em; }
.sys__btn.is-soft { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.sys__btn:disabled { opacity: 0.5; }
.sys__login { display: flex; flex-wrap: wrap; align-items: center; gap: 1em 1.4em; padding: 1.1em 1.4em; margin: 0 0 1.4em; border-radius: 0.6em; background: color-mix(in srgb, var(--accent) 9%, transparent); }
.sys__login p { margin: 0; flex: 1 1 18em; }
.sys__soon { display: flex; align-items: center; gap: 1.6em; color: var(--ink-soft); }
.sys__soon img { width: 9em; height: 9em; object-fit: cover; filter: grayscale(1); opacity: 0.7; border-radius: 0.3em; }
.sys__tabs { display: flex; gap: 0.4em; margin: 0 0 1.4em; border-bottom: 0.12em solid var(--slot-line); }
.sys__tabs button { padding: 0.5em 1em; border-bottom: 0.18em solid transparent; margin-bottom: -0.12em; color: var(--ink-soft); }
.sys__tabs button[aria-selected='true'] { color: var(--accent); border-bottom-color: var(--accent); }

/* Misiones */
.mis-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6em; }
.mis { display: grid; grid-template-columns: 6em minmax(0, 1fr) auto; gap: 1.2em; align-items: center; padding: 1em 1.2em; border-radius: 0.5em; background: var(--circle); box-shadow: var(--tile-shadow); }
.mis__lvl { font-size: 0.8em; font-weight: 700; text-align: center; padding: 0.3em 0; border-radius: 2em; color: #fff; }
.mis__lvl.is-1 { background: #3FB34F; }
.mis__lvl.is-2 { background: #F5A300; }
.mis__lvl.is-3 { background: #E60012; }
.mis__txt small { display: block; color: var(--ink-soft); font-size: 0.8em; }
.mis__bar { display: block; height: 0.3em; margin-top: 0.4em; border-radius: 1em; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.mis__bar i { display: block; height: 100%; background: var(--accent); }
.mis__rew { display: inline-flex; align-items: center; gap: 0.25em; font-weight: 700; white-space: nowrap; }
.mis.is-done { opacity: 0.6; }
.mis.is-done .mis__txt { text-decoration: line-through; }

/* Tienda */
.sk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5em, 1fr)); gap: 0.9em; }
.sk { display: grid; justify-items: center; gap: 0.15em; padding: 0.9em 0.6em 1em; border-radius: 0.6em; background: var(--circle); box-shadow: var(--tile-shadow); text-align: center; border-top: 0.3em solid var(--slot-line); }
.sk__pic { width: 6.5em; height: 6.5em; display: grid; place-items: center; }
.sk__pic img { width: 100%; height: 100%; object-fit: contain; }
.sk small { color: var(--ink-soft); font-size: 0.8em; }
.sk__act { margin-top: 0.4em; font-size: 0.9em; font-weight: 700; }
.sk__on { color: var(--accent); }
.sk__no { color: var(--ink-soft); font-weight: 600; }
.sk.is-on { box-shadow: 0 0 0 0.22em var(--accent-ring), var(--tile-shadow); }
.sk.is-comun { border-top-color: #9DB6C9; }
.sk.is-rara { border-top-color: #3B82D6; }
.sk.is-epica { border-top-color: #A45BD6; }
.sk.is-legendaria { border-top-color: #F2A93B; }
.sk.is-exclusiva { border-top-color: #6FA8DC; }

/* Ranking */
.rk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35em; }
.rk { display: grid; grid-template-columns: 2.4em 2.6em minmax(0, 1fr) auto auto auto; gap: 1em; align-items: center; padding: 0.5em 1em; border-radius: 0.5em; background: var(--circle); }
.rk__pos { text-align: right; font-weight: 700; color: var(--ink-soft); }
.rk__pic img { width: 2.6em; height: 2.6em; object-fit: contain; }
.rk__name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk__n { white-space: nowrap; font-size: 0.9em; color: var(--ink-soft); }
.rk__n b { color: var(--ink); }
.rk__n.is-dim { opacity: 0.8; }
.rk.is-top .rk__pos { color: var(--accent); }
.rk.is-1 { box-shadow: inset 0.25em 0 0 #F2B705; }
.rk.is-2 { box-shadow: inset 0.25em 0 0 #B8C2CC; }
.rk.is-3 { box-shadow: inset 0.25em 0 0 #C8833F; }
.rk.is-me { outline: 0.15em solid var(--accent-ring); }

/* Logros */
.lg-plat { display: flex; align-items: center; gap: 1.2em; padding: 1em 1.2em; border-radius: 0.6em; background: var(--circle); box-shadow: var(--tile-shadow); margin-bottom: 0.6em; }
.lg-plat img { width: 4.6em; height: 4.6em; object-fit: contain; filter: grayscale(1); opacity: 0.6; }
.lg-plat.is-done img { filter: none; opacity: 1; }
.lg-plat > span { flex: 1; }
.lg-plat small, .lg small { display: block; color: var(--ink-soft); font-size: 0.82em; }
.lg-h { margin: 1.2em 0 0.5em; font-size: 1em; font-weight: 700; color: var(--ink-soft); }
.lg-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17em, 1fr)); gap: 0.6em; }
.lg { display: grid; grid-template-columns: 2.8em minmax(0, 1fr); gap: 0.8em; align-items: start; padding: 0.7em 0.9em; border-radius: 0.5em; background: var(--circle); }
.lg img { width: 2.8em; height: 2.8em; object-fit: contain; filter: grayscale(1); opacity: 0.45; }
.lg.is-done img { filter: none; opacity: 1; }
/* Los logros de Sepesca llevan el emoji del juego en vez de trofeo */
.lg__emoji { display: grid; place-items: center; width: 1.9em; height: 1.9em; font-size: 1.45em; line-height: 1; filter: grayscale(1); opacity: 0.45; }
.lg.is-done .lg__emoji { filter: none; opacity: 1; }
.lg:not(.is-done) b { color: var(--ink-soft); }

@media (max-aspect-ratio: 1/1) {
  .vol { font-size: 2.6em; }
  .vol__bar { width: 5.6em; }
  .sys { font-size: 2.1vw; }
  .sys__head { padding: 4em 3em 2em; }
  .sys__right { display: none; }
  .sys__main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .sys__nav { flex-direction: row; overflow-x: auto; padding: 1em 2em; border-right: 0; border-bottom: 0.12em solid var(--slot-line); }
  .sys__item { margin-right: 0; white-space: nowrap; font-size: 2.4em; }
  .sys__item.is-on::before { left: 20%; right: 20%; top: auto; bottom: 0; width: auto; height: 0.15em; }
  .sys__body { padding: 2em 3em 3em; font-size: 2.6em; }
  .rk { grid-template-columns: 2em 2.4em minmax(0, 1fr) auto; }
  .rk__n:nth-of-type(n + 2) { display: none; }
  .sys__bar .hint { font-size: 2.8em; }
}

/* Nombre del botón al pasar el ratón, en pequeño encima */
.dock__btn { position: relative; }
.dock__btn::before {
  content: attr(data-label); position: absolute; left: 50%; bottom: calc(100% + 0.9em); translate: -50% 0.3em; z-index: 5;
  padding: 0.35em 0.8em; border-radius: 0.45em; background: var(--ink); color: var(--bg); font-size: 1.3em; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.15s, translate 0.15s;
}
.dock__btn:hover::before { opacity: 1; translate: -50% 0; }
@media (hover: none) { .dock__btn::before { display: none; } }

/* ---------- Monedas del perfil alineadas con el nombre ---------- */
.user__tip { display: inline-flex; align-items: center; }
.user__coins { line-height: 1; }
.user__coins img { display: block; }

/* ---------- ¿Está Zeling en directo? (junto a la hora) ---------- */
.onair { display: inline-flex; align-items: center; gap: 0.5em; margin-right: 0.6em; font-size: 1.45em; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.onair[hidden] { display: none; }
.onair i { width: 0.6em; height: 0.6em; border-radius: 50%; background: color-mix(in srgb, var(--ink) 35%, transparent); }
.onair.is-live { color: var(--ink); }
.onair.is-live i { background: #EB0400; box-shadow: 0 0 0 0 rgba(235, 4, 0, 0.6); animation: onair 1.8s ease-out infinite; }
.onair:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
@keyframes onair { 70% { box-shadow: 0 0 0 0.45em rgba(235, 4, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(235, 4, 0, 0); } }

/* ---------- Botones un poco a la izquierda para dejar sitio al chat ---------- */
.dock { padding-right: 33em; }

/* ---------- Chat de Twitch: sin caja, como en los directos ---------- */
/* Los mensajes entran por abajo y se desvanecen solos; arriba se apagan poco a poco */
.tchat {
  position: absolute; z-index: 2; right: 3.6em; bottom: 8.1em; width: 26em; height: 14.5em;
  display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none;
}
.tchat__list {
  margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.25em;
  min-height: 0; flex: 1; overflow: hidden; font-size: 1.3em; line-height: 1.35;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 35%); mask-image: linear-gradient(180deg, transparent 0, #000 35%);
}
.tmsg { flex: none; overflow-wrap: anywhere; animation: tmsg-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); transition: opacity 0.9s, transform 0.9s; }
.tmsg.is-quiet { animation: none; }
.tmsg.is-gone { opacity: 0; transform: translateX(0.6em); }
@keyframes tmsg-in { from { opacity: 0; transform: translateY(0.8em); } }
.tmsg__badges { display: inline; }
.tmsg__badge { display: inline-block; width: 1.05em; height: 1.05em; margin-right: 0.22em; vertical-align: -0.17em; }
.tmsg__name { font-weight: 800; }
/* Pintura de 7TV recortada al nombre */
.tmsg__name.is-painted { background-size: cover; background-position: center; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tmsg__text { color: var(--ink); }
.tmsg__emote { display: inline-block; height: 1.6em; width: auto; margin: -0.3em 0.08em; vertical-align: middle; }
.tchat__head { display: flex; align-items: center; gap: 0.4em; margin: 0.5em 0 0; font-size: 1.1em; color: var(--ink-soft); }
.tchat__head svg { width: 1.1em; height: 1.1em; fill: #9146FF; }
.tchat__head b { color: var(--ink-soft); font-weight: 700; }
/* Botones un poco a la izquierda; el chat ya no tiene caja, así que no hace falta tanto */
.dock { padding-right: 24em; }
/* El peepo que asoma, en la esquina, donde no tapa ningún botón */
.hm__peepo { left: 1.5em; }

/* Pantallas no tan anchas: el chat más estrecho */
@media (max-aspect-ratio: 3/2) and (min-aspect-ratio: 1/1) {
  .dock { padding-right: 22em; gap: 1.5em; }
  .tchat { width: 21em; }
}

/* ---------- Móvil en vertical: el chat debajo de los botones ---------- */
@media (max-aspect-ratio: 1/1) {
  body { overflow-y: auto; }
  .hm { height: auto; min-height: 100dvh; }
  .dock { padding-right: 3em; }
  .status { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.8em; }
  .onair { order: 9; flex-basis: 100%; justify-content: flex-end; margin: 0; font-size: 2.2em; }
  .onair span { max-width: 26ch; overflow: hidden; text-overflow: ellipsis; }
  .tchat { position: relative; right: auto; bottom: auto; width: auto; height: 30em; margin: 0 4em 3em; }
  .tchat__list { font-size: 2.3em; }
  .tchat__head { font-size: 2em; }
}

/* =====================================================================
   Distribución final: arriba / juegos / botones y chat / barra.
   Los botones siempre en el centro exacto; el chat usa todo el alto libre a su derecha.
   El espacio que sobra en pantallas altas se reparte entre los juegos y la parte de abajo.
   ===================================================================== */
.hm { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(min-content, 1fr) auto auto; }
/* Carátulas: en pantallas menos panorámicas que 16:9 crecen con la altura que sobra (como en la consola),
   en vez de dejar un hueco vacío entre los juegos y los botones */
@media (min-aspect-ratio: 1/1) {
  :root { --tile: clamp(calc(var(--u) * 19.1), calc(var(--u) * 19.1 + (100dvh - 56.25vw) * 0.62), calc(var(--u) * 33)); }
  .tile, .row:not(.is-active) .tile.is-on { width: var(--tile); }
  .tile.is-on { width: calc(var(--tile) * 1.1257); }
}
.hm__games { flex: none; display: flex; flex-direction: column; justify-content: center; padding-top: 0.8em; }
.lower { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: 0; padding: 0.8em 3.6em 1.2em 3.6em; }
.dock { grid-column: 2; padding: 0 0 3.4em; }
.dock__label { top: calc(var(--u) * 7.6); }
.tchat { grid-column: 3; position: relative; right: auto; bottom: auto; width: auto; height: auto; min-height: 0; overflow: hidden; margin-left: 2.6em; align-self: stretch; }

/* Tres columnas iguales: peepo | botones | chat. El peepo asoma desde la raya, centrado en la suya */
.lower { position: relative; }
.lower > .hm__peepo { position: relative; grid-column: 1; grid-row: 1; align-self: stretch; left: auto; top: auto; width: auto; height: auto; min-height: 0; margin: -0.8em 2.6em -1.2em 0; }
.lower > .hm__peepo img { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; width: auto; height: 100%; max-width: 100%; object-fit: contain; object-position: 50% 100%; }

/* La fila de juegos reserva siempre el alto de la carátula seleccionada (que es algo más grande),
   así al seleccionar o pinchar un juego no se mueve nada de lo de abajo */
@media (min-aspect-ratio: 1/1) { .row { height: calc(var(--tile) * 1.1257 + 1.2em); } }

/* Tema claro: los nombres con colores claros o pinturas de 7TV llevan un borde suave para que se lean */
:root:not([data-theme='dark']) .tmsg__name:not(.is-painted) { text-shadow: 0 0 0.06em rgba(0, 0, 0, 0.55), 0 0.04em 0.08em rgba(0, 0, 0, 0.35); }
:root:not([data-theme='dark']) .tmsg__name.is-painted { filter: drop-shadow(0 0 0.04em rgba(0, 0, 0, 0.85)) drop-shadow(0 0.04em 0.05em rgba(0, 0, 0, 0.5)) !important; }

/* Móvil en vertical: todo seguido, el chat debajo de los botones */
@media (max-aspect-ratio: 1/1) {
  .hm { display: flex; flex-direction: column; }
  .lower { display: flex; flex-direction: column; padding: 0; }
  .dock { padding: 5em 3em 7em; }
  .tchat { margin: 0 4em 3em; height: 30em; }
  .row { height: 34.7em; }
  .lower > .hm__peepo { order: 9; flex: none; align-self: flex-start; left: auto; top: auto; width: 13em; height: 11.7em; margin: -1em 0 0 4em; }
  /* Arriba: sin el nombre (no cabe) y el aviso del directo recortado, para que nada se salga */
  .user__tip { display: none; }
  .status { flex: 1; min-width: 0; }
  .onair { min-width: 0; max-width: 100%; }
  .onair span { min-width: 0; max-width: none; flex: 0 1 auto; }
}

/* Etiqueta de las carátulas que no son juegos (Chattrix: estadísticas del canal) */
.tile__tag { background: rgba(236, 72, 153, 0.92); }