/* =========================================================
     PALABRAS A CONTRARRELOJ — CSS limpio
     Estructura:
     1. Variables/base
     2. Pantallas y botones generales
     3. Login
     4. Home: logo cronómetro + botones
     5. Juego
     6. Clasificaciones/logros/cómo jugar
     7. Animaciones y responsive
     ========================================================= */

  :root {
    --pac-bg: #ece5d9;

    --pac-green: #0b8f52;
    --pac-green-light: #15aa60;
    --pac-green-dark: #066b3b;
    --pac-green-deep: #087946;
    --pac-green-soft: rgba(11, 143, 82, 0.12);

    --pac-navy: #053b5c;
    --pac-navy-dark: #022b45;

    --pac-card: rgba(255, 255, 255, 0.72);
    --pac-card-strong: rgba(255, 255, 255, 0.92);
    --pac-border: rgba(5, 59, 92, 0.16);

    --pac-text: #123044;
    --pac-muted: #5f7480;
    --pac-white: #ffffff;

    --pac-gold: #d6a246;
    --pac-gold-light: #e0b962;
    --pac-gold-dark: #b88628;

    --pac-danger: #c43b32;
    --pac-danger-soft: rgba(196, 59, 50, 0.12);

    --pac-shadow: 0 10px 24px rgba(5, 59, 92, 0.16);
    --pac-shadow-soft: 0 5px 14px rgba(5, 59, 92, 0.12);

    --fallDur: 0.66s;
    --stagger: 0.08s;
  }

  html,
  body {
    height: 100%;
    background: var(--pac-bg);
    color: var(--pac-text);
  }

  body {
    margin: 0;
    min-height: 100vh;
    padding: 10px;
    overflow: hidden;
    overflow-x: hidden;
    user-select: none;
    text-shadow: none;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  h1,
  h2,
  h3 {
    color: var(--pac-navy);
    text-shadow: none;
    text-align: center;
  }

  h1 {
    margin: 5px 0 10px;
    font-family: Impact, "Arial Black", system-ui, sans-serif;
    font-size: 2.35rem;
    letter-spacing: 1px;
  }

  h3 {
    margin-bottom: 10px;
  }

  .wood-bg,
  .board-pattern,
  .particles {
    display: none !important;
  }

  /* =========================
     Pantallas y botones base
     ========================= */

  .screen {
    display: none;
    width: 100%;
    max-width: 500px;
    overflow: hidden;
    color: var(--pac-text);

    flex-direction: column;
    align-items: center;
  }

  #register {
    display: flex;
  }

  #home,
  #game,
  #scores,
  #achievements,
  #howTo,
  #settings,
  #friends,
  #usernameSetup {
    background: transparent;
    color: var(--pac-text);
    border: none;
    box-shadow: none;
  }

  #home {
    display: none;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  button {
    width: 150px;
    height: 40px;
    margin: 10px;
    padding: 8px 16px;

    border: none;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;

    background: linear-gradient(180deg, var(--pac-green) 0%, var(--pac-green-dark) 100%);
    color: var(--pac-white);
    box-shadow: var(--pac-shadow-soft);
    text-shadow: none;

    font-size: 1rem;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease;
  }

  button:hover:not(:disabled) {
    background: linear-gradient(180deg, #10a862 0%, var(--pac-green-dark) 100%);
    transform: translateY(-2px) scale(1.01);
    box-shadow: var(--pac-shadow);
  }

  button:disabled {
    background: #b8c5c8;
    color: #eef3f4;
    cursor: default;
    box-shadow: none;
  }

  .grayBtn {
    background: linear-gradient(180deg, var(--pac-navy) 0%, var(--pac-navy-dark) 100%);
    color: var(--pac-white);
  }

  /* =========================
     Login / pantalla previa
     ========================= */

  #register {
    max-width: none;
    width: 100%;
    min-height: 100dvh;
    box-sizing: border-box;
    padding:
      calc(18px + env(safe-area-inset-top))
      18px
      calc(18px + env(safe-area-inset-bottom));

    align-items: center;
    justify-content: center;

    background: var(--pac-bg);
    color: var(--pac-text);
    position: relative;
    overflow: hidden;
  }

  #register::before,
  #register::after {
    display: none;
  }

  #register .auth-inner {
    position: relative;
    z-index: 1;

    width: min(100%, 460px);
    min-height: min(100dvh, 820px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 4.5vh, 42px);
  }

  #register .auth-logo {
    width: min(76vw, 300px);
    max-height: 34vh;
    object-fit: contain;
    display: block;
    margin-top: -2vh;
    filter:
      drop-shadow(0 8px 16px rgba(5, 59, 92, 0.12))
      drop-shadow(0 0 10px rgba(11, 143, 82, 0.08));
  }

  #register .auth-actions {
    width: min(100%, 390px);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #register .auth-btn {
    width: 100%;
    height: auto;
    min-height: 68px;
    margin: 0;
    padding: 0 22px;
    border-radius: 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    cursor: pointer;
    font-size: clamp(18px, 4.6vw, 23px);
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: -0.2px;

    box-shadow:
      0 10px 18px rgba(0,0,0,0.30),
      inset 0 1px 1px rgba(255,255,255,0.75);
  }

  #register .auth-btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.01);
    box-shadow:
      0 13px 22px rgba(0,0,0,0.34),
      inset 0 1px 1px rgba(255,255,255,0.75);
  }

  #register .auth-btn:active {
    transform: translateY(1px) scale(0.99);
    filter: brightness(0.98);
  }

  #register .google-btn {
    background: var(--pac-card-strong);
    color: var(--pac-navy);
    border: 1px solid var(--pac-border);
    box-shadow: var(--pac-shadow-soft);
  }

  #register .apple-btn {
    margin-bottom: 12px;
    background: #000;
    color: #fff;
    border: 1px solid #000;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.24);
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
  }

  #register .apple-btn[hidden] {
    display: none !important;
  }

  #register .guest-btn {
    margin-top: clamp(28px, 5vh, 42px);
    background: linear-gradient(180deg, var(--pac-green) 0%, var(--pac-green-dark) 100%);
    color: var(--pac-white);
    box-shadow: var(--pac-shadow);
  }

  #register .apple-mark,
  #register .google-mark,
  #register .guest-mark {
    display: grid;
    place-items: center;
  }

  #register .google-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    background: #fff;
    color: #4285f4;
    font-size: 31px;
    font-weight: 900;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  }

  #register .apple-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
  }

  #register .guest-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    font-size: 34px;
    filter: none;
  }

  #register .auth-hint {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--pac-muted);
    font-size: clamp(15px, 3.8vw, 18px);
    font-weight: 500;
    text-align: center;
    text-shadow: none;
  }

  #register .reg-error {
    min-height: 20px;
    margin: 14px 0 0;
    color: var(--pac-danger);
    font-size: 0.95rem;
    text-align: center;
  }

  #register .auth-user {
    margin: 0;
    color: var(--pac-muted);
    font-size: 0.85rem;
    text-align: center;
  }


  /* =========================
     Elección de nombre de jugador
     ========================= */

  #usernameSetup {
    max-width: none;
    width: 100%;
    min-height: 100dvh;
    box-sizing: border-box;
    padding:
      calc(22px + env(safe-area-inset-top))
      18px
      calc(18px + env(safe-area-inset-bottom));

    align-items: center;
    justify-content: center;
    background: var(--pac-bg);
    color: var(--pac-text);
  }

  #usernameSetup .username-card {
    width: min(100%, 430px);
    box-sizing: border-box;
    padding: 22px 18px 20px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid var(--pac-border);
    box-shadow: var(--pac-shadow);
    text-align: center;
  }

  #usernameSetup h2 {
    width: fit-content;
    max-width: calc(100vw - 48px);
    margin: 0 auto 14px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    color: var(--pac-navy);
    border: 1px solid var(--pac-border);
    box-shadow: var(--pac-shadow-soft);
    font-family: Impact, "Arial Black", system-ui, sans-serif;
    font-size: clamp(1.55rem, 6vw, 2.05rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0.8px;
    text-transform: uppercase;
  }

  #usernameSetup .username-intro {
    margin: 0 auto 16px;
    color: var(--pac-muted);
    font-size: 0.98rem;
    line-height: 1.32;
  }

  #usernameSetup label {
    display: block;
    margin: 0 0 8px;
    color: var(--pac-navy);
    font-size: 1.02rem;
    font-weight: 850;
    text-align: left;
  }

  #usernameInput {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 14px;
    border-radius: 14px;
    border: 1px solid var(--pac-border);
    background: rgba(255, 255, 255, 0.92);
    color: var(--pac-navy);
    box-shadow: var(--pac-shadow-soft);
    font-size: 1.2rem;
    font-weight: 800;
    text-align: center;
    outline: none;
  }

  #usernameInput:focus {
    border-color: rgba(11, 143, 82, 0.48);
    box-shadow: 0 0 0 3px rgba(11, 143, 82, 0.12), var(--pac-shadow-soft);
  }

  #usernameSetup .username-rules {
    margin: 10px 0 0;
    color: var(--pac-muted);
    font-size: 0.82rem;
    line-height: 1.25;
    text-align: left;
  }

  #usernameError {
    min-height: 20px;
    margin: 12px 0 0;
    color: var(--pac-danger);
    font-size: 0.92rem;
    font-weight: 700;
    text-align: center;
  }

  #usernameSaveBtn {
    width: 100%;
    height: 52px;
    margin: 14px 0 0;
    border-radius: 16px;
    font-size: 1.05rem;
    font-weight: 900;
  }

  #usernameCancelBtn {
    width: 100%;
    height: 44px;
    margin: 10px 0 0;
    border-radius: 14px;
    font-size: 0.98rem;
    font-weight: 850;
  }

  #usernameSetup .username-note {
    margin: 14px 0 0;
    color: var(--pac-muted);
    font-size: 0.82rem;
    line-height: 1.25;
  }

  /* =========================
     Home: fichas PALABRAS + asset del emblema
     ========================= */

  .title {
    width: 100%;
    max-width: 980px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2.5vw, 14px);
    margin: clamp(8px, 3vw, 18px) auto;
  }

  .title-line {
    display: flex;
    justify-content: center;
    gap: clamp(6px, 2vw, 12px);
    transform-origin: center;
    will-change: transform;
  }

  #home .title.title-home-badge {
    gap: 0;
    margin: 2px auto 6px;
  }

  #home .title.title-home-badge .title-line {
    width: max-content;
    max-width: 100%;
    align-items: center;
    gap: 8px;
    transform-origin: center center;
  }

  #home .title.title-home-badge .line-1 {
    margin-bottom: 0;
  }

  #home .title.title-home-badge .line-1 .scrabble-tile:nth-child(1),
  #home .title.title-home-badge .line-1 .scrabble-tile:nth-child(8) {
    margin-top: 16px;
  }

  #home .title.title-home-badge .line-1 .scrabble-tile:nth-child(2),
  #home .title.title-home-badge .line-1 .scrabble-tile:nth-child(7) {
    margin-top: 9px;
  }

  #home .title.title-home-badge .line-1 .scrabble-tile:nth-child(3),
  #home .title.title-home-badge .line-1 .scrabble-tile:nth-child(6) {
    margin-top: 4px;
  }

  .scrabble-tile {
    display: grid;
    place-items: center;
    user-select: none;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background:
      radial-gradient(circle at 35% 25%, rgba(255,255,255,0.20), transparent 30%),
      linear-gradient(180deg, var(--pac-green) 0%, var(--pac-green-dark) 100%);
    color: var(--pac-white);
    box-shadow:
      0 7px 16px rgba(5, 59, 92, 0.20),
      inset 0 1px 1px rgba(255,255,255,0.28);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 1px;
  }

  #home .title.title-home-badge .scrabble-tile {
    width: 56px;
    height: 56px;
    background: linear-gradient(180deg, var(--pac-green-light) 0%, #0a7f48 100%);
    font-size: 1.95rem;
    letter-spacing: 0;
    text-shadow: 0 1px 1px rgba(0,0,0,0.14);
    box-shadow:
      0 8px 18px rgba(0, 0, 0, 0.16),
      inset 0 2px 4px rgba(255,255,255,0.18),
      inset 0 -5px 10px rgba(0,0,0,0.16);
  }

  #home .title-asset-wrap {
    width: min(430px, 94vw);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -6px;
    margin-bottom: 6px;
    pointer-events: none;
  }

  #home .title-asset {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 18px rgba(5, 59, 92, 0.13));
  }

  /* Cascada del logo: solo cae PALABRAS */
  .cascade .scrabble-tile {
    opacity: 0;
    transform: translateY(-46px) scale(0.94);
    animation: homeTitleDrop 0.72s cubic-bezier(.18,.88,.30,1.18) forwards;
    animation-delay: calc(var(--i) * var(--stagger));
  }

  /* =========================
     Home: botones e iconos SVG
     ========================= */

  .home-buttons {
    display: none;
  }

  #home .home-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 3.2vw, 18px);

    width: 100%;
    margin: clamp(16px, 4vw, 24px) auto;
    padding: 0 clamp(8px, 4vw, 16px);
  }

  .screen:not(#home) .tile-button,
  .screen:not(#home) #playBtn {
    display: none;
  }

  #home .home-buttons .tile-button {
    width: min(720px, 92vw);
    min-height: 58px;
    height: auto;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    border-radius: 18px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    font-size: clamp(16px, 4.3vw, 22px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .3px;
    outline: none;
  }

  #home .home-buttons .grayBtn {
    background: linear-gradient(180deg, var(--pac-navy) 0%, var(--pac-navy-dark) 100%);
    color: var(--pac-white);
  }

  #home .home-buttons #playBtn {
    min-height: 72px;
    gap: 10px;
    transform: scale(1.03);
    background: linear-gradient(180deg, #11a861 0%, #087343 100%);
    color: var(--pac-white);
    border: 2px solid rgba(255,255,255,0.28);
    box-shadow: 0 10px 24px rgba(11, 143, 82, 0.30);
  }

  #home .home-buttons #playBtn:hover:not(:disabled) {
    background: linear-gradient(180deg, #14b86a 0%, #076a3d 100%);
    box-shadow: 0 12px 28px rgba(11, 143, 82, 0.36);
  }

  #home .home-svg-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #home #playBtn .home-svg-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  #home .home-svg-icon svg,
  #home .home-exit-svg svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }

  #home .play-svg path {
    fill: var(--pac-white);
  }

  #home .round-svg .icon-ring {
    fill: rgba(255, 255, 255, 0.06);
    stroke: rgba(255, 255, 255, 0.34);
    stroke-width: 3;
  }

  #home .round-svg .icon-gold {
    fill: #f6c64a;
    stroke: rgba(95, 70, 20, 0.22);
    stroke-width: 1.6;
  }

  #home .round-svg .icon-gold-dark {
    fill: #b77a12;
  }

  #home .round-svg .icon-ribbon-blue {
    fill: #6eb4df;
    stroke: rgba(255, 255, 255, 0.28);
    stroke-width: 1;
  }

  #home .round-svg .icon-help {
    fill: rgba(255, 255, 255, 0.88);
  }

  #home #homeExitBtn,
  #home #homeSettingsBtn {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom) + 52px);
    transform: translateX(-50%);

    width: auto;
    height: auto;
    margin: 0;
    padding: 6px 12px;
    gap: 7px;

    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.34);
    color: var(--pac-navy);
    box-shadow: none;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    z-index: 20;
  }

  #home #homeExitBtn {
    left: calc(50% - 126px);
  }

  #home #homeSettingsBtn {
    left: calc(50% + 126px);
  }

  #home #homeExitBtn:hover:not(:disabled),
  #home #homeExitBtn:active,
  #home #homeSettingsBtn:hover:not(:disabled),
  #home #homeSettingsBtn:active {
    background: rgba(5, 59, 92, 0.08);
    color: var(--pac-navy-dark);
    box-shadow: none;
    transform: translateX(-50%) scale(1.03);
  }

  #home .home-exit-svg,
  #home .home-settings-svg {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    display: inline-flex;
  }

  #home .home-settings-svg {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }

  #home .home-exit-svg circle {
    fill: none;
    stroke: #d63b32;
    stroke-width: 4;
  }

  #home .home-exit-svg path {
    fill: none;
    stroke: #d63b32;
    stroke-width: 5;
    stroke-linecap: round;
  }

  #home .home-settings-svg svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }

  #home .home-settings-svg .gear-body {
    fill: var(--pac-navy);
  }

  #home .home-settings-svg .gear-hole {
    fill: rgba(255, 255, 255, 0.92);
  }

  /* =========================
     Pantalla de ajustes
     ========================= */

  #settings {
    min-height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    box-sizing: border-box;
    padding:
      calc(22px + env(safe-area-inset-top))
      14px
      calc(18px + env(safe-area-inset-bottom));
    justify-content: flex-start;
  }

  #settings h2 {
    margin: 8px 0 18px;
  }

  .settings-panel {
    width: min(430px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 14px;
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.54);
    border: 1px solid var(--pac-border);
    box-shadow: var(--pac-shadow-soft);
  }

  .settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(5, 59, 92, 0.10);
  }

  .settings-row:last-child {
    border-bottom: none;
  }

  .settings-row-stacked {
    align-items: flex-start;
  }

  .settings-title {
    color: var(--pac-navy);
    font-size: 1.05rem;
    font-weight: 850;
  }

  .settings-desc {
    margin-top: 4px;
    color: var(--pac-muted);
    font-size: 0.9rem;
    line-height: 1.25;
  }

  #settingsSoundBtn,
  #settingsNameBtn,
  #settingsFriendsBtn {
    width: auto;
    height: 42px;
    min-width: 112px;
    margin: 0;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.95rem;
    white-space: nowrap;
  }

  #settingsSoundBtn.sound-off {
    background: linear-gradient(180deg, #9aa6aa 0%, #6f7f86 100%);
  }

  #settingsNameBtn:disabled,
  #settingsFriendsBtn:disabled {
    background: #b8c5c8;
    color: #eef3f4;
    opacity: 0.9;
  }

  .settings-danger-zone {
    width: min(430px, calc(100vw - 32px));
    margin: 26px auto 0;
    padding-top: 18px;
    border-top: 1px solid rgba(196, 59, 50, 0.18);
    display: flex;
    justify-content: center;
  }

  #settingsLogoutBtn {
    width: auto;
    min-width: 170px;
    height: 44px;
    margin: 0;
    padding: 8px 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, #d9574f 0%, var(--pac-danger) 100%);
    color: var(--pac-white);
    font-size: 0.98rem;
    font-weight: 900;
    box-shadow: 0 6px 14px rgba(196, 59, 50, 0.18);
  }

  #settingsLogoutBtn:hover:not(:disabled),
  #settingsLogoutBtn:active {
    background: linear-gradient(180deg, #e0665f 0%, #ac2f27 100%);
    box-shadow: 0 8px 18px rgba(196, 59, 50, 0.24);
  }


  /* Eliminación de cuenta: opción deliberadamente secundaria */
  .settings-account-delete {
    width: min(430px, calc(100vw - 32px));
    margin: 30px auto 6px;
    padding: 18px 0 0;
    border-top: 1px solid rgba(5, 59, 92, 0.10);
    text-align: center;
  }

  #settingsDeleteAccountBtn {
    width: auto;
    height: auto;
    min-width: 0;
    margin: 0;
    padding: 5px 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--pac-muted);
    box-shadow: none;
    font-size: 0.82rem;
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  #settingsDeleteAccountBtn:hover:not(:disabled),
  #settingsDeleteAccountBtn:active {
    background: rgba(196, 59, 50, 0.06);
    color: var(--pac-danger);
    box-shadow: none;
    transform: none;
  }

  .account-delete-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-sizing: border-box;
    background: rgba(2, 43, 69, 0.58);
    backdrop-filter: blur(3px);
  }

  .account-delete-card {
    width: min(440px, calc(100vw - 36px));
    max-height: calc(100dvh - 36px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 22px 18px 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.98);
    color: var(--pac-text);
    border: 1px solid rgba(196, 59, 50, 0.24);
    box-shadow: 0 18px 42px rgba(2, 43, 69, 0.30);
    text-align: left;
  }

  .account-delete-title {
    margin: 0 0 12px;
    color: var(--pac-danger);
    font-size: 1.42rem;
    font-weight: 950;
    line-height: 1.1;
    text-align: center;
  }

  .account-delete-warning {
    margin: 0 0 12px;
    color: var(--pac-text);
    font-size: 0.96rem;
    line-height: 1.38;
  }

  .account-delete-list {
    margin: 10px 0 14px;
    padding-left: 22px;
    color: var(--pac-muted);
    font-size: 0.9rem;
    line-height: 1.38;
  }

  .account-delete-list li + li {
    margin-top: 4px;
  }

  .account-delete-google-note {
    margin: 12px 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(5, 59, 92, 0.06);
    color: var(--pac-navy);
    font-size: 0.88rem;
    line-height: 1.32;
    font-weight: 750;
  }

  #deleteAccountConfirmInput {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    margin: 6px 0 4px;
    padding: 8px 12px;
    border-radius: 13px;
    border: 1px solid rgba(196, 59, 50, 0.28);
    background: #fff;
    color: var(--pac-navy);
    font-size: 1.05rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    outline: none;
  }

  #deleteAccountConfirmInput:focus {
    border-color: var(--pac-danger);
    box-shadow: 0 0 0 3px rgba(196, 59, 50, 0.10);
  }

  .account-delete-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
  }

  .account-delete-actions button {
    width: auto;
    min-width: 145px;
    height: 44px;
    margin: 0;
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 0.92rem;
  }

  #deleteAccountFinalBtn {
    width: min(260px, 100%);
    height: auto;
    min-height: 48px;
    white-space: normal;
    line-height: 1.15;
    background: linear-gradient(180deg, #d9574f 0%, var(--pac-danger) 100%);
  }

  #deleteAccountFinalBtn:disabled,
  #deleteAccountContinueBtn:disabled {
    background: #bcc5c8;
    color: #eef3f4;
  }

  .account-delete-status {
    min-height: 1.25em;
    margin-top: 12px;
    color: var(--pac-danger);
    font-size: 0.88rem;
    font-weight: 750;
    line-height: 1.3;
    text-align: center;
  }


  .internal-notice-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-sizing: border-box;
    background: rgba(5, 59, 92, 0.22);
    backdrop-filter: blur(2px);
  }

  .internal-notice-card {
    width: min(430px, calc(100vw - 36px));
    box-sizing: border-box;
    padding: 20px 18px 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--pac-text);
    border: 1px solid var(--pac-border);
    box-shadow: 0 16px 34px rgba(5, 59, 92, 0.22);
    text-align: center;
  }

  .internal-notice-title {
    color: var(--pac-navy);
    font-size: 1.35rem;
    font-weight: 950;
    line-height: 1.1;
    margin-bottom: 10px;
  }

  .internal-notice-text {
    color: var(--pac-muted);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 14px;
  }

  #internalNoticeOkBtn {
    width: min(240px, 80vw);
    height: 46px;
    margin: 0 auto;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 950;
  }

  /* La pantalla de amigos debe poder desplazarse cuando la lista crece. */
  #friends {
    min-height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding:
      calc(22px + env(safe-area-inset-top))
      14px
      calc(24px + env(safe-area-inset-bottom));
    justify-content: flex-start;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  #friends > h2,
  #friends .friends-panel,
  #friends #backFromFriendsBtn {
    flex: 0 0 auto;
  }

  #friends #backFromFriendsBtn {
    margin-top: 8px;
    margin-bottom: 14px;
  }

  .friends-panel {
    width: min(430px, calc(100vw - 32px));
    box-sizing: border-box;
    margin: 0 auto 14px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.50);
    border: 1px solid var(--pac-border);
    box-shadow: var(--pac-shadow-soft);
  }

  .friends-search-row {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    margin-top: 10px;
  }

  #friendSearchInput {
    flex: 1;
    min-width: 0;
    height: 44px;
    box-sizing: border-box;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--pac-border);
    background: rgba(255,255,255,0.82);
    color: var(--pac-navy);
    font-size: 1rem;
    font-weight: 750;
    outline: none;
  }

  #friendSearchBtn {
    width: auto;
    min-width: 92px;
    height: 44px;
    margin: 0;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 0.95rem;
  }

  .friend-message {
    min-height: 1.2em;
    margin-top: 10px;
    color: var(--pac-muted);
    font-size: 0.9rem;
    font-weight: 750;
    text-align: center;
  }

  .friend-result,
  .friend-item {
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.60);
    border: 1px solid rgba(5, 59, 92, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .friend-name {
    color: var(--pac-navy);
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .friend-action {
    width: auto;
    min-width: 96px;
    height: 38px;
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.9rem;
  }

  .friend-action.remove {
    background: linear-gradient(180deg, #9aa6aa 0%, #6f7f86 100%);
  }

  .settings-note {
    width: min(430px, calc(100vw - 32px));
    margin: 12px auto 0;
    color: var(--pac-muted);
    font-size: 0.86rem;
    line-height: 1.25;
    text-align: center;
  }

  #settings #backFromSettingsBtn {
    margin-top: 22px;
  }

  /* =========================
     Pantalla de juego
     ========================= */

  #game {
    max-width: 95%;
    min-height: 100dvh;
    padding: calc(18px + env(safe-area-inset-top)) 10px 0;
    box-sizing: border-box;
    justify-content: flex-start;
    overflow: hidden;
  }

  #game .game-top-logo {
    display: block;
    width: min(145px, 36vw);
    height: auto;
    margin: 0 auto 40px;
    filter: drop-shadow(0 6px 12px rgba(5, 59, 92, 0.12));
  }

  #letters {
    display: grid;
    grid-template-columns: repeat(8, 38px);
    justify-content: center;
    gap: 6px;

    margin-top: 10px;
    margin-bottom: 12px;
  }

  .letter {
    width: 38px;
    height: 38px;
    border-radius: 999px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    user-select: none;

    background:
      radial-gradient(circle at 35% 25%, rgba(255,255,255,0.20), transparent 32%),
      linear-gradient(180deg, var(--pac-green) 0%, var(--pac-green-dark) 100%);
    color: var(--pac-white);
    box-shadow: 0 5px 12px rgba(5, 59, 92, 0.20);

    font-size: 1.4rem;
    font-weight: 800;
    transition: all 0.2s ease;
  }

  .letter.used {
    background: #d4dedb;
    color: #849693;
    cursor: default;
    box-shadow: none;
    transform: scale(0.95);
  }

  .letter.active {
    background: linear-gradient(180deg, var(--pac-navy) 0%, var(--pac-navy-dark) 100%);
    color: var(--pac-white);
    transform: scale(1.3);
  }

  #currentWord {
    width: 95%;
    min-height: 2.5rem;
    margin-top: 4px;
    margin-bottom: 10px;
    padding: 5px 10px;
    box-sizing: border-box;

    overflow: hidden;
    text-overflow: ellipsis;

    user-select: text;
    text-align: center;
    letter-spacing: 3px;

    background: var(--pac-card);
    color: var(--pac-navy);
    border: 1px solid var(--pac-border);
    border-radius: 8px;
    box-shadow: var(--pac-shadow-soft);

    font-size: 1.8rem;
  }

  #buttons {
    width: 100%;
    margin-bottom: 10px;

    display: flex;
    justify-content: center;
    gap: 8px;
  }

  #clearBtn {
    background: linear-gradient(180deg, #9aa6aa 0%, #6f7f86 100%);
    color: var(--pac-white);
    /* WKWebView: conserva cada tap como pulsación y elimina solo el gesto de
       doble tap para ampliar sobre este control. El pinch-zoom global sigue intacto. */
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  #clearBtn:hover:not(:disabled) {
    background: linear-gradient(180deg, #a8b2b6 0%, #65757c 100%);
  }

  #validateBtn {
    background: linear-gradient(180deg, var(--pac-green) 0%, var(--pac-green-dark) 100%);
  }

  #timer {
    margin-bottom: 8px;
    color: var(--pac-navy);
    text-shadow: 0 3px 10px rgba(5, 59, 92, 0.18);
    font-size: 1.8rem;
    font-weight: 700;
  }

  #scoreboard {
    width: 95%;
    margin-bottom: 10px;
    padding: 8px 12px;
    box-sizing: border-box;
    border-radius: 6px;

    background: var(--pac-card);
    color: var(--pac-navy);
    border: 1px solid var(--pac-border);
    box-shadow: var(--pac-shadow-soft);

    text-align: center;
    font-size: 1.2rem;
    letter-spacing: 1px;
  }

  #message {
    width: 95%;
    min-height: 3.2em;
    margin-bottom: 10px;
    overflow: visible;

    color: var(--pac-navy);
    text-shadow: none;

    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.15;
    transition: all 0.25s ease;
  }

  #game .sound-toggle-btn {
    position: fixed;
    left: calc(18px + env(safe-area-inset-left));
    bottom: calc(28px + env(safe-area-inset-bottom));
    z-index: 40;

    width: 56px;
    height: 56px;
    min-width: 56px;
    margin: 0;
    padding: 0;
    border-radius: 999px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255, 255, 255, 0.74);
    color: var(--pac-navy);
    border: 1px solid var(--pac-border);
    box-shadow: var(--pac-shadow-soft);

    font-size: 1.62rem;
    line-height: 1;
  }

  #game .sound-toggle-btn:hover:not(:disabled),
  #game .sound-toggle-btn:active {
    background: rgba(255, 255, 255, 0.92);
    color: var(--pac-navy-dark);
    transform: scale(1.04);
  }

  #game .sound-toggle-btn.sound-off {
    background: rgba(196, 59, 50, 0.12);
    color: var(--pac-danger);
    border-color: rgba(196, 59, 50, 0.22);
  }

  #game .pause-toggle-btn {
    position: fixed;
    right: calc(18px + env(safe-area-inset-right));
    bottom: calc(28px + env(safe-area-inset-bottom));
    z-index: 40;

    width: 56px;
    height: 56px;
    min-width: 56px;
    margin: 0;
    padding: 0;
    border-radius: 999px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255, 255, 255, 0.74);
    color: var(--pac-navy);
    border: 1px solid var(--pac-border);
    box-shadow: var(--pac-shadow-soft);

    font-size: 1.55rem;
    line-height: 1;
  }

  #game .pause-toggle-btn:hover:not(:disabled),
  #game .pause-toggle-btn:active {
    background: rgba(255, 255, 255, 0.92);
    color: var(--pac-navy-dark);
    transform: scale(1.04);
  }

  #game .pause-toggle-btn.pause-requested {
    background: rgba(11, 143, 82, 0.14);
    color: var(--pac-green-dark);
    border-color: rgba(11, 143, 82, 0.28);
  }

  #game .pause-toggle-btn.pause-resume {
    background: rgba(11, 143, 82, 0.88);
    color: var(--pac-white);
    border-color: rgba(255, 255, 255, 0.32);
  }

  #game .pause-toggle-btn.pause-unavailable,
  #game .pause-toggle-btn.pause-ended {
    background: rgba(154, 166, 170, 0.46);
    color: rgba(5, 59, 92, 0.58);
    border-color: rgba(5, 59, 92, 0.10);
    box-shadow: none;
  }

  #game #backFromGameBtn {
    margin-top: 38px;
  }

  /* =========================
     Clasificaciones, logros y ayuda
     ========================= */

  #scores,
  #achievements,
  #howTo {
    padding: 5px 10px;
    justify-content: flex-start;
  }

  #achievements,
  #howTo {
    max-height: 85vh;
    overflow-y: auto;
    padding: 10px;
  }

  #scores h2,
  #howTo h2,
  #achievements h2,
  #settings h2 {
    width: fit-content;
    max-width: calc(100vw - 40px);
    margin: 8px auto 18px;
    padding: 8px 20px;
    box-sizing: border-box;

    border-radius: 999px;
    background: rgba(255, 255, 255, 0.54);
    color: var(--pac-navy);
    border: 1px solid var(--pac-border);
    box-shadow: var(--pac-shadow-soft);

    font-family: Impact, "Arial Black", system-ui, sans-serif;
    font-size: clamp(1.75rem, 6vw, 2.25rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .screen-explain {
    width: min(430px, calc(100vw - 32px));
    box-sizing: border-box;
    margin: 0 auto 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.46);
    color: var(--pac-muted);
    border: 1px solid var(--pac-border);
    box-shadow: var(--pac-shadow-soft);
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .screen-explain strong {
    color: var(--pac-navy);
    font-weight: 900;
  }

  .screen-explain-left {
    text-align: left;
  }

  .screen-explain-left div + div {
    margin-top: 5px;
  }

  .section-mini-title {
    width: min(430px, calc(100vw - 32px));
    margin: 10px auto 8px;
    color: var(--pac-navy);
    text-align: center;
    font-size: 1.08rem;
    font-weight: 950;
    letter-spacing: 0.9px;
    text-transform: uppercase;
  }


  .medal-subtitle {
    width: min(430px, calc(100vw - 32px));
    margin: 10px auto 8px;
    color: var(--pac-navy);
    text-align: center;
    font-size: 0.98rem;
    font-weight: 900;
    letter-spacing: 0.1px;
  }

  .pending-card {
    width: min(430px, calc(100vw - 32px));
    box-sizing: border-box;
    margin: 0 auto 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.38);
    color: var(--pac-muted);
    border: 1px dashed rgba(5, 59, 92, 0.22);
    text-align: center;
    font-size: 0.9rem;
    font-weight: 750;
  }

  .challenge-list {
    width: min(430px, calc(100vw - 32px));
    box-sizing: border-box;
    margin: 0 auto 14px;
  }

  .challenge-card {
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 11px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.54);
    color: var(--pac-text);
    border: 1px solid var(--pac-border);
    box-shadow: var(--pac-shadow-soft);
    text-align: left;
  }

  .challenge-title {
    color: var(--pac-navy);
    font-weight: 900;
    font-size: 0.98rem;
    margin-bottom: 7px;
  }

  .challenge-line {
    color: var(--pac-muted);
    font-size: 0.9rem;
    line-height: 1.3;
    margin-top: 3px;
  }

  .challenge-line strong {
    color: var(--pac-navy);
    font-weight: 900;
  }

  .challenge-ok {
    color: var(--pac-green-dark);
    font-weight: 900;
  }

  .challenge-muted {
    color: var(--pac-muted);
    font-size: 0.88rem;
    text-align: center;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.38);
    border: 1px dashed rgba(5, 59, 92, 0.22);
  }


  /* =========================
     Retos visuales · v158
     ========================= */

  .challenge-card {
    padding: 14px 14px 13px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.60);
    border: 1px solid var(--pac-border);
    border-left: 5px solid rgba(11, 143, 82, 0.78);
  }

  .challenge-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--pac-navy);
    font-weight: 950;
    font-size: 1.05rem;
    margin-bottom: 9px;
  }

  .challenge-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 143, 82, 0.10);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.55);
    font-size: 1.18rem;
  }

  .challenge-line {
    color: var(--pac-muted);
    font-size: 0.92rem;
    line-height: 1.35;
    margin-top: 5px;
  }

  .challenge-achieved {
    color: var(--pac-green-dark);
    font-weight: 650;
  }

  .challenge-achieved u {
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }

  .challenge-number {
    color: var(--pac-green-dark);
    font-weight: 950;
  }

  .challenge-line strong {
    color: var(--pac-navy);
    font-weight: 950;
  }

  .challenge-objective-row {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
  }

  .challenge-objective-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--pac-navy) 0%, var(--pac-navy-dark) 100%);
    color: var(--pac-white);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.35px;
  }

  .challenge-streak-row {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .challenge-streak-count {
    color: var(--pac-navy);
    font-size: 0.95rem;
    font-weight: 900;
  }

  .challenge-streak-dots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .challenge-dot {
    width: 13px;
    height: 13px;
    border-radius: 999px;
    background: rgba(95, 116, 128, 0.26);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.45);
  }

  .challenge-dot.active {
    background: linear-gradient(180deg, var(--pac-green-light) 0%, var(--pac-green-dark) 100%);
    box-shadow:
      0 2px 5px rgba(11, 143, 82, 0.22),
      inset 0 1px 1px rgba(255,255,255,0.35);
  }

  #scoreList {
    width: 100%;
    max-height: 55vh;
    overflow-y: auto;
    margin: 10px 0;
    padding: 8px;
    border-radius: 8px;
  }

  #scoreList,
  #achievementList {
    background: rgba(255, 255, 255, 0.38);
    border: 1px solid var(--pac-border);
    box-shadow: var(--pac-shadow-soft);
  }

  .score-tabs,
  .achievement-tabs,
  .score-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
  }

  .score-tabs,
  .achievement-tabs {
    margin-bottom: 12px;
  }

  .score-filter {
    gap: 8px;
    margin: 8px 0 12px;
  }

  .score-tab,
  .achievement-tab {
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;

    background: rgba(255, 255, 255, 0.64);
    color: var(--pac-navy);
    border: 1px solid var(--pac-border);

    font-size: 0.9rem;
    transition: all 0.2s ease;
  }

  .score-tab.active,
  .achievement-tab.active,
  .filter-active {
    background: var(--pac-green);
    color: var(--pac-white);
    border-color: transparent;
    font-weight: bold;
    transform: none;
  }

  .score-filter button {
    width: auto;
    height: auto;
    margin: 0;
    padding: 5px 10px;
    font-size: 0.9rem;
  }

  .score-period-panel {
    width: min(430px, calc(100vw - 32px));
    box-sizing: border-box;
    margin: 0 auto 10px;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.36);
    border: 1px solid var(--pac-border);
    box-shadow: var(--pac-shadow-soft);
    text-align: center;
  }

  .score-period-title {
    color: var(--pac-navy);
    font-size: 0.96rem;
    font-weight: 950;
    margin-bottom: 6px;
  }

  .score-period-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .score-period-buttons button {
    width: auto;
    height: auto;
    margin: 0;
    padding: 5px 10px;
    font-size: 0.86rem;
  }

  .score-period-help {
    margin-top: 6px;
    color: var(--pac-muted);
    font-size: 0.8rem;
    line-height: 1.25;
  }

  .score-period-buttons button:disabled {
    opacity: 0.42;
  }

  .score-item,
  .achievement-item {
    display: flex;
    justify-content: space-between;

    margin: 4px 0;
    padding: 8px 10px;
    border-radius: 5px;

    background: var(--pac-card);
    color: var(--pac-text);
    border-left: 4px solid var(--pac-green);
    box-shadow: 0 3px 8px rgba(5, 59, 92, 0.08);
  }

  .score-item.highlight,
  .achievement-item.highlight {
    background: var(--pac-green-soft);
    border-left-color: var(--pac-navy);
    box-shadow: 0 0 0 1px rgba(11, 143, 82, 0.18), var(--pac-shadow-soft);
  }

  .score-position {
    min-width: 30px;
    display: flex;
    align-items: center;
    color: var(--pac-green-dark);
    font-weight: bold;
  }

  .score-value {
    color: var(--pac-navy);
    font-weight: bold;
  }

  .score-date {
    color: var(--pac-muted);
    font-size: 0.8rem;
  }

  .score-item {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .score-main-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  .score-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .score-player-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .score-right {
    text-align: right;
    flex-shrink: 0;
  }

  .score-value-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
  }

  .score-reaction-trigger {
    width: 25px;
    min-width: 25px;
    height: 25px;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(5, 59, 92, 0.16);
    background: rgba(255, 255, 255, 0.62);
    color: var(--pac-navy);
    box-shadow: none;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .score-reaction-trigger.has-reactions {
    background: var(--pac-green-soft);
    border-color: rgba(11, 143, 82, 0.28);
  }

  .score-reaction-summary {
    margin-top: 2px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    font-weight: 900;
    color: var(--pac-green-dark);
    line-height: 1.1;
    flex-wrap: wrap;
    max-width: 150px;
    margin-left: auto;
  }

  .score-reaction-summary span {
    white-space: nowrap;
  }

  .score-reaction-summary.clickable {
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 999px;
    background: rgba(11, 143, 82, 0.08);
  }

  .reaction-detail-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    text-align: left;
  }

  .reaction-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(5, 59, 92, 0.10);
    color: var(--pac-navy);
    font-weight: 800;
  }

  .reaction-detail-emoji {
    font-size: 1.15rem;
    line-height: 1;
  }

  .reaction-detail-user {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .score-reactions {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 6px 0 0 38px;
    max-width: 100%;
  }

  .score-reactions.open {
    display: flex;
  }

  .score-reaction-btn {
    width: auto;
    min-width: 33px;
    height: 29px;
    margin: 0;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid rgba(5, 59, 92, 0.16);
    background: rgba(255, 255, 255, 0.74);
    color: var(--pac-navy);
    box-shadow: none;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
  }

  .score-reaction-btn.active {
    background: var(--pac-green-soft);
    border-color: var(--pac-green);
    box-shadow: 0 0 0 1px rgba(11, 143, 82, 0.12);
  }

  .score-reaction-count {
    font-size: 0.74rem;
    font-weight: 900;
    color: var(--pac-green-dark);
  }

  .score-reaction-loading {
    opacity: 0.72;
    pointer-events: none;
  }

  .no-scores,
  .no-achievements {
    padding: 20px;
    color: var(--pac-muted);
    text-align: center;
    font-style: italic;
  }

  .loading-scores,
  .loading-achievements {
    padding: 20px;
    color: var(--pac-green-dark);
    text-align: center;
  }

  .you-label {
    color: var(--pac-green-dark);
    font-weight: 800;
  }

  .medal-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 15px;
  }

  .medal-stat {
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    background: var(--pac-card);
    box-shadow: var(--pac-shadow-soft);
    border-left: 3px solid;
  }

  .medal-stat.gold { border-left-color: gold; }
  .medal-stat.silver { border-left-color: silver; }
  .medal-stat.bronze { border-left-color: #cd7f32; }

  .medal-count {
    margin: 5px 0;
    font-size: 1.8rem;
    font-weight: bold;
  }

  .medal-gold,
  .medal-count.gold {
    color: #d69b00;
    font-size: 1.2em;
  }

  .medal-silver,
  .medal-count.silver {
    color: #8e9aa0;
    font-size: 1.2em;
  }

  .medal-bronze,
  .medal-count.bronze {
    color: #b46b2c;
    font-size: 1.2em;
  }

  .player-medals {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--pac-navy);
  }

  .medal-icon {
    font-size: 1.2rem;
  }

  .instruction-list {
    width: 100%;
    margin: 0;
    padding: 0 15px;
    list-style-type: none;
  }

  .instruction-item {
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 8px;

    display: flex;
    align-items: center;

    background: var(--pac-card);
    color: var(--pac-text);
    border-left: 4px solid var(--pac-green);
    box-shadow: 0 3px 8px rgba(5, 59, 92, 0.07);
  }

  .instruction-icon {
    min-width: 25px;
    margin-right: 10px;
    color: var(--pac-green-dark);
    font-size: 1.2rem;
    text-align: center;
  }

  .instruction-text {
    flex: 1;
    font-size: 0.9rem;
  }

  .important-note {
    margin: 15px 0 25px;
    padding: 10px;
    border-radius: 8px;

    background: var(--pac-danger-soft);
    color: var(--pac-text);
    border-left: 4px solid var(--pac-danger);

    text-align: center;
    font-size: 0.9rem;
  }

  #scoreList::-webkit-scrollbar,
  #achievements::-webkit-scrollbar,
  #howTo::-webkit-scrollbar {
    width: 8px;
  }

  #scoreList::-webkit-scrollbar-thumb,
  #achievements::-webkit-scrollbar-thumb,
  #howTo::-webkit-scrollbar-thumb {
    background: rgba(5, 59, 92, 0.24);
    border-radius: 999px;
  }



  /* PAC v180 · Estados Firebase y selector de participantes de Duelos */
  .duel-loading,
  .duel-empty,
  .duel-load-error {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 12px;
    padding: 15px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.48);
    color: var(--pac-muted);
    border: 1px dashed rgba(5, 59, 92, 0.22);
    text-align: center;
    font-size: 0.92rem;
    font-weight: 750;
    line-height: 1.35;
  }

  .duel-load-error {
    background: rgba(196, 59, 50, 0.08);
    color: var(--pac-danger);
    border-color: rgba(196, 59, 50, 0.24);
  }

  .duel-player-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 12500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background: rgba(2, 43, 69, 0.60);
    backdrop-filter: blur(3px);
  }

  .duel-player-picker-card {
    width: min(450px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 20px 16px 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.98);
    color: var(--pac-text);
    border: 1px solid var(--pac-border);
    box-shadow: 0 18px 42px rgba(2, 43, 69, 0.30);
  }

  .duel-player-picker-title {
    margin: 0 0 6px;
    color: var(--pac-navy);
    text-align: center;
    font-size: 1.32rem;
    font-weight: 950;
  }

  .duel-player-picker-help,
  .duel-player-picker-count,
  .duel-player-picker-message {
    color: var(--pac-muted);
    font-size: 0.86rem;
    line-height: 1.3;
    text-align: center;
  }

  .duel-player-picker-count {
    margin: 8px 0 10px;
    color: var(--pac-navy);
    font-weight: 900;
  }

  .duel-player-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 8px;
  }

  #duelPlayerSearchInput {
    flex: 1;
    min-width: 0;
    height: 44px;
    box-sizing: border-box;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--pac-border);
    background: #fff;
    color: var(--pac-navy);
    font-size: 1rem;
    font-weight: 750;
    outline: none;
  }

  #duelPlayerSearchBtn {
    width: auto;
    min-width: 88px;
    height: 44px;
    margin: 0;
    padding: 7px 13px;
    border-radius: 12px;
    font-size: 0.92rem;
  }

  .duel-player-picker-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
  }

  .duel-picker-player {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 11px;
    border-radius: 14px;
    background: rgba(5, 59, 92, 0.05);
    border: 1px solid rgba(5, 59, 92, 0.10);
  }

  .duel-picker-player-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pac-navy);
    font-weight: 900;
  }

  .duel-picker-toggle {
    width: auto;
    min-width: 96px;
    height: 38px;
    margin: 0;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 0.86rem;
  }

  .duel-picker-toggle.selected {
    background: linear-gradient(180deg, #9aa6aa 0%, #6f7f86 100%);
  }

  .duel-player-picker-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
  }

  .duel-player-picker-actions button {
    flex: 1;
    width: auto;
    min-width: 0;
    height: 46px;
    margin: 0;
    border-radius: 999px;
    font-size: 0.92rem;
  }

  .duel-participant-row strong.invited {
    color: var(--pac-gold-dark);
  }

  .duel-participant-row strong.declined {
    color: var(--pac-danger);
  }


  /* =========================
     Animaciones
     ========================= */

  @keyframes pointsFlash {
    0% {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
    100% {
      transform: translateY(-50px) scale(1.5);
      opacity: 0;
    }
  }

  .points-flash {
    position: absolute;
    z-index: 100;
    pointer-events: none;

    color: var(--pac-navy);
    text-shadow: 0 2px 6px rgba(5, 59, 92, 0.18);
    font-size: 1.8rem;
    font-weight: bold;

    animation: pointsFlash 1s forwards;
  }

  .level-up {
    position: fixed;
    top: 26%;
    left: 50%;
    z-index: 1000;

    padding: 10px 24px;
    border-radius: 999px;
    pointer-events: none;

    background: linear-gradient(180deg, #ffdf4d 0%, #f2b705 100%);
    color: var(--pac-navy);
    border: 2px solid rgba(255,255,255,0.70);
    box-shadow:
      0 10px 24px rgba(5, 59, 92, 0.24),
      0 0 18px rgba(244, 196, 48, 0.28);

    font-size: clamp(1.7rem, 7vw, 2.4rem);
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.5px;
    text-shadow: none;

    animation: levelUpToast 1.25s ease-out forwards;
  }

  @keyframes levelUpToast {
    0% {
      opacity: 0;
      transform: translate(-50%, -12px) scale(0.82);
    }
    18% {
      opacity: 1;
      transform: translate(-50%, 0) scale(1.06);
    }
    68% {
      opacity: 1;
      transform: translate(-50%, 0) scale(1);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -18px) scale(0.96);
    }
  }

  @keyframes homeTitleDrop {
    0% {
      opacity: 0;
      transform: translateY(-46px) scale(0.94);
    }
    65% {
      opacity: 1;
      transform: translateY(6px) scale(1.02);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cascade .scrabble-tile {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }

  /* =========================
     Responsive
     ========================= */

  @media screen and (max-height: 700px) {
    #register .auth-inner {
      gap: 18px;
    }

    #register .auth-logo {
      width: min(68vw, 245px);
      max-height: 28vh;
      margin-top: -1vh;
    }

    #register .auth-btn {
      min-height: 60px;
      border-radius: 17px;
      font-size: 18px;
    }

    #register .guest-btn {
      margin-top: 22px;
    }

    #register .auth-hint {
      margin-top: 9px;
      font-size: 15px;
    }
  }

  @media screen and (max-width: 430px) {
    #home .title.title-home-badge .scrabble-tile {
      width: 50px;
      height: 50px;
      font-size: 1.75rem;
    }

    #home .title-asset-wrap {
      width: min(360px, 94vw);
      margin-top: -8px;
    }
  }

  @media screen and (max-width: 400px) {
    #letters {
      grid-template-columns: repeat(8, 35px);
      gap: 5px;
    }

    .letter {
      width: 35px;
      height: 35px;
      font-size: 1.2rem;
    }

    #currentWord {
      font-size: 1.6rem;
    }

    button {
      width: 130px;
      height: 36px;
      margin: 8px;
      padding: 6px 12px;
      font-size: 0.9rem;
    }

    #home .home-buttons .tile-button {
      width: min(720px, 92vw);
    }

    #scores h2,
    #howTo h2,
    #achievements h2,
    #settings h2 {
      font-size: 1.6rem;
      padding: 8px 16px;
    }

    .medal-stats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
    }

    .medal-stat {
      min-width: 0;
      padding: 8px 6px;
      border-radius: 10px;
    }

    .medal-stat .medal-icon {
      font-size: 1rem;
    }

    .medal-count {
      margin: 4px 0 0;
      font-size: 1.5rem;
    }
  }

  @media screen and (max-width: 360px) {
    .medal-stats {
      gap: 5px;
    }

    .medal-stat {
      padding: 7px 4px;
    }

    .medal-count {
      font-size: 1.35rem;
    }
  }

  @media screen and (max-width: 380px) {
    #register .auth-actions {
      width: 100%;
    }

    #register .auth-btn {
      gap: 12px;
      padding: 0 16px;
      font-size: 17px;
    }

    #register .apple-mark,
    #register .google-mark,
    #register .guest-mark {
      width: 38px;
      height: 38px;
      flex-basis: 38px;
      font-size: 28px;
    }
  }