/* style.optimized5.css — capas + agrupado (base/components/screens/utilities)
   Objetivo: mantener el aspecto actual, reduciendo guerras de especificidad.
   Nota: Se respeta el orden interno de cada sección; la prioridad se controla por @layer. */

@layer base,
components,
screens,
utilities;

@layer base {
  :root {
    --color-yo: blue;
    --color-rival: red;
    --color-yo-soft: rgba(0, 0, 255, 0.72);
    --color-rival-soft: rgba(255, 0, 0, 0.52);
    --row-gap: 10px;
    /* relleno dinámico para teclado sticky (lo ajusta JS) */
    --kb-pad: 0px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --fx-blue: rgba(37, 99, 235, .45);
    --fx-red: rgba(220, 38, 38, .45);
    --fx-blue-soft: rgba(37, 99, 235, .20);
    --fx-red-soft: rgba(220, 38, 38, .18);
    --fx-specular: rgba(255, 255, 255, .75);
    --fx-specular2: rgba(255, 255, 255, .35);
    --fx-shadow: rgba(0, 0, 0, .18);
    /* tokens añadidos en optimización 2 */
    --c-white: #fff;
    --shadow-010: rgba(0, 0, 0, .10);
    --shadow-012: rgba(0, 0, 0, .12);
    --shadow-014: rgba(0, 0, 0, .14);
    --shadow-016: rgba(0, 0, 0, .16);
    --shadow-022: rgba(0, 0, 0, .22);
    --shadow-025: rgba(0, 0, 0, .25);
    --spec-085: rgba(255, 255, 255, .85);
    --spec-055: rgba(255, 255, 255, .55);
    --spec-000: rgba(255, 255, 255, 0);
    --c-red-600: #dc2626;
    --c-blue-600: #2563eb;
    --c-gray-200: #e5e7eb;
    --c-green-wordle: #6aaa64;
    /* tokens añadidos en optimización 7 (radios/bordes) */
    --radius-pill: 999px;
    --radius-16: 16px;
    --radius-14: 14px;
    --radius-12: 12px;
    --radius-10: 10px;
    --c-border-ddd: #ddd;
    /* tokens añadidos en optimización 8 (sombras/gradientes) */
    --grad-panel-silver: linear-gradient(to bottom,
        rgba(255, 255, 255, .75),
        rgba(255, 255, 255, .25) 45%,
        rgba(0, 0, 0, .15) 100%),
      linear-gradient(to bottom,
        #f2f3f5,
        #e6e7ea);
    --text-shadow-soft: 0 1px 0 rgba(255, 255, 255, .65), 0 2px 2px var(--shadow-025);
    --ad-h: 60px;
    /* altura visual del sticky igual al banner */
    --ad-pad: 0px;
    /* padding extra cuando el banner está visible */
  }

  /* =========================
        Base
        ========================= */
  html,
  body {
    height: 100%;
  }

  body {
    font-family: system-ui, Arial;
    margin: 0;
    padding: 0;
    max-width: none;
    background: var(--c-white);
    transition: background 200ms ease, filter 200ms ease;
  }

  .row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
  }

  .card {
    border: 1px solid var(--c-border-ddd);
    border-radius: var(--radius-10);
    padding: 14px;
    margin-top: 12px;
  }

  code {
    background: #f4f4f4;
    padding: 2px 6px;
    border-radius: 6px;
  }

  button {
    padding: 10px 12px;
    border-radius: var(--radius-10);
    border: 1px solid var(--c-border-ddd);
    cursor: pointer;
  }

  button:disabled {
    opacity: .5;
    cursor: not-allowed;
  }

  .ok {
    color: #0a7a2f;
  }

  .ok,
  .bad {
    font-weight: 600;
  }

  .bad {
    color: #b00020;
  }

  input {
    padding: 10px 12px;
    border-radius: var(--radius-10);
    border: 1px solid var(--c-border-ddd);
    min-width: 0px;
  }

}

@layer components {

  /* =========================
        Layout app (header fijo, main scroll, footer fijo)
        ========================= */
  .appShell {
    height: 100vh;
    /* fallback */
    height: 100dvh;
    /* moderno */
    display: flex;
    flex-direction: column;

    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    box-sizing: border-box;
  }

  /* Header fijo */
  .appTop {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--shadow-012);
    padding: 10px 10px 8px;
  }

  .topRow {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
  }

  .topBlock {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .topActions {
    display: flex;
    gap: 8px;
    align-items: flex-end;
  }

  .matchRow {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }

  .matchRow,
  .pill {
    align-items: center;
  }

  .pill {
    display: inline-flex;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--c-gray-200);
    border-radius: var(--radius-pill);
    background: #fafafa;
    font-weight: 700;
    font-size: 13px;
  }

  /* Status bar ancho completo con progreso de fondo */
  /* =========================================================
      Barra de estado estilo “barra de progreso”
      ========================================================= */

  .statusBar {
    margin: 8px auto 10px;
    height: 44px;
    /* ← ALTURA FIJA */
    padding: 0 18px;
    /* ← sin padding vertical */

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-12);
    /* ← ya no “pastilla” */
    text-align: center;
    /* Fondo tipo barra progreso */
    background: var(--grad-panel-silver);
    box-shadow: inset 0 1px 0 var(--spec-085),
      inset 0 -4px 8px var(--shadow-022),
      0 4px 12px var(--shadow-016);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #111;
    background: transparent;
  }

  .statusBar::before {
    left: 10px;
    right: 10px;
    top: 2px;
    height: 55%;
    border-radius: var(--radius-10);
    background: linear-gradient(to bottom,
        var(--spec-085),
        rgba(255, 255, 255, .25),
        var(--spec-000));
    opacity: .9;
  }

  .statusBar::before,
  .statusBar::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }

  .statusBar::after {
    inset: 0;
    border-radius: var(--radius-12);
    background: var(--grad-panel-silver);
  }

  .statusBar>*,
  .statusBar>.statusText {
    position: relative;
    z-index: 5;
  }

  /* ----- Estados de la barra de estado ----- */

  .statusBar.you {
    color: #1d4ed8;
    /* azul */
  }

  .statusBar.you,
  .statusBar.opp {
    text-shadow: var(--text-shadow-soft);
  }

  .statusBar.opp {
    color: #b91c1c;
    /* rojo */
  }

  .statusBar.pause {
    color: #374151;
    /* gris elegante */
    font-size: 18px;
  }

  .statusText {
    font-weight: 900;
    letter-spacing: .04em;
  }

  .statusBar[data-state="queue"],
  .gameBtn.is-searching {
    border-color: #cbd5e1;
  }

  .statusBar[data-state="your"] {
    border-color: #86efac;
    justify-content: flex-start;
  }

  .statusBar[data-state="opp"] {
    border-color: var(--c-gray-200);
    justify-content: flex-end;
  }

  /* Main scroll */
  .appMain {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 10px 10px;
    padding-bottom: calc(var(--kb-pad, 0px) + var(--ad-pad, 0px) + var(--safe-bottom) + 10px);
    overflow-x: hidden;
    /* ✅ evita scroll horizontal */
    max-width: 100%;
  }

  /* Footer fijo */
  .appBottom {
    position: sticky;
    bottom: 0;
    z-index: 200;
    border-top: 1px solid var(--shadow-012);
    padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 8px) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    box-sizing: border-box;
  }

  .hiddenRow {
    display: none;
  }

  /* =========================
        Turno visual (body classes)
        ========================= */
  body.your-turn {
    background: #f1fff5;
  }

  body.opp-turn {
    background: #f7f7f7;
    filter: saturate(.85);
  }

  body.your-turn .card:first-of-type {
    border-color: var(--c-green-wordle);
    box-shadow: 0 0 0 3px rgba(46, 160, 67, .15);
  }

  body.opp-turn .card:first-of-type {
    border-color: #6e7781;
    box-shadow: 0 0 0 3px rgba(110, 119, 129, .12);
  }

  body.opp-turn #teclado {
    opacity: .65;
    transform: scale(.995);
  }

  #teclado.kbIntroHidden {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* =========================
        Board / tiles / rows
        ========================= */
  .board {
    display: grid;
    grid-template-columns: 1fr;
  }

  .board,
  .boardWrap {
    gap: var(--row-gap);
  }

  .boardWrap {
    position: relative;
    z-index: 50;
    width: 100%;
    max-width: 600px;
    margin: 12px auto 0;
    display: flex;
    flex-direction: column;
  }

  /* Centrado del tablero (board + liveRow) */
  #board,
  #liveRow {
    width: 100%;
    max-width: 330px;
    margin-left: auto;
    margin-right: auto;
  }

  #board .guessRow,
  #liveRow .guessRow {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  /* Fila base (una sola definición) */
  .guessRow {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
    /* compactación por variables */
    --tile-w: 35px;
    --tile-h: 40px;
    --gap-x: 0px;
    gap: var(--gap-x);
  }

  .guessRow.live {
    margin: 0;
  }

  .guessRow.live .tile {
    opacity: .95;
  }

  .guessRow.live.opponent .tile {
    opacity: .6;
  }

  /* Colores de borde por jugador (si se aplican a row) */
  .guessRow.you .tile,
  .duelAvatar.you {
    border-color: var(--c-blue-600);
  }

  .guessRow.opp .tile,
  .duelAvatar.opp {
    border-color: var(--c-red-600);
  }

  /* Animación shake */
  @keyframes shake {

    0%,
    100% {
      transform: translateX(0);
    }

    20% {
      transform: translateX(-4px);
    }

    40% {
      transform: translateX(4px);
    }

    60% {
      transform: translateX(-3px);
    }

    80% {
      transform: translateX(3px);
    }


  }

  .guessRow.shake {
    animation: shake .35s ease;
  }

  /* Tiles */
  .tile {
    width: var(--tile-w);
    height: var(--tile-h);
    max-width: 50px;
    max-height: 50px;
    border: 2px solid #d3d6da;
    margin: 2px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    background-color: var(--c-white);
    color: #000;
    box-sizing: border-box;
    user-select: none;
    transition: border-color 160ms ease, border-width 160ms ease, box-shadow 220ms ease;
  }

  .tile.cursor {
    border-color: var(--cursor-color, var(--c-green-wordle));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cursor-color, var(--c-green-wordle)) 20%, transparent);
    animation: cursor-glow 1.25s ease-in-out infinite;
  }

  @keyframes cursor-glow {

    0%,
    100% {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--cursor-color, var(--c-green-wordle)) 14%, transparent);
    }

    50% {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--cursor-color, var(--c-green-wordle)) 26%, transparent);
    }

  }

  .tile.correct {
    background: var(--c-green-wordle);
    color: var(--c-white);
    border-color: var(--c-green-wordle);
  }

  .tile.present {
    background: #d29922;
    color: var(--c-white);
    border-color: #d29922;
  }

  .tile.absent {
    background: #dadada;
    color: rgb(104, 104, 104);
    border-color: #9fa2a6;
  }

  /* Cursor por jugador en liveRow */
  #liveRow.you {
    --cursor-color: var(--c-blue-600);
  }

  #liveRow.opp {
    --cursor-color: var(--c-red-600);
  }

  /* En lobby: liveRow sin borde “jugador” */
  #liveRow:not(.you):not(.opp) .tile {
    border-color: #d3d6da !important;
  }

  /* =========================
        Hint (flecha + distancia / iconos / timeout)
        ========================= */
  .hint {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    font-size: 1.2em;
    white-space: nowrap;
    min-width: 0;
  }

  .guessRow .hint {
    flex: 0 0 auto;
    white-space: nowrap;
    margin-left: 6px;
    width: 80px;
    justify-content: flex-start;
  }

  /* Icono dirección */
  .hint .icono-dir {
    width: 36px;
    height: 36px;
    vertical-align: middle;
  }

  /* Distancia: reserva 6 caracteres */
  .hint .icono-dir,
  .hint .dist {
    display: inline-block;
    margin: 0;
  }

  .hint .dist {
    font-weight: 700;
    width: 6ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* Colores dirección */
  .hint.dir-right .dist,
  .hint.dir-right .icono-dir,
  .duelElo .opp {
    color: var(--c-red-600);
  }

  .hint.dir-left .dist,
  .hint.dir-left .icono-dir,
  .duelElo .you {
    color: var(--c-blue-600);
  }

  /* Hint “solo icono” (trofeo / tarjetas) */
  .hint.iconHint {
    width: 40px;
    min-width: 40px;
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .hint.iconHint img,
  .hint.timeout img.timeoutCard {
    height: 40px;
    width: auto;
    display: block;
  }

  /* Hint timeout */
  .hint.timeout {
    margin-left: 6px;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* =========================
        Teclado
        ========================= */
  #teclado {
    margin: 0 auto;
    width: 100%;
    max-width: 600px;
    box-sizing: border-box;
    padding: 0 8px 20px;
    min-height: 0;
  }

  #footerIconBar {
    /*padding-bottom: env(safe-area-inset-bottom, 0px) !important;*/
    padding-bottom: 0px;
    box-sizing: border-box;
  }

  /* ✅ Ocultar colapsando (NO mantiene altura) */
  #teclado.kb-hidden {
    display: none;
  }

  .fila-teclado {
    display: flex;
    gap: 6px;
    width: 100%;
    margin: 6px auto 0;
    padding: 0 4px;
    box-sizing: border-box;
    justify-content: center;
  }

  .tecla {
    flex: 1 1 0;
    min-width: 0;
    height: 40px;
    color: #000;
    font-weight: 700;
    user-select: none;
    font-size: 1rem;
    text-align: center;
    background-color: #d3d6da;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  .tecla,
  .tecla-accion {
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .tecla-accion,
  .tecla-wide {
    flex: 1.8 1 0;
  }

  .tecla-accion img {
    width: 18px;
    height: 18px;
    display: block;
    flex: 0 0 auto;
  }

  @media (max-width:600px) {
    .fila-teclado {
      width: 100% !important;
      justify-content: space-between !important;
    }

  }

  #teclado.is-disabled {
    opacity: .55;
    filter: grayscale(.2);
    pointer-events: none;
  }

  #teclado.is-disabled button {
    cursor: not-allowed;
  }

  /* =========================
        Barra progreso
        ========================= */
  #barra-progreso {
    width: 100%;
    max-width: 600px;
    height: 20px;
    background: #f0f0f0;
    border-radius: var(--radius-10);
    margin: 8px auto 0;
    box-shadow: inset 0 0 4px var(--shadow-025), 0 1px 2px rgba(0, 0, 0, .1);
    border: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: .9rem;
    box-sizing: border-box;
  }

  @keyframes parpadeo {

    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: .3;
    }

  }

  .icono-barra {
    position: absolute;
    top: -4px;
    width: 28px;
    height: 28px;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;
    animation: 1s infinite parpadeo;
  }

  .marca-intento {
    position: absolute;
    top: 0;
    height: 100%;
    width: 2px;
    border-radius: 2px;
    z-index: 6;
    opacity: .45;
  }

  .marca-intento.you {
    background: var(--color-yo-soft);
  }

  .marca-intento.opp {
    background: var(--color-rival-soft);
  }

  .marca-intento.last {
    opacity: 1;
    box-shadow: 0 0 6px var(--shadow-025);
    width: 2px;
  }

  /* =========================
        Botón juego (play/stop/reset)
        ========================= */
  .duelCenter {
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 6px;
  }

  .duelBtnWrap {
    position: absolute;
    left: 50%;
    top: 45px;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
  }

  .duelBtnWrap .gameBtn {
    pointer-events: auto;
  }

  .gameBtn {
    position: static;
    margin: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    border: 2px solid var(--c-gray-200);
    background: var(--c-white);
    box-shadow: 0 8px 18px var(--shadow-010);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
  }

  .gameBtn:disabled,
  .btnPrimary:disabled {
    opacity: .55;
    cursor: not-allowed;
  }

  .gameBtnIcon {
    width: 22px;
    height: 22px;
    display: block;
    position: relative;
  }

  /* PLAY */
  .gameBtn.is-idle .gameBtnIcon,
  .gameBtn.is-finished .gameBtnIcon,
  .gameBtn.is-rematch .gameBtnIcon {
    width: 0;
    height: 0;
    border-left: 18px solid #22c55e;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    transform: translateX(2px);
  }

  /* STOP */
  .gameBtn.is-playing .gameBtnIcon,
  .gameBtn.is-searching .gameBtnIcon {
    width: 18px;
    height: 18px;
    background: #ef4444;
    border-radius: 4px;
  }

  /* RESET */
  .gameBtn.is-reset .gameBtnIcon {
    width: 32px;
    height: 32px;
    background: url("./icons/reset.svg") no-repeat center;
    background-size: contain;
  }

  /* Revancha */
  .gameBtn.has-rematch::after {
    content: "R";
    position: absolute;
    right: -4px;
    top: -4px;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-pill);
    background: #111827;
    color: var(--c-white);
    font-weight: 900;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--c-white);
  }

  .boardFocus {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  /* =========================
        HUD duelo superior
        ========================= */
  .duelHud {
    display: grid;
    grid-template-columns: 56px 1fr 56px;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Avatares */
  .duelAvatar {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-14);
    overflow: visible;
    border: 2px solid var(--c-gray-200);
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .duelAvatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Timeouts sobre avatar */
  .timeoutBadges {
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%) translateY(60%);
    display: flex;
    gap: 6px;
    z-index: 20;
    pointer-events: none;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .28));
  }

  .timeoutBadge {
    width: 16px;
    height: 22px;
    border-radius: 4px;
    background: #facc15;
    border: 1px solid var(--shadow-022);
    box-shadow: 0 2px 0 var(--shadow-022), 0 10px 18px rgba(0, 0, 0, .18);
  }

  .timeoutBadge.third {
    background: #ef4444;
    border-color: rgba(0, 0, 0, .28);
  }

  .scoreBlue,
  .scoreRed {
    display: flex;
    align-items: center;
    color: var(--c-white);
    white-space: nowrap;
  }

  .scoreBlue {
    background: var(--c-blue-600);
    justify-content: flex-start;
    padding-left: 10px;
  }

  .scoreBlue,
  .scoreRed {
    width: 50%;
    transition: width 300ms ease;
  }

  .scoreRed {
    background: var(--c-red-600);
    justify-content: flex-end;
    padding-right: 10px;
  }

  /* Nombres (con hueco central reservado para botón) */
  .duelNames {
    --center-gap: 56px;
    display: grid;
    grid-template-columns: 1fr var(--center-gap) 1fr;
    align-items: center;
    column-gap: 6px;
    font-weight: 800;
    font-size: clamp(6px, 3.2vw, 14px);
    line-height: 1.05;
    width: 100%;
  }

  .duelNameSpacer {
    width: var(--center-gap);
    height: 1px;
  }

  .duelNames>span {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
  }

  .duelNames>span:first-child {
    color: var(--c-blue-600);
    text-align: left;
  }

  .duelNames>span:last-child {
    color: var(--c-red-600);
    text-align: right;
  }

  @media (max-width:360px) {
    .duelNames span {
      text-overflow: ellipsis;
    }

  }

  /* ELO */
  .duelElo {
    display: flex;
    margin-left: 15px;

    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    opacity: .85;
    width: 90%;
  }

  /* Slot superior */
  .duelTopSlot {
    position: relative;
    height: 22px;
  }

  /* Selector dificultad (píldoras) */
  .difficultyPills {
    height: 22px;
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;

    /* 👇 necesario para poder "estirar" una pill a ancho completo */
    position: relative;
    width: 100%;
  }

  .pillDiff {
    height: 22px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    border: 2px solid var(--c-gray-200);
    background: var(--c-white);
    font-weight: 900;
    font-size: 12px;
    cursor: pointer;
    line-height: 1;
  }

  .pillDiff.active[data-diff="easy"] {
    border-color: #16a34a;
    background: #16a34a;
    color: var(--c-white);
  }

  .pillDiff.active[data-diff="medium"] {
    border-color: #f59e0b;
    background: #f59e0b;
    color: var(--c-white);
  }

  .pillDiff.active[data-diff="hard"] {
    border-color: var(--c-red-600);
    background: var(--c-red-600);
    color: var(--c-white);
  }

  /* ===== DIFICULTAD: animación + glow persistente ===== */
  :root {
    --diff-glow-color: rgba(0, 0, 0, 0);
    /* se rellena por JS */
  }

  /* Glow del "modo" alrededor de la barra de puntos (en partida) */
  .scoreBar.diffGlow {
    box-shadow:
      inset 0 3px 6px rgba(255, 255, 255, .35),
      inset 0 -7px 14px rgba(0, 0, 0, .38),
      0 3px 12px rgba(0, 0, 0, .18),
      0 0 10px var(--diff-glow-color),
      0 0 20px color-mix(in srgb, var(--diff-glow-color) 55%, transparent);
  }

  /* Durante el "PLAY": escondemos las otras pills y expandimos la activa */
  .difficultyPills.isLaunching .pillDiff:not(.active) {
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
  }

  .difficultyPills.isLaunching .pillDiff.active {
    position: absolute;
    /* 👇 left lo setea JS al valor actual, y luego anima a 0 */
    top: 0;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* 👇 animamos left + width para crecer hacia ambos lados */
    transition: left 200ms ease, width 200ms ease, box-shadow 200ms ease;
    z-index: 2;
    will-change: left, width;

    box-shadow:
      0 0 10px var(--diff-glow-color),
      0 0 18px color-mix(in srgb, var(--diff-glow-color) 55%, transparent);
  }

  /* =========================
        Banner
        ========================= */
  .banner {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-10);
    border: 1px solid var(--c-border-ddd);
  }

  .banner.win {
    border-color: var(--c-green-wordle);
  }

  /* =========================
        RAE bajo tablero
        ========================= */
  .bloque-rae-tablero {
    margin-top: 4px;
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: translateY(10px) scale(.95);
    animation: aparecerRae .35s ease-out .05s forwards;
  }

  .btn-def-rae {
    border: none;
    border-radius: var(--radius-pill);
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: #eaf4ea;
    color: #1b3b1c;
    font-size: .9rem;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    line-height: 1;
  }

  .btn-def-rae-icono {
    font-size: 1.1rem;
    line-height: 1;
  }

  .btn-def-rae-texto strong {
    color: #2a7f3f;
  }

  .btn-def-rae:hover {
    background: #d8ecd8;
    transform: translateY(0) scale(1.02);
    box-shadow: 0 2px 6px var(--shadow-025);
  }

  @keyframes aparecerRae {
    from {
      opacity: 0;
      transform: translateY(10px) scale(.95);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

  }

  /* =========================
        Modal genérico
        ========================= */
  .modalOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  .modalCard {
    width: min(300px, calc(100vw - 44px));
    max-width: 300px;
    margin: auto;
    background: var(--c-white);
    border-radius: var(--radius-16);
    box-shadow: 0 12px 32px var(--shadow-025);
    padding: 14px;
  }

  .modalHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
  }

  .modalTitle {
    font-weight: 800;
    font-size: 18px;
  }

  .modalSubtitle {
    opacity: .7;
    font-size: 12px;
    margin-top: 2px;
  }

  .modalBody {
    padding: 12px 2px;
    /* deja espacio para footer si lo hay */
  }

  .modalFooter {
    display: flex;
    flex-direction: column;
    /* 👈 uno debajo del otro */
    gap: 10px;
    justify-content: stretch;
    align-items: stretch;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, .08);
  }

  .modalFooter>button {
    width: 100%;
    /* 👈 mismo ancho que Guardar y jugar */
  }

  /* 🔥 FIX SOLO PARA EL TUTORIAL */
#tutorialOverlay .modalFooter,
#tutorialOverlay .tutorialFooter {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* 🔥 FIX SOLO PARA EL TUTORIAL */
#tutorialOverlay .modalFooter,
#tutorialOverlay .tutorialFooter {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Footer transparente SOLO en el tutorial */
#tutorialOverlay .modalFooter,
#tutorialOverlay .tutorialFooter {
  background: transparent !important;
  border-top: none !important;
}
  /* Perfil */
  .profileRow {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
  }

  .profileRow>* {
    min-width: 0;
  }

  .profileLabel {
    opacity: .7;
  }

  .profileValue,
  .profileNameInput {
    font-weight: 700;
  }

  .profileNameInput {
    width: 100%;
    max-width: 220px;
    box-sizing: border-box;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, .2);
  }

  /* Botones modal */
  .btnPrimary {
    border-radius: var(--radius-12);
    border: none;
  }

  .btnPrimary,
  .btnSecondary {
    padding: 10px 12px;
    font-weight: 500;
    cursor: pointer;
  }

  .btnSecondary {
    border-radius: var(--radius-12);
    border: 1px solid rgba(0, 0, 0, .18);
    background: rgba(255, 255, 255, .9);
    color: #111;
  }

  .btnSecondary:hover {
    background: rgba(245, 245, 245, .95);
  }

  .btnDanger {
    padding: 10px 12px;
    border-radius: var(--radius-12);
    border: none;
    font-weight: 500;
    cursor: pointer;
    background: #ef4444;
    color: var(--c-white);
  }


  /* =========================
        Avatares (picker)
        ========================= */
  .avatarGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(52px, 1fr));
    gap: 10px;
  }

  .avatarOption {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    overflow: hidden;
    background: var(--c-white);
  }

  .avatarOption img,
  .avatarPickerCircle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .avatarOption.selected {
    border-color: #4f46e5;
  }

  /* Botón compacto */
  .avatarPickerBtn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-14);
    border: 1px solid var(--shadow-012);
    background: var(--c-white);
    cursor: pointer;
  }

  .avatarPickerBtn:active {
    transform: translateY(1px);
  }

  .avatarPickerCircle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--c-white);
    box-shadow: 0 2px 6px var(--shadow-012);
    flex: 0 0 auto;
  }

  .avatarPickerText {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
  }

  .avatarPickerTitle {
    font-weight: 800;
  }

  .avatarPickerChevron {
    opacity: .6;
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
  }

  .avatarGridWrap {
    margin-top: 10px;
    padding: 10px;
    border-radius: var(--radius-14);
    border: 1px solid var(--shadow-010);
    background: rgba(0, 0, 0, .02);
  }

  /* =========================
      1) SCORE BAR tipo “tubo”
      ========================= */
  /* ===== SCORE BAR “tubo” con luz CENTRAL longitudinal ===== */
  .scoreBar {
    position: relative;
    border-radius: var(--radius-pill);
    overflow: hidden;
    /* base “cilindro”: oscuro arriba/abajo, más claro en el centro vertical */
    background: linear-gradient(to bottom,
        var(--shadow-022) 0%,
        rgba(255, 255, 255, .10) 22%,
        rgba(255, 255, 255, .22) 50%,
        rgba(255, 255, 255, .08) 78%,
        rgba(0, 0, 0, .28) 100%);
    box-shadow: inset 0 3px 6px rgba(255, 255, 255, .35),
      inset 0 -7px 14px rgba(0, 0, 0, .38),
      0 3px 12px rgba(0, 0, 0, .18);
  }

  /* (1) Banda central longitudinal (lo que “ilumina en el centro”) */
  .scoreBar::before {
    inset: 0;
    /* luz a lo largo del tubo, centrada en X */
    background: linear-gradient(to right,
        var(--spec-000) 0%,
        rgba(255, 255, 255, .18) 18%,
        rgba(255, 255, 255, .78) 50%,
        rgba(255, 255, 255, .18) 82%,
        var(--spec-000) 100%);
    opacity: .95;
  }

  /* (2) Gloss superior (reflejo tipo “plástico”) */
  .scoreBar::before,
  .scoreBar::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }

  .scoreBar::after {
    left: 10px;
    right: 10px;
    top: 2px;
    height: 52%;
    border-radius: var(--radius-pill);
    background: linear-gradient(to bottom,
        var(--spec-055),
        rgba(255, 255, 255, .18) 55%,
        var(--spec-000) 100%);
    opacity: .85;
  }

  .scoreBlue,
  .scoreRed {
    position: relative;
    /* “pintura” con degradado vertical para efecto redondo */
    background-image: linear-gradient(to bottom,
        rgba(255, 255, 255, .18),
        var(--spec-000) 40%,
        var(--shadow-010) 100%);
  }

  /* Aumenta legibilidad del número dentro del tubo */
  .scoreBlue span,
  .scoreRed span {
    text-shadow: 0 2px 2px var(--shadow-022);
  }

  /* =========================
      2) TECLAS con relieve
      ========================= */

  .tecla {
    position: relative;
    /* “keycap” 3D */
    background: linear-gradient(to bottom, var(--spec-055), var(--spec-000) 40%),
      linear-gradient(to bottom, #e3e6ea, #cfd3d9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75),
      inset 0 -2px 4px rgba(0, 0, 0, .18),
      0 3px 0 rgba(0, 0, 0, .18),
      0 10px 18px var(--shadow-010);
    border: 1px solid rgba(0, 0, 0, .08);
  }

  /* “brillo” arriba tipo plástico */
  .tecla::before {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 4px;
    height: 45%;
    border-radius: var(--radius-10);
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, .70),
        rgba(255, 255, 255, .12),
        var(--spec-000));
    opacity: .8;
  }

  /* Estado pulsado (que “hunda”) */
  .tecla:active {
    transform: translateY(2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .60),
      inset 0 -2px 3px rgba(0, 0, 0, .18),
      0 1px 0 var(--shadow-022),
      0 6px 12px var(--shadow-010);
  }

  /* Acciones (enter/backspace) un pelín distintas */
  .tecla-accion {
    background: linear-gradient(to bottom, rgba(255, 255, 255, .52), var(--spec-000) 45%),
      linear-gradient(to bottom, #e9ebef, #d6d9df);
  }

  /* Cuando el teclado está deshabilitado, que parezca “apagado” */
  #teclado.is-disabled .tecla {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45),
      inset 0 -2px 3px var(--shadow-010),
      0 2px 0 var(--shadow-010),
      0 8px 12px rgba(0, 0, 0, .06);
    filter: saturate(.85);
  }

  /* =========================
      3) BARRA PROGRESO con brillo
      ========================= */

  #barra-progreso {
    position: relative;
    overflow: visible;
    /* volumen extra */
    background: linear-gradient(to bottom, rgba(255, 255, 255, .75), var(--spec-000) 45%),
      linear-gradient(to bottom, #f2f3f5, #e6e7ea);
    box-shadow: inset 0 1px 0 var(--spec-085),
      inset 0 -3px 6px rgba(0, 0, 0, .18),
      0 2px 10px var(--shadow-010);
  }

  /* reflejo superior tipo “cristal” */
  #barra-progreso::before {
    left: 10px;
    right: 10px;
    top: 2px;
    height: 55%;
    border-radius: var(--radius-pill);
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, .75),
        rgba(255, 255, 255, .22),
        var(--spec-000));
    opacity: 1.9;
  }

  /* viñeta sutil en los extremos */
  #barra-progreso::before,
  #barra-progreso::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }

  #barra-progreso::after {
    inset: 0;
    background: radial-gradient(ellipse at center,
        rgba(255, 255, 255, .10) 0%,
        var(--spec-000) 60%,
        var(--shadow-014) 100%);
    opacity: .35;
  }

  /* Marcas: un pelín más “neón” pero sutil */
  .marca-intento.you {
    box-shadow: 0 0 8px rgba(37, 99, 235, .25);
  }

  .marca-intento.opp {
    box-shadow: 0 0 8px rgba(220, 38, 38, .22);
  }

  /* =========================
      4) Glow sutil en guesses (azul/rojo)
      ========================= */

  /* Efecto en la fila completa */
  #board .guessRow.you {
    filter: drop-shadow(0 0 6px rgba(37, 99, 235, .14));
  }

  #board .guessRow.opp {
    filter: drop-shadow(0 0 6px rgba(220, 38, 38, .12));
  }

  /* Efecto en la liveRow (cuando está en partida) */
  #liveRow.you {
    filter: drop-shadow(0 0 7px rgba(37, 99, 235, .16));
  }

  #liveRow.opp {
    filter: drop-shadow(0 0 7px rgba(220, 38, 38, .14));
  }

  /* Un toque en cada tile para que el “glow” se note sin molestar */
  #board .guessRow.you .tile:not(.cursor),
  #liveRow.you .tile:not(.cursor) {
    box-shadow: 0 0 0 1px rgba(37, 99, 235, .10);
  }

  #board .guessRow.opp .tile:not(.cursor),
  #liveRow.opp .tile:not(.cursor) {
    box-shadow: 0 0 0 1px rgba(220, 38, 38, .10);
  }

  body {
    /* el fondo YA NO va aquí para evitar zooms/glitches */
    background: none;
  }

  /* Capa de fondo fija real (estable, no “zoom” raro) */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("./icons/fondo.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* fuerza capa GPU estable */
    transform: translateZ(0);
    will-change: transform;
  }

  /* Asegura que tu app quede por encima del ::before */
  .appShell {
    position: relative;
    z-index: 0;
  }

  /* =========================================================
      Relieve UI: dificultad + marcos avatares + botón start
      ========================================================= */

  /* ---------- Dificultad: píldoras con relieve ---------- */
  .pillDiff {
    position: relative;
    border: 2px solid var(--shadow-010);
    background: linear-gradient(to bottom, rgba(255, 255, 255, .80), rgba(255, 255, 255, .10) 55%, rgba(0, 0, 0, .06) 100%),
      var(--spec-055);
    box-shadow: inset 0 1px 0 var(--spec-085),
      inset 0 -2px 6px rgba(0, 0, 0, .15),
      0 3px 0 var(--shadow-014),
      0 10px 18px var(--shadow-010);
  }

  .pillDiff::before {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 2px;
    height: 55%;
    border-radius: var(--radius-pill);
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .75), rgba(255, 255, 255, .20), var(--spec-000));
    opacity: .85;
  }

  .pillDiff:active {
    transform: translateY(2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75),
      inset 0 -2px 5px rgba(0, 0, 0, .18),
      0 1px 0 rgba(0, 0, 0, .18),
      0 6px 12px var(--shadow-010);
  }

  /* Activas: conserva tus colores, pero con brillo/relieve */
  .pillDiff.active {
    border-color: rgba(0, 0, 0, .15);
    box-shadow: inset 0 1px 0 var(--spec-055),
      inset 0 -3px 8px var(--shadow-022),
      0 3px 0 rgba(0, 0, 0, .18),
      0 12px 22px var(--shadow-014);
  }

  .pillDiff.active::before {
    opacity: .65;
  }

  /* =========================================================
      Avatares elevados: marco color + interior blanco
      ========================================================= */

  .duelAvatar {
    position: relative;
    padding: 1px;
    /* grosor del marco */
    border-radius: var(--radius-16);
    background: var(--c-white)fff;
    /* interior BLANCO */

    /* elevación general */
    box-shadow: 0 10px 22px var(--shadow-022),
      0 4px 8px var(--shadow-016);
  }

  /* capa interior (plano blanco limpio) */
  .duelAvatar::before {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: 0;
  }

  /* avatar real encima */
  .duelAvatar::before,
  .duelAvatar img {
    border-radius: var(--radius-12);
    background: var(--c-white)fff;
  }

  .duelAvatar img {
    position: relative;
    z-index: 1;
  }

  /* -------- MARCO AZUL -------- */
  .duelAvatar.you {
    background: linear-gradient(to bottom,
        rgba(96, 165, 250, .95),
        rgba(37, 99, 235, 1));
    box-shadow: 0 12px 26px rgba(37, 99, 235, .35),
      0 4px 10px rgba(0, 0, 0, .18);
  }

  /* -------- MARCO ROJO -------- */
  .duelAvatar.opp {
    background: linear-gradient(to bottom,
        rgba(248, 113, 113, .95),
        rgba(220, 38, 38, 1));
    box-shadow: 0 12px 26px rgba(220, 38, 38, .32),
      0 4px 10px rgba(0, 0, 0, .18);
  }

  /* brillo superior del marco (plástico) */
  .duelAvatar.you::after,
  .duelAvatar.opp::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 3px;
    height: 40%;
    border-radius: var(--radius-12);
    pointer-events: none;
    background: linear-gradient(to bottom,
        var(--spec-055),
        rgba(255, 255, 255, .15),
        var(--spec-000));
  }

  /* ---------- Botón START (gameBtn): “botón físico” ---------- */
  .gameBtn {
    position: relative;
    border: 2px solid var(--shadow-010);
    background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .90), rgba(255, 255, 255, .40) 40%, rgba(255, 255, 255, .15) 70%),
      linear-gradient(to bottom, var(--spec-055), rgba(255, 255, 255, .10) 55%, rgba(0, 0, 0, .08) 100%);
    box-shadow: inset 0 1px 0 var(--spec-085),
      inset 0 -3px 10px rgba(0, 0, 0, .18),
      0 4px 0 rgba(0, 0, 0, .18),
      0 14px 26px var(--shadow-014);
  }

  /* brillo circular superior */
  .gameBtn::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: var(--radius-pill);
    pointer-events: none;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .70), var(--spec-000) 60%);
    opacity: .8;
  }

  /* pulsación */
  .gameBtn:active {
    transform: translateY(2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75),
      inset 0 -3px 8px rgba(0, 0, 0, .18),
      0 2px 0 rgba(0, 0, 0, .20),
      0 10px 18px var(--shadow-012);
  }

  /* Letras A/Z grabadas en la barra (bajo relieve REAL) */
  #barra-progreso .letra-a,
  #barra-progreso .letra-z {
    font-weight: 900;
    font-size: 0.95rem;
    letter-spacing: .02em;
    user-select: none;
    /* truco de grabado: luz arriba, sombra abajo */
    text-shadow:
      0 1px 0 rgba(255, 255, 255, .75),
      /* luz */
      0 -1px 0 rgba(0, 0, 0, .30);
    /* sombra */
  }

  #barra-progreso .letra-a {
    color: rgba(37, 99, 235, .55);
    /* azul grabado */
  }

  #barra-progreso .letra-z {
    color: rgba(220, 38, 38, .52);
    /* rojo grabado */
  }

  #barra-progreso .letra-a,
  #barra-progreso .letra-z {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }

  #barra-progreso .letra-a {
    left: 6px;
  }

  #barra-progreso .letra-z {
    right: 6px;
  }

  /* ===== Glow de fila completo (detrás de toda la palabra) ===== */
  .guessRow,
  .tile {
    position: relative;
  }

  .tile {
    z-index: 2;
    /* tiles por encima del glow */
  }

  /* overlay “barra” detrás de la palabra */
  #board .guessRow.you::after,
  #board .guessRow.opp::after,
  #liveRow.you::after,
  #liveRow.opp::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: calc(var(--tile-h) + 10px);
    /* cubre la altura de tiles + margen */
    border-radius: var(--radius-12);
    z-index: 1;
    pointer-events: none;
    filter: blur(10px);
    opacity: .28;
  }

  /* azul */
  #board .guessRow.you::after,
  #liveRow.you::after {
    background: linear-gradient(to right,
        rgba(37, 99, 235, 0) 0%,
        rgba(37, 99, 235, .22) 18%,
        rgba(37, 99, 235, .32) 50%,
        rgba(37, 99, 235, .22) 82%,
        rgba(37, 99, 235, 0) 100%);
  }

  /* rojo */
  #board .guessRow.opp::after,
  #liveRow.opp::after {
    background: linear-gradient(to right,
        rgba(220, 38, 38, 0) 0%,
        rgba(220, 38, 38, .20) 18%,
        rgba(220, 38, 38, .30) 50%,
        rgba(220, 38, 38, .20) 82%,
        rgba(220, 38, 38, 0) 100%);
  }

  /* ===== Barra creciente de tiempo (no rompe width del JS) ===== */
  .statusBar {
    position: relative;
    overflow: hidden;
  }

  /* El fill debe permitir width dinámico (no usar inset/right) */
  .statusBar .statusFill,
  .statusBar .statusProgress,
  .statusBar .statusMeter,
  .statusBar .timeFill,
  .statusBar .timeBar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    /* IMPORTANTE: no fijar right, para que width (%) del JS funcione */
    right: auto;
    height: 100%;
    z-index: 2;
    /* sobre la base (: :after), bajo el brillo (::before) */
    opacity: .35;
    border-radius: var(--radius-12);
    pointer-events: none;
  }

  /* Colores por estado (si tu JS usa data-state como ya tienes en CSS) */
  .statusBar[data-state="your"] .statusFill,
  .statusBar[data-state="your"] .statusProgress,
  .statusBar[data-state="your"] .statusMeter,
  .statusBar[data-state="your"] .timeFill,
  .statusBar[data-state="your"] .timeBar {
    background: linear-gradient(to bottom, rgba(37, 99, 235, .55), rgba(37, 99, 235, .20));
  }

  .statusBar[data-state="opp"] .statusFill,
  .statusBar[data-state="opp"] .statusProgress,
  .statusBar[data-state="opp"] .statusMeter,
  .statusBar[data-state="opp"] .timeFill,
  .statusBar[data-state="opp"] .timeBar {
    background: linear-gradient(to bottom, rgba(220, 38, 38, .50), rgba(220, 38, 38, .18));
  }

  /* Asegura layering correcto: base debajo, brillo arriba, texto arriba del todo */
  .statusBar::after {
    z-index: 1;
  }

  .statusBar::before {
    z-index: 4;
  }

  /* ===== Barra creciente de tiempo (usa --p que setea el JS) ===== */


  .statusBar .timeFill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: auto;
    width: var(--p, 0%);
    height: 100%;
    z-index: 2;
    border-radius: var(--radius-12);
    pointer-events: none;
    /* 🔥 MÁS INTENSO */
    opacity: .78;
    filter: saturate(1.25) contrast(1.08);
    background: linear-gradient(var(--dir, to right),
        color-mix(in srgb, var(--pc, rgba(37, 99, 235, 0.35)) 92%, rgba(255, 255, 255, 0.10)) 0%,
        rgba(255, 255, 255, 0.06) 100%);
    /* glow sutil para que “respire” */
    box-shadow: 0 0 10px color-mix(in srgb, var(--pc, rgba(37, 99, 235, 0.35)) 65%, transparent);
  }

  /* Layering correcto con tus pseudo-elementos */


  /* Barra de tiempo: cuando juega el rival, crece de derecha a izquierda */
  .statusBar[data-state="opp"] .timeFill {
    left: auto;
    right: 0;
  }

  /* =========================================================
      Trofeo celebrate.svg con fondo transparente
      ========================================================= */

  img[src$="celebrate.svg"],
  svg[src$="celebrate.svg"],
  .trophy,
  .trophy img {
    background: transparent !important;
    background-color: transparent !important;
  }

  .trophyWrap,
  .endGameIcon,
  .modalIcon {
    background: transparent;
  }

  .hudContainer {
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  /* =========================================================
      PERFIL: igualar botones + arreglar engranaje + compactar
      (pegado al FINAL del style.css)
      ========================================================= */

  /* 1) Botón "Iniciar sesión con otro correo" IDÉNTICO al de Google:
         sin sombra/relieve, píldora blanca con borde azul */
  .gLikeBtn {
    background: var(--c-white) !important;
    border: 2px solid #1a73e8 !important;
    /* mismo “outline” */
    box-shadow: none !important;
    /* <- quita la sombra que te molesta */
    color: #3c4043 !important;
    /* gris Google */
  }

  .gLikeBtn:active {
    transform: none !important;
    /* Google no “baja” al pulsar */
  }

  .gLikeIcon {
    color: rgba(0, 0, 0, .55) !important;
  }

  /* 2) Engranaje del avatar: asegurar que NO quede tapado */
  .avatarPickerBtn.compact {
    overflow: visible !important;
    /* por si algún contenedor lo recorta */
  }

  .avatarGear {
    z-index: 5 !important;
    /* por encima del tile */
  }

  /* 3) Quitar “aire” debajo del botón de Google */
  #googleLoginSection {
    margin-bottom: 6px !important;
  }

  #googleBtnWrap,
  #googleLoginMsg {
    margin-bottom: 0 !important;
  }


  /* (opcional) divisor un pelín más pegado */
  .profileOrDivider {
    margin: 10px 0 8px !important;
    margin: 8px 0 !important;
  }

  /* ==========================
      PERFIL: compactar Google -> divisor "o"
      + evitar borde/outline azul
      ========================== */

  /* Divisor "o" más pegado */
  .profileLoginTop {
    margin-top: 4px;
  }

  .loginMsg {
    margin-top: 6px;
    font-size: 12px;
    opacity: .80;
  }

  /* Línea con texto dentro (compacta) */
  .profileOrDivider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 8px 0 10px;
    /* 👈 menos espacio */
    opacity: .80;
  }

  .profileOrDivider span {
    font-weight: 400;
    font-size: 12px;
    padding: 0 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-pill);
  }

  .emailLoginSection {
    margin-top: 0;
  }

  .btnEmailLogin {
    width: 100%;
    border-radius: var(--radius-pill);
    font-weight: 900;
  }

  .btnEmailLogin,
  .codeStep {
    margin-top: 10px;
  }

  .codeRow .profileNameInput,
  .emailRow #emailInput {
    flex: 1 1 auto;
    min-width: 0;
  }

  .btnResend {
    padding: 10px 14px;
    border-radius: var(--radius-pill);
    font-weight: 500;
  }

  /* Email en una sola línea: label + input */
  .emailRow {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .emailRow .emailLbl {
    margin: 0 !important;
    /* anula el margin-bottom típico del label */
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* input del código más estrecho */
  .codeRow .codeInput {
    flex: 0 0 110px;
    /* 👈 ajusta (100–130) a tu gusto */
    min-width: 90px;
    text-align: center;
    letter-spacing: 2px;
  }

  /* botones sin saltos de línea */
  #btnVerifyCode,
  #btnResendCode {
    white-space: nowrap;
  }

  /* Reenviar más compacto (opcional) */
  #btnResendCode.btnResend {
    padding: 10px 12px;
  }

  /* Slot donde vive el botón "Iniciar sesión" o la fila del código */
  .emailActionSlot {
    margin-top: 10px;
    /* 👈 centrado */
  }

  /* Cuando aparece el código, todo en una línea y centrado */
  .emailActionSlot,
  .codeRow {
    display: flex;
    justify-content: center;
  }

  .codeRow {
    gap: 10px;
    align-items: center;
    /* 👈 centrado horizontal */
    width: 100%;
  }

  /* Input del código más estrecho */
  .codeInput {
    width: 110px;
    /* 👈 reducido */
    flex: 0 0 auto;
    text-align: center;
    letter-spacing: 0.12em;
  }

  /* --- FIX definitivo: mismo ancho siempre y footer abajo full width --- */
  .modalCard {
    width: min(420px, calc(100vw - 24px)) !important;
  }

  .modalBody {
    padding-bottom: 12px !important;
    /* quita el hueco gigante */
  }

  .modalFooter {
    display: flex !important;
    flex-direction: column !important;
    /* uno debajo del otro */
    gap: 10px !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  .modalFooter>button {
    width: 100% !important;
    /* mismo ancho que “Guardar y jugar” */
  }

  .btnPrimary,
  .btnDanger,
  .loginBigBtn,
  .btnResend {
    font-weight: 500 !important;
  }

}

@layer screens {
  /* =========================================================
      PROFILE MODAL: look AlfaDuelo (glass + relieve)
      ========================================================= */

  .modalOverlay {
    /* más claro y “niebla” suave, sin apagar el fondo del juego */
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.8), var(--shadow-022));
    backdrop-filter: blur(2px);
  }

  .modalCard {
    /* “glass” sobre el fondo del juego */
    background: linear-gradient(to bottom, rgba(255, 255, 255, .68), rgba(255, 255, 255, .84)),
      radial-gradient(circle at 20% 0%, var(--spec-055), var(--spec-000) 55%);
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .35),
      inset 0 1px 0 rgba(255, 255, 255, .75),
      inset 0 -10px 18px rgba(0, 0, 0, .18);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
  }

  .modalCard::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 10px;
    height: 56px;
    border-radius: var(--radius-14);
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .65), rgba(255, 255, 255, .18), var(--spec-000));
    opacity: .9;
  }

  /* Header un pelín más “premium” */
  .modalHeader {
    border-bottom: 1px solid var(--shadow-010);
  }

  .modalTitle {
    text-shadow: 0 1px 0 rgba(255, 255, 255, .65);
  }

  /* ===== Estado sesión ON/OFF ===== */
  .profileAuthRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  .authPill {
    display: inline-flex;
    gap: 10px;
    padding: 8px 12px;
    font-weight: 900;
    letter-spacing: .06em;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .70), rgba(255, 255, 255, .25) 55%, rgba(0, 0, 0, .06));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75),
      inset 0 -3px 8px rgba(0, 0, 0, .18),
      0 4px 14px var(--shadow-016);
  }

  .authPill,
  .authIcon {
    align-items: center;
    border-radius: var(--radius-pill);
    border: 1px solid var(--shadow-012);
  }

  .authIcon {
    width: 22px;
    height: 22px;
    display: flex;
    justify-content: center;
    background: rgba(255, 255, 255, .70);
    box-shadow: inset 0 1px 0 var(--spec-085), 0 6px 16px var(--shadow-016);
    position: relative;
  }

  .authIcon::before {
    content: "🔌";
    font-size: 14px;
    line-height: 1;
  }

  /* OFF: enchufe con X */
  .authPill.off .authIcon::after {
    content: "✕";
    position: absolute;
    right: -4px;
    top: -6px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    background: rgba(220, 38, 38, .92);
    color: var(--c-white);
    border: 2px solid var(--spec-085);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .20);
  }

  /* ON: glow verde sutil */
  .authPill.on .authIcon {
    box-shadow: inset 0 1px 0 var(--spec-085),
      0 0 0 3px rgba(34, 197, 94, .14),
      0 10px 18px var(--shadow-016);
  }

  .authText,
  .loginMsg:empty {
    display: none;
  }

  /* ===== Nombre + avatar en una línea ===== */
  .profileTop {
    display: flex;
    align-items: flex-end;
    gap: 12px;
  }

  .profileNameCol,
  .emailLine .profileNameInput {
    flex: 1 1 auto;
    min-width: 0;
  }

  .profileLabelMini {
    font-size: 12px;
    opacity: .75;
  }

  .profileNameInput {
    width: 100%;
    max-width: none;
  }

  /* Avatar como tile del tablero */
  .avatarPickerBtn.compact {
    border: none;
    box-shadow: none;
  }

  /* Tile blanco con borde gris (no azul/rojo) */
  .avatarPickerBox {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-14);
    background: var(--c-white);
    /* borde gris (consistente) */
    border: 2px solid rgba(148, 163, 184, 0.95);
    /* relieve tipo tile */
    box-shadow: inset 0 1px 0 var(--spec-085),
      inset 0 -6px 10px var(--shadow-010),
      0 10px 22px var(--shadow-016);
  }

  .avatarPickerBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Engranaje fuera del tile, sin recorte */
  .avatarGear {
    right: -8px;
    top: -8px;
    font-weight: 900;
    background: rgba(17, 24, 39, .92);
    color: var(--c-white);
    border: 2px solid rgba(255, 255, 255, .90);
    box-shadow: 0 10px 18px rgba(0, 0, 0, .28);
    pointer-events: none;
  }

  /* Grid wrap más integrado */
  .avatarGridWrap {
    margin-top: 10px;
    background: linear-gradient(to bottom, var(--spec-055), rgba(255, 255, 255, .22));
    border: 1px solid var(--shadow-010);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75),
      0 10px 26px var(--shadow-014);
  }

  .avatarGridTitle {
    font-weight: 900;
    margin-bottom: 8px;
    opacity: .85;
  }

  /* ===== Login cards (Google + Email al mismo nivel) ===== */
  .loginChoices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  @media (max-width: 520px) {
    .loginChoices {
      grid-template-columns: 1fr;
    }

  }

  .loginCard {
    border-radius: var(--radius-16);
    border: 1px solid var(--shadow-010);
    background: linear-gradient(to bottom, rgba(255, 255, 255, .62), rgba(255, 255, 255, .28));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75),
      inset 0 -8px 14px var(--shadow-014),
      0 10px 22px var(--shadow-014);
    padding: 12px;
  }

  .loginCard.prefer {
    border-color: rgba(34, 197, 94, .25);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .10),
      inset 0 1px 0 rgba(255, 255, 255, .75),
      inset 0 -8px 14px var(--shadow-014),
      0 12px 24px var(--shadow-016);
  }

  .loginCardTitle {
    font-weight: 1000;
    font-size: 14px;
  }

  .loginCardSub {
    font-size: 12px;
    opacity: .72;
    margin-top: 2px;
    margin-bottom: 10px;
  }

  .loginCardBody {
    flex-direction: column;
  }

  .loginCardBody,
  .emailLine {
    display: flex;
    gap: 10px;
  }

  .emailLine {
    align-items: center;
  }

  .loginMsg {
    margin-top: 8px;
    font-size: 12px;
    opacity: .80;
  }


  /* Botón primario con un pelín más relieve en modal */
  .modalCard .btnPrimary {
    background: linear-gradient(to bottom, rgba(255, 255, 255, .70), rgba(255, 255, 255, .22)),
      #e9eef6;
    border: 1px solid var(--shadow-010);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75),
      inset 0 -6px 10px var(--shadow-014),
      0 8px 18px var(--shadow-014);
  }

  .modalCard .btnPrimary:active,
  .gLikeBtn:active {
    transform: translateY(1px);
  }

  /* Botón grande “tipo Google” para Email */
  .loginBigBtn {
    border: 1px solid var(--shadow-010);
    background: linear-gradient(to bottom, rgba(255, 255, 255, .72), rgba(255, 255, 255, .22)),
      #e9eef6;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .80),
      inset 0 -6px 10px var(--shadow-012),
      0 10px 18px var(--shadow-012);
  }

  /* Mensajes: ocultos si no hay error */


  .profileHeaderStatus {
    font-weight: 900;
    font-size: inherit;
    margin-left: 8px;
  }

  .profileHeaderStatus.is-guest {
    color: var(--c-red-600);
  }

  /* rojo */
  .profileHeaderStatus.is-on {
    color: #16a34a;
  }

  /* verde */

  /* Login: simple, sin cards */
  .loginChoices {
    display: block;
  }


  /* Estado junto al título */
  .profileHeaderStatus.is-on {
    color: #1f8a3b;
    font-weight: 900;
  }

  .profileHeaderStatus.is-guest {
    color: #c53b3b;
    font-weight: 900;
  }

  /* Top login */
  .profileLoginTop {
    margin-top: 2px;
  }

  .googleBtnWrap {
    display: flex;
    justify-content: flex-start;
  }

  /* Divisor "o" */
  .profileOrDivider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 12px 0;
    opacity: .75;
  }

  .profileOrDivider::before,
  .profileOrDivider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(0, 0, 0, .18);
  }

  .profileOrDivider span {
    font-weight: 400;
    /* 👈 sin negrita */
    font-size: 12px;
    padding: 0 10px;
    background: transparent;
    /* 👈 sin fondo */
    border: none;
  }

  /* Botón grande (manual) */
  .loginBigBtn {
    width: 100%;
    border: 0;
    padding: 12px 14px;
    background: var(--spec-085);
    box-shadow: inset 0 1px 0 var(--spec-085),
      0 10px 24px var(--shadow-012);
  }

  /* Campos */
  .profileField {
    margin-top: 8px;
  }

  .profileLabelMini {
    font-weight: 900;
    opacity: .85;
    margin-bottom: 6px;
  }

  /* Avatar como “tile” (rectángulo redondeado, interior blanco, borde gris) */
  .avatarPickerBtn.compact {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .avatarPickerBox {
    width: 76px;
    height: 76px;
    border-radius: var(--radius-16);
    background: rgba(255, 255, 255, .95);
    border: 2px solid var(--shadow-025);
    /* gris */
    box-shadow: inset 0 2px 0 var(--spec-085),
      inset 0 -6px 12px var(--shadow-010),
      0 10px 22px var(--shadow-014);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .avatarPickerBox img {
    width: 92%;
    height: 92%;
    object-fit: contain;
  }

  .avatarGear {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(0, 0, 0, .15);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
    font-size: 16px;
  }

  /* Bloque avatar */
  /* CTA final */
  .profileAvatarBlock,
  .btnProfileSave {
    margin-top: 12px;
  }

  .btnProfileSave {
    width: 100%;
    border-radius: var(--radius-pill);
    font-weight: 500;
  }

  /* ===== Perfil: identidad arriba siempre ===== */
  .profileIdentityTop {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 2px;
  }

  .profileIdentityTop .profileField {
    margin-top: 0;
  }

  /* Mantén el avatar como “tile” (ya lo tenías), pero asegúrate que la ruedecita no se corta */
  .avatarPickerBtn.compact {
    position: relative;
  }

  .avatarGear {
    position: absolute;
    right: -6px;
    top: -6px;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(0, 0, 0, .18);
    box-shadow: inset 0 1px 0 var(--spec-085),
      0 6px 14px var(--shadow-016);
    font-size: 14px;
    line-height: 1;
    z-index: 5;
  }

  /* ===== Botón “igual que Google” (píldora blanca con borde azul) ===== */
  .avatarGear,
  .gLikeBtn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .gLikeBtn {
    width: 260px;
    /* como el botón típico de Google */
    height: 44px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 95);
    border: 2px solid #1a73e8;
    /* azul Google */
    gap: 10px;
    padding: 0 16px;
    cursor: pointer;
    font-weight: 700;
    color: rgba(0, 0, 0, 80);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 90),
      0 10px 18px rgba(0, 0, 0, 10);
  }

  .gLikeIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 55);
  }

  /* ================================
      PERFIL: FIXES finales (pegar al FINAL)
      ================================ */

  /* 1) Quitar huecos si el mensaje está vacío (esto elimina el “aire” bajo Google) */
  .loginMsg:empty,
  #googleLoginMsg:empty {
    display: none !important;
  }

  #googleLoginMsg:empty {
    margin: 0 !important;
    padding: 0 !important;
  }

  #googleLoginSection {
    margin-bottom: 8px !important;
  }

  /* 2) Botón “otro correo” con el MISMO look limpio que Google (sin borde azul ni sombra) */
  .loginBigBtn {
    width: 260px;
    height: 44px;
    border-radius: var(--radius-pill);
    background: var(--c-white) !important;
    border: 1px solid #dadce0 !important;
    /* borde gris Google */
    box-shadow: none !important;
    /* fuera sombras */
    outline: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
    cursor: pointer;
    font-weight: 500;
    color: #3c4043;
    /* gris Google */
  }

  .loginBigBtn:active {
    transform: none !important;
    /* Google no “baja” */
  }

  .loginBigBtn .loginBigIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    opacity: .9;
  }

  /* 3) Engranaje del avatar: forzar que se vea (no solo la burbuja) */
  #avatarPickerBtn.avatarPickerBtn.compact {
    position: relative !important;
    overflow: visible !important;
  }

  #avatarPickerBtn .avatarGear {
    position: absolute !important;
    right: -6px !important;
    top: -6px !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, .92) !important;
    border: 1px solid rgba(0, 0, 0, .20) !important;
    box-shadow: 0 6px 14px var(--shadow-016) !important;
    color: #111 !important;
    /* <-- clave: el símbolo ahora se ve */
    font-size: 16px !important;
    line-height: 1 !important;
    z-index: 20 !important;
    pointer-events: none !important;
  }

}

@layer utilities {
  /* =========================
      Responsive compactación por longitud
      (compactado sin tocar reglas base)
      ========================= */

  /* LEN6 */
  body.len6 .guessRow {
    --tile-w: 32px;
    --tile-h: 38px;
    --gap-x: 2px;
  }

  body.len6 .hint .icono-dir {
    width: 20px;
    height: 20px;
  }

  /* LEN7 */
  body.len7 .guessRow {
    --tile-w: 30px;
    --tile-h: 36px;
    --gap-x: 2px;
  }

  body.len7 .tile {
    font-size: 22px;
  }

  body.len7 .hint {
    font-size: 14px;
  }

  body.len7 .hint .icono-dir {
    width: 18px;
    height: 18px;
    margin-right: 4px;
  }

  body.len7 .hint .dist {
    margin-left: 4px;
  }

  /* Móvil estrecho */
  @media (max-width:380px) {
    body.len6 .guessRow {
      --tile-w: 30px;
      --tile-h: 36px;
      --gap-x: 4px;
    }

    body.len7 .guessRow {
      --tile-w: 26px;
      --tile-h: 32px;
      --gap-x: 2px;
    }

    body.len7 .tile {
      font-size: 18px;
      border-radius: 7px;
    }

    body.len7 .hint {
      font-size: 13px;
    }

    body.len7 .hint .icono-dir {
      width: 16px;
      height: 16px;
      margin-right: 4px;
    }

    body.len7 .hint .dist {
      margin-left: 4px;
    }

  }

  /* Auto-compact por overflow (JS añade .compact / .compact2) */
  .guessRow.compact {
    --tile-w: 26px;
    --tile-h: 32px;
    --gap-x: 2px;
  }

  .guessRow.compact2 {
    --tile-w: 23px;
    --tile-h: 30px;
    --gap-x: 1px;
  }

}

/* =========================================================
   ANIMACIONES AlfaDuelo (tiles / status / tiempo)
   Pegar al FINAL del style.css
   ========================================================= */

/* --- 1) Pop al escribir letra en liveRow --- */
@keyframes tile-pop {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
  }

}

/* SOLO en la liveRow */
#liveRow .tile.tile-enter {
  animation: tile-pop 140ms cubic-bezier(.2, .8, .2, 1);
}

/* --- 2) Revelado tile-a-tile (flip suave) --- */
@keyframes tile-flip-soft {
  0% {
    transform: perspective(600px) rotateX(0deg) scale(1);
  }

  40% {
    transform: perspective(600px) rotateX(-70deg) scale(.98);
  }

  100% {
    transform: perspective(600px) rotateX(0deg) scale(1);
  }

}

/* Aplica a tiles ya pintados (correct/absent/present) */
.tile.tile-reveal {
  transform-origin: center;
  backface-visibility: hidden;
  animation: tile-flip-soft 220ms cubic-bezier(.2, .8, .2, 1) both;
}

/* --- 3) Status text slide al cambiar de turno --- */
@keyframes status-slide-left {
  0% {
    transform: translateX(8px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }

}

@keyframes status-slide-right {
  0% {
    transform: translateX(-8px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }

}

.statusText.status-in-left {
  animation: status-slide-left 180ms cubic-bezier(.2, .8, .2, 1) both;
}

.statusText.status-in-right {
  animation: status-slide-right 180ms cubic-bezier(.2, .8, .2, 1) both;
}

/* --- 4) Barra de tiempo: pulso al final --- */
@keyframes time-pulse-soft {

  0%,
  100% {
    filter: saturate(1.25) contrast(1.08);
    opacity: .78;
  }

  50% {
    filter: saturate(1.55) contrast(1.15);
    opacity: .92;
  }

}

@keyframes time-pulse-critical {

  0%,
  100% {
    opacity: .80;
  }

  50% {
    opacity: 1;
  }

}

/* Solo cuando JS añada estas clases */
.statusBar.time-low .timeFill {
  animation: time-pulse-soft 900ms ease-in-out infinite;
}

.statusBar.time-critical .timeFill {
  animation: time-pulse-critical 450ms ease-in-out infinite;
}

/* (Opcional) micro “asentamiento” al enviar guess: lo usamos desde JS si quieres */
@keyframes row-settle {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(2px);
  }

  100% {
    transform: translateY(0);
  }

}

.guessRow.row-settle {
  animation: row-settle 160ms ease both;
}

/* --- 5) Tecla pulsada (click + teclado físico) --- */
@keyframes key-press {
  0% {
    transform: translateY(0) scale(1);
  }

  60% {
    transform: translateY(2px) scale(.97);
  }

  100% {
    transform: translateY(0) scale(1);
  }

}

.tecla.is-pressed {
  animation: key-press 110ms cubic-bezier(.2, .8, .2, 1);
}

/* --- 6) Borrado en liveRow (EXAGERADO) --- */
@keyframes tile-delete {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    filter: none;
  }

  15% {
    transform: scale(1.22) rotate(-7deg);
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, .35));
  }

  35% {
    transform: scale(.72) rotate(10deg);
    opacity: .30;
    filter: drop-shadow(0 0 16px rgba(0, 0, 0, .45));
  }

  55% {
    transform: scale(1.14) rotate(-6deg);
    opacity: .95;
    filter: drop-shadow(0 0 12px rgba(0, 0, 0, .35));
  }

  70% {
    transform: scale(.92) rotate(4deg);
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, .25));
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    filter: none;
  }

}

/* SOLO en liveRow */
#liveRow .tile.tile-delete {
  animation: tile-delete 320ms cubic-bezier(.2, 1.8, .2, 1) both;
  transform-origin: center;
  will-change: transform, opacity, filter;
}

/* --- 7) Avatar del turno (latido suave) --- */
@keyframes avatar-pulse {

  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: saturate(1);
  }

  50% {
    transform: translateY(-1px) scale(1.02);
    filter: saturate(1.12);
  }

}

.duelAvatar.turn-active {
  animation: avatar-pulse 900ms ease-in-out infinite;
}

/* --- 8) Pop de la marca nueva en barra de progreso (EXAGERADO) --- */
@keyframes mark-pop {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    filter: none;
  }

  20% {
    transform: translateY(-10px) scale(1.55) rotate(-8deg);
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, .35));
  }

  45% {
    transform: translateY(3px) scale(.92) rotate(6deg);
    filter: drop-shadow(0 0 16px rgba(0, 0, 0, .45));
  }

  70% {
    transform: translateY(-6px) scale(1.35) rotate(-4deg);
    filter: drop-shadow(0 0 12px rgba(0, 0, 0, .35));
  }

  100% {
    transform: translateY(0) scale(1) rotate(0deg);
    filter: none;
  }

}

/* La animación solo cuando JS añada mark-pop */
.marca-intento.last.mark-pop {
  animation: mark-pop 520ms cubic-bezier(.2, 1.8, .2, 1) both;
  transform-origin: center;
  will-change: transform, filter;
}

/* =========================================================
   ANIM: “Paquetito” (liveRow -> barra progreso)
   Pegar al FINAL del style.css
   ========================================================= */

.guessParcel {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  pointer-events: none;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .95);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .22),
    0 0 0 2px rgba(255, 255, 255, .18) inset;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  will-change: transform, filter, opacity;
}

.guessParcel.you {
  background: linear-gradient(to bottom, rgba(37, 99, 235, .95), rgba(37, 99, 235, .72));
}

.guessParcel.opp {
  background: linear-gradient(to bottom, rgba(220, 38, 38, .95), rgba(220, 38, 38, .72));
}

.guessParcel.violet {
  background: var(--violet, #8a2be2);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .25), 0 0 12px rgba(138, 43, 226, .35);
  color: rgba(255, 255, 255, .95);
}

/* “cinta” superior para que parezca paquetito */
.guessParcel::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 2px;
  height: 40%;
  border-radius: 8px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08));
  opacity: .55;
  pointer-events: none;
}

/* mini “impacto” cuando llega a la marca */
@keyframes mark-impact {
  0% {
    transform: translateY(0) scale(1);
  }

  35% {
    transform: translateY(-6px) scale(1.35);
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, .35));
  }

  70% {
    transform: translateY(2px) scale(.92);
  }

  100% {
    transform: translateY(0) scale(1);
    filter: none;
  }

}

.marca-intento.impact {
  animation: mark-impact 260ms cubic-bezier(.2, 1.6, .2, 1) both;
}

.start-anim-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 9999;
}

.start-anim-media {
  width: min(240px, 42vw);
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35));
  transform-origin: center;
}

#startAnimOverlay {
  display: none !important;
}

#startAnimMedia {
  display: none !important;
}

.flying-packet {
  position: fixed;
  width: 22px;
  height: 16px;
  border-radius: 6px;
  background: var(--violet, #8a2be2);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .25);
  pointer-events: none;
  z-index: 10000;
}

/* ===== Trofeo ===== */
.trophySlot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.trophyBadge {
  position: absolute;
  right: -6px;
  top: -6px;
  width: 42px;
  z-index: 7;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: transparent;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
  transform: rotate(-6deg);
}

.trophyBadge img {
  width: 42px;
  height: 42px;
  display: block;
}

.trophyFloat {
  position: fixed;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  z-index: 9999;
  pointer-events: none;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .35));
}

.trophyFloat img {
  width: 42px;
  height: 42px;
  display: block;
}

/* ===== ELO anim ===== */
#youEloHud,
#oppEloHud {
  display: inline-block;
  transform-origin: center;
}

.eloUp {
  filter: drop-shadow(0 0 10px rgba(34, 197, 94, .35));
}

.eloDown {
  filter: drop-shadow(0 0 10px rgba(239, 68, 68, .35));
}

.eloTick {
  animation: eloTickPop 140ms ease-out;
}

@keyframes eloTickPop {
  0% {
    transform: scale(1);
  }

  55% {
    transform: scale(1.22);
  }

  100% {
    transform: scale(1);
  }

}

/* El brillo del marco NO debe tapar badges */
.duelAvatar.you::after,
.duelAvatar.opp::after {
  z-index: 2;
}

/* Trofeo SIEMPRE por encima del avatar y su brillo */
.trophySlot {
  z-index: 30;
}

.trophyBadge {
  z-index: 31;
}

/* =========================
   ELO: MODO CEREMONIA (SOLO DURANTE CONTEO)
   ========================= */

/* Base SIEMPRE neutra (sin placa, sin sombras, sin fondo) */
/* Wrapper del número (solo esto crece/brilla) */
.eloCountFx {
  display: inline-block;
  transform-origin: 50% 50%;
  will-change: transform, filter;
}

/* “Ceremonia” = más grande, pero SOLO el wrapper */
.eloCountFx.eloBigMode {
  transform: scale(1.22);
}

/* Pulso SOLO wrapper */
.eloCountFx.eloPulse {
  animation: eloPulseBig .22s ease-in-out infinite alternate;
}

@keyframes eloPulseBig {
  from {
    transform: scale(1.22);
  }

  to {
    transform: scale(1.35);
  }

}

/* Glow SOLO wrapper (sin tocar scale aquí) */
.eloCountFx.eloCountingUp {
  animation: eloGlowUpBig .28s ease-in-out infinite alternate;
}

.eloCountFx.eloCountingDown {
  animation: eloGlowDownBig .28s ease-in-out infinite alternate;
}

@keyframes eloGlowUpBig {
  from {
    filter: brightness(1.1) drop-shadow(0 0 10px rgba(60, 200, 120, .35));
  }

  to {
    filter: brightness(1.55) drop-shadow(0 0 26px rgba(60, 255, 160, .85));
  }

}

@keyframes eloGlowDownBig {
  from {
    filter: brightness(1.1) drop-shadow(0 0 10px rgba(240, 80, 80, .35));
  }

  to {
    filter: brightness(1.55) drop-shadow(0 0 26px rgba(255, 90, 90, .88));
  }

}

/* Shake SOLO wrapper (ojo: esto pisa transform; por eso lo hacemos con translate/rotate pero el scale lo lleva eloPulse) */
.eloCountFx.eloShake {
  animation: eloShakeBig .09s linear infinite;
}

@keyframes eloShakeBig {
  0% {
    filter: none;
  }

  25% {
    filter: drop-shadow(0 0 18px rgba(0, 0, 0, .35));
  }

  50% {
    filter: drop-shadow(0 0 22px rgba(0, 0, 0, .40));
  }

  75% {
    filter: drop-shadow(0 0 18px rgba(0, 0, 0, .35));
  }

  100% {
    filter: none;
  }

}

/* =========================================================
   ANIM: “Delta ELO volando” (palabra final -> puntos ELO)
   ========================================================= */
.eloFlyDelta {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  pointer-events: none;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .02em;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .22),
    0 0 0 2px rgba(255, 255, 255, .10) inset;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  will-change: transform, opacity, filter;
  transform-origin: center;
}

.eloFlyDelta.up {
  background: rgba(40, 180, 110, 1);
  color: #b9ffdc;
  border: 1px solid rgba(40, 180, 110, 1);
}

.eloFlyDelta.down {
  background: rgba(230, 70, 70, 1);
  color: #ffd0d0;
  border: 1px solid rgba(230, 70, 70, 1);
}

/* =========================================================
   UI: Tirador lateral para menú
   ========================================================= */
.menuTab {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20050;
  width: 26px;
  height: 130px;
  border: 0;
  padding: 0;
  cursor: pointer;
  /* Fondo con ligero degradado vertical → sensación de volumen */
  background: linear-gradient(to bottom,
      rgba(234, 234, 234, 0.95),
      rgba(169, 169, 169, 0.95));
  /* Relieve exterior */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35),
    /* sombra principal */
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    /* luz superior */
    inset 0 -2px 3px rgba(0, 0, 0, 0.35);
  /* sombra inferior */

  border-radius: 0 26px 26px 0;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.menuTab:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4);
  transform: translateY(-50%) translateX(2px);
}

.menuTab:active {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.45),
    inset 0 2px 4px rgba(0, 0, 0, 0.55);
  transform: translateY(-50%) translateX(1px);
}

/* El “grip” (las rayitas) centrado */
.menuTab__grip {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menuTab__grip i {
  display: block;
  width: 16px;
  height: 3px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.45);
}

/* Accesibilidad: foco visible */
.menuTab:focus {
  outline: none;
}

.menuTab:focus-visible {
  box-shadow: 0 0 0 3px rgba(80, 140, 255, 0.55), 0 10px 25px rgba(0, 0, 0, 0.18);
}

.menuTab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.25),
      rgba(0, 0, 0, 0.35));
}

/* =========================
   Menú / Ajustes / Soporte
   ========================= */
.menuList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menuItemBtn {
  width: 100%;
  justify-content: center;
}

.menuDivider {
  height: 1px;
  opacity: .25;
  background: #fff;
  margin: 6px 0;
}

.togglePill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  user-select: none;
}

.togglePill input {
  transform: scale(1.1);
}

/* =========================
   Ajustes: modal más compacto
   ========================= */
.modalCard--settings {
  width: min(320px, calc(100vw - 44px)) !important;
  /* ✅ más estrecho */
  padding: 12px !important;
  /* coloca max-height para que use el 80% de la pantalla, pero restando el espacio del header (que es fijo) */
}

.modalCard--settings .modalBody {
  padding: 10px 2px 8px !important;
}

/* =========================
     Toggle icono (sin checkbox visible)
     ========================= */
.toggleIcon {
  padding: 8px 10px;
  gap: 0;
}

.toggleIcon input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.toggleIconWrap {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
}

.toggleIconWrap svg {
  width: 20px;
  height: 20px;
}

/* Por defecto mostramos "ON" y ocultamos "OFF" */
.toggleIconWrap .icoOn {
  display: block;
}

/* Cuando el checkbox está checked: mostramos el icono "tachado" */
.toggleIconWrap .icoOff,
.toggleIcon input:checked+.toggleIconWrap .icoOn {
  display: none;
}

.toggleIcon input:checked+.toggleIconWrap .icoOff {
  display: block;
}

.legalText h3 {
  margin: 10px 0 6px;
}

.legalText p {
  margin: 0 0 10px;
  opacity: .9;
  line-height: 1.35;
}

.supportForm {
  gap: 12px;
}

.supportForm,
.formField {
  display: flex;
  flex-direction: column;
}

.formField {
  gap: 6px;
}

.formField>span {
  font-size: 12px;
  opacity: .85;
  font-weight: 700;
}

.supportForm input,
.supportForm textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  outline: none;
}

.supportForm textarea {
  resize: vertical;
  min-height: 96px;
}

.supportForm select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  outline: none;
}

.formStatus {
  font-size: 12px;
  opacity: .9;
  min-height: 16px;
}

.modalFooterStack {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.modalFooterStack button {
  flex: 1;
}

.profileFooter {
  align-items: center;
  flex-wrap: wrap;
}

.profileFooterRight {
  margin-left: auto;
  display: flex;
  gap: 10px;
}

/* =========================================================
   MENÚ “SIEMPRE VISIBLE” (se oculta con translateX negativo)
   ========================================================= */
:root {
  --menu-panel-w: 50px;
  /* ancho del panel de iconos */
  --menu-tab-w: 36px;
  /* separación visual */
}

/* Panel completo: iconos + tirador (una sola pieza) */
.menuPanel {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translate(calc(-1 * var(--menu-panel-w)), -50%);
  /* ✅ cerrado: solo asoma el tirador */
  width: calc(var(--menu-panel-w) + var(--menu-tab-w));
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: transform .22s ease;
  pointer-events: auto;
}

/* Abierto */
.menuPanel.open {
  transform: translate(0, -50%);
}

/* Cuerpo iconos */
.menuBody {
  width: var(--menu-panel-w);
  padding: 2px;
  border-radius: 0 16px 16px 0;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Iconos compactos */
.menuIconGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.menuIconBtn {
  width: 100%;
  height: 40px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.menuIconBtn svg {
  width: 22px;
  height: 22px;
  fill: rgba(0, 0, 0, 1);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35));
}

/* 3 rayitas */
.menuTabGrip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 2px;
  background: rgba(20, 20, 20, 0.5);
  border-radius: 2px;
  box-shadow: 0 -8px 0 rgba(20, 20, 20, 0.5),
    0 8px 0 rgba(20, 20, 20, 0.5);
}

/* =========================================================
   MENÚ LATERAL: PIEZA ÚNICA (SILUETA TIPO “LLAVE” con SVG mask)
   ========================================================= */
:root {
  --menu-body-w: 54px;
  /* zona iconos visible al abrir */
  --menu-tab-w: 26px;
  /* cuánto “asoma” en cerrado */
  --menu-item-h: 42px;
  --menu-items: 5;
  /* ⚠️ tienes 5 botones */
  --menu-pad-y: 8px;
  /* alto total del panel (iconos + aire) */
  --menu-h: calc(var(--menu-items) * var(--menu-item-h) + (var(--menu-pad-y) * 2));
}

/* contenedor (se mueve en X con --menu-x) */
#menuPanel.menuPanel {
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 20050;
  height: var(--menu-h);
  width: calc(var(--menu-body-w) + var(--menu-tab-w));
  /* cerrado: solo asoma la pestaña */
  --menu-x: calc(-1 * var(--menu-body-w));
  transform: translate(var(--menu-x), -50%);
  transition: transform .22s ease;
  display: block;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  /* para el drag horizontal en móvil sin romper scroll vertical */
  touch-action: pan-y;
  /* IMPORTANTE: para poder poner la “pieza” como pseudo-elemento */
  overflow: visible;
}

#menuPanel.menuPanel.open {
  --menu-x: 0px;
}

/* ===== La PIEZA ÚNICA (fondo) =====
   Usamos máscara SVG para dar la forma exacta. */
#menuPanel.menuPanel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg,
      rgba(136, 136, 136, 0.38),
      rgba(206, 206, 206, 0.18) 45%,
      rgba(169, 169, 169, 0.1));
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.45),
    inset -2px -2px 4px rgba(0, 0, 0, 0.22),
    0 14px 30px rgba(0, 0, 0, 0.25),
    0 4px 10px rgba(0, 0, 0, 0.18);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.30)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.20));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-mask-image: url("./icons/menu-shape.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-image: url("./icons/menu-shape.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
}

/* ===== Contenido por encima del fondo ===== */
#menuPanel .menuPanelBody {
  position: relative;
  z-index: 1;
  width: var(--menu-body-w);
  height: 100%;
  padding: var(--menu-pad-y) 0;
  /* ya NO pintamos “bloque” (porque lo pinta la pieza única) */
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* tus contenedores internos */
#menuPanel .menuIconBody {
  padding: 0;
}

#menuPanel .menuIconGrid {
  gap: 0;
}

/* botones */
#menuPanel .menuIconBtn {
  width: 100%;
  height: var(--menu-item-h);
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translateX(-6px);
}

#menuPanel .menuIconBtn:active {
  transform: scale(0.98);
}

/* iconos */
#menuPanel .menuIconBtn svg {
  width: 22px;
  height: 22px;
  fill: rgba(0, 0, 0, 1);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35));
}

/* ===== Tirador: solo área clic/drag, SIN “dibujar” nada ===== */
#menuPanel .menuPanelTab {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--menu-tab-w);
  height: 112px;
  /* coincide con barriga central */
  border: 0;
  background: transparent;
  padding: 0;
  cursor: grab;
  pointer-events: auto;
}

#menuPanel .menuPanelTab:active {
  cursor: grabbing;
}

/* grip (las 3 rayas) centrado en la barriga */
#menuPanel .menuPanelGrip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 2px;
  background: rgba(20, 20, 20, 0.50);
  border-radius: 2px;
  box-shadow: 0 -8px 0 rgba(20, 20, 20, 0.50),
    0 8px 0 rgba(20, 20, 20, 0.50);
}

#menuPanel.menuPanel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120px 120px at 20% 10%,
      rgba(255, 255, 255, 0.40),
      transparent 65%);
  -webkit-mask: url("./icons/menu-shape.svg") center / 100% 100% no-repeat;
  mask: url("./icons/menu-shape.svg") center / 100% 100% no-repeat;
}

/* ============================================================
   REDISEÑO DEL MODAL DE AJUSTES (ESTRECHO Y COMPACTO)
   ============================================================ */

/* 1. Hacer el modal mucho más estrecho */
#settingsOverlay {
  max-width: 320px;
  /* 👈 Ancho máximo estilo móvil */
  width: 90%;
  /* Para que en pantallas muy pequeñas no se corte */
  margin: 7px auto;
  /* Centrado horizontal */
  padding: 4px;
  border-radius: 16px;
  /* Bordes más redondeados */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  height: 300px;
  z-index: 10001;
}

/* 2. Reducir la separación entre líneas */
#settingsOverlay .settingsRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  /* 👈 Separación reducida (antes era 24px) */
  min-height: 50px;
  /* Altura mínima para que no se peguen del todo */
}

/* 3. Iconos mucho más grandes */
#settingsOverlay .settingsRow svg,
#settingsOverlay .toggleIconWrap svg,
#settingsOverlay .togglePill svg {
  width: 32px !important;
  /* 👈 Tamaño de iconos aumentado */
  height: 32px !important;
  transition: transform 0.2s ease;
}

/* Ajuste del texto (Label) */
#settingsOverlay .settingsLabel {
  flex: 1;
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  margin: 0 10px;
  /* Espacio horizontal para que no pegue al icono */
}

/* --- CAMBIO QUIRÚRGICO: FILA DE VOLUMEN --- */

/* 1. Quitamos anchos fijos y márgenes que empujaban la barra hacia arriba */
#settingsOverlay .settingsRangeWrap {
  margin-top: 0 !important;
  margin-bottom: 0;
  flex: 1 !important;
  /* Ahora es flexible, no fija */
  width: auto !important;
  display: flex;
  align-items: center;
}

/* 2. Re-estructuramos la fila de volumen como un pequeño grid */
#settingsOverlay .settingsRow--volume {
  display: grid !important;
  grid-template-columns: auto 1fr;
  /* Icono a la izq (auto), resto a la derecha (1fr) */
  column-gap: 15px;
  row-gap: 4px;
  align-items: center;
}

/* 3. El icono ocupa las dos filas de altura para estar centrado */
#settingsOverlay .settingsRow--volume svg {
  grid-row: 1 / 3;
  width: 46px !important;
  height: 46px !important;
}

/* 4. El texto "Volumen" arriba a la derecha del icono */
#settingsOverlay .settingsRow--volume .settingsLabel {
  grid-column: 2;
  grid-row: 1;
  min-width: 0 !important;
  /* Eliminamos el min-width de 82px */
  margin: 0 !important;
  padding: 0 !important;
}

/* 5. La barra de volumen debajo del texto, ocupando el ancho justo */
#settingsOverlay .settingsRow--volume .settingsRangeWrap {
  grid-column: 2;
  grid-row: 2;
  /* 👈 Cambiamos 100% por calc para dejar 20px de margen a la derecha */
  width: calc(100% - 20px) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
}

#settingsOverlay .settingsRow--volume input[type="range"] {
  width: 100% !important;
  margin: 0;
  cursor: pointer;
}

/* ===== Consentimiento Perfil ===== */
.profileConsentBlock {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}

.consentCheck {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.consentCheck input {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.consentCheck span {
  flex: 1;
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
}

.profileFootnote {
  margin-top: 10px;
  font-size: 11px;
  opacity: .8;
  line-height: 1.3;
}

/* ===== Profile footer: fila única de acciones ===== */
.profileFooter {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profileDangerRow {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  /* ✅ siempre en una fila */
  align-items: center;
}

.profileDangerRow>button {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px;
  font-size: 13px;
  border-radius: 999px;
}

/* Botón “gris relieve” + texto rojo */
.btnReliefDanger {
  border: 1px solid rgba(0, 0, 0, .10);
  background: linear-gradient(to bottom, rgba(255, 255, 255, .72), rgba(255, 255, 255, .22)),
    #e9eef6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .80),
    inset 0 -6px 10px rgba(0, 0, 0, .12),
    0 10px 18px rgba(0, 0, 0, .12);
  color: #000000;
  font-weight: 400;
  /* ✅ sin negrita */
  font-family: inherit;
  /* ✅ mismo tipo */
}

/* Botón secundario neutro (perfil) */
.btnRelief {
  border: 1px solid rgba(2, 6, 23, 0.18);
  background: rgba(2, 6, 23, 0.04);
  color: #0f172a;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 700;
}

.btnRelief:hover {
  background: rgba(2, 6, 23, 0.06);
}

.btnRelief:active {
  transform: translateY(1px);
}

/* =========================
   Visor / Espectador (partida de tu rival)
   ========================= */
#spectatorOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(2, 6, 23, .55);
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.spectatorModal {
  width: min(640px, 96vw);
  max-height: min(82vh, 720px);
  background: #fff;
  border: 1px solid rgba(2, 6, 23, .10);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
  display: flex;
  flex-direction: column;
}

.spectatorHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(2, 6, 23, .10);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(2, 6, 23, .02));
}

.spectatorTitle {
  font-weight: 900;
  color: #0f172a;
}

.spectatorBody {
  padding: 12px;
  overflow: auto;
}

.spectatorNamesLine {
  opacity: .9;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 10px;
}

/* HUD tipo partida real: Jugador --- barra --- Rival */
.spectatorDuelNamesGrid {
  --center-gap: 120px;
}

.spectatorClockSplit {
  width: var(--center-gap);
  height: 10px;
  background: rgba(2, 6, 23, .10);
  display: flex;
}

#spectatorBlueFill {
  height: 100%;
  width: 50%;
  background: rgba(37, 99, 235, .75);
}

#spectatorRedFill {
  height: 100%;
  width: 50%;
  background: rgba(220, 38, 38, .75);
}

.spectatorStatusBar {
  margin-top: 6px;
  margin-bottom: 10px;
}

/* Board */
#spectatorBoard {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.spectatorRow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.spectatorRow .guessRow {
  flex: 0 0 auto;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.spectatorGuessMeta {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  font-weight: 800;
  font-size: 12px;
  color: rgba(15, 23, 42, .75);
  white-space: nowrap;
}

.spectatorGuessMeta .dist,
.spectatorGuessMeta .dir {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(2, 6, 23, .06);
  border: 1px solid rgba(2, 6, 23, .10);
}

/* Distancia/flecha por jugador */
.spectatorRow.you .spectatorGuessMeta .dist,
.spectatorRow.you .spectatorGuessMeta .dir {
  color: var(--c-blue-600);
  border-color: rgba(37, 99, 235, .35);
  background: rgba(37, 99, 235, .08);
}

.spectatorRow.opp .spectatorGuessMeta .dist,
.spectatorRow.opp .spectatorGuessMeta .dir {
  color: var(--c-red-600);
  border-color: rgba(220, 38, 38, .35);
  background: rgba(220, 38, 38, .08);
}

/* Animación letra-a-letra (como liveRow, pero en visor) */
#spectatorBoard .tile.tile-enter {
  animation: tile-pop 140ms cubic-bezier(.2, .8, .2, 1);
  animation-fill-mode: both;
}

/* =========================
   Amigos
   ========================= */
.friendsTopRow {
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.friendsTopRow,
.inviteLinkBox {
  display: flex;
  align-items: center;
}

.inviteLinkBox {
  gap: 8px;
  flex: 1;
  min-width: 220px;
}

.inviteLinkInput {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(2, 6, 23, 0.15);
  background: #fff;
}

#friendsSearchInput {
  flex: 1 1 auto;
  /* CLAVE: evita que empuje el botón fuera del modal */
}

.friendsList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.friendRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.04);
}

.friendLed {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}

.friendLed.on {
  background: #16a34a;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15);
}

.friendLed.busy {
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15);
}

.friendAvatar {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  object-fit: cover;
  background: #1118271a;
}

.friendName {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friendRating {
  font-variant-numeric: tabular-nums;
}

.friendActions {
  margin-left: auto;
  /* CLAVE: acciones al extremo derecho */
  display: flex;
  gap: 8px;
  align-items: center;
}

.friendIconBtn.challenge:hover {
  filter: brightness(0.95);
}

.friendIconBtn.remove {
  background: rgba(255, 255, 255, 0.65);
}

.friendIconBtn.add:disabled {
  color: #64748b;
  /* gris cuando está deshabilitado */
}

.friendTinyBtn {
  border: 1px solid rgba(2, 6, 23, 0.18);
  background: rgba(255, 255, 255, 0.7);
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 800;
}

.friendTinyBtn:disabled {
  opacity: 0.45;
}

.friendsSearchRow {
  display: flex;
  flex-wrap: nowrap;
  /* CLAVE: evita que el botón baje */
  gap: 10px;
  align-items: center;
  margin: 12px 0;
  width: 100%;
}

#friendsSearchInput {
  flex: 0 1 62%;
  /* no ocupa todo el modal */
  max-width: 320px;
  /* ajusta a tu gusto (280–360 suele ir bien) */
  min-width: 0;
  /* CLAVE: permite encoger sin desbordar */
}

#btnFriendsSearch {
  flex: 0 0 auto;
  white-space: nowrap;
}

.postGameActions {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

/* Toast reto amigo */
.friendChallengeToast {
  position: fixed;
  right: 12px;
  bottom: 88px;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(2, 6, 23, 0.15);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.12);
  width: min(320px, calc(100vw - 24px));
}

.friendChallengeToastTitle {
  font-weight: 900;
  margin-bottom: 6px;
}

.friendChallengeToastBtns {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.btnReliefDanger:active {
  transform: translateY(1px);
}

/* =========================================================
   FIX: Checkboxes del Perfil no deben heredar width:100%
   ========================================================= */
#profileOverlay input[type="checkbox"],
#profileModal input[type="checkbox"],
.profileConsentBlock input[type="checkbox"],
.consentCheck input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  flex: 0 0 18px !important;
  display: inline-block !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
}

#profileOverlay .consentCheck span,
#profileModal .consentCheck span,
.profileConsentBlock .consentCheck span {
  flex: 1 1 auto;
  min-width: 0;
}

#profileOverlay .modalCard {
  width: min(300px, calc(100vw - 44px)) !important;
  max-width: 300px !important;
  padding: 12px !important;
}

/* Triángulo verde como el botón START (mismo estilo de .gameBtnIcon PLAY) */
.statusPlayTriangle {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 18px solid #22c55e;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  transform: translateY(2px);
  margin: 0 6px;
}

.profileNameInput.isLocked {
  opacity: 0.7;
  cursor: not-allowed;
}

/* =========================
   Profile: error nickname
   ========================= */
.inputErrorNick {
  border-color: #d12c2c !important;
  color: #d12c2c !important;
}

.nickErrorMsg {
  color: #d12c2c;
  font-size: 12px;
  margin-top: 6px;
}

/* =========================
     Dialog OK
     ========================= */
.okDialogOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.okDialogBox {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  max-width: calc(100vw - 48px);
  background: rgba(25, 25, 25, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.okDialogMsg {
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  line-height: 1.35;
  margin-bottom: 14px;
  white-space: normal;
  max-width: 100%;
}

/* =========================
   Legal modal: scroll + enlace
   ========================= */
.legalText--scroll {
  max-height: min(56vh, 420px);
  overflow: auto;
  padding-right: 6px;
  /* deja aire para scrollbar */
}

.legalLinkBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .08);
  color: #1100ff;
  text-decoration: none;
  font-weight: 600;
}

.legalLinkBtn:active {
  transform: translateY(1px);
}

/* =========================
   Legal modal: mismo ancho que Profile + letra 11px
   ========================= */
#legalOverlay .modalCard {
  width: min(300px, calc(100vw - 44px)) !important;
  max-width: 300px !important;
  padding: 12px !important;
}

#legalOverlay .legalText {
  /*font-size: 11px !important;
  */
  font-size: 0.8rem;
}

/* =========================
   COOKIE CONSENT (banner)
   ========================= */
.cookieBanner {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100vh;
  z-index: 60000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  pointer-events: none;
}

.cookieBanner__box {
  pointer-events: auto;
  width: min(300px, calc(100vw - 44px));
  max-width: 300px;
  margin: 0 auto;
  background: rgba(255, 255, 255, .92);
  color: #111;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
  padding: 10px 12px;
}

.cookieBanner__text {
  font-size: 11px;
  line-height: 1.25;
}

.cookieBanner__text a {
  color: #1a73e8;
  font-weight: 700;
  text-decoration: none;
}

.cookieBanner__text a:hover {
  text-decoration: underline;
}

/* Botones debajo, en una línea */
.cookieBanner__actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Botones */
.cookieBtn {
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .18);
  background: rgba(255, 255, 255, .92);
  color: #111;
  font-weight: 800;
  cursor: pointer;
}

.cookieBtn--primary {
  background: #1a73e8;
  border-color: #1a73e8;
  color: #fff;
}

.cookieBtn--ghost {
  background: rgba(255, 255, 255, .85);
}

/* =========================
   COOKIE PREFS (checks compactos)
   ========================= */
.cookieOpt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0;
}

.cookieOpt input[type="checkbox"] {
  margin-top: 2px;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.cookieOpt span {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  line-height: 1.25;
}

/* =====================================================
   COOKIE MODAL – checks compactos a la izquierda
   ===================================================== */

#cookiePrefs .cookieOpt {
  display: grid;
  grid-template-columns: 18px 1fr;
  /* checkbox | texto */
  column-gap: 12px;
  align-items: start;
  margin: 12px 0;
}

/* checkbox: mínimo, sin estirar */
#cookiePrefs .cookieOpt input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  padding: 0;
  flex: none;
  justify-self: start;
}

/* texto: todo el ancho restante */
#cookiePrefs .cookieOpt span {
  display: block;
  width: 100%;
  min-width: 0;
  font-size: 11px;
  line-height: 1.3;
}

/* título en negrita bien alineado */
#cookiePrefs .cookieOpt span b {
  display: block;
  margin-bottom: 2px;
}

/* descripción más discreta */
#cookiePrefs .cookieOpt span small {
  display: block;
  opacity: .75;
  font-size: 10.5px;
}

/* ===== Ayuda AlfaDuelo (solo contenido interno del modal) ===== */
.helpWrap {
  line-height: 1.35;
}

.helpTitle {
  margin: 0 0 8px;
  font-size: 1.15rem;
}

.helpLead {
  margin: 0 0 8px;
  opacity: .95;
}

.helpSep {
  border: 0;
  height: 1px;
  opacity: .18;
  margin: 14px 0;
  background: currentColor;
}

.helpQuickBullets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.helpChip {
  padding: 6px 10px;
  border-radius: 999px;
  opacity: .95;
  border: 1px solid rgba(255, 255, 255, .14);
}

.helpSection {
  margin: 0;
}

.helpH3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
}

.helpP {
  margin: 0 0 10px;
  opacity: .95;
}

.helpList,
.helpSteps {
  margin: 8px 0 0 18px;
}

.helpTip {
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  padding: 10px 12px;
  opacity: .98;
}

.helpTipTitle {
  font-weight: 700;
  margin-bottom: 6px;
}

.helpTipBody {
  opacity: .95;
}

.helpExample {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.helpExampleRow {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}

.helpBadge {
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  white-space: nowrap;
}

.helpBadge,
.helpExampleText {
  opacity: .95;
}

.helpGraphicCard {
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  padding: 10px 12px;
}

.helpGraphicTitle {
  font-weight: 700;
  margin-bottom: 8px;
}

.helpSmall {
  margin-top: 8px;
  font-size: .9rem;
  opacity: .8;
}

.helpSvg {
  width: 100%;
  height: auto;
  display: block;
}

.helpSvg rect,
.helpSvg line,
.helpSvg path {
  fill: rgba(255, 255, 255, .06);
  stroke: rgba(255, 255, 255, .38);
  stroke-width: 2;
}

.helpSvg text {
  fill: rgba(255, 255, 255, .88);
  font-size: 18px;
  font-family: inherit;
}

.helpSvg marker path {
  fill: rgba(255, 255, 255, .38);
  stroke: none;
}

.helpGrid2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}

@media (min-width: 720px) {
  .helpGrid2 {
    grid-template-columns: 1fr 1fr;
  }

}

.helpMiniCard {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  padding: 10px 12px;
}

.helpMiniTitle {
  font-weight: 700;
  margin-bottom: 6px;
}

.helpMiniText {
  opacity: .9;
}

.helpCallout {
  margin: 10px 0 12px;
  border: 1px dashed rgba(255, 255, 255, .28);
  border-radius: 14px;
  padding: 10px 12px;
}

.helpCalloutTitle {
  font-weight: 800;
  margin-bottom: 6px;
}

.helpCalloutBody {
  opacity: .95;
}

.helpFaq {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  padding: 8px 10px;
  margin-top: 8px;
}

.helpFaq>summary {
  cursor: pointer;
  font-weight: 700;
  opacity: .95;
}

.helpFaqBody {
  margin-top: 8px;
  opacity: .92;
}

.helpOutro {
  padding-bottom: 2px;
}

.helpSvg {
  color: #111 !important;
}

.helpSvg rect {
  fill: transparent !important;
  stroke: #111 !important;
  stroke-width: 2 !important;
}

.helpSvg text {
  fill: #111 !important;
}

/* =========================================================
   MODAL AYUDA – tamaño específico
   ========================================================= */
#helpOverlay .modalCard {
  width: 12vw;
  /* ancho relativo a pantalla */
  max-width: 350px;
  /* ancho máximo */
  height: 95vh;
  /* alto del modal */
  max-height: 1920px;
  /* alto máximo */

  display: flex !important;
  flex-direction: column !important;
}

#helpOverlay .modalBody {
  flex: 0;
  /* ocupa todo lo que queda */
  overflow-y: auto;
  /* scroll interno */
  padding: 16px 18px;
  /* ajusta respiración */
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* 🔥 QUITA el max-height de 420px solo en Ayuda */
#helpOverlay .legalText--scroll {
  max-height: none !important;
  height: 100% !important;
  overflow: auto !important;
}

/* Numeritos estilo “bola violeta con borde blanco” */
.helpMapItem {
  display: grid;
  grid-template-columns: 34px 1fr;
  /* número | texto */
  gap: 12px;
  align-items: start;
}

.helpMapNum--violet {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #4b0eb4;
  /* violeta */
  border: 2px solid #fff;
  /* borde blanco */
  color: #fff;
  /* número blanco */
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

#supportOverlay,
#supportOverlay *,
#supportOverlay input,
#supportOverlay select,
#supportOverlay textarea {
  color: #000 !important;
}

#supportOverlay ::placeholder {
  color: rgba(0, 0, 0, 0.55) !important;
}

#supportOverlay .btnPrimary {
  color: #000 !important;
}

/* Igualar tamaño de texto de Ayuda al de Legal */
#helpOverlay .legalText,
#helpOverlay .helpWrap,
#helpOverlay .helpWrap p,
#helpOverlay .helpWrap li {
  font-size: 0.8rem;
  line-height: 1.45;
}

#menuHandle {
  display: none !important;
}

/* =========================
   Footer icon bar – relieve
   ========================= */

#footerIconBar button {
  border-radius: 12px;
  transition: transform 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease;
}

/* estado normal: flotando */
#footerIconBar button img {
  border-radius: 12px;
  height: 44px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18),
    0 6px 12px rgba(0, 0, 0, 0.12);
  /* ligero brillo superior */
  filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.35));
}

/* hover / foco (desktop o teclado) */
#footerIconBar button:hover img,
#footerIconBar button:focus-visible img {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.22),
    0 10px 18px rgba(0, 0, 0, 0.16);
  transform: translateY(-1px);
}

/* active / touch: se hunde */
#footerIconBar button:active img {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25),
    0 3px 6px rgba(0, 0, 0, 0.18);
}

#footerIconBar button {
  height: auto !important;
  /* anula el height: 44px inline */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  /* separación icono-texto */
}

/* --- Popup sobre modal (perfil / avisos) --- */
.modalCard {
  position: relative;
}

.miniPopupOverlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  z-index: 50;
  border-radius: 18px;
}

.miniPopupCard {
  width: min(520px, calc(100% - 28px));
  background: #fff;
  color: #111;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(2, 6, 23, 0.22);
  padding: 16px 16px 14px;
  position: relative;
}

.miniPopupClose {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(2, 6, 23, 0.12);
  background: rgba(2, 6, 23, 0.03);
  color: #111;
  cursor: pointer;
}

.miniPopupTitle {
  font-weight: 800;
  font-size: 16px;
  margin: 2px 46px 8px 4px;
}

.miniPopupMsg {
  font-size: 14px;
  line-height: 1.35;
  margin: 0 4px 12px;
  color: #111;
}

.miniPopupActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 4px;
}

.friendIconBtn.add {
  /* verde */
  font-weight: 700;
}

.friendIconBtn.add:hover {
  color: #15803d;
}

.friendNameBlock {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
  flex: 1;
  /* CLAVE: empuja rating+acciones a la derecha */
  min-width: 0;
}

/* =========================
   TABS estilo Windows (auténticas)
   ========================= */

.modalHeaderTabs {
  justify-content: space-between;
  padding: 8px 8px 0;
  /* sin padding abajo */
  gap: 8px;
}

.modalHeaderTabs,
.socialTabsWin {
  display: flex;
  align-items: flex-end;
}

.socialTabsWin {
  gap: 6px;
}

.winTab {
  appearance: none;
  border: 1px solid rgba(2, 6, 23, 0.22);
  border-bottom: none;
  /* clave: pestaña real */
  background: rgba(2, 6, 23, 0.06);
  color: #111;
  padding: 10px 16px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  cursor: pointer;
  font-weight: 600;
  position: relative;
  top: 0px;
  /* para que encaje con el panel */
}

.winTab:hover {
  background: rgba(2, 6, 23, 0.10);
}

.winTab.is-active {
  background: rgba(255, 255, 255, 1);
  z-index: 5;
  top: 0;
}

.winTab+.winTab {
  margin-left: -10px;
  /* solape sutil tipo Windows */
}

/* Línea superior del panel (como Windows) */
#rankingOverlay .modalBody {
  border-top: 1px solid rgba(2, 6, 23, 0.22);
  padding-top: 12px;
  position: relative;
  z-index: 1;
}

/* Ajuste de la X para que no flote */
.modalHeaderTabs .modalClose {
  margin-bottom: 6px;
}

.modalBody {
  border-top: 1px solid rgba(2, 6, 23, 0.18);
}

/* Amigos: nombre y ELO sin negrita */
.friendName,
.friendRating {
  font-weight: 400;
}

.friendRating {
  opacity: 0.85;
  font-size: 0.9em;
}

/* Bloque nombre+email dentro de la misma altura del miniavatar */

.friendEmail {
  font-size: 11px;
  opacity: 0.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Botones icono */
.friendIconBtn {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(2, 6, 23, 0.18);
  padding: 6px 8px;
  border-radius: 12px;
  cursor: pointer;
  line-height: 1;
  font-size: 16px;
}

.friendIconBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.friendIconBtn.add {
  color: #16a34a;
  font-weight: 900;
  font-size: 18px;
}

/* Oculta la línea superior del panel bajo la pestaña activa */
.winTab.is-active::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 2px;
  background: #ffffff;
  /* mismo color que el panel */
  z-index: 6;
}

#rankingOverlay .modalHeader.modalHeaderTabs {
  border-bottom: none !important;
}

/* =========================================================
   MODAL AMIGOS/RANKING – limitar altura y hacer scroll interno
   (igual que Ayuda: 95vh)
   ========================================================= */
#rankingOverlay .modalCard {
  height: min(95vh, 820px);
  width: min(560px, calc(100vw - 24px));
  max-width: 560px;
  display: flex;
  flex-direction: column;
}

#rankingOverlay .modalBody {
  overflow: hidden;
  /* clave para que los hijos puedan hacer scroll */
}

#rankingOverlay .modalBody,
#rankingOverlay .socialPanel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#rankingOverlay #friendsList,
#rankingOverlay #friendsSearchResults,
#rankingOverlay #rankingList {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

/* Amigos: posición #n y resaltado de "yo" */
.friendPos {
  min-width: 44px;
  font-weight: 800;
  opacity: 0.85;
}

.friendRow--me {
  background: rgba(37, 99, 235, 0.12);
}

.friendActions--me {
  min-width: 82px;
  /* reserva hueco para alinear con filas con botones */
}

#rankingOverlay .friendsList {
  gap: 6px;
}

#rankingOverlay .friendRow {
  gap: 6px;
  padding: 5px 8px;
}

#rankingOverlay .friendPos {
  min-width: 40px;
}

#rankingOverlay .friendAvatar {
  width: 28px;
  height: 28px;
  border-radius: 10px;
}

#rankingOverlay .friendRating {
  min-width: 54px;
  text-align: right;
  font-size: 14px;
}

#rankingOverlay .friendActions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  min-width: 76px;
}

#rankingOverlay .friendIconBtn {
  padding: 4px 6px;
  border-radius: 10px;
  font-size: 14px;
}

.rankingSep {
  text-align: center;
  opacity: .55;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 6px 0 10px;
}

.rankingWindowBlock {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ===== Ranking: scroll real dentro del listado ===== */

/* El panel Ranking debe poder encoger para que el hijo haga overflow */
#socialPanelRanking {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* El listado es el contenedor scrollable */
#rankingList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

.rankingList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Importante: sticky solo funciona bien si el sticky está dentro del scroller */
.rankingTopSticky {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding-top: 2px;
  padding-bottom: 6px;
}

.footerIconBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
}

/* =========================
   Invitación: accesos directos (popup)
   ========================= */
.inviteShareRow {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.inviteShareRow,
.inviteShareBtn {
  justify-content: center;
  align-items: center;
}

.inviteShareBtn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  display: inline-flex;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}

.inviteShareBtn:active {
  transform: translateY(1px) scale(.98);
}

.inviteShareBtn:hover {
  background: rgba(255, 255, 255, .10);
}

.inviteShareIcon {
  width: 44px;
  height: 44px;
  display: block;
}

/* =========================
   DUEL: Guantes (retar)
   ========================= */
.friendIconBtn.challenge {
  width: 30px;
  /* más grande */
  height: 30px;
  /* más grande */
  border-radius: 0px;
  /* para que no recorte el gif */
  background: transparent;
  /* sin fondo */
  border: none;
  /* sin borde */
  box-shadow: none;
  /* sin sombra de botón */
  /* más limpio */
}

.friendIconBtn.challenge img.friendGloves {
  width: 50px;
  /* más grande que 26 */
  height: 50px;
  display: block;
  pointer-events: none;
  background: transparent;
  /* por si acaso */
}

/* PNG estático */
.friendIconBtn.challenge img.friendGloves.is-png {
  width: 50px;
  /* ⬅️ ajusta a tu gusto */
  height: 50px;
}

/* GIF animado */
.friendIconBtn.challenge img.friendGloves.is-gif {
  width: 40px;
  /* ⬅️ distinto e independiente */
  height: 40px;
}

.friendIconBtn.challenge.is-pending img.friendGloves {
  animation: duelShake .16s infinite alternate;
  transform-origin: 50% 50%;
}

@keyframes duelShake {
  from {
    transform: translateX(-2px) rotate(-5deg);
  }

  to {
    transform: translateX(2px) rotate(5deg);
  }

}

.friendIconBtn.challenge.is-hit img.friendGloves {
  animation: duelHit .22s ease-out 1;
}

@keyframes duelHit {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.18);
  }

  100% {
    transform: scale(1);
  }

}

/* =========================
   DUEL: Pestaña lateral (reto mientras juegas)
   ========================= */
#duelIncomingTab {
  position: fixed;
  /* ✅ ahora va a la derecha */
  right: 0;
  left: auto;
  top: 50%;
  /* ✅ centrar vertical + girar 180º */
  /*transform: translateY(-50%) rotate(180deg);
  */
  transform-origin: center;
  z-index: 60;
  width: 22px;
  padding: 10px 6px;
  background: var(--c-green-wordle);
  box-shadow: 0 6px 14px rgba(0, 62, 9, 0.799);
  /* ✅ ahora las “esquinas redondeadas” van al lado izquierdo */
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  display: none;
  cursor: pointer;
  touch-action: manipulation;
}

#board {
  position: relative;
  z-index: 3;
}

#duelIncomingTab .duelIncomingTabText {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--c-white);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}

/* =========================================================
   Visor: liveRow + tiles borde por jugador (tile a tile)
   ========================================================= */

#spectatorLiveWrap {
  margin-top: 10px;
  margin-bottom: 4px;
  display: flex;
  justify-content: center;
}

#spectatorLiveRow.spectLiveRow {
  width: 100%;
  max-width: 330px;
  display: flex;
  gap: 0px;
  justify-content: flex-start;
  align-items: center;
}

#spectatorLiveRow .tile.spectTile {
  /* hereda el look Wordle del juego real (.tile),
       pero forzamos borde visible */
  border-width: 2px;
}

/* ✅ En vez de borde a toda la palabra, borde a cada tile */
#spectatorBoard .tile.tileBlue,
#spectatorLiveRow .tile.tileBlue {
  border-color: var(--c-blue-600);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, .10);
}

#spectatorBoard .tile.tileRed,
#spectatorLiveRow .tile.tileRed {
  border-color: var(--c-red-600);
  box-shadow: 0 0 0 1px rgba(220, 38, 38, .10);
}

#spectatorBoard .spectRowX {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  max-width: 330px;
  /* <-- igual que #spectatorLiveRow */
  margin: 0 auto;
  /* <-- centra las filas como la liveRow */

  padding: 0;
  /* ✅ fuera bloque grande */
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
}

#spectatorBoard .spectTilesX {
  display: flex;
  gap: 0px;
  flex-wrap: nowrap;
}

#spectatorBoard .spectMetaX {
  min-width: 84px;
  text-align: right;
  font-weight: 950;
  opacity: .82;
  white-space: nowrap;
}

/* =========================================================
     Visor: cronómetro color por turno + rojo der->izq
     ========================================================= */

.spectatorClockSplit {
  position: relative;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(2, 6, 23, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

#spectatorBlueFill,
#spectatorRedFill {
  position: absolute;
  top: 0;
  bottom: 0;
}

#spectatorBlueFill {
  left: 0;
  background: rgba(37, 99, 235, .85);
}

#spectatorRedFill {
  right: 0;
  background: rgba(220, 38, 38, .85);
}

/* Barra de estado: por defecto azul izq->der */
.statusBar.spectatorStatusBar.turnBlue .timeFill {
  left: 0;
  right: auto;
  background: rgba(37, 99, 235, .85);
}

/* Barra de estado: rojo der->izq */
.statusBar.spectatorStatusBar.turnRed {
  position: relative;
}

.statusBar.spectatorStatusBar.turnRed .timeFill {
  left: auto;
  right: 0;
  background: rgba(220, 38, 38, .85);
}

.friendIconBtn .friendGloves {
  display: block;
}

.adSticky {
  width: 100%;
  max-width: 600px;
  height: var(--ad-h);
  min-height: var(--ad-h);
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, .08);
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 0;
  flex: 0 0 var(--ad-h);
}

/* El INS debe ocupar toda la altura del sticky */
.adSticky ins.adsbygoogle {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.btnWide {
  width: 100%;
  max-width: 360px;
}

.helpVersions {
  margin-top: 10px;
  padding: 8px 0 10px;
  text-align: center;
  font-size: 10px;
  color: #9a9a9a;
  opacity: .85;
  user-select: none;
}

.helpVersions span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.modalCard {
  height: auto !important;
  max-height: 80vh !important;
  display: flex;
  flex-direction: column;
}

.modalCard .modalBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

@keyframes profileConsentBlink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }

  100% {
    opacity: 1;
  }

}

.profileConsentBlink {
  animation: profileConsentBlink 1s ease-in-out infinite;
}

/* =========================
   Amigos online inline (Lobby)
   ========================= */

/* ✅ Variables SOLO para la pastilla del tablero (no afecta al modal) */
:root {
  --inlineFriends-maxW: 240px;
  /* ancho máximo de la “pastilla” */
  --inlineFriends-gap: 1px;
  --inlineFriendRow-padY: 3px;
  --inlineFriendRow-padX: 8px;
  --inlineFriendRow-radius: 10px;
  --inlineFriendRow-bg: rgba(184, 184, 184, 0.18);
  --inlineFriendRow-blur: 2px;
  --inlineFriendName-size: 14px;
  --inlineFriendName-weight: 400;
  /* ✅ menos negrita que 700 */
  --inlineFriendTextShadow: 0 0px 0px rgba(0, 0, 0, 0.65);
  --inlineFriendRating-weight: 600;
  /* ✅ menos negrita */
}

.friendsInlinePanel {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 45;
  display: flex;
  justify-content: center;
  pointer-events: none;
  bottom: calc(var(--ad-pad) + 48px);
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  box-sizing: border-box;
}

/* En lobby (columna derecha): NO flotante, va en flujo y con scroll vertical si hace falta */
.friendsInlinePanel--lobby {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;

  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0;

  justify-content: flex-start;
  pointer-events: auto;
  box-sizing: border-box;
  overflow: hidden;
  /* evita cualquier desborde lateral */
}

.friendsInlinePanel--lobby .friendsInlineWrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-items: stretch;
  box-sizing: border-box;
}

.friendsInlinePanel--lobby .friendsInlineTitle {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  text-align: left;
  margin-bottom: 6px;

  white-space: normal;
  /* permite 2 líneas */
  overflow-wrap: anywhere;
  /* rompe si hace falta */
  word-break: break-word;
}

.friendsInlinePanel--lobby .friendsInlineList {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  /* evita scroll horizontal */
  padding-right: 4px;

  box-sizing: border-box;
}

/* Cualquier item dentro de la lista debe poder encogerse y hacer wrap */
.friendsInlinePanel--lobby .friendsInlineList>* {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Textos internos (nombre/estado) deben partir línea si no caben */
.friendsInlinePanel--lobby .friendsInlineList * {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.friendsInlineList {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--inlineFriends-gap);
}

/* fila “ligera” del tablero */
.inlineFriendRow {
  display: grid;
  grid-template-columns: 14px 42px 1fr 64px;
  align-items: center;
  gap: 10px;
  padding: var(--inlineFriendRow-padY) var(--inlineFriendRow-padX);
  border-radius: var(--inlineFriendRow-radius);
  background: var(--inlineFriendRow-bg);
  backdrop-filter: blur(var(--inlineFriendRow-blur));
}

.inlineFriendRow .friendAvatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.inlineFriendRow .friendName {
  font-size: var(--inlineFriendName-size);
  font-weight: var(--inlineFriendName-weight);
  text-shadow: var(--inlineFriendTextShadow);
}

.inlineFriendRow .friendRating {
  text-align: right;
  font-weight: var(--inlineFriendRating-weight);
  opacity: .95;
  text-shadow: var(--inlineFriendTextShadow);
}

.inlineFriendActions {
  display: flex;
  justify-content: flex-end;
}

.inlineFriendActions .friendIconBtn.challenge {
  width: 44px;
  height: 44px;
}

.friendsInlineTitle {
  text-align: center;
  font-weight: 400;
  /* 👈 lo que has pedido */
  font-size: 14px;
  opacity: 0.85;
  margin-bottom: 6px;
  /* sin fondo, sin borde, solo texto */
  background: none;
  border: none;
  box-shadow: none;
}

.friendsInlineWrap {
  width: min(var(--inlineFriends-maxW), calc(100% - 24px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  /* el panel tiene pointer-events:none */
}

/* Guantes: el botón debe ser el contenedor del icono (para que absolute funcione bien) */
.friendIconBtn.challenge {
  position: relative;
  width: 40px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Icono guantes (png/gif) */
.friendGloves {
  position: absolute;
  top: -10px;
  left: -12px;
  width: 44px;
  height: 44px;
  pointer-events: none;
}

/* =========================
   Friends inline (modo lobby / columna derecha)
   ========================= */
.friendsInlinePanel--lobby {
  position: static;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  box-sizing: border-box;
}

.friendsInlinePanel--lobby .friendsInlineWrap,
.friendsInlinePanel--lobby .friendsInlineList {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Cada amigo: layout vertical */
.friendsInlinePanel--lobby .inlineFriendRow {
  display: flex;
  /* ✅ en vez de grid */
  flex-direction: column;
  /* ✅ avatar arriba, nombre debajo */
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Avatar centrado */
.friendsInlinePanel--lobby .inlineFriendRow .friendAvatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

/* Nombre debajo, hasta 2 líneas */
.friendsInlinePanel--lobby .inlineFriendRow .friendName {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-align: center;

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;

  line-height: 1.05;
  font-size: 13px;
}

/* Si hay rating, lo ocultamos para ahorrar espacio */
.friendsInlinePanel--lobby .inlineFriendRow .friendRating {
  display: none;
}

/* Acciones (guantes) centradas y SIN posiciones negativas */
.friendsInlinePanel--lobby .inlineFriendActions {
  width: 100%;
  display: flex;
  justify-content: center;
}

.friendsInlinePanel--lobby .friendIconBtn.challenge {
  position: relative;
  width: 44px;
  height: 44px;
  overflow: visible;
}

/* ✅ En lobby: guantes dentro del botón, sin offsets negativos */
.friendsInlinePanel--lobby .friendGloves {
  position: static;
  /* ✅ ya no absolute */
  width: 44px;
  height: 44px;
}

/* --- Lobby: amigo en 2 filas (top: led+avatar+guantes, abajo: nombre) --- */
.friendsInlinePanel--lobby .inlineFriendRow {
  gap: 6px;
  /* separación entre fila superior y nombre */
  align-items: center;
}

/* fila superior */
.friendsInlinePanel--lobby .inlineFriendTop {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  box-sizing: border-box;
}

/* nombre debajo (máx 2 líneas, sin desbordar) */
.friendsInlinePanel--lobby .inlineFriendRow .friendName {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-align: center;

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;

  line-height: 1.05;
  font-size: 13px;
}

/* acciones ya no ocupan todo el ancho en lobby */
.friendsInlinePanel--lobby .inlineFriendActions {
  width: auto;
  display: flex;
  justify-content: center;
}

/* guantes: que quepan bien en la línea superior */
.friendsInlinePanel--lobby .friendIconBtn.challenge {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.friendsInlinePanel--lobby .friendGloves {
  position: static;
  /* se mantiene dentro del botón */
  width: 42px;
  height: 42px;
}

/* ===============================
   Glow de estado en avatar (lobby)
   =============================== */

.friendsInlinePanel--lobby .friendAvatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  transition: box-shadow 0.2s ease;
}

/* Online → glow verde */
.friendsInlinePanel--lobby .avatarOnline {
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 10px rgba(0, 180, 0, 0.7),
    0 0 18px rgba(0, 200, 0, 0.5);
}

/* Jugando → glow amarillo */
.friendsInlinePanel--lobby .avatarPlaying {
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 10px rgba(255, 180, 0, 0.8),
    0 0 18px rgba(255, 200, 0, 0.6);
}

/* =========================
   Glow avatar (online / busy)
   ========================= */
.friendAvatarGlow {
  display: inline-flex;
  padding: 3px;
  /* grosor del glow */
  border-radius: 14px;
  box-sizing: border-box;
}

.friendAvatarGlow.on {
  box-shadow:
    0 0 0 3px rgba(34, 197, 94, .35),
    0 0 18px rgba(34, 197, 94, .28);
}

.friendAvatarGlow.busy {
  box-shadow:
    0 0 0 3px rgba(245, 158, 11, .38),
    0 0 18px rgba(245, 158, 11, .30);
}

/* El avatar sigue igual por dentro */
.friendAvatarGlow .friendAvatar {
  display: block;
}

/* =========================
   Ranking: estado "cargando"
   ========================= */
.rankingLoadingWrap {
  flex: 1 1 auto;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0.9;
}

.rankingSpinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.18);
  border-top-color: rgba(0, 0, 0, 0.70);
  animation: rankingSpin 0.9s linear infinite;
}

@keyframes rankingSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }

}

.legalStandalone {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

.helpFooter {
  margin-top: 24px;
  font-size: 12px;
  opacity: 0.6;
  text-align: center;
}

/* =========================
   Legal standalone (claro + 3D)
   ========================= */
.helpWrap.legalStandalone {
  color: rgba(20, 24, 28, 0.92);
}

.helpWrap.legalStandalone .helpContent {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10),
    0 2px 0 rgba(255, 255, 255, 0.55) inset;
  padding: 18px;
  backdrop-filter: blur(10px);
}

.helpWrap.legalStandalone .helpSep {
  opacity: 1;
  background: rgba(0, 0, 0, 0.10);
}

.helpWrap.legalStandalone .helpTip {
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: rgba(255, 255, 255, 0.70);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}

.helpWrap.legalStandalone a {
  color: rgba(20, 70, 160, 0.95);
}

.helpWrap.legalStandalone code {
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 8px;
}

/* =========================
   PERFIL: STATS (Ranking/Resultados/Eficiencia) con tiers
   ========================= */
.profileStatsWrap {
  margin-top: 14px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
}

.profileStatsGroup+.profileStatsGroup {
  margin-top: 12px;
}

.profileStatsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.profileStatsPill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: .3px;
  text-transform: uppercase;
  background: rgba(0, 0, 0, .20);
  border: 1px solid rgba(255, 255, 255, .12);
}

.profileStatsSub {
  font-size: 12px;
  opacity: .7;
  font-weight: 800;
}

.profileStatsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profileStatsGrid2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 520px) {
  .profileStatsGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .profileStatsGrid2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* === Modal Estadísticas (KPI icons) === */
.eloBtn {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.eloBtn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .35);
  outline-offset: 3px;
  border-radius: 10px;
}

.statsBody {
  width: min(280px, 70vw);
  height: 260px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

/* =========================
   Lobby split (NO jugando)
   ========================= */
.lobbySplit {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;

  /* ✅ empuja el bloque de stats más hacia el borde */
  margin-left: -6px;
  padding-left: 0;
  overflow: hidden;
  /* ✅ evita cualquier desborde lateral */
}

/* Izquierda: estadísticas */
.statsBody--lobby {
  width: 66vw;
  /* ✅ ocupa 2/3 reales */
  max-width: 66%;
  margin: 0;
  /* ✅ elimina centrado */
  justify-content: flex-start;
}

/* Derecha: CTA + amigos */
.lobbyRight {
  flex: 1 1 0;
  max-width: 34%;
  min-width: 0;
  /* ✅ IMPORTANTÍSIMO en flex para que no desborde */
  overflow: hidden;
  /* ✅ evita que algo se salga y fuerce scroll horizontal */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.boardInviteCtaWrap--lobby {
  width: 100%;
}

/* Si el texto no cabe, que parta en 2 líneas */
.boardInviteCtaWrap--lobby .btnPrimary {
  width: 100%;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  line-height: 1.15;
  padding: 10px 8px;
  font-size: 0.95rem;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 420px) {
  .boardInviteCtaWrap--lobby .btnPrimary {
    font-size: 0.88rem;
  }
}

@media (max-width: 520px) {
  .lobbySplit {
    gap: 10px;
  }

  .statsBody--lobby {
    width: 66vw;
  }

  .lobbyRight {
    max-width: 34vw;
  }
}

.statsCanvas {
  display: block;
  position: relative;
  z-index: 1;
}

/* === Modal Estadísticas: tamaño específico === */
#statsOverlay .modalCard {
  max-height: 60vh !important;
  /* ← no tapa barra del navegador */
}

/* =========================================================
   HUD: botón de estadísticas sobre el avatar (abajo-derecha)
   ========================================================= */
.duelAvatar {
  position: relative;
}

.avatarStatsBtn {
  position: absolute;
  right: -20px;
  bottom: -12px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  z-index: 10;
  border-radius: 999px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.avatarStatsBtn img {
  width: 22px;
  height: 22px;
  display: block;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}

.avatarStatsBtn:active {
  transform: translateY(1px);
}

/* =========================================================
   Modal de estadísticas (Perfil): alto fijo 475px salvo que no quepa
   ========================================================= */
#profileOverlay .modalCard {
  height: min(485px, calc(100vh - 44px)) !important;
  max-height: calc(100vh - 44px) !important;
  display: flex !important;
  flex-direction: column !important;
}

#profileOverlay .modalBody {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Título + subtítulo en columna (uno debajo del otro) */
#statsOverlay .statsHeaderTitles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

/* asegura que subtitle sea bloque (por si acaso) */
#statsOverlay #statsSubtitle {
  display: block;
}

/* =========================
   Histórico de partidas (modal)
   ========================= */
.historyList {
  max-height: min(70vh, 520px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
}

/* Encabezado */
.historyHeaderRow {
  display: grid;
  grid-template-columns: 90px 1fr 40px 30px;
  gap: 8px;
  padding: 5px 10px 6px;
  opacity: .78;
  font-weight: 800;
  font-size: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  margin-bottom: 4px;
}

.historyRow {
  display: grid;
  grid-template-columns: 90px 1fr 40px 30px;
  gap: 8px;
  align-items: center;
  padding: 4px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .10);

  /* ✅ transparente (sin contenedor gris) */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  /* ✅ texto normal (sin negrita “global”) */
  font-weight: 400;
  line-height: 1.15;
}

/* Columnas */
.historyRow .hDate {
  font-size: 12px;
  opacity: .9;
  font-weight: 400;
}

.historyRow .hOpp {
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.95;
}

.historyRow .hScore {
  text-align: right;
  font-size: 12px;
  font-weight: 400;
}

.historyRow .hDelta {
  text-align: right;
  font-size: 12px;
  opacity: .95;
  font-weight: 400;
}

/* ✅ Glow por dificultad */
.historyRow--easy {
  background: rgba(0, 255, 140, 0.10);
  border-color: rgba(0, 255, 140, 0.22);
  box-shadow:
    0 0 18px rgba(0, 255, 140, 0.20),
    0 0 3px rgba(0, 255, 140, 0.18);
}

.historyRow--medium {
  background: rgba(255, 215, 0, 0.10);
  border-color: rgba(255, 215, 0, 0.22);
  box-shadow:
    0 0 18px rgba(255, 215, 0, 0.20),
    0 0 3px rgba(255, 215, 0, 0.18);
}

.historyRow--hard {
  background: rgba(255, 70, 70, 0.10);
  border-color: rgba(255, 70, 70, 0.22);
  box-shadow:
    0 0 18px rgba(255, 70, 70, 0.22),
    0 0 3px rgba(255, 70, 70, 0.18);
}

/* =========================
   Stats: wrapper + hotspots clicables
   ========================= */
.statsCanvasWrap {
  position: relative;
  width: 100%;
  height: auto;
  /* <- clave: que mida por el canvas */
  display: inline-block;
  /* <- asegura que el wrapper “abraza” al canvas */
}

.statsHotspots {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
  /* el contenedor puede recibir eventos */
}

/* Por defecto, los hotspots NO capturan click */
.statsHotspot {
  position: absolute;
  border-radius: 18px;
  pointer-events: none;
}

/* Solo los clicables capturan click */
.statsHotspot.clickable {
  pointer-events: auto;
  cursor: pointer;
  outline: 1px dashed rgba(255, 255, 255, .22);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.statsHotspot.clickable::after {
  content: "↗";
  position: absolute;
  right: 10px;
  top: 8px;
  font-weight: 900;
  font-size: 14px;
  opacity: .28;
}

.statsHotspot.clickable:hover {
  outline: 1px dashed rgba(255, 255, 255, .38);
}

.statsHotspot.clickable:active {
  outline: 1px dashed rgba(255, 255, 255, .55);
}

.statsHotspot--misduelos3d {
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -12px 20px rgba(0, 0, 0, .22),
    0 14px 26px rgba(0, 0, 0, .32);
}

.statsHotspot--misduelos3d:hover {
  outline: 1px dashed rgba(255, 255, 255, .55);
}


.statsHotspot--misduelos3d:active {
  transform: translateY(1px);
}

/* =========================================================
   MIS DUELOS — RELIEVE REAL (el hotspot dibuja el icono)
   ========================================================= */

.boardStatsHotspot {
  position: absolute;
  pointer-events: auto;
  border-radius: 18px;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms ease, filter 160ms ease;
}

/* Dibuja el icono dentro del hotspot para poder aplicarle sombra */
.boardStatsHotspot--misduelos::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;

  /* Icono real */
  background-image: url("./icons/9-Mis_duelos.png");
  background-repeat: no-repeat;
  background-position: 15% center;
  background-size: 78% auto;
  animation: misDuelosPulse 1.8s ease-in-out infinite;
  will-change: transform, filter;

  pointer-events: none;
}

@keyframes misDuelosPulse {

  0% {
    transform: translateY(0px) scale(1);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45));
  }

  50% {
    transform: translateY(-4px) scale(1.03);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
  }

  100% {
    transform: translateY(0px) scale(1);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45));
  }
}

/* Brillo superior sutil (tipo botón físico) */
.boardStatsHotspot--misduelos::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 10%;
  height: 35%;
  border-radius: 16px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* Hover desktop → más elevado */
@media (hover:hover) and (pointer:fine) {
  .boardStatsHotspot--misduelos:hover {
    transform: translateY(-3px) scale(1.05);
  }

  .boardStatsHotspot--misduelos:hover::before {
    filter:
      drop-shadow(0 16px 28px rgba(0, 0, 0, .60)) drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
  }
}

/* Active (presionado) */
.boardStatsHotspot--misduelos:active {
  transform: translateY(1px) scale(.96);
}

.boardStatsHotspot--misduelos:active::before {
  filter:
    drop-shadow(0 5px 10px rgba(0, 0, 0, .55)) drop-shadow(0 2px 4px rgba(0, 0, 0, .40));
}

/* Focus teclado */
.boardStatsHotspot--misduelos:focus-visible::before {
  filter:
    drop-shadow(0 10px 20px rgba(0, 0, 0, .55)) drop-shadow(0 0 0 2px rgba(255, 255, 255, .15));
}

/* MÓVIL — Elevación constante sutil */
@media (hover:none) and (pointer:coarse) {
  .boardStatsHotspot--misduelos::before {
    filter:
      drop-shadow(0 14px 22px rgba(0, 0, 0, .60)) drop-shadow(0 5px 10px rgba(0, 0, 0, .45));
  }
}


.rankingAddFriendBtn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(145deg, #22c55e, #16a34a);
  color: white;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
  transition: transform .12s ease, box-shadow .12s ease;
}

.rankingAddFriendBtn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
}

.rankingAddFriendBtn:active {
  transform: scale(.95);
}

.rankingFriendLabel {
  font-size: 12px;
  font-weight: 800;
  opacity: .7;
}

.rankingAddFriendBtn.added {
  background: linear-gradient(145deg, #16a34a, #15803d);
  animation: friendPop .35s ease;
}

@keyframes friendPop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.25);
  }

  100% {
    transform: scale(1);
  }
}

.rankingFriendLabel {
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}

.rankingFriendLabel.show {
  opacity: .75;
  transform: translateY(0);
}

.rankingFriendGlove {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
  opacity: .95;
  transition: transform .15s ease;
}

.rankingFriendGlove:hover {
  transform: scale(1.1);
}

.boardInviteCtaWrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 6px;
}

/* Por defecto, el botón puede tener un mínimo “cómodo” */
#btnCreateInviteBoard {
  min-width: 260px;
}

/* En el lobbySplit (columna derecha), debe adaptarse al tercio y NO desbordar */
.lobbyRight #btnCreateInviteBoard {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;

  padding: 10px 8px;
  line-height: 1.15;
  text-align: center;
}

/* Botón principal del perfil */
#btnProfileSave.btnPrimaryProfile,
#btnCreateInvite.btnPrimaryProfile,
#btnCreateInviteBoard.btnPrimaryProfile,
#btnTutorialNext.btnPrimaryProfile {
  background: rgba(46, 110, 40, 0.85) !important;
  color: #ffffff !important;
  border: 1px solid rgba(46, 110, 40, 1) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25) !important;
}

#btnProfileSave.btnPrimaryProfile:hover,
#btnCreateInvite.btnPrimaryProfile:hover,
#btnCreateInviteBoard.btnPrimaryProfile:hover,
#btnTutorialNext.btnPrimaryProfile:hover {
  background: rgba(46, 110, 40, 1) !important;
  transform: translateY(-1px);
}

#btnProfileSave.btnPrimaryProfile:active,
#btnCreateInvite.btnPrimaryProfile:active,
#btnCreateInviteBoard.btnPrimaryProfile:active,
#btnTutorialNext.btnPrimaryProfile:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25) !important;
}

/* =========================================================
   SEO / AdSense content block (solo invitados)
   ========================================================= */

.seoContent {
  width: min(920px, calc(100vw - 28px));

  pointer-events: auto;
}

.seoContent.isHidden {
  display: none !important;
}

.seoCard {
  border-radius: 18px;
  padding: 10px 10px 8px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.96);
}

.seoH2 {
  margin: 10px 0 8px;
  font-size: 12px;
  font-weight: 900;
  color: rgb(30, 155, 30);
}

.seoP {
  margin: 0 0 10px;
  font-size: 10px;
  line-height: 1.35em;
  opacity: 0.95;
}

.seoUl {
  margin: 0 0 10px 18px;
  padding: 0;
  font-size: 10px;
  line-height: 1.35em;
  opacity: 0.95;
}

.seoFaq {
  margin: 0 0 10px;
  border-radius: 10px;
  padding: 6px 8px;
  background: rgba(30, 150, 30, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
}

.seoFaq summary {
  cursor: pointer;
  font-weight: 600;
  opacity: 0.95;
}

.seoFaq p {
  margin: 8px 0 0;
  font-size: 10px;
  line-height: 1.35em;
  opacity: 0.92;
}

.seoLinks {
  margin: 10px 0 0;
  font-size: 10px;
  opacity: 0.92;
}

.seoLinks a {
  color: rgba(10, 10, 155, 0.95);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.seoH1 {
  font-size: 22px;
  font-weight: 700;
  color: rgb(30, 125, 30);
  margin-bottom: 14px;
}

#profilePopupMsg {
  white-space: pre-wrap;
  /* respeta \n */
  word-break: break-word;
  /* evita desbordes */
}

/* =========================================
   OVERLAY BUSCANDO RIVAL (LUPA)
   ========================================= */
.search-anim-overlay {
  position: fixed;
  inset: 0;

  /* ✅ IMPORTANTE:
     No forzar display aquí, porque rompería el atributo hidden del HTML */
  display: none;
  place-items: center;

  z-index: 9999;

  /* ✅ Sin blur, sin oscurecer */
  background: transparent;
  backdrop-filter: none;

  /* ✅ No bloquear la UI: todo sigue pulsable (STOP, etc.) */
  pointer-events: none;
}

/* ✅ Cuando JS quite hidden, el overlay se mostrará */
.search-anim-overlay:not([hidden]) {
  display: grid;
}

/* ✅ Extra de seguridad: si hidden está presente, siempre oculto */
.search-anim-overlay[hidden] {
  display: none !important;
}

.search-anim-wrap {
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
}

.search-anim-magnifier {
  width: 92px;
  height: 92px;
  transform-origin: 50% 50%;
  animation: alf-magnifier-orbit 1.1s linear infinite;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55));
}

.search-anim-magnifier .lens {
  /* ✅ mismo verde que el botón “Invita a tus amigos con un clic” */
  fill: rgba(46, 110, 40, 0.12);
  stroke: rgba(46, 110, 40, 0.95);
  stroke-width: 4;
}

.search-anim-magnifier .handle {
  stroke: rgba(46, 110, 40, 0.95);
  stroke-width: 6;
  stroke-linecap: round;
}

.search-anim-magnifier .shine {
  fill: none;
  stroke: rgba(46, 110, 40, 0.55);
  stroke-width: 3;
  stroke-linecap: round;
}

/* Movimiento circular “buscando” */
@keyframes alf-magnifier-orbit {
  0% {
    transform: rotate(0deg) translateX(10px) rotate(0deg);
  }

  100% {
    transform: rotate(360deg) translateX(10px) rotate(-360deg);
  }
}

/* Si el usuario prefiere menos animación */
@media (prefers-reduced-motion: reduce) {
  .search-anim-magnifier {
    animation: none;
  }
}

/* =========================
   Google login (estilo AlfabReto)
   ========================= */
.btn-primary {
  background: #6aaa64 !important;
  border: 1px solid #6aaa64 !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-relieve {
  box-shadow:
    inset 1px 1px 2px rgba(0, 0, 0, 0.12),
    inset -1px -1px 2px rgba(255, 255, 255, 0.6),
    0 2px 3px rgba(0, 0, 0, 0.15);
}

.btn-relieve:active {
  transform: translateY(1px);
}

.googleLoginHint {
  margin-top: 8px;
  font-size: 0.9em;
  color: rgba(0, 0, 0, 0.85);
  /* ✅ por defecto oscuro para que se lea */
  text-align: center;
}

/* ✅ cuando sea error */
.googleLoginHint.isError {
  color: #b00020;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

#teclado {
  -webkit-tap-highlight-color: transparent;
}

#teclado button,
.tecla {
  touch-action: manipulation;
}

/* =========================
   TUTORIAL INTERACTIVO
   ========================= */

.tutorialModal {
  width: min(380px, calc(100vw - 24px)) !important;
  max-height: 92vh;
  padding: 12px !important;
  display: flex;
  flex-direction: column;
}

.tutorialBody {
  padding: 8px 2px 8px !important;
  overflow: auto;
}

#tutorialOverlay .tutorialFooter {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: #fff;
  padding-top: 8px;
}

#tutorialOverlay .tutorialFooterRow {
  justify-content: space-between;
}

#tutorialOverlay .tutorialFooterRow > button {
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  height: 44px;
}

.tutorialStepPills {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.tutorialStepPill {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .10);
}

.tutorialStepPill.is-done {
  background: #22c55e;
}

.tutorialStepPill.is-current {
  background: #8b5cf6;
}

.tutorialArena {
  border-radius: 18px;
  padding: 12px 10px 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(246,244,255,.98));
  border: 1px solid rgba(139, 92, 246, .14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

#tutorialOverlay .tutorialArenaTop {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

#tutorialOverlay .tutorialPlayerCard {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#tutorialOverlay .tutorialPlayerCard--you {
  justify-content: flex-start;
}

#tutorialOverlay .tutorialPlayerCard--opp {
  justify-content: flex-end;
}

#tutorialOverlay .tutorialAvatar,
#tutorialOverlay .tutorialPlayerCard img.tutorialAvatar {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  flex: 0 0 34px !important;
  display: block !important;
  object-fit: cover !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 10px;
  border: 2px solid #d3d6da;
  background: #fff;
}

#tutorialOverlay .tutorialPlayerCard--you .tutorialAvatar {
  border-color: var(--c-blue-600);
}

#tutorialOverlay .tutorialPlayerCard--opp .tutorialAvatar {
  border-color: var(--c-red-600);
}

#tutorialOverlay .tutorialPlayerName {
  line-height: 1.1;
  font-weight: 900;
  font-size: 14px;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tutorialPlayerCard--you .tutorialAvatar {
  border-color: var(--c-blue-600);
}

.tutorialPlayerCard--opp .tutorialAvatar {
  border-color: var(--c-red-600);
}

.tutorialPlayerName {
  font-weight: 900;
  font-size: 14px;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tutorialVs {
  font-weight: 1000;
  font-size: 12px;
  color: #8b5cf6;
  letter-spacing: .08em;
}

.tutorialStatus {
  text-align: center;
  font-weight: 900;
  font-size: 13px;
  line-height: 1.35;
  color: #111;
  background: rgba(139, 92, 246, .08);
  border: 1px solid rgba(139, 92, 246, .15);
  border-radius: 12px;
  padding: 8px 10px;
  margin-bottom: 10px;
}

.tutorialIntroText {
  text-align: center;
  line-height: 1.45;
  font-weight: 700;
  color: #222;
  margin-bottom: 12px;
}

.tutorialBoardWrap {
  width: 100%;
  max-width: 330px;
  margin: 0 auto 10px;
}

#tutorialGameBoard,
#tutorialLiveRow {
  width: 100%;
  max-width: 330px;
  margin-left: auto;
  margin-right: auto;
}

#tutorialGameBoard {
  display: flex;
  flex-direction: column;
}

#tutorialGameBoard .guessRow,
#tutorialLiveRow.guessRow {
  width: 100% !important;
  justify-content: flex-start !important;
}
#tutorialGameBoard .guessRow.you .tile,
#tutorialLiveRow.you .tile {
  border-color: var(--c-blue-600) !important;
}

#tutorialGameBoard .guessRow.opp .tile,
#tutorialLiveRow.opp .tile {
  border-color: var(--c-red-600) !important;
}

#tutorialGameBoard .guessRow .tile.correct,
#tutorialLiveRow .tile.correct {
  background: var(--c-green-wordle) !important;
  border-color: var(--c-green-wordle) !important;
  color: #fff !important;
}

#tutorialGameBoard .guessRow.opp {
  filter: drop-shadow(0 0 6px rgba(220, 38, 38, .14));
}

#tutorialGameBoard .guessRow.you {
  filter: drop-shadow(0 0 6px rgba(37, 99, 235, .14));
}
#tutorialLiveRow {
  margin-top: 4px;
}

#tutorialLiveRow .tile {
  opacity: .98;
}

.tutorialKeyboard {
  margin: 0 auto;
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
  padding: 0 4px 6px;
}

.tutorialKeyboard .fila-teclado {
  display: flex;
  gap: 6px;
  width: 100%;
  margin: 6px auto 0;
  padding: 0 4px;
  box-sizing: border-box;
  justify-content: center;
}

.tutorialKeyboard .tecla {
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  color: #000;
  font-weight: 700;
  user-select: none;
  font-size: 1rem;
  text-align: center;
  background-color: #d3d6da;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tutorialKeyboard .tecla-accion,
.tutorialKeyboard .tecla-wide {
  flex: 1.8 1 0;
}

.tutorialKeyboard .tecla-accion img {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
}

.tutorialKeyboard .tecla:disabled {
  opacity: .35;
  filter: grayscale(.2);
  cursor: not-allowed;
}

.tutorialKeyboard .tecla.tutorialKeyNext {
  background: #22c55e;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
  animation: tutorialKeyPulse 1s ease-in-out infinite;
}

@keyframes tutorialKeyPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.tutorialKeyboard.is-locked {
  opacity: .72;
  pointer-events: none;
}

.tutorialFeedback {
  margin-top: 10px;
  border-radius: 12px;
  padding: 10px 12px;
  line-height: 1.4;
  font-weight: 800;
  font-size: 13px;
}

.tutorialFeedback.ok {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.tutorialFeedback.bad {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.tutorialCtaBox {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
  padding: 10px 4px 6px;
}

.tutorialCtaTitle {
  font-size: 22px;
  font-weight: 1000;
  color: #8b5cf6;
}

.tutorialCtaText {
  font-weight: 700;
  line-height: 1.45;
  color: #222;
}

.tutorialScoreBox {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  text-align: left;
  width: 100%;
  max-width: 250px;
}

.tutorialScoreItem {
  border-radius: 10px;
  padding: 7px 9px;
  background: rgba(139, 92, 246, .06);
  border: 1px solid rgba(139, 92, 246, .14);
  font-weight: 900;
  color: #111;
  font-size: 12px;
}

@media (max-width: 600px) {
  .tutorialKeyboard .fila-teclado {
    width: 100% !important;
    justify-content: space-between !important;
  }
}


.tutorialIconoBarra {
  position: absolute;
  top: -4px;
  width: 28px;
  height: 28px;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
}

.tutorialIconoBarra--blink {
  animation: parpadeo 1s infinite;
}

.tutorialProgressExplain {
  margin-top: 12px;
  text-align: center;
  line-height: 1.35;
  font-weight: 800;
  color: #222;
}

.tutorialCtaBox .btnPrimary[data-tutorial-action="start"] {
  font-size: 18px;
  font-weight: 900;
  padding-top: 14px;
  padding-bottom: 14px;
}

.tutorialStartBtn {
  font-size: 18px;
  font-weight: 900;
  min-height: 48px;
}

.tutorialKeyboard--message {
  padding: 0 !important;
}

.tutorialBottomMessage {
  width: 100%;
  max-width: 330px;
  margin: 0 auto;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  text-align: center;
  border-radius: 14px;
  background: rgba(139, 92, 246, .08);
  border: 1px solid rgba(139, 92, 246, .16);
  padding: 14px 12px;
  box-sizing: border-box;
}

.tutorialMessageBig {
  font-weight: 1000;
  font-size: 17px;
  color: #111;
}

.tutorialMessageSmall {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
  color: #333;
}

.tutorialRealProgressWrap {
  width: 100%;
  max-width: 330px;
  margin: 0 auto 8px;
}

.tutorialRealProgress {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 20px;
  background: #f0f0f0;
  border-radius: var(--radius-10);
  margin: 8px auto 0;
  box-shadow: inset 0 0 4px var(--shadow-025), 0 1px 2px rgba(0, 0, 0, .1);
  border: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: .9rem;
  box-sizing: border-box;
  overflow: visible;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .75), var(--spec-000) 45%), linear-gradient(to bottom, #f2f3f5, #e6e7ea);
  box-shadow: inset 0 1px 0 var(--spec-085), inset 0 -3px 6px rgba(0, 0, 0, .18), 0 2px 10px var(--shadow-010);
}

.tutorialRealProgress::before,
.tutorialRealProgress::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.tutorialRealProgress::before {
  left: 10px;
  right: 10px;
  top: 2px;
  height: 55%;
  border-radius: var(--radius-pill);
  background: linear-gradient(to bottom, rgba(255, 255, 255, .75), rgba(255, 255, 255, .22), var(--spec-000));
  opacity: 1.9;
}

.tutorialRealProgress::after {
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .10) 0%, var(--spec-000) 60%, var(--shadow-014) 100%);
  opacity: .35;
}

.tutorialRealProgress .letra-a,
.tutorialRealProgress .letra-z {
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: .02em;
  user-select: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75), 0 -1px 0 rgba(0, 0, 0, .30);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.tutorialRealProgress .letra-a {
  left: 6px;
  color: rgba(37, 99, 235, .55);
}

.tutorialRealProgress .letra-z {
  right: 6px;
  color: rgba(220, 38, 38, .52);
}

.tutorialBlinkMark {
  animation: parpadeo 1s infinite !important;
}

#tutorialLiveRow.opp .tile {
  border-color: var(--c-red-600) !important;
}

.tutorialRealBarWrap {
  width: 100%;
  max-width: 290px;
  margin: 2px auto 6px;
}

.tutorialRealBar {
  position: relative;
  overflow: visible;
  width: 100%;
  height: 22px;
  border-radius: 10px;
  border: 1px solid #ccc;

  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 45%),
    linear-gradient(to bottom, #f2f3f5, #e6e7ea);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -3px 6px rgba(0, 0, 0, .18),
    0 2px 10px rgba(0, 0, 0, .10);
}

.tutorialRealBar::before,
.tutorialRealBar::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.tutorialRealBar::before {
  left: 10px;
  right: 10px;
  top: 2px;
  height: 55%;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, .75),
    rgba(255, 255, 255, .22),
    rgba(255, 255, 255, 0)
  );
  opacity: 1.9;
}

.tutorialRealBar::after {
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, .10) 0%,
    rgba(255, 255, 255, 0) 60%,
    rgba(0, 0, 0, .14) 100%
  );
  opacity: .35;
}

.tutorialRealBar .letra-a,
.tutorialRealBar .letra-z {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: .02em;
  user-select: none;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .75),
    0 -1px 0 rgba(0, 0, 0, .30);
}

.tutorialRealBar .letra-a {
  left: 6px;
  color: rgba(37, 99, 235, .55);
}

.tutorialRealBar .letra-z {
  right: 6px;
  color: rgba(220, 38, 38, .52);
}

/* Misma lógica de marca que el juego real */
.tutorialRealBar .marca-intento {
  position: absolute;
  top: 0;
  height: 100%;
  width: 2px;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;
  opacity: .95;
}

/* versión tutorial: violeta, pero con la misma estructura real */
.tutorialRealBar .tutorialMarcaVioleta {
  background: #8b5cf6;
  box-shadow:
    0 0 8px rgba(139, 92, 246, .38),
    0 0 0 1px rgba(139, 92, 246, .22);
}

.tutorialRealBar .tutorialMarcaVioleta.last {
  animation: tutorialMarkBlink 1s ease-in-out infinite;
}

@keyframes tutorialMarkBlink {
  0%, 100% {
    opacity: .55;
    box-shadow:
      0 0 6px rgba(139, 92, 246, .24),
      0 0 0 1px rgba(139, 92, 246, .14);
  }
  50% {
    opacity: 1;
    box-shadow:
      0 0 14px rgba(139, 92, 246, .50),
      0 0 0 2px rgba(139, 92, 246, .24);
  }
}


.tutorialFooter {
  display: flex;
  align-items: center;
  gap: 8px;
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: #fff;
  padding-top: 8px;
}

.tutorialFooterRow {
  justify-content: space-between;
}

.tutorialFooterRow > button {
  flex: 1 1 0;
  min-width: 0;
}