/* ═══════════════════════════════════════════════════════════════════════
   Cabezones — amigos (pestañas de la pantalla Amigos, rivales recientes e
   invitaciones), eventos especiales (tarjeta del inicio, pantalla, búsqueda,
   presentación y resultado), modo sin conexión, privacidad y borrar la cuenta,
   marcos de retrato de los logros y rivales del cuadro del torneo.
   Usa los tokens y componentes de main.css y ui.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Modo sin conexión ── */
/* Lo que necesita el servidor sale apagado; al tocarlo avisa (offline.js). */
:root[data-offline] [data-needs-net] { filter: grayscale(.85) brightness(.78); }
:root[data-offline] .tile[data-needs-net]::after,
:root[data-offline] .play-btn[data-needs-net]::after {
  content: ''; position: absolute; z-index: 3; top: -.45rem; right: -.45rem; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: #2c3a42 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 12.5a17 17 0 0 1 24 0M8.2 16.8a11 11 0 0 1 15.6 0M12.4 21a5 5 0 0 1 7.2 0' fill='none' stroke='%23c8d2ea' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='25.4' r='2.4' fill='%23c8d2ea'/%3E%3Cpath d='M6 5.5 26 27' stroke='%23ff5a4a' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 72% no-repeat;
  border: 2px solid var(--ink); box-shadow: 0 2px 0 rgba(0,0,0,.4); filter: none;
}
:root[data-offline] .play-btn[data-needs-net]::after { top: .3rem; right: .45rem; width: 2rem; height: 2rem; animation: none; background-color: #2c3a42; transform: none; }
:root[data-offline] .play-wrap .play-glow { display: none; }
:root[data-offline] .play-btn.pulse { animation: none; }
/* Aviso «Sin conexión» (se toca para reintentar ya) */
.status-banner.is-offline {
  cursor: pointer; gap: .45rem; padding: .3rem .5rem .3rem .7rem;
  background: linear-gradient(180deg, #4d5d66 0 50%, #33424b 50% 100%); border-color: #120a05; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.35), 0 3px 0 #120a05, 0 10px 20px rgba(0,0,0,.35);
  -webkit-text-stroke-color: #120a05;
}
.status-banner .sb-ico { width: 1.5rem; height: 1.5rem; display: grid; place-items: center; }
.status-banner .sb-ico .ico { width: 100%; height: 100%; }
.status-banner .sb-retry { font-size: .82rem; padding: .08rem .6rem .12rem; border-radius: 999px; background: linear-gradient(180deg, #52c4ff 0 50%, #1a8df2 50% 100%); border: 1.5px solid var(--ink); -webkit-text-stroke-color: #06224d; }
:root[data-leaving] .status-banner { display: none !important; }

/* ── Tarjeta del evento (inicio) ── */
.ev-banner-host { display: flex; }
.ev-banner {
  --ev1: #ff9a1f; --ev2: #9c3ee6;
  position: relative; width: 10.4rem; height: 100%; padding: .35rem .5rem .4rem; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: .35rem; align-items: center;
  border-radius: 16px; border: 2.5px solid var(--ink); text-align: left;
  background: linear-gradient(145deg, var(--ev1), var(--ev2));
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -5px 0 rgba(0,0,0,.25), 0 3px 0 var(--ink), 0 8px 14px rgba(0,0,0,.3);
  transition: transform .07s; isolation: isolate;
}
.ev-banner::before {  /* rayos que giran detrás del icono */
  content: ''; position: absolute; z-index: -1; left: -30%; top: -40%; width: 110%; aspect-ratio: 1;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.22) 0 10deg, transparent 10deg 26deg);
  -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 62%); mask-image: radial-gradient(circle, #000 12%, transparent 62%);
  animation: spin 14s linear infinite; pointer-events: none;
}
.ev-banner:active { transform: translateY(3px); }
.ev-banner-tag {
  grid-column: 1 / -1; justify-self: start; padding: .02rem .5rem .06rem; border-radius: 999px;
  font-family: var(--font-title); font-size: max(11px, .72rem); letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(180deg, #ffe24a 0 50%, #ffae0a 50% 100%); color: #fff; border: 1.5px solid var(--ink); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.6), 0 1.5px 0 var(--ink);
  -webkit-text-stroke: .2em #4d2400; paint-order: stroke fill;
}
.ev-ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.ev-ico .ico { width: 100%; height: 100%; }
.ev-banner-ico { grid-row: 2; animation: float 2.2s ease-in-out infinite; }
.ev-banner-name {
  grid-row: 2; font-size: 1rem; line-height: 1.05; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ev-banner-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: .3rem; }
.ev-banner-time { display: inline-flex; align-items: center; gap: .2rem; padding: .02rem .45rem; border-radius: 999px; background: var(--well); -webkit-text-stroke: .2em var(--ink); paint-order: stroke fill;
  font-family: var(--font-title); font-size: max(11px, .76rem); white-space: nowrap; }
.ev-banner-time .ico { width: 1em; height: 1em; }
.ev-banner-time b { font-weight: 400; }
.ev-banner-done { display: inline-flex; align-items: center; gap: .15rem; font-family: var(--font-title); font-size: max(11px, .76rem); color: #d4ffb0; }
.ev-banner-done .ico { width: 1.1em; height: 1.1em; }
.ev-pips { display: inline-flex; gap: .2rem; }
.ev-pips i { width: .8rem; height: .8rem; border-radius: 50%; background: rgba(10,8,7,.55); border: 2px solid var(--ink); }
.ev-pips i.on { background: radial-gradient(circle at 35% 30%, #fff6b8, #ffc83a 60%, #d98a00); box-shadow: 0 0 6px rgba(255,210,60,.8); }

/* ── Pantalla del evento ── */
.ev-screen { --ev1: #ff9a1f; --ev2: #9c3ee6; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ev-head-time { justify-self: end; display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .7rem; border-radius: 999px; background: var(--well); border: 1.5px solid var(--ink); -webkit-text-stroke: .2em var(--ink); paint-order: stroke fill;
  font-family: var(--font-title); font-size: 1rem; white-space: nowrap; }
.ev-head-time .ico { width: 1.1em; height: 1.1em; }
.ev-head-time b { font-weight: 400; }
.ev-screen .screen-head { grid-template-columns: 48px 1fr auto; }
.ev-body { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-auto-rows: max-content; align-content: start; gap: 1rem 1.2rem; padding: .4rem var(--gutter) 1rem; align-items: stretch; }
.ev-hero {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 1.1rem 1.1rem; border-radius: var(--r-lg); border: 2.5px solid var(--ink); text-align: center;
  background: linear-gradient(160deg, var(--ev1), var(--ev2));
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 0 0 1.5px rgba(255,255,255,.2), inset 0 -10px 18px rgba(0,0,0,.25), 0 3px 0 var(--ink), 0 14px 26px rgba(0,0,0,.35);
}
.ev-hero-rays { position: absolute; z-index: -1; left: 50%; top: 34%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.2) 0 8deg, transparent 8deg 22deg);
  -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 52%); mask-image: radial-gradient(circle, #000 8%, transparent 52%);
  animation: spin-c 30s linear infinite; pointer-events: none; }
.ev-today { position: absolute; top: .7rem; left: .8rem; padding: .08rem .7rem .14rem; border-radius: 999px; font-size: .9rem; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; background: linear-gradient(180deg, #ffe24a 0 50%, #ffae0a 50% 100%); border: 1.5px solid var(--ink); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.6), 0 2px 0 var(--ink); -webkit-text-stroke: .2em #4d2400; paint-order: stroke fill; text-shadow: none; transform: rotate(-4deg); }
.ev-hero-ico { width: 7rem; height: 7rem; animation: float 2.4s ease-in-out infinite; }
.ev-hero-text { min-width: 0; }
.ev-name { margin: 0; font-size: 2.8rem; line-height: 1.05; color: var(--title); --sc: var(--title-ink); --sw: .2em; --sd: .09em; }
.ev-desc { margin: .35rem auto 0; max-width: 30rem; font-weight: 800; font-size: 1.05rem; line-height: 1.35; color: #fff;
  --sc: rgba(10,8,7,.6); text-shadow: 0 1.5px 0 var(--sc); }
.ev-rules { width: 100%; list-style: none; margin: .2rem 0 0; padding: .5rem .6rem; display: grid; gap: .4rem; border-radius: var(--r-md); background: var(--well); border: 1.5px solid var(--ink); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12), inset 0 3px 7px rgba(0,0,0,.45); text-align: left; }
.ev-rules li { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1rem; line-height: 1.25; }
.ev-rule-ico { width: 2rem; height: 2rem; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.14); }
.ev-rule-ico .ico { width: 78%; height: 78%; }
.ev-side { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.ev-prize { padding: .8rem .9rem; display: flex; flex-direction: column; gap: .5rem; }
.ev-prize-title { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: 1.3rem; }
.ev-prize-title .ico { width: 1.6rem; height: 1.6rem; }
.ev-prize-row { margin: 0; font-weight: 800; display: flex; align-items: center; gap: .4rem; }
.ev-prize-row .amount { font-size: 1.2rem; }
.ev-track { display: flex; align-items: center; justify-content: center; padding: .2rem 0; }
.ev-step { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--well); box-shadow: inset 0 3px 6px rgba(0,0,0,.5); font-size: 1.2rem; }
.ev-step.on { background: radial-gradient(ellipse 72% 58% at 50% 32%, #c2f73e 0%, #c2f73e 42%, #6fd51a 100%); box-shadow: inset 0 -3px 0 #3c9a08, 0 0 12px rgba(170,255,60,.6); }
.ev-step-link { flex: 1 1 1rem; max-width: 2.6rem; height: .45rem; background: rgba(190,232,242,.35); border-block: 2px solid var(--ink); }
.ev-step-pack { position: relative; width: 3.3rem; flex: none; filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); animation: pack-bob 1.4s ease-in-out infinite; }
.ev-step-pack .pack-art, .ev-step-pack > .ico { width: 100%; height: auto; }
.ev-step-pack.claimed { animation: none; filter: saturate(.5) drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
.ev-step-check { position: absolute; inset: 0; display: grid; place-items: center; }
.ev-step-check .ico { width: 62%; height: 62%; }
.ev-prize-note { margin: 0; font-weight: 700; font-size: .92rem; line-height: 1.35; }
.ev-prize-note b { color: #fff; }
.ev-actions { display: flex; gap: .7rem; align-items: stretch; flex-wrap: wrap; }
.ev-actions .btn { flex: 1 1 10rem; }
.ev-play { flex-direction: column; gap: 0; }
.ev-play .t-title { font-size: 1.9rem; line-height: 1; letter-spacing: .05em; }
.ev-actions .ev-practice .ico { width: 1.5em; height: 1.5em; }
.ev-next { --ev1: #ff9a1f; --ev2: #9c3ee6; display: flex; align-items: center; gap: .6rem; padding: .45rem .8rem .45rem .5rem; border-radius: 16px; border: 1.5px solid var(--ink);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ev1) 35%, rgba(24,20,19,.9)), color-mix(in srgb, var(--ev2) 35%, rgba(24,20,19,.9))); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), 0 .3rem .6rem rgba(0,0,0,.3); }
.ev-next-ico { width: 2.4rem; height: 2.4rem; }
.ev-next-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.ev-next-text small { font-weight: 800; font-size: max(11px, .76rem); text-transform: uppercase; letter-spacing: .05em; }
.ev-next-text b { font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-next-time { display: inline-flex; align-items: center; gap: .25rem; padding: .08rem .55rem; border-radius: 999px; background: var(--well); font-family: var(--font-title); font-size: .95rem; white-space: nowrap; -webkit-text-stroke: .2em var(--ink); paint-order: stroke fill; }
.ev-next-time .ico { width: 1em; height: 1em; }
.ev-next-time b { font-weight: 400; }

/* Búsqueda de rival, presentación y resultado de un evento */
.mm-event { background: linear-gradient(135deg, var(--ev1), var(--ev2)); border-color: var(--ink); padding: .15rem .9rem .15rem .25rem; }
.mm-event .ev-ico { width: 2.2rem; height: 2.2rem; }
.vs-foot-event { background: linear-gradient(135deg, color-mix(in srgb, var(--ev1) 70%, #050828), color-mix(in srgb, var(--ev2) 70%, #050828)); padding-left: .5rem; }
.vs-ev-ico { width: 2.8rem; height: 2.8rem; }
.vs-rules { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .15rem; }
.vs-rules span { font-weight: 800; font-size: max(11px, .72rem); padding: 0 .45rem; border-radius: 999px; background: rgba(255,255,255,.18); white-space: nowrap; }
.rw-event { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .3rem .9rem; border-radius: 999px; background: rgba(70,20,110,.8); border: 1.5px solid var(--ink); font-weight: 800; font-size: .92rem; }
.rw-event b { color: var(--gold-2); }

/* ── Pantalla Amigos: pestañas (en la cabecera, en lugar de la cinta del título) ── */
.room-head .room-tabs { justify-self: center; }
.room-tabs .seg-btn { display: inline-flex; align-items: center; gap: .4rem; min-width: 7.5rem; justify-content: center; }
.room-tabs .seg-btn .ico { width: 1.35em; height: 1.35em; }
.room-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.room-pane > .room-menu { flex: 1; }

/* Amigos y recientes */
.fr { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(15rem, 32%) minmax(0, 1fr); gap: .9rem 1.1rem; padding: .2rem var(--gutter) .8rem; }
.fr.fr-recent { grid-template-columns: minmax(0, 1fr); width: min(100%, 52rem); align-self: center; }
.fr-side { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.fr-main { min-height: 0; display: flex; flex-direction: column; }
.fr-code-card { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .7rem .8rem .8rem; text-align: center; }
.fr-code-label { font-weight: 800; font-size: .9rem; }
.fr-code {
  padding: .2rem .9rem .3rem; border-radius: 14px; background: var(--well); border: 2.5px dashed rgba(255,255,255,.35);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: .1em; color: var(--title); --sc: var(--title-ink); white-space: nowrap;
  -webkit-user-select: text; user-select: text;
}
.fr-code-acts { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.fr-add { display: flex; flex-direction: column; gap: .45rem; padding: .7rem .8rem; }
.fr-add-label { display: flex; align-items: center; gap: .4rem; font-size: 1.1rem; }
.fr-add-label .ico { width: 1.7rem; height: 1.7rem; }
.fr-add-row { display: flex; gap: .5rem; }
.fr-add-input { flex: 1; min-width: 0; text-align: center; letter-spacing: .12em; text-transform: uppercase; font-size: 1.25rem; }
.fr-add-row .btn { flex: none; }
.fr-list-wrap { flex: 1; min-height: 0; padding: .1rem .1rem .4rem; }
.fr-sec { display: flex; align-items: baseline; gap: .5rem; margin: .5rem 0 .4rem; font-size: 1.3rem; color: var(--title); --sc: var(--title-ink); }
.fr-sec:first-child { margin-top: .1rem; }
.fr-sec small { font: 700 .82rem var(--font-body); }
.fr-count { font-size: .9rem; padding: 0 .45rem; border-radius: 8px; background: var(--well); color: #fff; --sc: var(--ink); }
.fr-lead { margin: .1rem 0 .5rem; text-align: center; font-weight: 800; font-size: .92rem; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.75), 0 0 6px rgba(0,0,0,.55); }
.fr-empty { margin: 1.4rem .6rem; text-align: center; font-weight: 700; line-height: 1.4; }
.fr-empty b { color: #fff; }
.fr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.fr-row {
  position: relative; display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; align-items: center; gap: .6rem;
  min-height: 3.4rem; padding: .3rem .5rem .3rem .35rem; border-radius: 14px; cursor: pointer;
  background: rgba(24, 20, 19, .84); border: 1.5px solid var(--ink);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12);
}
.fr-row:hover { filter: brightness(1.1); }
.fr-req { cursor: default; }
.fr-req.is-in { background: linear-gradient(90deg, rgba(170,110,15,.92), rgba(24,20,19,.88)); box-shadow: inset 0 0 0 2px rgba(255,210,58,.6); }
.fr-avatar { --kit: #1f6a7c; position: relative; width: 2.9rem; height: 2.9rem; border-radius: 12px; overflow: hidden; border: 2px solid var(--ink);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--kit) 50%, #fff), var(--kit) 50%, color-mix(in srgb, var(--kit) 50%, #000)); display: grid; place-items: center; }
.fr-avatar canvas { width: 100%; height: 100%; }
.fr-initial { font-size: 1.5rem; }
.fr-dot { position: absolute; left: 2.55rem; top: 50%; margin-top: .55rem; width: .95rem; height: .95rem; border-radius: 50%; border: 2px solid var(--ink); background: #6c7897; }
.fr-row.is-online .fr-dot { background: radial-gradient(circle at 35% 30%, #d4ffb0, #3fbd1c 70%); box-shadow: 0 0 8px rgba(120,255,90,.8); }
.fr-who { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.fr-nick-row { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.fr-nick-row .flag-canvas { width: 1.7rem; height: auto; }
.fr-nick { font-family: var(--font-title); font-size: 1.05rem; -webkit-text-stroke: .2em var(--ink); paint-order: stroke fill; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-meta { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: max(11px, .8rem); color: var(--text-dim); white-space: nowrap; overflow: hidden; }
.fr-meta .amount { color: #fff; font-size: .9rem; }
.fr-meta .amount .ico { width: 1.1em; height: 1.1em; }
.fr-state { overflow: hidden; text-overflow: ellipsis; }
.fr-row.is-online .fr-state { color: #c3fb0e; }
.level-badge.lvl-xs { width: 1.55rem; height: 1.55rem; }
.level-badge.lvl-xs b { font-size: max(10px, .72rem); }
.fr-acts { display: flex; align-items: center; gap: .4rem; }
.fr-acts .btn { margin-bottom: 3px; }
.fr-acts .btn[disabled] { opacity: .55; }
.fr-x { width: 40px; height: 40px; }
.fr-x::after { content: ''; position: absolute; inset: -3px; }
.fr-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .7rem .2rem; border-radius: 999px; font-family: var(--font-title); font-size: .92rem; white-space: nowrap;
  background: var(--well); border: 1.5px solid var(--ink); color: #d6e3ea; }
.fr-chip .ico { width: 1.15em; height: 1.15em; }
.fr-chip.is-friend { background: linear-gradient(180deg, #c3fb0e 0 50%, #63dc05 50% 100%); color: #fff; border-color: var(--ink); -webkit-text-stroke: .2em #173f00; paint-order: stroke fill; }

/* Invitación que llega */
#invite-layer { position: fixed; z-index: 92; left: 50%; top: calc(var(--safe-t) + var(--top-h) + 8px); transform: translateX(-50%);
  width: min(calc(100vw - 24px - var(--safe-l) - var(--safe-r)), 34rem); display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.inv-card {
  pointer-events: auto; position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem;
  padding: .55rem .7rem .7rem; border-radius: 18px; border: 2.5px solid var(--ink);
  background: linear-gradient(180deg, #ffb14a 0 50%, #ff7417 50% 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.65), inset 0 -4px 0 #c24a06, 0 3px 0 var(--ink), 0 14px 26px rgba(0,0,0,.4);
  animation: toast-in .45s cubic-bezier(.2,1.5,.4,1) both, inv-shake .5s .5s ease-in-out;
}
.inv-card.out { animation: toast-out .25s ease-in both; }
@keyframes inv-shake { 0%, 100% { transform: none; } 25% { transform: rotate(-1.5deg); } 75% { transform: rotate(1.5deg); } }
.inv-ico { width: 2.8rem; height: 2.8rem; animation: wiggle 1.2s ease-in-out .8s infinite; }
.inv-ico .ico { width: 100%; height: 100%; }
.inv-text { display: flex; flex-direction: column; min-width: 0; --sc: #561a00; }
.inv-text > b { font-size: 1.15rem; line-height: 1.1; }
.inv-from { display: flex; align-items: center; gap: .35rem; font-weight: 800; font-size: .92rem; line-height: 1.3; text-shadow: 0 1.5px 0 var(--sc); }
.inv-from .flag-canvas { width: 1.6rem; height: auto; }
.inv-from b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9rem; }
.inv-acts { display: flex; flex-direction: column; gap: .15rem; }
.inv-acts .btn { min-height: 38px; padding-block: .15em .3em; }
.inv-time { position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: #ffe24a; transform-origin: left; animation: inv-time linear forwards; }
@keyframes inv-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ── Privacidad y borrar la cuenta ── */
.set-danger { padding-top: .6rem; border-top: 2px dashed rgba(255,140,120,.35); }
.privacy-wrap { display: flex; flex-direction: column; gap: .7rem; min-height: 0; }
.privacy-frame { width: 100%; height: min(62vh, 36rem); border: 2px solid var(--ink); border-radius: var(--r-md); background: #1a1614; display: block; }
.del-warn { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.del-ico { width: 3.4rem; height: 3.4rem; animation: wiggle 1.2s ease-in-out .3s 2; }
.del-ico .ico { width: 100%; height: 100%; }
.del-list { margin: 0; padding-left: 1.2rem; text-align: left; font-weight: 700; display: grid; gap: .25rem; }
.del-list li::marker { color: #ff8a80; }
.del-note { margin: 0; font-size: .88rem; font-weight: 700; }
.del-form { display: flex; flex-direction: column; align-items: center; gap: .8rem; text-align: center; }
.del-word { color: #ffb0a8; letter-spacing: .08em; }
.del-input { width: min(100%, 16rem); text-align: center; letter-spacing: .2em; text-transform: uppercase; }

/* ── Marcos de retrato (logros) ── */
.has-frame { position: relative; }
.has-frame::before {
  content: ''; position: absolute; z-index: 4; inset: 0; border-radius: inherit; pointer-events: none;
  border: 5px solid var(--fr, #cd7f32);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.45), 0 0 0 2px var(--ink), 0 0 16px var(--fr-glow, transparent);
}
.frame-bronce { --fr: #d98a4a; }
.frame-plata { --fr: #dfe6f5; --fr-glow: rgba(220,230,255,.45); }
.frame-oro { --fr: #ffc83a; --fr-glow: rgba(255,210,60,.7); }
.frame-leyenda { --fr: #b44cf0; --fr-glow: rgba(200,110,255,.8); }
.frame-leyenda::before { border-color: #d98aff; animation: frame-glow 1.8s ease-in-out infinite alternate; }
@keyframes frame-glow { to { box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 0 0 2px var(--ink), 0 0 28px rgba(220,140,255,.95); } }
.ach-frames-row { grid-column: 1 / -1; padding: .5rem .7rem; list-style: none; }
.ach-frames { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.ach-frame { display: flex; flex-direction: column; align-items: center; gap: .2rem; font-weight: 800; font-size: max(11px, .78rem); }
.ach-frame small { display: inline-flex; align-items: center; gap: .15rem; }
.ach-frame small .ico { width: 1.1em; height: 1.1em; }
.ach-frame-art { --kit: #1f6a7c; position: relative; width: 3.4rem; height: 3.4rem; border-radius: 16px;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--kit) 50%, #fff), var(--kit) 50%, color-mix(in srgb, var(--kit) 50%, #000)); }
.ach-frame-art canvas { width: 100%; height: 100%; border-radius: 16px; }
.ach-frame.is-locked .ach-frame-art { filter: grayscale(1) brightness(.55); }
.ach-frame-lock { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; }
.ach-frame-lock .ico { width: 1.6rem; height: 1.6rem; }
.ach-frame.is-current small { color: var(--gold-2); }
.ach-frames-note { flex: 1 1 12rem; margin: 0; font-weight: 700; font-size: .9rem; }
.ach-frames-note b { color: #fff; }

/* ── Ficha: amistad, rival de la presentación y poder mejorado ── */
.pc-friend { min-height: 44px; display: flex; align-items: center; justify-content: center; }
.vs-right [data-ref] { cursor: pointer; }
.vs-ficha { position: absolute; z-index: 5; right: 6%; bottom: 6%; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(ellipse 72% 58% at 50% 32%, #52b8ff 0%, #52b8ff 42%, #1f8ff5 100%); border: 2px solid #082a6b; box-shadow: inset 0 -3px 0 #0f5fcc, 0 2px 0 #082a6b; color: #072765; animation: pulse 1.2s ease-in-out infinite; }
.vs-ficha .ico { width: 64%; height: 64%; }
.vs-art .vs-ficha { transform: none; }
.cd-boost {
  display: inline-flex; align-items: center; gap: .25rem; margin: .25rem 0 .1rem; padding: .05rem .6rem .1rem .3rem; border-radius: 999px;
  font-family: var(--font-title); font-size: .9rem; color: #fff; background: linear-gradient(180deg, #ffe24a 0 50%, #ffae0a 50% 100%); border: 1.5px solid var(--ink); -webkit-text-stroke: .2em #4d2400; paint-order: stroke fill;
  box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 12px rgba(255,210,60,.6);
}
.cd-boost .ico { width: 1.25em; height: 1.25em; }
.cd-power.is-boosted { box-shadow: inset 0 0 0 2px rgba(255,210,60,.55); }
.power-chip .pc-boost { font-family: var(--font-title); font-weight: 400; font-size: .85em; color: var(--ink); padding: 0 .35rem; border-radius: 6px; background: #ffd23a; margin-left: .1rem; }

/* Ficha rápida del rival (presentación) */
.pc-power { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-weight: 700; font-size: .88rem; line-height: 1.3; }
.pc-stats { padding: .45rem .7rem; gap: .3rem; }
.pc-stats li { grid-template-columns: 5.4rem 1fr 2.6rem; }
.pc-quick-acts { display: flex; justify-content: flex-end; }
@media (max-height: 500px) and (orientation: landscape) {
  .pc-quick .pc-power > .t-dim { display: none; }
  .pc-stats { padding: .3rem .5rem; gap: .15rem; }
  .pc-stats .sb-track { height: .75rem; }
}

/* ── Resultado: añadir al rival ── */
.res-friend { display: inline-flex; align-items: center; }
/* Sala: sacar al invitado (anfitrión, durante la cuenta atrás) */
.room-guest-wrap { position: relative; }
.room-kick { position: absolute; z-index: 5; bottom: -10px; right: -6px; }
.res-friend .fr-chip { min-height: 44px; }

/* ── Tienda: probabilidades visibles en cada sobre ── */
.offer-odds { display: inline-flex; align-items: center; gap: .25rem; min-height: 32px; padding: 0 .5rem; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--well);
  font-weight: 800; font-size: max(11px, .74rem); color: var(--cyan); position: relative; }
.offer-odds::after { content: ''; position: absolute; inset: -6px -2px; }
.offer-odds .ico { width: 1.2em; height: 1.2em; }
.pack-info-mini > div { min-width: 0; }

/* ── Cuadro del torneo: el rival de cada ronda jugada ── */
.tr-rival { --kit: #1f6a7c; position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.tr-rival canvas { width: 3rem; height: 3rem; border-radius: 50%; border: 3px solid var(--ink);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--kit) 50%, #fff), var(--kit) 50%, color-mix(in srgb, var(--kit) 50%, #000)); }
.tr-won .tr-rival canvas { filter: saturate(.55); }
.tr-rival-nick { max-width: 7rem; font-weight: 800; font-size: max(11px, .72rem); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-round.has-rival { position: relative; }
.tr-round-mark { position: absolute; top: 2.1rem; right: .5rem; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--ink); }
.tr-round-mark .ico { width: 80%; height: 80%; }

/* ── Marcas guiadas: burbuja a un lado del objetivo ── */
.cm-bubble[data-side="right"]::after { left: auto; right: 100%; top: var(--ay, 50%); margin: -11px 0 0; border-right: 13px solid var(--ink); }
.cm-bubble[data-side="left"]::after { left: 100%; top: var(--ay, 50%); margin: -11px 0 0; border-left: 13px solid var(--ink); }

/* ── Móvil apaisado (poca altura) ── */
@media (max-height: 500px) and (orientation: landscape) {
  .ev-banner { width: 8.6rem; padding: .25rem .4rem .3rem; border-radius: 13px; }
  .ev-banner-tag { font-size: 11px; padding-inline: .4rem; }
  .ev-ico { width: 2rem; height: 2rem; }
  .ev-banner-name { font-size: .86rem; }
  .ev-pips i { width: .65rem; height: .65rem; }
  .ev-body { padding-top: .2rem; gap: .6rem .8rem; }
  .ev-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); text-align: left; padding: .55rem .7rem .65rem; gap: .35rem .6rem; align-content: center; }
  .ev-today { position: static; grid-column: 1 / -1; justify-self: start; font-size: .72rem; }
  .ev-hero-ico { width: 3.4rem; height: 3.4rem; }
  .ev-name { font-size: 1.45rem; }
  .ev-desc { font-size: .84rem; margin-top: .15rem; }
  .ev-rules { grid-column: 1 / -1; }
  .ev-next { display: none; }
  .ev-rules { padding: .35rem .45rem; gap: .25rem; }
  .ev-rules li { font-size: .84rem; }
  .ev-rule-ico { width: 1.6rem; height: 1.6rem; }
  .ev-prize { padding: .5rem .6rem; gap: .3rem; }
  .ev-prize-title { font-size: 1.05rem; }
  .ev-step { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
  .ev-step-pack { width: 2.6rem; }
  .ev-prize-note { font-size: .8rem; }
  .ev-play .t-title { font-size: 1.45rem; }
  /* JUGAR y Practicar tienen que verse sin desplazar también con la isla/muesca y el indicador de
     inicio (iPhone apaisado: la navegación crece con la zona segura de abajo): «Premios» y «Cada
     victoria» van en la misma fila y los botones son más bajos. */
  .ev-body { padding-bottom: .45rem; }
  .ev-side { gap: .5rem; }
  .ev-prize { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .6rem; row-gap: .2rem; }
  .ev-prize-row { justify-self: end; }
  .ev-track, .ev-prize-note { grid-column: 1 / -1; }
  .ev-track { padding: 0; }
  .ev-actions .btn-lg { font-size: 1.15rem; padding: .3em 1em .45em; }
  .ev-play .t-title { font-size: 1.3rem; }
  .room-tabs .seg-btn { min-width: 6rem; min-height: 36px; font-size: .95rem; }
  .fr-code-card { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .fr-code-label { width: 100%; }
  .fr-code-acts .btn { padding-inline: .55em; }
  .fr-code-acts .btn span { display: none; }
  .fr-side { overflow-y: auto; min-height: 0; }
  .fr { grid-template-columns: minmax(13rem, 34%) minmax(0, 1fr); gap: .5rem .8rem; padding-bottom: .4rem; }
  .fr-side { gap: .45rem; }
  .fr-code-card { padding: .4rem .5rem .5rem; gap: .2rem; }
  .fr-code-label { font-size: .78rem; }
  .fr-code { font-size: 1.45rem; }
  .fr-add { padding: .4rem .5rem .5rem; gap: .3rem; }
  .fr-add-label { font-size: .95rem; }
  .fr-add-label .ico { width: 1.3rem; height: 1.3rem; }
  .fr-add-input { font-size: 1.05rem; min-height: 44px; }
  .fr-row { min-height: 2.9rem; padding-block: .2rem; }
  .fr-avatar { width: 2.5rem; height: 2.5rem; }
  .fr-row { grid-template-columns: 2.5rem minmax(0, 1fr) auto; }
  .fr-dot { left: 2.2rem; }
  .fr-sec { margin: .25rem 0 .3rem; font-size: 1rem; }
  .inv-card { padding: .4rem .55rem .55rem; gap: .5rem; }
  .inv-ico { width: 2.2rem; height: 2.2rem; }
  .privacy-frame { height: calc(100vh - 11rem); }
  .ach-frames-row { padding: .35rem .5rem; }
  .ach-frame-art { width: 2.7rem; height: 2.7rem; }
  .tr-rival canvas { width: 2.3rem; height: 2.3rem; }
  .tr-round-mark { top: 1.6rem; right: .3rem; width: 1.3rem; height: 1.3rem; }
  .vs-rules { display: none; }
  /* Ventana del sobre: el contenido en una fila y las probabilidades sin la explicación larga, para
     que «Empezar» / «Abrir ya» quepan sin desplazar. */
  .packslot .pack-contents { display: flex; flex-wrap: wrap; gap: .1rem 1rem; }
  .packslot .pack-contents .pc-ico { width: 1.6rem; height: 1.6rem; }
  .packslot .pack-odds { margin-top: .2rem; }
  .packslot .pack-odds summary { min-height: 32px; }
  .packslot .pack-odds .odds-note:first-of-type { display: none; }
  .packslot-info { gap: .45rem; }
}

/* ── Vertical ── */
@media (orientation: portrait) {
  /* En vertical la barra superior va llena: el aviso «Sin conexión» baja encima de la navegación. */
  .status-banner.is-offline { top: auto; bottom: calc(var(--nav-h) + var(--safe-b) + 10px); }
  .ev-banner-host { grid-column: 1 / -1; }
  .ev-banner { width: 100%; height: auto; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; padding: .45rem .7rem; }
  .ev-banner-tag { grid-column: 1 / 3; }
  .ev-banner-ico { grid-row: 1 / 3; grid-column: 1; }
  .ev-banner-name { grid-row: 2; grid-column: 2; font-size: 1.1rem; }
  .ev-banner-foot { grid-row: 1 / 3; grid-column: 3; flex-direction: column; align-items: flex-end; }
  .ev-banner-tag { grid-row: 1; grid-column: 2; }
  .ev-body { grid-template-columns: 1fr; }
  .ev-today { position: static; align-self: flex-start; }
  .ev-hero-ico { width: 5rem; height: 5rem; }
  .ev-name { font-size: 1.8rem; }
  .room-tabs .seg-btn { min-width: 0; padding: 0 .75rem; }
  .fr { grid-template-columns: 1fr; overflow-y: auto; }
  .fr-main { min-height: 18rem; }
  .fr-list-wrap { overflow: visible; }
  .fr-row { grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: .45rem; }
  .fr-avatar { width: 2.6rem; height: 2.6rem; }
  .fr-dot { left: 2.3rem; }
  .fr-acts .btn span { display: none; }
  .fr-acts .btn { padding-inline: .55em; }
  .inv-card { grid-template-columns: auto minmax(0, 1fr); }
  .inv-acts { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
}