/* ===== BLOQUE CSS ORIGINAL 1 ===== */
* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

    html,
    body {
      width: 100%;
      min-height: 100%;
      font-family: "Segoe UI", Roboto, Arial, sans-serif;
      background: #071a14;
      color: white;
      overflow-x: hidden;
    }

    body {
      min-height: 100vh;
      min-height: 100dvh;
    }

    body.modal-open {
      overflow: hidden;
    }

    .game-container {
      position: relative;
      width: 100%;
      max-width: 480px;
      min-height: 100vh;
      min-height: 100dvh;
      margin: 0 auto;
      padding: 20px 18px 120px;

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

      overflow: hidden;

      background:
        radial-gradient(
          circle at 50% 20%,
          rgba(79, 140, 115, 0.35),
          transparent 30%
        ),
        radial-gradient(
          circle at 20% 80%,
          rgba(212, 175, 55, 0.08),
          transparent 25%
        ),
        radial-gradient(
          circle at 80% 70%,
          rgba(255, 255, 255, 0.05),
          transparent 20%
        ),
        linear-gradient(
          180deg,
          #173e35 0%,
          #0d2921 55%,
          #081812 100%
        );
    }

    .bg-glow {
      position: absolute;
      inset: 0;
      pointer-events: none;

      background:
        radial-gradient(
          circle at 25% 30%,
          rgba(255, 255, 255, 0.08),
          transparent 20%
        ),
        radial-gradient(
          circle at 70% 35%,
          rgba(212, 175, 55, 0.10),
          transparent 18%
        ),
        radial-gradient(
          circle at 50% 65%,
          rgba(76, 175, 120, 0.12),
          transparent 22%
        );

      filter: blur(18px);
    }

    .corner-ornament {
      position: absolute;
      width: 72px;
      height: 72px;
      opacity: 0.75;
      pointer-events: none;
      z-index: 2;
    }

    .corner-top-left {
      top: 10px;
      left: 10px;
    }

    .corner-top-right {
      top: 10px;
      right: 10px;
      transform: scaleX(-1);
    }

    .corner-bottom-left {
      bottom: 10px;
      left: 10px;
      transform: scaleY(-1);
    }

    .corner-bottom-right {
      right: 10px;
      bottom: 10px;
      transform: scale(-1, -1);
    }

    .top-logo {
      position: absolute;
      top: 28px;
      left: 50%;

      width: 48px;
      height: 48px;

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

      transform: translateX(-50%);

      border-radius: 50%;
      border: 1px solid rgba(231, 199, 92, 0.7);

      background: rgba(9, 30, 24, 0.55);

      box-shadow:
        0 0 15px rgba(231, 199, 92, 0.18);

      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);

      z-index: 4;
    }

    .glass-card {
      position: relative;
      z-index: 5;

      width: 100%;
      max-width: 360px;
      padding: 34px 18px 26px;

      text-align: center;

      border-radius: 28px;
      border: 1px solid rgba(255, 255, 255, 0.18);

      background: rgba(255, 255, 255, 0.07);

      box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);

      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .title {
      margin-bottom: 10px;

      font-size: clamp(2rem, 9vw, 3.1rem);
      font-weight: 800;
      letter-spacing: 1px;
      line-height: 1;

      text-transform: uppercase;
      white-space: nowrap;

      background:
        linear-gradient(
          180deg,
          #f6e6a1 0%,
          #d8b558 55%,
          #9b7330 100%
        );

      -webkit-background-clip: text;
      background-clip: text;

      -webkit-text-fill-color: transparent;

      filter:
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    }

    .subtitle {
      max-width: 240px;
      margin: 0 auto 28px;

      font-size: 0.95rem;
      line-height: 1.25;

      color: #edf4f0;

      text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.35);
    }

    .btn {
      width: 100%;
      max-width: 270px;
      min-height: 64px;
      margin: 0 auto 12px;
      padding: 12px 18px;

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

      border: none;
      border-radius: 16px;

      font-size: 1.05rem;
      font-weight: 800;
      letter-spacing: 1px;

      text-transform: uppercase;

      cursor: pointer;

      transition:
        transform 0.12s ease,
        filter 0.2s ease;
    }

    .btn:active {
      transform: scale(0.98);
    }

    .btn-offline {
      color: #241504;

      background:
        linear-gradient(
          180deg,
          #f1d06d 0%,
          #c89a2d 100%
        );

      border:
        1px solid rgba(255, 239, 173, 0.8);

      box-shadow:
        0 8px 18px rgba(200, 150, 40, 0.28);
    }

    .btn-online {
      padding: 8px 18px;

      flex-direction: column;
      gap: 1px;

      color: rgba(255, 255, 255, 0.55);

      background:
        rgba(255, 255, 255, 0.28);

      border:
        1px solid rgba(255, 255, 255, 0.18);

      cursor: not-allowed;
    }

    .btn-online:active {
      transform: none;
    }

    .online-main {
      display: block;

      font-size: 1.05rem;
      font-weight: 800;
      letter-spacing: 1px;
      line-height: 1.05;
    }

    .online-sub {
      display: block;

      font-size: 0.52rem;
      font-weight: 500;
      letter-spacing: 0.8px;
      line-height: 1;

      opacity: 0.85;
    }

    .btn-how {
      color: #e6c76a;

      background:
        linear-gradient(
          180deg,
          rgba(239, 211, 127, 0.28) 0%,
          rgba(190, 152, 60, 0.18) 100%
        );

      border:
        1px solid rgba(231, 199, 92, 0.45);

      box-shadow:
        0 0 18px rgba(231, 199, 92, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);

      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }

    .btn-how:hover,
    .btn-offline:hover {
      filter: brightness(1.05);
    }

    .cards-decor {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;

      height: 190px;

      pointer-events: none;
      z-index: 1;
    }

    .decor-symbols {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 24px;

      display: flex;
      justify-content: space-around;
      align-items: flex-end;

      padding: 0 18px;
    }

    .symbol {
      line-height: 1;
      opacity: 0.9;

      filter:
        drop-shadow(0 3px 5px rgba(0, 0, 0, 0.4));
    }

    .symbol-gold {
      color: #edd79c;
    }

    .symbol-light {
      color: #f6f4ef;
    }

    /* Fondo general de las ventanas */
    .modal {
      position: fixed;
      inset: 0;
      z-index: 50;

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

      padding: 14px;

      background:
        rgba(0, 0, 0, 0.74);

      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    .modal.show {
      display: flex;
    }

    .modal-card {
      width: 100%;
      max-width: 400px;
      max-height: 92vh;
      max-height: 92dvh;

      overflow-y: auto;
      overscroll-behavior: contain;

      border-radius: 25px;
      border:
        1px solid rgba(231, 199, 92, 0.42);

      color: #f2f4f3;

      background:
        radial-gradient(
          circle at 50% 0%,
          rgba(85, 142, 116, 0.24),
          transparent 30%
        ),
        linear-gradient(
          180deg,
          #163d33 0%,
          #0b2720 60%,
          #071b16 100%
        );

      box-shadow:
        0 16px 45px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);

      scrollbar-width: thin;
      scrollbar-color:
        rgba(231, 199, 92, 0.5)
        transparent;
    }

    .modal-card::-webkit-scrollbar {
      width: 5px;
    }

    .modal-card::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background:
        rgba(231, 199, 92, 0.5);
    }

    .rules-header {
      position: sticky;
      top: 0;
      z-index: 5;

      display: grid;
      grid-template-columns: 42px 1fr 42px;
      align-items: center;

      padding: 16px 14px 13px;

      border-bottom:
        1px solid rgba(231, 199, 92, 0.18);

      background:
        rgba(13, 44, 35, 0.96);

      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .rules-back {
      width: 40px;
      height: 40px;

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

      border-radius: 13px;
      border:
        1px solid rgba(231, 199, 92, 0.4);

      color: #f1d06d;
      background:
        rgba(231, 199, 92, 0.1);

      font-size: 1.45rem;
      font-weight: 700;

      cursor: pointer;
    }

    .rules-back:active {
      transform: scale(0.95);
    }

    .rules-heading {
      text-align: center;
    }

    .modal-title {
      font-size: 1.2rem;
      line-height: 1.1;
      color: #f1d06d;
    }

    .modal-subtitle {
      margin-top: 4px;

      font-size: 0.72rem;
      font-weight: 400;

      color: rgba(237, 243, 239, 0.7);
    }

    .rules-content {
      padding: 14px;
    }

    .topic-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .topic {
      overflow: hidden;

      border-radius: 17px;
      border:
        1px solid rgba(255, 255, 255, 0.11);

      background:
        linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.075),
          rgba(255, 255, 255, 0.025)
        );

      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .topic.open {
      border-color:
        rgba(231, 199, 92, 0.38);

      box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .topic-button {
      width: 100%;
      min-height: 62px;
      padding: 10px 12px;

      display: grid;
      grid-template-columns: 42px 1fr 25px;
      align-items: center;
      gap: 10px;

      border: none;

      color: #f3f5f4;
      background: transparent;

      font-family: inherit;
      text-align: left;

      cursor: pointer;
    }

    .topic-icon {
      width: 41px;
      height: 41px;

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

      border-radius: 13px;
      border:
        1px solid rgba(231, 199, 92, 0.28);

      background:
        rgba(231, 199, 92, 0.09);

      font-size: 1.25rem;
    }

    .topic-name {
      font-size: 0.94rem;
      font-weight: 700;
    }

    .topic-arrow {
      color: #e6c76a;
      font-size: 1.15rem;
      text-align: center;

      transition:
        transform 0.2s ease;
    }

    .topic.open .topic-arrow {
      transform: rotate(180deg);
    }

    .topic-body {
      display: none;
      padding: 0 13px 14px;

      color: #e8efeb;
      font-size: 0.86rem;
      line-height: 1.42;
    }

    .topic.open .topic-body {
      display: block;

      animation:
        topicAppear 0.2s ease;
    }

    @keyframes topicAppear {
      from {
        opacity: 0;
        transform: translateY(-4px);
      }

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

    .short-rule {
      display: flex;
      align-items: flex-start;
      gap: 9px;

      margin-top: 8px;
      padding: 10px;

      border-radius: 12px;

      background:
        rgba(0, 0, 0, 0.16);
    }

    .short-rule:first-child {
      margin-top: 0;
    }

    .short-rule-emoji {
      flex: 0 0 auto;
      font-size: 1rem;
    }

    .short-rule strong {
      color: #f0d37b;
    }

    .suits-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 9px;
    }

    .suit-card {
      min-height: 93px;
      padding: 9px;

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

      border-radius: 14px;
      border:
        1px solid rgba(255, 255, 255, 0.12);

      background:
        rgba(255, 255, 255, 0.045);
    }

    .suit-symbol {
      font-family: Georgia, serif;
      font-size: 2.5rem;
      line-height: 1;
    }

    .suit-name {
      margin-top: 5px;

      font-size: 0.79rem;
      font-weight: 700;
    }

    .suit-color {
      margin-top: 2px;

      color: rgba(237, 243, 239, 0.58);

      font-size: 0.61rem;
      font-weight: 600;
      letter-spacing: 0.7px;

      text-transform: uppercase;
    }

    .suit-red {
      color: #ef7777;
    }

    .suit-black {
      color: #f2e7c0;
    }

    .optional-intro {
      margin-bottom: 10px;
    }

    .optional-rules {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .optional-tag {
      padding: 7px 9px;

      border-radius: 30px;
      border:
        1px solid rgba(231, 199, 92, 0.3);

      color: #eed27b;
      background:
        rgba(231, 199, 92, 0.09);

      font-size: 0.72rem;
      font-weight: 700;
    }

    .optional-note {
      margin-top: 10px;

      color: rgba(237, 243, 239, 0.72);

      font-size: 0.76rem;
    }

    .btn-close {
      width: 100%;
      min-height: 48px;
      margin-top: 14px;
      padding: 12px;

      border: none;
      border-radius: 14px;

      font-size: 0.88rem;
      font-weight: 800;
      letter-spacing: 0.7px;

      color: #241504;

      background:
        linear-gradient(
          180deg,
          #f1d06d 0%,
          #c89a2d 100%
        );

      cursor: pointer;
    }

    .btn-close:active {
      transform: scale(0.98);
    }

    /* =======================================
       CONFIGURACIÓN DE PARTIDA OFFLINE
    ======================================= */

    .offline-card {
      max-width: 370px;
      max-height: 92vh;
      max-height: 92dvh;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .offline-content {
      padding: 18px 16px 16px;
    }

    .player-preview {
      display: flex;
      align-items: center;
      gap: 12px;

      padding: 13px;

      border-radius: 17px;
      border:
        1px solid rgba(255, 255, 255, 0.11);

      background:
        rgba(255, 255, 255, 0.055);
    }

    .player-avatar {
      width: 48px;
      height: 48px;
      flex: 0 0 48px;

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

      border-radius: 50%;
      border:
        1px solid rgba(231, 199, 92, 0.4);

      background:
        rgba(231, 199, 92, 0.11);

      font-size: 1.35rem;
    }

    .player-info {
      text-align: left;
    }

    .player-label {
      font-size: 0.72rem;
      color: rgba(237, 243, 239, 0.65);
    }

    .player-name {
      margin-top: 2px;
      font-size: 0.98rem;
      font-weight: 800;
      color: #f3f5f4;
    }

    .config-section {
      margin-top: 17px;
    }

    .config-title {
      margin-bottom: 9px;

      font-size: 0.82rem;
      font-weight: 800;
      letter-spacing: 0.6px;

      color: #edd27e;
      text-transform: uppercase;
    }

    .bot-options {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .bot-option {
      min-height: 76px;
      padding: 9px 5px;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 3px;

      border-radius: 15px;
      border:
        1px solid rgba(255, 255, 255, 0.12);

      color: rgba(243, 245, 244, 0.75);
      background:
        rgba(255, 255, 255, 0.045);

      font-family: inherit;
      cursor: pointer;

      transition:
        transform 0.12s ease,
        border-color 0.18s ease,
        background 0.18s ease;
    }

    .bot-option:active {
      transform: scale(0.97);
    }

    .bot-option.selected {
      color: #f4d77f;

      border-color:
        rgba(231, 199, 92, 0.72);

      background:
        linear-gradient(
          180deg,
          rgba(231, 199, 92, 0.22),
          rgba(231, 199, 92, 0.09)
        );

      box-shadow:
        0 0 18px rgba(231, 199, 92, 0.12);
    }

    .bot-emoji {
      font-size: 1.45rem;
      line-height: 1;
    }

    .bot-number {
      font-size: 0.85rem;
      font-weight: 800;
    }

    .bot-word {
      font-size: 0.65rem;
      opacity: 0.8;
    }

    /* =======================================
       MENÚ OFFLINE · VERSIÓN COMPACTA
    ======================================= */

    .offline-content
    .config-section {
      margin-top: 13px;
    }

    .offline-content
    .config-title {
      margin-bottom: 7px;
      font-size: 0.76rem;
    }

    .offline-content
    .bot-skill-options,
    .offline-content
    .game-mode-options {
      gap: 6px;
    }

    .offline-content
    .bot-skill-option {
      min-height: 42px;
      padding: 6px 5px;
      flex-direction: row;
      gap: 5px;
    }

    .offline-content
    .bot-skill-option strong {
      font-size: 0.62rem;
    }

    .offline-content
    .bot-skill-option small {
      display: none;
    }

    .offline-content
    .game-mode-option {
      min-height: 42px;
      padding: 6px 7px;
      gap: 5px;
    }

    .offline-content
    .game-mode-icon {
      font-size: 0.9rem;
    }

    .offline-content
    .game-mode-option strong {
      font-size: 0.59rem;
    }

    .offline-content
    .bot-skill-hint,
    .offline-content
    .game-mode-hint {
      display: none;
    }

    .special-rules-collapsible {
      margin-top: 13px;
    }

    .special-rules-toggle {
      width: 100%;
      min-height: 46px;
      padding: 10px 12px;

      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;

      border-radius: 14px;
      border:
        1px solid rgba(231, 199, 92, 0.28);

      color: #f0d06e;
      background:
        rgba(255, 255, 255, 0.04);

      font-family: inherit;
      cursor: pointer;
    }

    .special-rules-toggle-main {
      display: flex;
      align-items: center;
      gap: 8px;

      font-size: 0.76rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.45px;
    }

    .special-rules-toggle-status {
      font-size: 0.62rem;
      color:
        rgba(237, 243, 239, 0.6);
      white-space: nowrap;
    }

    .special-rules-toggle-arrow {
      font-size: 0.9rem;
      color: #e9c95f;
      transition: transform 0.18s ease;
    }

    .special-rules-collapsible.open
    .special-rules-toggle-arrow {
      transform: rotate(180deg);
    }

    .special-rules-panel {
      display: none;
      margin-top: 8px;
    }

    .special-rules-collapsible.open
    .special-rules-panel {
      display: block;
    }

    .offline-content
    .special-rule-options {
      gap: 7px;
    }

    .offline-content
    .special-rule-option {
      min-height: 48px;
      padding: 8px 9px;
    }

    .offline-content
    .special-rule-option strong {
      font-size: 0.67rem;
    }

    .offline-content
    .special-rule-option small {
      font-size: 0.49rem;
    }

    .offline-content
    .special-rule-hint {
      display: none;
    }

    .offline-content
    .match-summary {
      margin-top: 13px;
      padding: 10px 11px;
    }

    .offline-content
    .summary-label {
      font-size: 0.58rem;
    }

    .offline-content
    .summary-text {
      margin-top: 3px;
      font-size: 0.78rem;
    }

    .offline-content
    .special-rules-summary {
      display: none;
    }

    .offline-content
    .start-match {
      min-height: 50px;
      margin-top: 13px;
    }


    /* =======================================
       HABILIDAD DE BOTS
    ======================================= */

    .bot-skill-options {
      display: grid;
      grid-template-columns:
        repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .bot-skill-option {
      min-height: 50px;
      padding: 8px 7px;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;

      border-radius: 13px;
      border:
        1px solid rgba(255, 255, 255, 0.12);

      color:
        rgba(243, 245, 244, 0.72);

      background:
        rgba(255, 255, 255, 0.045);

      font-family: inherit;
      cursor: pointer;

      transition:
        transform 0.12s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
    }

    .bot-skill-option:active {
      transform: scale(0.975);
    }

    .bot-skill-option.selected {
      color: #fff2bd;

      border-color:
        rgba(241, 208, 109, 0.76);

      background:
        linear-gradient(
          180deg,
          rgba(241, 208, 109, 0.21),
          rgba(241, 208, 109, 0.075)
        );

      box-shadow:
        0 0 14px
        rgba(241, 208, 109, 0.09);
    }

    .bot-skill-option strong {
      font-size: 0.68rem;
      line-height: 1;
    }

    .bot-skill-option small {
      font-size: 0.49rem;
      line-height: 1.15;
      color: rgba(237, 243, 239, 0.55);
    }

    .bot-skill-hint {
      margin-top: 7px;
      min-height: 16px;

      color:
        rgba(237, 243, 239, 0.55);

      font-size: 0.56rem;
      line-height: 1.3;
      text-align: center;
    }


    /* =======================================
       SELECTOR DE MODO DE JUEGO
    ======================================= */

    .game-mode-options {
      display: grid;
      grid-template-columns:
        repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .game-mode-option {
      min-height: 48px;
      padding: 8px 10px;

      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 7px;

      border-radius: 13px;
      border:
        1px solid
        rgba(255, 255, 255, 0.12);

      color:
        rgba(243, 245, 244, 0.72);

      background:
        rgba(255, 255, 255, 0.045);

      font-family: inherit;
      text-align: center;
      cursor: pointer;

      transition:
        transform 0.12s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
    }

    .game-mode-option:active {
      transform: scale(0.975);
    }

    .game-mode-option.selected {
      color: #fff2bd;

      border-color:
        rgba(241, 208, 109, 0.76);

      background:
        linear-gradient(
          180deg,
          rgba(241, 208, 109, 0.21),
          rgba(241, 208, 109, 0.075)
        );

      box-shadow:
        0 0 14px
        rgba(241, 208, 109, 0.09);
    }

    .game-mode-option.intermediate.selected {
      border-color:
        rgba(101, 215, 169, 0.78);

      background:
        linear-gradient(
          180deg,
          rgba(101, 215, 169, 0.18),
          rgba(101, 215, 169, 0.055)
        );

      box-shadow:
        0 0 14px
        rgba(101, 215, 169, 0.09);
    }

    .game-mode-option.traditional.selected {
      border-color: rgba(220, 93, 93, 0.82);
      color: #ffd5d5;
      background: rgba(177, 48, 48, 0.15);
    }

    .game-mode-icon {
      font-size: 1.02rem;
      line-height: 1;
    }

    .game-mode-option strong {
      display: block;

      font-size: 0.66rem;
      line-height: 1.1;
      white-space: nowrap;
    }

    .game-mode-hint {
      margin-top: 7px;

      min-height: 16px;

      color:
        rgba(237, 243, 239, 0.55);

      font-size: 0.56rem;
      line-height: 1.3;
      text-align: center;
    }

    .match-summary {
      margin-top: 15px;
      padding: 12px 13px;

      border-radius: 15px;
      border:
        1px solid rgba(231, 199, 92, 0.22);

      background:
        rgba(0, 0, 0, 0.17);

      text-align: center;
    }

    .summary-label {
      font-size: 0.68rem;
      color: rgba(237, 243, 239, 0.62);
      text-transform: uppercase;
      letter-spacing: 0.7px;
    }

    .summary-text {
      margin-top: 4px;

      font-size: 0.9rem;
      font-weight: 700;
      color: #f3f5f4;
    }

    .summary-text strong {
      color: #f0d06e;
    }

    .start-match {
      width: 100%;
      min-height: 54px;
      margin-top: 15px;
      padding: 12px;

      border: none;
      border-radius: 15px;

      color: #241504;

      background:
        linear-gradient(
          180deg,
          #f1d06d 0%,
          #c89a2d 100%
        );

      font-family: inherit;
      font-size: 0.92rem;
      font-weight: 900;
      letter-spacing: 0.8px;
      text-transform: uppercase;

      box-shadow:
        0 8px 18px rgba(200, 150, 40, 0.22);

      cursor: pointer;
    }

    .start-match:active {
      transform: scale(0.98);
    }

    .config-note {
      margin-top: 10px;

      text-align: center;
      font-size: 0.69rem;
      line-height: 1.35;

      color: rgba(237, 243, 239, 0.58);
    }


    /* =======================================
       REGLAS BLOQUEADAS EN CONFIGURACIÓN
    ======================================= */

    .locked-rules {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    .locked-rule {
      min-height: 43px;
      padding: 8px 9px;

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

      border-radius: 13px;
      border:
        1px solid rgba(255, 255, 255, 0.10);

      color: rgba(237, 243, 239, 0.43);
      background:
        rgba(255, 255, 255, 0.035);

      font-family: inherit;
      font-size: 0.7rem;
      font-weight: 700;

      cursor: not-allowed;
    }

    .locked-rule:last-child {
      grid-column: 1 / -1;
    }

    .locked-hint {
      margin-top: 8px;

      text-align: center;
      color: rgba(237, 243, 239, 0.5);
      font-size: 0.65rem;
      line-height: 1.35;
    }

    /* =======================================
       PRIMER PILOTO DE LA MESA
    ======================================= */

    .game-screen {
      position: fixed;
      inset: 0;
      z-index: 100;

      display: none;

      overflow-y: auto;
      overscroll-behavior: contain;

      background: #071a14;
    }

    .game-screen.active {
      display: block;
    }

    body.game-open {
      overflow: hidden;
    }

    .pilot-table {
      position: relative;

      width: 100%;
      max-width: 480px;
      min-height: 100vh;
      min-height: 100dvh;
      margin: 0 auto;
      padding:
        max(14px, env(safe-area-inset-top))
        12px
        max(18px, env(safe-area-inset-bottom));

      display: flex;
      flex-direction: column;
      gap: 12px;

      overflow: hidden;

      background:
        radial-gradient(
          circle at 50% 42%,
          rgba(82, 148, 116, 0.27),
          transparent 34%
        ),
        radial-gradient(
          circle at 16% 80%,
          rgba(212, 175, 55, 0.08),
          transparent 24%
        ),
        linear-gradient(
          180deg,
          #17463a 0%,
          #0c3027 48%,
          #061b16 100%
        );
    }

    .pilot-table::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;

      background:
        repeating-linear-gradient(
          0deg,
          rgba(255, 255, 255, 0.012) 0,
          rgba(255, 255, 255, 0.012) 1px,
          transparent 1px,
          transparent 5px
        );
    }

    .pilot-header,
    .bots-area,
    .table-center,
    .human-zone,
    .pilot-actions {
      position: relative;
      z-index: 2;
    }

    .pilot-header {
      display: grid;
      grid-template-columns: 42px 1fr 42px;
      align-items: center;
      gap: 8px;
    }

    .pilot-back {
      width: 40px;
      height: 40px;

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

      border-radius: 13px;
      border:
        1px solid rgba(231, 199, 92, 0.42);

      color: #f1d06d;
      background:
        rgba(231, 199, 92, 0.10);

      font-size: 1.25rem;
      font-weight: 800;

      cursor: pointer;
    }

    .pilot-heading {
      text-align: center;
    }

    .pilot-title {
      color: #f1d06d;
      font-size: 1.05rem;
      line-height: 1.1;
      letter-spacing: 0.6px;
    }

    .pilot-subtitle {
      margin-top: 3px;

      color: rgba(237, 243, 239, 0.68);
      font-size: 0.66rem;
    }

    .bots-area {
      display: grid;
      gap: 8px;
      align-items: stretch;
    }

    .bots-area.count-1 {
      grid-template-columns: minmax(0, 180px);
      justify-content: center;
    }

    .bots-area.count-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bots-area.count-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bot-seat {
      min-width: 0;
      padding: 8px 5px 7px;

      text-align: center;

      border-radius: 14px;
      border:
        1px solid rgba(255, 255, 255, 0.10);

      background:
        rgba(255, 255, 255, 0.045);
    }

    .bot-seat-title {
      color: #f0d37b;
      font-size: 0.7rem;
      font-weight: 800;
    }

    .bot-seat-count {
      margin-top: 2px;

      color: rgba(237, 243, 239, 0.58);
      font-size: 0.56rem;
    }

    .bot-hand {
      min-height: 35px;
      margin-top: 6px;

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

      overflow: hidden;
    }

    .bot-card-back {
      position: relative;

      width: 19px;
      height: 29px;
      flex: 0 0 19px;

      border-radius: 4px;
      border: 1px solid rgba(246, 230, 161, 0.72);

      background:
        repeating-linear-gradient(
          45deg,
          rgba(246, 230, 161, 0.16) 0,
          rgba(246, 230, 161, 0.16) 2px,
          transparent 2px,
          transparent 5px
        ),
        #174c3d;

      box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.28);
    }

    .bot-card-back + .bot-card-back {
      margin-left: -9px;
    }

    .table-center {
      flex: 1;

      min-height: 178px;
      padding: 13px;

      display: flex;
      flex-direction: column;
      justify-content: center;

      border-radius: 28px;
      border:
        1px solid rgba(231, 199, 92, 0.20);

      background:
        radial-gradient(
          circle at 50% 45%,
          rgba(255, 255, 255, 0.055),
          transparent 42%
        ),
        rgba(0, 0, 0, 0.11);

      box-shadow:
        inset 0 0 32px rgba(0, 0, 0, 0.13);
    }

    .turn-message {
      margin-bottom: 10px;

      text-align: center;
      color: #f0d37b;
      font-size: 0.73rem;
      font-weight: 800;
      letter-spacing: 0.4px;
    }

    .piles {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 25px;
    }

    .pile {
      width: 74px;

      text-align: center;
    }

    .pile-card {
      position: relative;

      width: 56px;
      height: 78px;
      margin: 0 auto;

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

      border-radius: 8px;
      border:
        1px solid rgba(246, 230, 161, 0.72);

      box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.28);
    }

    .deck-card {
      background:
        repeating-linear-gradient(
          45deg,
          rgba(246, 230, 161, 0.16) 0,
          rgba(246, 230, 161, 0.16) 3px,
          transparent 3px,
          transparent 7px
        ),
        #174c3d;
    }

    .deck-card::before,
    .deck-card::after {
      content: "";
      position: absolute;

      width: 56px;
      height: 78px;

      border-radius: 8px;
      border:
        1px solid rgba(246, 230, 161, 0.28);

      background: #123c31;
      z-index: -1;
    }

    .deck-card::before {
      transform: translate(-4px, 3px);
    }

    .deck-card::after {
      transform: translate(-7px, 6px);
    }

    .deck-emblem {
      width: 27px;
      height: 27px;

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

      border-radius: 50%;
      border:
        1px solid rgba(246, 230, 161, 0.75);

      color: #f0d37b;
      font-size: 0.82rem;
    }

    .discard-empty {
      border-style: dashed;
      border-color:
        rgba(237, 243, 239, 0.28);

      color: rgba(237, 243, 239, 0.42);
      background:
        rgba(255, 255, 255, 0.025);

      font-size: 0.58rem;
      line-height: 1.2;
      text-align: center;
    }

    .pile-label {
      margin-top: 7px;

      color: rgba(237, 243, 239, 0.72);
      font-size: 0.64rem;
      font-weight: 700;
    }

    .pile-count {
      margin-top: 2px;

      color: rgba(237, 243, 239, 0.48);
      font-size: 0.56rem;
    }

    .pilot-status {
      margin-top: 11px;

      text-align: center;
      color: rgba(237, 243, 239, 0.62);
      font-size: 0.62rem;
    }

    .human-zone {
      padding: 10px 8px 9px;

      border-radius: 20px;
      border:
        1px solid rgba(231, 199, 92, 0.22);

      background:
        linear-gradient(
          180deg,
          rgba(231, 199, 92, 0.075),
          rgba(255, 255, 255, 0.025)
        );
    }

    .human-title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      padding: 0 5px 7px;
    }

    .human-name {
      color: #f1d06d;
      font-size: 0.74rem;
      font-weight: 800;
    }

    .human-count {
      color: rgba(237, 243, 239, 0.58);
      font-size: 0.6rem;
    }

    .human-hand {
      position: relative;

      min-height: 82px;

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

      padding: 5px 0 3px;
    }

    .playing-card {
      position: relative;
      z-index: var(--card-layer, 2);

      width: 48px;
      height: 70px;
      flex: 0 0 48px;

      border-radius: 7px;
      border:
        1px solid rgba(0, 0, 0, 0.18);

      color: #182019;
      background:
        linear-gradient(
          145deg,
          #fffdf5,
          #e9e4d6
        );

      box-shadow:
        0 4px 9px rgba(0, 0, 0, 0.30);

      cursor: grab;
      touch-action: none;

      transition:
        transform 0.12s ease,
        box-shadow 0.12s ease;
    }

    .playing-card.dragging {
      z-index: 40;

      cursor: grabbing;

      box-shadow:
        0 14px 24px rgba(0, 0, 0, 0.48),
        0 0 0 2px rgba(241, 208, 109, 0.78);

      transition: none;
    }

    .drop-marker {
      position: absolute;
      bottom: 2px;
      z-index: 35;

      width: 3px;
      height: 76px;

      border-radius: 3px;

      background: #f1d06d;

      box-shadow:
        0 0 10px rgba(241, 208, 109, 0.85);

      pointer-events: none;
    }

    .hand-hint {
      margin-top: 5px;

      text-align: center;
      color: rgba(237, 243, 239, 0.58);
      font-size: 0.58rem;
      line-height: 1.3;
    }

    .playing-card + .playing-card {
      margin-left: -15px;
    }

    .playing-card.red {
      color: #c53e3e;
    }

    .card-corner {
      position: absolute;
      top: 4px;
      left: 5px;

      display: flex;
      flex-direction: column;

      font-family: Georgia, serif;
      font-size: 0.68rem;
      font-weight: 800;
      line-height: 0.9;
      text-align: center;
    }

    .card-corner.bottom {
      top: auto;
      left: auto;
      right: 5px;
      bottom: 4px;

      transform: rotate(180deg);
    }

    .card-center-symbol {
      position: absolute;
      inset: 0;

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

      font-family: Georgia, serif;
      font-size: 1.65rem;
    }

    .pilot-actions {
      display: grid;
      grid-template-columns: 1fr 1.25fr;
      gap: 8px;
    }

    .pilot-action {
      min-height: 45px;
      padding: 9px;

      border-radius: 13px;
      border:
        1px solid rgba(231, 199, 92, 0.30);

      color: #efd47f;
      background:
        rgba(231, 199, 92, 0.08);

      font-family: inherit;
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.4px;

      cursor: pointer;
    }

    .pilot-action.primary {
      color: #241504;
      border-color:
        rgba(255, 239, 173, 0.8);

      background:
        linear-gradient(
          180deg,
          #f1d06d 0%,
          #c89a2d 100%
        );
    }

    .pilot-action:active,
    .pilot-back:active {
      transform: scale(0.97);
    }


    /* =======================================
       PILOTO JUGABLE: TURNOS BÁSICOS
    ======================================= */

    .game-screen {
      position: fixed;
      inset: 0;
      z-index: 100;

      display: none;
      overflow-y: auto;
      overscroll-behavior: contain;

      background: #071a14;
    }

    .game-screen.active {
      display: block;
    }

    body.game-open {
      overflow: hidden;
    }

    .pilot-table {
      position: relative;

      width: 100%;
      max-width: 480px;
      min-height: 100vh;
      min-height: 100dvh;
      margin: 0 auto;
      padding:
        max(14px, env(safe-area-inset-top))
        12px
        max(18px, env(safe-area-inset-bottom));

      display: flex;
      flex-direction: column;
      gap: 11px;

      overflow: hidden;

      background:
        radial-gradient(
          circle at 50% 42%,
          rgba(82, 148, 116, 0.27),
          transparent 34%
        ),
        radial-gradient(
          circle at 16% 80%,
          rgba(212, 175, 55, 0.08),
          transparent 24%
        ),
        linear-gradient(
          180deg,
          #17463a 0%,
          #0c3027 48%,
          #061b16 100%
        );
    }

    .pilot-table::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;

      background:
        repeating-linear-gradient(
          0deg,
          rgba(255, 255, 255, 0.012) 0,
          rgba(255, 255, 255, 0.012) 1px,
          transparent 1px,
          transparent 5px
        );
    }

    .pilot-header,
    .bots-area,
    .table-center,
    .human-zone,
    .pilot-actions {
      position: relative;
      z-index: 2;
    }

    .pilot-header {
      display: grid;
      grid-template-columns: 42px 1fr 42px;
      align-items: center;
      gap: 8px;
    }

    .pilot-back {
      width: 40px;
      height: 40px;

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

      border-radius: 13px;
      border: 1px solid rgba(231, 199, 92, 0.42);

      color: #f1d06d;
      background: rgba(231, 199, 92, 0.10);

      font-size: 1.25rem;
      font-weight: 800;
      cursor: pointer;
    }

    .pilot-heading {
      text-align: center;
    }

    .pilot-title {
      color: #f1d06d;
      font-size: 1.05rem;
      line-height: 1.1;
      letter-spacing: 0.6px;
    }

    .pilot-subtitle {
      margin-top: 3px;
      color: rgba(237, 243, 239, 0.68);
      font-size: 0.66rem;
    }

    .bots-area {
      display: grid;
      gap: 8px;
      align-items: stretch;
    }

    .bots-area.count-1 {
      grid-template-columns: minmax(0, 190px);
      justify-content: center;
    }

    .bots-area.count-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bots-area.count-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bot-seat {
      min-width: 0;
      padding: 8px 5px 7px;

      text-align: center;

      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.10);
      background: rgba(255, 255, 255, 0.045);

      transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    }

    .bot-seat.active-turn {
      border-color: rgba(241, 208, 109, 0.78);
      box-shadow: 0 0 14px rgba(241, 208, 109, 0.18);
    }

    .bot-seat-title {
      color: #f0d37b;
      font-size: 0.7rem;
      font-weight: 800;
    }

    .bot-seat-count {
      margin-top: 2px;
      color: rgba(237, 243, 239, 0.58);
      font-size: 0.56rem;
    }

    .bot-hand {
      min-height: 34px;
      margin-top: 6px;

      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .bot-card-back {
      width: 19px;
      height: 29px;
      flex: 0 0 19px;

      border-radius: 4px;
      border: 1px solid rgba(246, 230, 161, 0.72);

      background:
        repeating-linear-gradient(
          45deg,
          rgba(246, 230, 161, 0.16) 0,
          rgba(246, 230, 161, 0.16) 2px,
          transparent 2px,
          transparent 5px
        ),
        #174c3d;

      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
    }

    .bot-card-back + .bot-card-back {
      margin-left: -9px;
    }

    .bot-melds {
      min-height: 54px;
      margin-top: 6px;

      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: center;
      gap: 4px;

      overflow: visible;
    }

    .melds-scroll::-webkit-scrollbar {
      display: none;
    }

    .mini-meld {
      max-width: 100%;
      padding: 3px 4px;

      display: flex;
      flex: 0 0 auto;
      justify-content: center;

      border-radius: 7px;
      border: 1px solid rgba(231, 199, 92, 0.30);
      background: rgba(0, 0, 0, 0.18);
    }

    .mini-card {
      width: 17px;
      height: 24px;
      flex: 0 0 17px;

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

      border-radius: 3px;
      color: #182019;
      background: #f4f0e5;

      font-family: Georgia, serif;
      font-size: 0.49rem;
      font-weight: 800;
    }

    .mini-card.red {
      color: #c53e3e;
    }

    .mini-card + .mini-card {
      margin-left: -6px;
    }

    .table-center {
      flex: 1;
      min-height: 180px;
      padding: 13px;

      display: flex;
      flex-direction: column;
      justify-content: center;

      border-radius: 28px;
      border: 1px solid rgba(231, 199, 92, 0.20);

      background:
        radial-gradient(
          circle at 50% 45%,
          rgba(255, 255, 255, 0.055),
          transparent 42%
        ),
        rgba(0, 0, 0, 0.11);

      box-shadow: inset 0 0 32px rgba(0, 0, 0, 0.13);
    }

    .turn-message {
      min-height: 20px;
      margin-bottom: 10px;

      text-align: center;
      color: #f0d37b;
      font-size: 0.74rem;
      font-weight: 800;
      letter-spacing: 0.35px;
    }

    .piles {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 25px;
    }

    .pile {
      width: 78px;
      text-align: center;
    }

    .pile-card {
      position: relative;

      width: 56px;
      height: 78px;
      margin: 0 auto;
      padding: 0;

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

      border-radius: 8px;
      border: 1px solid rgba(246, 230, 161, 0.72);

      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.28);
    }

    button.pile-card {
      font-family: inherit;
      cursor: pointer;
      touch-action: manipulation;
    }

    button.pile-card:disabled {
      cursor: not-allowed;
      opacity: 0.55;
    }

    .deck-card {
      background:
        repeating-linear-gradient(
          45deg,
          rgba(246, 230, 161, 0.16) 0,
          rgba(246, 230, 161, 0.16) 3px,
          transparent 3px,
          transparent 7px
        ),
        #174c3d;
    }

    .deck-card.can-draw {
      animation: deckPulse 1.1s ease-in-out infinite;
    }

    .deck-card.empty-deck {
      border-style: dashed;
      border-color: rgba(237, 243, 239, 0.28);
      color: rgba(237, 243, 239, 0.48);
      background: rgba(255, 255, 255, 0.025);
      animation: none;
    }

    .deck-card.empty-deck::before,
    .deck-card.empty-deck::after {
      display: none;
    }

    @keyframes deckPulse {
      0%, 100% {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.28);
      }
      50% {
        box-shadow:
          0 6px 12px rgba(0, 0, 0, 0.28),
          0 0 0 4px rgba(241, 208, 109, 0.14),
          0 0 18px rgba(241, 208, 109, 0.28);
      }
    }

    .deck-card::before,
    .deck-card::after {
      content: "";
      position: absolute;
      width: 56px;
      height: 78px;

      border-radius: 8px;
      border: 1px solid rgba(246, 230, 161, 0.28);
      background: #123c31;
      z-index: -1;
    }

    .deck-card::before {
      transform: translate(-4px, 3px);
    }

    .deck-card::after {
      transform: translate(-7px, 6px);
    }

    .deck-emblem {
      width: 27px;
      height: 27px;

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

      border-radius: 50%;
      border: 1px solid rgba(246, 230, 161, 0.75);

      color: #f0d37b;
      font-size: 0.82rem;
    }

    .discard-empty {
      border-style: dashed;
      border-color: rgba(237, 243, 239, 0.28);

      color: rgba(237, 243, 239, 0.42);
      background: rgba(255, 255, 255, 0.025);

      font-size: 0.58rem;
      line-height: 1.2;
      text-align: center;
    }

    .discard-face {
      position: relative;
      color: #182019;
      background: linear-gradient(145deg, #fffdf5, #e9e4d6);
    }

    .discard-face.red {
      color: #c53e3e;
    }

    .discard-face .discard-value {
      position: absolute;
      top: 5px;
      left: 6px;

      display: flex;
      flex-direction: column;
      line-height: 0.88;

      font-family: Georgia, serif;
      font-size: 0.78rem;
      font-weight: 800;
    }

    .discard-face .discard-symbol {
      font-family: Georgia, serif;
      font-size: 1.8rem;
    }

    .pile-label {
      margin-top: 7px;
      color: rgba(237, 243, 239, 0.72);
      font-size: 0.64rem;
      font-weight: 700;
    }

    .pile-count {
      margin-top: 2px;
      color: rgba(237, 243, 239, 0.48);
      font-size: 0.56rem;
    }

    .discard-choice {
      display: none;
      margin-top: 12px;
      padding: 11px;

      border-radius: 15px;
      border: 1px solid rgba(241, 208, 109, 0.34);
      background: rgba(241, 208, 109, 0.08);
    }

    .discard-choice.show {
      display: block;
      animation: topicAppear 0.18s ease;
    }

    .discard-choice-text {
      margin-bottom: 9px;

      text-align: center;
      color: #f0d37b;
      font-size: 0.72rem;
      font-weight: 800;
      line-height: 1.35;
    }

    .discard-choice-actions {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 8px;
    }

    .discard-choice-button {
      min-height: 42px;
      padding: 8px;

      border-radius: 12px;
      border: 1px solid rgba(241, 208, 109, 0.34);

      color: #f0d37b;
      background: rgba(0, 0, 0, 0.14);

      font-family: inherit;
      font-size: 0.68rem;
      font-weight: 900;
      letter-spacing: 0.3px;

      cursor: pointer;
    }

    .discard-choice-button.primary {
      color: #241504;
      border-color: rgba(255, 239, 173, 0.82);
      background: linear-gradient(180deg, #f1d06d 0%, #c89a2d 100%);
    }

    .discard-choice-button:active {
      transform: scale(0.97);
    }

    .new-card-choice {
      display: none;
      margin-top: 12px;
      padding: 11px;

      border-radius: 15px;
      border: 1px solid rgba(241, 208, 109, 0.34);
      background: rgba(241, 208, 109, 0.08);
    }

    .new-card-choice.show {
      display: block;
      animation: topicAppear 0.18s ease;
    }

    .new-card-choice[hidden] {
      display: none !important;
    }

    .new-card-choice-text {
      margin-bottom: 9px;
      text-align: center;
      color: #f0d37b;
      font-size: 0.72rem;
      font-weight: 800;
      line-height: 1.35;
    }

    .new-card-choice-actions {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 8px;
    }

    .new-card-choice-button {
      min-height: 42px;
      padding: 8px;
      border-radius: 12px;
      border: 1px solid rgba(241, 208, 109, 0.34);
      color: #f0d37b;
      background: rgba(0, 0, 0, 0.14);
      font-family: inherit;
      font-size: 0.68rem;
      font-weight: 900;
      letter-spacing: 0.3px;
      cursor: pointer;
    }

    .new-card-choice-button.primary {
      color: #241504;
      border-color: rgba(255, 239, 173, 0.82);
      background: linear-gradient(180deg, #f1d06d 0%, #c89a2d 100%);
    }

    .new-card-choice-button:active {
      transform: scale(0.97);
    }

    .pilot-status {
      min-height: 31px;
      margin-top: 11px;

      text-align: center;
      color: rgba(237, 243, 239, 0.66);
      font-size: 0.62rem;
      line-height: 1.35;
    }

    .human-zone {
      padding: 10px 8px 9px;

      border-radius: 20px;
      border: 1px solid rgba(231, 199, 92, 0.22);

      background:
        linear-gradient(
          180deg,
          rgba(231, 199, 92, 0.075),
          rgba(255, 255, 255, 0.025)
        );
    }

    .human-zone.active-turn {
      border-color: rgba(241, 208, 109, 0.72);
      box-shadow: 0 0 16px rgba(241, 208, 109, 0.12);
    }

    .human-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 5px 7px;
    }

    .human-name {
      color: #f1d06d;
      font-size: 0.74rem;
      font-weight: 800;
    }

    .human-count {
      color: rgba(237, 243, 239, 0.58);
      font-size: 0.6rem;
    }

    .human-melds-zone {
      display: none;
      margin: 0 4px 7px;
      padding: 7px;

      border-radius: 12px;
      border: 1px solid rgba(231, 199, 92, 0.18);
      background: rgba(0, 0, 0, 0.13);
    }

    .human-melds-zone.show {
      display: block;
    }

    .melds-label {
      margin-bottom: 5px;
      color: rgba(237, 243, 239, 0.62);
      font-size: 0.55rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .melds-scroll {
      display: flex;
      gap: 7px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    /*
      En Tradicional una jugada ilegal NO se delata visualmente.
      Esta clase existe solo para mantener el DOM identificable;
      usa exactamente el mismo aspecto que una jugada normal.
    */
    .table-meld.traditional-illegal-meld {
      border-color: inherit;
      background: inherit;
      box-shadow: inherit;
    }

    .table-meld {
      display: flex;
      flex: 0 0 auto;
      padding: 4px;

      border-radius: 8px;
      border: 1px solid rgba(231, 199, 92, 0.28);
      background: rgba(255, 255, 255, 0.04);
    }

    .table-card {
      width: 29px;
      height: 41px;
      flex: 0 0 29px;

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

      border-radius: 4px;
      color: #182019;
      background: #f4f0e5;

      font-family: Georgia, serif;
      font-size: 0.67rem;
      font-weight: 800;
    }

    .table-card.red {
      color: #c53e3e;
    }

    .table-card + .table-card {
      margin-left: -8px;
    }

    .table-card.interactive {
      position: relative;
      padding: 0;

      border: 1px solid transparent;

      font-family: Georgia, serif;
      cursor: pointer;

      transition:
        transform 0.14s ease,
        box-shadow 0.14s ease,
        border-color 0.14s ease;
    }

    .table-card.interactive:active {
      transform: translateY(-2px) scale(0.96);
    }

    .table-card.interactive.selected-for-desmoche {
      z-index: 10;

      transform: translateY(-7px);

      border-color: #f1d06d;

      box-shadow:
        0 0 0 2px rgba(241, 208, 109, 0.30),
        0 7px 12px rgba(0, 0, 0, 0.32);
    }

    .table-meld.source-meld {
      border-color: rgba(241, 208, 109, 0.72);

      box-shadow:
        0 0 0 2px rgba(241, 208, 109, 0.12);
    }

    .desmoche-help {
      margin: -1px 0 6px;

      color: rgba(237, 243, 239, 0.54);

      font-size: 0.52rem;
      line-height: 1.25;
    }

    .pilot-action.desmoche-action {
      color: #f4dfa0;

      border-color: rgba(241, 208, 109, 0.44);

      background:
        linear-gradient(
          180deg,
          rgba(241, 208, 109, 0.16),
          rgba(241, 208, 109, 0.06)
        );
    }

    .pilot-action.desmoche-action.ready {
      color: #241504;

      border-color: rgba(255, 239, 173, 0.86);

      background:
        linear-gradient(
          180deg,
          #f1d06d 0%,
          #c89a2d 100%
        );

      box-shadow:
        0 7px 15px rgba(200, 150, 40, 0.20);
    }


    /* =======================================
       BOTONES PRINCIPALES RESPONSIVE
    ======================================= */

    .main-action-row {
      grid-column: 1 / -1;

      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
    }

    .main-action-row .pilot-action {
      min-width: 0;
      min-height: 51px;
      padding: 7px 4px;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;

      line-height: 1;
      text-align: center;
    }

    .main-action-row .action-icon {
      display: block;

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

    .main-action-row .action-label {
      display: block;

      font-size: 0.61rem;
      font-weight: 900;
      letter-spacing: 0.25px;
      white-space: nowrap;
    }

    /*
      Estas reglas anteriores hacían que PASO y REPETIR
      ocuparan toda la fila. Dentro del nuevo grupo responsive
      deben ocupar solamente su propia columna.
    */

    .main-action-row .pass-game,
    .main-action-row .new-round {
      grid-column: auto;
      min-height: 51px;
    }

    .main-action-row .new-round {
      color: #efd47f;

      border-color: rgba(231, 199, 92, 0.30);

      background: rgba(231, 199, 92, 0.08);
    }

    /*
      En teléfonos angostos pasan a dos filas:
      BAJAR y PASO arriba; REPETIR ocupa el ancho completo abajo.
    */

    @media (max-width: 350px) {
      .main-action-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .main-action-row .new-round {
        grid-column: 1 / -1;

        min-height: 43px;

        flex-direction: row;
        gap: 6px;
      }

      .main-action-row .action-label {
        font-size: 0.59rem;
      }
    }

    /*
      En pantallas extremadamente pequeñas se colocan en una columna
      para conservar un área cómoda de toque.
    */

    @media (max-width: 285px) {
      .main-action-row {
        grid-template-columns: 1fr;
      }

      .main-action-row .new-round {
        grid-column: auto;
      }

      .main-action-row .pilot-action {
        min-height: 43px;

        flex-direction: row;
        gap: 6px;
      }
    }

    /*
      DESMOCHAR y DESCARTAR son acciones contextuales.
      Los tres controles permanentes viven dentro de main-action-row.
    */
    #btnDesmoche,
    #btnDiscard {
      grid-column: auto;
    }

    .human-hand {
      position: relative;
      min-height: 100px;

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

      padding: 24px 0 3px;
    }

    .playing-card {
      position: relative;

      width: 48px;
      height: 70px;
      flex: 0 0 48px;

      border-radius: 7px;
      border: 1px solid rgba(0, 0, 0, 0.18);

      color: #182019;
      background: linear-gradient(145deg, #fffdf5, #e9e4d6);

      box-shadow: 0 4px 9px rgba(0, 0, 0, 0.30);

      cursor: grab;
      touch-action: none;

      transition:
        transform 0.14s ease,
        box-shadow 0.14s ease;
    }

    .playing-card + .playing-card {
      margin-left: -15px;
    }

    .playing-card.red {
      color: #c53e3e;
    }

    .playing-card.lifted {
      z-index: 1;
      transform: translateY(-22px);

      box-shadow:
        0 11px 18px rgba(0, 0, 0, 0.38),
        0 0 0 2px rgba(241, 208, 109, 0.64);
    }

    .playing-card.turn-drawn::after {
      content: "NUEVA";
      position: absolute;
      right: 3px;
      bottom: 3px;

      padding: 2px 3px;

      border-radius: 4px;
      color: #241504;
      background: #f1d06d;

      font-family: "Segoe UI", Roboto, Arial, sans-serif;
      font-size: 0.35rem;
      font-weight: 900;
      letter-spacing: 0.25px;
    }

    .playing-card.dragging {
      z-index: 80;
      cursor: grabbing;

      box-shadow:
        0 14px 24px rgba(0, 0, 0, 0.48),
        0 0 0 2px rgba(241, 208, 109, 0.82);

      transition: none;
    }

    .drop-marker {
      position: absolute;
      bottom: 2px;
      z-index: 35;

      width: 3px;
      height: 84px;

      border-radius: 3px;
      background: #f1d06d;
      box-shadow: 0 0 10px rgba(241, 208, 109, 0.85);

      pointer-events: none;
    }

    .card-corner {
      position: absolute;
      top: 4px;
      left: 5px;

      display: flex;
      flex-direction: column;

      font-family: Georgia, serif;
      font-size: 0.68rem;
      font-weight: 800;
      line-height: 0.9;
      text-align: center;
    }

    .card-corner.bottom {
      top: auto;
      left: auto;
      right: 5px;
      bottom: 4px;
      transform: rotate(180deg);
    }

    .card-center-symbol {
      position: absolute;
      inset: 0;

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

      font-family: Georgia, serif;
      font-size: 1.65rem;
    }

    .hand-hint {
      margin-top: 3px;
      text-align: center;
      color: rgba(237, 243, 239, 0.58);
      font-size: 0.56rem;
      line-height: 1.3;
    }

    .pilot-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .pilot-action {
      min-height: 45px;
      padding: 8px 6px;

      border-radius: 13px;
      border: 1px solid rgba(231, 199, 92, 0.30);

      color: #efd47f;
      background: rgba(231, 199, 92, 0.08);

      font-family: inherit;
      font-size: 0.65rem;
      font-weight: 800;
      letter-spacing: 0.3px;
      cursor: pointer;
    }

    .pilot-action.primary {
      color: #241504;
      border-color: rgba(255, 239, 173, 0.8);
      background: linear-gradient(180deg, #f1d06d 0%, #c89a2d 100%);
    }

    .pilot-action.new-round {
      grid-column: 1 / -1;
      min-height: 38px;
      color: rgba(237, 243, 239, 0.68);
      border-color: rgba(255, 255, 255, 0.13);
      background: rgba(255, 255, 255, 0.04);
    }

    .pilot-action.return-discard {
      grid-column: 1 / -1;
      min-height: 42px;
      color: #f3dc96;
      border-color: rgba(231, 199, 92, 0.48);
      background:
        linear-gradient(
          180deg,
          rgba(231, 199, 92, 0.16),
          rgba(231, 199, 92, 0.07)
        );
    }

    .pilot-action[hidden] {
      display: none;
    }

    .pilot-action.pass-game {
      grid-column: 1 / -1;
      min-height: 43px;
      color: #f4dfa0;
      border-color: rgba(231, 199, 92, 0.42);
      background:
        linear-gradient(
          180deg,
          rgba(231, 199, 92, 0.14),
          rgba(231, 199, 92, 0.055)
        );
    }

    .pilot-action.traditional-claim {
      color: #ffd0d0;
      border-color: rgba(224, 82, 82, 0.54);
      background: rgba(177, 48, 48, 0.14);
    }

    .pilot-action.pass-game:disabled {
      opacity: 0.38;
      cursor: not-allowed;
    }

    .player-passed {
      opacity: 0.58;
      filter: saturate(0.55);
    }

    .player-passed .bot-seat-title,
    .player-passed .human-name {
      color: #c8b77d;
    }

    .pilot-action:disabled {
      opacity: 0.38;
      cursor: not-allowed;
    }

    .pilot-action:active:not(:disabled),
    .pilot-back:active {
      transform: scale(0.97);
    }

    .deal-fly-card {
      position: fixed;
      z-index: 250;

      width: 31px;
      height: 44px;

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

      border-radius: 5px;
      border: 1px solid rgba(246, 230, 161, 0.82);

      background:
        repeating-linear-gradient(
          45deg,
          rgba(246, 230, 161, 0.16) 0,
          rgba(246, 230, 161, 0.16) 2px,
          transparent 2px,
          transparent 5px
        ),
        #174c3d;

      color: #182019;
      box-shadow: 0 7px 13px rgba(0, 0, 0, 0.42);

      font-family: Georgia, serif;
      font-size: 0.67rem;
      font-weight: 800;

      pointer-events: none;
      transition:
        transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1),
        opacity 0.22s ease;
    }

    .deal-fly-card.face {
      background: #f4f0e5;
      border-color: rgba(0, 0, 0, 0.2);
    }

    .deal-fly-card.face.red {
      color: #c53e3e;
    }

    /*
      Descarte del BOT:
      la carta voladora replica visualmente la carta real
      que renderiza el montón de DESCARTE.
    */
    .bot-discard-fly-card {
      position: fixed;
      z-index: 265;

      width: 56px;
      height: 78px;

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

      border-radius: 8px;
      border: 1px solid rgba(246, 230, 161, 0.72);

      background: #f4f0e5;
      color: #182019;

      box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.40);

      font-family: Georgia, serif;

      pointer-events: none;
      will-change: transform, opacity;

      transition:
        transform 0.64s cubic-bezier(0.18, 0.76, 0.20, 1),
        opacity 0.10s linear;
    }

    .bot-discard-fly-card.red {
      color: #c53e3e;
    }

    .bot-discard-fly-card .discard-value {
      position: absolute;
      top: 5px;
      left: 6px;

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

      font-size: 0.73rem;
      font-weight: 900;
      line-height: 0.92;
    }

    .bot-discard-fly-card .discard-symbol {
      font-size: 2.05rem;
      font-weight: 900;
      line-height: 1;
    }

    /* =======================================
       INTERMEDIO · RESALTADO SILENCIOSO
    ======================================= */

    .intermediate-combo-highlight {
      position: relative;

      box-shadow:
        0 0 0 3px rgba(101, 215, 169, 0.78),
        0 0 17px rgba(101, 215, 169, 0.42) !important;

      animation:
        intermediateComboPulse
        1.35s ease-in-out infinite;
    }

    .intermediate-combo-anchor {
      box-shadow:
        0 0 0 3px rgba(241, 208, 109, 0.88),
        0 0 20px rgba(241, 208, 109, 0.46) !important;
    }

    @keyframes intermediateComboPulse {
      0%,
      100% {
        filter: brightness(1);
      }

      50% {
        filter: brightness(1.16);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .intermediate-combo-highlight {
        animation: none;
      }
    }

    .game-toast {
      position: fixed;
      left: 50%;
      bottom: max(24px, env(safe-area-inset-bottom));
      z-index: 280;

      width: min(88%, 360px);
      padding: 11px 14px;

      border-radius: 14px;
      border: 1px solid rgba(231, 199, 92, 0.35);

      color: #f3f5f4;
      background: rgba(7, 27, 22, 0.96);

      text-align: center;
      font-size: 0.75rem;
      line-height: 1.35;

      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);

      opacity: 0;
      transform: translate(-50%, 16px);
      pointer-events: none;

      transition:
        opacity 0.2s ease,
        transform 0.2s ease;
    }

    .game-toast.show {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    .result-overlay {
      position: fixed;
      inset: 0;
      z-index: 300;

      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;

      background: rgba(0, 0, 0, 0.76);
      backdrop-filter: blur(7px);
      -webkit-backdrop-filter: blur(7px);
    }

    .result-overlay.show {
      display: flex;
    }

    .result-card {
      width: 100%;
      max-width: 340px;
      padding: 24px 18px 18px;

      border-radius: 23px;
      border: 1px solid rgba(231, 199, 92, 0.48);

      text-align: center;

      background:
        radial-gradient(
          circle at 50% 0%,
          rgba(231, 199, 92, 0.15),
          transparent 34%
        ),
        #0d3027;

      box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    }

    .result-emoji {
      font-size: 2.5rem;
    }

    .result-title {
      margin-top: 8px;
      color: #f1d06d;
      font-size: 1.35rem;
    }

    .result-text {
      margin-top: 8px;
      color: rgba(237, 243, 239, 0.76);
      font-size: 0.78rem;
      line-height: 1.4;
    }

    .result-buttons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 17px;
    }

    .result-button {
      min-height: 47px;
      padding: 8px;

      border-radius: 13px;
      border: 1px solid rgba(231, 199, 92, 0.30);

      color: #efd47f;
      background: rgba(231, 199, 92, 0.08);

      font-family: inherit;
      font-size: 0.69rem;
      font-weight: 800;
      cursor: pointer;
    }

    .result-button.primary {
      color: #241504;
      background: linear-gradient(180deg, #f1d06d 0%, #c89a2d 100%);
    }


    /* =======================================
       CONFETI DE PALOS EN RESULTADO FINAL
    ======================================= */

    .result-overlay {
      overflow: hidden;
    }

    .result-confetti {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 0;
    }

    .result-card {
      position: relative;
      z-index: 1;
    }

    .result-confetti-piece {
      position: absolute;
      top: -14vh;
      left: 0;
      display: block;
      line-height: 1;
      opacity: 0;
      will-change: transform, opacity;
      text-shadow: 0 2px 10px rgba(0,0,0,.28);
      animation: suitConfettiFall var(--fallDur) linear var(--fallDelay) forwards;
    }

    @keyframes suitConfettiFall {
      0% {
        transform: translate3d(0, -10vh, 0) rotate(0deg) scale(var(--pieceScale,1));
        opacity: 0;
      }
      8% {
        opacity: .96;
      }
      100% {
        transform: translate3d(var(--driftX, 0vw), 115vh, 0) rotate(var(--rotateEnd, 400deg)) scale(var(--pieceScale,1));
        opacity: 0;
      }
    }


    /* =======================================
       MANO EN DOS NIVELES Y CARTA SEPARADA
    ======================================= */

    .hand-workspace {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 76px;
      gap: 7px;
      align-items: end;

      min-height: 151px;
    }

    .hand-main {
      min-width: 0;
    }

    .human-hand {
      min-height: 146px;
      padding: 67px 0 4px;
    }

    .playing-card.lifted {
      z-index: 1;
      transform: translateY(-49px);

      box-shadow:
        0 8px 15px rgba(0, 0, 0, 0.34),
        0 0 0 2px rgba(241, 208, 109, 0.64);
    }

    .drop-marker {
      height: 132px;
    }

    .special-card-slot {
      min-height: 137px;
      padding: 6px 4px;

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

      border-radius: 13px;
      border: 1px solid rgba(231, 199, 92, 0.34);

      background:
        linear-gradient(
          180deg,
          rgba(231, 199, 92, 0.105),
          rgba(0, 0, 0, 0.12)
        );
    }

    .special-card-slot[hidden] {
      display: none;
    }

    .special-card-title {
      width: 100%;
      margin-bottom: 5px;

      color: #efd47f;
      font-size: 0.53rem;
      font-weight: 900;
      letter-spacing: 0.35px;
      line-height: 1.15;
      text-align: center;
      text-transform: uppercase;
    }

    .special-card-visual {
      min-height: 75px;

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

    .special-card-visual .playing-card {
      margin: 0;
      flex: 0 0 52px;
      width: 52px;
      height: 76px;
    }

    .special-card-visual .playing-card.lifted {
      z-index: 3;
      transform: translateY(-7px);
    }

    .special-card-back {
      width: 52px;
      height: 76px;

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

      border-radius: 7px;
      border: 1px solid rgba(246, 230, 161, 0.78);

      color: #f1d06d;

      background:
        repeating-linear-gradient(
          45deg,
          rgba(246, 230, 161, 0.16) 0,
          rgba(246, 230, 161, 0.16) 3px,
          transparent 3px,
          transparent 7px
        ),
        #174c3d;

      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.34);

      font-size: 1.05rem;
    }

    .special-card-placeholder {
      width: 52px;
      height: 76px;

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

      padding: 6px;

      border-radius: 7px;
      border: 1px dashed rgba(237, 243, 239, 0.30);

      color: rgba(237, 243, 239, 0.55);
      background: rgba(255, 255, 255, 0.025);

      font-size: 0.55rem;
      line-height: 1.25;
      text-align: center;
    }

    .special-card-hint {
      min-height: 21px;
      margin-top: 4px;

      color: rgba(237, 243, 239, 0.58);
      font-size: 0.49rem;
      line-height: 1.18;
      text-align: center;
    }

    .exchange-action {
      grid-column: 1 / -1;
      min-height: 47px;
    }

    .result-button.view-game {
      grid-column: 1 / -1;
    }

    .bot-hand.revealed {
      min-height: 44px;

      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      gap: 2px;

      overflow: visible;
    }

    .bot-hand.revealed .mini-card {
      margin: 0;
    }

    /* =======================================
       CORRECCIÓN DE MANO Y ARRASTRE
    ======================================= */

    .hand-main {
      min-width: 0;
      overflow: visible;
    }

    .human-hand {
      --hand-overlap: -15px;

      width: 100%;
      min-width: 0;
      padding-left: 1px;
      padding-right: 1px;

      justify-content: center;
      overflow: visible;
    }

    .human-hand .playing-card + .playing-card {
      margin-left: var(--hand-overlap);
    }

    /*
      "upper" indica la fila superior.
      "lifted" queda solo para seleccionar una carta,
      por eso ya no cambia su posición vertical.
    */

    .playing-card.upper {
      z-index: 1 !important;
      transform: translateY(-49px);
    }

    .playing-card.lifted {
      z-index: calc(var(--card-layer, 2) + 30);

      transform: none;

      box-shadow:
        0 8px 15px rgba(0, 0, 0, 0.34),
        0 0 0 3px rgba(241, 208, 109, 0.9);
    }

    .playing-card.upper.lifted {
      z-index: 2 !important;
      transform: translateY(-49px);

      box-shadow:
        0 8px 15px rgba(0, 0, 0, 0.34),
        0 0 0 3px rgba(241, 208, 109, 0.9);
    }

    .special-card-visual .playing-card,
    .special-card-visual .playing-card.upper,
    .special-card-visual .playing-card.lifted,
    .special-card-visual .playing-card.upper.lifted {
      z-index: 3 !important;
      transform: none;
    }

    /*
      TRADICIONAL · destinos físicos del descarte.
      No son pistas estratégicas: solo feedback del gesto.
    */
    .human-melds-zone.traditional-discard-target {
      border-color:
        rgba(101, 215, 169, 0.88) !important;

      box-shadow:
        0 0 0 2px
          rgba(101, 215, 169, 0.14),
        inset 0 0 22px
          rgba(101, 215, 169, 0.07),
        0 0 18px
          rgba(101, 215, 169, 0.14) !important;
    }

    .special-card-slot.traditional-discard-target {
      border-color:
        rgba(101, 215, 169, 0.92) !important;

      background:
        rgba(101, 215, 169, 0.07) !important;

      box-shadow:
        0 0 0 2px
          rgba(101, 215, 169, 0.15),
        0 0 18px
          rgba(101, 215, 169, 0.20) !important;
    }

    .discard-pile-zone.traditional-return-target {
      border-color:
        rgba(241, 208, 109, 0.96) !important;

      box-shadow:
        0 0 0 2px
          rgba(241, 208, 109, 0.14),
        0 0 18px
          rgba(241, 208, 109, 0.20) !important;
    }

    .human-melds-zone
    [data-card-id].traditional-claimed-discard {
      box-shadow:
        0 0 0 2px
          rgba(241, 208, 109, 0.22);
    }

    .special-card-slot.drop-active {
      border-color: rgba(241, 208, 109, 0.95);

      background:
        linear-gradient(
          180deg,
          rgba(241, 208, 109, 0.24),
          rgba(0, 0, 0, 0.13)
        );

      box-shadow:
        0 0 0 2px rgba(241, 208, 109, 0.18),
        0 0 18px rgba(241, 208, 109, 0.16);
    }

    .special-card-action {
      width: 100%;
      min-height: 31px;
      margin-top: 5px;
      padding: 5px 3px;

      border: none;
      border-radius: 8px;

      color: #241504;
      background:
        linear-gradient(
          180deg,
          #f1d06d 0%,
          #c89a2d 100%
        );

      font-family: inherit;
      font-size: 0.54rem;
      font-weight: 900;
      line-height: 1.1;

      cursor: pointer;
    }

    .special-card-action[hidden] {
      display: none;
    }

    /*
      Decisión visible para la carta recién levantada del mazo.
      El botón legacy specialCardAction se conserva internamente,
      pero Principiante muestra estas dos opciones claras.
    */
    .special-card-decision-obsolete {
      width: 100%;
      margin-top: 5px;

      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
    }

    .special-card-decision-obsolete[hidden] {
      display: none !important;
    }

    .special-card-choice-obsolete {
      min-width: 0;
      min-height: 29px;
      padding: 4px 2px;

      border-radius: 8px;
      border: 1px solid rgba(241, 208, 109, 0.38);

      font-family: inherit;
      font-size: 0.40rem;
      font-weight: 950;
      line-height: 1.05;

      cursor: pointer;
    }

    .special-card-choice-obsolete.use {
      color: #163225;
      background:
        linear-gradient(
          180deg,
          #9fe0bd,
          #67bd91
        );
      border-color: rgba(182, 242, 211, 0.78);
    }

    .special-card-choice-obsolete.discard {
      color: #2d1c06;
      background:
        linear-gradient(
          180deg,
          #f2d574,
          #c99b32
        );
      border-color: rgba(255, 239, 173, 0.76);
    }

    .special-card-choice-obsolete:active {
      transform: scale(0.96);
    }

    /*
      El descarte se confirma desde el cuadro derecho.
      El botón anterior se conserva internamente,
      pero ya no ocupa espacio visual.
    */

    #btnDiscard {
      display: none;
    }

    #btnLaySelection {
      grid-column: 1 / -1;
    }

    @media (max-width: 370px) {
      .hand-workspace {
        grid-template-columns: minmax(0, 1fr) 70px;
        gap: 5px;
      }

      .special-card-slot {
        padding-left: 2px;
        padding-right: 2px;
      }
    }

    @media (max-height: 700px) {
      .game-container {
        justify-content: flex-start;
        padding-top: 90px;
        padding-bottom: 140px;
      }

      .glass-card {
        padding-top: 28px;
      }

      .cards-decor {
        height: 150px;
      }
    }

    @media (max-width: 360px) {
      .glass-card {
        padding-left: 14px;
        padding-right: 14px;
      }

      .btn {
        max-width: 100%;
      }

      .corner-ornament {
        width: 58px;
        height: 58px;
      }

      .top-logo {
        width: 42px;
        height: 42px;
      }

      .modal {
        padding: 8px;
      }

      .rules-content {
        padding: 11px;
      }

      .topic-button {
        grid-template-columns: 39px 1fr 22px;
      }
    }
  
    /* =======================================
       COPYS MINIMALISTAS + NOMBRE DE INVITADO
    ======================================= */

    .glass-card {
      max-width: 340px;
      padding: 30px 16px 22px;
      border-radius: 25px;
    }

    .title {
      margin-bottom: 9px;

      font-size: clamp(1.75rem, 7vw, 2.55rem);
      letter-spacing: 0.7px;
    }

    .subtitle {
      max-width: 220px;
      margin-bottom: 24px;

      font-size: 0.82rem;
      line-height: 1.25;

      color: rgba(237, 244, 240, 0.82);
    }

    .btn {
      max-width: 258px;
      min-height: 56px;
      margin-bottom: 10px;
      padding: 10px 15px;

      border-radius: 15px;

      font-size: 0.9rem;
      letter-spacing: 0.65px;
    }

    .online-main {
      font-size: 0.9rem;
      letter-spacing: 0.65px;
    }

    .online-sub {
      font-size: 0.48rem;
    }

    .offline-card .modal-title {
      font-size: 1.06rem;
      letter-spacing: 0.25px;
    }

    .offline-card .modal-subtitle {
      font-size: 0.67rem;
    }

    .offline-content {
      padding: 15px 14px 14px;
    }

    .guest-profile {
      gap: 10px;
      padding: 11px 12px;
    }

    .guest-profile .player-avatar {
      width: 43px;
      height: 43px;
      flex-basis: 43px;

      font-size: 1.15rem;
    }

    .guest-info {
      min-width: 0;
      width: 100%;
    }

    .guest-info .player-label {
      display: block;
      margin-bottom: 5px;

      font-size: 0.59rem;
      font-weight: 800;
      letter-spacing: 0.7px;

      color: #e8cb72;
    }

    .player-name-input {
      width: 100%;
      min-height: 39px;
      padding: 8px 10px;

      border-radius: 11px;
      border:
        1px solid rgba(255, 255, 255, 0.15);

      outline: none;

      color: #f5f7f6;
      background:
        rgba(0, 0, 0, 0.14);

      font-family: inherit;
      font-size: 0.88rem;
      font-weight: 700;

      transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
    }

    .player-name-input::placeholder {
      color: rgba(237, 243, 239, 0.35);
    }

    .player-name-input:focus {
      border-color: rgba(231, 199, 92, 0.65);

      background:
        rgba(0, 0, 0, 0.20);

      box-shadow:
        0 0 0 3px rgba(231, 199, 92, 0.10);
    }

    .player-name-note {
      margin-top: 4px;

      color: rgba(237, 243, 239, 0.46);

      font-size: 0.57rem;
      line-height: 1.25;
    }

    .config-section {
      margin-top: 14px;
    }

    .config-title {
      margin-bottom: 8px;

      font-size: 0.72rem;
      letter-spacing: 0.45px;
    }

    .bot-option {
      min-height: 69px;
      padding: 7px 4px;
      border-radius: 14px;
    }

    .bot-emoji {
      font-size: 1.25rem;
    }

    .bot-number {
      font-size: 0.76rem;
    }

    .bot-word {
      font-size: 0.58rem;
    }

    .game-mode-option {
      min-height: 45px;
      padding: 7px 6px;
      gap: 5px;
    }

    .game-mode-icon {
      font-size: 0.95rem;
    }

    .game-mode-option strong {
      font-size: 0.61rem;
    }

    .game-mode-hint {
      font-size: 0.52rem;
    }

    .locked-rule {
      min-height: 39px;
      font-size: 0.63rem;
    }

    .locked-hint,
    .config-note {
      font-size: 0.61rem;
    }

    .match-summary {
      margin-top: 13px;
      padding: 10px 11px;
    }

    .summary-label {
      font-size: 0.58rem;
    }

    .summary-text {
      margin-top: 3px;

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

      font-size: 0.8rem;
    }

    .start-match {
      min-height: 50px;
      margin-top: 13px;

      font-size: 0.82rem;
      letter-spacing: 0.65px;
    }

    @media (max-width: 360px) {
      .title {
        font-size: clamp(1.65rem, 7vw, 2.15rem);
      }

      .btn {
        min-height: 52px;
        font-size: 0.84rem;
      }
    }

  
    /* =======================================
       BOTONES INFERIORES EN 3 CAJAS
    ======================================= */

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

    .main-action-row .pilot-action,
    .main-action-row .new-round,
    .main-action-row .pass-game {
      grid-column: auto;

      min-width: 0;
      min-height: 46px;
      padding: 7px 5px;

      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 4px;

      border-radius: 16px;

      white-space: nowrap;
    }

    .main-action-row .action-icon {
      font-size: 0.88rem;
      line-height: 1;
    }

    .main-action-row .action-label {
      min-width: 0;

      font-size: clamp(0.50rem, 2.1vw, 0.62rem);
      letter-spacing: 0.15px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /*
      Se mantienen los tres botones en horizontal incluso
      en teléfonos angostos. Solo se reducen un poco.
    */

    @media (max-width: 350px) {
      .main-action-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
      }

      .main-action-row .pilot-action,
      .main-action-row .new-round,
      .main-action-row .pass-game {
        grid-column: auto;

        min-height: 43px;
        padding: 6px 3px;

        flex-direction: row;
        gap: 3px;
      }

      .main-action-row .action-icon {
        font-size: 0.78rem;
      }

      .main-action-row .action-label {
        font-size: 0.49rem;
      }
    }

    @media (max-width: 285px) {
      .main-action-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .main-action-row .pilot-action,
      .main-action-row .new-round,
      .main-action-row .pass-game {
        grid-column: auto;
        min-height: 41px;
      }

      .main-action-row .action-icon {
        display: none;
      }
    }

    /* =======================================
       CUENTA REGRESIVA DEL CAMBIO
    ======================================= */

    .exchange-countdown {
      font-weight: 900;
      color: #f0d37b;

      transition:
        color 0.18s ease,
        text-shadow 0.18s ease;
    }

    .exchange-countdown.critical {
      color: #ff5c5c;

      text-shadow:
        0 0 8px rgba(255, 72, 72, 0.30);

      animation:
        countdownPulse 0.8s ease-in-out infinite alternate;
    }

    @keyframes countdownPulse {
      from {
        opacity: 0.72;
      }

      to {
        opacity: 1;
      }
    }

  
    /* =======================================
       TODOS LOS BOTONES COMPACTOS
    ======================================= */

    .action-row {
      grid-column: 1 / -1;

      display: grid;
      gap: 6px;
    }

    .action-row-primary {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .action-row-secondary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .action-row .compact-action {
      grid-column: auto;

      width: 100%;
      min-width: 0;
      max-width: none;
      min-height: 48px;
      margin: 0;
      padding: 7px 4px;

      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 4px;

      border-radius: 16px;

      line-height: 1.05;
      text-align: center;
    }

    .action-row .action-icon {
      flex: 0 0 auto;

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

    .action-row .action-label {
      min-width: 0;

      font-size: clamp(0.48rem, 2vw, 0.61rem);
      font-weight: 900;
      letter-spacing: 0.12px;
      line-height: 1.05;
      white-space: normal;
    }

    .action-row .exchange-action,
    .action-row .pass-game,
    .action-row .new-round,
    .action-row .desmoche-action {
      grid-column: auto;
      min-height: 48px;
    }

    .action-row .new-round {
      color: #efd47f;

      border-color: rgba(231, 199, 92, 0.30);

      background: rgba(231, 199, 92, 0.08);
    }

    /*
      Cuando ENTREGAR CAMBIO está oculto,
      BAJAR y DESMOCHAR se acomodan automáticamente
      sin dejar un hueco vacío.
    */

    .action-row [hidden] {
      display: none;
    }

    @media (max-width: 350px) {
      .action-row {
        gap: 5px;
      }

      .action-row .compact-action {
        min-height: 45px;
        padding: 6px 3px;
        gap: 3px;
      }

      .action-row .action-icon {
        font-size: 0.77rem;
      }

      .action-row .action-label {
        font-size: 0.47rem;
      }
    }

    @media (max-width: 285px) {
      .action-row .action-icon {
        display: none;
      }

      .action-row .action-label {
        font-size: 0.46rem;
      }
    }

  
    /* =======================================
       CORRECCIÓN FINAL DE ALINEACIÓN
    ======================================= */

    /*
      Flex reparte automáticamente el ancho entre
      los botones que estén visibles:
      - 3 botones visibles = tres cajas iguales.
      - 2 botones visibles = dos cajas iguales.
    */

    .action-row,
    .action-row-primary,
    .action-row-secondary {
      display: flex;
      grid-template-columns: none;

      width: 100%;
      gap: 7px;
    }

    .action-row .compact-action,
    .action-row #btnExchangeCard,
    .action-row #btnLaySelection,
    .action-row #btnDesmoche,
    .action-row #btnDeclarePass,
    .action-row #btnRedeal {
      grid-column: auto !important;

      width: auto;
      max-width: none;
      min-width: 0;
      flex: 1 1 0;

      margin: 0;
    }

    .action-row-primary .compact-action {
      min-height: 52px;
    }

    .action-row-secondary .compact-action {
      min-height: 48px;
    }

    .action-row [hidden] {
      display: none !important;
    }

    @media (max-width: 350px) {
      .action-row,
      .action-row-primary,
      .action-row-secondary {
        gap: 5px;
      }

      .action-row-primary .compact-action,
      .action-row-secondary .compact-action {
        min-height: 45px;
      }

      .action-row .action-label {
        font-size: 0.47rem;
      }
    }

  
    /* =======================================
       JUGABILIDAD MEDIANTE ARRASTRE
    ======================================= */

    /*
      BAJAR, DESMOCHAR y ENTREGAR CAMBIO dejan de ser
      la acción principal. Las cartas se mueven directamente.
    */

    .action-row-primary,
    #btnLaySelection,
    #btnDesmoche,
    #btnDiscard,
    #btnReturnDiscard,
    .special-card-action {
      display: none !important;
    }

    .human-melds-zone {
      min-height: 72px;

      transition:
        border-color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
    }

    .human-melds-zone.drop-ready {
      display: block;
    }

    .human-melds-zone.empty-table .melds-scroll {
      min-height: 43px;

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

    .table-drop-placeholder {
      width: 100%;
      padding: 10px 8px;

      border-radius: 9px;
      border:
        1px dashed rgba(231, 199, 92, 0.30);

      color: rgba(237, 243, 239, 0.50);
      background:
        rgba(255, 255, 255, 0.025);

      font-size: 0.58rem;
      line-height: 1.3;
      text-align: center;
    }

    .human-melds-zone.drop-active,
    .discard-drop-target.drop-active {
      border-color: rgba(241, 208, 109, 0.95);

      background:
        linear-gradient(
          180deg,
          rgba(241, 208, 109, 0.18),
          rgba(0, 0, 0, 0.13)
        );

      box-shadow:
        0 0 0 2px rgba(241, 208, 109, 0.15),
        0 0 20px rgba(241, 208, 109, 0.18);
    }

    .discard-drop-target {
      transition:
        border-color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
    }

    .drop-invalid {
      animation:
        invalidDropShake 0.38s ease;
    }

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

      25% {
        transform: translateX(-7px);
      }

      50% {
        transform: translateX(7px);
      }

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

    .drag-bundle {
      position: fixed;
      z-index: 9999;

      display: flex;
      align-items: center;

      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;

      /*
        La copia queda completamente arriba del dedo.
        El punto dorado de abajo indica dónde está
        tocando realmente el jugador.
      */
      transform:
        translate(
          -50%,
          calc(-100% - 25px)
        )
        rotate(-2deg);

      transform-origin:
        center bottom;

      filter:
        drop-shadow(
          0 13px 15px
          rgba(0, 0, 0, 0.48)
        );

      animation:
        ghostCardAppear
        0.13s ease-out;
    }

    @keyframes ghostCardAppear {
      from {
        opacity: 0;
        transform:
          translate(
            -50%,
            calc(-100% - 14px)
          )
          scale(0.88)
          rotate(-2deg);
      }

      to {
        opacity: 1;
        transform:
          translate(
            -50%,
            calc(-100% - 25px)
          )
          scale(1)
          rotate(-2deg);
      }
    }

    .drag-bundle::before {
      content: "";

      position: absolute;
      left: 50%;
      bottom: -22px;

      width: 2px;
      height: 19px;

      transform:
        translateX(-50%);

      border-radius: 999px;

      background:
        linear-gradient(
          180deg,
          rgba(241, 208, 109, 0.92),
          rgba(241, 208, 109, 0.18)
        );
    }

    .drag-bundle::after {
      content: "";

      position: absolute;
      left: 50%;
      bottom: -29px;

      width: 10px;
      height: 10px;

      transform:
        translateX(-50%);

      border-radius: 50%;

      border:
        2px solid
        rgba(255, 240, 180, 0.94);

      background:
        #d8ae43;

      box-shadow:
        0 0 0 4px
        rgba(241, 208, 109, 0.15),
        0 0 14px
        rgba(241, 208, 109, 0.65);
    }

    .drag-bundle-card {
      width: 42px;
      height: 61px;
      flex: 0 0 42px;

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

      border-radius: 7px;

      border:
        2px solid
        rgba(241, 208, 109, 0.72);

      color: #182019;

      background:
        linear-gradient(
          145deg,
          rgba(255, 254, 247, 0.98),
          rgba(232, 226, 208, 0.96)
        );

      box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.72);

      font-family:
        Georgia,
        serif;

      font-size: 0.88rem;
      font-weight: 900;
    }

    /*
      Cuando se arrastra una sola carta, se muestra
      todavía más grande para identificarla rápido.
    */
    .drag-bundle.single-card
    .drag-bundle-card {
      width: 52px;
      height: 74px;
      flex-basis: 52px;

      border-radius: 9px;

      font-size: 1.08rem;

      box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.76),
        0 0 0 3px
        rgba(241, 208, 109, 0.10);
    }

    .drag-bundle-card.red {
      color: #c53e3e;
    }

    .drag-bundle-card + .drag-bundle-card {
      margin-left: -15px;
    }

  
    /* =======================================
       ZONA TEMPORAL PARA ARMAR COMBINACIONES
    ======================================= */

    .human-draft-zone {
      margin-top: 7px;
      padding: 7px;

      border-radius: 10px;
      border:
        1px dashed rgba(241, 208, 109, 0.48);

      background:
        linear-gradient(
          180deg,
          rgba(241, 208, 109, 0.10),
          rgba(0, 0, 0, 0.09)
        );

      animation: draftAppear 0.18s ease;
    }

    .human-draft-zone[hidden] {
      display: none;
    }

    @keyframes draftAppear {
      from {
        opacity: 0;
        transform: translateY(4px);
      }

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

    .draft-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;

      margin-bottom: 6px;
    }

    .draft-title {
      color: #f0d37b;

      font-size: 0.55rem;
      font-weight: 900;
      letter-spacing: 0.55px;
    }

    .draft-count {
      color: rgba(237, 243, 239, 0.58);

      font-size: 0.52rem;
      font-weight: 700;
    }

    .draft-cards {
      min-height: 43px;

      display: flex;
      align-items: center;
      gap: 4px;

      overflow-x: auto;
      scrollbar-width: none;
    }

    .draft-cards::-webkit-scrollbar {
      display: none;
    }

    .draft-card {
      position: relative;

      min-width: 43px;
      height: 52px;
      padding: 0 5px;

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

      border-radius: 7px;
      border:
        1px solid rgba(0, 0, 0, 0.16);

      color: #182019;
      background:
        linear-gradient(
          145deg,
          #fffdf5,
          #e9e4d6
        );

      box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.24);

      font-family: Georgia, serif;
      font-size: 0.78rem;
      font-weight: 800;

      cursor: pointer;
    }

    .draft-card.red {
      color: #c53e3e;
    }

    .draft-card:active {
      transform: translateY(2px) scale(0.96);
    }

    .draft-card.drawn-card::after {
      content: "NUEVA";

      position: absolute;
      right: 2px;
      bottom: 2px;

      padding: 1px 3px;

      border-radius: 4px;

      color: #332008;
      background: #f1d06d;

      font-family:
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

      font-size: 0.34rem;
      font-weight: 900;
      line-height: 1;
    }

    .draft-hint {
      margin-top: 5px;

      color: rgba(237, 243, 239, 0.50);

      font-size: 0.50rem;
      line-height: 1.25;
    }

    .human-melds-zone.has-draft {
      border-color:
        rgba(241, 208, 109, 0.34);
    }

  
    /* =======================================
       DESCARTE TOMADO DENTRO DE LA MANO
    ======================================= */

    .playing-card.from-discard::after {
      content: "DESCARTE";
      font-size: 0.36rem;
      letter-spacing: 0;
    }

    .human-hand.claim-drop-active {
      border-radius: 12px;
      background:
        linear-gradient(
          180deg,
          rgba(241, 208, 109, 0.16),
          rgba(241, 208, 109, 0.04)
        );
      box-shadow:
        inset 0 0 0 2px rgba(241, 208, 109, 0.54),
        0 0 18px rgba(241, 208, 109, 0.15);
    }

    .discard-card.claim-draggable {
      cursor: grab;
      box-shadow:
        0 0 0 2px rgba(241, 208, 109, 0.22),
        0 8px 14px rgba(0, 0, 0, 0.30);
    }

    .discard-card.claim-draggable:active {
      cursor: grabbing;
    }

  
    /* =======================================
       DESCARTE SUPERIOR COMO ZONA REAL
    ======================================= */

    .discard-pile-zone {
      position: relative;

      padding: 7px 8px 6px;

      border-radius: 16px;
      border: 1px solid transparent;

      transition:
        border-color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
    }

    .discard-pile-zone.ready-to-discard {
      border-color:
        rgba(241, 208, 109, 0.62);

      background:
        linear-gradient(
          180deg,
          rgba(241, 208, 109, 0.12),
          rgba(0, 0, 0, 0.05)
        );

      box-shadow:
        0 0 0 2px
        rgba(241, 208, 109, 0.08),
        0 0 17px
        rgba(241, 208, 109, 0.13);
    }

    .discard-pile-zone.drop-active {
      border-color:
        rgba(241, 208, 109, 1);

      background:
        linear-gradient(
          180deg,
          rgba(241, 208, 109, 0.24),
          rgba(0, 0, 0, 0.08)
        );

      box-shadow:
        0 0 0 3px
        rgba(241, 208, 109, 0.18),
        0 0 24px
        rgba(241, 208, 109, 0.25);

      transform: scale(1.035);
    }

    .discard-pile-zone.claim-ready {
      border-color:
        rgba(101, 215, 169, 0.66);

      background:
        linear-gradient(
          180deg,
          rgba(101, 215, 169, 0.12),
          rgba(0, 0, 0, 0.05)
        );

      box-shadow:
        0 0 0 2px
        rgba(101, 215, 169, 0.07),
        0 0 17px
        rgba(101, 215, 169, 0.13);
    }

    .discard-drop-hint {
      min-height: 18px;
      margin-top: 3px;
      padding: 3px 5px;

      border-radius: 7px;

      color: #f0d37b;
      background:
        rgba(0, 0, 0, 0.16);

      font-size: 0.48rem;
      font-weight: 900;
      letter-spacing: 0.35px;
      line-height: 1.1;
      text-align: center;
    }

    .discard-pile-zone.claim-ready
    .discard-drop-hint {
      color: #a8e6cd;
    }

    /*
      El cuadro lateral queda reservado únicamente para:
      CAMBIO y CARTA DEL MAZO.
    */

    .special-card-slot {
      align-self: end;
    }

  
    /* =======================================
       CUADRO DERECHO SIEMPRE FIJO
    ======================================= */

    .special-card-slot.idle-slot {
      opacity: 0.50;

      border-style: dashed;
      border-color:
        rgba(255, 255, 255, 0.14);

      background:
        rgba(255, 255, 255, 0.025);

      box-shadow: none;
    }

    .special-card-slot.idle-slot
    .special-card-title {
      color:
        rgba(237, 243, 239, 0.38);
    }

    .special-card-slot.idle-slot
    .special-card-placeholder {
      min-height: 76px;

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

      color:
        rgba(237, 243, 239, 0.22);

      font-size: 1.05rem;
    }

    /* =======================================
       DESCARTE DIRECTO HACIA LA MESA
    ======================================= */

    .human-melds-zone.claim-table-ready {
      display: block;

      min-height: 82px;

      border-color:
        rgba(101, 215, 169, 0.62);

      background:
        linear-gradient(
          180deg,
          rgba(101, 215, 169, 0.11),
          rgba(0, 0, 0, 0.06)
        );

      box-shadow:
        0 0 0 2px
        rgba(101, 215, 169, 0.07),
        0 0 18px
        rgba(101, 215, 169, 0.11);
    }

    .human-melds-zone.claim-table-ready
    .table-drop-placeholder {
      border-color:
        rgba(101, 215, 169, 0.48);

      color:
        rgba(194, 242, 222, 0.86);

      background:
        rgba(101, 215, 169, 0.07);
    }

    .human-melds-zone.claim-drop-active {
      border-color:
        rgba(101, 215, 169, 1);

      background:
        linear-gradient(
          180deg,
          rgba(101, 215, 169, 0.26),
          rgba(0, 0, 0, 0.07)
        );

      box-shadow:
        0 0 0 3px
        rgba(101, 215, 169, 0.18),
        0 0 25px
        rgba(101, 215, 169, 0.24);

      transform: scale(1.012);
    }

  
    /* =======================================
       MESA PERMANENTE Y MINIMALISTA
    ======================================= */

    .human-melds-zone,
    .human-melds-zone.show {
      display: block !important;

      min-height: 132px;
      margin-bottom: 9px;
      padding: 8px;

      border-color:
        rgba(231, 199, 92, 0.25);

      background:
        linear-gradient(
          180deg,
          rgba(0, 0, 0, 0.11),
          rgba(255, 255, 255, 0.018)
        );
    }

    .melds-label {
      min-height: 14px;
      margin-bottom: 5px;

      color:
        rgba(237, 243, 239, 0.50);

      font-size: 0.52rem;
      letter-spacing: 0.8px;
    }

    .desmoche-help {
      display: none !important;
    }

    .melds-scroll {
      min-height: 88px;

      align-items: center;
    }

    .table-drop-placeholder {
      min-height: 72px;
      padding: 9px;

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

      border-color:
        rgba(231, 199, 92, 0.23);

      color:
        rgba(237, 243, 239, 0.46);

      font-size: 0.54rem;
      font-weight: 800;
      letter-spacing: 0.3px;
    }

    .table-drop-placeholder.inactive {
      border-color: transparent;
      background: transparent;
      color: transparent;
    }

    /* =======================================
       CUADRO DERECHO REALMENTE FIJO
    ======================================= */

    .human-play-area {
      align-items: stretch;
    }

    .special-card-slot {
      width: 108px;
      min-width: 108px;
      min-height: 158px;
      max-height: 158px;
      align-self: end;

      justify-content: center;

      overflow: hidden;
    }

    .special-card-title {
      min-height: 14px;
      margin-bottom: 3px;

      font-size: 0.49rem;
    }

    .special-card-visual {
      min-height: 78px;
      max-height: 82px;
    }

    .special-card-hint {
      min-height: 15px;
      margin-top: 3px;

      font-size: 0.45rem;
      line-height: 1.1;
    }

    .special-card-slot.idle-slot {
      opacity: 0.34;
    }

    .special-card-slot.idle-slot
    .special-card-title,
    .special-card-slot.idle-slot
    .special-card-hint {
      color: transparent;
    }

    .special-card-slot.idle-slot
    .special-card-placeholder {
      color:
        rgba(237, 243, 239, 0.18);

      font-size: 0.9rem;
    }

    /* =======================================
       ARRASTRE DEL DESCARTE EN CELULAR
    ======================================= */

    .discard-pile-zone.claim-ready {
      touch-action: none;
      -ms-touch-action: none;

      user-select: none;
      -webkit-user-select: none;

      cursor: grab;
    }

    .discard-pile-zone.claim-ready:active {
      cursor: grabbing;
    }

    /*
      El padre recibe el gesto completo. Esto evita que
      Chrome interprete el movimiento como scroll.
    */

    .discard-pile-zone.claim-ready
    .discard-card {
      pointer-events: none;
    }

    .discard-pile-zone.claim-ready
    .pile-label,
    .discard-pile-zone.claim-ready
    .pile-count,
    .discard-pile-zone.claim-ready
    .discard-drop-hint {
      pointer-events: none;
    }

    .discard-pile-zone.dragging-claim {
      z-index: 30;

      transform: scale(1.025);
    }

    .human-melds-zone.claim-drop-active,
    .human-hand.claim-drop-active {
      touch-action: none;
    }

    @media (max-width: 360px) {
      .human-melds-zone,
      .human-melds-zone.show {
        min-height: 120px;
      }

      .melds-scroll {
        min-height: 77px;
      }

      .special-card-slot {
        width: 101px;
        min-width: 101px;
        min-height: 150px;
        max-height: 150px;
      }
    }

  
    /* =======================================
       CORRECCIÓN DEL CUADRO DERECHO
    ======================================= */

    /*
      El espacio de la cuadrícula y el ancho del cuadro
      ahora coinciden. Así nunca se sale del marco.
    */

    .hand-workspace {
      width: 100%;
      max-width: 100%;

      grid-template-columns:
        minmax(0, 1fr)
        94px;

      gap: 7px;
      align-items: end;

      overflow: hidden;
    }

    .hand-main {
      min-width: 0;
      width: 100%;

      overflow: visible;
    }

    .special-card-slot {
      box-sizing: border-box;

      width: 94px;
      min-width: 0;
      max-width: 94px;

      height: 150px;
      min-height: 150px;
      max-height: 150px;

      margin: 0;

      align-self: end;
      justify-self: end;

      padding: 6px 4px;

      overflow: hidden;
    }

    .special-card-title {
      width: 100%;
      max-width: 100%;
      min-height: 14px;

      overflow: hidden;

      font-size: 0.47rem;
      line-height: 1.05;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .special-card-visual {
      width: 100%;
      min-height: 75px;
      max-height: 78px;

      overflow: visible;
    }

    .special-card-visual .playing-card {
      width: 48px;
      height: 70px;
      flex: 0 0 48px;
    }

    .special-card-hint {
      width: 100%;
      max-width: 100%;
      min-height: 17px;
      max-height: 28px;

      margin-top: 3px;

      overflow: hidden;

      font-size: 0.42rem;
      line-height: 1.08;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .special-card-action {
      width: 100%;
      max-width: 100%;
      min-height: 28px;
      padding: 4px 2px;

      font-size: 0.43rem;
      line-height: 1.05;
    }

    /*
      La mano permanece centrada dentro del espacio restante
      y no invade el cuadro lateral.
    */

    .human-hand {
      max-width: 100%;
    }

    @media (max-width: 360px) {
      .hand-workspace {
        grid-template-columns:
          minmax(0, 1fr)
          87px;

        gap: 5px;
      }

      .special-card-slot {
        width: 87px;
        max-width: 87px;

        height: 144px;
        min-height: 144px;
        max-height: 144px;
      }

      .special-card-title {
        font-size: 0.44rem;
      }

      .special-card-hint {
        font-size: 0.39rem;
      }

      .special-card-visual .playing-card {
        width: 46px;
        height: 67px;
        flex-basis: 46px;
      }
    }

    @media (max-width: 320px) {
      .hand-workspace {
        grid-template-columns:
          minmax(0, 1fr)
          80px;

        gap: 4px;
      }

      .special-card-slot {
        width: 80px;
        max-width: 80px;

        height: 138px;
        min-height: 138px;
        max-height: 138px;
      }
    }

  
    /* =======================================
       MESA COMPACTA
    ======================================= */

    .human-melds-zone,
    .human-melds-zone.show {
      display: block !important;

      min-height: 68px;
      margin: 0 4px 6px;
      padding: 6px;

      border-radius: 11px;
    }

    .melds-label {
      min-height: 12px;
      margin-bottom: 3px;

      font-size: 0.49rem;
    }

    .melds-scroll {
      min-height: 43px;

      align-items: center;
    }

    .table-drop-placeholder {
      min-height: 39px;
      padding: 5px;

      font-size: 0.48rem;
    }

    .table-drop-placeholder.inactive {
      min-height: 39px;

      border-color:
        rgba(231, 199, 92, 0.08);

      color: transparent;
      background: transparent;
    }

    .human-melds-zone.has-draft {
      border-color:
        rgba(231, 199, 92, 0.25);
    }

    /* =======================================
       JUGADA DEBAJO DE LA MANO
    ======================================= */

    .human-draft-zone {
      margin: 7px 4px 0;
      padding: 7px;

      min-height: 70px;

      border-radius: 11px;

      overflow: hidden;
    }

    .human-draft-zone[hidden] {
      display: none !important;
    }

    .draft-header {
      margin-bottom: 5px;
    }

    .draft-title {
      font-size: 0.52rem;
    }

    .draft-count {
      font-size: 0.49rem;
    }

    .draft-cards {
      position: relative;

      min-height: 48px;
      gap: 5px;

      touch-action: none;
      -ms-touch-action: none;
    }

    .draft-card {
      min-width: 43px;
      height: 52px;

      touch-action: none;
      -ms-touch-action: none;

      user-select: none;
      -webkit-user-select: none;

      cursor: grab;

      transition:
        opacity 0.14s ease,
        transform 0.14s ease,
        box-shadow 0.14s ease;
    }

    .draft-card:active {
      cursor: grabbing;
    }

    .draft-card.dragging-draft {
      opacity: 0.24;

      transform: scale(0.95);
    }

    .draft-hint {
      margin-top: 4px;

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

    @media (max-width: 360px) {
      .human-melds-zone,
      .human-melds-zone.show {
        min-height: 63px;
      }

      .melds-scroll {
        min-height: 39px;
      }

      .table-drop-placeholder {
        min-height: 35px;
      }

      .human-draft-zone {
        min-height: 66px;
      }
    }

  
    /* =======================================
       JUGADA COMO ZONA DE DESTINO
    ======================================= */

    .human-draft-zone {
      transition:
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
    }

    .human-draft-zone.drop-active {
      border-color:
        rgba(241, 208, 109, 1);

      background:
        linear-gradient(
          180deg,
          rgba(241, 208, 109, 0.20),
          rgba(0, 0, 0, 0.07)
        );

      box-shadow:
        0 0 0 3px
        rgba(241, 208, 109, 0.14),
        0 0 21px
        rgba(241, 208, 109, 0.20);

      transform: scale(1.008);
    }

    .draft-title {
      letter-spacing: 0.45px;
    }

    .draft-hint,
    .hand-hint {
      white-space: nowrap;
    }

  

    /* =======================================
       AJUSTES DE PANTALLA
    ======================================= */

    .game-fit-shell {
      width: 100%;
      min-height: 100%;

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

      overflow: visible;
    }

    .game-settings-button {
      width: 40px;
      height: 40px;

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

      border-radius: 13px;
      border: 1px solid rgba(231, 199, 92, 0.32);

      color: #f1d06d;
      background: rgba(231, 199, 92, 0.08);

      font-size: 1rem;
      cursor: pointer;
    }

    .game-settings-button:active,
    .display-settings-close:active,
    .display-mode-option:active {
      transform: scale(0.97);
    }

    .display-settings {
      position: fixed;
      inset: 0;
      z-index: 1000;

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

      padding: 18px;
      background: rgba(0, 0, 0, 0.68);

      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }

    .display-settings[hidden] {
      display: none !important;
    }

    .display-settings-card {
      width: min(100%, 360px);
      padding: 16px;

      border-radius: 20px;
      border: 1px solid rgba(231, 199, 92, 0.35);

      background:
        linear-gradient(
          180deg,
          rgba(29, 78, 64, 0.98),
          rgba(8, 31, 25, 0.99)
        );

      box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48);
    }

    .display-settings-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;

      margin-bottom: 13px;
    }

    .display-settings-head h3 {
      color: #f1d06d;
      font-size: 1rem;
    }

    .display-settings-head p {
      margin-top: 3px;
      color: rgba(237, 243, 239, 0.58);
      font-size: 0.66rem;
    }

    .display-settings-close {
      width: 32px;
      height: 32px;
      flex: 0 0 32px;

      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.13);

      color: #f1d06d;
      background: rgba(255, 255, 255, 0.05);

      font-size: 1.25rem;
      cursor: pointer;
    }

    .display-mode-option {
      width: 100%;
      min-height: 66px;
      padding: 10px 11px;

      display: grid;
      grid-template-columns: 35px minmax(0, 1fr) 24px;
      align-items: center;
      gap: 9px;

      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.11);

      color: #edf3ef;
      background: rgba(255, 255, 255, 0.035);

      text-align: left;
      cursor: pointer;
    }

    .display-mode-option + .display-mode-option {
      margin-top: 9px;
    }

    .display-mode-option.selected {
      border-color: rgba(241, 208, 109, 0.70);
      background: rgba(241, 208, 109, 0.12);
      box-shadow: 0 0 15px rgba(241, 208, 109, 0.09);
    }

    .display-mode-icon {
      font-size: 1.35rem;
      text-align: center;
    }

    .display-mode-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .display-mode-copy strong {
      color: #f0d37b;
      font-size: 0.75rem;
    }

    .display-mode-copy small {
      color: rgba(237, 243, 239, 0.57);
      font-size: 0.59rem;
      line-height: 1.25;
    }

    .display-mode-check {
      color: transparent;
      font-size: 1rem;
      font-weight: 900;
      text-align: center;
    }

    .display-mode-option.selected .display-mode-check {
      color: #f1d06d;
    }

    /* =======================================
       MODO AJUSTAR A PANTALLA
    ======================================= */

    .game-screen.display-fit {
      overflow: hidden !important;
    }

    .game-screen.display-fit .game-fit-shell {
      height: var(--game-visual-height, 100dvh);
      min-height: 0;
      overflow: hidden;
    }

    .game-screen.display-fit .pilot-table {
      flex: 0 0 auto;
      min-height: 0;
      height: auto;
      margin: 0;

      transform-origin: top center;
      will-change: transform;
    }

    /* Compactación antes del ajuste proporcional. */

    .game-screen.display-fit .pilot-table {
      gap: 5px;
      padding:
        max(5px, env(safe-area-inset-top))
        7px
        max(5px, env(safe-area-inset-bottom));
    }

    .game-screen.display-fit .pilot-header {
      grid-template-columns: 31px 1fr 31px;
      gap: 5px;
    }

    .game-screen.display-fit .pilot-back,
    .game-screen.display-fit .game-settings-button {
      width: 30px;
      height: 30px;
      border-radius: 10px;
      font-size: 0.88rem;
    }

    .game-screen.display-fit .pilot-title {
      font-size: 0.84rem;
      line-height: 1;
    }

    .game-screen.display-fit .pilot-subtitle {
      margin-top: 2px;
      font-size: 0.50rem;
      line-height: 1.05;
    }

    .game-screen.display-fit .bots-area {
      gap: 4px;
    }

    .game-screen.display-fit .bot-seat {
      padding: 4px 3px;
      border-radius: 10px;
    }

    .game-screen.display-fit .bot-seat-title {
      font-size: 0.57rem;
      line-height: 1;
    }

    .game-screen.display-fit .bot-seat-count {
      margin-top: 1px;
      font-size: 0.44rem;
      line-height: 1.05;
    }

    .game-screen.display-fit .bot-hand {
      min-height: 23px;
      margin-top: 3px;
    }

    .game-screen.display-fit .bot-card-back {
      width: 15px;
      height: 22px;
      flex-basis: 15px;
      border-radius: 3px;
    }

    .game-screen.display-fit .bot-card-back + .bot-card-back {
      margin-left: -7px;
    }

    .game-screen.display-fit .bot-melds {
      min-height: 24px;
      max-height: 33px;
      margin-top: 3px;
      gap: 2px;
      overflow: hidden;
    }

    .game-screen.display-fit .mini-meld {
      padding: 2px 3px;
      border-radius: 5px;
    }

    .game-screen.display-fit .mini-card {
      width: 14px;
      height: 20px;
      flex-basis: 14px;
      font-size: 0.40rem;
    }

    .game-screen.display-fit .mini-card + .mini-card {
      margin-left: -5px;
    }

    .game-screen.display-fit .table-center {
      flex: 0 0 auto;
      min-height: 0;
      padding: 6px 8px;
      border-radius: 18px;
    }

    .game-screen.display-fit .turn-message {
      min-height: 15px;
      margin-bottom: 4px;
      font-size: 0.61rem;
      line-height: 1.1;
    }

    .game-screen.display-fit .piles {
      gap: 17px;
    }

    .game-screen.display-fit .pile {
      width: 64px;
    }

    .game-screen.display-fit .pile-card,
    .game-screen.display-fit .deck-card::before,
    .game-screen.display-fit .deck-card::after {
      width: 47px;
      height: 64px;
      border-radius: 7px;
    }

    .game-screen.display-fit .deck-emblem {
      width: 22px;
      height: 22px;
      font-size: 0.68rem;
    }

    .game-screen.display-fit .pile-label {
      margin-top: 4px;
      font-size: 0.53rem;
      line-height: 1;
    }

    .game-screen.display-fit .pile-count {
      margin-top: 1px;
      font-size: 0.45rem;
      line-height: 1;
    }

    .game-screen.display-fit .discard-drop-hint {
      min-height: 14px;
      margin-top: 2px;
      padding: 2px 3px;
      font-size: 0.40rem;
    }

    .game-screen.display-fit .pilot-status {
      min-height: 16px;
      max-height: 28px;
      margin-top: 4px;
      overflow: hidden;
      font-size: 0.49rem;
      line-height: 1.16;
    }

    .game-screen.display-fit .discard-choice {
      margin-top: 5px;
      padding: 6px;
      border-radius: 10px;
    }

    .game-screen.display-fit .discard-choice-text {
      margin-bottom: 5px;
      font-size: 0.56rem;
      line-height: 1.15;
    }

    .game-screen.display-fit .discard-choice-actions {
      gap: 5px;
    }

    .game-screen.display-fit .discard-choice-button {
      min-height: 31px;
      padding: 5px;
      border-radius: 9px;
      font-size: 0.51rem;
    }

    .game-screen.display-fit .new-card-choice {
      margin-top: 5px;
      padding: 6px;
      border-radius: 10px;
    }

    .game-screen.display-fit .new-card-choice-text {
      margin-bottom: 5px;
      font-size: 0.56rem;
      line-height: 1.15;
    }

    .game-screen.display-fit .new-card-choice-actions {
      gap: 5px;
    }

    .game-screen.display-fit .new-card-choice-button {
      min-height: 31px;
      padding: 5px;
      border-radius: 9px;
      font-size: 0.51rem;
    }

    .game-screen.display-fit .human-zone {
      min-height: 0;
      padding: 6px 5px;
      border-radius: 14px;
    }

    .game-screen.display-fit .human-title {
      padding: 0 3px 4px;
    }

    .game-screen.display-fit .human-name {
      font-size: 0.59rem;
    }

    .game-screen.display-fit .human-count {
      font-size: 0.48rem;
    }

    .game-screen.display-fit .human-melds-zone,
    .game-screen.display-fit .human-melds-zone.show {
      min-height: 48px;
      margin: 0 2px 4px;
      padding: 4px;
      border-radius: 8px;
    }

    .game-screen.display-fit .melds-label {
      min-height: 9px;
      margin-bottom: 2px;
      font-size: 0.40rem;
    }

    .game-screen.display-fit .melds-scroll,
    .game-screen.display-fit .human-melds-zone.empty-table .melds-scroll {
      min-height: 31px;
    }

    .game-screen.display-fit .table-drop-placeholder {
      min-height: 29px;
      padding: 3px;
      font-size: 0.40rem;
    }

    .game-screen.display-fit .table-meld {
      padding: 3px;
      border-radius: 6px;
    }

    .game-screen.display-fit .table-card {
      width: 24px;
      height: 34px;
      flex-basis: 24px;
      font-size: 0.55rem;
    }

    .game-screen.display-fit .table-card + .table-card {
      margin-left: -7px;
    }

    .game-screen.display-fit .hand-workspace {
      grid-template-columns: minmax(0, 1fr) 80px;
      gap: 5px;
    }

    .game-screen.display-fit .human-hand {
      min-height: 78px;
      padding: 16px 0 2px;
    }

    .game-screen.display-fit .playing-card {
      width: 43px;
      height: 62px;
      flex-basis: 43px;
      border-radius: 6px;
    }

    .game-screen.display-fit .human-hand .playing-card + .playing-card,
    .game-screen.display-fit .playing-card + .playing-card {
      margin-left: -14px;
    }

    .game-screen.display-fit .playing-card.lifted {
      transform: translateY(-16px);
    }

    .game-screen.display-fit .card-center-symbol {
      font-size: 1.42rem;
    }

    .game-screen.display-fit .card-corner {
      font-size: 0.60rem;
    }

    .game-screen.display-fit .special-card-slot {
      width: 80px;
      max-width: 80px;
      height: 121px;
      min-height: 121px;
      max-height: 121px;
      padding: 4px 3px;
    }

    .game-screen.display-fit .special-card-title {
      min-height: 11px;
      font-size: 0.39rem;
    }

    .game-screen.display-fit .special-card-visual {
      min-height: 61px;
      max-height: 64px;
    }

    .game-screen.display-fit .special-card-visual .playing-card {
      width: 42px;
      height: 61px;
      flex-basis: 42px;
    }

    .game-screen.display-fit .special-card-hint {
      min-height: 13px;
      max-height: 22px;
      font-size: 0.35rem;
    }

    .game-screen.display-fit
    .special-card-decision-obsolete {
      margin-top: 3px;
      gap: 3px;
    }

    .game-screen.display-fit
    .special-card-choice-obsolete {
      min-height: 23px;
      padding: 3px 1px;
      border-radius: 6px;
      font-size: 0.31rem;
    }

    .game-screen.display-fit .hand-hint {
      margin-top: 1px;
      font-size: 0.43rem;
      line-height: 1.1;
    }

    .game-screen.display-fit .human-draft-zone {
      min-height: 53px;
      margin: 4px 2px 0;
      padding: 4px;
      border-radius: 8px;
    }

    .game-screen.display-fit .draft-header {
      margin-bottom: 2px;
    }

    .game-screen.display-fit .draft-title,
    .game-screen.display-fit .draft-count {
      font-size: 0.41rem;
    }

    .game-screen.display-fit .draft-cards {
      min-height: 38px;
      gap: 3px;
    }

    .game-screen.display-fit .draft-card {
      min-width: 34px;
      height: 41px;
      font-size: 0.64rem;
    }

    .game-screen.display-fit .draft-hint {
      display: none;
    }

    .game-screen.display-fit .pilot-actions {
      gap: 4px;
    }

    .game-screen.display-fit .action-row,
    .game-screen.display-fit .action-row-secondary {
      gap: 5px;
    }

    .game-screen.display-fit .action-row-secondary .compact-action,
    .game-screen.display-fit .pilot-action {
      min-height: 34px;
      padding: 4px 5px;
      border-radius: 9px;
    }

    .game-screen.display-fit .action-row .action-icon {
      font-size: 0.75rem;
    }

    .game-screen.display-fit .action-row .action-label {
      font-size: 0.48rem;
      line-height: 1;
    }

    /* =======================================
       MODO TAMAÑO GRANDE
    ======================================= */

    .game-screen.display-large {
      overflow-y: auto !important;
      overscroll-behavior: contain;
    }

    .game-screen.display-large .game-fit-shell {
      min-height: 100%;
      height: auto !important;
      overflow: visible;
    }

    .game-screen.display-large .pilot-table {
      width: 100% !important;
      max-width: 480px;
      min-height: 100vh;
      min-height: 100dvh;
      transform: none !important;
    }

  
    /* =======================================
       CORRECCIONES RESPONSIVE 2
    ======================================= */

    /*
      El mazo conserva un espacio real debajo de la carta.
      Así la palabra MAZO nunca queda encima del reverso.
    */

    .pile {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
    }

    .deck-card {
      position: relative;
      z-index: 3;

      margin-bottom: 8px;

      touch-action: manipulation;
      -ms-touch-action: manipulation;

      pointer-events: auto;
    }

    .pile-label,
    .pile-count {
      position: relative;
      z-index: 4;

      pointer-events: none;
    }

    .deck-card.deck-locked {
      opacity: 0.72;
      filter: saturate(0.78);
    }

    /*
      El contador de los últimos 20 segundos será
      claramente visible incluso en modo compacto.
    */

    .exchange-countdown.critical {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      min-width: 28px;
      min-height: 20px;
      padding: 2px 5px;

      border-radius: 7px;

      color: #ffffff;
      background: #d93434;

      font-size: 0.72rem !important;
      font-weight: 1000;
      line-height: 1;

      text-shadow: none;

      box-shadow:
        0 0 0 2px rgba(255, 92, 92, 0.20),
        0 0 12px rgba(255, 72, 72, 0.35);
    }

    /*
      MESA y POSIBLE JUGADA permanecen disponibles.
    */

    .human-melds-zone,
    .human-melds-zone.show {
      display: block !important;
    }

    .human-draft-zone,
    .human-draft-zone[hidden] {
      display: block !important;

      min-height: 66px;
    }

    .human-draft-zone.can-organize {
      border-color:
        rgba(241, 208, 109, 0.46);

      background:
        linear-gradient(
          180deg,
          rgba(241, 208, 109, 0.08),
          rgba(0, 0, 0, 0.06)
        );
    }

    .draft-empty-placeholder {
      min-height: 42px;

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

      border-radius: 8px;
      border:
        1px dashed rgba(241, 208, 109, 0.26);

      color:
        rgba(237, 243, 239, 0.44);

      background:
        rgba(255, 255, 255, 0.018);

      font-size: 0.50rem;
      font-weight: 800;
      letter-spacing: 0.28px;
      text-align: center;
    }

    .human-melds-zone.drop-active,
    .human-draft-zone.drop-active {
      transform: scale(1.008);
    }

    /*
      La MESA acepta únicamente una combinación que
      el usuario decide bajar expresamente.
    */

    .human-melds-zone.ready-to-lay {
      border-color:
        rgba(101, 215, 169, 0.45);
    }

    .human-melds-zone.ready-to-lay
    .table-drop-placeholder {
      color:
        rgba(194, 242, 222, 0.78);

      border-color:
        rgba(101, 215, 169, 0.34);
    }

    /*
      En modo ajustado ambos cuadros permanecen compactos.
    */

    .game-screen.display-fit .deck-card {
      margin-bottom: 7px;
    }

    .game-screen.display-fit .pile-label {
      margin-top: 0;
    }

    .game-screen.display-fit
    .exchange-countdown.critical {
      min-width: 25px;
      min-height: 18px;
      padding: 2px 4px;

      font-size: 0.64rem !important;
    }

    .game-screen.display-fit
    .human-draft-zone,
    .game-screen.display-fit
    .human-draft-zone[hidden] {
      display: block !important;

      min-height: 48px;
      margin-top: 4px;
    }

    .game-screen.display-fit
    .draft-empty-placeholder {
      min-height: 35px;

      font-size: 0.40rem;
    }

  
    /* =======================================
       POSIBLE JUGADA LIBRE Y ESTABLE
    ======================================= */

    /*
      La zona del jugador usa flujo normal.
      Ningún cuadro puede montarse sobre los botones.
    */

    .human-zone {
      display: flex;
      flex-direction: column;

      min-width: 0;
      overflow: hidden;
    }

    .hand-workspace {
      flex: 0 0 auto;
      min-width: 0;
    }

    .human-draft-zone,
    .human-draft-zone[hidden] {
      display: block !important;

      box-sizing: border-box;

      width: calc(100% - 8px);
      height: 78px;
      min-height: 78px;
      max-height: 78px;
      flex: 0 0 78px;

      margin: 6px 4px 0;
      padding: 6px;

      overflow: hidden;
    }

    .draft-header {
      height: 15px;
      min-height: 15px;
      margin-bottom: 3px;
    }

    .draft-cards {
      width: 100%;
      height: 45px;
      min-height: 45px;
      max-height: 45px;

      display: flex;
      align-items: center;
      gap: 4px;

      overflow-x: auto;
      overflow-y: hidden;

      scrollbar-width: none;
      overscroll-behavior-x: contain;
    }

    .draft-cards::-webkit-scrollbar {
      display: none;
    }

    .draft-card {
      min-width: 39px;
      width: 39px;
      height: 44px;
      flex: 0 0 39px;

      padding: 0 4px;
    }

    .draft-empty-placeholder {
      width: 100%;
      height: 42px;
      min-height: 42px;
      flex: 0 0 100%;
    }

    .draft-hint {
      display: none !important;
    }

    /*
      Los botones siempre quedan después de la bandeja,
      sin márgenes negativos ni superposición.
    */

    .pilot-actions {
      position: relative;
      z-index: 8;

      flex: 0 0 auto;

      margin-top: 0;
      padding-top: 0;

      background:
        linear-gradient(
          180deg,
          rgba(5, 25, 20, 0),
          rgba(5, 25, 20, 0.16)
        );
    }

    .action-row,
    .action-row-primary,
    .action-row-secondary {
      position: relative;
      z-index: 9;
    }

    /*
      El aviso ya no tapa los botones inferiores.
    */

    .game-screen.display-fit .game-toast {
      bottom:
        calc(
          max(62px, env(safe-area-inset-bottom) + 54px)
        );

      width: min(76%, 270px);
      padding: 7px 10px;

      border-radius: 11px;

      font-size: 0.59rem;
      line-height: 1.15;
    }

    /* =======================================
       COMPACTACIÓN EN AJUSTAR A PANTALLA
    ======================================= */

    .game-screen.display-fit .human-draft-zone,
    .game-screen.display-fit
    .human-draft-zone[hidden] {
      display: block !important;

      width: calc(100% - 4px);
      height: 57px;
      min-height: 57px;
      max-height: 57px;
      flex-basis: 57px;

      margin: 4px 2px 0;
      padding: 4px;
    }

    .game-screen.display-fit .draft-header {
      height: 11px;
      min-height: 11px;
      margin-bottom: 2px;
    }

    .game-screen.display-fit .draft-title,
    .game-screen.display-fit .draft-count {
      font-size: 0.39rem;
      line-height: 1;
    }

    .game-screen.display-fit .draft-cards {
      height: 37px;
      min-height: 37px;
      max-height: 37px;
      gap: 3px;
    }

    .game-screen.display-fit .draft-card {
      min-width: 31px;
      width: 31px;
      height: 36px;
      flex-basis: 31px;

      padding: 0 3px;

      font-size: 0.58rem;
    }

    .game-screen.display-fit
    .draft-empty-placeholder {
      height: 35px;
      min-height: 35px;

      font-size: 0.39rem;
    }

    /*
      Aunque haya muchas cartas, la bandeja nunca crece:
      se desplazan horizontalmente dentro de ella.
    */

    .human-draft-zone.has-many-cards
    .draft-cards {
      justify-content: flex-start;
    }

  
    /* =======================================
       ARRASTRE ESTABLE EN CELULAR
    ======================================= */

    .playing-card,
    .draft-card,
    .human-hand,
    .human-draft-zone,
    .special-card-slot {
      touch-action: none;
      -ms-touch-action: none;
    }

    .drag-bundle {
      z-index: 99999 !important;
      pointer-events: none !important;
      user-select: none;
      -webkit-user-select: none;
    }

    .special-card-slot.exchange-drop-ready {
      border-color: rgba(241, 208, 109, 0.82);
      background:
        linear-gradient(
          180deg,
          rgba(241, 208, 109, 0.15),
          rgba(0, 0, 0, 0.05)
        );
      box-shadow:
        0 0 0 2px rgba(241, 208, 109, 0.10),
        0 0 18px rgba(241, 208, 109, 0.16);
    }

    .special-card-slot.exchange-drop-ready.drop-active {
      border-color: rgba(241, 208, 109, 1);
      background:
        linear-gradient(
          180deg,
          rgba(241, 208, 109, 0.30),
          rgba(0, 0, 0, 0.07)
        );
      box-shadow:
        0 0 0 3px rgba(241, 208, 109, 0.18),
        0 0 26px rgba(241, 208, 109, 0.28);
      transform: scale(1.025);
    }

    .human-draft-zone.exchange-organize-ready {
      border-color: rgba(241, 208, 109, 0.38);
    }

  

    /* =======================================
       PERFIL, PROGRESIÓN Y RECOMPENSAS
    ======================================= */

    .btn-profile {
      min-height: 54px;
      flex-direction: column;
      gap: 2px;

      color: #f5e6aa;
      background:
        linear-gradient(
          180deg,
          rgba(31, 91, 72, 0.88),
          rgba(13, 53, 42, 0.92)
        );

      border:
        1px solid rgba(241, 208, 109, 0.42);

      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 7px 16px rgba(0, 0, 0, 0.18);
    }

    .btn-profile-main {
      font-size: 0.88rem;
      font-weight: 900;
      letter-spacing: 0.8px;
      line-height: 1;
    }

    .btn-profile-summary {
      color: rgba(239, 244, 241, 0.70);
      font-size: 0.50rem;
      font-weight: 700;
      letter-spacing: 0.25px;
      line-height: 1;
      text-transform: none;
    }

    .profile-modal-card {
      max-width: 430px;
      padding-bottom: 18px;
    }

    .profile-hero {
      margin: 14px 14px 10px;
      padding: 16px;

      border-radius: 20px;
      border: 1px solid rgba(241, 208, 109, 0.25);

      background:
        radial-gradient(
          circle at 18% 0%,
          rgba(241, 208, 109, 0.16),
          transparent 38%
        ),
        rgba(255, 255, 255, 0.035);
    }

    .profile-identity {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
    }

    .profile-avatar {
      width: 58px;
      height: 58px;

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

      border-radius: 18px;
      border: 1px solid rgba(255, 239, 173, 0.72);

      color: #291a05;
      background:
        linear-gradient(180deg, #f5dc87, #c8972b);

      font-size: 1.55rem;
      font-weight: 1000;

      box-shadow:
        0 8px 18px rgba(200, 151, 43, 0.24);
    }

    .profile-name {
      margin: 0 0 4px;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      color: #fff5cf;
      font-size: 1.12rem;
      font-weight: 950;
    }

    .profile-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .profile-badge {
      display: inline-flex;
      align-items: center;

      min-height: 22px;
      padding: 4px 8px;

      border-radius: 999px;
      border: 1px solid rgba(241, 208, 109, 0.22);

      color: rgba(246, 247, 244, 0.82);
      background: rgba(0, 0, 0, 0.13);

      font-size: 0.55rem;
      font-weight: 800;
    }

    .profile-level-row {
      margin-top: 15px;

      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;

      font-size: 0.66rem;
      font-weight: 850;
    }

    .profile-level-label {
      color: #f2d375;
    }

    .profile-xp-label {
      color: rgba(237, 244, 240, 0.68);
    }

    .profile-progress {
      height: 9px;
      margin-top: 7px;

      overflow: hidden;

      border-radius: 999px;
      background: rgba(0, 0, 0, 0.28);

      box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.38);
    }

    .profile-progress-fill {
      width: 0%;
      height: 100%;

      border-radius: inherit;
      background:
        linear-gradient(90deg, #b7851f, #f4d86e);

      transition: width 0.35s ease;
    }

    .profile-wallet {
      margin-top: 12px;
      padding: 10px 12px;

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

      border-radius: 14px;
      border: 1px solid rgba(241, 208, 109, 0.17);

      background: rgba(0, 0, 0, 0.14);
    }

    .profile-wallet span:first-child {
      color: rgba(237, 244, 240, 0.66);
      font-size: 0.62rem;
      font-weight: 750;
    }

    .profile-wallet strong {
      color: #f4d86e;
      font-size: 0.92rem;
      font-weight: 950;
    }

    .profile-section {
      margin: 10px 14px 0;
      padding: 13px;

      border-radius: 17px;
      border: 1px solid rgba(255, 255, 255, 0.08);

      background: rgba(255, 255, 255, 0.025);
    }

    .profile-section-title {
      margin: 0 0 10px;

      color: #efd071;
      font-size: 0.68rem;
      font-weight: 950;
      letter-spacing: 0.55px;
      text-transform: uppercase;
    }

    .profile-stat-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
    }

    .profile-stat {
      min-width: 0;
      padding: 9px 5px;

      border-radius: 12px;
      background: rgba(0, 0, 0, 0.13);

      text-align: center;
    }

    .profile-stat strong {
      display: block;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      color: #f5f3e8;
      font-size: 0.82rem;
      font-weight: 950;
    }

    .profile-stat span {
      display: block;
      margin-top: 3px;

      color: rgba(237, 244, 240, 0.56);
      font-size: 0.46rem;
      font-weight: 750;
      line-height: 1.1;
      text-transform: uppercase;
    }

    .profile-style-row {
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr) 58px;
      gap: 7px;
      align-items: center;

      margin-top: 8px;
    }

    .profile-style-row:first-of-type {
      margin-top: 0;
    }

    .profile-style-name,
    .profile-style-value {
      font-size: 0.54rem;
      font-weight: 800;
    }

    .profile-style-name {
      color: rgba(241, 245, 242, 0.78);
    }

    .profile-style-value {
      color: #ead17d;
      text-align: right;
    }

    .profile-style-track {
      height: 7px;
      overflow: hidden;

      border-radius: 999px;
      background: rgba(0, 0, 0, 0.25);
    }

    .profile-style-fill {
      width: 0%;
      height: 100%;

      border-radius: inherit;
      background:
        linear-gradient(90deg, #4d9f7c, #8bd2ac);
    }

    .profile-special-grid {
      display: grid;
      grid-template-columns:
        repeat(5, minmax(0, 1fr));
      gap: 6px;
    }

    .profile-special-stat {
      min-width: 0;
      padding: 8px 3px 7px;

      border-radius: 12px;
      border:
        1px solid rgba(241, 208, 109, 0.09);

      background:
        linear-gradient(
          180deg,
          rgba(241, 208, 109, 0.055),
          rgba(0, 0, 0, 0.12)
        );

      text-align: center;
    }

    .profile-special-stat.combined {
      border-color:
        rgba(241, 208, 109, 0.20);

      background:
        linear-gradient(
          180deg,
          rgba(241, 208, 109, 0.10),
          rgba(0, 0, 0, 0.12)
        );
    }

    .profile-special-icon {
      display: block;

      min-height: 18px;

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

    .profile-special-stat strong {
      display: block;
      margin-top: 4px;

      color: #f5df91;
      font-size: 0.78rem;
      font-weight: 950;
    }

    .profile-special-stat > span:last-child {
      display: block;
      margin-top: 3px;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      color:
        rgba(237, 244, 240, 0.52);

      font-size: 0.39rem;
      font-weight: 800;
      line-height: 1.1;
      text-transform: uppercase;
    }

    .profile-special-favorite {
      margin-top: 8px;
      padding: 9px 10px;

      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;

      border-radius: 12px;

      background:
        rgba(0, 0, 0, 0.13);
    }

    .profile-special-favorite span {
      color:
        rgba(237, 244, 240, 0.54);

      font-size: 0.48rem;
      font-weight: 800;
      text-transform: uppercase;
    }

    .profile-special-favorite strong {
      min-width: 0;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      color: #f4e2a4;
      font-size: 0.64rem;
      font-weight: 900;
      text-align: right;
    }

    @media (max-width: 360px) {
      .profile-special-grid {
        gap: 4px;
      }

      .profile-special-stat {
        padding:
          7px 2px 6px;
      }

      .profile-special-stat > span:last-child {
        font-size: 0.34rem;
      }
    }

    .profile-favorites {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
    }

    .profile-favorite {
      min-width: 0;
      padding: 9px;

      border-radius: 12px;
      background: rgba(0, 0, 0, 0.13);
    }

    .profile-favorite span {
      display: block;

      color: rgba(237, 244, 240, 0.54);
      font-size: 0.47rem;
      font-weight: 750;
      text-transform: uppercase;
    }

    .profile-favorite strong {
      display: block;
      margin-top: 4px;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      color: #f4e2a4;
      font-size: 0.66rem;
      font-weight: 900;
    }

    .profile-local-note {
      margin: 12px 18px 0;

      color: rgba(237, 244, 240, 0.46);
      font-size: 0.52rem;
      line-height: 1.35;
      text-align: center;
    }

    /* Recompensa al terminar una partida */

    .result-card {
      max-height: 92vh;
      max-height: 92dvh;
      overflow-y: auto;
    }

    .result-reward {
      margin: 14px 0 2px;
      padding: 12px;

      border-radius: 16px;
      border: 1px solid rgba(241, 208, 109, 0.25);

      background:
        linear-gradient(
          180deg,
          rgba(241, 208, 109, 0.10),
          rgba(255, 255, 255, 0.025)
        );
    }

    .result-reward[hidden] {
      display: none !important;
    }

    .result-reward-head {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .result-reward-pill {
      padding: 8px;

      border-radius: 11px;
      background: rgba(0, 0, 0, 0.16);

      color: #f5df93;
      font-size: 0.72rem;
      font-weight: 950;
      text-align: center;
    }

    .result-level-line {
      margin-top: 10px;

      display: flex;
      justify-content: space-between;
      gap: 8px;

      color: rgba(240, 245, 242, 0.75);
      font-size: 0.56rem;
      font-weight: 800;
    }

    .result-progress {
      height: 8px;
      margin-top: 6px;
      overflow: hidden;

      border-radius: 999px;
      background: rgba(0, 0, 0, 0.25);
    }

    .result-progress-fill {
      width: 0%;
      height: 100%;

      border-radius: inherit;
      background:
        linear-gradient(90deg, #c08e25, #f6dd79);
    }

    .result-reward-detail {
      margin: 9px 0 0;

      color: rgba(240, 245, 242, 0.62);
      font-size: 0.53rem;
      line-height: 1.35;
      text-align: center;
    }

    .result-level-up {
      margin-top: 8px;
      padding: 7px 9px;

      border-radius: 10px;

      color: #302006;
      background:
        linear-gradient(180deg, #f5dc82, #c9972b);

      font-size: 0.60rem;
      font-weight: 1000;
      text-align: center;
    }

    .result-level-up[hidden] {
      display: none !important;
    }

    @media (max-width: 350px) {
      .profile-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .profile-style-row {
        grid-template-columns: 63px minmax(0, 1fr) 51px;
      }
    }

  
    /* =======================================
       CRONÓMETRO Y PAUSA
    ======================================= */

    .pilot-header {
      grid-template-columns:
        42px minmax(0, 1fr) auto;
    }

    .game-header-tools {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 5px;
    }

    .match-clock {
      min-width: 58px;
      height: 36px;
      padding: 0 8px;

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

      border-radius: 12px;
      border:
        1px solid rgba(231, 199, 92, 0.30);

      color: #f5dc8d;
      background:
        rgba(231, 199, 92, 0.075);

      font-size: 0.68rem;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.3px;

      box-shadow:
        inset 0 0 12px rgba(241, 208, 109, 0.035);
    }

    .match-clock-icon {
      font-size: 0.66rem;
    }

    .game-pause-button,
    .game-settings-button {
      width: 36px;
      height: 36px;
      flex: 0 0 36px;

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

      border-radius: 12px;
      border:
        1px solid rgba(231, 199, 92, 0.32);

      color: #f1d06d;
      background:
        rgba(231, 199, 92, 0.08);

      font-size: 0.88rem;
      cursor: pointer;
    }

    .game-pause-button:disabled {
      opacity: 0.38;
      cursor: default;
    }

    .game-pause-button:not(:disabled):active,
    .game-settings-button:active {
      transform: scale(0.96);
    }

    .pause-overlay {
      position: fixed;
      inset: 0;
      z-index: 1600;

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

      padding:
        max(18px, env(safe-area-inset-top))
        18px
        max(18px, env(safe-area-inset-bottom));

      background:
        rgba(2, 12, 9, 0.82);

      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .pause-overlay[hidden] {
      display: none !important;
    }

    .pause-card {
      width: min(100%, 330px);
      padding: 22px 18px 18px;

      display: flex;
      flex-direction: column;
      align-items: stretch;

      border-radius: 24px;
      border:
        1px solid rgba(241, 208, 109, 0.40);

      color: #edf3ef;
      background:
        linear-gradient(
          180deg,
          rgba(28, 78, 63, 0.99),
          rgba(6, 27, 21, 0.995)
        );

      text-align: center;

      box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.56),
        inset 0 0 24px rgba(241, 208, 109, 0.035);
    }

    .pause-icon {
      font-size: 2rem;
      line-height: 1;
    }

    .pause-card h2 {
      margin-top: 9px;

      color: #f1d06d;
      font-size: 1.05rem;
      letter-spacing: 0.7px;
    }

    .pause-clock {
      margin-top: 12px;

      color: #fff3c8;
      font-size: 1.7rem;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
      letter-spacing: 1px;
    }

    .pause-card p {
      margin: 8px 0 16px;

      color: rgba(237, 243, 239, 0.66);
      font-size: 0.69rem;
      line-height: 1.35;
    }

    .pause-action {
      width: 100%;
      min-height: 44px;
      padding: 10px 12px;

      border-radius: 13px;
      border:
        1px solid rgba(255, 255, 255, 0.12);

      color: #edf3ef;
      background:
        rgba(255, 255, 255, 0.045);

      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.35px;

      cursor: pointer;
    }

    .pause-action + .pause-action {
      margin-top: 8px;
    }

    .pause-action.primary {
      border-color:
        rgba(241, 208, 109, 0.58);

      color: #241704;
      background:
        linear-gradient(
          180deg,
          #f4d875,
          #dcb54f
        );
    }

    .pause-action:active {
      transform: scale(0.98);
    }

    .game-screen.display-fit .pilot-header {
      grid-template-columns:
        31px minmax(0, 1fr) auto;
    }

    .game-screen.display-fit
    .game-header-tools {
      gap: 3px;
    }

    .game-screen.display-fit
    .match-clock {
      min-width: 46px;
      height: 29px;
      padding: 0 5px;

      border-radius: 9px;

      font-size: 0.52rem;
    }

    .game-screen.display-fit
    .match-clock-icon {
      display: none;
    }

    .game-screen.display-fit
    .game-pause-button,
    .game-screen.display-fit
    .game-settings-button {
      width: 29px;
      height: 29px;
      flex-basis: 29px;

      border-radius: 9px;

      font-size: 0.72rem;
    }

    /* =======================================
       PALOS VISUALMENTE EQUILIBRADOS
    ======================================= */

    .playing-card.suit-heart
    .card-center-symbol {
      transform: scale(0.82);
    }

    .playing-card.suit-club
    .card-center-symbol {
      transform: scale(0.78);
    }

    .playing-card.suit-heart
    .card-corner span:last-child,
    .playing-card.suit-club
    .card-corner span:last-child {
      display: inline-block;
      transform: scale(0.86);
      transform-origin: center;
    }

    .discard-face.suit-heart
    .discard-symbol {
      transform: scale(0.82);
    }

    .discard-face.suit-club
    .discard-symbol {
      transform: scale(0.78);
    }

    .discard-face.suit-heart
    .discard-value span:last-child,
    .discard-face.suit-club
    .discard-value span:last-child {
      display: inline-block;
      transform: scale(0.86);
      transform-origin: center;
    }

    .draft-card-value,
    .draft-card-suit,
    .mini-card-value,
    .mini-card-suit {
      display: inline-block;
    }

    .draft-card {
      gap: 1px;
    }

    .draft-card.suit-heart
    .draft-card-suit,
    .mini-card.suit-heart
    .mini-card-suit {
      transform: scale(0.82);
    }

    .draft-card.suit-club
    .draft-card-suit,
    .mini-card.suit-club
    .mini-card-suit {
      transform: scale(0.78);
    }

  
    /* =======================================
       COMBINACIONES LEGIBLES DE LOS BOTS
    ======================================= */

    .bot-melds {
      width: 100%;
      min-width: 0;

      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-start;
      gap: 3px;

      overflow: hidden;
    }

    .bot-meld-ribbon {
      box-sizing: border-box;

      max-width: 100%;
      min-height: 19px;
      padding: 2px 5px;

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

      border-radius: 6px;
      border:
        1px solid rgba(231, 199, 92, 0.55);

      color: #172019;
      background:
        linear-gradient(
          180deg,
          #fffdf5,
          #e8e3d5
        );

      white-space: nowrap;

      box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.28);
    }

    .bot-meld-token {
      min-width: 0;

      display: inline-flex;
      align-items: baseline;
      justify-content: center;
      gap: 0;

      color: #172019;

      font-family: Georgia, serif;
      font-size: 0.55rem;
      font-weight: 900;
      line-height: 1;
    }

    .bot-meld-token.red {
      color: #c53e3e;
    }

    .bot-meld-value,
    .bot-meld-suit {
      display: inline-block;
    }

    .bot-meld-suit {
      margin-left: 1px;

      font-size: 0.82em;
      line-height: 1;

      transform-origin: center;
    }

    .bot-meld-token.suit-heart
    .bot-meld-suit {
      transform: scale(0.74);
    }

    .bot-meld-token.suit-club
    .bot-meld-suit {
      transform: scale(0.68);
    }

    .bot-meld-ribbon.long {
      gap: 2px;
      padding-left: 4px;
      padding-right: 4px;
    }

    .bot-meld-ribbon.long
    .bot-meld-token {
      font-size: 0.49rem;
    }

    .bot-meld-ribbon.very-long {
      gap: 1px;
      padding-left: 3px;
      padding-right: 3px;
    }

    .bot-meld-ribbon.very-long
    .bot-meld-token {
      font-size: 0.41rem;
    }

    /*
      En el modo ajustado caben dos combinaciones,
      pero los símbolos ya no se montan unos sobre otros.
    */

    .game-screen.display-fit
    .bot-melds {
      min-height: 27px;
      max-height: 34px;
      margin-top: 3px;
      gap: 2px;

      overflow: hidden;
    }

    .game-screen.display-fit
    .bot-meld-ribbon {
      min-height: 15px;
      padding: 1px 4px;

      gap: 2px;

      border-radius: 5px;
    }

    .game-screen.display-fit
    .bot-meld-token {
      font-size: 0.43rem;
    }

    .game-screen.display-fit
    .bot-meld-ribbon.long {
      gap: 1.5px;
      padding-left: 3px;
      padding-right: 3px;
    }

    .game-screen.display-fit
    .bot-meld-ribbon.long
    .bot-meld-token {
      font-size: 0.38rem;
    }

    .game-screen.display-fit
    .bot-meld-ribbon.very-long {
      gap: 1px;
      padding-left: 2px;
      padding-right: 2px;
    }

    .game-screen.display-fit
    .bot-meld-ribbon.very-long
    .bot-meld-token {
      font-size: 0.32rem;
    }

    /*
      El perfil gana dos tarjetas, por lo que en móviles
      conserva una cuadrícula estable de dos columnas.
    */

    .profile-stat-grid {
      grid-template-columns:
        repeat(2, minmax(0, 1fr));
    }

    @media (min-width: 430px) {
      .profile-stat-grid {
        grid-template-columns:
          repeat(4, minmax(0, 1fr));
      }
    }

  
    /* =======================================
       BOTS · TODAS LAS JUGADAS VISIBLES
    ======================================= */

    /*
      Algunos estilos antiguos de AJUSTAR A PANTALLA
      limitaban .bot-melds a ~42px y ocultaban la tercera
      combinación. En mesa pública nunca debemos esconder
      cartas ya bajadas.
    */
    .game-screen.display-fit
    .bot-melds {
      min-height: 0 !important;
      max-height: none !important;
      height: auto !important;
      overflow: visible !important;
    }

    .game-screen.display-fit
    .bot-melds.many-melds {
      gap: 2px !important;
    }

    .game-screen.display-fit
    .bot-melds.many-melds
    .bot-meld-ribbon {
      min-height: 14px !important;
      padding: 1px 3px !important;
      gap: 1.5px !important;
    }

    .game-screen.display-fit
    .bot-melds.many-melds
    .bot-meld-token {
      font-size: 0.40rem !important;
    }


    /* =======================================
       PARTIDA GUARDADA OFFLINE
    ======================================= */

    .btn-continue {
      border-color: rgba(241, 208, 109, 0.72);
      color: #251805;
      background:
        linear-gradient(
          180deg,
          #f5dc7e,
          #d7ad43
        );
      box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.24),
        0 0 20px rgba(241, 208, 109, 0.18);
    }

    .btn-continue[hidden] {
      display: none !important;
    }

    .continue-main,
    .continue-sub {
      display: block;
    }

    .continue-main {
      font-size: 0.76rem;
      font-weight: 1000;
      letter-spacing: 0.45px;
    }

    .continue-sub {
      margin-top: 3px;
      color: rgba(37, 24, 5, 0.68);
      font-size: 0.50rem;
      font-weight: 800;
    }

    .pause-action.danger {
      border-color: rgba(255, 111, 111, 0.34);
      color: #ffc7c7;
      background: rgba(142, 31, 31, 0.16);
    }

    /* =======================================
       PALOS GRANDES REALMENTE EQUILIBRADOS
    ======================================= */

    .playing-card.suit-heart
    .card-center-symbol {
      font-size: 1.14rem !important;
      transform: none !important;
    }

    .playing-card.suit-club
    .card-center-symbol {
      font-size: 0.98rem !important;
      transform: none !important;
    }

    .playing-card.suit-heart
    .card-corner span:last-child {
      font-size: 0.78em;
      transform: none !important;
    }

    .playing-card.suit-club
    .card-corner span:last-child {
      font-size: 0.70em;
      transform: none !important;
    }

    .discard-face.suit-heart
    .discard-symbol {
      font-size: 1.20rem !important;
      transform: none !important;
    }

    .discard-face.suit-club
    .discard-symbol {
      font-size: 1.02rem !important;
      transform: none !important;
    }

    .discard-face.suit-heart
    .discard-value span:last-child {
      font-size: 0.78em;
      transform: none !important;
    }

    .discard-face.suit-club
    .discard-value span:last-child {
      font-size: 0.70em;
      transform: none !important;
    }

    /* =======================================
       MANOS FINALES DE LOS BOTS
    ======================================= */

    .bot-hand.revealed {
      width: 100%;
      min-height: 20px;
      max-height: none;
      margin-top: 4px;

      display: grid !important;
      grid-template-columns:
        repeat(5, minmax(0, 18px));
      grid-auto-rows: 21px;
      align-content: center;
      justify-content: center;
      gap: 2px;

      overflow: visible;
    }

    .bot-hand.revealed .mini-card,
    .bot-hand.revealed .mini-card + .mini-card {
      box-sizing: border-box;
      width: 18px;
      height: 21px;
      min-width: 18px;
      margin: 0 !important;
      padding: 0 1px;

      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0;

      border: 1px solid rgba(31, 37, 32, 0.16);
      border-radius: 3px;

      font-size: 0.42rem;
      line-height: 1;
      white-space: nowrap;
    }

    .bot-hand.revealed
    .mini-card-suit {
      margin-left: 0;
      font-size: 0.76em;
    }

    .bot-hand.revealed
    .mini-card.suit-heart
    .mini-card-suit {
      transform: scale(0.72);
    }

    .bot-hand.revealed
    .mini-card.suit-club
    .mini-card-suit {
      transform: scale(0.64);
    }

    .game-screen.display-fit
    .bot-hand.revealed {
      min-height: 17px;
      grid-template-columns:
        repeat(5, minmax(0, 15px));
      grid-auto-rows: 18px;
      gap: 1px;
    }

    .game-screen.display-fit
    .bot-hand.revealed .mini-card,
    .game-screen.display-fit
    .bot-hand.revealed
    .mini-card + .mini-card {
      width: 15px;
      height: 18px;
      min-width: 15px;
      font-size: 0.34rem;
    }

      /* MESA se ilumina al recibir una carta útil. */
    .human-melds-zone.drop-active {
      border-color:
        rgba(101, 215, 169, 0.90) !important;

      background:
        linear-gradient(
          180deg,
          rgba(101, 215, 169, 0.16),
          rgba(0, 0, 0, 0.04)
        ) !important;

      box-shadow:
        0 0 0 2px
        rgba(101, 215, 169, 0.12),
        0 0 18px
        rgba(101, 215, 169, 0.13);
    }

  
    /* =======================================
       SORTEO VISIBLE DEL PRIMER TURNO
    ======================================= */

    .game-screen.opening-lottery
    .table-center {
      border-color:
        rgba(241, 208, 109, 0.72);

      box-shadow:
        0 0 0 2px
        rgba(241, 208, 109, 0.10),
        0 0 24px
        rgba(241, 208, 109, 0.14);
    }

    .game-screen.opening-lottery
    #turnMessage {
      color: #ffe995;

      animation:
        openingLotteryPulse
        0.42s ease-in-out infinite alternate;
    }

    @keyframes openingLotteryPulse {
      from {
        opacity: 0.74;
        transform: scale(0.98);
      }

      to {
        opacity: 1;
        transform: scale(1.035);
      }
    }

    @media (
      prefers-reduced-motion:
      reduce
    ) {
      .game-screen.opening-lottery
      #turnMessage {
        animation: none;
      }
    }

  
    /*
      Las cartas tocadas antes de arrastrar el descarte
      se destacan con mayor claridad.
    */

    .game-screen
    .playing-card.lifted {
      box-shadow:
        0 0 0 3px
        rgba(241, 208, 109, 0.72),
        0 9px 18px
        rgba(0, 0, 0, 0.28);

      transform:
        translateY(-10px);
    }

    .game-screen.display-fit
    .playing-card.lifted {
      transform:
        translateY(-7px);
    }

  
    /* =======================================
       ARMADO MANUAL DIRECTAMENTE EN MESA
    ======================================= */

    .table-building-group {
      box-sizing: border-box;

      width: max-content;
      max-width: 100%;
      padding: 4px 6px;

      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 3px;

      border-radius: 9px;
      border:
        1px dashed rgba(241, 208, 109, 0.72);

      background:
        linear-gradient(
          180deg,
          rgba(241, 208, 109, 0.13),
          rgba(255, 255, 255, 0.025)
        );

      box-shadow:
        inset 0 0 12px
        rgba(241, 208, 109, 0.035);
    }

    .table-building-label {
      color: #f1d06d;

      font-size: 0.42rem;
      font-weight: 1000;
      line-height: 1;
      letter-spacing: 0.45px;
    }

    .table-building-cards {
      max-width: 100%;

      display: flex;
      align-items: center;
      gap: 4px;

      overflow-x: auto;
      overflow-y: hidden;

      scrollbar-width: none;
    }

    .table-building-cards::-webkit-scrollbar {
      display: none;
    }

    .table-building-card {
      min-width: 35px;
      height: 33px;
      flex: 0 0 35px;

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

      border:
        1px solid rgba(38, 50, 43, 0.24);

      color: #172019;
      background:
        linear-gradient(
          180deg,
          #fffdf5,
          #e9e4d7
        );

      font-family: Georgia, serif;
      font-size: 0.66rem;
      font-weight: 900;
      line-height: 1;

      box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.22);

      touch-action: manipulation;
    }

    .table-building-card.red {
      color: #c33d3d;
    }

    .table-building-card.required-card {
      border-color:
        rgba(231, 172, 57, 0.95);

      box-shadow:
        0 0 0 2px
        rgba(241, 208, 109, 0.20),
        0 3px 8px
        rgba(0, 0, 0, 0.24);
    }

    .table-building-value,
    .table-building-suit {
      display: inline-block;
    }

    .table-building-card.suit-heart
    .table-building-suit {
      transform: scale(0.78);
    }

    .table-building-card.suit-club
    .table-building-suit {
      transform: scale(0.72);
    }

    .game-screen.display-fit
    .table-building-group {
      padding: 3px 5px;
      gap: 2px;

      border-radius: 7px;
    }

    .game-screen.display-fit
    .table-building-label {
      font-size: 0.34rem;
    }

    .game-screen.display-fit
    .table-building-cards {
      gap: 3px;
    }

    .game-screen.display-fit
    .table-building-card {
      min-width: 28px;
      height: 27px;
      flex-basis: 28px;

      font-size: 0.52rem;
    }

  
    /* =======================================
       EVENTO DE RECLAMO EN MESA
    ======================================= */

    .human-pass-claim-note {
      width: 100%;
      margin: 0 0 7px;
      padding: 7px 9px;

      display: flex;
      flex-direction: column;
      gap: 2px;

      border-radius: 9px;
      border:
        1px solid
        rgba(222, 92, 82, 0.42);

      background:
        rgba(103, 27, 23, 0.28);

      color:
        rgba(255, 231, 226, 0.92);

      font-family:
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
    }

    .human-pass-claim-note strong {
      color:
        #ffd06c;

      font-size: 0.46rem;
      letter-spacing: 0.25px;
    }

    .human-pass-claim-note span {
      font-size: 0.42rem;
      line-height: 1.2;
    }

    .game-screen.display-fit
    .human-pass-claim-note {
      margin-bottom: 4px;
      padding: 5px 7px;
    }

    .game-screen.display-fit
    .human-pass-claim-note strong {
      font-size: 0.39rem;
    }

    .game-screen.display-fit
    .human-pass-claim-note span {
      font-size: 0.36rem;
    }



    .claim-event-banner {
      width: calc(100% - 18px);
      margin: 8px auto 10px;
      padding: 10px 12px;

      display: flex;
      align-items: center;
      gap: 10px;

      border-radius: 14px;
      border:
        1px solid
        rgba(238, 104, 92, 0.72);

      color:
        #ffe3df;

      background:
        linear-gradient(
          180deg,
          rgba(118, 24, 20, 0.92),
          rgba(62, 15, 14, 0.94)
        );

      box-shadow:
        0 8px 24px
          rgba(0, 0, 0, 0.28),
        0 0 0 1px
          rgba(255, 255, 255, 0.03)
          inset;

      opacity: 0;
      transform:
        translateY(-6px)
        scale(0.985);

      transition:
        opacity 0.20s ease,
        transform 0.20s ease;
    }

    .claim-event-banner.show {
      opacity: 1;
      transform:
        translateY(0)
        scale(1);
    }

    .claim-event-icon {
      flex: 0 0 auto;

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

    .claim-event-copy {
      min-width: 0;

      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .claim-event-copy strong {
      color:
        #ffd36c;

      font-size: 0.70rem;
      letter-spacing: 0.35px;
    }

    .claim-event-copy span {
      color:
        rgba(255, 240, 236, 0.90);

      font-size: 0.55rem;
      line-height: 1.25;
    }

    .claim-event-banner[hidden] {
      display: none !important;
    }

    /* =======================================
       DESMOCHE POR BLOQUES
    ======================================= */

    .discard-pile-zone.table-card-discard-target {
      border-color:
        rgba(241, 208, 109, 0.96) !important;

      box-shadow:
        0 0 0 3px
          rgba(241, 208, 109, 0.15),
        0 0 22px
          rgba(241, 208, 109, 0.30) !important;

      transform:
        translateY(-2px)
        scale(1.018);
    }

    .discard-pile-zone.table-card-discard-target
    .discard-drop-hint {
      color:
        #ffe79a !important;
    }



    .table-meld.protected-correct-block {
      border-color:
        rgba(101, 215, 169, 0.28);
    }

    .table-meld.protected-correct-block
    .human-block-label {
      color:
        rgba(121, 225, 183, 0.54);
    }



    /*
      Ranura visual de inserción.
      No decide nada: refleja el insertIndex real que ya usa
      el motor del desmoche.
    */
    .table-meld.source-meld.table-drop-target,
    .table-building-group.active-block-drop-target {
      box-shadow:
        0 0 0 2px rgba(241, 208, 109, 0.16),
        0 0 16px rgba(241, 208, 109, 0.20) !important;
    }

    .block-insertion-marker {
      position: fixed;
      z-index: 100000;

      width: 4px;

      transform:
        translateX(-50%);

      border-radius: 999px;

      background:
        linear-gradient(
          180deg,
          #fff3ae,
          #f1c84d,
          #c99322
        );

      box-shadow:
        0 0 0 2px
          rgba(241, 208, 109, 0.16),
        0 0 12px
          rgba(241, 208, 109, 0.86);

      pointer-events: none;

      animation:
        blockInsertionPulse
        0.72s ease-in-out infinite alternate;
    }

    .block-insertion-dot {
      position: absolute;
      left: 50%;
      top: -5px;

      width: 10px;
      height: 10px;

      transform:
        translateX(-50%);

      border-radius: 50%;

      border:
        2px solid
        rgba(255, 248, 204, 0.95);

      background:
        #d6a92e;

      box-shadow:
        0 0 10px
        rgba(241, 208, 109, 0.82);
    }

    @keyframes blockInsertionPulse {
      from {
        opacity: 0.72;
        filter: brightness(0.95);
      }

      to {
        opacity: 1;
        filter: brightness(1.18);
      }
    }

    @media (
      prefers-reduced-motion:
      reduce
    ) {
      .block-insertion-marker {
        animation: none;
      }
    }



    .human-empty-block-placeholder {
      width: 76px;
      min-width: 76px;
      height: 36px;
      min-height: 36px;

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

      border-radius: 7px;
      border:
        1px dashed
        rgba(241, 208, 109, 0.42);

      color:
        rgba(237, 243, 239, 0.44);

      background:
        rgba(255, 255, 255, 0.02);

      font-size: 0.31rem;
      font-weight: 900;
      letter-spacing: 0.28px;
      text-align: center;
    }

    .game-screen.display-fit
    .human-empty-block-placeholder {
      width: 58px;
      min-width: 58px;
      height: 29px;
      min-height: 29px;

      font-size: 0.26rem;
    }



    .table-building-group.active-block-drop-target {
      transform: translateY(-3px) scale(1.035);
      border-color: rgba(101, 215, 169, 0.98) !important;
      box-shadow:
        0 0 0 2px rgba(101, 215, 169, 0.18),
        0 0 18px rgba(101, 215, 169, 0.22) !important;
    }

    .table-building-card.dragging-table-card,
    .table-card.dragging-table-card {
      opacity: 0.25;
    }



    .table-meld {
      position: relative;
      padding-top: 13px;
    }

    .human-block-label {
      position: absolute;
      top: 2px;
      left: 5px;

      color:
        rgba(237, 243, 239, 0.42);

      font-family:
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

      font-size: 0.34rem;
      font-weight: 900;
      letter-spacing: 0.35px;
      line-height: 1;
      pointer-events: none;
    }

    .game-screen.display-fit
    .table-meld {
      padding-top: 11px;
    }

    .game-screen.display-fit
    .human-block-label {
      top: 2px;
      left: 4px;
      font-size: 0.29rem;
    }

    /* =======================================
       TRADICIONAL · MESA FÍSICA MÁS LEGIBLE
    ======================================= */

    .human-melds-zone.traditional-table-mode {
      min-height: 82px;
      padding: 7px 7px 8px;
    }

    .human-melds-zone.traditional-table-mode
    .melds-scroll {
      min-height: 58px;
      gap: 10px;

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

      overflow-x: auto;
      overflow-y: hidden;

      scroll-snap-type: x proximity;
    }

    .human-melds-zone.traditional-table-mode
    .table-meld,
    .human-melds-zone.traditional-table-mode
    .table-building-group {
      flex: 0 0 auto;

      padding: 5px 6px;

      border-radius: 10px;

      scroll-snap-align: start;
    }

    .human-melds-zone.traditional-table-mode
    .table-card {
      width: 38px;
      height: 54px;
      flex: 0 0 38px;

      border-radius: 6px;

      font-size: 0.80rem;

      box-shadow:
        0 3px 7px
        rgba(0, 0, 0, 0.25);
    }

    .human-melds-zone.traditional-table-mode
    .table-card +
    .table-card {
      margin-left: -7px;
    }

    .human-melds-zone.traditional-table-mode
    .table-building-cards {
      gap: 2px;
    }

    .human-melds-zone.traditional-table-mode
    .table-building-card {
      min-width: 38px;
      width: 38px;
      height: 54px;
      flex: 0 0 38px;

      border-radius: 6px;

      font-size: 0.80rem;

      touch-action: none;
      -ms-touch-action: none;

      cursor: grab;
    }

    .human-melds-zone.traditional-table-mode
    .table-building-card:active,
    .human-melds-zone.traditional-table-mode
    .table-card.interactive:active {
      cursor: grabbing;
    }

    /*
      Una jugada correcta queda cerrada. El aspecto es
      deliberadamente discreto: no queremos llenar la mesa
      de candados ni mensajes.
    */
    .human-melds-zone.traditional-table-mode
    .traditional-locked-meld
    .table-card {
      cursor: default;
    }

    .human-melds-zone.traditional-table-mode
    .traditional-locked-meld {
      border-color:
        rgba(231, 199, 92, 0.22);

      background:
        rgba(255, 255, 255, 0.035);
    }

    /*
      En AJUSTAR A PANTALLA siguen siendo mayores que antes,
      pero sin hacer crecer toda la interfaz.
    */
    .game-screen.display-fit
    .human-melds-zone.traditional-table-mode {
      min-height: 58px;
    }

    .game-screen.display-fit
    .human-melds-zone.traditional-table-mode
    .melds-scroll {
      min-height: 43px;
      gap: 7px;
    }

    .game-screen.display-fit
    .human-melds-zone.traditional-table-mode
    .table-card,
    .game-screen.display-fit
    .human-melds-zone.traditional-table-mode
    .table-building-card {
      width: 31px;
      min-width: 31px;
      height: 43px;
      flex-basis: 31px;

      font-size: 0.64rem;
    }

    .game-screen.display-fit
    .human-melds-zone.traditional-table-mode
    .table-card +
    .table-card {
      margin-left: -6px;
    }


    /* =======================================
       TRADICIONAL · DESCARTE LIBRE
    ======================================= */

    .game-screen.traditional-mode-ui
    .discard-choice {
      display: none !important;
    }

    .game-screen.traditional-mode-ui
    .discard-choice-text {
      display: none !important;
    }

    .special-card-slot.drop-active {
      border-color:
        rgba(241, 208, 109, 0.95) !important;

      box-shadow:
        0 0 0 2px
          rgba(241, 208, 109, 0.16),
        0 0 18px
          rgba(241, 208, 109, 0.22);
    }

    .discard-pile-zone.drop-active {
      border-color:
        rgba(101, 215, 169, 0.92) !important;

      box-shadow:
        0 0 0 2px
          rgba(101, 215, 169, 0.14),
        0 0 18px
          rgba(101, 215, 169, 0.20);
    }

    /* =======================================
       REGLAS ESPECIALES
    ======================================= */
    .special-rule-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .special-rule-option{min-height:57px;padding:8px 9px;display:flex;align-items:center;gap:8px;border-radius:13px;border:1px solid rgba(255,255,255,.11);color:rgba(237,243,239,.68);background:rgba(255,255,255,.038);font-family:inherit;text-align:left;cursor:pointer;transition:transform .12s ease,border-color .18s ease,background .18s ease}
    .special-rule-option:active{transform:scale(.975)}
    .special-rule-option.selected{color:#fff1b9;border-color:rgba(241,208,109,.72);background:linear-gradient(180deg,rgba(241,208,109,.21),rgba(241,208,109,.075));box-shadow:0 0 15px rgba(241,208,109,.09)}
    .special-rule-icon{width:25px;flex:0 0 25px;font-size:1.18rem;text-align:center}
    .special-rule-option strong,.special-rule-option small{display:block}
    .special-rule-option strong{font-size:.67rem;line-height:1.15}
    .special-rule-option small{margin-top:3px;color:rgba(237,243,239,.47);font-size:.49rem;line-height:1.2}
    .special-rule-option.selected small{color:rgba(255,241,185,.68)}
    .special-rule-hint,.special-rules-summary{color:rgba(237,243,239,.52);font-size:.59rem;line-height:1.35;text-align:center}
    .special-rule-hint{margin-top:8px}.special-rules-summary{margin-top:5px;color:rgba(241,208,109,.72)}
    .result-special-badges{margin:12px 0 3px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
    .result-special-badge{padding:6px 9px;border-radius:999px;border:1px solid rgba(241,208,109,.48);color:#fff0b5;background:rgba(241,208,109,.10);font-size:.62rem;font-weight:900}
    .special-help-list{display:grid;gap:8px}.special-help-rule{padding:9px 10px;border-radius:12px;border:1px solid rgba(241,208,109,.15);background:rgba(255,255,255,.025)}
    .special-help-rule strong,.special-help-rule span{display:block}.special-help-rule strong{color:#f1d06d;font-size:.70rem}.special-help-rule span{margin-top:4px;color:rgba(237,243,239,.67);font-size:.61rem;line-height:1.42}
    @media(max-width:350px){.special-rule-options{grid-template-columns:1fr}}

  
    /* =======================================
       JUEGO COMPLETO DEL BOT GANADOR
    ======================================= */

    .bot-seat.completed-game {
      border-color:
        rgba(241, 208, 109, 0.92);

      background:
        linear-gradient(
          180deg,
          rgba(241, 208, 109, 0.15),
          rgba(255, 255, 255, 0.035)
        );

      box-shadow:
        0 0 0 2px
        rgba(241, 208, 109, 0.10),
        0 0 18px
        rgba(241, 208, 109, 0.16);
    }

    .bot-seat.completed-game
    .bot-seat-title {
      color: #ffe28a;
    }

    .bot-seat.completed-game
    .winner-empty-hand {
      display: none !important;
    }

    .bot-seat.completed-game
    .bot-melds,
    .game-screen.display-fit
    .bot-seat.completed-game
    .bot-melds {
      min-height: 0;
      max-height: none;
      height: auto;

      margin-top: 5px;

      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-start;
      gap: 3px;

      overflow: visible;
    }

    .bot-seat.completed-game
    .bot-meld-ribbon {
      max-width: 100%;
      flex: 0 0 auto;
    }

    .bot-seat.completed-game
    .bot-melds.many-melds
    .bot-meld-ribbon {
      min-height: 14px;
      padding:
        1px 3px;

      gap: 1.5px;
    }

    .bot-seat.completed-game
    .bot-melds.many-melds
    .bot-meld-token {
      font-size: 0.40rem;
    }

    .bot-complete-total {
      margin-top: 1px;
      padding: 2px 6px;

      border-radius: 999px;
      border:
        1px solid
        rgba(241, 208, 109, 0.46);

      color: #ffe69a;
      background:
        rgba(241, 208, 109, 0.10);

      font-size: 0.38rem;
      font-weight: 900;
      line-height: 1;
      letter-spacing: 0.25px;
    }

    .game-screen.display-fit
    .bot-seat.completed-game {
      padding:
        4px 3px 5px;
    }

    .game-screen.display-fit
    .bot-seat.completed-game
    .bot-melds {
      gap: 2px;
      margin-top: 3px;
    }

    .game-screen.display-fit
    .bot-seat.completed-game
    .bot-meld-ribbon {
      min-height: 13px;
      padding:
        1px 3px;

      gap: 1px;
    }

    .game-screen.display-fit
    .bot-seat.completed-game
    .bot-meld-token {
      font-size: 0.37rem;
    }

    .game-screen.display-fit
    .bot-seat.completed-game
    .bot-meld-ribbon.long
    .bot-meld-token,
    .game-screen.display-fit
    .bot-seat.completed-game
    .bot-meld-ribbon.very-long
    .bot-meld-token {
      font-size: 0.32rem;
    }

    .game-screen.display-fit
    .bot-complete-total {
      font-size: 0.32rem;
      padding:
        2px 5px;
    }

    /* =======================================
       RESALTADO DE GANADOR Y DEMÁS EN GRIS
    ======================================= */

    .bot-seat.result-winner {
      border-color: rgba(241, 208, 109, 0.95);
      background: linear-gradient(180deg, rgba(241, 208, 109, 0.18), rgba(255, 255, 255, 0.04));
      box-shadow: 0 0 0 2px rgba(241, 208, 109, 0.16), 0 0 20px rgba(241, 208, 109, 0.18);
    }

    .bot-seat.result-winner .bot-seat-title {
      color: #ffe28a;
    }

    .bot-seat.result-muted,
    .human-zone.result-muted {
      filter: grayscale(0.9) saturate(0.55);
      opacity: 0.46;
    }

    .bot-seat.result-muted {
      border-color: rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.025);
      box-shadow: none;
    }

    .human-zone.result-winner {
      border-color: rgba(241, 208, 109, 0.95);
      background: linear-gradient(180deg, rgba(241, 208, 109, 0.12), rgba(255, 255, 255, 0.03));
      box-shadow: 0 0 0 2px rgba(241, 208, 109, 0.12), 0 0 22px rgba(241, 208, 109, 0.12);
    }

    .human-zone.result-winner .human-name,
    .human-zone.result-winner .human-count {
      color: #ffe28a;
    }

    .game-screen.display-fit .bot-seat.result-muted,
    .game-screen.display-fit .human-zone.result-muted {
      opacity: 0.42;
    }

    .game-screen.display-fit .bot-seat.result-winner,
    .game-screen.display-fit .human-zone.result-winner {
      box-shadow: 0 0 0 1px rgba(241, 208, 109, 0.14), 0 0 14px rgba(241, 208, 109, 0.14);
    }

  
    /* =======================================
       PARTIDAS POR RONDAS
    ======================================= */

    .round-overlay {
      position: fixed;
      inset: 0;
      z-index: 1580;

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

      padding:
        max(18px, env(safe-area-inset-top))
        18px
        max(18px, env(safe-area-inset-bottom));

      background:
        rgba(2, 12, 9, 0.84);

      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .round-overlay[hidden] {
      display: none !important;
    }

    .round-card {
      width: min(100%, 345px);
      padding: 22px 18px 18px;

      border-radius: 24px;
      border:
        1px solid rgba(241, 208, 109, 0.46);

      color: #edf3ef;
      background:
        linear-gradient(
          180deg,
          rgba(30, 82, 65, 0.995),
          rgba(6, 27, 21, 0.998)
        );

      text-align: center;

      box-shadow:
        0 25px 65px rgba(0, 0, 0, 0.60),
        inset 0 0 26px rgba(241, 208, 109, 0.04);
    }

    .round-emoji {
      font-size: 2.15rem;
      line-height: 1;
    }

    .round-card h2 {
      margin-top: 10px;

      color: #f1d06d;
      font-size: 1.08rem;
      letter-spacing: 0.65px;
    }

    .round-description {
      margin-top: 9px;

      color:
        rgba(237, 243, 239, 0.72);

      font-size: 0.71rem;
      line-height: 1.42;
    }

    .round-next-box {
      margin: 17px 0 12px;
      padding: 13px 12px;

      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;

      border-radius: 15px;
      border:
        1px solid rgba(241, 208, 109, 0.44);

      color: #fff0b4;
      background:
        linear-gradient(
          180deg,
          rgba(241, 208, 109, 0.18),
          rgba(241, 208, 109, 0.07)
        );
    }

    .round-next-box span {
      font-size: 0.78rem;
      font-weight: 900;
      letter-spacing: 0.35px;
    }

    .round-next-box strong {
      color: #ffe075;
      font-size: 0.86rem;
      letter-spacing: 0.45px;
    }

    .round-note {
      margin-bottom: 15px;

      color:
        rgba(237, 243, 239, 0.54);

      font-size: 0.61rem;
      line-height: 1.40;
    }

    .round-action {
      width: 100%;
      min-height: 45px;
      padding: 10px 12px;

      border-radius: 13px;
      border:
        1px solid rgba(255, 255, 255, 0.13);

      color: #edf3ef;
      background:
        rgba(255, 255, 255, 0.045);

      font-family: inherit;
      font-size: 0.70rem;
      font-weight: 900;
      letter-spacing: 0.30px;

      cursor: pointer;
    }

    .round-action + .round-action {
      margin-top: 8px;
    }

    .round-action.primary {
      border-color:
        rgba(241, 208, 109, 0.64);

      color: #2b1b05;
      background:
        linear-gradient(
          180deg,
          #f5da78,
          #dcb54f
        );
    }

    .round-action:active {
      transform: scale(0.98);
    }

    .game-screen.round-ending
    .table-center {
      border-color:
        rgba(241, 208, 109, 0.68);

      box-shadow:
        0 0 0 2px
        rgba(241, 208, 109, 0.08),
        0 0 22px
        rgba(241, 208, 109, 0.11);
    }

    .game-screen.display-fit
    .round-card {
      width: min(100%, 320px);
      padding: 18px 15px 15px;
    }

  
    /* =======================================
       DESMOCHE MANUAL ARRASTRABLE
    ======================================= */

    .table-card.interactive {
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
    }

    .table-card.interactive.dragging-table-card {
      z-index: 30;
      opacity: 0.42;

      transform:
        translateY(-8px)
        scale(0.98);
    }

    /*
      TRADICIONAL · feedback físico de reordenamiento.
      No revela si la jugada es correcta o incorrecta:
      solamente deja claro qué carta está siendo manipulada.
    */
    .table-building-card.traditional-table-grabbed,
    .table-card.interactive.traditional-table-grabbed {
      z-index: 35;

      transform:
        translateY(-8px)
        scale(1.06);

      border-color:
        rgba(241, 208, 109, 0.98) !important;

      box-shadow:
        0 8px 16px
          rgba(0, 0, 0, 0.38),
        0 0 0 3px
          rgba(241, 208, 109, 0.20),
        0 0 18px
          rgba(241, 208, 109, 0.34) !important;

      filter: brightness(1.08);

      transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        border-color 0.12s ease,
        filter 0.12s ease;
    }

    .table-building-cards.traditional-reordering {
      padding-top: 7px;
      padding-bottom: 4px;

      transition:
        padding 0.12s ease;
    }

    .table-building-card.traditional-drop-near {
      box-shadow:
        0 0 0 2px
          rgba(101, 215, 169, 0.70),
        0 0 14px
          rgba(101, 215, 169, 0.22);
    }

    .human-melds {
      align-items: flex-start;
    }

    .traditional-open-group,
    .table-building-group.traditional-new-meld,
    .table-meld {
      vertical-align: top;
    }

    .traditional-open-group {
      order: 1;
      margin: 4px 3px;
      padding: 6px 7px;
      border-radius: 11px;
      border:
        1px solid
        rgba(255, 255, 255, 0.10);
      background:
        rgba(255, 255, 255, 0.025);
    }

    .table-building-group.traditional-new-meld {
      order: 3;
      position: relative;
      margin: 4px 3px;
      padding: 6px 7px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.10);
      background: rgba(255, 255, 255, 0.025);
    }

    .table-building-group.traditional-new-meld
    .table-building-label {
      color: rgba(241, 208, 109, 0.70);
    }

    .traditional-table-drag-flyer {
      position: fixed;
      z-index: 1900;
      width: 48px;
      height: 70px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 7px;
      border: 2px solid rgba(241, 208, 109, 0.96);
      color: #182019;
      background: linear-gradient(145deg, #fffdf5, #e9e4d6);
      box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.46),
        0 0 0 3px rgba(241, 208, 109, 0.16),
        0 0 22px rgba(241, 208, 109, 0.28);
      font-family: Georgia, serif;
      font-size: 0.9rem;
      font-weight: 900;
      pointer-events: none;
      transform:
        translate(-50%, -62%)
        rotate(-2deg)
        scale(1.04);
    }

    .traditional-table-drag-flyer.red {
      color: #c53e3e;
    }

    .table-building-card.traditional-settle {
      animation:
        traditionalCardSettle
        0.20s ease-out;
    }

    @keyframes traditionalCardSettle {
      0% {
        transform:
          translateY(-7px)
          scale(1.05);
      }

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

    /* =======================================
       DESMOCHE GLOBAL · DESTINO POR MODO
    ======================================= */

    .game-screen:not(.mode-traditional)
    .table-meld.table-drop-target {
      padding-left: 8px;
      padding-right: 8px;

      transform: translateY(-3px) scale(1.035);
      transition:
        transform 0.10s ease,
        border-color 0.10s ease,
        box-shadow 0.10s ease;

      transform: translateY(-2px);
    }

    .game-screen.mode-beginner
    .table-meld.table-drop-target {
      border-color: rgba(101, 215, 169, 0.95) !important;
      box-shadow:
        0 0 0 2px rgba(101, 215, 169, 0.20),
        0 0 18px rgba(101, 215, 169, 0.22) !important;
    }

    .game-screen.mode-intermediate
    .table-meld.table-drop-target {
      border-color: rgba(101, 215, 169, 0.70) !important;
      box-shadow:
        0 0 0 2px rgba(101, 215, 169, 0.10) !important;
    }

    .table-meld.table-drop-target {
      outline:
        2px solid rgba(101, 215, 169, 0.22);
      outline-offset: 2px;

      border-color:
        rgba(101, 215, 169, 0.98);

      background:
        rgba(101, 215, 169, 0.16);

      box-shadow:
        0 0 0 3px
        rgba(101, 215, 169, 0.16),
        0 0 18px
        rgba(101, 215, 169, 0.18);

      transform: translateY(-2px);
    }

    .human-melds-zone.table-rearrange-active {
      border-color:
        rgba(241, 208, 109, 0.78);

      box-shadow:
        inset 0 0 0 2px
        rgba(241, 208, 109, 0.08),
        0 0 18px
        rgba(241, 208, 109, 0.10);
    }

    .table-meld {
      transition:
        transform 0.14s ease,
        border-color 0.14s ease,
        background 0.14s ease,
        box-shadow 0.14s ease;
    }

  
    /* =======================================
       REGISTRO / AUDITORÍA DE JUGADAS
    ======================================= */

    .audit-open-option {
      margin-top: 12px;
      border-color:
        rgba(241, 208, 109, 0.20);
    }

    .audit-arrow {
      opacity: 1;
      color: #f1d06d;
      font-size: 1.15rem;
    }

    .audit-overlay {
      position: fixed;
      inset: 0;
      z-index: 1700;

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

      padding:
        max(16px, env(safe-area-inset-top))
        14px
        max(16px, env(safe-area-inset-bottom));

      background:
        rgba(1, 10, 7, 0.88);

      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .audit-overlay[hidden] {
      display: none !important;
    }

    .audit-card {
      width: min(100%, 390px);
      max-height: min(82vh, 650px);

      display: flex;
      flex-direction: column;

      border-radius: 22px;
      border:
        1px solid rgba(241, 208, 109, 0.36);

      color: #edf4ef;

      background:
        linear-gradient(
          180deg,
          rgba(18, 59, 46, 0.995),
          rgba(4, 23, 17, 0.998)
        );

      box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.66);
    }

    .audit-head {
      padding: 16px 15px 12px;

      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;

      border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
    }

    .audit-head h3 {
      margin: 0;

      color: #f1d06d;
      font-size: 0.82rem;
      letter-spacing: 0.4px;
    }

    .audit-head p {
      margin: 5px 0 0;

      color:
        rgba(237, 244, 239, 0.52);

      font-size: 0.55rem;
    }

    .audit-close {
      width: 34px;
      height: 34px;
      flex: 0 0 34px;

      border-radius: 10px;
      border:
        1px solid rgba(255, 255, 255, 0.12);

      color: #edf4ef;
      background:
        rgba(255, 255, 255, 0.045);

      font-size: 1.05rem;
      font-family: inherit;
    }

    .audit-list {
      min-height: 180px;
      padding: 11px;

      display: flex;
      flex-direction: column;
      gap: 7px;

      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .audit-empty {
      margin: auto;
      padding: 24px 16px;

      color:
        rgba(237, 244, 239, 0.46);

      font-size: 0.62rem;
      line-height: 1.45;
      text-align: center;
    }

    .audit-entry {
      padding: 9px 10px;

      border-radius: 12px;
      border:
        1px solid rgba(255, 255, 255, 0.07);

      background:
        rgba(255, 255, 255, 0.035);
    }

    .audit-entry.mandatory {
      border-color:
        rgba(241, 208, 109, 0.34);

      background:
        rgba(241, 208, 109, 0.09);
    }

    .audit-entry.warning {
      border-color:
        rgba(226, 104, 87, 0.38);

      background:
        rgba(226, 104, 87, 0.09);
    }

    .audit-entry.success {
      border-color:
        rgba(101, 215, 169, 0.30);

      background:
        rgba(101, 215, 169, 0.08);
    }

    .audit-entry-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;

      color:
        rgba(237, 244, 239, 0.38);

      font-size: 0.42rem;
      font-weight: 800;
      text-transform: uppercase;
    }

    .audit-entry-message {
      margin-top: 5px;

      color:
        rgba(247, 249, 247, 0.84);

      font-size: 0.59rem;
      line-height: 1.38;
    }

    .audit-entry.mandatory
    .audit-entry-message {
      color: #ffe7a0;
      font-weight: 850;
    }


    .audit-full-rounds {
      padding:
        0 11px 11px;

      display: flex;
      flex-direction: column;
      gap: 8px;

      overflow-y: auto;
    }

    .audit-full-title {
      margin:
        4px 1px 0;

      color:
        rgba(241, 208, 109, 0.78);

      font-size: 0.49rem;
      font-weight: 900;
      letter-spacing: 0.35px;
      text-transform: uppercase;
    }

    .audit-round-details {
      border-radius: 12px;
      border:
        1px solid rgba(241, 208, 109, 0.15);

      background:
        rgba(0, 0, 0, 0.13);

      overflow: hidden;
    }

    .audit-round-details[open] {
      border-color:
        rgba(241, 208, 109, 0.34);
    }

    .audit-round-details summary {
      padding: 10px;

      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;

      color: #e9d88f;
      font-size: 0.57rem;
      font-weight: 900;

      cursor: pointer;
      list-style: none;
    }

    .audit-round-details summary::-webkit-details-marker {
      display: none;
    }

    .audit-round-status {
      color:
        rgba(237, 244, 239, 0.48);

      font-size: 0.42rem;
      font-weight: 800;
      text-align: right;
    }

    .audit-round-details.locked summary {
      color:
        rgba(237, 244, 239, 0.52);
    }

    .audit-round-content {
      margin: 0;
      padding:
        10px;

      max-height: 280px;
      overflow: auto;

      border-top:
        1px solid rgba(255, 255, 255, 0.07);

      color:
        rgba(240, 245, 242, 0.76);

      background:
        rgba(0, 0, 0, 0.16);

      font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

      font-size: 0.47rem;
      line-height: 1.48;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .audit-round-lock-note {
      padding:
        10px;

      border-top:
        1px solid rgba(255, 255, 255, 0.06);

      color:
        rgba(237, 244, 239, 0.48);

      font-size: 0.52rem;
      line-height: 1.42;
    }

    .audit-actions {
      padding: 10px 12px 13px;

      border-top:
        1px solid rgba(255, 255, 255, 0.07);
    }

    .audit-action {
      width: 100%;
      min-height: 42px;

      border-radius: 12px;
      border:
        1px solid rgba(241, 208, 109, 0.28);

      color: #f2dc8c;
      background:
        rgba(241, 208, 109, 0.07);

      font-family: inherit;
      font-size: 0.60rem;
      font-weight: 900;
      letter-spacing: 0.25px;
    }


  
    /* =======================================
       AUDITORÍA COMPACTA POR RONDA
    ======================================= */

    /*
      El registro cronológico continúa guardándose,
      pero ya no ocupa una lista adicional encima de
      las rondas.
    */
    .audit-list {
      display: none !important;
    }

    .audit-full-rounds {
      padding: 11px;
      gap: 9px;
    }

    .audit-full-title {
      margin: 0 1px 2px;

      font-size: 0.55rem;
    }

    .audit-round-details {
      flex: 0 0 auto;
    }

    .audit-round-details summary {
      min-height: 46px;
      padding: 10px 11px;
    }

    .audit-round-summary-left {
      min-width: 0;

      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .audit-round-summary-left strong {
      color: #ead688;
      font-size: 0.61rem;
    }

    .audit-round-summary-left small {
      color:
        rgba(237, 244, 239, 0.43);

      font-size: 0.42rem;
      font-weight: 750;
    }

    .audit-round-compact {
      padding: 10px;

      border-top:
        1px solid rgba(255, 255, 255, 0.07);
    }

    .audit-compact-block {
      padding: 8px 9px;

      border-radius: 10px;

      background:
        rgba(255, 255, 255, 0.032);
    }

    .audit-compact-block +
    .audit-compact-block {
      margin-top: 7px;
    }

    .audit-compact-block h4 {
      margin: 0 0 5px;

      color:
        rgba(241, 208, 109, 0.80);

      font-size: 0.45rem;
      letter-spacing: 0.28px;
      text-transform: uppercase;
    }

    .audit-compact-block p {
      margin: 0;

      color:
        rgba(239, 245, 241, 0.70);

      font-size: 0.50rem;
      line-height: 1.45;
    }

    .audit-compact-hands {
      display: grid;
      grid-template-columns:
        repeat(2, minmax(0, 1fr));
      gap: 6px;
    }

    .audit-compact-hand {
      min-width: 0;
      padding: 7px;

      border-radius: 9px;

      background:
        rgba(0, 0, 0, 0.12);
    }

    .audit-compact-hand strong {
      display: block;
      margin-bottom: 4px;

      color: #ede2b1;
      font-size: 0.47rem;
    }

    .audit-compact-hand span {
      color:
        rgba(238, 244, 240, 0.63);

      font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

      font-size: 0.44rem;
      line-height: 1.42;
      word-break: break-word;
    }

    .audit-compact-events {
      max-height: 185px;
      padding-right: 2px;

      display: flex;
      flex-direction: column;
      gap: 5px;

      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .audit-compact-event {
      padding: 7px 8px;

      border-left:
        2px solid rgba(241, 208, 109, 0.28);

      border-radius: 0 8px 8px 0;

      color:
        rgba(239, 245, 241, 0.67);

      background:
        rgba(0, 0, 0, 0.11);

      font-size: 0.47rem;
      line-height: 1.42;
    }

    .audit-compact-event strong {
      color: #e9d78f;
    }

    .audit-round-copy {
      width: 100%;
      min-height: 38px;
      margin-top: 8px;

      border-radius: 10px;
      border:
        1px solid rgba(241, 208, 109, 0.26);

      color: #efdc92;
      background:
        rgba(241, 208, 109, 0.065);

      font-family: inherit;
      font-size: 0.54rem;
      font-weight: 900;
    }

    .audit-control-ok {
      color: #80ddb8 !important;
    }

    .audit-control-warning {
      color: #f09b89 !important;
    }


  
    /* =======================================
       AUDITORÍA: PARTIDAS > RONDAS
    ======================================= */

    .audit-match-details {
      flex: 0 0 auto;

      border-radius: 15px;
      border:
        1px solid rgba(241, 208, 109, 0.24);

      background:
        linear-gradient(
          180deg,
          rgba(241, 208, 109, 0.055),
          rgba(0, 0, 0, 0.12)
        );

      overflow: hidden;
    }

    .audit-match-details[open] {
      border-color:
        rgba(241, 208, 109, 0.46);
    }

    .audit-match-details > summary {
      min-height: 56px;
      padding: 11px 12px;

      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;

      cursor: pointer;
      list-style: none;
    }

    .audit-match-details > summary::-webkit-details-marker {
      display: none;
    }

    .audit-match-summary-left {
      min-width: 0;

      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .audit-match-summary-left strong {
      color: #f0d778;
      font-size: 0.68rem;
      letter-spacing: 0.25px;
    }

    .audit-match-summary-left small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      color:
        rgba(237, 244, 239, 0.48);

      font-size: 0.43rem;
      font-weight: 750;
    }

    .audit-match-status {
      flex: 0 0 auto;
      max-width: 42%;

      color:
        rgba(237, 244, 239, 0.58);

      font-size: 0.45rem;
      font-weight: 850;
      line-height: 1.25;
      text-align: right;
    }

    .audit-match-status.active {
      color: #8ce2bd;
    }

    .audit-match-rounds {
      padding:
        0 9px 10px;

      display: flex;
      flex-direction: column;
      gap: 7px;

      border-top:
        1px solid rgba(255, 255, 255, 0.06);
    }

    .audit-match-meta {
      padding: 9px 3px 2px;

      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;

      color:
        rgba(237, 244, 239, 0.42);

      font-size: 0.42rem;
      font-weight: 750;
    }

    .audit-match-rounds
    .audit-round-details {
      background:
        rgba(0, 0, 0, 0.14);
    }

    .audit-match-copy {
      width: 100%;
      min-height: 39px;

      border-radius: 10px;
      border:
        1px solid rgba(241, 208, 109, 0.25);

      color: #efdc91;
      background:
        rgba(241, 208, 109, 0.065);

      font-family: inherit;
      font-size: 0.53rem;
      font-weight: 900;
    }


  
    /* =======================================
       AUDITORÍA DESDE EL MENÚ PRINCIPAL
    ======================================= */

    .btn-audit-menu {
      min-height: 50px;
      padding:
        8px 16px;

      flex-direction: column;
      gap: 3px;

      color: #dbece5;

      background:
        linear-gradient(
          180deg,
          rgba(34, 92, 73, 0.76),
          rgba(12, 48, 38, 0.86)
        );

      border:
        1px solid rgba(241, 208, 109, 0.30);

      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 7px 16px rgba(0, 0, 0, 0.16);
    }

    .audit-menu-main {
      color: #ead789;

      font-size: 0.72rem;
      font-weight: 950;
      letter-spacing: 0.65px;
      line-height: 1;
    }

    .audit-menu-sub {
      color:
        rgba(235, 244, 239, 0.57);

      font-size: 0.45rem;
      font-weight: 700;
      letter-spacing: 0.16px;
      line-height: 1;
      text-transform: none;
    }

    .audit-round-copy-actions {
      margin-top: 8px;

      display: grid;
      grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, 0.85fr);
      gap: 6px;
    }

    .audit-round-copy,
    .audit-round-technical {
      width: 100%;
      min-height: 38px;
      margin: 0;

      border-radius: 10px;

      font-family: inherit;
      font-size: 0.48rem;
      font-weight: 900;
      line-height: 1.15;
    }

    .audit-round-copy {
      border:
        1px solid rgba(241, 208, 109, 0.28);

      color: #f0dc91;
      background:
        rgba(241, 208, 109, 0.075);
    }

    .audit-round-technical {
      border:
        1px solid rgba(175, 210, 196, 0.16);

      color:
        rgba(222, 239, 232, 0.66);

      background:
        rgba(205, 230, 220, 0.035);
    }

    @media (max-width: 350px) {
      .audit-round-copy-actions {
        grid-template-columns: 1fr;
      }
    }




    /* =========================================================
       DESMOCHE · IDENTIDAD MESA REAL 2026
       Solo capa visual. La lógica original se conserva.
       ========================================================= */

    :root {
      --dm-gold: #b9954e;
      --dm-gold-soft: rgba(185, 149, 78, 0.58);
      --dm-cream: #eee7d8;
      --dm-panel: rgba(3, 20, 15, 0.60);
      --dm-panel-strong: rgba(2, 16, 12, 0.82);
      --dm-photo: url("https://images.unsplash.com/photo-1560526396-82d093122bda?auto=format&fit=crop&fm=jpg&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&ixlib=rb-4.1.0&q=60&w=3000");
    }

    body:not(.game-open) {
      background: #050806;
    }

    .game-container {
      isolation: isolate;
      padding: 28px 26px 28px;
      align-items: center;
      background: #0a241b;
    }

    .game-container::before {
      content: "";
      position: absolute;
      inset: -16px;
      z-index: 0;
      pointer-events: none;
      background-image: var(--dm-photo);
      background-size: cover;
      background-position: 57% 50%;
      filter: saturate(0.70) brightness(0.54) contrast(1.06) blur(1.2px);
      transform: scale(1.035);
    }

    .bg-glow {
      z-index: 1;
      filter: none;
      background:
        linear-gradient(
          180deg,
          rgba(1, 8, 6, 0.42) 0%,
          rgba(2, 13, 10, 0.20) 24%,
          rgba(3, 18, 13, 0.43) 54%,
          rgba(1, 9, 7, 0.74) 100%
        ),
        radial-gradient(
          circle at 50% 38%,
          rgba(11, 50, 36, 0.08),
          rgba(0, 0, 0, 0.28) 70%
        );
    }

    .corner-ornament {
      width: 58px;
      height: 58px;
      opacity: 0.44;
      z-index: 3;
    }

    .corner-top-left,
    .corner-top-right {
      top: 16px;
    }

    .corner-bottom-left,
    .corner-bottom-right {
      bottom: 16px;
    }

    .top-logo {
      top: 44px;
      width: 42px;
      height: 42px;
      color: #121b16;
      border: 1px solid rgba(239, 211, 139, 0.34);
      border-radius: 13px;
      background:
        linear-gradient(145deg, #d5b45e, #aa8235);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.26);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      font-family: Arial, sans-serif;
      font-size: 21px;
      line-height: 1;
      z-index: 6;
    }

    .desmoche-main-menu.glass-card {
      width: 100%;
      max-width: 352px;
      margin-top: 56px;
      padding: 30px 17px 12px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      z-index: 5;
    }

    .desmoche-wordmark.title {
      margin: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.015em;
      color: #f0ebe0;
      background: none;
      -webkit-background-clip: initial;
      background-clip: initial;
      -webkit-text-fill-color: currentColor;
      filter: none;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.5rem, 12vw, 3.65rem);
      font-weight: 400;
      line-height: 0.95;
      letter-spacing: 0.028em;
      text-shadow: 0 3px 12px rgba(0, 0, 0, 0.36);
    }

    .desmoche-wordmark .brand-letter {
      position: relative;
      display: inline-block;
    }

    .desmoche-wordmark .brand-o {
      margin: 0 0.015em;
      padding: 0 0.02em;
    }

    .desmoche-wordmark .brand-diamond {
      position: absolute;
      left: 50%;
      top: 52%;
      transform: translate(-50%, -50%);
      color: rgba(185, 149, 78, 0.95);
      font-family: Arial, sans-serif;
      font-size: 0.24em;
      line-height: 1;
      text-shadow: none;
    }

    .menu-title-divider,
    .menu-footer-divider {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 10px;
      color: rgba(185, 149, 78, 0.68);
    }

    .menu-title-divider {
      width: min(250px, 74%);
      margin: 10px auto 0;
    }

    .menu-title-divider i,
    .menu-footer-divider i {
      height: 1px;
      background: linear-gradient(90deg, transparent, currentColor);
    }

    .menu-title-divider i:last-child,
    .menu-footer-divider i:last-child {
      background: linear-gradient(90deg, currentColor, transparent);
    }

    .menu-title-divider b,
    .menu-footer-divider b {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 11px;
      font-weight: 400;
    }

    .menu-subtitle.subtitle {
      max-width: none;
      margin: 9px auto 25px;
      color: #c8ad72;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 0.69rem;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.27em;
      text-shadow: none;
    }

    .menu-primary-actions {
      width: 100%;
      max-width: 318px;
      margin: 0 auto;
    }

    .menu-home-status {
      width: fit-content;
      margin: -14px auto 18px;
      padding: 5px 9px;

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

      border: 1px solid rgba(100, 190, 145, 0.20);
      border-radius: 999px;

      color: rgba(211, 229, 219, 0.72);
      background: rgba(5, 28, 20, 0.42);

      font-family: "Segoe UI", Roboto, Arial, sans-serif;
      font-size: 0.54rem;
      font-weight: 750;
      letter-spacing: 0.28px;
    }

    .menu-home-status-dot {
      width: 6px;
      height: 6px;
      flex: 0 0 6px;

      border-radius: 50%;
      background: #6ac596;

      box-shadow:
        0 0 0 3px rgba(106, 197, 150, 0.09),
        0 0 8px rgba(106, 197, 150, 0.28);
    }


    .desmoche-main-menu .btn.menu-primary-action {
      position: relative;
      width: 100%;
      max-width: none;
      min-height: 57px;
      margin: 0 0 9px;
      padding: 9px 17px;
      display: grid;
      grid-template-columns: 38px 1fr 18px;
      align-items: center;
      gap: 10px;
      color: var(--dm-cream);
      border: 1px solid rgba(185, 149, 78, 0.62);
      border-radius: 2px;
      background: rgba(3, 20, 15, 0.61);
      box-shadow: none;
      backdrop-filter: blur(7px);
      -webkit-backdrop-filter: blur(7px);
      font-family: Georgia, "Times New Roman", serif;
      font-size: 1.18rem;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1;
      text-transform: none;
    }

    .desmoche-main-menu .btn.menu-primary-action[hidden] {
      display: none !important;
    }

    .desmoche-main-menu .btn.menu-primary-action:active,
    .desmoche-main-menu .btn.menu-secondary-row:active {
      transform: scale(0.992);
    }

    .desmoche-main-menu .btn-offline.menu-primary-action {
      border-color: rgba(205, 170, 93, 0.78);
      background: rgba(3, 23, 17, 0.70);
    }

    .desmoche-main-menu .btn-continue.menu-primary-action {
      color: rgba(238, 231, 216, 0.91);
      border-color: rgba(185, 149, 78, 0.43);
      background: rgba(2, 17, 13, 0.54);
    }


    .menu-action-copy,
    .menu-row-copy {
      min-width: 0;

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

      text-align: left;
    }

    .menu-action-copy strong {
      color: #f1eadc;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 1.02rem;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.04em;
    }

    .menu-action-copy small {
      margin-top: 4px;

      color: rgba(203, 183, 137, 0.68);

      font-family: "Segoe UI", Roboto, Arial, sans-serif;
      font-size: 0.49rem;
      font-weight: 650;
      line-height: 1;
      letter-spacing: 0.24px;
    }

    .menu-action-icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      color: #ccb06f;
      border: 1px solid rgba(185, 149, 78, 0.46);
      border-radius: 50%;
      font-family: Arial, sans-serif;
      font-size: 14px;
    }

    .menu-action-arrow,
    .menu-row-arrow {
      color: rgba(204, 176, 111, 0.62);
      font-family: Arial, sans-serif;
      font-size: 18px;
      line-height: 1;
    }

    .menu-secondary-list {
      width: 100%;
      max-width: 300px;
      margin: 9px auto 0;
    }

    .desmoche-main-menu .btn.menu-secondary-row {
      width: 100%;
      max-width: none;
      min-height: 46px;
      margin: 0;
      padding: 6px 9px;
      display: grid;
      grid-template-columns: 33px 1fr 16px;
      align-items: center;
      gap: 12px;
      color: rgba(239, 232, 217, 0.92);
      border: 0;
      border-bottom: 1px solid rgba(185, 149, 78, 0.29);
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 1.04rem;
      font-weight: 400;
      letter-spacing: 0;
      text-align: left;
      text-transform: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .desmoche-main-menu .btn.menu-secondary-row:hover {
      background: rgba(185, 149, 78, 0.045);
      filter: none;
    }


    .desmoche-main-menu
    .btn.menu-secondary-row.menu-featured-row {
      min-height: 57px;
      margin: 10px 0 5px;
      padding: 8px 10px;

      border: 1px solid rgba(185, 149, 78, 0.34);
      border-radius: 2px;

      background:
        linear-gradient(
          90deg,
          rgba(185, 149, 78, 0.085),
          rgba(4, 20, 16, 0.18)
        );
    }

    .menu-featured-row
    .menu-row-icon {
      color: #e6c978;

      border-color: rgba(205, 170, 93, 0.62);
      background: rgba(185, 149, 78, 0.07);
    }

    .menu-row-copy strong {
      color: rgba(239, 232, 217, 0.95);

      font-family: Georgia, "Times New Roman", serif;
      font-size: 0.98rem;
      font-weight: 400;
      line-height: 1;
    }

    .menu-row-copy small {
      margin-top: 4px;

      color: rgba(205, 187, 148, 0.56);

      font-family: "Segoe UI", Roboto, Arial, sans-serif;
      font-size: 0.47rem;
      font-weight: 650;
      line-height: 1.1;
    }

    .menu-row-icon {
      width: 29px;
      height: 29px;
      display: grid;
      place-items: center;
      color: #bea05f;
      border: 1px solid rgba(185, 149, 78, 0.45);
      border-radius: 50%;
      font-family: Arial, sans-serif;
      font-size: 13px;
    }

    .menu-hidden-data {
      display: none !important;
    }

    .desmoche-main-menu .btn.menu-online-row {
      width: min(100%, 285px);
      max-width: none;
      min-height: 42px;
      margin: 15px auto 0;
      padding: 8px 12px;
      display: flex;
      flex-direction: row;
      gap: 9px;
      color: rgba(223, 216, 200, 0.30);
      border: 1px solid rgba(185, 149, 78, 0.14);
      border-radius: 2px;
      background: rgba(2, 12, 9, 0.28);
      box-shadow: none;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 0.82rem;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1;
      text-transform: none;
    }

    .menu-version-footer {
      margin-top: 17px;
      color: rgba(185, 149, 78, 0.72);
      text-align: center;
    }

    .menu-footer-divider {
      width: min(220px, 66%);
      margin: 0 auto 7px;
    }

    .menu-version-footer small {
      display: block;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 0.68rem;
      letter-spacing: 0.10em;
    }

    .menu-footer-suits {
      margin-top: 8px;
      display: flex;
      justify-content: center;
      gap: 19px;
      color: rgba(185, 149, 78, 0.36);
      font-family: Arial, sans-serif;
      font-size: 13px;
    }

    .cards-decor {
      display: none;
    }

    /* ===== VENTANAS DEL MENÚ ===== */
    .modal,
    .audit-overlay,
    .display-settings {
      background: rgba(1, 8, 6, 0.80);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .modal-card,
    .audit-card,
    .display-settings-card {
      color: var(--dm-cream);
      border: 1px solid rgba(185, 149, 78, 0.47);
      border-radius: 4px;
      background:
        linear-gradient(
          rgba(3, 20, 15, 0.87),
          rgba(2, 14, 10, 0.94)
        );
      box-shadow: 0 18px 42px rgba(0, 0, 0, 0.50);
      backdrop-filter: blur(9px);
      -webkit-backdrop-filter: blur(9px);
    }

    .rules-header,
    .audit-head,
    .display-settings-head {
      border-bottom: 1px solid rgba(185, 149, 78, 0.26);
    }

    .modal-title,
    .audit-head h3,
    .display-settings-head h3 {
      color: #f0ebe0;
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 400;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    }

    .modal-subtitle,
    .audit-head p,
    .display-settings-head p {
      color: #c8ad72;
      font-family: Georgia, "Times New Roman", serif;
      letter-spacing: 0.04em;
    }

    .rules-back,
    .audit-close,
    .display-settings-close {
      color: #e9ddc3;
      border: 1px solid rgba(185, 149, 78, 0.42);
      border-radius: 50%;
      background: rgba(2, 16, 12, 0.48);
      box-shadow: none;
    }

    /* Cómo jugar: mantener emojis y hacerlo parte de la misma identidad. */
    .topic,
    .short-rule,
    .suit-card {
      border-color: rgba(185, 149, 78, 0.25) !important;
      background: rgba(4, 20, 16, 0.52) !important;
      box-shadow: none !important;
    }

    .topic-button {
      color: #eee6d5;
      background: transparent !important;
      font-family: Georgia, "Times New Roman", serif;
    }

    .topic.open .topic-button {
      color: #f3e6c9;
      background: rgba(185, 149, 78, 0.05) !important;
    }

    .topic-name {
      font-weight: 600;
    }

    .topic-arrow {
      color: rgba(185, 149, 78, 0.70);
    }

    .short-rule {
      color: rgba(238, 231, 216, 0.84);
    }

    .short-rule-emoji,
    .topic-icon {
      filter: none;
    }

    /* Perfil */
    .profile-hero,
    .profile-section,
    .profile-local-note,
    .profile-special-favorite {
      border-color: rgba(185, 149, 78, 0.25) !important;
      background: rgba(4, 20, 16, 0.52) !important;
      box-shadow: none !important;
    }

    .profile-avatar,
    .profile-badge,
    .profile-wallet,
    .profile-stat,
    .profile-favorite,
    .profile-special-stat {
      border-color: rgba(185, 149, 78, 0.28) !important;
      background: rgba(2, 16, 12, 0.44) !important;
      box-shadow: none !important;
    }

    .profile-name,
    .profile-section-title,
    .profile-level-label,
    .profile-wallet strong,
    .profile-stat strong,
    .profile-favorite strong,
    .profile-special-stat strong {
      color: #eee4ce !important;
    }

    .profile-progress,
    .profile-style-track {
      background: rgba(255, 255, 255, 0.07) !important;
    }

    .profile-progress-fill,
    .profile-style-fill {
      background: linear-gradient(90deg, #9a7435, #d4b568) !important;
    }

    /* Historial: se conserva toda la caja negra / auditoría por debajo. */
    .audit-card {
      max-width: 430px;
    }

    .audit-entry,
    .audit-round-details,
    .audit-compact-block,
    .audit-compact-hand {
      border-color: rgba(185, 149, 78, 0.23) !important;
      background: rgba(4, 20, 16, 0.52) !important;
      box-shadow: none !important;
    }

    .audit-full-title,
    .audit-round-summary-left strong,
    .audit-compact-block h4 {
      color: #eee4ce !important;
    }

    .audit-action,
    .audit-round-copy,
    .audit-round-technical {
      border-color: rgba(185, 149, 78, 0.34) !important;
      border-radius: 2px !important;
      background: rgba(185, 149, 78, 0.06) !important;
      color: #dbc89b !important;
    }

    /* Ajustes: mantener las dos opciones de tamaño existentes. */
    .display-settings-card {
      max-width: 380px;
    }

    .display-mode-option {
      border-color: rgba(185, 149, 78, 0.28) !important;
      border-radius: 2px !important;
      background: rgba(4, 20, 16, 0.54) !important;
      color: #eee7d8 !important;
      box-shadow: none !important;
    }

    .display-mode-option[aria-pressed="true"] {
      border-color: rgba(205, 170, 93, 0.78) !important;
      background: rgba(185, 149, 78, 0.08) !important;
    }

    .display-mode-copy small {
      color: rgba(238, 231, 216, 0.61) !important;
    }

    .display-mode-check {
      color: #c9aa62 !important;
    }

    /* Configurar partida offline también recibe la misma piel. */
    .offline-card .player-preview,
    .offline-card .config-section,
    .offline-card .match-summary,
    .offline-card .bot-option,
    .offline-card .special-rule-option {
      border-color: rgba(185, 149, 78, 0.25) !important;
      background: rgba(4, 20, 16, 0.52) !important;
      box-shadow: none !important;
    }

    .offline-card .bot-option.selected,
    .offline-card .special-rule-option[aria-pressed="true"] {
      border-color: rgba(205, 170, 93, 0.72) !important;
      background: rgba(185, 149, 78, 0.08) !important;
    }

    .start-match {
      border: 1px solid rgba(205, 170, 93, 0.78) !important;
      border-radius: 2px !important;
      background: rgba(3, 23, 17, 0.74) !important;
      color: #eee4ce !important;
      box-shadow: none !important;
      font-family: Georgia, "Times New Roman", serif !important;
    }

    @media (max-height: 740px) {
      .game-container {
        padding-top: 16px;
        padding-bottom: 16px;
      }

      .top-logo {
        top: 25px;
        width: 36px;
        height: 36px;
        font-size: 18px;
      }

      .desmoche-main-menu.glass-card {
        margin-top: 42px;
        padding-top: 21px;
      }

      .desmoche-wordmark.title {
        font-size: clamp(2.28rem, 11vw, 3.15rem);
      }

      .menu-subtitle.subtitle {
        margin-bottom: 18px;
      }

      .menu-home-status {
        margin-top: -11px;
        margin-bottom: 13px;
      }

      .desmoche-main-menu .btn.menu-primary-action {
        min-height: 51px;
      }

      .desmoche-main-menu .btn.menu-secondary-row {
        min-height: 41px;
      }

      .menu-version-footer {
        margin-top: 11px;
      }
    }



    /* =========================================================
       CONFIRMACIÓN INTERNA DESMOCHE
       Evita depender de window.confirm en Acode / WebView.
       ========================================================= */
    .desmoche-confirm-overlay {
      position: fixed;
      inset: 0;
      z-index: 5000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding:
        max(18px, env(safe-area-inset-top))
        18px
        max(18px, env(safe-area-inset-bottom));
      background: rgba(1, 8, 6, 0.86);
      backdrop-filter: blur(9px);
      -webkit-backdrop-filter: blur(9px);
    }

    .desmoche-confirm-overlay[hidden] {
      display: none !important;
    }

    .desmoche-confirm-card {
      width: min(100%, 340px);
      padding: 22px 18px 17px;
      color: #eee7d8;
      border: 1px solid rgba(185, 149, 78, 0.54);
      border-radius: 4px;
      background:
        linear-gradient(
          180deg,
          rgba(4, 24, 18, 0.98),
          rgba(2, 14, 10, 0.99)
        );
      box-shadow: 0 22px 55px rgba(0, 0, 0, 0.58);
      text-align: center;
    }

    .desmoche-confirm-symbol {
      width: 38px;
      height: 38px;
      margin: 0 auto 13px;
      display: grid;
      place-items: center;
      color: #201706;
      border: 1px solid rgba(239, 211, 139, 0.34);
      border-radius: 12px;
      background: linear-gradient(145deg, #d5b45e, #aa8235);
      font-family: Arial, sans-serif;
      font-size: 18px;
    }

    .desmoche-confirm-card h3 {
      margin: 0 0 9px;
      color: #f0ebe0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 1.35rem;
      font-weight: 400;
      letter-spacing: 0.05em;
    }

    .desmoche-confirm-card p {
      margin: 0;
      color: rgba(238, 231, 216, 0.76);
      font-family: Georgia, "Times New Roman", serif;
      font-size: 0.92rem;
      line-height: 1.45;
    }

    .desmoche-confirm-actions {
      margin-top: 19px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px;
    }

    .desmoche-confirm-button {
      min-height: 45px;
      padding: 8px 10px;
      border: 1px solid rgba(185, 149, 78, 0.38);
      border-radius: 2px;
      color: #eee7d8;
      background: rgba(2, 16, 12, 0.54);
      font-family: Georgia, "Times New Roman", serif;
      font-size: 0.88rem;
      cursor: pointer;
    }

    .desmoche-confirm-button.primary {
      border-color: rgba(205, 170, 93, 0.78);
      color: #fff1cf;
      background: rgba(185, 149, 78, 0.13);
    }

    .desmoche-confirm-button:active {
      transform: scale(0.985);
    }

  
    /* =======================================
       AJUSTE VISUAL: BOTS EN ARCO + MANO EN ABANICO
       Solo cambia posición/presentación. No altera la lógica.
    ======================================= */

    /* Mantiene los cuadros originales de los bots.
       Con 3 bots: Bot 3 izquierda, Bot 2 centro, Bot 1 derecha.
       El del centro queda un poco más arriba y los laterales
       un poco más abajo, simulando puestos alrededor de la mesa. */
    .bots-area.count-3 {
      padding-top: 5px;
      padding-bottom: 9px;
    }

    .bots-area.count-3 .bot-seat:nth-child(1),
    .bots-area.count-3 .bot-seat:nth-child(3) {
      translate: 0 8px;
    }

    .bots-area.count-3 .bot-seat:nth-child(2) {
      translate: 0 -4px;
    }

    /* Con 2 bots se conservan enfrentados a ambos lados. */
    .bots-area.count-2 {
      padding: 3px 12px 6px;
    }

    /* Mano del jugador con inclinación progresiva tipo abanico.
       rotate/translate son propiedades separadas para no romper
       los transform usados por selección y arrastre. */
    .human-hand .playing-card {
      transform-origin: 50% 112%;
      rotate: var(--fan-angle, 0deg);
      translate: 0 var(--fan-y, 0px);
    }

    .human-hand .playing-card.dragging {
      rotate: 0deg;
      translate: 0 0;
    }

    /* En modo ajustar a pantalla el arco es más suave
       para no consumir espacio vertical extra. */
    .game-screen.display-fit .bots-area.count-3 {
      padding-top: 2px;
      padding-bottom: 4px;
    }

    .game-screen.display-fit .bots-area.count-3 .bot-seat:nth-child(1),
    .game-screen.display-fit .bots-area.count-3 .bot-seat:nth-child(3) {
      translate: 0 4px;
    }

    .game-screen.display-fit .bots-area.count-3 .bot-seat:nth-child(2) {
      translate: 0 -2px;
    }

    .game-screen.display-fit .bots-area.count-2 {
      padding: 1px 8px 3px;
    }

  

    /* =======================================
       AJUSTE 2: MÁS AIRE EN LA MESA + SKINS
       Mantiene la estructura original.
    ======================================= */

    /* Los bots conservan sus cuadros; solo ganan un poco de tamaño
       y una presencia más clara alrededor del centro de la mesa. */
    .game-screen.display-fit .bots-area {
      gap: 5px;
      padding-inline: 2px;
    }

    .game-screen.display-fit .bot-seat {
      min-height: 61px;
      padding: 6px 4px 5px;
      border-radius: 11px;
    }

    .game-screen.display-fit .bot-seat-title {
      font-size: 0.62rem;
    }

    .game-screen.display-fit .bot-seat-count {
      margin-top: 2px;
      font-size: 0.48rem;
    }

    .game-screen.display-fit .bot-hand {
      min-height: 30px;
      margin-top: 4px;
    }

    .game-screen.display-fit .bot-card-back {
      width: 18px;
      height: 27px;
      flex-basis: 18px;
      border-radius: 4px;
    }

    .game-screen.display-fit .bot-card-back + .bot-card-back {
      margin-left: -8px;
    }

    /* Arco suave: siguen siendo cuadros, no círculos. */
    .game-screen.display-fit .bots-area.count-3 .bot-seat:nth-child(1),
    .game-screen.display-fit .bots-area.count-3 .bot-seat:nth-child(3) {
      translate: 0 8px;
    }

    .game-screen.display-fit .bots-area.count-3 .bot-seat:nth-child(2) {
      translate: 0 -2px;
    }

    /* Bajamos un poco el centro visual y lo hacemos más protagonista. */
    .game-screen.display-fit .table-center {
      margin-top: 5px;
      padding: 8px 8px 7px;
    }

    .game-screen.display-fit .piles {
      gap: 23px;
    }

    .game-screen.display-fit .pile {
      width: 72px;
    }

    .game-screen.display-fit .pile-card,
    .game-screen.display-fit .deck-card::before,
    .game-screen.display-fit .deck-card::after {
      width: 55px;
      height: 76px;
      border-radius: 8px;
    }

    .game-screen.display-fit .deck-emblem {
      width: 27px;
      height: 27px;
      font-size: 0.76rem;
    }

    .game-screen.display-fit .pile-label {
      margin-top: 5px;
      font-size: 0.56rem;
    }

    .game-screen.display-fit .pile-count {
      font-size: 0.47rem;
    }

    .game-screen.display-fit .discard-face .discard-value {
      top: 5px;
      left: 6px;
      font-size: 0.76rem;
    }

    .game-screen.display-fit .discard-face .discard-symbol {
      font-size: 1.95rem;
    }

    /* Separamos un poco la mesa del jugador del centro para que
       mazo y descarte respiren mejor. */
    .game-screen.display-fit .human-zone {
      margin-top: 4px;
    }

    /* Skin propia del mazo DESMOCHE, hecha solo con CSS para seguir offline. */
    .deck-card:not(.empty-deck) {
      background:
        radial-gradient(
          circle at 50% 50%,
          rgba(214, 179, 83, 0.14) 0 14%,
          transparent 15% 100%
        ),
        linear-gradient(
          45deg,
          transparent 46%,
          rgba(214, 179, 83, 0.16) 47% 53%,
          transparent 54%
        ),
        linear-gradient(
          -45deg,
          transparent 46%,
          rgba(214, 179, 83, 0.12) 47% 53%,
          transparent 54%
        ),
        #10382f;
      background-size:
        100% 100%,
        14px 14px,
        14px 14px,
        auto;
      box-shadow:
        inset 0 0 0 2px rgba(5, 22, 17, 0.72),
        inset 0 0 0 4px rgba(214, 179, 83, 0.18),
        0 6px 12px rgba(0, 0, 0, 0.28);
    }

    .deck-card:not(.empty-deck) .deck-emblem {
      border-radius: 50%;
      background: rgba(4, 24, 19, 0.72);
      box-shadow: 0 0 0 3px rgba(214, 179, 83, 0.08);
    }

    /* Skins discretas de dorso para diferenciar a cada rival.
       Solo cambia el dorso; el panel sigue siendo el mismo. */
    .bot-seat.bot-skin-1 .bot-card-back {
      background:
        repeating-linear-gradient(
          45deg,
          rgba(241, 208, 109, 0.17) 0 2px,
          transparent 2px 6px
        ),
        #184c3d;
    }

    .bot-seat.bot-skin-2 .bot-card-back {
      background:
        linear-gradient(
          45deg,
          transparent 43%,
          rgba(241, 208, 109, 0.16) 44% 56%,
          transparent 57%
        ),
        linear-gradient(
          -45deg,
          transparent 43%,
          rgba(241, 208, 109, 0.10) 44% 56%,
          transparent 57%
        ),
        #453039;
      background-size: 10px 10px, 10px 10px, auto;
    }

    .bot-seat.bot-skin-3 .bot-card-back {
      background:
        repeating-linear-gradient(
          90deg,
          rgba(241, 208, 109, 0.13) 0 1px,
          transparent 1px 5px
        ),
        repeating-linear-gradient(
          0deg,
          rgba(241, 208, 109, 0.08) 0 1px,
          transparent 1px 6px
        ),
        #263f4b;
    }

    .bot-seat.bot-skin-1 {
      border-color: rgba(92, 170, 131, 0.24);
    }

    .bot-seat.bot-skin-2 {
      border-color: rgba(178, 113, 126, 0.22);
    }

    .bot-seat.bot-skin-3 {
      border-color: rgba(116, 155, 181, 0.22);
    }

  
    /* =======================================
       AJUSTE FINO V2
       1) La mano en abanico ya no se recorta.
       2) CAMBIO y su contador ganan tamaño.
    ======================================= */

    /* Más espacio real debajo de las cartas inclinadas.
       No cambia el tamaño de las cartas ni el ángulo del abanico. */
    .game-screen.display-fit .hand-workspace {
      grid-template-columns: minmax(0, 1fr) 92px;
      min-height: 92px;
      padding-bottom: 8px;
      gap: 6px;
      overflow: visible;
    }

    .game-screen.display-fit .human-hand {
      min-height: 90px;
      padding: 15px 0 11px;
      overflow: visible;
    }

    /* El cuadro lateral gana presencia sin alterar su función. */
    .game-screen.display-fit .special-card-slot {
      width: 92px;
      min-width: 92px;
      max-width: 92px;

      height: 136px;
      min-height: 136px;
      max-height: 136px;

      padding: 6px 5px;
    }

    .game-screen.display-fit .special-card-title {
      min-height: 14px;
      margin-bottom: 4px;

      font-size: 0.51rem;
      line-height: 1.05;
    }

    .game-screen.display-fit .special-card-visual {
      min-height: 72px;
      max-height: 76px;
    }

    .game-screen.display-fit .special-card-visual .playing-card {
      width: 50px;
      height: 72px;
      flex-basis: 50px;
    }

    .game-screen.display-fit .special-card-placeholder,
    .game-screen.display-fit .special-card-back {
      width: 54px;
      height: 74px;
    }

    .game-screen.display-fit .special-card-hint {
      min-height: 22px;
      max-height: 30px;
      margin-top: 4px;

      font-size: 0.46rem;
      line-height: 1.05;
    }

    /* Cuando realmente estamos en el CAMBIO,
       título y tiempo son más fáciles de leer. */
    .game-screen.display-fit
    .special-card-slot.exchange-drop-ready
    .special-card-title {
      font-size: 0.60rem;
      letter-spacing: 0.45px;
    }

    .exchange-countdown {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      min-width: 40px;
      min-height: 24px;
      padding: 3px 7px;

      border: 1px solid rgba(240, 211, 123, 0.34);
      border-radius: 8px;

      background: rgba(240, 211, 123, 0.07);

      font-size: 0.80rem !important;
      line-height: 1;
    }

    .game-screen.display-fit .exchange-countdown {
      font-size: 0.78rem !important;
    }

    .game-screen.display-fit .exchange-countdown.critical {
      min-width: 42px;
      min-height: 25px;
      font-size: 0.80rem !important;
    }

  
    /* =======================================
       IDENTIDAD VISUAL DEL MENÚ EN LA PARTIDA
       Solo tipografía + líneas + color de bordes.
       No cambia estructura, tamaños ni posiciones.
    ======================================= */

    /* Misma familia tipográfica elegante del menú. */
    .game-screen,
    .game-screen button,
    .game-screen input,
    .game-screen select {
      font-family: Georgia, "Times New Roman", serif;
    }

    /* Título de la mesa: más cercano al wordmark del menú,
       sin aumentar su espacio ni mover el encabezado. */
    .game-screen .pilot-title {
      color: #f0ebe0;
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 400;
      letter-spacing: 0.075em;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    }

    .game-screen .pilot-subtitle {
      color: rgba(200, 173, 114, 0.88);
      font-family: Georgia, "Times New Roman", serif;
      letter-spacing: 0.035em;
    }

    /* Línea fina bajo el encabezado, como los separadores del menú. */
    .game-screen .pilot-header::after {
      content: "";
      position: absolute;
      left: 48px;
      right: 48px;
      bottom: -5px;
      height: 1px;
      pointer-events: none;
      background:
        linear-gradient(
          90deg,
          transparent,
          rgba(185, 149, 78, 0.58) 18%,
          rgba(185, 149, 78, 0.58) 82%,
          transparent
        );
    }

    /* Marco interior extremadamente sutil de la mesa.
       Es decorativo: no ocupa espacio ni altera el drag. */
    .game-screen .pilot-table::after {
      content: "";
      position: absolute;
      z-index: 1;
      inset:
        max(7px, env(safe-area-inset-top))
        7px
        max(7px, env(safe-area-inset-bottom));
      pointer-events: none;
      border-left: 1px solid rgba(185, 149, 78, 0.26);
      border-right: 1px solid rgba(185, 149, 78, 0.26);
    }

    /* Títulos de zonas y jugadores. */
    .game-screen .turn-message,
    .game-screen .bot-seat-title,
    .game-screen .human-name,
    .game-screen .pile-label,
    .game-screen .melds-label,
    .game-screen .draft-title,
    .game-screen .special-card-title {
      color: #c8ad72;
      font-family: Georgia, "Times New Roman", serif;
      letter-spacing: 0.075em;
    }

    .game-screen .bot-seat-title,
    .game-screen .human-name {
      font-weight: 700;
    }

    .game-screen .pile-label,
    .game-screen .melds-label,
    .game-screen .draft-title,
    .game-screen .special-card-title {
      font-weight: 600;
    }

    /* Textos secundarios también usan serif,
       pero siguen discretos para no cargar la pantalla. */
    .game-screen .bot-seat-count,
    .game-screen .human-count,
    .game-screen .pile-count,
    .game-screen .pilot-status,
    .game-screen .hand-hint,
    .game-screen .draft-count,
    .game-screen .draft-hint,
    .game-screen .special-card-hint {
      font-family: Georgia, "Times New Roman", serif;
    }

    /* Líneas/bordes: mismo dorado apagado del menú.
       No cambiamos radios ni medidas. */
    .game-screen .table-center,
    .game-screen .human-zone,
    .game-screen .human-melds-zone,
    .game-screen .human-draft-zone,
    .game-screen .special-card-slot {
      border-color: rgba(185, 149, 78, 0.34);
    }

    .game-screen .human-zone.active-turn,
    .game-screen .bot-seat.active-turn {
      border-color: rgba(205, 170, 93, 0.72);
    }

    /* Separador delicado dentro de la zona MESA. */
    .game-screen .melds-label {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .game-screen .melds-label::after {
      content: "";
      flex: 1 1 auto;
      height: 1px;
      background:
        linear-gradient(
          90deg,
          rgba(185, 149, 78, 0.46),
          transparent
        );
    }

    /* POSIBLE JUGADA conserva su estructura y contador;
       solo gana una línea fina tipo menú. */
    .game-screen .draft-header {
      border-bottom: 1px solid rgba(185, 149, 78, 0.22);
      padding-bottom: 4px;
    }

    /* Controles con la misma voz tipográfica del menú. */
    .game-screen .pilot-action,
    .game-screen .discard-choice-button,
    .game-screen .special-card-action,
    .game-screen .pilot-back,
    .game-screen .game-pause-button,
    .game-screen .game-settings-button {
      font-family: Georgia, "Times New Roman", serif;
    }

    .game-screen .pilot-action {
      letter-spacing: 0.055em;
    }

    /* Mantener iconos/naipes sin forzar Georgia en símbolos grandes. */
    .game-screen .match-clock-icon,
    .game-screen .deck-emblem {
      font-family: Arial, sans-serif;
    }

  
    /* =======================================
       AJUSTE DE COLOR: VERDE MÁS OSCURO
       Acerca la partida al tono del menú.
       No cambia estructura, tamaños ni posiciones.
    ======================================= */

    .game-screen {
      background: #03100c;
    }

    .game-screen .pilot-table {
      background:
        radial-gradient(
          circle at 50% 40%,
          rgba(46, 102, 79, 0.15),
          transparent 35%
        ),
        radial-gradient(
          circle at 16% 80%,
          rgba(185, 149, 78, 0.045),
          transparent 25%
        ),
        linear-gradient(
          180deg,
          #0d3026 0%,
          #08231c 48%,
          #03130f 100%
        );
    }

    /* Paneles: misma transparencia, pero sobre una base más profunda. */
    .game-screen .bot-seat {
      background: rgba(3, 25, 19, 0.52);
    }

    .game-screen .table-center {
      background:
        radial-gradient(
          circle at 50% 45%,
          rgba(255, 255, 255, 0.035),
          transparent 42%
        ),
        rgba(0, 0, 0, 0.16);
    }

    .game-screen .human-zone {
      background:
        linear-gradient(
          180deg,
          rgba(185, 149, 78, 0.055),
          rgba(2, 19, 14, 0.34)
        );
    }

    .game-screen .human-melds-zone,
    .game-screen .human-draft-zone,
    .game-screen .special-card-slot {
      background-color: rgba(2, 18, 14, 0.26);
    }

  

    /* =======================================
       AJUSTE VISUAL: MODAL DE PAUSA
       Mismo lenguaje del menú y la mesa.
    ======================================= */

    .pause-overlay {
      background: rgba(1, 9, 7, 0.84);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .pause-card {
      position: relative;
      width: min(100%, 336px);
      padding: 26px 18px 18px;
      border-radius: 20px;
      border: 1px solid rgba(214, 175, 79, 0.52);
      color: #edf3ef;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.04), transparent 34%),
        linear-gradient(180deg, rgba(21, 68, 56, 0.98), rgba(5, 21, 17, 0.995));
      box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.58),
        inset 0 0 0 1px rgba(255, 236, 171, 0.035),
        inset 0 12px 24px rgba(255, 219, 122, 0.03);
      overflow: hidden;
    }

    .pause-card::before,
    .pause-card::after {
      content: '';
      position: absolute;
      left: 20px;
      right: 20px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(214,175,79,0.58), transparent);
      pointer-events: none;
    }

    .pause-card::before { top: 14px; }
    .pause-card::after { bottom: 14px; }

    .pause-icon {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      margin: 0 auto;
      border-radius: 999px;
      border: 1px solid rgba(214,175,79,0.48);
      color: #fff5cd;
      background: rgba(0,0,0,0.12);
      font-size: 1.2rem;
      line-height: 1;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
    }

    .pause-card h2 {
      margin-top: 12px;
      margin-bottom: 0;
      color: #f1d06d;
      font-family: Georgia, 'Times New Roman', serif;
      font-size: 1.08rem;
      font-weight: 700;
      letter-spacing: 0.9px;
      text-transform: uppercase;
    }

    .pause-clock {
      margin-top: 12px;
      color: #fff3c8;
      font-family: Georgia, 'Times New Roman', serif;
      font-size: 1.95rem;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      letter-spacing: 1px;
      text-shadow: 0 1px 0 rgba(0,0,0,0.28);
    }

    .pause-card p {
      margin: 10px 6px 16px;
      color: rgba(237, 243, 239, 0.72);
      font-size: 0.72rem;
      line-height: 1.42;
    }

    .pause-action {
      width: 100%;
      min-height: 46px;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid rgba(214, 175, 79, 0.24);
      color: #edf3ef;
      background: linear-gradient(180deg, rgba(17, 55, 45, 0.82), rgba(7, 27, 22, 0.92));
      font-family: Georgia, 'Times New Roman', serif;
      font-size: 0.80rem;
      font-weight: 700;
      letter-spacing: 0.35px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
      cursor: pointer;
      transition: transform .12s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }

    .pause-action + .pause-action {
      margin-top: 9px;
    }

    .pause-action.primary {
      border-color: rgba(241, 208, 109, 0.62);
      color: #231602;
      background: linear-gradient(180deg, #f2d76e, #ddb751);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.24);
    }

    .pause-action.primary:hover,
    .pause-action:hover {
      border-color: rgba(241, 208, 109, 0.45);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 0 0 1px rgba(241,208,109,0.06);
    }

    .pause-action.danger {
      border-color: rgba(202, 91, 91, 0.42);
      color: #f0b4b4;
      background: linear-gradient(180deg, rgba(60, 17, 17, 0.62), rgba(27, 8, 8, 0.80));
    }

    .pause-action:active {
      transform: scale(0.985);
    }


    /* =======================================
       PAUSA = MISMO LENGUAJE VISUAL DE AJUSTES
       Plano, rectangular, compacto.
    ======================================= */

    .pause-overlay {
      background: rgba(1, 8, 6, 0.80) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }

    .pause-card {
      width: min(100%, 380px) !important;
      padding: 16px !important;

      border-radius: 4px !important;
      border: 1px solid rgba(185, 149, 78, 0.47) !important;

      color: #eee7d8 !important;
      background:
        linear-gradient(
          rgba(3, 20, 15, 0.87),
          rgba(2, 14, 10, 0.94)
        ) !important;

      box-shadow: 0 18px 42px rgba(0, 0, 0, 0.50) !important;
      backdrop-filter: blur(9px);
      -webkit-backdrop-filter: blur(9px);

      overflow: visible !important;
      text-align: left !important;
    }

    .pause-card::before,
    .pause-card::after {
      display: none !important;
    }

    .pause-settings-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;

      margin-bottom: 13px;
      padding-bottom: 10px;

      border-bottom: 1px solid rgba(185, 149, 78, 0.26);
    }

    .pause-settings-head h2 {
      margin: 0 !important;

      color: #f0ebe0 !important;
      font-family: Georgia, "Times New Roman", serif !important;
      font-size: 1rem !important;
      font-weight: 400 !important;
      letter-spacing: 0.06em !important;
      text-transform: uppercase;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    }

    .pause-settings-head p {
      margin: 3px 0 0 !important;

      color: #c8ad72 !important;
      font-family: Georgia, "Times New Roman", serif !important;
      font-size: 0.66rem !important;
      line-height: 1.3 !important;
      letter-spacing: 0.04em;
    }

    .pause-icon {
      width: 32px !important;
      height: 32px !important;
      flex: 0 0 32px;

      display: grid !important;
      place-items: center;

      margin: 0 !important;

      border-radius: 50% !important;
      border: 1px solid rgba(185, 149, 78, 0.42) !important;

      color: #e9ddc3 !important;
      background: rgba(2, 16, 12, 0.48) !important;

      font-family: Georgia, "Times New Roman", serif !important;
      font-size: 0.9rem !important;
      line-height: 1 !important;

      box-shadow: none !important;
    }

    .pause-time-option,
    .pause-action {
      width: 100% !important;
      min-height: 60px !important;
      padding: 9px 10px !important;

      display: grid !important;
      grid-template-columns: 34px minmax(0, 1fr) auto !important;
      align-items: center !important;
      gap: 9px !important;

      border-radius: 2px !important;
      border: 1px solid rgba(185, 149, 78, 0.28) !important;

      color: #eee7d8 !important;
      background: rgba(4, 20, 16, 0.54) !important;

      font-family: Georgia, "Times New Roman", serif !important;
      text-align: left !important;

      box-shadow: none !important;
    }

    .pause-time-option {
      margin-bottom: 9px;
    }

    .pause-action + .pause-action {
      margin-top: 9px !important;
    }

    .pause-row-icon {
      font-family: Arial, sans-serif;
      font-size: 1.05rem;
      text-align: center;
    }

    .pause-row-copy {
      min-width: 0;

      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .pause-row-copy strong {
      color: #f0d37b;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 0.75rem;
      font-weight: 700;
      line-height: 1.15;
    }

    .pause-row-copy small {
      color: rgba(238, 231, 216, 0.61);
      font-family: Georgia, "Times New Roman", serif;
      font-size: 0.59rem;
      line-height: 1.25;
    }

    .pause-clock {
      margin: 0 !important;
      padding: 0 !important;

      color: #f1d06d !important;
      background: transparent !important;
      border: 0 !important;

      font-family: Georgia, "Times New Roman", serif !important;
      font-size: 1.08rem !important;
      font-weight: 700 !important;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.04em !important;
      white-space: nowrap;

      text-shadow: none !important;
    }

    .pause-row-mark {
      color: #c9aa62;
      font-family: Arial, sans-serif;
      font-size: 1rem;
      font-weight: 900;
      text-align: center;
    }

    .pause-action.primary {
      border-color: rgba(205, 170, 93, 0.78) !important;
      color: #eee7d8 !important;
      background: rgba(185, 149, 78, 0.08) !important;
    }

    .pause-action.primary .pause-row-copy strong {
      color: #f1d06d;
    }

    .pause-action.danger {
      border-color: rgba(169, 82, 82, 0.45) !important;
      color: #eee7d8 !important;
      background: rgba(74, 18, 18, 0.23) !important;
    }

    .pause-action.danger .pause-row-copy strong {
      color: #e1a6a6;
    }

    .pause-action:hover,
    .pause-action:focus-visible {
      border-color: rgba(205, 170, 93, 0.58) !important;
      background: rgba(185, 149, 78, 0.07) !important;
    }

    .pause-action:active {
      transform: scale(0.995) !important;
    }


    /* =======================================
       RESULTADO = MISMO ESTILO DE PAUSA/AJUSTES
       Mantiene recompensa, confeti y funcionalidad.
    ======================================= */

    .result-overlay {
      padding:
        max(18px, env(safe-area-inset-top))
        18px
        max(18px, env(safe-area-inset-bottom)) !important;

      background: rgba(1, 8, 6, 0.82) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }

    .result-card {
      width: min(100%, 380px) !important;
      max-width: 380px !important;
      max-height: 90dvh !important;

      padding: 16px !important;

      border-radius: 4px !important;
      border: 1px solid rgba(185, 149, 78, 0.47) !important;

      color: #eee7d8 !important;
      background:
        linear-gradient(
          rgba(3, 20, 15, 0.89),
          rgba(2, 14, 10, 0.95)
        ) !important;

      box-shadow: 0 18px 42px rgba(0, 0, 0, 0.50) !important;
      backdrop-filter: blur(9px);
      -webkit-backdrop-filter: blur(9px);

      text-align: left !important;

      scrollbar-width: thin;
      scrollbar-color:
        rgba(185,149,78,.44)
        rgba(255,255,255,.03);
    }

    .result-card::-webkit-scrollbar {
      width: 5px !important;
    }

    .result-card::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: rgba(185, 149, 78, 0.44) !important;
    }

    .result-settings-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;

      margin-bottom: 12px;
      padding-bottom: 10px;

      border-bottom: 1px solid rgba(185, 149, 78, 0.26);
    }

    .result-settings-copy {
      min-width: 0;
      flex: 1 1 auto;
    }

    .result-title {
      margin: 0 !important;
      padding: 0 !important;

      color: #f0ebe0 !important;

      font-family: Georgia, "Times New Roman", serif !important;
      font-size: 1rem !important;
      font-weight: 400 !important;
      line-height: 1.15 !important;
      letter-spacing: 0.055em !important;

      text-align: left !important;
      text-transform: uppercase;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    }

    .result-text {
      margin: 4px 0 0 !important;

      color: #c8ad72 !important;

      font-family: Georgia, "Times New Roman", serif !important;
      font-size: 0.64rem !important;
      line-height: 1.38 !important;
      letter-spacing: 0.015em;

      text-align: left !important;
    }

    .result-emoji {
      width: 34px !important;
      height: 34px !important;
      flex: 0 0 34px;

      display: grid !important;
      place-items: center;

      margin: 0 !important;

      border-radius: 50% !important;
      border: 1px solid rgba(185, 149, 78, 0.42);

      color: #f0d37b;
      background: rgba(2, 16, 12, 0.48);

      font-family: Arial, sans-serif !important;
      font-size: 1rem !important;
      line-height: 1 !important;
    }

    /* Insignias especiales siguen siendo pequeñas, pero más planas. */
    .result-special-badges {
      margin: 0 0 9px !important;
      justify-content: flex-start !important;
      gap: 6px !important;
    }

    .result-special-badge {
      padding: 5px 8px !important;

      border-radius: 2px !important;
      border: 1px solid rgba(185, 149, 78, 0.38) !important;

      color: #e7d39d !important;
      background: rgba(185, 149, 78, 0.06) !important;

      font-family: Georgia, "Times New Roman", serif !important;
      font-size: 0.60rem !important;
      font-weight: 700 !important;
    }

    /* Recompensas con aspecto de panel de ajustes, no tarjeta redonda. */
    .result-reward {
      margin: 0 0 9px !important;
      padding: 10px !important;

      border-radius: 2px !important;
      border: 1px solid rgba(185, 149, 78, 0.28) !important;

      background: rgba(4, 20, 16, 0.54) !important;
    }

    .result-reward-head {
      gap: 7px !important;
    }

    .result-reward-pill {
      padding: 8px 7px !important;

      border-radius: 2px !important;
      border: 1px solid rgba(185, 149, 78, 0.20);

      color: #f0d37b !important;
      background: rgba(0, 0, 0, 0.12) !important;

      font-family: Georgia, "Times New Roman", serif !important;
      font-size: 0.68rem !important;
      font-weight: 700 !important;
    }

    .result-level-line {
      margin-top: 9px !important;

      color: rgba(238, 231, 216, 0.69) !important;

      font-family: Georgia, "Times New Roman", serif !important;
      font-size: 0.54rem !important;
      font-weight: 600 !important;
    }

    .result-progress {
      height: 6px !important;
      margin-top: 6px !important;

      border-radius: 1px !important;
      background: rgba(0, 0, 0, 0.24) !important;
    }

    .result-progress-fill {
      border-radius: 1px !important;
      background:
        linear-gradient(
          90deg,
          #a97d2b,
          #f0d37b
        ) !important;
    }

    .result-reward-detail {
      margin: 8px 0 0 !important;

      color: rgba(238, 231, 216, 0.57) !important;

      font-family: Georgia, "Times New Roman", serif !important;
      font-size: 0.51rem !important;
      line-height: 1.35 !important;

      text-align: left !important;
    }

    .result-level-up {
      margin-top: 8px !important;
      padding: 6px 8px !important;

      border-radius: 2px !important;
      border: 1px solid rgba(205, 170, 93, 0.58);

      color: #f0d37b !important;
      background: rgba(185, 149, 78, 0.08) !important;

      font-family: Georgia, "Times New Roman", serif !important;
      font-size: 0.58rem !important;
      font-weight: 700 !important;
    }

    /* Las acciones ahora son filas, igual que PAUSA/AJUSTES. */
    .result-buttons {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 8px !important;
      margin-top: 0 !important;
    }

    .result-button,
    .result-button.view-game,
    .result-button.primary {
      width: 100% !important;
      min-height: 58px !important;
      padding: 8px 10px !important;

      display: grid !important;
      grid-template-columns: 34px minmax(0, 1fr) auto !important;
      align-items: center !important;
      gap: 9px !important;

      grid-column: auto !important;

      border-radius: 2px !important;
      border: 1px solid rgba(185, 149, 78, 0.28) !important;

      color: #eee7d8 !important;
      background: rgba(4, 20, 16, 0.54) !important;

      font-family: Georgia, "Times New Roman", serif !important;

      text-align: left !important;
      box-shadow: none !important;
    }

    .result-button.primary {
      border-color: rgba(205, 170, 93, 0.70) !important;
      background: rgba(185, 149, 78, 0.08) !important;
    }

    .result-row-icon {
      font-family: Arial, sans-serif;
      font-size: 1rem;
      text-align: center;
    }

    .result-row-copy {
      min-width: 0;

      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .result-row-copy strong {
      color: #f0d37b;

      font-family: Georgia, "Times New Roman", serif;
      font-size: 0.73rem;
      font-weight: 700;
      line-height: 1.15;
    }

    .result-row-copy small {
      color: rgba(238, 231, 216, 0.60);

      font-family: Georgia, "Times New Roman", serif;
      font-size: 0.57rem;
      line-height: 1.24;
    }

    .result-row-mark {
      color: #c9aa62;
      font-family: Arial, sans-serif;
      font-size: 1rem;
      font-weight: 900;
    }

    .result-button:hover,
    .result-button:focus-visible {
      border-color: rgba(205, 170, 93, 0.56) !important;
      background: rgba(185, 149, 78, 0.07) !important;
    }

    .result-button:active {
      transform: scale(0.995) !important;
    }

    @media (max-height: 600px) {
      .result-card {
        max-height: 94dvh !important;
        padding: 12px !important;
      }

      .result-button,
      .result-button.view-game,
      .result-button.primary {
        min-height: 52px !important;
      }
    }


    /* =======================================
       UX/UI · FASE 1
       - Mejor área táctil sin rediseñar controles
       - Textos pequeños más legibles
       - Foco visible para accesibilidad
       ======================================= */

    /* Respuesta táctil directa en controles interactivos. */
    .game-screen button,
    .game-screen [role="button"],
    .modal button,
    .pause-overlay button,
    .result-overlay button {
      touch-action: manipulation;
      -ms-touch-action: manipulation;
    }

    /* Foco claro para teclado, controles externos y accesibilidad.
       Solo aparece con navegación de foco, no al tocar normalmente. */
    button:focus-visible,
    [role="button"]:focus-visible,
    select:focus-visible,
    input:focus-visible {
      outline: 2px solid #f0d37b !important;
      outline-offset: 2px !important;
      box-shadow: 0 0 0 3px rgba(240, 211, 123, 0.14) !important;
    }

    /* -------------------------------------------------------
       ÁREA TÁCTIL
       Los iconos pequeños mantienen su tamaño visual,
       pero reciben una zona invisible mayor alrededor.
       ------------------------------------------------------- */

    .game-screen .pilot-back,
    .game-screen .game-pause-button,
    .game-screen .game-settings-button {
      position: relative;
      z-index: 6;
      overflow: visible !important;
    }

    .game-screen .pilot-back::before,
    .game-screen .game-pause-button::before,
    .game-screen .game-settings-button::before {
      content: "";
      position: absolute;
      inset: -8px;
      border-radius: 14px;
    }

    /* Botones compactos que aparecen durante decisiones del turno. */
    .game-screen .discard-choice-button,
    .game-screen .compact-action {
      position: relative;
      overflow: visible !important;
    }

    .game-screen .discard-choice-button::before,
    .game-screen .compact-action::before {
      content: "";
      position: absolute;
      inset: -5px -3px;
      border-radius: 10px;
    }

    /* PASO / REPETIR y acciones principales:
       mínimo cómodo, con un cambio visual casi imperceptible. */
    .game-screen.display-fit .pilot-action,
    .game-screen.display-fit .action-row-secondary .compact-action {
      min-height: 38px;
    }

    /* -------------------------------------------------------
       LEGIBILIDAD EN "AJUSTAR A PANTALLA"
       Solo subimos las etiquetas que habían quedado demasiado pequeñas.
       No tocamos cartas ni geometría de las zonas.
       ------------------------------------------------------- */

    .game-screen.display-fit .pilot-subtitle {
      font-size: 0.56rem;
    }

    .game-screen.display-fit .bot-seat-count {
      font-size: 0.50rem;
    }

    .game-screen.display-fit .pile-count {
      font-size: 0.50rem;
    }

    .game-screen.display-fit .discard-drop-hint {
      font-size: 0.47rem;
      line-height: 1.12;
    }

    .game-screen.display-fit .pilot-status {
      font-size: 0.53rem;
      line-height: 1.18;
    }

    .game-screen.display-fit .discard-choice-button {
      min-height: 36px;
      font-size: 0.55rem;
    }

    .game-screen.display-fit .human-count {
      font-size: 0.52rem;
    }

    .game-screen.display-fit .melds-label {
      font-size: 0.47rem;
    }

    .game-screen.display-fit .table-drop-placeholder {
      font-size: 0.47rem;
      line-height: 1.12;
    }

    .game-screen.display-fit .special-card-title {
      font-size: 0.47rem;
    }

    .game-screen.display-fit .special-card-hint {
      font-size: 0.43rem;
      line-height: 1.1;
    }

    .game-screen.display-fit .hand-hint {
      font-size: 0.48rem;
    }

    .game-screen.display-fit .draft-title,
    .game-screen.display-fit .draft-count {
      font-size: 0.47rem;
    }

    .game-screen.display-fit .action-row .action-label {
      font-size: 0.53rem;
      line-height: 1.05;
    }

    /* Evita que Android/iOS alteren arbitrariamente algunos textos
       al rotar o cambiar el ancho de la vista. */
    html {
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    /* Si el usuario pide menos movimiento, quitamos animaciones
       decorativas fuertes, sin afectar la funcionalidad. */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
      }

      .result-confetti-piece {
        animation: none !important;
        display: none !important;
      }

      .playing-card,
      button,
      .toast {
        transition-duration: 0.01ms !important;
      }
    }


    /* =======================================
       UX/UI · FASE 2
       Aprovechamos mejor el espacio superior:
       bots y cartas algo más legibles, sin rediseñar la mesa.
       ======================================= */

    .game-screen.display-fit .bots-area {
      gap: 6px;
      padding-inline: 1px;
      padding-bottom: 7px;
    }

    .game-screen.display-fit .bot-seat {
      min-height: 70px;
      padding: 7px 5px 6px;
    }

    .game-screen.display-fit .bot-seat-title {
      font-size: 0.66rem;
      line-height: 1.05;
    }

    .game-screen.display-fit .bot-seat-count {
      margin-top: 2px;
      font-size: 0.52rem;
      line-height: 1.05;
    }

    /* Cartas ocultas ligeramente mayores. */
    .game-screen.display-fit .bot-hand {
      min-height: 34px;
      margin-top: 4px;
    }

    .game-screen.display-fit .bot-card-back {
      width: 20px;
      height: 30px;
      flex-basis: 20px;
      border-radius: 4px;
    }

    .game-screen.display-fit .bot-card-back + .bot-card-back {
      margin-left: -9px;
    }

    /* Combinaciones que el bot ya mostró: prioridad a legibilidad. */
    .game-screen.display-fit .bot-melds {
      min-height: 31px;
      max-height: 42px;
      margin-top: 4px;
      gap: 3px;
    }

    .game-screen.display-fit .bot-meld-ribbon {
      min-height: 18px;
      padding: 2px 5px;
      gap: 2.5px;
    }

    .game-screen.display-fit .bot-meld-token {
      font-size: 0.50rem;
    }

    .game-screen.display-fit .bot-meld-ribbon.long .bot-meld-token {
      font-size: 0.44rem;
    }

    .game-screen.display-fit .bot-meld-ribbon.very-long .bot-meld-token {
      font-size: 0.37rem;
    }

    /* Conservamos el arco, pero evitamos que el aumento de tamaño
       robe demasiado espacio a la mesa central. */
    .game-screen.display-fit .bots-area.count-3 .bot-seat:nth-child(1),
    .game-screen.display-fit .bots-area.count-3 .bot-seat:nth-child(3) {
      translate: 0 6px;
    }

    .game-screen.display-fit .bots-area.count-3 .bot-seat:nth-child(2) {
      translate: 0 -2px;
    }


    /* =======================================
       UX/UI · RONDA SIN GANADOR
       Mismo lenguaje visual de Ajustes/Pausa/Resultado.
    ======================================= */

    .round-overlay {
      background: rgba(1, 8, 6, 0.82) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }

    .round-card,
    .game-screen.display-fit .round-card {
      width: min(100%, 380px) !important;
      padding: 16px !important;

      border-radius: 4px !important;
      border: 1px solid rgba(185, 149, 78, 0.47) !important;

      color: #eee7d8 !important;
      background:
        linear-gradient(
          rgba(3, 20, 15, 0.89),
          rgba(2, 14, 10, 0.95)
        ) !important;

      text-align: left !important;

      box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.50) !important;

      backdrop-filter: blur(9px);
      -webkit-backdrop-filter: blur(9px);
    }

    .round-settings-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;

      margin-bottom: 12px;
      padding-bottom: 10px;

      border-bottom:
        1px solid rgba(185, 149, 78, 0.26);
    }

    .round-settings-copy {
      min-width: 0;
      flex: 1 1 auto;
    }

    .round-card h2 {
      margin: 0 !important;

      color: #f0ebe0 !important;

      font-family:
        Georgia,
        "Times New Roman",
        serif !important;

      font-size: 1rem !important;
      font-weight: 400 !important;
      line-height: 1.2 !important;
      letter-spacing: 0.055em !important;

      text-transform: uppercase;
      text-align: left !important;
      text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.28);
    }

    .round-description {
      margin: 4px 0 0 !important;

      color: #c8ad72 !important;

      font-family:
        Georgia,
        "Times New Roman",
        serif !important;

      font-size: 0.64rem !important;
      line-height: 1.38 !important;

      text-align: left !important;
    }

    .round-emoji {
      width: 34px !important;
      height: 34px !important;
      flex: 0 0 34px;

      display: grid !important;
      place-items: center;

      border-radius: 50% !important;
      border:
        1px solid rgba(185, 149, 78, 0.42);

      color: #f0d37b;
      background:
        rgba(2, 16, 12, 0.48);

      font-family: Arial, sans-serif !important;
      font-size: 1rem !important;
      line-height: 1 !important;
    }

    .round-next-box,
    .round-action {
      width: 100% !important;
      min-height: 60px !important;
      padding: 9px 10px !important;

      display: grid !important;
      grid-template-columns:
        34px minmax(0, 1fr) auto !important;
      align-items: center !important;
      gap: 9px !important;

      border-radius: 2px !important;
      border:
        1px solid rgba(185, 149, 78, 0.28) !important;

      color: #eee7d8 !important;
      background:
        rgba(4, 20, 16, 0.54) !important;

      font-family:
        Georgia,
        "Times New Roman",
        serif !important;

      text-align: left !important;
      box-shadow: none !important;
    }

    .round-next-box {
      margin: 0 0 9px !important;
    }

    .round-action + .round-action {
      margin-top: 8px !important;
    }

    .round-row-icon {
      font-family: Arial, sans-serif;
      font-size: 1rem;
      text-align: center;
    }

    .round-row-copy {
      min-width: 0;

      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .round-row-copy strong {
      color: #f0d37b;

      font-family:
        Georgia,
        "Times New Roman",
        serif;

      font-size: 0.73rem;
      font-weight: 700;
      line-height: 1.15;
    }

    .round-row-copy small {
      color:
        rgba(238, 231, 216, 0.60);

      font-family:
        Georgia,
        "Times New Roman",
        serif;

      font-size: 0.57rem;
      line-height: 1.24;
    }

    .round-multiplier {
      color: #f1d06d !important;

      font-family:
        Georgia,
        "Times New Roman",
        serif !important;

      font-size: 0.75rem !important;
      font-weight: 700 !important;
      letter-spacing: 0.02em !important;

      white-space: nowrap;
    }

    .round-note {
      margin: 0 2px 10px !important;

      color:
        rgba(238, 231, 216, 0.55) !important;

      font-family:
        Georgia,
        "Times New Roman",
        serif !important;

      font-size: 0.58rem !important;
      line-height: 1.38 !important;

      text-align: left !important;
    }

    .round-row-mark {
      color: #c9aa62;

      font-family: Arial, sans-serif;
      font-size: 1rem;
      font-weight: 900;
    }

    .round-action.primary {
      border-color:
        rgba(205, 170, 93, 0.70) !important;

      color: #eee7d8 !important;

      background:
        rgba(185, 149, 78, 0.08) !important;
    }

    .round-action:hover,
    .round-action:focus-visible {
      border-color:
        rgba(205, 170, 93, 0.56) !important;

      background:
        rgba(185, 149, 78, 0.07) !important;
    }

    .round-action:active {
      transform: scale(0.995) !important;
    }


    /* =======================================
       MÚSICA DEL MENÚ
       La opción solo aparece fuera de la partida.
    ======================================= */

    .menu-music-option[hidden] {
      display: none !important;
    }

    .menu-music-option:not(.selected)
    .display-mode-check {
      opacity: 0.45;
    }

    .menu-volume-row {
      width: 100%;
      min-height: 66px;
      margin-top: 9px;
      padding: 10px 11px;

      display: grid;
      grid-template-columns: 35px minmax(0, 1fr);
      align-items: center;
      gap: 9px;

      border: 1px solid rgba(185, 149, 78, 0.28);
      border-radius: 2px;
      background: rgba(4, 20, 16, 0.54);
      color: #eee7d8;
    }

    .menu-volume-row[hidden] {
      display: none !important;
    }

    .menu-volume-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .menu-volume-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .menu-volume-head strong {
      color: #f0d37b;
      font-size: 0.75rem;
    }

    .menu-volume-head span {
      color: #dbc89b;
      font-size: 0.68rem;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }

    .menu-volume-slider {
      width: 100%;
      height: 28px;
      margin: 0;
      padding: 0;
      cursor: pointer;
      accent-color: #c9aa62;
      touch-action: manipulation;
    }

    .menu-volume-slider:focus-visible {
      outline: 2px solid #f1d06d;
      outline-offset: 3px;
      border-radius: 4px;
    }


    /* =======================================
       MANO: APROVECHAR TODO EL ANCHO DISPONIBLE
    ======================================= */

    /*
      Cuando CAMBIO / CARTA NUEVA está oculto,
      no reservamos su columna de 80px.
      La mano pasa a ocupar todo el ancho de la zona.
    */
    .hand-workspace:has(.special-card-slot[hidden]) {
      grid-template-columns: minmax(0, 1fr);
    }

    .game-screen.display-fit
    .hand-workspace:has(.special-card-slot[hidden]) {
      grid-template-columns: minmax(0, 1fr);
    }

    /*
      Solo dejamos un pequeño margen de seguridad
      por la inclinación de las cartas externas.
    */
    .hand-main {
      box-sizing: border-box;
      padding-inline: 4px;
    }

    .game-screen.display-fit .hand-main {
      padding-inline: 4px;
    }

    /*
      En modo Ajustar a pantalla usamos siempre
      el solapamiento calculado por JavaScript.
    */
    .game-screen.display-fit
    .human-hand
    .playing-card
    + .playing-card {
      margin-left:
        var(--hand-overlap) !important;
    }

    @media (max-width: 340px) {
      .hand-main,
      .game-screen.display-fit .hand-main {
        padding-inline: 3px;
      }
    }


    /* =======================================
       MANO RECTA · ANCHO COMPLETO
       Prioridad: leer todas las cartas.
    ======================================= */

    .human-hand {
      width: 100% !important;
      max-width: none !important;

      display: flex !important;
      align-items: flex-end !important;
      justify-content: center !important;

      padding: 8px 7px 4px !important;
      overflow: visible !important;
    }

    .human-hand .playing-card {
      /*
        Quitamos completamente el abanico.
        Las cartas permanecen verticales y legibles.
      */
      transform: none !important;
      rotate: 0deg !important;
      translate: none !important;

      flex: 0 0 auto;
      margin-top: 0 !important;

      transition:
        transform 0.14s ease,
        margin 0.14s ease,
        filter 0.14s ease !important;
    }

    .human-hand .playing-card + .playing-card,
    .game-screen.display-fit
    .human-hand
    .playing-card
    + .playing-card {
      margin-left:
        var(--hand-overlap) !important;
    }

    /*
      Una carta seleccionada sube recta en lugar
      de rotarse como en el abanico anterior.
    */
    .human-hand .playing-card.lifted,
    .human-hand .playing-card.upper.lifted {
      /* Seleccionada: sigue dentro de la mano y solo sobresale un poco.
         Se mantiene detrás de las cartas vecinas para que no las tape. */
      transform: translateY(-8px) !important;
      z-index: max(1, calc(var(--card-layer, 2) - 1)) !important;
    }

    /* Al arrastrarla sí pasa al frente y se ve completa. */
    .human-hand .playing-card.lifted.dragging,
    .human-hand .playing-card.upper.lifted.dragging {
      transform: none !important;
      z-index: 80 !important;
    }

    /*
      El área principal de la mano aprovecha toda
      la columna disponible sin margen innecesario.
    */
    .hand-main,
    .game-screen.display-fit .hand-main {
      width: 100%;
      max-width: none;
      padding-inline: 2px;
    }

    .hand-workspace:has(.special-card-slot[hidden]),
    .game-screen.display-fit
    .hand-workspace:has(.special-card-slot[hidden]) {
      grid-template-columns:
        minmax(0, 1fr) !important;
    }

    @media (max-width: 340px) {
      .human-hand {
        padding-inline: 4px !important;
      }

      .hand-main,
      .game-screen.display-fit .hand-main {
        padding-inline: 1px;
      }
    }
    /* =========================================================
       MODO PRINCIPIANTE · PISTAS POR INACTIVIDAD
       Usa dedo y carta fantasma, con ayuda visual por pasos.
       Solo guía: no juega automáticamente.
       ========================================================= */
    .beginner-hint {
      outline: 2px solid rgba(255, 221, 120, 0.92) !important;
      outline-offset: 3px;
      box-shadow:
        0 0 0 4px rgba(212, 175, 55, 0.14),
        0 0 16px rgba(255, 217, 93, 0.48),
        0 0 30px rgba(255, 196, 46, 0.22) !important;
      animation: beginnerHintTargetPulse 1.35s ease-in-out infinite;
    }

    .beginner-hint-zone {
      border-radius: 16px;
    }

    .beginner-hint-card {
      transform: translateY(-10px) scale(1.03);
      box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.24),
        0 0 0 2px rgba(255, 222, 123, 0.82),
        0 0 16px rgba(255, 210, 79, 0.55) !important;
    }

    .beginner-guide {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9999;
    }

    .beginner-guide-bubble {
      position: fixed;
      max-width: min(82vw, 285px);
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255, 224, 132, 0.72);
      background: rgba(7, 28, 24, 0.97);
      color: #f5e8b8;
      font-size: 0.92rem;
      line-height: 1.35;
      font-weight: 700;
      box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 214, 90, 0.12);
      text-align: center;
      backdrop-filter: blur(6px);
    }

    .beginner-guide-bubble::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -8px;
      width: 14px;
      height: 14px;
      background: inherit;
      border-right: 1px solid rgba(255, 224, 132, 0.72);
      border-bottom: 1px solid rgba(255, 224, 132, 0.72);
      transform: translateX(-50%) rotate(45deg);
    }

    .beginner-guide-bubble.below::after {
      top: -8px;
      bottom: auto;
      border-right: none;
      border-bottom: none;
      border-left: 1px solid rgba(255, 224, 132, 0.72);
      border-top: 1px solid rgba(255, 224, 132, 0.72);
    }

    .beginner-guide-finger {
      position: fixed;
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      line-height: 1;
      opacity: 0.95;
      transform: translate(-9999px, -9999px);
      filter: drop-shadow(0 0 10px rgba(255, 214, 89, 0.60));
      will-change: transform;
      z-index: 2;
    }

    .beginner-guide-finger.pointing {
      animation: beginnerFingerPoint 1.08s ease-in-out infinite;
    }

    .beginner-guide-trail {
      position: fixed;
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(255, 234, 156, 0.18), rgba(255, 220, 109, 0.86));
      box-shadow: 0 0 14px rgba(255, 214, 89, 0.38);
      transform-origin: 0 50%;
      opacity: 0.92;
      z-index: 1;
    }

    .beginner-guide-ghost-card {
      position: fixed;
      width: 44px;
      height: 62px;
      border-radius: 10px;
      border: 2px solid rgba(255, 220, 114, 0.86);
      background:
        linear-gradient(180deg, rgba(252, 248, 235, 0.96), rgba(245, 233, 198, 0.98));
      box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.28),
        0 0 16px rgba(255, 210, 79, 0.42);
      color: #17352c;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      font-weight: 800;
      letter-spacing: 0.02em;
      transform: translate(-9999px, -9999px);
      z-index: 3;
    }

    .beginner-guide-ghost-card .ghost-top,
    .beginner-guide-ghost-card .ghost-bottom {
      position: absolute;
      left: 5px;
      font-size: 10px;
      line-height: 1;
      opacity: 0.92;
    }

    .beginner-guide-ghost-card .ghost-bottom {
      left: auto;
      right: 5px;
      bottom: 5px;
      transform: rotate(180deg);
    }

    .beginner-guide-ghost-card .ghost-top {
      top: 5px;
    }

    .beginner-guide-ghost-card .ghost-center {
      font-size: 18px;
      line-height: 1;
    }

    .beginner-guide-ghost-card .ghost-label {
      font-size: 8px;
      letter-spacing: 0.10em;
    }

    @keyframes beginnerHintTargetPulse {
      0%, 100% {
        outline-color: rgba(255, 221, 120, 0.55);
        box-shadow:
          0 0 0 3px rgba(212, 175, 55, 0.10),
          0 0 10px rgba(255, 217, 93, 0.34),
          0 0 22px rgba(255, 196, 46, 0.14) !important;
      }
      50% {
        outline-color: rgba(255, 233, 158, 0.98);
        box-shadow:
          0 0 0 5px rgba(212, 175, 55, 0.18),
          0 0 20px rgba(255, 220, 105, 0.64),
          0 0 36px rgba(255, 196, 46, 0.24) !important;
      }
    }

    @keyframes beginnerFingerPoint {
      0%, 100% {
        transform: translate(var(--finger-x, -9999px), var(--finger-y, -9999px)) scale(1);
      }
      50% {
        transform: translate(var(--finger-x, -9999px), calc(var(--finger-y, -9999px) + 6px)) scale(1.04);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .beginner-hint,
      .beginner-guide-finger.pointing {
        animation: none;
      }
    }

    }



    /* =========================================================
       LABORATORIO DE DESARROLLO
       No afecta progreso, historial ni partida guardada normal.
       ========================================================= */
    .menu-lab-row {
      border-color: rgba(88, 233, 180, 0.36) !important;
      background: linear-gradient(135deg, rgba(16, 74, 62, 0.52), rgba(7, 38, 32, 0.68)) !important;
    }

    .menu-lab-row .menu-row-icon {
      filter: drop-shadow(0 0 7px rgba(88, 233, 180, 0.42));
    }

    .lab-toolbar {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 7px;
      flex-wrap: wrap;
      margin: 7px 8px 3px;
      padding: 7px;
      border: 1px solid rgba(79, 224, 176, 0.42);
      border-radius: 13px;
      background: rgba(4, 42, 34, 0.93);
      box-shadow: 0 7px 20px rgba(0,0,0,.22), inset 0 0 18px rgba(72, 214, 166, .05);
    }

    .game-screen.lab-active .lab-toolbar {
      display: flex;
    }

    .game-screen.lab-active .pilot-title::after {
      content: "  ·  🧪 LAB";
      color: #73e9ba;
      font-size: .58em;
      letter-spacing: .06em;
      white-space: nowrap;
    }

    .lab-toolbar-label {
      width: 100%;
      text-align: center;
      color: #83ebc2;
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .lab-tool-btn {
      flex: 1 1 92px;
      min-height: 38px;
      border-radius: 10px;
      border: 1px solid rgba(212,175,55,.42);
      background: rgba(9, 56, 46, .9);
      color: #f4df9b;
      font-weight: 800;
      font-family: inherit;
    }

    .lab-tool-btn:disabled {
      opacity: .35;
      filter: grayscale(.35);
    }

    .lab-tool-btn:not(:disabled):active {
      transform: scale(.97);
    }


    .lab-config-actions {
      display: none;
      gap: 8px;
      margin-top: 10px;
    }

    .modal.lab-config-active .lab-config-actions {
      display: grid;
    }

    .lab-config-button {
      width: 100%;
      min-height: 44px;
      border-radius: 12px;
      border: 1px solid rgba(79, 224, 176, 0.45);
      background: rgba(8, 56, 45, 0.86);
      color: #dff9ec;
      font: inherit;
      font-weight: 800;
    }

    .lab-config-button:disabled {
      opacity: .38;
    }


    .game-screen .human-melds > .table-meld {
      order: 1;
    }

    .game-screen .human-melds > .traditional-new-meld {
      order: 3;
    }

    /* =======================================
       TUTORIAL JUGABLE · LECCIÓN 1
    ======================================= */

    .tutorial-menu-row .menu-row-icon {
      color: #f1d06d;
    }

    .tutorial-coach {
      position: fixed;
      left: 50%;
      bottom:
        max(
          8px,
          env(safe-area-inset-bottom)
        );
      z-index: 2200;

      width: min(
        calc(100% - 18px),
        430px
      );

      padding: 8px 10px;

      border-radius: 18px;
      border:
        1px solid
        rgba(241, 208, 109, 0.62);

      color: #eef4f0;

      background:
        linear-gradient(
          180deg,
          rgba(24, 73, 59, 0.985),
          rgba(7, 31, 24, 0.99)
        );

      box-shadow:
        0 18px 44px
          rgba(0, 0, 0, 0.48),
        0 0 0 1px
          rgba(255, 255, 255, 0.035)
          inset;

      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .tutorial-coach[hidden] {
      display: none !important;
    }

    .tutorial-coach.intro,
    .tutorial-coach.complete {
      top: 50%;
      bottom: auto;

      width: min(
        calc(100% - 34px),
        360px
      );

      padding: 18px 16px 15px;

      transform:
        translate(
          -50%,
          -50%
        );

      text-align: center;
    }

    .tutorial-coach:not(.intro):not(.complete) {
      transform:
        translateX(-50%);

      display: grid;
      grid-template-columns:
        auto 1fr;
      grid-template-areas:
        "progress progress"
        "icon copy"
        "actions actions";
      column-gap: 8px;
      row-gap: 3px;

      max-height: 150px;
    }

    .tutorial-coach:not(.intro):not(.complete)
    .tutorial-coach-progress {
      grid-area: progress;
      margin-bottom: 1px;
    }

    .tutorial-coach:not(.intro):not(.complete)
    .tutorial-coach-icon {
      grid-area: icon;
      align-self: center;

      margin: 0;

      font-size: 1.05rem;
    }

    .tutorial-coach:not(.intro):not(.complete)
    .tutorial-coach-copy {
      grid-area: copy;
      min-width: 0;
    }

    .tutorial-coach:not(.intro):not(.complete)
    .tutorial-coach-copy strong {
      font-size: 0.69rem;
    }

    .tutorial-coach:not(.intro):not(.complete)
    .tutorial-coach-copy p {
      margin-top: 2px;

      font-size: 0.53rem;
      line-height: 1.25;
    }

    .tutorial-coach:not(.intro):not(.complete)
    .tutorial-coach-actions {
      grid-area: actions;

      margin-top: 4px;
    }

    .tutorial-coach:not(.intro):not(.complete)
    .tutorial-coach-action {
      min-height: 32px;
      padding: 5px 8px;

      font-size: 0.55rem;
    }


    .tutorial-coach-progress {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;

      margin-bottom: 7px;

      color:
        rgba(237, 244, 240, 0.55);

      font-size: 0.48rem;
      font-weight: 900;
      letter-spacing: 0.55px;
    }

    .tutorial-coach-icon {
      margin-bottom: 5px;

      color: #f2d36e;

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

    .tutorial-coach-copy strong {
      display: block;

      color: #f3d575;

      font-size: 0.83rem;
      font-weight: 950;
      line-height: 1.15;
    }

    .tutorial-coach-copy p {
      margin-top: 5px;

      color:
        rgba(237, 244, 240, 0.82);

      font-size: 0.63rem;
      line-height: 1.35;
    }

    .tutorial-coach.intro
    .tutorial-coach-icon,
    .tutorial-coach.complete
    .tutorial-coach-icon {
      margin-bottom: 9px;

      font-size: 2rem;
    }

    .tutorial-coach.intro
    .tutorial-coach-copy strong,
    .tutorial-coach.complete
    .tutorial-coach-copy strong {
      font-size: 1rem;
    }

    .tutorial-coach.intro
    .tutorial-coach-copy p,
    .tutorial-coach.complete
    .tutorial-coach-copy p {
      font-size: 0.70rem;
    }

    .tutorial-coach-actions {
      display: flex;
      gap: 7px;
      margin-top: 12px;
    }

    .tutorial-coach-actions
    .tutorial-coach-action {
      margin-top: 0;
      flex: 1 1 0;
    }

    .tutorial-coach-action.secondary {
      color: #f1d98a;

      border:
        1px solid
        rgba(241, 208, 109, 0.35);

      background:
        rgba(255, 255, 255, 0.045);
    }

    .tutorial-coach-action {
      width: 100%;
      min-height: 42px;
      margin-top: 12px;
      padding: 8px 11px;

      border: none;
      border-radius: 12px;

      color: #241704;

      background:
        linear-gradient(
          180deg,
          #f4d875,
          #c99b30
        );

      font-family: inherit;
      font-size: 0.67rem;
      font-weight: 950;
      letter-spacing: 0.45px;

      cursor: pointer;
    }

    .tutorial-coach-action[hidden] {
      display: none !important;
    }

    .tutorial-focus {
      position: relative !important;
      z-index: 2101 !important;

      box-shadow:
        0 0 0 3px
          rgba(241, 208, 109, 0.88),
        0 0 22px
          rgba(241, 208, 109, 0.48) !important;

      animation:
        tutorialFocusPulse
        1.05s ease-in-out infinite;
    }

    .tutorial-drop-target {
      position: relative !important;
      z-index: 2101 !important;

      border-color:
        rgba(102, 216, 236, 0.95) !important;

      box-shadow:
        0 0 0 3px
          rgba(102, 216, 236, 0.24),
        0 0 24px
          rgba(102, 216, 236, 0.42) !important;

      animation:
        tutorialDropPulse
        1.05s ease-in-out infinite;
    }

    @keyframes tutorialDropPulse {
      0%,
      100% {
        filter: brightness(1);
      }

      50% {
        filter: brightness(1.12);
      }
    }

    .tutorial-focus-card {
      z-index: 2102 !important;

      box-shadow:
        0 0 0 3px
          rgba(101, 215, 169, 0.92),
        0 0 20px
          rgba(101, 215, 169, 0.46),
        0 8px 16px
          rgba(0, 0, 0, 0.34) !important;
    }

    .tutorial-screen-active
    .game-settings-button,
    .tutorial-screen-active
    .game-pause-button,
    .tutorial-screen-active
    #btnDeclarePass,
    .tutorial-screen-active
    #btnRedeal,
    .tutorial-screen-active
    #btnTraditionalClaim {
      opacity: 0.24 !important;
      pointer-events: none !important;
    }

    .tutorial-screen-active
    .match-clock {
      opacity: 0.45;
    }

    @keyframes tutorialFocusPulse {
      0%,
      100% {
        filter: brightness(1);
      }

      50% {
        filter: brightness(1.16);
      }
    }

    @media (
      prefers-reduced-motion:
      reduce
    ) {
      .tutorial-focus {
        animation: none;
      }
    }

    .game-screen.display-fit
    ~ .tutorial-coach,
    .game-screen.display-fit
    + .tutorial-coach {
      font-size: inherit;
    }



    body.tutorial-running
    .drawn-card-choice,
    body.tutorial-running
    .drawn-card-choice-panel,
    body.tutorial-running
    .opportunity-choice,
    body.tutorial-running
    .opportunity-panel,
    body.tutorial-running
    .hint-bubble,
    body.tutorial-running
    .game-hint-bubble,
    body.tutorial-running
    .beginner-hint,
    body.tutorial-running
    .assistant-hint {
      display: none !important;
    }

    body.tutorial-running
    .tutorial-coach {
      pointer-events: auto;
    }

    body:not(.tutorial-running)
    .tutorial-coach {
      display: none !important;
    }


    body.tutorial-running
    #newCardChoice,
    body.tutorial-running
    #beginnerHintBubble,
    body.tutorial-running
    #beginnerHintOverlay,
    body.tutorial-running
    .beginner-hint-overlay,
    body.tutorial-running
    .beginner-hint-card,
    body.tutorial-running
    .beginner-hint-message,
    body.tutorial-running
    .beginner-hint-ghost {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }


    .tutorial-coach:not(.intro):not(.complete) {
      width: min(
        calc(100% - 16px),
        440px
      );

      max-height: 118px;
      padding: 6px 9px;
    }

    .tutorial-coach:not(.intro):not(.complete)
    .tutorial-coach-copy p {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .tutorial-coach:not(.intro):not(.complete)
    .tutorial-coach-actions {
      margin-top: 2px;
    }

    .tutorial-coach:not(.intro):not(.complete)
    .tutorial-coach-action {
      min-height: 27px;
      padding: 3px 7px;
    }


    /* =======================================
       SELECTOR DE LECCIONES
    ======================================= */

    .tutorial-selector-overlay {
      position: fixed;
      inset: 0;
      z-index: 5000;

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

      padding:
        max(18px, env(safe-area-inset-top))
        16px
        max(18px, env(safe-area-inset-bottom));

      background:
        rgba(0, 18, 13, 0.78);

      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .tutorial-selector-overlay[hidden] {
      display: none !important;
    }

    .tutorial-selector-card {
      width: min(
        100%,
        410px
      );

      padding: 16px;

      border-radius: 20px;
      border:
        1px solid
        rgba(241, 208, 109, 0.45);

      background:
        linear-gradient(
          180deg,
          rgba(16, 57, 44, 0.99),
          rgba(5, 28, 21, 0.995)
        );

      box-shadow:
        0 22px 55px
        rgba(0, 0, 0, 0.55);
    }

    .tutorial-selector-head {
      display: flex;
      align-items: center;
      gap: 11px;

      margin-bottom: 14px;
    }

    .tutorial-selector-icon {
      font-size: 1.7rem;
    }

    .tutorial-selector-head strong {
      display: block;

      color: #f2d36f;

      font-size: 0.95rem;
      line-height: 1.1;
    }

    .tutorial-selector-head span:not(.tutorial-selector-icon) {
      display: block;

      margin-top: 3px;

      color:
        rgba(238, 244, 240, 0.60);

      font-size: 0.57rem;
    }

    .tutorial-lesson-option {
      width: 100%;
      min-height: 64px;
      margin-top: 8px;
      padding: 9px 10px;

      display: grid;
      grid-template-columns:
        38px
        1fr
        auto;
      align-items: center;
      gap: 9px;

      border-radius: 14px;
      border:
        1px solid
        rgba(241, 208, 109, 0.20);

      color: #eef4f0;

      background:
        rgba(255, 255, 255, 0.035);

      text-align: left;

      font-family: inherit;
    }

    .tutorial-lesson-option:active {
      transform:
        scale(0.985);

      background:
        rgba(241, 208, 109, 0.08);
    }

    .tutorial-lesson-number {
      width: 36px;
      height: 36px;

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

      border-radius: 50%;

      color: #2c1d04;

      background:
        linear-gradient(
          180deg,
          #f4db7c,
          #c89b30
        );

      font-size: 0.78rem;
      font-weight: 950;
    }

    .tutorial-lesson-copy strong {
      display: block;

      color: #f2d77b;

      font-size: 0.68rem;
    }

    .tutorial-lesson-copy small {
      display: block;

      margin-top: 2px;

      color:
        rgba(236, 244, 239, 0.56);

      font-size: 0.49rem;
      line-height: 1.2;
    }

    .tutorial-lesson-arrow {
      color:
        rgba(241, 208, 109, 0.58);

      font-size: 1.25rem;
    }

    .tutorial-selector-close {
      width: 100%;
      min-height: 40px;
      margin-top: 13px;

      border-radius: 12px;
      border:
        1px solid
        rgba(241, 208, 109, 0.20);

      color:
        rgba(241, 216, 138, 0.88);

      background:
        rgba(255, 255, 255, 0.025);

      font-family: inherit;
      font-size: 0.60rem;
      font-weight: 900;
    }


    body.tutorial-running
    .tutorial-pass-enabled {
      opacity: 1 !important;
      pointer-events: auto !important;

      box-shadow:
        0 0 0 3px
          rgba(241, 208, 109, 0.22),
        0 0 22px
          rgba(241, 208, 109, 0.42) !important;
    }


    /*
      LECCIÓN 5:
      El cuadro debe quedar por encima de los botones de acción
      para que PASO permanezca completamente tocable.
    */
    .tutorial-coach.tutorial-pass-step {
      bottom:
        max(
          118px,
          calc(
            env(safe-area-inset-bottom) +
            108px
          )
        ) !important;

      max-height: 112px !important;
    }

    .tutorial-coach.tutorial-pass-step
    .tutorial-coach-actions {
      margin-top: 2px;
    }

    /*
      En esta lección el único elemento guiado es PASO.
      El mazo no recibe brillo ni indicación del tutorial.
    */
    body.tutorial-running
    .tutorial-pass-step
    ~ .game-screen
    #deckButton {
      box-shadow: none !important;
      animation: none !important;
    }


    /*
      LECCIÓN 5 · PASO
      Esta regla debe ganar sobre:
      .tutorial-screen-active #btnDeclarePass
      que bloquea los controles normales del tutorial.
    */
    body.tutorial-running
    .tutorial-screen-active
    #btnDeclarePass.tutorial-pass-enabled {
      opacity: 1 !important;
      pointer-events: auto !important;
      cursor: pointer !important;

      filter: none !important;

      box-shadow:
        0 0 0 3px
          rgba(241, 208, 109, 0.22),
        0 0 24px
          rgba(241, 208, 109, 0.48) !important;
    }

    body.tutorial-running
    .tutorial-screen-active
    #btnDeclarePass.tutorial-pass-enabled:disabled {
      opacity: 1 !important;
      pointer-events: auto !important;
    }

.lab-scenario-overlay{position:fixed;inset:0;z-index:5200;display:flex;align-items:center;justify-content:center;padding:10px;background:rgba(0,13,10,.88);backdrop-filter:blur(8px)}.lab-scenario-overlay[hidden]{display:none!important}.lab-scenario-card{width:min(100%,450px);max-height:calc(100dvh - 20px);overflow-y:auto;padding:12px;border-radius:18px;border:1px solid rgba(239,205,98,.42);background:linear-gradient(180deg,rgba(13,55,42,.995),rgba(4,27,20,.995));box-shadow:0 22px 55px rgba(0,0,0,.58)}.lab-scenario-header{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}.lab-scenario-header strong{display:block;color:#f1d36d;font-size:.76rem}.lab-scenario-header span{display:block;margin-top:3px;color:rgba(237,244,240,.6);font-size:.5rem}.lab-scenario-close{width:34px;height:34px;border-radius:10px;border:1px solid rgba(240,207,99,.24);color:#f1d36d;background:rgba(255,255,255,.035)}.lab-scenario-destination>span{display:block;margin-bottom:5px;color:rgba(239,220,154,.88);font-size:.49rem;font-weight:800}.lab-scenario-destination-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin-bottom:9px}.lab-destination-btn{min-height:36px;padding:5px;border-radius:10px;border:1px solid rgba(239,205,98,.2);color:rgba(238,245,241,.76);background:rgba(255,255,255,.025);font-size:.48rem;font-weight:850}.lab-destination-btn.selected{color:#2b2106;border-color:rgba(247,216,107,.82);background:linear-gradient(180deg,#f4da78,#c99d32)}.lab-scenario-deck{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:2px;margin-bottom:9px;padding:6px 4px;border-radius:12px;border:1px solid rgba(239,205,98,.15);background:rgba(0,0,0,.12)}.lab-picker-card{min-width:0;aspect-ratio:.68;display:flex;align-items:center;justify-content:center;border-radius:5px;border:1px solid rgba(32,31,24,.18);color:#111;background:#f7f2e4;font-family:Georgia,serif;font-size:clamp(.34rem,1.7vw,.53rem);font-weight:900}.lab-picker-card.red{color:#c53232}.lab-picker-card.used{opacity:.18;filter:grayscale(1);pointer-events:none}.lab-scenario-preview{display:grid;gap:5px}.lab-preview-section{padding:5px;border-radius:9px;border:1px solid rgba(239,205,98,.14);background:rgba(255,255,255,.02)}.lab-preview-section>strong{display:block;margin-bottom:3px;color:rgba(242,214,123,.84);font-size:.45rem}.lab-preview-cards{min-height:29px;display:flex;flex-wrap:wrap;gap:3px;align-items:center}.lab-preview-empty{color:rgba(238,244,240,.32);font-size:.44rem}.lab-preview-card{min-width:29px;min-height:28px;padding:3px 5px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;color:#111;background:#f7f2e4;font-family:Georgia,serif;font-size:.56rem;font-weight:900}.lab-preview-card.red{color:#c53232}.lab-preview-card button{margin-left:4px;border:none;color:#9e2525;background:transparent;font-size:.5rem;font-weight:900}.lab-scenario-actions{display:grid;grid-template-columns:.8fr 1.2fr;gap:7px;margin-top:9px}.lab-scenario-action{min-height:40px;border-radius:10px;border:1px solid rgba(239,205,98,.24);font-size:.53rem;font-weight:900}.lab-scenario-action.secondary{color:rgba(241,216,138,.88);background:rgba(255,255,255,.025)}.lab-scenario-action.primary{color:#261b03;background:linear-gradient(180deg,#f5dc7b,#d0a235)}.lab-scenario-note{display:block;margin-top:7px;color:rgba(235,243,238,.42);font-size:.42rem;line-height:1.35;text-align:center}@media(max-width:380px){.lab-scenario-deck{grid-template-columns:repeat(9,minmax(0,1fr))}}

    .lab-destination-btn.special {
      border-color: rgba(100, 205, 232, 0.28);
    }

    .lab-destination-btn.bot {
      border-color: rgba(138, 192, 132, 0.25);
    }

    .lab-preview-section.accent {
      border-color: rgba(100, 205, 232, 0.24);
    }

    .lab-preview-section.bot {
      border-color: rgba(138, 192, 132, 0.20);
    }

    .lab-scenario-destination-buttons {
      grid-template-columns:
        repeat(3, 1fr);
    }

    @media (max-width: 380px) {
      .lab-scenario-destination-buttons {
        grid-template-columns:
          repeat(2, 1fr);
      }
    }


    .human-melds-zone.new-block-drop-target {
      box-shadow:
        inset 0 0 0 2px
          rgba(101, 215, 169, 0.55),
        0 0 16px
          rgba(101, 215, 169, 0.16);
    }




    /* =========================================
       MESA · 3 BLOQUES FÍSICOS FIJOS
       ========================================= */

    .human-fixed-empty-block {
      position: relative;

      min-width: 86px;
      min-height: 53px;

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

      padding: 15px 8px 7px;

      border-radius: 9px;
      border:
        1px dashed
        rgba(237, 243, 239, 0.11);

      background:
        rgba(255,255,255,0.012);

      opacity: 0.34;

      transition:
        opacity 0.14s ease,
        transform 0.14s ease,
        border-color 0.14s ease,
        background 0.14s ease,
        box-shadow 0.14s ease;
    }

    .human-fixed-empty-block::before {
      content:
        attr(data-block-label);

      position: absolute;
      top: 4px;
      left: 6px;

      color:
        rgba(237, 243, 239, 0.35);

      font-family:
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

      font-size: 0.31rem;
      font-weight: 900;
      letter-spacing: 0.3px;
    }

    .human-fixed-empty-block::after {
      content: "SOLTÁ AQUÍ";

      color:
        rgba(237, 243, 239, 0.20);

      font-family:
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

      font-size: 0.28rem;
      font-weight: 800;
      letter-spacing: 0.25px;
    }

    .human-fixed-empty-block.active-block-drop-target,
    .human-fixed-empty-block.table-drop-target {
      opacity: 1;

      transform:
        translateY(-3px)
        scale(1.035);

      border-color:
        rgba(101, 215, 169, 0.92);

      background:
        rgba(52, 150, 109, 0.10);

      box-shadow:
        0 0 0 2px
          rgba(101, 215, 169, 0.13),
        0 0 18px
          rgba(101, 215, 169, 0.18);
    }

    .human-fixed-empty-block.active-block-drop-target::after,
    .human-fixed-empty-block.table-drop-target::after {
      color:
        rgba(164, 239, 207, 0.90);
    }

    .game-screen.display-fit
    .human-fixed-empty-block {
      min-width: 65px;
      min-height: 42px;

      padding:
        12px 5px 5px;
    }

    .game-screen.display-fit
    .human-fixed-empty-block::before {
      top: 3px;
      left: 4px;

      font-size: 0.26rem;
    }

    .game-screen.display-fit
    .human-fixed-empty-block::after {
      font-size: 0.23rem;
    }


    /* ===== v134 · MENÚ MÁS LIMPIO ===== */

    .menu-home-status,
    .menu-home-status-dot {
      display: none !important;
    }

    .desmoche-main-menu
    .btn.menu-secondary-row.menu-featured-row {
      min-height: 46px !important;
      margin: 0 !important;
      padding: 6px 10px !important;
      border: none !important;
      border-bottom:
        1px solid rgba(185, 149, 78, 0.22) !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    .menu-secondary-list {
      margin-top: 6px !important;
    }

    /* Tutorial con ícono propio, sin emoji */
    .tutorial-cap-icon {
      position: relative;
      overflow: visible;
      font-size: 0 !important;
    }

    .tutorial-cap-top {
      position: absolute;
      left: 50%;
      top: 7px;

      width: 15px;
      height: 9px;

      transform:
        translateX(-50%)
        rotate(45deg);

      border:
        1.3px solid
        rgba(230, 201, 120, 0.92);

      background:
        rgba(230, 201, 120, 0.03);
    }

    .tutorial-cap-band {
      position: absolute;
      left: 50%;
      top: 15px;

      width: 12px;
      height: 5px;

      transform:
        translateX(-50%);

      border-left:
        1.3px solid
        rgba(230, 201, 120, 0.92);

      border-right:
        1.3px solid
        rgba(230, 201, 120, 0.92);

      border-bottom:
        1.3px solid
        rgba(230, 201, 120, 0.92);

      border-radius:
        0 0 6px 6px;
    }

    .tutorial-cap-tassel {
      position: absolute;
      left: calc(50% + 6px);
      top: 9px;

      width: 6px;
      height: 10px;

      border-left:
        1.2px solid
        rgba(230, 201, 120, 0.88);

      border-bottom:
        1.2px solid
        rgba(230, 201, 120, 0.88);

      border-radius:
        0 0 0 5px;
    }

    .tutorial-cap-tassel::after {
      content: "";

      position: absolute;
      left: -2px;
      bottom: -2px;

      width: 3px;
      height: 3px;

      border-radius: 50%;

      background:
        rgba(230, 201, 120, 0.92);
    }

  
    /* =======================================
       v135 · MENÚ LIMPIO INSPIRADO EN UX TIPO BALATRO
    ======================================= */

    .desmoche-main-menu {
      max-width: 340px !important;
      padding:
        26px 16px 20px !important;
    }

    .menu-primary-actions {
      max-width: 300px !important;
    }

    .desmoche-main-menu
    .btn.menu-primary-action {
      min-height: 66px !important;
      margin-bottom: 9px !important;
      border-radius: 4px !important;
      box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.20) !important;
    }

    .desmoche-main-menu
    .btn-offline.menu-primary-action {
      background:
        linear-gradient(
          180deg,
          rgba(25, 76, 59, 0.96),
          rgba(8, 39, 29, 0.98)
        ) !important;

      border:
        1px solid rgba(226, 191, 101, 0.70) !important;
    }

    .menu-action-copy strong {
      font-size: 1.06rem !important;
    }

    .menu-action-copy small {
      font-size: 0.47rem !important;
    }

    .menu-quick-actions {
      width: 100%;
      max-width: 300px;
      margin: 12px auto 0;

      display: grid;
      grid-template-columns:
        repeat(3, minmax(0, 1fr));
      gap: 7px;
    }

    .menu-quick-button {
      min-width: 0;
      min-height: 58px;
      padding: 7px 4px;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;

      border-radius: 4px;
      border:
        1px solid rgba(185, 149, 78, 0.30);

      color:
        rgba(239, 233, 218, 0.90);

      background:
        rgba(3, 24, 18, 0.58);

      font-family:
        Georgia,
        "Times New Roman",
        serif;

      font-size: 0.72rem;
      letter-spacing: 0.1px;

      cursor: pointer;
    }

    .menu-quick-button:active {
      transform: scale(0.97);
    }

    .menu-quick-icon {
      width: 27px;
      height: 27px;

      display: grid;
      place-items: center;

      border:
        1px solid rgba(205, 170, 93, 0.42);

      border-radius: 50%;

      color: #d4b66f;

      font-family: Arial, sans-serif;
      font-size: 0.78rem;
    }

    .menu-quick-icon.tutorial-cap-icon {
      position: relative;
    }

    .menu-more-toggle[aria-expanded="true"] {
      border-color:
        rgba(220, 184, 95, 0.62);

      background:
        rgba(185, 149, 78, 0.10);
    }

    .more-dots-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
    }

    .more-dots-icon i {
      width: 3px;
      height: 3px;

      display: block;

      border-radius: 50%;
      background: currentColor;
    }

    .menu-more-panel {
      width: 100%;
      max-width: 300px;

      margin: 7px auto 0;

      overflow: hidden;

      border:
        1px solid rgba(185, 149, 78, 0.20);

      border-radius: 4px;

      background:
        rgba(2, 18, 13, 0.74);

      box-shadow:
        0 9px 24px rgba(0, 0, 0, 0.22);
    }

    .menu-more-panel[hidden] {
      display: none !important;
    }

    .menu-more-row {
      width: 100%;
      min-height: 43px;
      padding: 8px 12px;

      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;

      border: none;
      border-bottom:
        1px solid rgba(185, 149, 78, 0.13);

      color:
        rgba(238, 233, 222, 0.88);

      background: transparent;

      font-family:
        Georgia,
        "Times New Roman",
        serif;

      font-size: 0.76rem;
      text-align: left;

      cursor: pointer;
    }

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

    .menu-more-row:active:not(:disabled) {
      background:
        rgba(185, 149, 78, 0.07);
    }

    .menu-more-row > span:last-child {
      color:
        rgba(205, 170, 93, 0.55);

      font-family: Arial, sans-serif;
    }

    .menu-more-online {
      color:
        rgba(238, 233, 222, 0.28);

      cursor: not-allowed;
    }

    .menu-version-footer {
      margin-top: 15px !important;
    }

    .menu-footer-suits {
      opacity: 0.55;
    }

    @media (max-height: 760px) {
      .desmoche-main-menu {
        padding-top: 20px !important;
        padding-bottom: 15px !important;
      }

      .menu-title-divider {
        margin-bottom: 6px !important;
      }

      .menu-subtitle.subtitle {
        margin-bottom: 13px !important;
      }

      .menu-quick-actions {
        margin-top: 9px;
      }

      .menu-version-footer {
        margin-top: 10px !important;
      }
    }

  
    /* =======================================
       v136 · CONFIGURACIÓN OFFLINE CON FLECHAS
    ======================================= */

    .offline-card {
      max-width: 360px !important;
    }

    .offline-content {
      padding: 14px 16px 16px !important;
    }

    .offline-card .rules-header {
      padding-top: 14px;
      padding-bottom: 12px;
    }

    .offline-card .modal-subtitle {
      opacity: 0.58;
    }

    .offline-card .player-preview {
      padding: 10px 11px !important;
      border-radius: 10px !important;
      background: rgba(0, 0, 0, 0.12) !important;
    }

    .offline-player-mark {
      position: relative;
      width: 38px !important;
      height: 38px !important;
      flex-basis: 38px !important;
      border-radius: 50% !important;
      background: rgba(207, 176, 102, 0.05) !important;
    }

    .offline-player-mark::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 8px;
      width: 8px;
      height: 8px;
      transform: translateX(-50%);
      border: 1.4px solid rgba(226, 196, 124, 0.82);
      border-radius: 50%;
    }

    .offline-player-mark::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 7px;
      width: 17px;
      height: 9px;
      transform: translateX(-50%);
      border: 1.4px solid rgba(226, 196, 124, 0.82);
      border-bottom: none;
      border-radius: 10px 10px 0 0;
    }

    .offline-player-mark > span {
      display: none;
    }

    .offline-card .player-name-input {
      min-height: 34px !important;
      border-radius: 6px !important;
      font-size: 0.80rem !important;
    }

    .offline-card .player-name-note {
      display: none;
    }

    .offline-card .config-section {
      margin-top: 9px !important;
    }

    .offline-card .config-title {
      margin: 0 0 5px !important;
      padding-left: 2px;
      font-size: 0.55rem !important;
      letter-spacing: 0.8px !important;
      color: rgba(226, 196, 124, 0.58) !important;
    }

    .visually-hidden-config-title {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0,0,0,0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    .offline-arrow-selector {
      width: 100%;
      min-height: 62px;

      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) 42px;
      align-items: stretch;

      overflow: hidden;

      border: 1px solid rgba(185, 149, 78, 0.28);
      border-radius: 7px;

      background:
        linear-gradient(
          180deg,
          rgba(8, 39, 30, 0.82),
          rgba(3, 24, 18, 0.90)
        );

      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.025);
    }

    .offline-arrow-button {
      min-width: 0;
      border: none;
      color: rgba(224, 194, 120, 0.78);
      background: rgba(0,0,0,0.13);
      font-family: Georgia, serif;
      font-size: 1.55rem;
      cursor: pointer;
    }

    .offline-arrow-button:first-child {
      border-right: 1px solid rgba(185,149,78,0.13);
    }

    .offline-arrow-button:last-child {
      border-left: 1px solid rgba(185,149,78,0.13);
    }

    .offline-arrow-button:active {
      color: #f0d276;
      background: rgba(185,149,78,0.10);
    }

    .offline-arrow-value {
      min-width: 0;

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

      text-align: center;
    }

    .offline-arrow-value small {
      color: rgba(238, 232, 218, 0.44);
      font-family: "Segoe UI", Roboto, Arial, sans-serif;
      font-size: 0.43rem;
      font-weight: 750;
      letter-spacing: 1px;
    }

    .offline-arrow-value strong {
      margin-top: 4px;
      color: #f1e9d7;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 0.90rem;
      font-weight: 500;
      letter-spacing: 0.5px;
    }

    /* Los botones anteriores siguen vivos para la lógica, pero ya no cargan la pantalla. */
    .offline-card .bot-options,
    .offline-card .bot-skill-options,
    .offline-card .game-mode-options,
    .offline-card .bot-skill-hint,
    .offline-card .game-mode-hint {
      display: none !important;
    }

    .offline-card .special-rules-collapsible {
      margin-top: 10px !important;
    }

    .offline-card .special-rules-toggle {
      min-height: 48px !important;
      padding: 9px 11px !important;
      border-radius: 7px !important;
      text-transform: none !important;
      background: rgba(3, 24, 18, 0.72) !important;
    }

    .offline-card .special-rules-toggle-main {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 0.76rem !important;
      font-weight: 500 !important;
      letter-spacing: 0.15px !important;
      text-transform: none !important;
    }

    .offline-card .special-rules-toggle-status {
      font-size: 0.52rem !important;
    }

    .offline-card .match-summary {
      margin-top: 10px !important;
      padding: 8px 10px !important;
      border-radius: 7px !important;
      background: rgba(0,0,0,0.12) !important;
    }

    .offline-card .summary-label {
      display: none;
    }

    .offline-card .summary-text {
      margin: 0 !important;
      font-size: 0.67rem !important;
      font-weight: 600 !important;
      color: rgba(239,233,219,0.70) !important;
    }

    .offline-card .summary-text strong {
      color: rgba(241,208,109,0.88) !important;
    }

    .offline-card .start-match {
      min-height: 55px !important;
      margin-top: 11px !important;
      border-radius: 7px !important;
      font-family: Georgia, "Times New Roman", serif !important;
      font-size: 0.92rem !important;
      font-weight: 700 !important;
      letter-spacing: 0.6px !important;
    }

    .offline-card .config-note {
      margin-top: 7px !important;
      font-size: 0.49rem !important;
      opacity: 0.52;
    }

    @media (max-height: 760px) {
      .offline-arrow-selector {
        min-height: 54px;
      }

      .offline-card .player-preview {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
      }

      .offline-card .start-match {
        min-height: 49px !important;
      }
    }

  
    /* =======================================
       v137 · AYUDAS DE INFORMACIÓN OFFLINE
    ======================================= */

    .offline-arrow-label-row {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }

    .offline-info-button {
      width: 17px;
      height: 17px;
      min-width: 17px;
      padding: 0;

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

      border-radius: 50%;
      border:
        1px solid rgba(221, 190, 114, 0.52);

      color:
        rgba(235, 209, 143, 0.90);

      background:
        rgba(221, 190, 114, 0.055);

      font-family:
        Georgia,
        "Times New Roman",
        serif;

      font-size: 0.58rem;
      font-weight: 800;
      font-style: italic;
      line-height: 1;

      cursor: pointer;
    }

    .offline-info-button:active {
      transform: scale(0.94);
      background:
        rgba(221, 190, 114, 0.14);
    }

    .offline-arrow-value
    .offline-info-button {
      margin-top: -1px;
    }

    .special-rules-toggle-copy {
      min-width: 0;

      display: flex !important;
      flex-direction: column;
      align-items: flex-start !important;
      gap: 2px !important;
    }

    .special-rules-title-row {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .special-rules-toggle-copy > small {
      color:
        rgba(237, 243, 239, 0.44);

      font-family:
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

      font-size: 0.45rem;
      font-weight: 650;
      line-height: 1.1;
      letter-spacing: 0.2px;
    }

    .offline-info-popover {
      position: relative;

      margin-top: 9px;
      padding: 11px 34px 11px 12px;

      border:
        1px solid rgba(221, 190, 114, 0.28);

      border-radius: 8px;

      background:
        linear-gradient(
          180deg,
          rgba(13, 48, 37, 0.96),
          rgba(5, 29, 21, 0.98)
        );

      box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.22);

      text-align: left;
    }

    .offline-info-popover[hidden] {
      display: none !important;
    }

    .offline-info-popover strong {
      display: block;

      color:
        #efd071;

      font-family:
        Georgia,
        "Times New Roman",
        serif;

      font-size: 0.72rem;
      font-weight: 600;
    }

    .offline-info-popover p {
      margin-top: 4px;

      color:
        rgba(238, 243, 240, 0.68);

      font-size: 0.55rem;
      line-height: 1.35;
    }

    .offline-info-close {
      position: absolute;
      top: 6px;
      right: 7px;

      width: 24px;
      height: 24px;
      padding: 0;

      border: none;

      color:
        rgba(235, 209, 143, 0.75);

      background: transparent;

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

      cursor: pointer;
    }

  
    /* =======================================
       v138 · AJUSTE DE ÍCONOS DE INFORMACIÓN
    ======================================= */

    .offline-info-button {
      width: 15px !important;
      height: 15px !important;
      min-width: 15px !important;

      font-size: 0.50rem !important;

      border-color:
        rgba(221, 190, 114, 0.42) !important;

      color:
        rgba(235, 209, 143, 0.76) !important;

      background:
        rgba(221, 190, 114, 0.035) !important;
    }

    .offline-arrow-label-row {
      gap: 4px !important;
    }

    .special-rules-title-row {
      display: inline-flex !important;
      align-items: center !important;
      gap: 5px !important;
    }

    .offline-info-button-special {
      transform: translateY(-1px);
    }

    .special-rules-toggle-copy > small {
      margin-top: 1px;
      padding-left: 0;

      color:
        rgba(237, 243, 239, 0.40) !important;

      font-size: 0.44rem !important;
    }

  
    /* =======================================
       v139 · AYUDA SIN ÍCONOS i
    ======================================= */

    .offline-info-button,
    .offline-info-popover {
      display: none !important;
    }

    .offline-arrow-value {
      padding: 5px 8px !important;
    }

    .offline-selector-summary {
      margin-top: 3px;

      color: rgba(238, 232, 218, 0.34);

      font-family:
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

      font-size: 0.39rem;
      font-weight: 600;
      line-height: 1.12;
      letter-spacing: 0.08px;
    }

    .special-rules-toggle-copy > small {
      margin-top: 2px !important;

      color: rgba(237, 243, 239, 0.32) !important;

      font-size: 0.42rem !important;
      line-height: 1.1 !important;
    }

    .special-rules-open-description {
      margin-bottom: 8px;
      padding: 9px 10px;

      border: 1px solid rgba(185, 149, 78, 0.15);
      border-radius: 7px;

      background: rgba(255, 255, 255, 0.025);

      text-align: left;
    }

    .special-rules-open-description strong {
      display: block;

      color: rgba(239, 208, 113, 0.90);

      font-family:
        Georgia,
        "Times New Roman",
        serif;

      font-size: 0.62rem;
      font-weight: 600;
    }

    .special-rules-open-description p {
      margin-top: 4px;

      color: rgba(238, 243, 240, 0.50);

      font-size: 0.48rem;
      line-height: 1.35;
    }

  
    /* =======================================
       v140 · PERFIL DE PROGRESIÓN
    ======================================= */

    .profile-v140 {
      max-width: 420px;
      padding-bottom: 18px;
    }

    .profile-v140-hero {
      margin: 13px 13px 9px;
      padding: 13px;

      display: grid;
      grid-template-columns:
        52px minmax(0, 1fr) auto;
      gap: 11px;
      align-items: center;

      border: 1px solid rgba(209, 174, 91, 0.24);
      border-radius: 14px;

      background:
        linear-gradient(
          145deg,
          rgba(209, 174, 91, 0.075),
          rgba(0, 0, 0, 0.10)
        );
    }

    .profile-v140-avatar {
      width: 52px;
      height: 52px;

      display: grid;
      place-items: center;

      border-radius: 12px;
      border: 1px solid rgba(234, 205, 128, 0.62);

      color: #f0d37b;

      background:
        linear-gradient(
          180deg,
          rgba(25, 75, 58, 0.96),
          rgba(7, 35, 27, 0.98)
        );

      font-family: Georgia, serif;
      font-size: 1.35rem;

      box-shadow:
        inset 0 0 0 2px rgba(209,174,91,0.05);
    }

    .profile-v140-identity {
      min-width: 0;
    }

    .profile-v140-identity h3 {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      color: #f3ead7;
      font-family: Georgia, serif;
      font-size: 1rem;
      font-weight: 500;
    }

    .profile-v140-tags {
      margin-top: 4px;

      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }

    .profile-v140-tags span {
      padding: 3px 6px;

      border: 1px solid rgba(209,174,91,0.16);
      border-radius: 999px;

      color: rgba(238,235,225,0.55);
      background: rgba(0,0,0,0.10);

      font-size: 0.43rem;
      font-weight: 700;
    }

    .profile-v140-level-line {
      margin-top: 8px;

      display: flex;
      justify-content: space-between;
      gap: 8px;

      font-size: 0.48rem;
    }

    .profile-v140-level-line strong {
      color: #e5c46c;
    }

    .profile-v140-level-line span {
      color: rgba(238,235,225,0.48);
    }

    .profile-v140-progress {
      height: 6px;
      margin-top: 4px;
    }

    .profile-v140-wallet {
      min-width: 66px;

      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;

      text-align: center;
    }

    .profile-v140-wallet div {
      display: flex;
      flex-direction: column;
    }

    .profile-v140-wallet small {
      color: rgba(238,235,225,0.42);
      font-size: 0.39rem;
      letter-spacing: 0.6px;
    }

    .profile-v140-wallet strong {
      margin-top: 2px;
      color: #eacb72;
      font-size: 0.82rem;
    }

    .profile-v140-coin {
      position: relative;

      width: 28px;
      height: 28px;

      display: block;

      border: 2px solid #d1a83f;
      border-radius: 50%;

      background:
        radial-gradient(
          circle at 35% 30%,
          #f2dc88,
          #bf8e27 72%
        );

      box-shadow:
        inset 0 0 0 3px rgba(83,54,8,0.18),
        0 4px 8px rgba(0,0,0,0.24);
    }

    .profile-v140-coin::after {
      content: "D";

      position: absolute;
      inset: 0;

      display: grid;
      place-items: center;

      color: #684810;

      font-family: Georgia, serif;
      font-size: 0.68rem;
      font-weight: 900;
    }

    .profile-v140-section {
      margin: 9px 13px 0;
      padding: 12px;

      border: 1px solid rgba(255,255,255,0.065);
      border-radius: 13px;

      background: rgba(255,255,255,0.022);
    }

    .profile-v140-section-head {
      margin-bottom: 9px;

      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .profile-v140-section-head small {
      color: rgba(209,174,91,0.55);
      font-size: 0.40rem;
      font-weight: 850;
      letter-spacing: 0.9px;
    }

    .profile-v140-section-head h3 {
      margin-top: 2px;

      color: #efd275;

      font-family: Georgia, serif;
      font-size: 0.78rem;
      font-weight: 500;
    }

    .profile-v140-stat-grid {
      display: grid;
      grid-template-columns:
        repeat(3, minmax(0, 1fr));
      gap: 6px;
    }

    .profile-v140-stat {
      min-width: 0;
      min-height: 66px;
      padding: 7px 4px;

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

      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 9px;

      background: rgba(0,0,0,0.11);

      text-align: center;
    }

    .profile-v140-stat strong {
      margin-top: 4px;

      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;

      color: #f0eee5;
      font-size: 0.78rem;
    }

    .profile-v140-stat small {
      margin-top: 3px;

      color: rgba(238,235,225,0.43);
      font-size: 0.39rem;
      line-height: 1.1;
    }

    .traditional-error-stat strong {
      color: #e79079;
    }

    .profile-stat-icon {
      position: relative;

      width: 19px;
      height: 19px;

      display: block;

      color: #cbaa59;
    }

    .cards-icon::before,
    .cards-icon::after {
      content: "";
      position: absolute;

      width: 10px;
      height: 14px;

      border: 1.2px solid currentColor;
      border-radius: 2px;
    }

    .cards-icon::before {
      left: 2px;
      top: 3px;
      transform: rotate(-12deg);
    }

    .cards-icon::after {
      right: 2px;
      top: 2px;
      transform: rotate(10deg);
    }

    .crown-icon {
      clip-path:
        polygon(
          7% 30%,
          28% 50%,
          50% 18%,
          72% 50%,
          93% 30%,
          83% 82%,
          17% 82%
        );
      background: currentColor;
    }

    .target-icon {
      border: 1.3px solid currentColor;
      border-radius: 50%;
    }

    .target-icon::before,
    .target-icon::after {
      content: "";
      position: absolute;
      inset: 4px;

      border: 1px solid currentColor;
      border-radius: 50%;
    }

    .target-icon::after {
      inset: 8px;
      background: currentColor;
    }

    .cut-icon::before,
    .cut-icon::after {
      content: "";
      position: absolute;
      left: 8px;
      top: 2px;

      width: 2px;
      height: 17px;

      border-radius: 2px;
      background: currentColor;
    }

    .cut-icon::before {
      transform: rotate(37deg);
    }

    .cut-icon::after {
      transform: rotate(-37deg);
    }

    .streak-icon {
      clip-path:
        polygon(
          52% 0,
          78% 34%,
          66% 42%,
          91% 71%,
          54% 100%,
          15% 73%,
          35% 47%,
          25% 36%
        );
      background: currentColor;
    }

    .clock-icon-css {
      border: 1.3px solid currentColor;
      border-radius: 50%;
    }

    .clock-icon-css::before {
      content: "";
      position: absolute;
      left: 8px;
      top: 4px;

      width: 1.3px;
      height: 6px;

      background: currentColor;

      transform-origin: bottom;
      transform: rotate(-25deg);
    }

    .traditional-profile-section {
      border-color: rgba(203,135,106,0.16);
    }

    .traditional-profile-mark {
      width: 27px;
      height: 27px;

      display: grid;
      place-items: center;

      border: 1px solid rgba(213,151,123,0.38);
      border-radius: 50%;

      color: #dcaa92;

      font-family: Georgia, serif;
      font-size: 0.68rem;
    }

    .profile-v140-text-button {
      padding: 4px 0;

      border: none;

      color: rgba(229,197,112,0.72);
      background: transparent;

      font-size: 0.47rem;
      font-weight: 850;
      letter-spacing: 0.35px;

      cursor: pointer;
    }

    .profile-badge-showcase {
      display: grid;
      grid-template-columns:
        repeat(3, minmax(0, 1fr));
      gap: 6px;
    }

    .profile-showcase-badge {
      min-width: 0;
      min-height: 91px;
      padding: 8px 4px;

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

      border: 1px solid rgba(209,174,91,0.22);
      border-radius: 10px;

      background:
        linear-gradient(
          180deg,
          rgba(209,174,91,0.075),
          rgba(0,0,0,0.08)
        );

      text-align: center;
    }

    .profile-showcase-badge.locked {
      opacity: 0.28;
      filter: grayscale(0.75);
    }

    .profile-showcase-badge strong {
      margin-top: 6px;
      color: #e8cf88;
      font-size: 0.52rem;
    }

    .profile-showcase-badge small {
      margin-top: 3px;
      color: rgba(238,235,225,0.42);
      font-size: 0.36rem;
      line-height: 1.1;
    }

    .badge-symbol {
      position: relative;

      width: 32px;
      height: 32px;

      display: grid;
      place-items: center;

      border: 1.2px solid rgba(231,199,112,0.65);
      border-radius: 50%;

      color: #e4c871;

      font-family: Georgia, serif;
      font-size: 0.48rem;
      font-weight: 800;
    }

    .badge-desmoche-symbol::before,
    .badge-desmoche-symbol::after {
      content: "";
      position: absolute;

      width: 2px;
      height: 18px;

      border-radius: 2px;

      background: currentColor;
    }

    .badge-desmoche-symbol::before {
      transform: rotate(38deg);
    }

    .badge-desmoche-symbol::after {
      transform: rotate(-38deg);
    }

    .badge-clean-symbol::before {
      content: "";

      width: 13px;
      height: 9px;

      border: 1.2px solid currentColor;
      border-radius: 2px;
    }

    .badge-clean-symbol::after {
      content: "";

      position: absolute;
      right: 5px;
      top: 4px;

      width: 6px;
      height: 6px;

      clip-path:
        polygon(
          50% 0,
          62% 38%,
          100% 50%,
          62% 62%,
          50% 100%,
          38% 62%,
          0 50%,
          38% 38%
        );

      background: currentColor;
    }

    .profile-online-preview {
      opacity: 0.76;
    }

    .profile-coming-soon {
      padding: 4px 6px;

      border: 1px solid rgba(209,174,91,0.16);
      border-radius: 999px;

      color: rgba(229,197,112,0.50);

      font-size: 0.37rem;
      font-weight: 800;
    }

    .profile-online-locked {
      display: flex;
      align-items: center;
      gap: 10px;

      color: rgba(238,235,225,0.42);

      font-size: 0.47rem;
      line-height: 1.35;
    }

    .online-trophy-outline {
      position: relative;

      width: 27px;
      height: 24px;
      flex: 0 0 27px;

      border: 1.3px solid rgba(209,174,91,0.44);
      border-radius: 3px 3px 9px 9px;
    }

    .online-trophy-outline::before {
      content: "";

      position: absolute;
      left: 10px;
      bottom: -7px;

      width: 5px;
      height: 7px;

      border-bottom: 1.3px solid rgba(209,174,91,0.44);
    }

    .profile-legacy-data {
      display: none !important;
    }

    .profile-achievements-overlay {
      position: fixed;
      inset: 0;
      z-index: 2200;

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

      padding: 14px;

      background: rgba(0,0,0,0.76);

      backdrop-filter: blur(7px);
      -webkit-backdrop-filter: blur(7px);
    }

    .profile-achievements-overlay[hidden] {
      display: none !important;
    }

    .profile-achievements-card {
      width: min(100%, 390px);
      max-height: 88dvh;
      padding: 14px;

      overflow-y: auto;

      border: 1px solid rgba(209,174,91,0.32);
      border-radius: 17px;

      background:
        linear-gradient(
          180deg,
          #153c31,
          #071d17
        );

      box-shadow:
        0 20px 55px rgba(0,0,0,0.55);
    }

    .profile-achievements-card header {
      position: sticky;
      top: -14px;
      z-index: 2;

      margin: -14px -14px 9px;
      padding: 13px 14px 10px;

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

      border-bottom: 1px solid rgba(209,174,91,0.13);

      background: rgba(11,43,34,0.97);
    }

    .profile-achievements-card header small {
      color: rgba(209,174,91,0.52);
      font-size: 0.40rem;
      letter-spacing: 0.8px;
    }

    .profile-achievements-card header h2 {
      margin-top: 2px;

      color: #efd175;
      font-family: Georgia, serif;
      font-size: 0.94rem;
    }

    .profile-achievements-card header button {
      width: 30px;
      height: 30px;

      border: 1px solid rgba(209,174,91,0.19);
      border-radius: 9px;

      color: #e5c369;
      background: rgba(255,255,255,0.03);

      font-size: 1rem;
      cursor: pointer;
    }

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

    .achievement-row {
      min-height: 67px;
      padding: 8px;

      display: grid;
      grid-template-columns:
        34px minmax(0,1fr) 20px;
      gap: 8px;
      align-items: center;

      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;

      background: rgba(0,0,0,0.11);
    }

    .achievement-row.complete {
      border-color: rgba(209,174,91,0.30);

      background:
        linear-gradient(
          90deg,
          rgba(209,174,91,0.08),
          rgba(0,0,0,0.09)
        );
    }

    .achievement-medal {
      width: 30px;
      height: 30px;

      display: block;

      border: 1.3px solid rgba(209,174,91,0.48);
      border-radius: 50%;

      background:
        radial-gradient(
          circle,
          rgba(209,174,91,0.10),
          transparent 68%
        );
    }

    .achievement-copy {
      min-width: 0;
    }

    .achievement-copy strong {
      display: block;

      color: #ece4d1;
      font-size: 0.57rem;
    }

    .achievement-copy small {
      display: block;
      margin-top: 2px;

      color: rgba(238,235,225,0.42);
      font-size: 0.42rem;
      line-height: 1.2;
    }

    .achievement-copy > span {
      display: block;
      margin-top: 4px;

      color: rgba(220,190,112,0.60);
      font-size: 0.39rem;
      line-height: 1.1;
    }

    .achievement-progress {
      height: 4px;
      margin-top: 5px;

      overflow: hidden;

      border-radius: 999px;
      background: rgba(0,0,0,0.28);
    }

    .achievement-progress i {
      display: block;
      height: 100%;

      border-radius: inherit;

      background:
        linear-gradient(
          90deg,
          #a67c23,
          #e4c65f
        );
    }

    .achievement-row > b {
      color: rgba(209,174,91,0.52);
      font-size: 0.68rem;
      text-align: center;
    }

    .achievement-row.complete > b {
      color: #e6c867;
    }

    @media (max-width: 350px) {
      .profile-v140-hero {
        grid-template-columns:
          45px minmax(0,1fr) 58px;

        gap: 8px;
      }

      .profile-v140-avatar {
        width: 45px;
        height: 45px;
      }

      .profile-v140-stat-grid {
        gap: 4px;
      }

      .profile-v140-stat {
        min-height: 61px;
      }
    }

  
    /* v141 · BLINDAJE VISUAL TRADICIONAL */
    .game-screen.traditional-mode-ui
    .intermediate-combo-highlight,
    .game-screen.traditional-mode-ui
    .intermediate-combo-anchor,
    .game-screen.traditional-mode-ui
    .beginner-hint,
    .game-screen.traditional-mode-ui
    .beginner-hint-card {
      animation: none !important;
      outline: none !important;
      filter: none !important;
      box-shadow:
        0 4px 9px rgba(0, 0, 0, 0.30) !important;
    }

  
    /* =======================================
       v142 · TRADICIONAL SIN ASISTENCIA VISUAL
    ======================================= */

    .game-screen.traditional-mode-ui
    .playing-card.intermediate-combo-highlight,
    .game-screen.traditional-mode-ui
    .playing-card.intermediate-combo-anchor,
    .game-screen.traditional-mode-ui
    .discard-card.intermediate-combo-highlight,
    .game-screen.traditional-mode-ui
    .discard-card.intermediate-combo-anchor {
      animation: none !important;
      filter: none !important;
      outline: none !important;

      box-shadow:
        0 4px 9px rgba(0, 0, 0, 0.30) !important;
    }

    .game-screen.traditional-mode-ui
    #discardChoice.show {
      display: none !important;
    }

  
    /* v145 · Tradicional real: sin ayudas y con corrección manual */
    .game-screen.traditional-mode-ui
    .playing-card.intermediate-combo-highlight,
    .game-screen.traditional-mode-ui
    .playing-card.intermediate-combo-anchor {
      box-shadow:
        0 4px 9px rgba(0,0,0,0.30) !important;
      outline: none !important;
      filter: none !important;
      animation: none !important;
    }

    .game-screen.traditional-mode-ui
    .human-hand.traditional-return-target {
      outline: 1px dashed rgba(222,190,110,0.58);
      outline-offset: 4px;
      background: rgba(222,190,110,0.035);
    }

  
    /* v146 · Tradicional: cero asistencia visual */
    .game-screen.traditional-mode-ui .playing-card {
      outline-color: transparent !important;
    }
    .game-screen.traditional-mode-ui .intermediate-combo-highlight,
    .game-screen.traditional-mode-ui .intermediate-combo-anchor,
    .game-screen.traditional-mode-ui .beginner-hint-card {
      animation: none !important;
      filter: none !important;
      outline: none !important;
      box-shadow: 0 4px 9px rgba(0,0,0,.30) !important;
    }


    /* =======================================
       v147 · TRADICIONAL: REVERSIBLE HASTA VALIDAR
    ======================================= */

    .game-screen.traditional-mode-ui
    .table-meld.traditional-invalid,
    .game-screen.traditional-mode-ui
    .table-meld.invalid {
      cursor: grab;
    }